@charset "UTF-8";

.Container.--method .SectionHeader {
    height: 100%;
}

.Container.--method .SectionHeader__Heading {
    position: relative;
    height: 100%;
}

.MethodHeader .ja {
    font-size: calc(var(--s-val)*2.8);
    font-family: var(--mincho-font);
}

.MethodHeader .en {
        font-family: var(--canto-font);
    font-size: calc(var(--s-val) * 3.6);
    color: var(--blue-color);
    text-align: center;
}

@media screen and (max-width: 768px) {
    .Container.--method .SectionHeader__Heading--ja {
        transform: translateY(-.5em);
        font-size: max(30px, calc(30 / 375 * 100vw));
        line-height: max(40px, calc(40 / 375 * 100vw));
        text-align: center;
    }

    .Container.--method .SectionHeader__Heading--en {
        left: max(-28px, calc(-28 / 375 * 100vw));
        font-size: max(110px, calc(100 / 375 * 110vw));
        line-height: max(138px, calc(138 / 375 * 100vw));
        letter-spacing: 0 !important;
    }
}

.MethodContents {
    padding-top: 5rem;
    padding-bottom: 8rem;
}

@media screen and (max-width: 768px) {
    .MethodContents {
        padding-top: max(48px, calc(48 / 375 * 100vw));
        padding-bottom: max(80px, calc(80 / 375 * 100vw));
    }
}

.MethodCheck {
    background-color: var(--lightblue-bg-color);
    padding: 6rem 0 5rem;
}

.MethodCheck__Inner {
    padding: 5.5% 9% 6%;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    margin-right: auto;
    max-width: 1020px;
    margin-left: auto;
    border-radius: min(12px, calc(12 / 1440 * 100vw));
    position: relative;
    background-image: url(/Contents/img/Illustration-Page/check-illustration.png);
    background-repeat: no-repeat;
    background-size: 12%;
    background-position: top 20% left 19%;
}

@media screen and (max-width: 768px) {
    .MethodCheck__Inner {
        padding: 2rem 1rem;
        width: max(335px, calc(335 / 375 * 100vw));
        background-size: 30%;
        background-position: top 24% left 54%;
    }

    .MethodCheck {
    padding: 4rem 0 5rem;
}
}

.MethodHeader__Heading {
    align-items: center;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .MethodHeader .ja {
        text-align: center;
        line-height: 1.3333;
        font-size: calc(var(--s-val) * 1.8);
    }
}

.MethodCheck__Content {
    margin-top: 3rem;
    background-color: #EFEFEF;
    padding: 5% 2% 5% 12%;
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .MethodCheck__Content {
        margin-top: 33%;
        padding: 10% 5% 10% 15%;
    }

.MethodCheck__Item:nth-child(2) { order: 5; }
.MethodCheck__Item:nth-child(3) { order: 2; }
.MethodCheck__Item:nth-child(4) { order: 6; }
.MethodCheck__Item:nth-child(5) { order: 3; }
.MethodCheck__Item:nth-child(6) { order: 7; }
.MethodCheck__Item:nth-child(7) { order: 4; }
}

.MethodCheck__List {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

@media screen and (max-width: 768px) {
    .MethodCheck__List {
        gap: 12px;
    }
}

.MethodCheck__Item {
    font-size: calc(var(--s-val)*1.8);
    position: relative;
    width: calc(50% - 10px);
}

.MethodCheck__Item::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(/Contents/img/Illustration-Page/check-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
    .MethodCheck__Item::before {
        width: calc(var(--s-val)*1.8);
        height: calc(var(--s-val)*1.8);
    }
}

.MethodContents {
    background-color: #fff;
    max-width: 1020px;
    margin: 0 auto;
}

.MethodContents .MethodHeader__Heading .ja {
    font-size: calc(var(--s-val)*3.6);
}

/* タブボタン */
.MethodTabButtons__Wrap {
    margin-top: 5rem;
}

.MethodTabPanelsWrap {
    width: 75%;
    margin: 6rem auto;
}

.FlowHeader__Heading .ja {
    font-size: calc(var(--s-val)*2.4);
}

@media screen and (max-width: 768px) {
    .MethodTabButtons__Wrap {
        width: 90%;
        margin: 0 auto;
    }

    .MethodTabPanelsWrap {
    width: 90%;
    margin: 5rem auto;
}

    .MethodHeader .en {
    font-size: calc(var(--s-val) * 2.4);
    }

    .MethodContents .MethodHeader__Heading .ja {
    font-size: calc(var(--s-val) * 2.8);
    }
}

.MethodTabButtons__List {
    list-style: none;
    display: flex;
}

.MethodTabButtons__Item {
    padding-bottom: min(12px, calc(12 / 1440 * 100vw));
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    border-bottom: min(4px, calc(4 / 1440 * 100vw)) solid #ccc;
}

@media screen and (max-width: 768px) {
    .MethodTabButtons__Item {
        padding-bottom: max(8px, calc(8 / 375 * 100vw));
        border-bottom: max(2px, calc(1 / 375 * 100vw)) solid #ccc;
    }
}

.MethodTabButtons__Item.--active {
    border-bottom: min(4px, calc(4 / 1440 * 100vw)) solid #4EC4D4;
}

@media screen and (max-width: 768px) {
    .MethodTabButtons__Item.--active {
        border-bottom: max(2px, calc(2 / 375 * 100vw)) solid #4EC4D4;
    }
}

.MethodTabButtons__Button {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    background: none;
    border: none;
}

.MethodTabButtons__Button::after {
    content: '';
    display: block;
    width: min(16px, calc(16 / 1440 * 100vw));
    height: min(8px, calc(8 / 1440 * 100vw));
    background-image: url('//shop.wellfort.co.jp/cdn/shop/t/38/assets/a1g-ico-arrow-down-gray.svg?v=45464073731737586241742874235');
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
    .MethodTabButtons__Button::after {
        width: max(16px, calc(16 / 375 * 100vw));
        height: max(8px, calc(8 / 375 * 100vw));
    }
}

.MethodTabButtons__Button.--active::after {
    background-image: url('//shop.wellfort.co.jp/cdn/shop/t/38/assets/a1g-ico-arrow-down-blue.svg?v=136689589716294231731742874235');
}

.MethodTabButtons__ButtonText {
    color: #ccc;
    font-size: min(20px, calc(20 / 1440 * 100vw));
    line-height: min(30px, calc(30 / 1440 * 100vw));
    font-weight: bold;
    font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, sans-serif;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .MethodTabButtons__ButtonText {
        font-size: max(14px, calc(14 / 375 * 100vw));
    }
}

.MethodTabButtons__Button.--active .MethodTabButtons__ButtonText {
    color: #4EC4D4;
}

/* パネル */

.MethodTabPanels__Panel {
    display: none;
}

.MethodTabPanels__Panel.--active {
    display: block;
}

/* パネルのコンテンツ */

.BeforeInspection .border-style {
    position: relative;
}

.BeforeInspection .border-style::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-image: url(/Contents/img/Illustration-Page/border-dotted.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.BeforeInspection .FlowList__Item:last-child {
    border: none;
}

.MethodListWrap .FlowList__Item {
    margin-bottom: 1rem;
    padding-bottom: 2rem;
    position: relative;
}

.BeforeInspection .MethodListWrap .FlowList__Item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.MethodListWrap.--StepList .FlowList__ItemTitleText {
    font-family: var(--canto-font);
    font-weight: 400;
    font-size: calc(var(--s-val)*1.4);
}

.StepInspection .FlowList__ItemTitle {
position: absolute;
    top: 50%;
    left: -8%;
    transform: translateY(-50%);
    background: #50C0CF;
    background: linear-gradient(270deg, rgba(80, 192, 207, 1) 0%, rgba(192, 248, 255, 1) 100%);
    border-radius: 50%;
    width: 65px;
    height: 60px;
    text-align: center;
    color: #fff;
    font-size: calc(var(--s-val) * 1.4);
    font-family: var(--canto-font);
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--s-val)*0.5);
}

.StepInspection .FlowList {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.StepInspection .FlowList__Item {
    position: relative;
    background-color: #F6F6F6;
    padding: 4% 5% 4% 6%;
    width: 87%;
    margin: 0 0 0 auto;
    box-sizing: border-box;
}

.StepInspection .FlowList__Item::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -27px;
    width: 100%;
    height: 15px;
    background-image: url(/Contents/img/Illustration-Page/gradation-arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top 0 left 50%;
}


.StepInspection .FlowList__Item.last-child::before {
    display: none;
}

.flow-stepNo {
    font-size: calc(var(--s-val)*2.5);
}

@media screen and (max-width: 900px) {
    .StepInspection .FlowList__ItemTitle {
    left: -10%;
    flex-direction: column;
    justify-content: center;
}

.BeforeInspection .border-style::before {
    background-image: url(/Contents/img/Illustration-Page/border-dotted_sp.png);
}


}

@media screen and (max-width: 768px) {

    .StepInspection .FlowList__Item::before {
            left: 48%;
    }
    .MethodListWrap .FlowList__ItemTitle {
        margin-top: 0;
        justify-content: flex-start;
        margin-bottom: max(12px, calc(12 / 375 * 100vw));
        top:-5%;
        transform: none;
        font-size: calc(var(--s-val) * 1.8);
        font-weight: 600;
    }

    .breadcrumbs__list {
        display: none;
    }

    .MethodCheck__Item {
    font-size: calc(var(--s-val) * 1.5);
    width: 100%;
}

.StepInspection .FlowList__Item {
    width: 95%;
    padding: 8% 5% 8% 12%;
    margin: 0 0 0 auto;
}



}

/* スケジュール */

section.BeforeInspection.FlowContents {
    border: 2px solid var(--light-blue-color);
    position: relative;
    padding: 5% 7%;
    margin-bottom: 6rem;
    border-radius: 10px;
}

section.StepInspection.FlowContents {
    position: relative;
    border: 2px solid var(--light-blue-color);
    padding: 10% 11% 8% 5%;
    margin-bottom: 6rem;
}

section.ShceduleInspection.FlowContents {
    position: relative;
    border: 2px solid var(--light-blue-color);
    padding: 11% 11% 10% 15%;
    margin-bottom: 6rem;
}

.PanelHeader {
    text-align: center;
    color: var(--light-blue-color);
    font-size: calc(var(--s-val) * 2.4);
    font-family: var(--mincho-font);
    font-weight: bold;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 0 5%;
}

.FlowList__ItemTitle {
    font-size: calc(var(--s-val)*2);
    color: var(--light-blue-color);
    font-weight: 500;
}

.MethodListWrap .FlowList__ItemTitle {
    margin-bottom: 1%;
}

.FlowContents {
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .ScheduleListWrap {
        width: 100%;
    }

    .StepInspection .FlowList__ItemTitle {
        width: calc(var(--s-val)*5);
        height: calc(var(--s-val)*4.5);
        font-size: calc(var(--s-val) * 1);
        display: flex;
        justify-content: center;
        left: -7%;
    }

    .flow-stepNo {
    font-size: calc(var(--s-val) * 2.4);
}

section.BeforeInspection.FlowContents {
    padding: 10% 4%;
    margin-bottom: 5rem;
}

section.ShceduleInspection.FlowContents {
        padding: 15% 5% 15%;
        margin-bottom: 3rem;
}

.PanelHeader {
    width: 45%;
    padding: 0;
}

section.StepInspection.FlowContents {
    padding: 10% 5% 12% 5%;
    margin-bottom: 5rem;
}

.ShceduleInspection .PanelHeader {
        width: 70%;
}
}

.ScheduleList {
    list-style: none;
}

.ScheduleList__Item {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.ScheduleList__Item {
  display: grid;
  grid-template-columns: 8% 18% 1fr;
}


.ScheduleList__Item.--01,
.ScheduleList__Item.--02,
.ScheduleList__Item.--03,
.ScheduleList__Item.--04,
.ScheduleList__Item.--05
{
    padding-bottom: 1rem;
}


@media screen and (max-width: 768px) {

    .ScheduleList__Item {
        grid-template-columns: 5% 22% 1fr;
        gap: 5px;
}
.ScheduleList__Item.--01,
.ScheduleList__Item.--02,
.ScheduleList__Item.--03,
.ScheduleList__Item.--04,
.ScheduleList__Item.--05
{
    padding-bottom: 1rem;
}

.ScheduleList__ItemValDesc.--sleep {
        margin-top: 1rem;
}
}

.ScheduleList__Item::before {
    content: '';
    display: block;
    margin-top: .6em;
    width: min(16px, calc(16 / 1440 * 100vw));
    height: min(16px, calc(16 / 1440 * 100vw));
    border-radius: 100vh;
    background: #50C0CF;
    background: linear-gradient(270deg, rgba(80, 192, 207, 1) 0%, rgba(192, 248, 255, 1) 100%);
    z-index: 1;
}

@media screen and (max-width: 768px) {
    .ScheduleList__Item::before {
        width: 15px;
        height: 15px;
    }
}

.ScheduleList__Item::after {
    content: '';
    display: block;
    width: min(1px, calc(1 / 1440 * 100vw));
    height: 100%;
    background: #50C0CF;
    background: linear-gradient(270deg, rgba(80, 192, 207, 1) 0%, rgba(192, 248, 255, 1) 100%);
    position: absolute;
    left: 7px;
    top: .6em;
}

@media screen and (max-width: 768px) {
    .ScheduleList__Item::after {
        width: max(2.5px, calc(2.5 / 375 * 100vw));
        left: max(6.5px, calc(6.5 / 375 * 100vw));
    }
}

.ScheduleList__Item.--last::after {
    display: none;
}

.ScheduleList__ItemTime {
    font-size: calc(var(--s-val) * 2);
    font-weight: bold;
    line-height: 1;
    margin-top: .3em;
}

@media screen and (max-width: 768px) {
    .ScheduleList__ItemTime {
        margin-left: max(10px, calc(10 / 375 * 100vw));
        font-size: max(16px, calc(16 / 375 * 100vw));
        margin-top: .6em;
    }
}

.ScheduleList__ItemVal {
    display: flex;
    flex-direction: column;
    z-index: 2;
    background-color: #F6F6F6;
    padding: 4% 5%;
    align-items: center;
}

.ScheduleList__ItemValTitle {
    font-size: calc(var(--s-val)*1.8);
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .ScheduleList__ItemValTitle {
        font-size: calc(var(--s-val)*1.6);
    }

    .ScheduleList__ItemVal {
    padding: 5%;
}
}

.ScheduleList__ItemValDesc {
    font-size: calc(var(--s-val) * 1.6);
    line-height: min(28px, calc(28 / 1440 * 100vw));
    font-weight: normal;
    display: inline-flex;
    justify-content: flex-start;
    flex-direction: column;
}


.ScheduleList__ItemValDesc_size {
    font-size: calc(var(--s-val) * 1.4);
}

@media screen and (max-width: 768px) {
    .ScheduleList__ItemValDesc {
        font-size: max(14px, calc(14 / 375 * 100vw));
        line-height: 1.8;
    }

    .ScheduleList__ItemValDesc_size {
    font-size: calc(var(--s-val) * 1.2);
}
}

.ScheduleList__ItemValDesc.--sleep {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--lightblue-bg-color);
    height: min(120px, calc(120 / 1440 * 100vw));
    color: var(--light-blue-color);
    font-weight: bold;
    margin-top: 1rem;
    grid-column: 3;
        font-size: calc(var(--s-val) * 1.8);
}

@media screen and (max-width: 768px) {
    .ScheduleList__ItemValDesc.--sleep {
        font-size: calc(var(--s-val)*1.6);
        height: 45px;
        margin-top: 1rem;
    }
}

/* 注意事項 */

.Attention {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    margin-right: auto;
    margin-left: auto;
    background-color: #EFEFEF;
    padding: 6% 10%;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

h3.FlowHeader__Heading {
    font-size: calc(var(--s-val)*2.4);
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
}

.Attention__ListItem {
    font-weight: bold;
    list-style: disc;
}

ul.Attention__List {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 1rem;
}

.Attention__List2 {
    background-color: #fff;
    padding: 4% 6% 4% 8%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 78%;
    border-radius: 5px;
}

.Attention__ListItem2 {
    font-weight: normal;
    list-style-type: disc;
}

    .FlowHeader__Heading .ja small {
        font-size: calc(var(--s-val)*1.8);
    }

    .Attention__ListWrap {
    line-height: 1.5;
    width: 80%;
}

p.FlowList__ItemDescription a {
    text-decoration: underline;
}


    @media screen and (max-width: 768px) {
    .Attention {
        flex-direction: column;
        gap: 30px;
        width: 100%;
        padding: 8% 0 10%;
    }

        .Attention__ListWrap {
        font-size: calc(var(--s-val)*1.4);
        width: 90%;
    }

    ul.Attention__List {
    padding-left: 5%;
    gap: 10px;
    margin-bottom: 2rem;
}
.Attention__List2 {
        padding: 6% 6% 8% 11%;
        gap: 5px;
        width: 100%;
        box-sizing: border-box;
}

    h3.FlowHeader__Heading {
    font-size: calc(var(--s-val) * 2.4);
    font-family: "Shippori Mincho", serif;
}

    .FlowHeader__Heading .ja {
    font-size: calc(var(--s-val) * 2);
}

    .FlowHeader__Heading .ja small {
        font-size: calc(var(--s-val)*1.6);
    }

    h3.FlowHeader__Heading {
        font-size: calc(var(--s-val) * 2);
    }

p.FlowList__ItemDescription {
    font-size: calc(var(--s-val)*1.4);
    line-height: 1.8;
}
}

@media screen and (max-width: 480px) {
    .ScheduleList__Item::after {
        width: max(2.5px, calc(2.5 / 375 * 100vw));
        left: 2.15%;
    }
}