@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&display=swap');

@media (max-width: 1024px) {
}

@media (max-width: 599px) {
}

:root {
    --color-main: #3da9c2;
}

main {
    background-color: #f5f8fa;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
}


/* ===============================================
   header
=============================================== */
.nav {
    background: #AED2F0;
    background: linear-gradient(45deg,rgba(174, 210, 240, 1) 0%, rgba(240, 238, 247, 1) 51%, rgba(236, 194, 218, 1) 100%);
}

.nav_actions {
    border: 1px solid #fff;
    background-color: #fff;
}

.nav_actions a {
    color: #fff;
    background: #46B2E7;
    background: linear-gradient(45deg,rgba(70, 178, 231, 1) 0%, rgba(232, 144, 186, 1) 100%);
}

.nav_actions a::before {
    background-color: #46b2e7;
}

.nav_actions a span::before {
    background-color: #fff;
}

.nav_sns a {
    background-color: #46b2e7;
}


/* ===============================================
   button
=============================================== */
.button {
    width: clamp(0px, 25vw, 300px);
    aspect-ratio: 300 / 50;
    border: 1px solid var(--color-main);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-main);
    background-color: transparent;
    font-size: clamp(0px, 1.3vw, 15px);
    letter-spacing: 0.1em;
    font-weight: 500;
    position: relative;
}

.button_2 {
    width: clamp(0px, 42.5vw, 510px);
    aspect-ratio: 510 / 80;
    font-size: clamp(0px, 1.4vw, 17px);
    letter-spacing: 0.05em;
}

.button:hover {
    color: #fff;
    background-color: var(--color-main);
}

.button::before {
    content: "";
    width: clamp(0px, 4.2vw, 50px);
    height: 3px;
    background-color: var(--color-main);
    position: absolute;
    top: 0;
    bottom: 0;
    right: clamp(-25px, -2.1vw, 0px);
    margin: auto;
}

.button_2::before {
    width: clamp(0px, 6.7vw, 80px);
    right: clamp(-40px, -3.3vw, 0px);
}

.button::after {
    content: "";
    width: 3px;
    height: clamp(0px, 4.2vw, 50px);
    background-color: var(--color-main);
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1.5px;
    margin: auto;
}

.button_2::after {
    height: clamp(0px, 6.7vw, 80px);
}

@media (max-width: 599px) {
    .button {
        width: 76.5dvw;
        aspect-ratio: 765 / 150;
        font-size: 3dvw;
    }

    .button_2 {
        width: 76.5dvw;
        aspect-ratio: 765 / 150;
        font-size: 3dvw;
        line-height: 1.5em;
        letter-spacing: 0.1em;
        text-align: center;
    }

    .button::before {
        width: 15dvw;
        height: 0.7dvw;
        right: -7.5dvw;
    }

    .button_2::before {
        width: 15dvw;
        right: -7.5dvw;
    }

    .button::after {
        content: "";
        width: 0.7dvw;
        height: 15dvw;
        right: -0.35dvw;
    }

    .button_2::after {
        height: 15dvw;
    }
}


/* ===============================================
   title
=============================================== */
.cont_title_en {
    font-size: clamp(0px, 2.5vw, 30px);
    font-family: "Cormorant Infant", serif;
    line-height: 1;
    margin-bottom: 0.5em;
}

.cont_title {
    font-size: clamp(0px, 2.9vw, 35px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.15em;
    padding-bottom: 1.3em;
    margin-bottom: 0.6em;
    position: relative;
}

.cont_title::first-letter {
  color: var(--color-main);
}

.cont_title::after {
    content: "";
    width: 1.8em;
    height: clamp(0px, 0.4vw, 5px);
    background-color: #faee2b;
    position: absolute;
    bottom: 0;
    left: 0.1em;
}

.cont_text {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 2.5em;
}

.cont_title_center {
    text-align: center;
}

.cont_title_center .cont_title_en {
    font-size: clamp(0px, 2.5vw, 30px);
    font-family: "Cormorant Infant", serif;
    line-height: 1;
    margin-bottom: 0.8em;
}

.cont_title_center .cont_title {
    line-height: 1.6em;
    padding-bottom: 1.2em;
    margin-bottom: 1em;
}

.cont_title_center .cont_title::after {
    left: 0;
    right: 0;
    margin: auto;
}

@media (max-width: 599px) {
    .cont_title_en {
        font-size: 6dvw;
    }

    .cont_title {
        font-size: 7dvw;
        line-height: 1.6em;
        letter-spacing: 0.1em;
        padding-bottom: 0.9em;
    }
    
    .cont_title::after {
        height: 1dvw;
    }

    .cont_text {
        font-size: 3.8dvw;
        line-height: 2.2em;
        letter-spacing: 0;
    }
    
    .cont_title_center .cont_title_en {
        font-size: 6dvw;
        margin-bottom: 0.3em;
    }
    
    .cont_title_center .cont_title {
        line-height: 1.6em;
        padding-bottom: 0.9em;
        margin-bottom: 0.6em;
    }

    .cont_title_center .cont_title::after {
        left: 0.1em;
        right: inherit;
    }
}


/* ===============================================
   mv
=============================================== */
#mv {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(0px, 2.5vw, 30px);
}

#mv .mv_text {
    width: clamp(0px, 100vw, 1680px);
    text-align: right;
    position: relative;
    z-index: 3;
}

#mv .mv_img {
    width: 84vw;
    height: 45.3vw;
    max-height: 870px;
    border-radius: clamp(0px, 3.7vw, 150px) clamp(0px, 3.7vw, 150px) 0 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#mv .mv_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center left;
}

#mv .mv_img .nosp {
    display: none;
}

#mv .mv_text_rl {
    width: 97%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 2;
    text-align: right;
}

#mv .mv_title {
    width: 84vw;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9vw;
    z-index: 2;
}

#mv .mv_title h1 {
    width: clamp(0px, 26.7vw, 320px);
    aspect-ratio: 320 / 46;
    font-size: clamp(0px, 2.5vw, 30px);
    line-height: 1;
    letter-spacing: 0.15em;
    padding-left: 0.15em;
    background-color: var(--color-main);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: clamp(-85px, -7.1vw, 0px);
    left: 0;
}

#mv .mv_title h1  span {
    width: clamp(0px, 11.7vw, 140px);
    height: clamp(0px, 3.8vw, 45px);
    font-size: clamp(0px, 1.7vw, 20px);
    line-height: 1;
    background-color: var(--color-main);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: clamp(-65px, -5.4vw, 0px);
    left: 0;
}

@media (max-width: 1366px) {
    #mv .mv_text {
        width: clamp(0px, 102.49vw, 1400px);
        text-align: left;
    }
    
    #mv .mv_img {
        width: clamp(0px, 91.7vw, 1100px);
        height: auto;
        aspect-ratio: 1100 / 670;
    }

    #mv .mv_img .wide {
        display: none;
    }

    #mv .mv_img .nosp {
        display: block;
    }
    
    #mv .mv_text_rl {
        width: clamp(0px, 100vw, 1366px);
    }
    
    #mv .mv_title {
        width: clamp(0px, 91.7vw, 1100px);
        position: relative;
        bottom: inherit;
    }
}

@media (max-width: 599px) {
    #mv {
        align-items: flex-start;
        margin-bottom: 21dvw;
    }

    #mv .mv_text {
        width: 100%;
    }

    #mv .mv_img {
        width: 89.5dvw;
        aspect-ratio: inherit;
        border-radius: 0 5dvw 0 0;
    }

    #mv .mv_text_rl {
        width: 100%;
        top: inherit;
        bottom: 0;
    }

    #mv .mv_title {
        width: 84%;
    }

    #mv .mv_title h1 {
        width: 70dvw;
        aspect-ratio: 70 / 10;
        font-size: 6.6dvw;
        bottom: -15dvw;
    }

    #mv .mv_title h1  span {
        width: 100dvw;
        height: 10dvw;
        font-size: 4.4dvw;
        top: -14dvw;
        left: initial;
        right: 40dvw;
        justify-content: flex-end;
        padding-right: 1em;
    }
}


/* ===============================================
   about
=============================================== */
#about {
    width: clamp(0px, 91.7vw, 1100px);
    padding-bottom: clamp(0px, 16.7vw, 200px);
    margin: 0 auto;
    background: url("../img/shinri/about_bg.png") no-repeat top center / contain;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.about_img {
    width: clamp(0px, 33.3vw, 400px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2.5vw, 30px);
}

.about_img li {
    width: 100%;
    aspect-ratio: 400 / 320;
    border-radius: 0 0 clamp(0px, 4.2vw, 50px) 0; 
    overflow: hidden;
}

.about_img li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about_main {
    padding-top: clamp(0px, 16.7vw, 200px);
}

@media (max-width: 599px) {
    #about {
        width: 100%;
        padding: 0 5dvw 19dvw;
        background-image: url("../img/shinri/about_bg_sp.png");
        display: flex;
        flex-direction: column;
    }

    .about_img {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0 2dvw;
    }

    .about_img li {
        width: 41dvw;
        aspect-ratio: 410 / 330;
        border-radius: 0 0 5dvw 0;
    }

    .about_main {
        width: 84dvw;
        margin: 0 auto;
        padding-top: 20dvw;
    }
}


/* ===============================================
   find
=============================================== */
#find {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 15.8vw, 190px);
    position: relative;
}

.find_text_area {
    width: clamp(0px, 35.8vw, 430px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.find_text_area .cont_title_en {
    margin-top: 0.6em;
}

.find_bg {
    width: clamp(0px, 14.2vw, 170px);
    margin-top: clamp(0px, 2.9vw, 35px);
}

.find_box_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.find_box_list + .find_box_list {
    margin-top: clamp(0px, 4.2vw, 50px);
}

.find_box_list li {
    width: clamp(0px, 27.9vw, 335px);
    aspect-ratio: 1 / 1;
    border: 1px solid #b7dfec;
    display: flex;
    flex-direction: column;
}

.find_box_list li .img_area {
    width: 100%;
    aspect-ratio: 333 / 233;
    overflow: hidden;
}

.find_box_list li .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.find_box_list li .text_area {
    flex: 1;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.find_box_list li .text_area p {
    font-size: clamp(0px, 1.3vw, 15px);
    font-weight: 400;
    line-height: 1.7em;
    letter-spacing: 0;
    padding: 0 1em;
}

@media (max-width: 599px) {
    #find {
        width: 90dvw;
        margin: 0 auto 13dvw;
        padding-bottom: 26dvw;
    }

    .find_text_area {
        width: 84dvw;
        align-items: flex-start;
        position: initial;
        text-align: left;
        margin-bottom: 7dvw;
    }

    .find_text_area .cont_title_en {
        margin-top: 0.6em;
    }
    
    .find_text_area .cont_title {
        letter-spacing: 0;
    }

    .find_bg {
        width: 21dvw;
        margin-top: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .find_box_list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5dvw;
    }

    .find_box_list + .find_box_list {
        margin-top: 2.5dvw;
    }

    .find_box_list li {
        width: 43.5dvw;
        aspect-ratio: inherit;
    }

    .find_box_list li .img_area {
        aspect-ratio: 435 / 465;
    }

    .find_box_list li .text_area {
        height: auto;
    }

    .find_box_list li .text_area p {
        font-size: 3.3dvw;
        line-height: 1.5em;
        text-align: left;
        padding: 3dvw;
    }
}


/* ===============================================
   career
=============================================== */
#career {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 10vw, 120px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.career_img {
    width: clamp(0px, 47.1vw, 565px);
}

.career_main .cont_text {
    margin-bottom: clamp(0px, 5.4vw, 65px);
}

@media (max-width: 599px) {
    #career {
        width: 90dvw;
        margin: 0 auto 11dvw;
        flex-direction: column;
        align-items: center;
    }

    .career_img {
        width: 100%;
    }
    
    .career_main {
        width: 84dvw;
        margin-bottom: 20dvw;
    }
    
    .career_main .cont_text {
        margin-bottom: 9dvw;
    }
}

/* ===============================================
   interview
=============================================== */
#interview {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 16.7vw, 200px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interview_lead {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(0px, 5vw, 60px);
}

.interview_lead .img_area {
    width: clamp(0px, 33.3vw, 400px);
    spect-ratio: 400 / 350;
    overflow: hidden;
    border-radius: 0 0 clamp(0px, 4.2vw, 50px) 0;
}

.interview_lead .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interview_lead .text_area {
    width: clamp(0px, 56.7vw, 680px);
}

.interview_lead .text_area .text_1 {
    font-size: clamp(0px, 2.1vw, 25px);
    line-height: 1.7em;
    margin-bottom: 0.8em;
}

.interview_lead .text_area .text_2 {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 2.4em;
    position: relative;
    z-index: 1;
}

.interview_lead .text_area .text_2 span {
    position: relative;
}

.interview_lead .text_area .text_2 span::after {
    content: "";
    width: clamp(0px, 14.6vw, 175px);
    height: clamp(0px, 1.3vw, 15px);
    background: url("../img/shinri/interview_em_bg.svg") no-repeat center center / contain;
    position: absolute;
    bottom: clamp(-8px, -0.7vw, 0px);
    right: 0;
    z-index: -1;
}

.interview_list {
    width: 100%;
    margin-bottom: clamp(0px, 5.8vw, 70px);
}

.interview_list li {
    width: 100%;
    position: relative;
}

.interview_list .img_area {
    width: clamp(0px, 80.8vw, 970px);
    aspect-ratio: 970 / 510;
    border-radius: clamp(0px, 4.2vw, 50px) clamp(0px, 4.2vw, 50px) 0 0;
    overflow: hidden;
}

.interview_list .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interview_list .interview_heading {
    font-size: clamp(0px, 2.1vw, 25px);
    line-height: 1.7em;
    writing-mode: vertical-rl;
    position: absolute;
    top: clamp(0px, 6.3vw, 75px);
    left: 2em;
}

.interview_list .text_box {
    width: 50vw;
    height: clamp(0px, 34.2vw, 410px);
    background: #CFE8F5;
    background: linear-gradient(45deg,rgba(207, 232, 245, 1) 0%, rgba(241, 234, 244, 1) 70%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(0px, 54.2vw, 650px);
    margin: auto;
    display: flex;
    align-items: center;
    padding: 0 clamp(0px, 4.2vw, 50px);
}

.interview_list .text_box .text_area {
    width: clamp(0px, 33.3vw, 400px);
}

.interview_list .text_box .text_area  .text_1 {
    font-size: clamp(0px, 1.9vw, 23px);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
    margin-bottom: 1em;
}

.interview_list .text_box .text_area  .text_1 span {
    font-size: 0.7em;
}

.interview_list .text_box .text_area  .text_2 {
    font-size: clamp(0px, 1.33vw, 16px);
    letter-spacing: 0.03em;
    line-height: 1;
    text-align: right;
    margin-bottom: 0.5em;
}

.interview_list .text_box .text_area  .text_3 {
    font-size: clamp(0px, 1.33vw, 16px);
    letter-spacing: 0.03em;
    line-height: 1.9em;
}

.interview_list li:nth-of-type(even) .img_area {
    margin-left: auto;
}

.interview_list li:nth-of-type(even) .interview_heading {
    left: inherit;
    right: 2em;
}

.interview_list li:nth-of-type(even) .text_box {
    background: linear-gradient(45deg,rgba(207, 232, 245, 1) 0%, rgba(241, 234, 244, 1) 100%);
    left: inherit;
    right: clamp(0px, 54.2vw, 650px);
    justify-content: flex-end;
}

@media (max-width: 599px) {
    #interview {
        width: 100dvw;
        margin: 0 auto 15dvw;
    }

    .interview_lead {
        width: 90%;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10dvw;
    }

    .interview_lead .img_area {
        width: 40dvw;
        border-radius: 0 0 5dvw 0;
    }
    
    .interview_lead .text_area {
        width: 100%;
        margin-bottom: 9dvw;
    }

    .interview_lead .text_area .text_1 {
        font-size: 5.5dvw;
        margin-bottom: 0.8em;
    }

    .interview_lead .text_area .text_2 {
        font-size: 3.6dvw;
        line-height: 2.2em;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .interview_lead .text_area .text_2 span::after {
        width: 36dvw;
        height: 4dvw;
        bottom: -2vw;
        right: 1em;
    }

    .interview_list {
        margin-bottom: 10dvw;
    }

    .interview_list li {
        padding-top: 55dvw;
    }
    
    .interview_list li:not(:first-child) {
        margin-top: 10dvw;
    }

    .interview_list .img_area,
    .interview_list li:nth-of-type(even) .img_area {
        width: 100%;
        aspect-ratio: 1000 / 640;
        border-radius: 5dvw 5dvw 0 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .interview_list .interview_heading {
        font-size: 4.5dvw;
        top: 7.5dvw;
        left: 6dvw;
        z-index: 2;
    }

    .interview_list li:nth-of-type(even) .interview_heading {
        right: 6dvw;
    }
    
    .interview_list .text_box,
    .interview_list li:nth-of-type(even) .text_box {
        width: 90dvw;
        height: auto;
        background: linear-gradient(45deg,rgba(207, 232, 245, 1) 0%, rgba(241, 234, 244, 1) 100%);
        position: relative;
        left: 0;
        margin: auto;
        padding: 9dvw 5dvw 5dvw;
    }

    .interview_list .text_box .text_area {
        width: 84dvw;
    }

    .interview_list .text_box .text_area  .text_1 {
        font-size: 4.6dvw;
    }

    .interview_list .text_box .text_area  .text_2 {
        font-size: 3.2dvw;
        margin-bottom: 0.8em;
    }

    .interview_list .text_box .text_area  .text_3 {
        font-size: 3.5dvw;
        line-height: 1.7em;
    }
    
    #interview .button {
        margin-right: auto;
        margin-left: 8dvw;
    }
}


/* ===============================================
   point
=============================================== */
#point {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 10vw, 120px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(0px, 1.7vw, 20px);
}

.point_title {
    position: absolute;
    top: clamp(-10px, -0.8vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.point_title .point_icon {
    width: clamp(0px, 5.8vw, 70px);
}

.point_title .cont_title_en {
    padding-top: clamp(0px, 1.7vw, 20px);
    margin-bottom: clamp(0px, 3.3vw, 40px);
}

.point_title .cont_title_sm {
    font-size: clamp(0px, 2.1vw, 25px);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 0.6em;
}

.point_title .cont_title {
    padding-bottom: 0;
    margin-bottom: 0;
}
.point_title .cont_title::after {
    display: none;
}

.point_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(0px, 1.7vw, 20px);
}

.point_list li {
    width: clamp(0px, 29.4vw, 353px);
    aspect-ratio: 1 / 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../img/shinri/point_box_bg.jpg") no-repeat center center / cover;
    position: relative;
}

.point_list li:nth-of-type(1) { border-top-left-radius: clamp(0px, 4.2vw, 50px); }
.point_list li:nth-of-type(3) { border-top-right-radius: clamp(0px, 4.2vw, 50px); }
.point_list li:nth-of-type(4) { border-bottom-left-radius: clamp(0px, 4.2vw, 50px); }
.point_list li:nth-of-type(6) { border-bottom-right-radius: clamp(0px, 4.2vw, 50px); }

.point_list li.space {
    background: none;
}

.point_list li .nb {
    font-size: clamp(0px, 8.3vw, 100px);
    font-family: "Cormorant Infant", serif;
    color: var(--color-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    position: absolute;
    bottom: 0;
    left: 0.2em;
    mix-blend-mode: multiply;
    opacity: 0.4;
}

.point_list li .nb span {
    font-size: clamp(0px, 2.1vw, 25px);
    line-height: 1;
    margin-bottom: -0.4em;
}

.point_list li .box_title {
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 600;
    line-height: 1.75em;
    letter-spacing: 0.1em;
    color: #faee2b;
    padding-bottom: 0.8em;
    margin-bottom: 0.8em;
    position: relative;
}

.point_list li .box_title::after {
    content: "";
    width: clamp(0px, 3.3vw, 40px);
    height: clamp(0px, 0.3vw, 3px);
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.point_list li .box_text {
    font-size: clamp(0px, 1.2vw, 14px);
    line-height: 1.7em;
    letter-spacing: 0.03em;
    color: #fff;
    white-space: nowrap;
}

@media (max-width: 599px) {
    #point {
        width: 90dvw;
        margin: 0 auto 7.5dvw;
        flex-direction: column;
        gap: 2dvw
    }

    .point_title {
        position: relative;
        top: 0;
    }

    .point_title .point_icon {
        width: 14dvw;
    }

    .point_title .cont_title_en {
        padding-top: 3dvw;
        margin-bottom: 5.5dvw;
    }

    .point_title .cont_title_sm {
        font-size: 5dvw;
    }

    .point_title .cont_title {
        margin-bottom: 0.4em;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .point_list {
        flex-direction: column;
        gap: 2dvw;
    }

    .point_list li {
        width: 100%;
        aspect-ratio: inherit;
        background-image: url("../img/shinri/point_box_bg_sp.jpg");
        padding: 6dvw 3dvw 4dvw;
    }

    .point_list li:nth-of-type(1) { border-radius: 10dvw 10dvw 0 0; }
    .point_list li:nth-of-type(3),
    .point_list li:nth-of-type(4),
    .point_list li:nth-of-type(6) { border-radius: 0; }

    .point_list li.space {
        display: none;
    }

    .point_list li .nb {
        font-size: 20dvw;
        bottom: -0.1em;
        left: 0.1em;
    }

    .point_list li .nb span {
        font-size: 5dvw;
    }

    .point_list li .box_title {
        font-size: 5dvw;
        line-height: 1.5em;
    }

    .point_list li .box_title::after {
        width: 7.7dvw;
        height: 0.6dvw;
    }

    .point_list li .box_text {
        font-size: 3.8dvw;
        letter-spacing: 0;
        white-space: inherit;
    }
}


/* ===============================================
   action
=============================================== */
#action {
    width: clamp(0px, 91.7vw, 1100px);
    padding-top: clamp(0px, 6.7vw, 80px);
    margin: 0 auto clamp(0px, 15.8vw, 190px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

#action::before {
    content: "";
    width: clamp(0px, 107.5vw, 1290px);
    aspect-ratio: 1290 / 550;
    background: url("../img/shinri/action_bg.png") no-repeat top center / contain;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    z-index: -1;
}

#action .cont_text {
    margin-bottom: clamp(0px, 5.8vw, 70px);
}

.action_main {
    width: 100%;
    display: flex;
    margin-bottom: clamp(0px, 8.3vw, 100px);
    position: relative;
    z-index: 1;
}

.action_main .action_cont {
    width: 33.333%;
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.action_cont .action_img {
    width: 100%;
    aspect-ratio: 366 / 300;
    border: 1px solid #fff;
    border-width: 2px 1px;
    margin-bottom: clamp(0px, 2.1vw, 25px);
    overflow: hidden;
}

.action_cont .action_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.action_cont:nth-of-type(1) .action_img {
    border-radius: clamp(0px, 4.2vw, 50px) 0 0 0;
    border-width: 2px 1px 2px 2px;
}

.action_cont:nth-of-type(3) .action_img {
    border-radius: 0 0 clamp(0px, 4.2vw, 50px) 0;
    border-width: 2px 2px 2px 1px;
}

.action_cont .action_title {
    width: 96%;
    font-size: clamp(0px, 1.7vw, 20px);
    color: var(--color-main);
    font-weight: 600;
    line-height: 1.75em;
    text-align: center;
    margin-bottom: .5em;
}

.action_cont .action_text {
    width: 85%;
    font-size: clamp(0px, 1.3vw, 15px);
    letter-spacing: 0.03em;
    line-height: 1.8em;
}

@media (max-width: 599px) {
    #action {
        width: 90dvw;
        padding-top: 11.5dvw;
        margin: 0 auto 20dvw;
    }

    #action::before {
        width: 100dvw;
        aspect-ratio: 1000 / 760;
        background-image: url("../img/shinri/action_bg_sp.png");
    }
    
    #action .cont_title_center {
        text-align: left;
    }
    
    #action .cont_title_center .cont_title {
        letter-spacing: 0;
    }

    #action .cont_text {
        margin-bottom: 7dvw;
    }

    .action_main {
        flex-direction: column;
        gap: 9dvw;
        margin-bottom:13dvw;
    }

    .action_main .action_cont {
        width: 100%;
    }

    .action_cont .action_img {
        aspect-ratio: 900 / 510;
        border: 0;
        margin-bottom: 4dvw;
    }

    .action_cont:nth-of-type(1) .action_img {
        border-radius: 10dvw 0 0 0;
        border-width: 0;
    }

    .action_cont:nth-of-type(3) .action_img {
        border-radius: 0 0 10dvw 0;
        border-width: 0;
    }

    .action_cont .action_title {
        width: 84dvw;
        font-size: 4.5dvw;
        line-height: 1.7em;
    }

    .action_cont .action_text {
        width: 84dvw;
        font-size: 3.5dvw;
        line-height: 1.7em;
    }
    
    #action .button {
        margin-right: auto;
        margin-left: 3dvw;
    }
}


/* ===============================================
   voice
=============================================== */
#voice {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 8.3vw, 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#voice .cont_title {
    margin-bottom: 0;
}

#voice .cont_title::after {
    display: none;
}

.voice_qa {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 0.8vw, 10px) 0;
}

.qa {
    width: 100%;
    border-radius: clamp(0px, 4.2vw, 50px) 0 0 0;
    background: #CFE8F5;
    background: linear-gradient(90deg,rgba(207, 232, 245, 1) 0%, rgba(241, 234, 244, 1) 100%);
    overflow: hidden;
    position: relative;
}

.area_q {
    width: 100%;
    padding: clamp(0px, 3.3vw, 40px) clamp(0px, 10.4vw, 125px);
    position: relative;
}

.area_q .icon {
    width: clamp(0px, 9.6vw, 115px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    font-size: clamp(0px, 2.5vw, 30px);
    font-family: "Cormorant Infant", serif;
    line-height: 1;
    color: #fff;
    background-color: var(--color-main);
    padding: clamp(0px, 4vw, 48px) 0 0 clamp(0px, 3.3vw, 40px);
    position: absolute;
    top: clamp(-15px, -1.3vw, 0px);
    left: clamp(-15px, -1.3vw, 0px);
}

.area_q .text p {
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 600;
    line-height: 1.75em;
    letter-spacing: 0.1em;
}

.area_a {
    padding: 0 clamp(0px, 4.2vw, 50px) clamp(0px, 4.2vw, 50px) clamp(0px, 4.2vw, 50px);
}

.area_a .block_a {
    background-color: #fff;
    border-radius: clamp(0px, 1.3vw, 15px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0px, 1.7vw, 20px) clamp(0px, 5.4vw, 65px) clamp(0px, 1.7vw, 20px) clamp(0px, 4.2vw, 50px);
}

.area_a .block_a + .block_a {
    margin-top: clamp(0px, 1.7vw, 20px);
}

.area_a .block_a .icon {
    width: clamp(0px, 8.3vw, 100px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #cfe8f5;
}

.area_a .block_a:nth-of-type(even) .icon {
    background-color: #f1eaf4;
}

.area_a .block_a .icon p {
    color: var(--color-main);
    font-size: clamp(0px, 2.5vw, 30px);
    font-weight: 600;
    line-height: 1;
    padding-bottom: 0.2em;
}

.area_a .block_a .icon span {
    font-size: 0.6em;
}

.area_a .block_a .text {
    width: clamp(0px, 62.5vw, 750px);
}

.area_a .block_a .text p {
    font-size: clamp(0px, 1.33vw, 16px);
    letter-spacing: 0.03em;
    line-height: 1.9em;
}

@media (max-width: 599px) {
    #voice {
        width: 90dvw;
        margin: 0 auto 10dvw;
    }

    #voice .cont_title_center {
        width: 100%;
        text-align: left;
    }

    .voice_qa {
        gap: 2dvw 0;
    }

    .qa {
        border-radius: 6dvw 0 0 0;
    }

    .area_q {
        padding: 4dvw 10dvw 4dvw 19dvw;
    }

    .area_q .icon {
        width: 18dvw;
        font-size: 7.5dvw;
        padding: 6dvw 0 0 4.5dvw;
        top: -2.3dvw;
        left: -2.3dvw;
    }

    .area_q .text p {
        font-size: 4.3dvw;
        line-height: 1.4em;
        letter-spacing: 0.07em;
    }

    .area_a {
        padding: 0 3dvw 3dvw 3dvw;
    }

    .area_a .block_a {
        border-radius: 0;
        padding: 3dvw 5dvw 3dvw 3dvw;
        align-items: flex-start;
    }

    .area_a .block_a + .block_a {
        margin-top: 3dvw;
    }

    .area_a .block_a .icon {
        width: 15.5dvw;
    }
    
    .area_a .block_a .icon p {
        font-size: 5.5dvw;
    }
    
    .area_a .block_a .text {
        width: 56.5dvw;
    }

    .area_a .block_a .text p {
        font-size: 3.5dvw;
        line-height: 1.7em;
    }
}


/*----------------------------
accordion
----------------------------*/
.acc_button {
    cursor: pointer;
    position: relative;
}

.acc_cont {
    display: none;
}

.acc_icon {
    position: absolute;
    width: clamp(0px, 2.5vw, 30px);
    aspect-ratio: 1 / 1;
    top: 0;
    bottom: 0;
    right: clamp(0px, 4.2vw, 50px);
    margin: auto;
}

.acc_icon::before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-main);
    transform: rotate(90deg);
    transition: all .3s ease-in-out;
}

.acc_icon::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-main);
    transition: all .3s ease-in-out;
}

.acc_button.open .acc_icon::before {
    transform: rotate(180deg);
}

.acc_button.open .acc_icon::after {
    opacity:0;
}

@media (max-width: 599px) {
    .acc_icon {
        width: 7dvw;
        top: 3dvw;
        bottom: inherit;
        right: 3dvw;
    }

    .acc_icon::before{
        border-radius: 0.6dvw;
    }

    .acc_icon::after {
        height: 0.6dvw;
        border-radius: 0.6dvw;
    }
}


/* ===============================================
   link
=============================================== */
#link {
    padding-bottom: clamp(0px, 8.3vw, 100px);
    display: flex;
    justify-content: center;
}

@media (max-width: 599px) {
    #link {
        padding-bottom: 20vw;
    }
}


/* ===============================================
   Instagram
=============================================== */
#insta {
    width: 100%;
    height: clamp(0px, 18.3vw, 220px);
    border-bottom: 1px solid var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 clamp(0px, 2.5vw, 30px);
    background-color: #fff;
}

#insta a {
    display: flex;
    align-items: center;
    gap: 0 clamp(0px, 2.5vw, 30px);
}

#insta .text_1 {
    font-size: clamp(0px, 2.3vw, 28px);
    letter-spacing: 0.15em;
    font-weight: var(--font-w-b);
    white-space: nowrap;
}

#insta a img {
    width: clamp(0px, 5.8vw, 70px);
}

#insta .text_2 {
    font-size: clamp(0px, 1.7vw, 20px);
    line-height: 1.6em;
    font-weight: var(--font-w-m);
    white-space: nowrap;
}

@media (max-width: 599px) {
    #insta {
        height: clamp(0px, 22vw, 220px);
    }

    #insta a {
        gap: 0 clamp(0px, 3dvw, 30px);
    }

    #insta .text_1 {
        font-size: clamp(0px, 3.4dvw, 34px);
    }

    #insta a img {
        width: clamp(0px, 7dvw, 70px);
    }

    #insta .text_2 {
        font-size: clamp(0px, 2.5dvw, 25px);
    }
}