@charset "UTF-8";

:root {
    --navy:#08111b;
    --navy-2:#101d29;
    --gold:#c79b3b;
    --gold-light:#e7c66e;
    --cream:#fbfaf6;
    --line:#d9cba9;
    --text:#18222d;
    --muted:#68727b;
    --white:#fff;
    --max:1600px;
    --content:1200px;
}

#course-detail.working-holiday {
    font-family: var(--mincho);
}

.dark {
    background:var(--navy);
    color:#fff;
}

.font-gold {
    color: var(--gold);
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:18px;
    justify-content:center;
    color:var(--gold);
    font-size:1.2rem;
    letter-spacing:.22em;
    font-weight:700;
    margin:0 0 16px;
}
.eyebrow:before,.eyebrow:after {
    content:"";
    height:1px;
    width:52px;
    background:currentColor;
}
.eyebrow.light {
    color:var(--gold-light);
}
.section-heading {
    text-align:center;
}
.section-heading .catch {
    font-size: 4.0rem;
    font-weight: bold;
}
.section-heading .sub-catch {
    font-size: 1.8rem;
    font-weight: bold;
    margin:14px 0 0;
}

.btn a {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.6;
    min-width: 380px;
    letter-spacing: 0.2rem;
    position: relative;
    cursor: pointer;
    color: rgb(255, 255, 255);
    background: linear-gradient( 135deg, #FF7A18 0%, #FF861A 35%, #FF941F 65%, #FFA52F 100%);
    padding: 25px 30px;
    transition: 0.3s;
}

.btn a::after {
    content: "\f054";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    font-family: var(--awesome);
}

.marker {
    font-weight: 600;
    background: linear-gradient(transparent 60%, #e7c66e 60%);
}

.icon-bar{
    background:var(--navy);
    border:3px solid var(--gold);
    border-radius:4px;
    padding: 30px;
    margin: 30px 0 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:34px;
}
.icon-bar .item{
    flex:1;
    display:flex;
    align-items:center;
    justify-content: center;
    gap: 25px;
    min-width:0;
}
.icon-bar .item img{
    width:52px;
    height:52px;
}
.icon-bar .txt h3{
    font-size: 2.0rem;
    font-weight:700;
    color: var(--gold);
    margin-bottom:6px;
    white-space:nowrap;
}
.icon-bar .txt p{
    font-size: 1.6rem;
    color:#fff;
    line-height:1.6;
}
.icon-bar .op{
    font-size: 3.0rem;
    font-weight: bold;
    color:var(--gold);
    font-weight:400;
}

.kome {
    font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
    .section-heading .catch {
        font-size: 2.4rem;
    }
    .section-heading .sub-catch {
        font-size: 1.5rem;
        margin: 10px 0 0;
        text-align: center;
    }
    .eyebrow {
        gap: 10px;
        font-size: 1.0rem;
        margin: 0 0 12px;
    }
    .eyebrow:before,
    .eyebrow:after {
        width: 24px;
    }
    .btn a {
        min-width: 0;
        width: 100%;
        font-size: 1.6rem;
        padding: 18px 20px;
    }
    .btn a::after {
        right: 16px;
    }
    .icon-bar {
        flex-direction: column;
        gap: 18px;
        padding: 18px;
    }
    .icon-bar .item {
        width: 100%;
        gap: 14px;
    }
    .icon-bar .item img {
        width: 36px;
        height: 36px;
        margin: 0;
    }
    .icon-bar .txt h3 {
        font-size: 1.5rem;
        white-space: normal;
    }
    .icon-bar .txt p {
        font-size: 1.3rem;
    }
    .icon-bar .op {
        font-size: 2.0rem;
    }
    .kome {
        font-size: 1.1rem;
    }
}

/* mv-area */
#course-detail.working-holiday .mv-area {
    background-image: url(../img/working-holiday-mv.jpg);
    padding:100px 0;
    position:relative;
    display:flex;
    align-items:center;
    color:#fff;
    overflow:hidden;
    margin: 90px 0 0;
    width: 100%;
}
.hero-content {
    position:relative;
    padding-top:60px;
}
.mv-area .eyebrow {
    justify-content:flex-start;
}
.mv-area .catch {
    font-size: 4.0rem;
    line-height: 1.35;
    max-width: 1000px;
    margin: 0 0 25px;
    font-weight: 700;
    font-family: var(--mincho);
    text-align: left;
}
.mv-area .sub-catch {
    font-family: var(--mincho);
    font-size: 1.8rem;
    font-weight: bold;
    text-align: left;
}
.hero-stats {
    display: flex;
    gap: 10px;
    margin: 36px 0;
    width: max-content;
}
.hero-stats li {
    border:1px solid rgba(255,255,255,.25);
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: center;
    padding: 10px;
}
.hero-stats img {
    width: 50px;
    height: 50px;
}
.hero-stats p {
    font-size:3.2rem;
    line-height: 1.2;
}
.hero-stats span {
    font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
    #course-detail.working-holiday .mv-area {
        background-size: auto;
        padding: 400px 0 0;
        margin: 0;
    }
    .hero-content {
        background: #fff;
        padding: 0 20px;
    }
    .mv-area .eyebrow {
        justify-content: flex-start;
    }
    .mv-area .section-heading {
        padding: 0 20px;
        position: absolute;
        top: -280px;
        left: 0;
    }
    .mv-area .catch {
        font-size: 2.0rem;
        line-height: 1.5;
        max-width: 100%;
        margin: 0;
    }
    .mv-area .sub-catch {
        font-size: 1.4rem;
    }
    .hero-stats {
        color: var(--navy);
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        margin: 20px auto;
        width: 100%;
    }
    .hero-stats li {
        border: 1px solid var(--gold-light);
        justify-content: center;
        padding: 8px;
        width: 100%;
    }
    .hero-stats img {
        width: 34px;
        height: 34px;
        margin: 0;
    }
    .hero-stats p {
        font-size: 2.0rem;
    }
    .hero-stats span {
        font-size: 1.4rem;
    }
}

/* intro-area */
.intro-area {
    padding: 100px 0;
}
.intro-grid {
    display: flex;
    align-items: center;
    gap:70px;
}
.intro-area .txt-wrap {
    width: calc((100% - 70px) / 2);
}
.intro-area .catch {
    font-size:4.0rem;
}
.intro-area .sub-catch {
    font-size:1.8rem;
    margin:22px 0 0;
}
.price-row {
    display:flex;
    align-items: baseline;
    justify-content: flex-end;
    color:var(--gold-light);
    gap:15px;
}
.price-row strong {
    font-size:8.0rem;
}
.price-row .course-fee {
    font-size:3.0rem;
    padding: 5px 10px;
}
.price-row strong span {
    font-size:3.0rem;
}
.feature-wrap {
    width: calc((100% - 70px) / 2);
}
.feature-list {
    list-style:none;
    padding:0;
    margin:0;
    border-top:1px solid var(--gold-light);
}
.feature-list li {
    padding:12px 0;
    border-bottom:1px solid var(--gold-light);
    font-size: 2.0rem;
}
.feature-list li:before {
    content:"✓";
    color:var(--gold-light);
    font-size: 2.0rem;
    margin-right:10px
}
.feature-wrap .btn {
    margin: 100px 0 0;
}
.feature-wrap .flex {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0;
}
.feature-wrap .flex img {
    width: 40px;
}

@media screen and (max-width: 768px) {
    .intro-area {
        padding: 50px 0;
    }
    .intro-grid {
        flex-direction: column;
        gap: 30px;
    }
    .intro-area .txt-wrap,
    .feature-wrap {
        width: 100%;
    }
    .feature-list {
        margin: 20px 0 0;
    }
    .intro-area .catch {
        font-size: 2.4rem;
        text-align: center;
    }
    .intro-area .sub-catch {
        font-size: 1.4rem;
        margin: 14px 0 0;
        text-align: center;
    }
    .price-row {
        justify-content: flex-end;
        gap: 8px;
    }
    .price-row strong {
        font-size: 4.5rem;
    }
    .price-row .course-fee {
        font-size: 1.6rem;
        padding: 4px 8px;
    }
    .price-row strong span {
        font-size: 1.8rem;
    }
    .feature-list li {
        font-size: 1.4rem;
        padding: 10px 0;
    }
    .feature-list li:before {
        font-size: 1.4rem;
    }
    .feature-wrap .btn {
        margin: 40px 0 0;
    }
    .feature-wrap .flex {
        flex-direction: row-reverse;
    }
    .feature-wrap .flex img {
        width: 28px;
    }
}

/* problem-area */
.problem-area {
    padding: 100px 0;
}
.problem-area .eyebrow {
    font-size: 2.0rem;
}
.problem-area .section-heading .catch {
    font-weight: bold;
}
.split-card {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin: 50px auto;
}
.split-card .copy {
    padding:50px 60px;
    font-weight: bold;
}
.split-card .arrow-down-wh {
    display: block;
    width: 50px;
    margin: 30px auto;
}
.split-card .wh-problem-img {
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:360px;
}
.split-card .basic-txt {
    font-size: 1.8rem;
    padding-left:18px;
    text-align: center;
}
.split-card .answer {
    font-size:2.4rem;
    text-align: center;
}
.split-card .answer span {
    font-size:3.2rem;
}
.split-card .txt {
    font-size:1.8rem;
    border-left:2px solid var(--gold);
    padding-left:18px;
    margin: 25px auto 0;
    width: fit-content;
}

.compare-title {
    margin:35px auto 20px;
    background:var(--navy);
    color:#fff;
    font-size: 4.0rem;
    border:1px solid var(--gold);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
    padding:20px;
}
.compare-title span {
    color:var(--gold);
    font-size:3.0rem;
}
.icon-grid {
    display:grid;
    gap:14px;
}
.icon-grid.six {
    grid-template-columns:repeat(3,1fr);
    max-width: 1000px;
    margin:auto;
}
.icon-grid.four {
    grid-template-columns:repeat(4,1fr);
}
.icon-grid .icon-grid-item {
    border:1px solid #e1d5b9;
    background:#fff;
    text-align:center;
    padding:22px 14px;
    min-height:120px;
}
.icon-grid img {
    width:50px;
    height:50px;
}
.icon-grid p {
    font-size:1.8rem;
    font-weight: bold;
    line-height:1.5;
    margin: 10px 0 0;
}

@media screen and (max-width: 768px) {
    .problem-area {
        padding: 50px 0;
    }
    .problem-area .eyebrow {
        font-size: 1.3rem;
    }
    .split-card {
        grid-template-columns: 1fr;
        margin: 30px auto;
    }
    .split-card .copy {
        padding: 24px 16px;
    }
    .split-card .arrow-down-wh {
        margin: 15px auto;
    }
    .split-card .wh-problem-img {
        min-height: 220px;
    }
    .split-card .basic-txt {
        font-size: 1.4rem;
        padding-left: 12px;
    }
    .split-card .answer {
        font-size: 1.8rem;
        text-align: center;
    }
    .split-card .answer span {
        font-size: 2.4rem;
    }
    .split-card .txt {
        font-size: 1.4rem;
        padding-left: 12px;
        margin: 16px 0 0;
    }
    .compare-title {
        flex-direction: column;
        gap: 10px;
        font-size: 2.0rem;
        padding: 14px;
        margin: 24px auto 14px;
    }
    .compare-title span {
        font-size: 1.6rem;
    }
    .icon-grid.six {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .icon-grid.four {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .icon-grid .icon-grid-item {
        padding: 14px 8px;
        min-height: auto;
    }
    .icon-grid img {
        width: 34px;
        height: 34px;
    }
    .icon-grid p {
        font-size: 1.2rem;
        margin: 8px 0 0;
    }
}

/* value-area */
.value-area {
    padding:100px 0;
    background:linear-gradient(180deg,#0b141d,#08111b);
}
.value-head {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}
.value-head .sub-catch {
    font-size:1.8rem;
    text-align: left;
}
.value-head img {
    width:100%;
    aspect-ratio:1.3;
    object-fit:cover;
}
.value-tabs {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}
.value-tabs .value-item {
    width: calc((100% - 60px) / 4);
    border:1px solid var(--gold-light);
    padding:18px;
    text-align:center;
    font-size:2.4rem
}
.value-tabs .value-item img {
    width: 50px;
}
.value-tabs .value-item p {
    font-size:3.0rem
}
.value-cards-sec{
    padding: 100px 0;
    background: #faf7f1;
    color: var(--navy);
    margin: 50px 0 0;
}

.value-cards-sec .catch{
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.7;
}
.vc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin: 40px 0 0;
}
.vc-card{
    background:#fff;
    border:1px solid var(--gold-line);
    border-radius:10px;
    padding:30px 28px;
    display:flex;
    align-items:center;
    justify-content: center;
    gap:22px;
}
.vc-card img{
    width:50px;
    height:50px;
}
.vc-card .txt{
    font-size: 2.0rem;
    font-weight: 700;
    line-height:1.6;
}
.message-block {
    padding: 80px 0 0;
}
.message-block .section-heading {
    border: 1px solid var(--gold);
    padding: 30px;
    margin: 0 auto;
}
.gold-banner {
    margin:35px auto 0;
    background:var(--navy);
    color:var(--gold-light);
    text-align:center;
    font-size:4.0rem;
}

@media screen and (max-width: 768px) {
    .value-area {
        padding: 50px 0;
    }
    .value-head {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .value-head .sub-catch {
        font-size: 1.4rem;
        text-align: center;
    }
    .value-tabs {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
    }
    .value-tabs .value-item {
        width: calc((100% - 10px) / 2);
        padding: 12px;
        font-size: 1.4rem;
    }
    .value-tabs .value-item img {
        width: 32px;
    }
    .value-tabs .value-item p {
        font-size: 1.8rem;
    }
    .value-cards-sec {
        padding: 50px 0;
        margin: 30px 0 0;
    }
    .value-cards-sec .catch {
        font-size: 1.8rem;
    }
    .vc-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 24px 0 0;
    }
    .vc-card {
        padding: 18px;
        gap: 14px;
    }
    .vc-card img {
        width: 34px;
        height: 34px;
        margin: 0;
    }
    .vc-card .txt {
        font-size: 1.4rem;
    }
    .message-block {
        padding: 40px 20px 0;
    }
    .message-block .section-heading {
        padding: 16px;
    }
    .gold-banner {
        font-size: 2.0rem;
        margin: 20px auto 0;
    }
}

/* step-area */
.step-area {
    background: #FAF9F7;
    padding: 100px 0;
}
.step-area .section-heading .basic-txt {
    text-align: left;
    font-weight: bold;
    margin: 20px 0 0;
}
.step-area .steps.two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin: 30px auto 0;
}
.step-area .steps .step-box {
    background:#fff;
    border:1px solid #ddd0b0;
    padding:28px;
}
.step-area .steps .step-box.step1 {
    position: relative;
}
.step-area .steps .step-box.step1::after {
    content: "";
    background: url(../img/arrow-right-wh.svg) no-repeat;
    background-size: cover;
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -65px;
}
.step-area .steps .step-box .step-ttl {
    display: flex;
    align-items: center;
    gap: 40px;
}
.step-area .steps .step-box .step-ttl .num {
    color:#b18427;
    font-weight:700;
    font-size:1.6rem;
    line-height: 1.2;
    text-align: center;
    position: relative;
}
.step-area .steps .step-box .step-ttl .num::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 100%;
    background: #b18427;
    position: absolute;
    top: 0;
    right: -20px;
}
.step-area .steps .step-box .step-ttl .num span {
    font-size: 4.0rem;
}
.step-area .steps .step-box h3 {
    font-size:2.0rem;
    font-weight: bold;
    line-height: 1.6;
}
.step-area .steps .step-box p {
    margin: 10px 0 0;
}
.step-area .steps .step-box .step-wrap {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 20px 0 0;
}
.step-area .steps .step-box.step2 .step-wrap {
    gap: 20px;
}
.step-area .steps .step-box .step-wrap .step-item {
    width: calc((100% - 30px) / 3);
    height: 120px;
    border: 1px solid var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
.step-area .steps .step-box.step1 .step-wrap .step-item {
    position: relative;
}
.step-area .steps .step-box.step1 .step-wrap .step-item::after {
    content: "";
    background: url(../img/arrow-right-wh.svg) no-repeat;
    background-size: cover;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -40px;
}
.step-area .steps .step-box.step1 .step-wrap .step-item:last-of-type:after {
    display: none;
}
.step-area .steps .step-box.ste-2 .step-wrap .step-item {
    width: calc((100% - 60px) / 4);
}
.step-area .steps .step-box .step-wrap .step-item img {
    width: 50px;
}
.step-area .steps .step-box .step-wrap .step-item .txt {
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}
.step-area .steps .step-box .comment {
    font-size: 1.8rem;
    font-weight: bold;
}
.step-area .number-highlight {
    width: 100%;
    margin: 30px auto 0;
}
.step-area .number-highlight img {
    width: 100%;
}
.step-area .kome {
    font-size: 1.4rem;
    margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
    .step-area {
        padding: 50px 0;
    }
    .step-area .section-heading .basic-txt {
        font-size: 1.4rem;
    }
    .step-area .steps.two {
        grid-template-columns: 1fr;
        gap: 40px;
        margin: 20px auto 0;
    }
    .step-area .steps .step-box {
        padding: 18px;
    }
    .step-area .steps .step-box.step1::after {
        width: 40px;
        height: 40px;
        right: 50%;
        top: auto;
        bottom: -40px;
        transform: translateX(50%) rotate(90deg);
    }
    .step-area .steps .step-box .step-ttl {
        gap: 16px;
    }
    .step-area .steps .step-box .step-ttl .num {
        font-size: 1.2rem;
    }
    .step-area .steps .step-box .step-ttl .num::after {
        right: -8px;
    }
    .step-area .steps .step-box .step-ttl .num span {
        font-size: 2.4rem;
    }
    .step-area .steps .step-box h3 {
        font-size: 1.5rem;
    }
    .step-area .steps .step-box .step-wrap,
    .step-area .steps .step-box.step2 .step-wrap {
        flex-wrap: wrap;
        gap: 10px;
        margin: 14px 0 0;
    }
    .step-area .steps .step-box .step-wrap .step-item,
    .step-area .steps .step-box.ste-2 .step-wrap .step-item {
        width: calc((100% - 10px) / 2);
        height: auto;
        padding: 8px;
    }
    .step-area .steps .step-box.step1 .step-wrap .step-item::after {
        display: none;
    }
    .step-area .steps .step-box .step-wrap .step-item img {
        width: 34px;
    }
    .step-area .steps .step-box .step-wrap .step-item .txt {
        font-size: 1.2rem;
    }
    .step-area .steps .step-box .comment {
        font-size: 1.3rem;
    }
    .step-area .kome {
        font-size: 1.1rem;
    }
}

/* two-hundred-area */
.two-hundred-area {
    background: #FAF9F7;
    padding: 0 0 100px;
}

.two-hundred-area .message {
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center;
    margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
    .two-hundred-area {
        padding: 0 0 50px;
    }
    .two-hundred-area .img-box {
        margin: 20px 0 0;
    }
    .two-hundred-area .icon-bar .item img {
        margin: 0;
    }
    .two-hundred-area .message {
        font-size: 1.8rem;
    }
}

/* flow-area */
.flow-area {
    background: #FAF9F7;
    padding: 0 0 80px;
}

.flow-area .img-box {
    margin: 50px 0 0;
    width: 100%;
}

.flow-area .img-box img {
    width: 100%;
}

.flow-area .message {
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center;
    margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
    .flow-area {
        padding: 0 0 50px;
    }
    .flow-area .img-box {
        margin: 30px 0 0;
    }
    .flow-area .message {
        font-size: 1.8rem;
    }
}

/* scene-area */
.scene-area {
    background: #FAF9F7;
    padding: 100px 0;
}
.scene-area .app-mock {
    display:grid;
    grid-template-columns:1.4fr .6fr;
    gap:30px;
    align-items:center;
    margin: 20px auto 0;
    background:#FAF9F7;
    padding:20px;
}
.scene-area .app-mock img {
    width:100%;
    object-fit:contain;
}
.scene-area .mock-copy {
    padding: 10px;
}
.scene-area .mock-copy .copy-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.scene-area .mock-copy .copy-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.6rem;
    padding: 5px;
    border:1px solid var(--gold-light);
    border-radius: 8px;
}
.scene-area .mock-copy .copy-list li img {
    width: 25px;
}
.scene-area .scene-list {
    display: flex;
    align-items: center;
    gap: 50px;
    margin: 20px 0 0;
}
.scene-area .scene-list .scene-item {
    border: 1px solid var(--gold);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    padding: 15px;
    width: calc((100% - 100px) / 3);
    position: relative;
}
.scene-area .scene-list .scene-item::after {
    content: "";
    background: url(../img/arrow-right02-wh.svg) no-repeat;
    background-size: cover;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -50px;
}
.scene-area .scene-list .scene-item:last-of-type:after {
    display: none;
}
.scene-area .scene-list .scene-item img {
    width: 50px;
}
.scene-area .scene-list .scene-item .txt {
    text-align: center;
}
.scene-area .scene-list .scene-item .txt strong {
    font-size: 2.4rem;
}
.scene-area .icon-bar .txt p {
    font-size: 3.0rem;
}
.scene-area .teaching-materials-contents {
    padding: 20px;
    margin: 50px 0 0;
}
.scene-area .teaching-materials-contents .teaching-materials-ttl {
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    font-size: 2.4rem;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: .1rem;
    text-align: center;
    padding: 10px 20px;
    margin: 0 auto;
    max-width: 600px;
    position: relative;
}
.scene-area .teaching-materials-contents .img-box {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin: 30px 0 0;
}
.scene-area .teaching-materials-contents .img-box .img-wrap {
    width: 100%;
    max-height: 500px;
    overflow-y: auto;
}
.scene-area .teaching-materials-contents .img-box .img-wrap img {
    width: 100%;
}
.scene-area .cv-contents {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 30px 0 0;
}
.scene-area .cv-contents .message {
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center;
    margin: 20px 0 0;
}
.scene-area .cv-contents .btn a {
    width: 350px;
    background: linear-gradient(0deg, #9d8233, #a98d39, #b6993f, #c2a445, #cfb04c, #dbbc52, #e8c858, #f5d45f);
    border-radius: 50px;
    margin: 0 auto;
}
.scene-area .scene-point {
    display: block;
    margin: 100px 0 0;
}
.scene-area .scene-point .scene-point-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 20px;
}
.scene-area .scene-point .scene-point-box .section-heading {
    text-align: left;
}
.scene-area .scene-point .scene-point-box .section-heading .eyebrow {
    font-size: 3.0rem;
    justify-content: center;
}
.scene-area .scene-point .scene-point-box .section-heading img {
    margin: 20px 0 0;
    width: 650px;
}
.scene-area .scene-point .scene-point-box .scene-point-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 600px;
}
.scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item {
    border: 1px solid var(--gold);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px;
    position: relative;
}
.scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item::after {
    content: "";
    background: url(../img/arrow-down02-wh.svg) no-repeat;
    background-size: cover;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -50px;
}
.scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item:last-of-type:after {
    display: none;
}
.scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item .num {
    border-radius: 50px;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 10px;
    width: 50px;
    height: 50px;
}
.scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item .txt-box {
    max-width: 320px;
}
.scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item .txt-box .ttl {
    color: var(--gold);
}
.scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item .txt-box .txt strong {
    font-size: 2.4rem;
}
.scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item img {
    width: 60px;
}
.scene-area .scene-point .voice-box {
    border-top: 1px solid var(--gold-light);
    margin: 30px 0 0;
    padding: 20px 0 0;
}
.scene-area .scene-point .voice-list {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0 0;
}
.scene-area .scene-point .voice-list .voice-item {
    border: 1px solid var(--gold-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    width: calc((100% - 40px) / 3);
}
.scene-area .scene-point .voice-list .voice-item img {
    width: 50px;
}
.scene-area .scene-point .movie-box {
    margin: 30px 0 0;
}
.scene-area .scene-point .movie-box .movie-list {
    border: 1px solid var(--gold-light);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    text-align: center;
    margin: 20px 0 0;
}
.scene-area .scene-point .teacher-contents {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 50px 0 0;
}
.scene-area .scene-point .teacher-contents .teacher-box {
    border: 1px solid var(--gold);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    width: calc((100% - 40px) / 3);
    height: stretch;
}
.scene-area .scene-point .teacher-contents .teacher-box .teacher-ttl {
    background: var(--navy);
    color: #fff;
    padding: 5px 15px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
    width: max-content;
}
.scene-area .scene-point .teacher-contents .teacher-box .teacher-list {
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.scene-area .scene-point .teacher-contents .teacher-box .teacher-list .teacher-item {
    border-bottom: 1px dotted var(--gold-light);
    display: flex;
    gap: 10px;
    padding: 20px;
}
.scene-area .scene-point .teacher-contents .teacher-box .teacher-list .teacher-item:last-of-type {
    border: none;
}
.scene-area .scene-point .teacher-contents .teacher-box .teacher-list .teacher-item img {
    width: 50px;
}
.scene-area .scene-point .teacher-contents .teacher-box .img-box {
    width: 100%;
}
.scene-area .scene-point .teacher-contents .teacher-box .img-box img {
    width: 100%;
}
.scene-area .scene-point .txt-banner {
    background: linear-gradient(0deg, #9d8233, #a98d39, #b6993f, #c2a445, #cfb04c, #dbbc52, #e8c858, #f5d45f);
    border-radius: 8px;
    color: var(--navy);
    font-weight: bold;
    text-align: center;
    padding: 10px;
    margin: 30px auto 0;
    position: relative;
    width: 500px;
}
.scene-area .scene-point .txt-banner .basic-txt {
    line-height: 1.4;
}
.scene-area .scene-point .txt-banner .strong {
    font-size: 2.8rem;
}
.scene-area .scene-point .txt-banner .strong span {
    font-size: 4.8rem;
}
.scene-area .scene-point .txt-banner .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    border-radius: 80px;
    color: #fff;
    font-size: 2.0rem;
    line-height: 1.2;
    text-align: center;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
    rotate: 30deg;
}
.scene-area .scene-list02 {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 20px 0 0;
}
.scene-area .scene-list02 .scene-item {
    border: 1px solid var(--gold);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    padding: 15px;
    width: calc((100% - 60px) / 3);
    position: relative;
}
.scene-area .scene-list02 .scene-item img {
    width: 50px;
}
.scene-area .scene-list02 .scene-item .txt {
    text-align: center;
}
.scene-area .scene-list02 .scene-item .txt strong {
    font-size: 2.0rem;
}

@media screen and (max-width: 768px) {
    .scene-area {
        padding: 0 0 50px;
    }
    .scene-area .app-mock {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 10px;
    }
    .scene-area .mock-copy {
        padding: 4px;
    }
    .scene-area .mock-copy .copy-list li {
        font-size: 1.6rem;
        padding: 5px 5px 5px 60px;
    }
    .scene-area .mock-copy .copy-list li img {
        width: 18px;
        margin: 0;
    }
    .scene-area .scene-list,
    .scene-area .scene-list02 {
        flex-direction: column;
        gap: 20px;
        margin: 16px 0 0;
    }
    .scene-area .scene-list .scene-item,
    .scene-area .scene-list02 .scene-item {
        width: 100%;
    }
    .scene-area .scene-list .scene-item::after {
        width: 30px;
        height: 30px;
        right: 50%;
        top: 84px;
        bottom: -40px;
        transform: translateX(50%) rotate(90deg);
    }
    .scene-area .scene-list .scene-item img,
    .scene-area .scene-list02 .scene-item img {
        width: 34px;
        margin: 0;
    }
    .scene-area .scene-list .scene-item .txt strong {
        font-size: 1.6rem;
    }
    .scene-area .scene-list02 .scene-item .txt strong {
        font-size: 1.4rem;
    }
    .scene-area .icon-bar .txt p {
        font-size: 1.6rem;
    }
    .scene-area .teaching-materials-contents {
        padding: 0;
        margin: 30px 0 0;
    }
    .scene-area .teaching-materials-contents .teaching-materials-ttl {
        font-size: 1.8rem;
        padding: 5px 10px;
        max-width: 100%;
    }
    .scene-area .teaching-materials-contents .img-box {
        flex-direction: column;
        gap: 20px;
        margin: 30px 0 0;
    }
    .scene-area .teaching-materials-contents .img-box .img-wrap {
        width: 100%;
        max-height: 150px;
    }
    .scene-area .teaching-materials-contents .img-box .img-wrap img {
        width: 100%;
        object-fit: contain;
    }
    .scene-area .cv-contents {
        gap: 12px;
        margin: 20px 0 0;
    }
    .scene-area .cv-contents .message {
        font-size: 1.8rem;
    }
    .scene-area .cv-contents .btn a {
        width: 100%;
    }
    .scene-area .scene-point {
        margin: 40px 0 0;
    }
    .scene-area .scene-point .scene-point-box {
        flex-direction: column;
        gap: 24px;
        padding: 10px;
        margin: 30px 0 0;
    }
    .scene-area .scene-point .scene-point-box .section-heading {
        text-align: center;
    }
    .scene-area .scene-point .scene-point-box .section-heading .eyebrow {
        font-size: 1.2rem;
        justify-content: center;
    }
    .scene-area .scene-point .scene-point-box .section-heading img {
        width: 100%;
        margin: 14px 0 0;
    }
    .scene-area .scene-point .scene-point-box .scene-point-list {
        width: 100%;
        gap: 34px;
    }
    .scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item::after {
        width: 30px;
        height: 30px;
        bottom: -32px;
    }
    .scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item .num {
        font-size: 1.3rem;
        width: 60px;
        height: 40px;
        padding: 6px;
    }
    .scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item .txt-box {
        max-width: none;
    }
    .scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item .txt-box .txt strong {
        font-size: 1.6rem;
    }
    .scene-area .scene-point .scene-point-box .scene-point-list .scene-point-item img {
        width: 40px;
    }
    .scene-area .scene-point .voice-list {
        flex-direction: column;
        gap: 12px;
    }
    .scene-area .scene-point .voice-list .voice-item {
        width: 100%;
        padding: 14px;
    }
    .scene-area .scene-point .voice-list .voice-item img {
        width: 34px;
    }
    .scene-area .scene-point .movie-box .movie-list {
        flex-direction: column;
        gap: 16px;
        padding: 14px;
    }
    .scene-area .scene-point .movie-box .movie-list iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .scene-area .scene-point .teacher-contents {
        flex-direction: column;
        gap: 30px;
        margin: 40px 0 0;
    }
    .scene-area .scene-point .teacher-contents .teacher-box {
        width: 100%;
        padding: 24px 14px 14px;
    }
    .scene-area .scene-point .teacher-contents .teacher-box .teacher-list .teacher-item {
        align-items: center;
    }
    .scene-area .scene-point .teacher-contents .teacher-box .teacher-list .teacher-item img {
        margin: 0;
    }
    .scene-area .scene-point .txt-banner {
        width: 100%;
        padding: 14px;
    }
    .scene-area .scene-point .txt-banner .strong {
        font-size: 1.8rem;
    }
    .scene-area .scene-point .txt-banner .strong span {
        font-size: 3.0rem;
    }
    .scene-area .scene-point .txt-banner .icon {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
        right: 0;
    }
}

/* wh-cycle-area */
.wh-cycle-area{
    padding:100px 0;
}
.wh-cycle-flow{
    display:flex;
    align-items:flex-start;
    gap: 50px;
    position:relative;
    margin: 50px 0 0;
}
.wh-cycle-col{
    flex:1;
    border:2px solid var(--navy);
    border-radius:18px;
    padding:56px 26px 30px;
    position:relative;
    height: stretch;
}
.wh-cycle-col.orange{
    border-color:#e8891f;
}
.wh-cycle-col.green{
    border-color:#1f6f4a;
}
.wh-cycle-head{
    position:absolute;
    top:-26px;
    left:50%;
    transform:translateX(-50%);
    background:var(--navy);
    color:#fff;
    border-radius:50px;
    padding:12px 32px;
    font-size:2.0rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}
.wh-cycle-head img{
    width:30px;
    height:30px;
}
.wh-cycle-col.orange .wh-cycle-head{
    background:#e8891f;
}
.wh-cycle-col.green .wh-cycle-head{
    background:#1f6f4a;
}

.wh-cycle-sub{
    text-align:center;
    font-weight:700;
    font-size:1.5rem;
    color:var(--navy);
    margin:10px 0 22px;
}
.wh-cycle-col.orange .wh-cycle-sub{
    color:#e8891f;
}
.wh-cycle-col.green .wh-cycle-sub{
    color:#1f6f4a;
}

.wh-cycle-list{
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.wh-cycle-list li{
    background:#fbfbfb;
    border:1px solid #eee;
    border-radius:14px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:16px;
}
.wh-cycle-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    flex:none;
    background:var(--navy);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.wh-cycle-icon img{
    width:24px;
    height:24px;
    filter:brightness(0) invert(1);
}
.wh-cycle-col.orange .wh-cycle-icon{
    background:#e8891f;

}
.wh-cycle-col.green .wh-cycle-icon{
    background:#1f6f4a;
}
.wh-num{
    position:absolute;
    top:-6px;
    left:-6px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    border:2px solid #fff;
    font-size:1.1rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}
.wh-cycle-col.orange .wh-num{
    background:#e8891f;
}
.wh-cycle-col.green .wh-num{
    background:#1f6f4a;
}

.wh-txt strong{
    display:block;
    font-size:1.6rem;
    line-height:1.4;
}
.wh-txt p{
    margin:4px 0 0;
    font-size:1.4rem;
    line-height:1.5;
}

.wh-cycle-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:22px;
    padding:10px;
    border-radius:50px;
    border:1px solid var(--navy);
    color:var(--navy);
    font-size:1.3rem;
    font-weight:700;
}
.wh-cycle-note img{
    width:22px;
    height:22px;
}
.wh-cycle-col.orange .wh-cycle-note{
    border-color:#e8891f;
    color:#e8891f;
}

.wh-cycle-col::after {
    content: "";
    background: url(../img/arrow-right02-wh.svg) no-repeat;
    background-size: cover;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -50px;
}

.wh-cycle-col:last-of-type::after {
    display: none;
}

.wh-cycle-loop{
    border:4px solid var(--gold);
    border-top:none;
    border-radius:0 0 20px 20px;
    height:56px;
    margin:-2px 150px 0;
    position: relative;
}

.wh-cycle-loop::before{
    content: "";
    background: url(../img/arrow-up-wh.svg) no-repeat;
    background-size: contain;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: -16px;
    left: -27px;
}

.wh-cycle-area .icon-bar .txt p {
    font-size: 3.0rem;
}

@media screen and (max-width: 768px) {
    .wh-cycle-area {
        padding: 50px 0;
    }
    .wh-cycle-flow {
        flex-direction: column;
        gap: 60px;
        margin: 40px 0 0;
    }
    .wh-cycle-col {
        width: 100%;
        padding: 46px 16px 20px;
    }
    .wh-cycle-col::after {
        width: 30px;
        height: 30px;
        right: 50%;
        top: auto;
        bottom: -46px;
        transform: translateX(50%) rotate(90deg);
    }
    .wh-cycle-head {
        padding: 10px 20px;
        font-size: 1.4rem;
        top: -20px;
    }
    .wh-cycle-head img {
        width: 22px;
        height: 22px;
    }
    .wh-cycle-sub {
        font-size: 1.2rem;
        margin: 8px 0 16px;
    }
    .wh-cycle-list li {
        padding: 12px 14px;
        gap: 12px;
    }
    .wh-cycle-icon {
        width: 40px;
        height: 40px;
    }
    .wh-cycle-icon img {
        width: 18px;
        height: 18px;
    }
    .wh-txt strong {
        font-size: 1.3rem;
    }
    .wh-txt p {
        font-size: 1.1rem;
    }
    .wh-cycle-note {
        font-size: 1.1rem;
    }
    .wh-cycle-note img{
        margin: 0;
    }
    .wh-cycle-loop {
        margin: -2px 40px 0;
    }
    .wh-cycle-area .icon-bar .txt p {
        font-size: 1.6rem;
        text-align: center;
    }
}

/* wh-extra-area */
.wh-extra-area{
    padding:100px 0;
    background:var(--cream);
}
.wh-extra-grid{
    display:flex;
    align-items: start;
    gap:22px;
    margin:50px 0 0;
}
.wh-extra-card{
    background:#fff;
    border-radius:16px;
    padding: 20px;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
    width: calc((100% - 44px) / 3);
}
.wh-extra-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}
.wh-extra-num{
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex:none;
}
.wh-extra-head h3{
    font-size:1.8rem;
    font-weight:700;
}
.wh-extra-sub{
    color:var(--gold);
    font-weight:700;
    text-align:center;
    font-size:1.8rem;
    line-height:1.7;
    margin-bottom:16px;
}
.wh-extra-txt{
    font-size:1.6rem;
    line-height:1.9;
    margin-bottom:20px;
}
.wh-extra-card .img-wrap {
    width: 100%;
}
.wh-extra-card .img-wrap img {
    width: 100%;
}

/* card1: results panel */
.wh-promo{
    display:flex;
    flex-direction: column;
    gap:20px;
    background:var(--cream);
    border-radius:10px;
    padding:16px;
    margin-top:18px;
    align-items:center;
}
.wh-promo .thumb{
    width:120px;
    height:88px;
    border-radius:8px;
    flex:none;
    overflow:hidden;
}
.wh-promo .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.wh-promo .txt h4{
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom:4px;
}
.wh-promo .txt p{
    font-size: 1.4rem;
    line-height:1.6;
    margin-bottom:6px;
}
.wh-promo .txt a{
    font-size: 1.6rem;
    color:var(--gold);
    font-weight:700;
}

/* card2: video mock */
.wh-icon-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    text-align:center;
    margin: 15px 0 0;
}
.wh-icon-row .wh-icon-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 5px;
    width: calc((100% - 10px) / 2);
    height: stretch;
}
.wh-icon-row .wh-icon-item p {
    font-size: 1.4rem;
    font-weight: bold;
}
.wh-icon-row .ic{
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
}
.wh-icon-row .ic img{
    width:30px;
}
.wh-icon-row p{
    font-size: 1.6rem;
    line-height:1.5;
}

.wh-tip{
    background:#fff8e6;
    border:1px solid #f2e2ac;
    border-radius:10px;
    padding:16px 18px;
    margin: 15px 0 0;
}
.wh-tip .ttl{
    font-weight:700;
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
}
.wh-tip .txt{
    font-size: 1.4rem;
}

/* card3: vocab program */
.wh-flow3{
    display:flex;
    align-items:flex-start;
    gap:2px;
    margin-bottom:24px;
}
.wh-flow3 .step{
    flex:1;
    text-align:center;
}
.wh-flow3 .step .ttl {
    font-size:1.4rem;
    font-weight:700;
    margin-bottom:8px;
}
.wh-flow3 .step .ttl .num{
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    font-size:1.4rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
}
.wh-flow3 .step .ic{
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
}
.wh-flow3 .step .ic img{
    width:28px;
}
.wh-flow3 .step .desc{
    font-size:1.0rem;
    font-weight: bold;
    color: var(--navy);
    line-height:1.6;
}
.wh-flow3-arrow{
    padding-top:110px;
    color:var(--gold);
    font-size:1.4rem;
}
.wh-flow3-arrow img {
    width: 20px;
    height: 20px;
}

.wh-flow-panel{
    background:var(--cream);
    border-radius:12px;
    padding:10px;
}
.wh-flow-panel .ttl{
    font-weight:700;
    margin-bottom:16px;
    font-size:1.8rem;
}
.wh-flow-panel .row{
    display:flex;
    align-items:flex-start;
    gap:2px;
}
.wh-flow-panel .item{
    flex:1;
    text-align:center;
}
.wh-flow-panel .item h5{
    color:var(--navy);
    font-weight:700;
    margin-bottom:10px;
    font-size:1.2rem;
}
.wh-flow-panel .item .ic img{
    width:26px;
    margin-bottom:8px;
}
.wh-flow-panel .item p{
    font-size:1.2rem;
    font-weight: bold;
    color:var(--navy);
    line-height:1.6;
}
.wh-flow-panel .arrow{
    padding-top:30px;
    color:var(--gold);
}
.wh-flow-panel .arrow img{
    width: 20px;
    height: 20px;
}

.wh-extra-banner{
    margin-top:34px;
    background:var(--navy);
    color:#fff;
    text-align:center;
    border-radius:12px;
    padding:22px;
    font-size:1.8rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

@media screen and (max-width: 768px) {
    .wh-extra-area {
        padding: 50px 0;
    }
    .wh-extra-grid {
        flex-direction: column;
        gap: 20px;
        margin: 30px 0 0;
    }
    .wh-extra-card {
        width: 100%;
        padding: 16px;
    }
    .wh-extra-head {
        justify-content: center;
    }
    .wh-extra-head h3 {
        font-size: 1.8rem;
    }
    .wh-extra-sub {
        font-size: 1.6rem;
    }
    .wh-extra-txt {
        font-size: 1.6rem;
        line-height: 1.7;
    }
    .wh-promo {
        text-align: left;
    }
    .wh-icon-row .wh-icon-item {
        width: calc((100% - 10px) / 2);
    }
    .wh-flow3 {
        flex-wrap: wrap;
        gap: 10px;
    }
    .wh-flow3 .step {
        width: calc((100% - 10px) / 2);
    }
    .wh-flow3-arrow {
        display: none;
    }
    .wh-flow-panel .row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .wh-flow-panel .item {
        width: calc((100% - 10px) / 2);
    }
    .wh-extra-banner {
        font-size: 1.3rem;
        text-align: left;
        padding: 16px;
        gap: 6px;
    }
}

/* wh-pace-area */
.wh-pace-area{
    padding:100px 0;
    background:#fff;
}
.wh-pace-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    color:var(--gold);
    font-size:3.0rem;
    font-weight:700;
    letter-spacing:.15em;
    margin-bottom:20px;
}
.wh-pace-eyebrow:before,
.wh-pace-eyebrow:after{
    content:"";
    height:1px;
    width:120px;
    background:var(--gold);
}

.wh-pace-head{
    position:relative;
    margin-bottom:10px;
}

.wh-pace-banner{
    margin:40px auto 26px;
    background:var(--navy);
    color:#fff;
    border-radius:50px;
    text-align:center;
    padding:14px 30px;
    font-weight:700;
    width:max-content;
}

.wh-pace-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.wh-pace-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    font-weight: bold;
    border-radius: 16px;
    padding: 20px;
}
.wh-pace-col.standard {
    border: 1px solid var(--navy);
    color: var(--navy);
}
.wh-pace-col.intensive {
    border: 1px solid var(--gold);
    color: var(--gold);
}
.wh-pace-col .flex-box {
    display: flex;
    align-items: center;
    gap: 30px;
}
.wh-pace-col .img-wrap {
    width:220px;
    margin-bottom:18px;
}
.wh-pace-col .img-wrap .wh-pace-img {
    width: 100%;
}
.wh-pace-col h3{
    font-size:3.2rem;
    letter-spacing:.05em;
    color:var(--navy);
}
.wh-pace-col .jp{
    font-size:1.8rem;
    font-weight:700;
    margin:6px 0 14px;
}
.wh-pace-col .divider{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--gold);
    width:100%;
    justify-content:center;
    margin-bottom:18px;
}
.wh-pace-col .divider:before,
.wh-pace-col .divider:after{
    content:"";
    height:1px;
    width:100%;
    background:var(--gold-light);
}
.wh-pace-col .divider img{
    width: 20px;
}

.wh-pace-list{
    list-style:none;
    padding:0;
    margin:0 0 20px;
    text-align:left;
    width:100%;
    max-width:380px;
}
.wh-pace-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:1.8rem;
    padding:8px 0;
    line-height:1.6;
}
.wh-pace-list li .check{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1.0rem;
    margin-top:3px;
}
.wh-pace-col.intensive .wh-pace-list li .check{
    background:var(--gold);
}
.wh-pace-list li .check{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1.0rem;
    margin-top:3px;
}

.wh-pace-note{
    display:flex;
    align-items:center;
    justify-content: center;
    gap:14px;
    background:var(--cream);
    border-radius:10px;
    padding:14px 18px;
    font-size:1.8rem;
    line-height:1.6;
    text-align:left;
}
.wh-pace-note .ic{
    width:44px;
    height:44px;
    background: #fff;
    border-radius:50%;
    border:1px solid var(--navy);
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    color:var(--navy);
}
.wh-pace-note .ic img{
    width: 30px;
}
.wh-pace-col .wh-pace-note{
    width: 100%;
}
.wh-pace-col.standard .wh-pace-note{
    background: #d1e7ff;
}
.wh-pace-col.intensive .wh-pace-note{
    background:#fdf5e8;
}
.wh-pace-col.intensive .wh-pace-note .ic{
    border-color:var(--gold);
    color:var(--gold);
}

.wh-pace-footer{
    display:flex;
    align-items:center;
    justify-content: center;
    gap:30px;
    background: #FAF9F7;
    border:1px solid var(--gold);
    border-radius:16px;
    padding:30px 40px;
    margin-top:26px;
}
.wh-pace-footer .ic{
    width:110px;
    flex:none;
}
.wh-pace-footer .txt{
    text-align:center;
}
.wh-pace-footer .txt .catch{
    font-size:2.4rem;
    font-weight:800;
    color:#111;
    line-height:1.6;
}
.wh-pace-footer .txt .sub{
    font-size:1.8rem;
    margin-top:10px;
    color:#444;
}

@media screen and (max-width: 768px) {
    .wh-pace-area {
        padding: 50px 0;
    }
    .wh-pace-eyebrow {
        font-size: 1.4rem;
        gap: 8px;
    }
    .wh-pace-eyebrow:before,
    .wh-pace-eyebrow:after {
        width: 40px;
    }
    .wh-pace-head .section-heading {
        text-align: center;
    }
    .wh-pace-banner {
        margin: 24px auto 20px;
        padding: 10px 20px;
        font-size: 1.4rem;
    }
    .wh-pace-cols {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .wh-pace-col {
        padding: 16px;
    }
    .wh-pace-col .flex-box {
        flex-direction: column;
        gap: 12px;
    }
    .wh-pace-col .img-wrap {
        width: 150px;
        margin-bottom: 10px;
    }
    .wh-pace-col h3 {
        font-size: 2.4rem;
    }
    .wh-pace-col .jp {
        font-size: 1.6rem;
        margin: 4px 0 10px;
    }
    .wh-pace-list li {
        font-size: 1.6rem;
        padding: 6px 0;
    }
    .wh-pace-note {
        font-size: 1.6rem;
        padding: 10px 14px;
    }
    .wh-pace-footer {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    .wh-pace-footer .ic {
        width: 70px;
    }
    .wh-pace-footer .txt .catch {
        font-size: 1.6rem;
    }
    .wh-pace-footer .txt .sub {
        font-size: 1.4rem;
    }
}

/* wh-ai-area */
.wh-ai-area{
    padding:100px 0;
}
.wh-ai-head{
    display: flex;
    align-items: center;
    gap:60px;
}
.wh-ai-head .section-heading {
    text-align: left;
    width: 600px;
}
.wh-ai-head .txt{
    font-size:1.6rem;
    line-height:2;
    margin:22px 0 0;
}
.wh-ai-head .txt strong{
    font-weight:700;
}
.wh-ai-head .mock{
    width: 800px;
}
.wh-ai-head .mock img{
    width:100%;
    object-fit: contain;
}

/* 6 steps */
.wh-ai-steps{
    display:flex;
    gap:14px;
    margin: 30px 0 0;
}
.wh-ai-step{
    flex:1;
    background: #fff;
    border:1px solid var(--gold-light);
    border-radius:14px;
    padding:20px 10px;
    position:relative;
}
.wh-ai-step:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-11px;
    top:50%;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:9px solid var(--gold);
    z-index:2;
}
.wh-ai-step-head{
    display:flex;
    align-items:center;
    gap:10px;
}
.wh-ai-step .ic img{
    width:40px;
}
.wh-ai-step h4{
    font-size:1.8rem;
    font-weight:700;
}
.wh-ai-step ul{
    list-style:none;
    padding:0;
    margin: 15px 0 0;
    color: var(--navy);
    font-size:1.3rem;
    font-weight: bold;
    line-height:2;
}
.wh-ai-step ul li {
    padding-left: 15px;
    position: relative;
}
.wh-ai-step ul li::before{
    content:"▶";
    font-size: 1.0rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.wh-ai-step.c1 h4{
    color:#1fa971;
}
.wh-ai-step.c2 h4{
    color:#e08a2e;
}
.wh-ai-step.c3 h4{
    color:#2f6fe0;
}
.wh-ai-step.c4 h4{
    color:#6c5ce7;
}
.wh-ai-step.c5 h4{
    color:#e0507a;
}
.wh-ai-step.c6 h4{
    color:#149e94;
}

/* free info box */
.wh-ai-area .flex-box {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 20px 0 0;
}
.wh-ai-free{
    border:1px solid var(--gold);
    border-radius:16px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding:20px 10px;
    width: 520px;
    height: stretch;
}
.wh-ai-free-head{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}
.wh-ai-free-head .ic{
    width:52px;
    height:52px;
    border: 1px solid var(--gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
}
.wh-ai-free-head .ic img{
    width:35px;
}
.wh-ai-free-head h4{
    font-size:1.6rem;
    font-weight:800;
}
.wh-ai-free-head .sub {
    display:block;
    font-size:1.4rem;
    margin-top:4px;
}
.wh-ai-free-list{
    display: flex;
    flex-direction: column;
    gap:10px;
}
.wh-ai-free-list li{
    list-style:none;
    display:flex;
    align-items:center;
    gap: 5px;
    font-size:1.6rem;
    line-height: 1.4;
}
.wh-ai-free-list li .chk{
    width:10px;
}

/* 3 box flow */
.wh-ai-flow-row{
    display:flex;
    align-items:stretch;
    gap:14px;
}
.wh-ai-flow-box{
    flex:1;
    background: #fff;
    border-radius:14px;
    color: var(--navy);
    padding:20px 10px;
    text-align:center;
}
.wh-ai-flow-box .ic{
    width:46px;
    height:46px;
    border-radius:50%;
    background:var(--navy-2);
    border:1px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
}
.wh-ai-flow-box .ic img{
    width:30px;
}
.wh-ai-flow-box h5{
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:8px;
}
.wh-ai-flow-box .flow01 {
    color:#1fa971;
}
.wh-ai-flow-box .flow02{
    color:#e08a2e;
}
.wh-ai-flow-box .flow03{
    color:#2f6fe0;
}
.wh-ai-flow-box p{
    font-size:1.4rem;
    color:var(--navy);
    line-height:1.6;
}
.wh-ai-op{
    display:flex;
    align-items:center;
    color:var(--gold-light);
    font-size:1.4rem;
    font-weight:700;
}

.wh-ai-flow-bar{
    background: #fff;
    border-radius:14px;
    color: var(--navy);
    padding:18px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin: 15px 0 0;
}
.wh-ai-flow-bar .item{
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    font-size: 1.6rem;
    font-weight:700;
    justify-content:center;
}
.wh-ai-flow-bar .item img {
    width: 40px;
}
.wh-ai-flow-bar .item .ic{
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--navy-2);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
}
.wh-ai-flow-bar .item .ic img{
    width:16px;
}
.wh-ai-flow-bar .arrow img {
    width: 25px;
}

/* bottom banner */
.wh-ai-banner{
    border:1px solid var(--gold);
    border-radius:16px;
    display:flex;
    align-items:center;
    gap:26px;
    padding:24px;
    margin: 20px 0 0;
}
.wh-ai-banner .yen{
    width:60px;
    height:60px;
    border: 1px solid var(--gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
}
.wh-ai-banner .yen img{
    width:30px;
}
.wh-ai-banner .txt {
    font-size:1.6rem;
    font-weight:800;
    line-height:1.6;
    flex:1;
}
.wh-ai-banner .divider-v{
    width:1px;
    align-self:stretch;
    background:rgba(255,255,255,.15);
}
.wh-ai-banner .txt2{
    font-size:.95rem;
    line-height:1.8;
    color:#c7cfd8;
    flex:1;
}
.wh-ai-banner .growth{
    width:56px;
    height:56px;
    border-radius:50%;
    border: 1px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
}
.wh-ai-banner .growth img{
    width:30px;
}

.wh-ai-area .kome {
    text-align:center;
    font-size:1.4rem;
    margin-top:18px;
    line-height:1.8;
}

@media screen and (max-width: 768px) {
    .wh-ai-area {
        padding: 50px 0;
    }
    .wh-ai-head {
        flex-direction: column;
        gap: 20px;
    }
    .wh-ai-head .section-heading,
    .wh-ai-head .mock {
        width: 100%;
    }
    .wh-ai-head .section-heading .sub-catch {
        text-align: left;
    }
    .wh-ai-head .txt {
        font-size: 1.4rem;
        line-height: 1.8;
        margin: 14px 0 0;
    }
    .wh-ai-steps {
        flex-wrap: wrap;
        gap: 5px;
        margin: 20px 0 0;
    }
    .wh-ai-step {
        flex: none;
        width: calc((100% - 5px) / 2);
    }
    .wh-ai-step:not(:last-child)::after {
        display: none;
    }
    .wh-ai-step h4 {
        font-size: 1.4rem;
    }
    .wh-ai-step ul {
        font-size: 1.1rem;
    }
    .wh-ai-area .flex-box {
        flex-direction: column;
        gap: 14px;
        margin: 14px 0 0;
    }
    .wh-ai-free {
        width: 100%;
        padding: 16px 10px;
    }
    .wh-ai-flow-row {
        flex-direction: column;
        gap: 10px;
    }
    .wh-ai-op {
        justify-content: center;
        transform: rotate(90deg);
    }
    .wh-ai-flow-bar {
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }
    .wh-ai-flow-bar .arrow {
        transform: rotate(90deg);
    }
    .wh-ai-banner {
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }
    .wh-ai-banner .yen {
        width: 30px;
        height: 30px;
    }
    .wh-ai-banner .yen img {
        width: 20px;
    }
    .wh-ai-banner .divider-v {
        width: 100%;
        height: 1px;
    }
    .wh-ai-banner .growth {
        width: 30px;
        height: 30px;
    }
    .wh-ai-banner .growth img {
        width: 20px;
    }
    .wh-ai-banner .txt,
    .wh-ai-banner .txt2 {
        font-size: 1.4rem;
        text-align: left;
    }
    .wh-ai-area .kome {
        text-align: left;
    }
}

/* wh-compare-area */
.wh-compare-area{
    padding:100px 0;
    background:#fff;
}

.wh-compare-intro{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:40px 0;
}
.wh-compare-intro-box{
    display:flex;
    align-items:center;
    gap:20px;
    border-radius:14px;
    padding:20px 26px;
}
.wh-compare-intro-box.general{
    background:#eef4fb;
}
.wh-compare-intro-box.willies{
    background: var(--navy);
    border: 3px solid var(--gold);
}
.wh-compare-intro-box .ic{
    width:120px;
}
.wh-compare-intro-box .ic img{
    width:100%;
    object-fit:cover;
}
.wh-compare-intro-box h4{
    font-size:2.0rem;
    font-weight:800;
    line-height: 1.4;
}
.wh-compare-intro-box.general h4{
    color:var(--navy);
}
.wh-compare-intro-box.willies h4{
    color: var(--gold);
}
.wh-compare-intro-box p{
    font-size:1.6rem;
    line-height:1.7;
    color:#333;
    margin: 8px 0 0;
}
.wh-compare-intro-box.willies p{
    color: #fff;
}

/* table */
.wh-compare-table{
    border:1px solid #e5e5e5;
    border-radius:12px;
    overflow:hidden;
}
.wh-compare-row{
    display:grid;
    grid-template-columns:1fr 1.5fr 1.5fr;
}
.wh-compare-row .col{
    padding:16px 20px;
    font-size:1.6rem;
    line-height: 2.0;
    text-align:center;
    font-weight:700;
}
.wh-compare-row:not(:last-child){
    border-bottom:1px solid #eee;
}
.wh-compare-row:nth-child(even):not(.wh-compare-head){
    background:#fafafa;
}
.wh-compare-row .col.label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#f5f6f8;
}
.wh-compare-row .col.label img{
    width:40px;
    flex:none;
}
.wh-compare-row .col.willies span{
    color: var(--navy);
    font-size: 2.0rem;
    font-weight: bolder;
}

.wh-compare-head{
    font-weight:800;
}
.wh-compare-head .col.label{
    background:#eceef1;
    color:#333;
}
.wh-compare-head .col.general{
    background:#dceaf7;
    color:var(--navy);
}
.wh-compare-head .col.willies{
    background:var(--navy);
    border: 3px solid var(--gold);
    color: var(--gold);
}

/* note bar */
.wh-compare-note{
    display:flex;
    align-items:center;
    gap:24px;
    background:#fdf3dd;
    border-radius:12px;
    padding:20px 30px;
    margin:24px 0;
}
.wh-compare-note .txt{
    flex:1;
    display:flex;
    align-items:center;
    gap:14px;
}
.wh-compare-note .txt img{
    width:50px;
    flex:none;
}
.wh-compare-note .txt p{
    font-size:2.0rem;
    font-weight:700;
    line-height:1.6;
    text-align: center;
}
.wh-compare-note .txt.willies span{
    font-size: 2.4rem;
    font-weight: bolder;
}
.wh-compare-note .arrow{
    width: 50px;
}

/* bottom banner */
.wh-compare-banner{
    background:var(--navy);
    color:#fff;
    border-radius:16px;
    padding:26px 34px;
    display:flex;
    align-items:center;
    gap:40px;
}
.wh-compare-banner .left{
    display:flex;
    align-items:center;
    gap:18px;
    flex:1;
}
.wh-compare-banner .left .ic{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
}
.wh-compare-banner .left .ic img{
    width:40px;
}
.wh-compare-banner .left p{
    font-size:2.0rem;
    font-weight:800;
    line-height:1.6;
}
.wh-compare-banner .right{
    list-style:none;
    display:flex;
    gap:30px;
    padding:0;
    margin:0;
}
.wh-compare-banner .right li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.6rem;
    font-weight:700;
    line-height:1.5;
}
.wh-compare-banner .right li img{
    width:50px;
}

@media screen and (max-width: 768px) {
    .wh-compare-area {
        padding: 50px 0;
    }
    .wh-compare-intro {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 24px 0;
    }
    .wh-compare-intro-box {
        padding: 14px 16px;
        gap: 14px;
    }
    .wh-compare-intro-box h4 {
        font-size: 1.8rem;
    }
    .wh-compare-intro-box p {
        font-size: 1.6rem;
    }
    .wh-compare-table {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .wh-compare-row {
        min-width: 680px;
    }
    .wh-compare-row .col {
        padding: 10px 12px;
        font-size: 1.4rem;
        justify-content: flex-start;
        text-align: left;
    }
    .wh-compare-row .col.label {
        gap: 5px;
        justify-content: flex-start;
        font-weight: 800;
    }
    .wh-compare-row .col.label img {
        margin: 0;
    }
    .wh-compare-row .col.willies {
        display: block;
        line-height: 1.4;
    }
    .wh-compare-note {
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }
    .wh-compare-note .txt p {
        font-size: 1.6rem;
        text-align: left;
    }
    .wh-compare-note .arrow {
        width: 30px;
        transform: rotate(90deg);
    }
    .wh-compare-banner {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .wh-compare-banner .left p {
        font-size: 1.6rem;
        text-align: left;
    }
    .wh-compare-banner .right {
        flex-direction: column;
        gap: 12px;
    }
    .wh-compare-banner .right li img {
        margin: 0;
    }
}

/* wh-vs-area */
.wh-vs-area{
    padding:100px 0;
}

/* cards */
.wh-vs-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    position:relative;
    margin:50px 0 30px;
}
.wh-vs-card{
    border-radius:16px;
    overflow:hidden;
    position:relative;
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    display:flex;
    flex-direction:column;
}
.wh-vs-card.no-prep{
    background-image: url(../img/preparation-img01.jpg);
    border:1px solid rgba(255,255,255,.15);
}
.wh-vs-card.prep{
    background-image: url(../img/preparation-img02.jpg);
    border:1px solid var(--gold);
    text-align: right;
}
.wh-vs-card-inner{
    padding:26px 28px 20px;
    color:#fff;
}
.wh-vs-card h3{
    font-size:2.4rem;
    font-weight:800;
}
.wh-vs-card .lead{
    font-size:1.8rem;
    margin: 8px 0 0;
}
.wh-vs-list{
    list-style:none;
    padding:0;
    margin:10px 0 0;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.wh-vs-card.prep .wh-vs-list{
    width: fit-content;
    margin: 10px 0 0 auto;
}
.wh-vs-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
}
.wh-vs-list li img{
    width:20px;
    flex:none;
    margin-top:2px;
}
.wh-vs-list li p{
    font-size:1.2rem;
    line-height:1.6;
}

.wh-vs-banner{
    display:flex;
    align-items:center;
    justify-content: center;
    gap:16px;
    padding:16px 28px;
    font-size:2.0rem;
    font-weight:700;
    line-height:1.6;
    text-align: left;
}
.wh-vs-card.no-prep .wh-vs-banner{
    background:rgba(20,30,50,.85);
    color:#fff;
    border-top:1px solid rgba(255,255,255,.15);
}
.wh-vs-card.prep .wh-vs-banner{
    background:rgba(30,20,0,.6);
    color:var(--gold-light);
    border-top:1px solid var(--gold);
}
.wh-vs-banner .face{
    font-size:5.0rem;
    flex:none;
}

.wh-vs-badge{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:74px;
    height:74px;
    border-radius:50%;
    background:#0b1626;
    border:2px solid var(--gold);
    color:var(--gold-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3.2rem;
    font-weight:800;
    z-index:2;
}

/* neq banner */
.wh-vs-neq{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    background:#0b1626;
    border:1px solid var(--gold);
    border-radius:50px;
    padding:16px 50px;
    font-size:3.2rem;
    font-weight:800;
    margin: 0 auto;
    width: fit-content;
}
.wh-vs-neq .op{
    color:var(--gold-light);
}

/* note boxes */
.wh-vs-note{
    display:flex;
    align-items:center;
    justify-content: center;
    gap:20px;
    border:1px solid var(--gold);
    border-radius:14px;
    padding:20px 26px;
    margin: 20px 0 0;
}
.wh-vs-note .ic{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#0b1626;
    border:1px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
}
.wh-vs-note .ic img{
    width:70px;
}
.wh-vs-note .txt .ttl{
    font-size:2.4rem;
    font-weight:700;
    margin-bottom:8px;
}
.wh-vs-note .txt .basic-txt{
    font-size:1.8rem;
    line-height:1.8;
    color:#c7cfd8;
}
.wh-vs-note .txt .kome{
    font-size:1.4rem;
}

/* message */
.wh-vs-message{
    text-align:center;
    margin:40px 0 0;
}
.wh-vs-message p{
    font-size: 3.2rem;
    font-weight:800;
    line-height:1.8;
}

@media screen and (max-width: 768px) {
    .wh-vs-area {
        padding: 50px 0;
    }
    .wh-vs-area .sub-catch {
        text-align: left;
    }
    .wh-vs-cards {
        grid-template-columns: 1fr;
        gap: 50px;
        margin: 40px 0 20px;
    }
    .wh-vs-card.no-prep {
        background-position: 60% center;
    }
    .wh-vs-card.prep {
        background-position: 35% center;
    }
    .wh-vs-card h3 {
        font-size: 1.8rem;
    }
    .wh-vs-card .lead {
        font-size: 1.3rem;
    }
    .wh-vs-card-inner {
        padding: 18px 10px;
    }
    .wh-vs-card.prep .wh-vs-list {
        width: 230px;
        text-align: left;
    }
    .wh-vs-list li {
        justify-content: flex-start;
    }
    .wh-vs-list li img {
        margin: 0;
    }
    .wh-vs-banner {
        gap: 8px;
        padding: 14px 16px;
        font-size: 1.4rem;
        text-align: left;
    }
    .wh-vs-banner .face {
        font-size: 3.0rem;
    }
    .wh-vs-badge {
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
        top: 40%;
        left: 50%;
        transform: translateX(-50%);
    }
    .wh-vs-neq {
        flex-direction: column;
        gap: 5px;
        padding: 12px 24px;
        font-size: 1.8rem;
    }
    .wh-vs-note {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        text-align: center;
    }
    .wh-vs-note .ic {
        width: 70px;
        height: 70px;
    }
    .wh-vs-note .ic img {
        width: 48px;
    }
    .wh-vs-note .txt .ttl {
        font-size: 1.8rem;
    }
    .wh-vs-note .txt .basic-txt {
        font-size: 1.6rem;
        text-align: left;
    }
    .wh-vs-message p {
        font-size: 1.8rem;
    }
}

/*    wh-voice-area
-------------------------------------------------------------- */
.wh-voice-area {
    padding: 80px 0;
    position: relative;
}

.wh-voice-area .inner {
    width: var(--inner-wide);
}

.wh-voice-area .catch {
    text-align: center;
    font-size: 3.6rem;
    font-family: var(--mincho);
    font-weight: 500;
    letter-spacing: .1rem;
    line-height: 1.7;
}

.wh-voice-area .recommend-divider{
    position:relative;
    max-width:520px;
    margin:26px auto;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
}
.wh-voice-area .recommend-divider:after{
    content:"◆";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--gold);
    font-size:.9rem;
    background:#fff;
    padding:0 10px;
}

.wh-voice-area .sub-catch {
    text-align: center;
}

.wh-voice-area .ill-box-wrap {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    z-index: -1;
    height: 160px;
}

.wh-voice-area .ill-box-wrap img {
    position: absolute;
    bottom: 0;
}

.wh-voice-area .ill-box-wrap .ill01 {
    left: 0;
}

.wh-voice-area .ill-box-wrap .ill02 {
    left: 100px;
}

.wh-voice-area .ill-box-wrap .ill03 {
    right: 120px;
}

.wh-voice-area .ill-box-wrap .ill04 {
    right: 0;
}

.wh-voice-area .voice-box-wrap {
    background: url("../img/webp/bg-gradation.webp") top/cover, no-repeat;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 80px 100px;
    margin: 50px 0 0;
    align-items: flex-start;
}

.wh-voice-area .voice-box {
    width: calc((100% - 40px) / 2);
    background: #fff;
    padding: 40px;
    box-shadow: 10px 10px 0 #F3EFEE;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
}

.wh-voice-area .voice-box .voice-catch-wrap {
    display: flex;
    gap: 20px;
    width: 100%;
}

.wh-voice-area .voice-box .icon-wrap {
    width: 80px;
}

.wh-voice-area .voice-box .icon-wrap img {
    object-fit: cover;
    width: 100%;
}

.wh-voice-area .voice-box .voice-catch {
    font-size: 1.6rem;
    font-family: var(--mincho);
    line-height: 1.8;
    font-weight: 600;
}

.wh-voice-area .voice-box .voice-catch .voice-label {
    background: var(--beige02);
    border-radius: 50px;
    display: inline-block;
    padding: 5px 15px;
}

.wh-voice-area .voice-box .voice-catch .min {
    font-size: 1.5rem;
}

.wh-voice-area .voice-box .comment-catch {
    position: relative;
    font-family: var(--mincho);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.6;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--gold);
    color: var(--gold);
    margin: 0 0 15px;
    letter-spacing: .1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.wh-voice-area .voice-box .show-more-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    overflow: hidden;
    transition: all .3s ease-in;
}

.wh-voice-area .voice-box .list-toggle {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #fff;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 70%);
    background-color: transparent;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
}

.wh-voice-area .voice-box .list-toggle a {
    border: 1px solid #333;
    /*padding: 20px;*/
    display: inline-block;
    width: 260px;
    border-radius: 30px;
    margin: 0 auto 30px;
    height: 60px;
    position: relative;
    /*color: var(--green);*/
    background: #fff;
}

.wh-voice-area .voice-box .list-toggle a::before {
    display: inline;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-family: var(--basefont);
    font-weight: 500;
}

.wh-voice-area .voice-box .list-toggle a.open-link::before {
    content: "もっと見る";

}

.wh-voice-area .voice-box .list-toggle a.close-link::before {
    content: "閉じる";
}

.wh-voice-area .voice-box .list-toggle a .accordion-icon {
    width: 16px;
    height: 16px;
}

.wh-voice-area .accordion .accordion-icon,
.wh-voice-area .accordion .accordion-icon span {
    display: inline-block;
    transition: all .3s;
    box-sizing: border-box;
}

.wh-voice-area .accordion .accordion-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
}

.wh-voice-area .accordion .accordion-icon span {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--green, #333);
}

.wh-voice-area .accordion-icon span:nth-of-type(1) {
    top: 7px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.wh-voice-area .active .accordion-icon span:nth-of-type(1) {
    display: none;
}

.wh-voice-area .accordion-icon span:nth-of-type(2) {
    top: 7px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.wh-voice-area .active .accordion-icon span:nth-of-type(2) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media screen and (max-width: 768px) {
    .wh-voice-area {
        padding: 40px 0;
    }

    .wh-voice-area .inner {
        width: 100%;
    }

    .wh-voice-area .catch {
        font-size: 2.1rem;
        padding: 0 20px 20px;
    }

    .wh-voice-area .recommend-divider{
        margin:13px auto;
    }

    .wh-voice-area .ill-box-wrap {
        position: relative;
        top: initial;
        left: initial;
        transform: none;
        width: 100%;
        height: initial;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 0;
    }

    .wh-voice-area .ill-box-wrap img {
        position: relative;
        bottom: initial !important;
        left: initial !important;
        right: initial !important;
        width: auto;
        height: 30vw;
    }

    .wh-voice-area .voice-box-wrap {
        gap: 20px;
        padding: 20px;
        margin: 0;
    }

    .wh-voice-area .voice-box {
        width: 100%;
        padding: 20px;
        gap: 20px;
    }

    .wh-voice-area .voice-box .voice-catch-wrap {
        display: contents;
    }

    .wh-voice-area .voice-box .icon-wrap {
        width: 90px;
    }

    .wh-voice-area .voice-box .voice-catch {
        font-size: 1.4rem;
        width: 100%;
    }

    .wh-voice-area .voice-box .comment-catch {
        font-size: 1.8rem;
        letter-spacing: 0;
    }
}

/* ===== message-area ===== */
.wh-message-area{
    padding:90px 0;
}

/* heading */
.section-heading .rule{
    width:420px;
    max-width:80%;
    height:1px;
    background:var(--navy);
    margin:20px auto 0;
    position:relative;
}
.section-heading .rule:after{
    background: url(../img/diamond-icon-wh.svg) no-repeat;
    content:"";
    display: inline-block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:0 8px;
    width: 20px;
    height: 20px;
}

/* text + photo grid */
.message-grid{
    display:grid;
    grid-template-columns:1.35fr .9fr;
    gap:40px;
    align-items:start;
    margin: 60px 0 0;
}
.message-text .catch{
    font-size:4.0rem;
    font-weight:700;
    line-height:1.5;
    color:var(--navy);
    margin:0 0 10px;
}
.message-text .catch-sub{
    font-size:3.2rem;
    font-weight:700;
    line-height:1.5;
    color:var(--gold);
    margin:0 0 28px;
}
.message-text .basic-txt{
    font-weight: bold;
    margin:20px 0 0;
}

/* photo */
.message-photo{
    position:relative;
}
.message-photo .photo-frame{
    width:100%;
    border-radius:6px;
    overflow:hidden;
    background:linear-gradient(160deg,#dfe4ea,#c4cbd4);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8a94a0;
    font-size:1.3rem;
    font-weight:700;
}
.message-photo .photo-frame img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

/* quote bubble */
.message-quote{
    position:relative;
    background:#eef3fb;
    border:1px solid #c9d9f2;
    border-radius:10px;
    padding:26px 32px;
    margin:50px -160px 0 0;
    z-index:2;
}
.message-quote:before{
    content:"\201C";
    position:absolute;
    top:-20px;
    left:6px;
    font-size:5.5rem;
    line-height:1;
    color:var(--navy);
    font-weight:700;
}
.message-quote:after{
    content:"\201D";
    position:absolute;
    bottom:-46px;
    right:16px;
    font-size:5.5rem;
    line-height:1;
    color:var(--navy);
    font-weight:700;
}
.message-quote p{
    margin:0;
    font-size:2.4rem;
    font-weight:700;
    line-height:1.7;
}

/* ===== 私自身の原体験 ===== */
.experience-heading{
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin:110px 0 30px;
}
.experience-heading .line{
    flex:1;
    max-width:200px;
    height:1px;
    background:var(--navy);
}
.experience-heading .catch{
    font-size:2.4rem;
    font-weight:700;
    color:var(--navy);
    white-space:nowrap;
}

.experience-grid{
    list-style:none;
    display:flex;
    background:#f5f7fb;
    border-radius:10px;
    padding:34px 10px;
    margin:0;
}
.experience-grid li{
    flex:1;
    text-align:center;
    padding:0 18px;
    border-left:1px solid #dfe3ea;
}
.experience-grid li:first-child{
    border-left:none;
}
.experience-grid .ic{
    width:46px;
    height:46px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy);
}
.experience-grid .ic img{
    width:100%;
    height:100%;
}
.experience-grid .ttl{
    font-size:2.0rem;
    font-weight:700;
    color:var(--navy);
}
.experience-grid .txt{
    font-size:1.6rem;
    line-height:1.75;
    text-align: left;
    margin:12px 0 0;
}

/* ===== このプログラムに込めた想い ===== */
.thought-heading{
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin:100px 0 30px;
}
.thought-heading .line{
    flex:1;
    max-width:260px;
    height:1px;
    background:var(--navy);
}
.thought-heading .catch{
    font-size:2.4rem;
    font-weight:700;
    color:var(--navy);
    white-space:nowrap;
}
.thought-text{
    font-weight: bold;
    text-align:center;
    max-width:900px;
    margin:0 auto;
}
.thought-text p{
    font-size:1.8rem;
    line-height:2.0;
    color:var(--text);
    margin:0 0 22px;
}
.thought-text .highlight-line{
    display:inline-block;
    background:#fdf1c7;
    color:var(--msg-blue);
    font-weight:700;
    font-size:2.4rem;
    padding:6px 22px;
    border-radius:4px;
}
.thought-text .lead-txt{
    font-weight:700;
    font-size:3.2rem;
    color:var(--gold);
}

/* ===== closing ===== */
.message-closing{
    margin:60px 0 0;
    border:1px solid var(--gold);
    border-radius:12px;
    padding:34px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}
.message-closing .body{
    flex:1;
}
.message-closing .catch{
    font-size:3.2rem;
    font-weight:700;
    color:var(--gold);
}
.message-closing .txt{
    font-weight: bold;
    font-size:1.8rem;
    line-height:1.8;
    margin:15px 0 0;
}
.message-closing .sign{
}

@media screen and (max-width: 768px) {
    .wh-message-area {
        padding: 45px 0;
    }
    .section-heading .rule {
        width: 200px;
        margin: 12px auto 0;
    }
    .message-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin: 30px 0 0;
    }
    .message-text .catch {
        font-size: 2.2rem;
        text-align: center;
    }
    .message-text .catch-sub {
        font-size: 1.7rem;
        margin: 0 0 16px;
    }
    .message-quote {
        margin: 24px 0 0;
        padding: 18px 20px;
    }
    .message-quote:before,
    .message-quote:after {
        font-size: 3.0rem;
    }
    .message-quote p {
        font-size: 1.6rem;
    }
    .experience-heading,
    .thought-heading {
        margin: 50px 0 20px;
        gap: 10px;
    }
    .experience-heading .catch,
    .thought-heading .catch {
        font-size: 1.6rem;
        white-space: normal;
    }
    .experience-grid {
        flex-direction: column;
        padding: 20px 14px;
        gap: 20px;
    }
    .experience-grid li {
        padding: 14px 0 0;
        border-left: none;
        border-top: 1px solid #dfe3ea;
    }
    .experience-grid li:first-child {
        border-top: none;
        padding-top: 0;
    }
    .experience-grid .ttl {
        font-size: 1.8rem;
    }
    .experience-grid .txt {
        font-size: 1.6rem;
    }
    .thought-text p {
        font-size: 1.6rem;
        line-height: 1.8;
        text-align: left;
    }
    .thought-text .highlight-line {
        font-size: 1.8rem;
        padding: 4px 12px;
    }
    .thought-text .lead-txt {
        font-size: 1.8rem;
    }
    .message-closing {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 20px;
        margin: 30px 0 0;
    }
    .message-closing .catch {
        font-size: 1.8rem;
    }
    .message-closing .txt {
        font-size: 1.6rem;
        text-align: left;
    }
}

/* ===================== price-area ===================== */
.wh-price-area{
    padding:80px 0;
}

/* --- heading --- */
.section-heading{
    text-align:center;
}
.price-divider{
    position:relative;
    max-width:420px;
    margin: 30px auto 0;
    height:1px;
    background:var(--gold);
}
.price-divider:after{
    content:"◆";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--gold);
    font-size:1.8rem;
    background:#fff;
    padding:0 10px;
}
.section-heading .en{
    margin: 30px 0 0;
}
.section-heading .plan{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    font-size: 2.0rem;
    font-weight:700;
    color:var(--navy);
    margin: 14px 0 0;
}
.section-heading .plan .line{
    width:60px;
    height:1px;
    background:var(--gold);
}

/* --- price box --- */
.price-box{
    max-width:640px;
    margin: 50px auto 0;
    border:2px solid var(--gold);
    border-radius:14px;
    padding:38px 30px 30px;
    text-align:center;
    background:#fff;
}
.price-box .price-row{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    line-height:1;
    color:var(--navy);
}
.price-box .price-num{
    font-size:10.0rem;
    font-weight:700;
}
.price-box .price-unit{
    font-size:2.6rem;
    font-weight:700;
}
.price-box .price-tax{
    font-size:1.5rem;
    font-weight:700;
}
.price-box .price-row.no-tax{
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:8px;
    line-height:1;
    color:var(--navy);
    max-width:340px;
    margin: 15px auto 0;
}
.price-box .price-row.no-tax .price-num{
    font-size:3.0rem;
    font-weight:700;
}
.price-box .price-row.no-tax .price-unit{
    font-size:2.0rem;
    font-weight:700;
}
.price-box .price-row.no-tax .price-tax{
    font-size:1.2rem;
    font-weight:700;
}
.price-box .price-divider-in{
    position:relative;
    max-width:340px;
    height:1px;
    background:var(--gold-light);
    margin:22px auto 0;
}
.price-box .price-divider-in:after{
    content:"◆";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--gold);
    font-size:1.8rem;
    background:#fff;
    padding:0 10px;
}

/* --- sub heading (line - text - line) --- */
.price-subheading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    margin:60px 0 30px;
}
.price-subheading .line{
    flex:1;
    max-width:340px;
    height:1px;
    background:var(--navy);
}
.price-subheading p{
    font-size:2.2rem;
    font-weight:700;
    color:var(--navy);
    white-space:nowrap;
    margin:0;
}

/* --- benefits card --- */
.price-benefits{
    border:1px solid #e6ddc4;
    border-radius:12px;
    background:#fdfcf8;
    padding:6px 44px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:60px;
}
.price-benefits ul{
    list-style:none;
    margin:0;
    padding:0;
}
.price-benefits li{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 0;
    border-bottom:1px dashed #d6cba3;
    font-size:1.6rem;
    font-weight:700;
    color:var(--navy);
}
.price-benefits ul li:last-child{
    border-bottom:none;
}
.price-benefits .check{
    width:26px;
    height:26px;
    border-radius:50%;
    border:1.5px solid var(--navy);
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy);
}
.price-benefits .check svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:var(--navy);
    stroke-width:2.4;
}

/* --- note bar --- */
.price-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border:1.5px solid var(--gold);
    border-radius:8px;
    background:#fffdf7;
    padding:18px 28px;
    margin-top:28px;
    font-weight:700;
    color:var(--navy);
    text-align:center;
}
.price-note .badge{
    width:50px;
    height:50px;
}
.price-note .badge img{
    width:100%;
    height:100%;
}
.price-note p{
    font-size:2.4rem;
}

/* --- CTA button --- */
.wh-price-area .btn a{
    background:linear-gradient(0deg, #9d8233, #a98d39, #b6993f, #c2a445, #cfb04c, #dbbc52, #e8c858, #f5d45f);
    color: var(--navy);
    margin: 50px auto 0;
    width: 600px;
}
.wh-price-area .btn a::before{
    background: url(../img/calendar-icon-navy.svg) no-repeat;
    background-size: cover;
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
}

.price-cta-note{
    text-align:center;
    margin:18px 0 0;
    font-size:1.8rem;
    font-weight:700;
    color:var(--navy);
}

@media screen and (max-width: 768px) {
    .wh-price-area {
        padding: 40px 0;
    }
    .price-divider {
        max-width: 220px;
        margin: 16px auto 0;
    }
    .price-divider:after {
        font-size: 1.2rem;
    }
    .wh-price-area .section-heading .sub-catch {
        text-align: center;
    }
    .section-heading .plan {
        flex-direction: column;
        gap: 8px;
        font-size: 1.4rem;
    }
    .section-heading .plan .line {
        width: 30px;
    }
    .price-box {
        margin: 30px auto 0;
        padding: 24px 16px 20px;
    }
    .price-box .price-num {
        font-size: 5.0rem;
    }
    .price-box .price-unit {
        font-size: 1.6rem;
    }
    .price-box .price-tax {
        font-size: 1.1rem;
    }
    .price-box .price-row.no-tax{
        max-width: 200px;
    }
    .price-box .price-row.no-tax .price-num{
        font-size:2.4rem;
    }
    .price-box .price-row.no-tax .price-unit{
        font-size:1.4rem;
    }
    .price-box .price-row.no-tax .price-tax{
        font-size:1.1rem;
    }
    .price-subheading {
        flex-direction: column;
        gap: 12px;
        margin: 30px 0 16px;
    }
    .price-subheading .line {
        max-width: 100px;
    }
    .price-subheading p {
        font-size: 1.5rem;
        white-space: normal;
        text-align: center;
    }
    .price-benefits {
        grid-template-columns: 1fr;
        padding: 4px 20px;
        column-gap: 0;
    }
    .price-benefits li {
        font-size: 1.6rem;
        padding: 12px 0;
        gap: 10px;
    }
    .price-benefits ul li:last-child{
        border-bottom:1px dashed #d6cba3;
    }
    .price-benefits ul:last-child li:last-child{
        border: none;
    }
    .price-note {
        gap: 8px;
        padding: 14px;
    }
    .price-note p {
        font-size: 1.5rem;
        text-align: left;
    }
    .wh-price-area .btn a {
        width: 100%;
    }
    .wh-price-area .btn a::before {
        left: 20px;
        width: 34px;
        height: 34px;
    }
    .price-cta-note {
        font-size: 1.2rem;
    }
}

/* ===================== recommend-area ===================== */
.wh-recommend-area{
    padding:80px 0;
}

.recommend-divider{
    position:relative;
    max-width:520px;
    margin:26px auto;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
}
.recommend-divider:after{
    content:"◆";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--gold);
    font-size:.9rem;
    background:#fff;
    padding:0 10px;
}

/* cards */
.recommend-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
}
.recommend-card{
    border-radius:14px;
    padding:34px 30px 20px;
    text-align:center;
    margin: 50px 0 0;
}
.recommend-card.good{
    border:1.5px solid var(--gold);
    background:linear-gradient(180deg,#fffdf6,#fffefb);
}
.recommend-card.bad{
    border:1.5px solid var(--navy);
    background:#fff;
}

.recommend-card .icon-wrap{
    width:80px;
    height:80px;
    margin:0 auto;
}
.recommend-card .icon-wrap img{
    width:100%;
    height:100%;
}

.recommend-card h3{
    font-size:2.4rem;
    font-weight:700;
    color:var(--navy);
    margin:16px 0 0;
}

.card-divider{
    position:relative;
    height:1px;
    margin:20px 0 0;
}
.recommend-card.good .card-divider{
    background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);
}
.recommend-card.bad .card-divider{
    background:linear-gradient(90deg,transparent,var(--navy) 15%,var(--navy) 85%,transparent);
}
.card-divider:after{
    content:"◆";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:.8rem;
}
.recommend-card.good .card-divider:after{
    color:var(--gold);
    background:#fffdf6;
    padding:0 8px;
}
.recommend-card.bad .card-divider:after{
    color:var(--navy);
    background:#fff;
    padding:0 8px;
}

.recommend-list{
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
}
.recommend-list li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 4px;
}
.recommend-list li p{
    font-size:1.8rem;
    font-weight:700;
    color:var(--navy);
}
.recommend-card.good .recommend-list li{
    border-bottom:1px dotted var(--gold-light);
}
.recommend-card.bad .recommend-list li{
    border-bottom:1px dotted var(--navy-2);
}
.recommend-list li:last-child{
    border-bottom:none;
}
.recommend-list .mark{
    width:26px;
    height:26px;
    border-radius:50%;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
}
.recommend-card.good .mark{
    border:1.5px solid var(--gold);
    color:var(--gold);
}
.recommend-card.bad .mark{
    border:1.5px solid var(--navy);
    color:var(--navy);
}
.recommend-list .mark svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
}

/* bottom message */
.recommend-message{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin:56px 0 0;
    text-align:center;
    position: relative;
}
.recommend-message::before {
    background: url(../img/leaf-left.png) no-repeat;
    background-size: contain;
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
}
.recommend-message::after {
    background: url(../img/leaf-right.png) no-repeat;
    background-size: contain;
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
}
.recommend-message .txt-wrap p{
    margin:0;
}
.recommend-message .line1{
    font-size:2.4rem;
    font-weight:700;
    color:var(--navy);
    margin-bottom:8px;
}
.recommend-message .line2{
    font-size:3.2rem;
    font-weight:700;
    color:var(--navy);
}
.recommend-message .bottom-divider{
    position:relative;
    max-width:600px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);
    margin:18px auto 0;
}
.recommend-message .bottom-divider:after{
    content:"◆";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--gold);
    font-size:1.8rem;
    background:#fff;
    padding:0 8px;
}

@media screen and (max-width: 768px) {
    .wh-recommend-area {
        padding: 40px 0;
    }
    .recommend-divider {
        margin: 16px auto;
    }
    .recommend-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .recommend-card {
        padding: 24px 18px 16px;
        margin: 30px 0 0;
    }
    .recommend-card .icon-wrap {
        width: 56px;
        height: 56px;
    }
    .recommend-card h3 {
        font-size: 1.7rem;
        margin: 10px 0 0;
    }
    .recommend-list li p {
        font-size: 1.3rem;
    }
    .recommend-list li {
        gap: 10px;
        padding: 12px 2px;
    }
    .recommend-message {
        gap: 10px;
        margin: 36px 0 0;
    }
    .recommend-message::before,
    .recommend-message::after {
        display: none;
    }
    .recommend-message .line1 {
        font-size: 1.5rem;
    }
    .recommend-message .line2 {
        font-size: 1.9rem;
    }
    .recommend-message .bottom-divider {
        max-width: 260px;
    }
}

/* ===================== hero message area ===================== */
.wh-hero-message-area{
    position:relative;
    min-height:820px;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background-image:url("../img/wh-hero-message-bg.jpg");
    background-size:cover;
    background-position:center;
    padding: 80px 0;
}

.hero-msg-block{
    max-width:900px;
    text-align:center;
    margin: 0 auto;
}

/* ornament divider */
.hero-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:26px 0 0;
}
.hero-divider .line{
    flex:1;
    max-width:150px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold));
}
.hero-divider .line.right{
    background:linear-gradient(90deg,var(--gold),transparent);
}
.hero-divider .orn{
    width:26px;
    height:26px;
    flex:none;
    color:var(--gold);
}
.hero-divider .orn svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:var(--gold);
    stroke-width:1.3;
}

.hero-msg-block .basic-txt{
    margin:26px 0 0;
}

.hero-msg-block .catch2{
    font-size:4.0rem;
    font-weight:700;
    line-height:1.6;
    color:#fff;
    margin:36px 0 22px;
    text-shadow:0 2px 10px rgba(0,0,0,.4);
}

/* CTA button */
.wh-hero-message-area .btn a{
    background:linear-gradient(0deg, #9d8233, #a98d39, #b6993f, #c2a445, #cfb04c, #dbbc52, #e8c858, #f5d45f);
    color: #fff;
    margin: 50px auto 0;
    width: 600px;
}
.wh-hero-message-area .btn a::before{
    background: url(../img/calendar-icon-navy.svg) no-repeat;
    background-size: cover;
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    filter: brightness(0) invert(1);
}

.hero-cta-note{
    text-align:center;
    margin:18px 0 0;
    font-size:2.0rem;
    line-height:1.8;
}

@media screen and (max-width: 768px) {
    .wh-hero-message-area {
        background-position: 85% center;
        min-height: auto;
        padding: 60px 0;
    }
    .hero-msg-block {
        max-width: 100%;
        padding: 0 20px;
    }
    .hero-divider {
        gap: 8px;
        margin: 16px 0 0;
    }
    .hero-divider .line {
        max-width: 60px;
    }
    .hero-divider .orn {
        width: 18px;
        height: 18px;
    }
    .hero-msg-block .basic-txt {
        margin: 16px 0 0;
    }
    .hero-msg-block .catch2 {
        font-size: 1.8rem;
        margin: 20px 0 14px;
    }
    .wh-hero-message-area .btn a {
        width: 100%;
        margin: 30px auto 0;
    }
    .wh-hero-message-area .btn a::before {
        left: 20px;
        width: 34px;
        height: 34px;
    }
    .hero-cta-note {
        font-size: 1.3rem;
    }
}

/*    wh-btn-fixed
-------------------------------------------------------------- */
.wh-btn-fixed {
    position: fixed;
    bottom: 100px;
    right: 0;
}

.wh-btn-fixed .wh-cv-btn span {
    /* background: #FFE046; */
    background: linear-gradient(0deg, #9d8233, #a98d39, #b6993f, #c2a445, #cfb04c, #dbbc52, #e8c858, #f5d45f);
    display: block;
    padding: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.7rem;
    line-height: 1.6;
    letter-spacing: .05em;
    font-feature-settings: "palt";
    position: relative;
    cursor: pointer;
    transition: all .3s;
    color: #fff;
}

@media screen and (min-width: 769px) {
    .wh-btn-fixed .wh-cv-btn span:hover {
        opacity: .7;
    }
}



@media screen and (max-width: 768px) {
    .floating-bnr-hidden.cv-hidden #page-top {
        bottom: 70px !important;
    }

    .wh-btn-fixed {
        bottom: 0;
        width: 100%;
        padding: 5px;
        background: #fff;
    }

    .wh-btn-fixed .wh-cv-btn span {
        padding: 12px;
        font-size: 1.5rem;
        width: 100%;
    }
}