/*
　スマホメインのレイアウト

　1.ヘッダー
　2.メインコンテンツ

*/

span:not([class]) {
    display: inline-block;
}

/*

　1.ヘッダー

*/

.l-header {
    height: 0;
    overflow: hidden;
}

/*

　2.メインコンテンツ

*/
body {
    background-color: #fff;
}

.container {
    max-width: 600px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 16px;
}

.inner {
    padding: 24px;
}

/*　　ファーストビュー　FV　　*/
#fv {
    background-image: linear-gradient(360deg, rgba(237, 237, 237, 1), rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 1) 6%);
    max-height: 965px;
    height: calc(100svh - 72px);
    color: #fff;
}

#fv .container {
    background-image: url(/img/fv-img.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: min(72vw, 360px) auto;
    height: 100%;
    position: relative;
}

.fv-triangle {
    display: block;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.fv-triangle img {
    width: 100%;
}

#fv h1 {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0.12em;
    position: absolute;
    top: 50px;
    left: 24px;
    animation: fade 1s 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    opacity: 0;
}


@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* .text-combine {
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
    padding-bottom: 4px;
}

.kakko {
    display: inline-block;
    transform: translateY(-0.5em);
}

.rotate {
    position: relative;
    padding: 0.4em 0 0.7em;
}

.rotate::before {
    content: "“";
    transform: rotate(90deg);
    display: inline-block;
    line-height: 0;
    position: absolute;
    top: -0.6em;
    left: 1em;
}

.rotate::after {
    content: "”";
    transform: rotate(90deg);
    display: inline-block;
    line-height: 0;
    position: absolute;
    bottom: 0.3em;
    right: 1em;
} */

#fv .cv-btn {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    animation: fadeDownFV 1s 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    opacity: 0;
}

@keyframes fadeDownFV {
    0% {
        opacity: 0;
        bottom: 6%;
    }

    100% {
        opacity: 1;
        bottom: 2%;
    }
}

@media screen and (min-width: 600px) {
    #fv h1 {
        left: calc(40px + 24px);
        width: 22vw;
        max-width: 134px;
    }

    #fv h1 img {
        width: 100%;
    }
}

/*　　問題提起　　*/
.section-title span {
    background: linear-gradient(transparent 75%, #B5D3EB 75%, #B5D3EB 95%, transparent 96%);
    display: inline !important;

}

.problem-bg {
    background-color: #EDEDED;
}

#problem .container {
    margin-bottom: calc(83px + 24px);
    padding: calc(102px + var(--space-24)) 0 66px;
}

.card__body {
    padding: 0 16px;
}

.card__image {
    width: calc(100% * 300 / 375);
    height: auto;
    margin-inline: 0;
    margin-bottom: -14px;
}

.card:first-of-type .card__thumbnail {
    display: flex;
    justify-content: end;
}

.card__title {
    position: relative;
    background-image: linear-gradient(#5888b2, #5888b2cc 70%, transparent);
    max-width: 320px;
    width: calc(100% * 280 / 375 + 32px);
    color: #fff;
    padding: 10px 14px 24px;
}

.card:last-of-type .card__title {
    margin: 0 0 0 auto;
}

.card:last-of-type {
    position: relative;
}

.u-arrow {
    position: absolute;
    bottom: -130px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    opacity: 0;
}

.d-none {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*　　問題解決　*/
#solution img {
    width: calc(100% * 256 / 375);
    height: auto;
    margin-inline: auto;
    margin-bottom: 24px;
}

/*　　プログラムの紹介*/
#program .section-title span {
    background: linear-gradient(transparent 75%, rgba(255, 245, 0, 0.5) 75%, rgba(255, 245, 0, 0.5) 95%, transparent 96%);
}

#program {
    background: url(/img/problem-bg.webp) no-repeat center / cover;
    color: #fff;
    position: relative;
}

.program-triangle {
    display: block;
    max-width: 600px;
    width: 100%;
    height: 54px;
    background-color: #ffffff;
    border-top: 1px solid #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: 0 auto;
}


#program .container {
    padding: var(--space-24) 0 40px;
}

#program img {
    margin-inline: auto;
}

.program-img {
    width: calc(100% * 256 / 375);
    height: auto;
    margin-bottom: 24px;
}

#program h2 {
    color: #fff;
    font-size: var(--fz-20);
}

#progrem-arrow img {
    display: block;
    margin-block: -1em -2.5em;
}

/*　　プログラムの詳細　　*/

#program-detail .inner {
    border: 1px solid #000;
    margin: 40px 0;
}

.order {
    padding: 0;
    list-style: none;
}

.order li:nth-of-type(1) {
    background-color: #F8E5A6;
    padding: 10px 0;
    margin-bottom: 40px;
    position: relative;
}

.order li:nth-of-type(1)::after {
    content: "";
    display: block;
    background: url("/img/order-arrow.svg") no-repeat center;
    width: 37.85px;
    height: 15px;
    position: absolute;
    bottom: calc(-15px + -14px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.order li:nth-of-type(2) {
    background-color: #89D6BC;
    padding: 10px 0;
    margin-bottom: 40px;
    position: relative;
}

.order li:nth-of-type(2)::after {
    content: "";
    display: block;
    background: url("/img/order-arrow.svg") no-repeat center;
    width: 37.85px;
    height: 15px;
    position: absolute;
    bottom: calc(-15px + -14px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.order li:nth-of-type(3) {
    background-color: #EFC5CD;
    padding: 10px 0;
}

.travel-content {
    background-color: #5888B2;
    color: #fff;
    padding: var(--space-24) 0;
}

.border-line {
    border-top: 1px solid #fff;
    height: 1px;
    width: calc(100% * 255 / 375);
    display: block;
    margin-inline: auto;
    margin-bottom: var(--space-16);
}

.change-list {
    padding-inline: 8px;
}

.change-list li {
    background: url(/img/change-list1.svg) no-repeat left bottom / contain;
    min-height: 28px;
    list-style: none;
    margin-bottom: 8px;
    padding: 4px 0 2px 34px;
    position: relative;
}

.change-list li::after {
    content: "";
    background-color: #fff;
    display: block;
    width: calc(100% - 34px);
    height: 1px;
    position: absolute;
    bottom: 0;
}

.change-list li:nth-child(2) {
    background-image: url(/img/change-list2.svg);
}

.change-list li:nth-child(3) {
    background-image: url(/img/change-list3.svg);
}

.change-list li:nth-child(4) {
    background-image: url(/img/change-list4.svg);
}

.change-list li:nth-child(5) {
    background-image: url(/img/change-list5.svg);
    margin-bottom: var(--space-16);
}

/*　　プロフィール　　*/
#profile {
    background-color: #5888B233;
    padding: 40px 0 40px;
}

.profile-container {
    border: 1px solid #000;
    padding: 0 0 var(--space-24) 0;
}

/*　　プログラムリスト　　*/
#program-list {
    background: url(/img/program-list-bg.jpg) no-repeat center / cover;
    padding: var(--space-56) 0;
}

#program-list .inner {
    border: 1px solid #000;
}

#program-list .border-line {
    border-top: 1px solid #000;
    width: calc(100% * 300 / 375);
}

.program-list {
    list-style: none;
    padding-left: 0;
}

.program-list li {
    position: relative;
    padding-left: 1.4em;
}

.program-list li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
}

.program-list li:nth-child(1)::before {
    content: "①";
}

.program-list li:nth-child(2)::before {
    content: "②";
}

.program-list li:nth-child(3)::before {
    content: "③";
}

.program-list li:nth-child(4)::before {
    content: "④";
}

.program-list li:nth-child(5)::before {
    content: "⑤";
}

.program-list li:nth-child(6)::before {
    content: "⑥";
}

.program-list li:nth-child(7)::before {
    content: "⑦";
}

.program-list li:nth-child(8)::before {
    content: "⑧";
}

.program-list li:nth-child(9)::before {
    content: "⑨";
}

.program-list li:nth-child(10)::before {
    content: "⑩";
}

.program-list li:nth-child(11)::before {
    content: "⑪";
}

.program-list li:nth-child(12)::before {
    content: "⑫";
}

.program-list li:nth-child(13)::before {
    content: "⑬";
}

.program-list li:nth-child(14)::before {
    content: "⑭";
}

.program-list li:not(:last-child) {
    margin-bottom: var(--space-4);
}

.price {
    background-color: #FFFAB7BF;
    padding: 24px 16px;
    margin-bottom: 24px;
}

.price-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.price ul {
    list-style: none;
    padding: 0;
}

.double-underline {
    --underline-gap: 4px;
    display: block;
    width: fit-content;
    margin-inline: auto;
    position: relative;
    padding-bottom: calc(var(--underline-gap) + 2px);
}

.double-underline::before,
.double-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-bottom: 1px solid #000;
}

.double-underline::before {
    bottom: 0;
}

.double-underline::after {
    bottom: calc(var(--underline-gap) + 1px);
}

.present-list {
    display: flex;
    justify-content: center;
}

.present-list-item {
    list-style: none;
    padding-left: 0;
}

.present-list-item li {
    position: relative;
    padding-left: 5em;
}

.present-list-item li::before {
    position: absolute;
    top: 0;
    left: 0;
}

.present-list-item li:nth-child(1)::before {
    content: "【特典①】";
}

.present-list-item li:nth-child(2)::before {
    content: "【特典②】";
}

.present-list-item li:nth-child(3)::before {
    content: "【特典③】";
}

.present-list-item li:nth-child(4)::before {
    content: "【特典④】";
}

.present-list-item li:not(:last-child) {
    margin-bottom: var(--space-4);
}

/*   モニターの声　　*/
#voice {
    background: url(/img/monitor-bg.jpg) no-repeat center / cover;
    margin-bottom: var(--space-56);
    padding: var(--space-40) 0;
}

#voice img {
    max-width: 400px;
    width: 100%;
    margin-inline: auto;
}

/*　　購入ボタン　　*/
.cv-btn {
    text-align: center;
    margin: var(--space-24) 0 0;
}

.cv-btn a {
    display: inline-block;
    text-decoration: none;
    max-width: 300px;
    width: 60vw;
}

.cv-btn img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.kiran {
    opacity: 1;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.kiran::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    top: -100px;
    left: 0;
    width: 30px;
    height: 100%;
    opacity: 0;
    transition: cubic-bezier(0.32, 0, 0.67, 0);
}

.kiran:hover::before {
    animation: kiran 0.5s linear;
}

@keyframes kiran {
    0% {
        transform: scale(2) rotate(45deg);
        opacity: 0;
    }

    20% {
        transform: scale(20) rotate(45deg);
        opacity: 0.6;
    }

    40% {
        transform: scale(30) rotate(45deg);
        opacity: 0.4;
    }

    80% {
        transform: scale(45) rotate(45deg);
        opacity: 0.2;
    }

    100% {
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

/*　　よくある質問(FAQ)　　*/
.faq-item {
    margin: 0;
    padding: 0;
}

.faq-item dt {
    position: relative;
    padding-left: 1.5em;
    margin-top: var(--space-24);
    border-bottom: 1px solid #000;
    padding-bottom: var(--space-4);
}

.faq-item dt::before {
    content: "Q. ";
    position: absolute;
    left: 0;
}

.faq-item dt:first-child {
    margin-top: 0;
}

.faq-item dd {
    position: relative;
    padding-left: 1.5em;
    margin-top: var(--space-8);
    margin-bottom: 0;
}

.faq-item dd::before {
    content: "A. ";
    position: absolute;
    left: 0;
}

/*　　最後に　　*/
#end {
    background-color: #5888B2;
    color: #fff;
    padding: var(--space-40) 0;
}

.fix-cv {
    background-color: #9DBFDB;
    position: fixed;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: translateY(100%);
}

.fix-cv a {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
}

.fix-cv a::after {
    content: "";
    background: url(/img/fix-arrow.svg) no-repeat center / cover;
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-left: 4px;
}

/*　　フッター　　*/
footer {
    background-color: #5888B2;
    color: #fff;
    padding-bottom: calc(70px + 8px);
}

@media (min-width: 600px) {
    .container {
        padding-inline: 40px;
    }

    .fix-cv {
        left: 50%;
        transform: translateX(-50%)
    }
}