/* ==========================================================================
   ページ内インデックス  あとで全体のcommonフォルダにコピペする
   ========================================================================== */
.index{
    h3{
        margin-bottom: 30px; 
        font-size: var(--font-size-body);
        font-family: var(--font-family-vintage);
        color: var(--color-gray-300);
    }
}
.index .inner{
    padding: 48px 3% 40px;
    border-bottom: 1px solid var(--color-gray-500);
}
.index nav{
    max-height:none;
    overflow:visible;
}
.index_list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap:36px;
    row-gap: 40px;
    .index_item{
        display: flex;
        align-items: center;
        font-size: var(--font-size-body);
        &::after{
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            margin: 0 0.6em;
            background-color: var(--color-gray-300);
            -webkit-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M480-80 200-360l56-56 184 183v-647h80v647l184-184 56 57L480-80Z'/>\</svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M480-80 200-360l56-56 184 183v-647h80v647l184-184 56 57L480-80Z'/>\</svg>") no-repeat center / contain;
        }
    }
}
@media screen and (max-width:768px) {
    .index{
        h3{
            margin-bottom: 24px; 
            font-size:18px;
            cursor: pointer;
            position: relative;
        }
    }
    .index h3::before,
    .index h3::after{
        content:"";
        position:absolute;
        right:0;
        top:50%;
        width:18px;
        height:2px;
        background: var(--color-gray-300);
        transition:.3s ease;
    }
    /* 横線 */
    .index h3::before{
        transform: translateY(-50%);
    }

    /* 縦線 */
    .index h3::after{
        transform: translateY(-50%) rotate(90deg);
    }

    /* 開いた時 → 縦線を消して − にする */
    .index.is-open h3::after{
        transform: translateY(-50%) rotate(0deg);
        opacity:0;
    }
    .index .inner{
        padding: 40px 3% 0;
    }
    .index nav{
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }
    .index.is-open nav{
        max-height: 1000px;
    }
    .index_list{
        column-gap: 30px;
        row-gap: 0;
        li{
            margin-bottom: 30px;
        }
    }
}
/* ==========================================================================
   about
========================================================================== */
.about{
    padding: 100px 0;
    hgroup{
        margin-bottom: 40px;
        p{  
            margin-bottom: 30px;
            padding-left: 60px;
            font-size: 24px;
            color: var(--color-gray-300);
            font-family: var(--font-family-vintage);
            position: relative;
            &::before{
                content: '';
                width: 46px;
                height: 1px;
                background-color: var(--color-gray-300);
                position: absolute;
                left: 0;
                top:13px;
            }
        }
        h2{
            font-size: 46px;
            color: var(--color-gray-100);
            font-family: var(--font-family-serif);
            font-weight: 400;
        }
    }
}
.about article{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .about_txt{
        width: 65%;
        h3{
            margin-bottom: 40px;
            font-family: var(--font-family-serif);
            font-weight: 700;
            line-height: 1.8;
            font-size: 28px;
        }
    }
    figure{
        width: 30%;
    }
}
@media screen and (max-width:768px) {
    .about{
        padding: 60px 0;
            hgroup{
                p{  
                    margin-bottom: 12px;
                    padding-left: 36px;
                    font-size: 20px;
                    &::before{
                        width: 24px;
                        top:13px;
                    }
                }
                h2{
                    font-size: 34px;
                }
            }
        }
    .about article{
        display: block;
        .about_txt{
            width: 100%;
            margin-bottom: 46px;
            h3{
                margin-bottom: 25px;
                font-size: 26px;
            }
        }
        figure{
            width: 100%;
            img{
                display: block;
                margin-inline: auto;
                width: 80%;
            }
        }
    }
}
/* ==========================================================================
   worries
========================================================================== */
.worries{
    padding: 100px 0 90px;
    background-color: var(--color-gray-800);
    h2{
        margin-bottom: 50px;
        text-align: center;
        font-family: var(--font-family-serif);
        font-size: 34px;
        font-weight: 400;
        position: relative;
        span{
           position: relative;
           display: inline-block;
           padding: 0 24px;
           background-color: var(--color-gray-800);
           z-index: 1;
        }
        &::before{
            content:'';
            position:absolute;
            top:50%;
            left:0;
            width:100%;
            height:1px;
            background:var(--color-gray-100);
            transform:translateY(-50%);
        }
    }
}
.worries_inner{
    display: flex;
    justify-content: space-between;
    ul{
        width: 50%;
        li{ 
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 26px;
            &:last-of-type{
                margin-bottom: 0;
            }
            &::before{
                content: '';
                display: inline-block;
                width: 1.6em;
                height: 1.6em;
                margin: 0 0.6em;
                background-color: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/>\</svg>") no-repeat center / contain;
                mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/>\</svg>") no-repeat center / contain;
            }
        }
    }
    figure{
        width: 35%;
    }
}
@media screen and (max-width:768px) {
    .worries{
        padding: 60px 0 70px;
        h2{
            margin-bottom: 40px;
            font-size: 24px;
            span{
                padding: 0 12px;
            }
        }
    }
    .worries_inner{
        display: block;
        ul{
            width: 100%;
            margin-bottom: 30px;
            li{
                margin-bottom: 18px;
            }
        }
        figure{
            width: 100%;
        }
    }
}
/* ==========================================================================
   feature
========================================================================== */
.feature{
    padding: 100px 0;
}

@media screen and (max-width:768px) {
    .feature{
        padding: 60px 0 70px;
    }
}
.article_title{
    margin-bottom: 60px;
    padding-bottom: 24px;
    font-family: var(--font-family-serif);
    font-size: 34px;
    color: var(--color-gray-100);
    font-weight: 400;
    border-bottom: 1px solid #938b89;
    position: relative;
    &::after{
        position: absolute;
        content: '';
        width: 22.5%;
        left: 0;
        bottom: -1px;
        border-bottom: 1px solid var(--color-gray-100);
    }
}
@media screen and (max-width:768px) {
    .article_title{
        margin-bottom: 30px;
        padding-bottom: 16px;
        font-size: 23px;
        &::after{
            width: 33%;
        }
    }
}
.feature article:not(:last-of-type){
    margin-bottom: 90px;
}
.article_subtitle{
    margin-bottom: 48px;
    padding-left: 90px;
    font-family: var(--font-family-serif);
    font-size:26px;
    font-weight: 700;
    position: relative;
    &::before{
        content: '';
        width: 70px;
        height: 1px;
        background-color: var(--color-gray-100);
        position: absolute;
        left: 0;
        top:22px;
    }
}
@media screen and (max-width:768px) {
    .feature article:not(:last-of-type){
        margin-bottom: 70px;
    }
    .article_subtitle{
        margin-bottom: 15px;
        padding-left: 48px;
        font-size:21px;
        &::before{
            width: 36px;
            top: 17px;
        }
    }
}
.feature_inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    p{
        width: 48%;
    }
    figure{
        width:45%;
        figcaption{
            text-align: right;
            font-size:0.8rem;
        }
    }
}
.feature_inner_center{
    max-width: 840px;
    margin-inline: auto;
}
/* PCだけ左右逆 */
@media (min-width:769px){
  .feature article:nth-of-type(even) .feature_inner{
    flex-direction:row-reverse;
  }
}
@media screen and (max-width:768px) {
    .feature_inner{
        flex-direction: column-reverse;
        p,figure{
            width: 100%;
        }
        figure{
            margin-bottom: 24px;
        }
    }
}
/* ==========================================================================
   drugs
========================================================================== */
.drugs{
    padding: 100px 0;
}
.drugs article{
    max-width: 840px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    &:not(:last-of-type){
        margin-bottom: 60px;
    }
    .drug_detail{
        width: 57%;

    }
    figure{
        width:35%;
    }
}
.drug_detail{
    h3{
        margin-bottom: 30px;
        padding-left: 90px;
        font-size: 26px;
        font-weight: 700;
        font-family: var(--font-family-serif);
        position: relative;
        &::before{
            content: '';
            width: 66px;
            height: 1px;
            background-color: var(--color-gray-100);
            position: absolute;
            left: 0;
            top:50%;
            transform: translateY(-50%);
        }
    }
}
    .drug_effects{
        margin-bottom: 30px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        li{
            color: var(--color-red-100);
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            &::before{
                content: '';
                display: inline-block;
                width: 1.4em;
                height: 1.4em;
                margin-right: 0.6em;
                background-color: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/>\</svg>") no-repeat center / contain;
                mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/>\</svg>") no-repeat center / contain;
            }
        }
    }

@media screen and (max-width:768px) {
    .drugs{
        padding: 60px 0 75px;
    }
    .drugs article{
        width: 92%;
        margin-inline: auto;
        flex-direction: column;
        align-items: center; 
        &:not(:last-of-type){
            margin-bottom: 60px;
        }
        .drug_detail{
            width: 100%;
        }
        figure{
            width:70%;
            margin-top: 30px;
        }
    }
    .drug_detail{
        h3{
            padding-left: 46px;
            font-size: 21px;
            &::before{
                content: '';
                width: 35px;
            }
        }
    }
     .drug_effects{
        gap: 10px;
    }
}
/* ==========================================================================
   flow
========================================================================== */
.flow{
    padding: 100px 0;
    background-color: var(--color-gray-800);
}
.flow_block{
    padding: 40px 40px 40px 50px;
    background-color: var(--color-gray-900);
    box-shadow: 0px 2px 8px 0px rgba(197, 197, 195, 0.3),0px 6px 30px 0px rgba(222, 222, 219, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .flow_step{
        width: 6%;
        margin-right: 4%;
        font-family: var(--font-family-vintage);
        font-size: 16px;
        color: rgb(33 28 28/.6);
        text-align: center;
        line-height: 1;
        span{
            display: block;
            font-size: 52px;
        }
    }
    .flow_todo{
        width: 60%;
        margin-right: 3%;
        .flow_title{
            margin-bottom: 24px;
            font-family: var(--font-family-serif);
            font-size: 21px;
            line-height: 1;
        }
    }
    figure{
        width: 17%;
    }
}
.flow_block:not(:last-of-type){
    margin-bottom: 60px;
    &::after{
        content: '';
        position: absolute;
        left: 50%;
        bottom: -37px;
        transform: translateX(-50%);
        width: 30px;
        height: 15px;
        background-color: var(--color-gray-300);
        -webkit-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 15'>\<path d='M0 0 L15 15 L30 0 Z' fill='currentColor'/>\</svg>") no-repeat center / contain;
        mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 15'>\<path d='M0 0 L15 15 L30 0 Z' fill='currentColor'/>\ </svg>") no-repeat center / contain;
    }
}
@media screen and (max-width:768px) {
    .flow{
        padding: 60px 0 74px;
    }
    .flow_block{
        padding: 30px 30px 40px;
        flex-direction: column;
        position: relative;
        .flow_step{
            order: 1;
            width: 100%;
            margin-bottom: 16px;
            margin-right: 0;
            font-size: 15px;
            span{
                font-size: 46px;
            }
        }
        .flow_todo{
            order: 3;
            width: 100%;
            margin-right: 0;
            .flow_title{
                margin-bottom: 16px;
                font-size: 24px;
                text-align: center;
                line-height: 1.5;
            }
        }
        figure{
            order: 2;
            width: 100%;
            margin-bottom: 16px;
            margin-inline: auto;
        }
    }
    .flow_block:not(:last-of-type){
        margin-bottom: 44px;
        &::after{
            bottom: -30px;
        }
    }
}
@media screen and (min-width:435px) and (max-width:768px){
      .flow_block figure{
        width: 70%;
        margin-inline: auto;
        img{
            width: 100%;
        }
    }
}
/* ==========================================================================
   detail
========================================================================== */
.detail{
    padding: 100px 0;
}
.detail_info{
    max-width: 840px;
    margin-inline: auto;
    display:grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 6px 28px;
    dt{
        padding: 20px;
        background-color: var(--color-gray-800);
    }
    dd{
        padding: 20px 20px 20px 0;
        li{
            list-style-type: disc;
            list-style-position: inside;
            a{
                text-decoration: underline;
                overflow-wrap: anywhere;
                word-break: break-word;
            }
        }
        
    }
}
@media screen and (max-width:768px) {
    .detail{
        padding: 60px 0;
    }
    .detail_info{
        grid-template-columns: 1fr;
        gap: 0;
        dt{
            padding: 16px;
            text-align: center;
        }
        dd{
            padding: 16px 10px;
            overflow-wrap: anywhere;
        }
    }
}
/* ==========================================================================
   faq
========================================================================== */
.faq{
    padding: 100px 0;
    background-color: var(--color-gray-800);
}
.faq_block{
    max-width: 840px;
    margin-inline: auto;
    padding: 30px;
    background-color: var(--color-gray-900);
    box-shadow: 0px 2px 8px 0px rgba(197, 197, 195, 0.3),0px 6px 30px 0px rgba(222, 222, 219, 0.2);
    &:not(:last-of-type){
        margin-bottom: 30px;
    }
    .faq_question{
        padding: 0 0 20px 0;
        border-bottom: 1px solid var(--color-gray-500);
        position: relative;
        &::before{
            position: absolute;
            content: "Q";
            top: 0;
            left: 10px;
            font-size: 1.8rem;
            font-family: var(--font-family-vintage);
            line-height: 1;
            font-weight: 400;
            color: rgb(33 28 28/.6);
        }
        p{
            padding-left: 46px;
            font-size: 18px;
            font-family: var(--font-family-serif);
            font-weight: 500;
        }
    }
    .faq_answer{
        padding-top: 24px;
        position: relative;
        &::before{
            position: absolute;
            content: "A";
            top: calc(24px + .5rem);
            left: 10px;
            font-size: 1.8rem;
            font-family: var(--font-family-vintage);
            line-height: 1;
            font-weight: 400;
            color: var(--color-red-100);
        }
        p{
            padding-left: 46px;
        }
    }
}

@media screen and (max-width:768px) {
    .faq{
        padding: 60px 0 76px;
    }
    .faq_block{
        width: 100%;
        padding: 16px;
        &:not(:last-of-type){
            margin-bottom: 26px;
        }
        .faq_question{
            padding: 0 0 16px 0;
            &::before{
                left: 0;
                font-size: 1.6rem;
            }
            p{
                padding-left: 30px;
                font-size: 16px;
            }
        }
        .faq_answer{
            padding-top: 16px;
            &::before{
                top: calc(16px + .5rem);
                left: 0;
                font-size: 1.6rem;
            }
            p{
                padding-left: 30px;
            }
        }
    }
}
/* ==========================================================================
   price
========================================================================== */
.price{
    padding: 100px 0 140px;
}
.price_block{
    max-width: 840px;
    margin-inline: auto;
}
.price_table01{
    width: 100%;
    thead{
        th{
            border: 1px solid  #938B89;
            background-color: var(--color-gray-800);
            padding: 7px 12px;
            font-weight: 500;
        }
    }
    tbody{
        th,td{
            border: 1px solid  #938B89;
            font-weight: 500;
        }
        th{
            padding: 24px;
            width: 50%;
            text-align: left;
            background-color: var(--color-gray-800);
        }
        td{
            width: 25%;
            padding: 7px 12px;
            &:first-of-type{
                text-align: center;
            }
            &:last-of-type{
                text-align: right;
            }
        }
    }
}
.price_table02{
    width: 100%;
    th,td{
        padding: 24px;
        border: 1px solid  #938B89;
        font-weight: 500;
    }
    th{
        width: 50%;
        background-color: var(--color-gray-800);
        text-align: left;
    }
    td{
        width: 50%;
        text-align: right;
    }
}
.price_note{
    font-size: 12px;
    color: var(--color-gray-pale);
    line-height: 1.5;
}
@media screen and (max-width:768px) {
    .price{
        padding: 60px 0 70px;
    }
    .price_block{
        width: 100%;
    }
    .price_table01{
         .price_table01,.price_table01 tbody,.price_table01 tr{
            display:block;
            width:100%;
        }
        thead{
            display: none;
        }
        tbody{
            tr{
                border-bottom: 1px solid #938B89;
                th{ 
                    display: block;
                    padding: 18px 10px;
                    width: 100%;
                    text-align: center;
                    border:none;
                    border-bottom: 1px solid #938B89;
                }
                td{
                    display:inline-block;
                    width: 49%;
                    padding:16px 10px;
                    box-sizing:border-box;
                    border: none;
                    &:first-of-type{
                        border-right: 1px solid #938B89;
                    }
                    &[colspan="2"]{
                        width:100%;
                        display:block;
                        border-right: none;
                    }
                }
            }
        }
    }
    .price_table02{
        th,td{
            padding: 18px 10px;
        }
    }
}
.discount{
    color: var(--color-red-100);
}