/* ========================================
   COMMON ELEMENTS
   ======================================== */

/* Base Typography */
body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #222222;
    background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

/* Container */
.container {
    /* max-width: 1512px; */
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}

footer.fixed {
    display: none;
}

/* Common Text Styles */
.highlight {
    color: #e55b00;
}

.highlight-red {
    color: #ff0000;
    font-weight: 700;
}

.highlight-blue {
    color: #004fc4;
}

.underline {
    text-decoration: underline;
    text-underline-offset: 25%;
}

.underline-blue {
    color: #0080db;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Common Button Styles */
.btn-primary {
    /* background: linear-gradient(135deg, #e55b00, #f7b845); */
    border: none;
    border-radius: 30px;
    padding: 15px 30px;
    color: white;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 1px 4px 1px 0px rgba(0, 0, 0, 0.4);
    text-shadow: rgba(0, 0, 0, 0.25) 2px 2px 2px;
    transition: transform 0.2s ease;

    position: relative;
    justify-content: center;
    background: linear-gradient(142deg, #E55B00 11%, #EFBC44 50%, #EEAE3A 59%, #E55B00 100%);
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    z-index: 9999;
    width: 15px;
    height: 24px;
    background: url('../images/lecture/arrow_right.svg') no-repeat center / cover;
}

.header .btn-primary {
    width: 200px;
    justify-content: flex-start;
}

.header .btn-primary::after {
    right: 15px;
}

.btn-primary:hover {
    transform: translateY(-2px);
}

/* .btn-primary.large {
    font-size: 26px;
    padding: 20px 40px;
    border-radius: 50px;
} */

/* Arrow Icon */
.arrow {
    width: 10px;
    height: 10px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M2 1l6 4-6 4V1z" fill="white"/></svg>') no-repeat center;
    background-size: contain;
}

/* Common Card Styles */
.card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Common Image Placeholders */
.image {
    border-radius: 10px;
}

/* Common List Styles */
ul {
    list-style: none;
}

ul li {
    position: relative;
    padding-left: 20px;
}

ul li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #222222;
}

/* Common List Styles */
ul.kome {
    list-style: none;
}

ul.kome li::before {
    content: '※';
}


/* ========================================
   HEADER SECTION
   ======================================== */

.header {
    background: white;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
    height: 100px;
    position: relative;
    z-index: 1000;
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-icon {
    /* width: 50px;
    height: 50px; */
    object-fit: contain;

    width: 124px;
    height: auto;
}

.company p {
    font-size: 13px;
    color: #222222;
    /* margin-bottom: 5px; */
}

.company h1 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    font-size: 22px;
    color: #222222;
}

.company h1 br.slim {
    display: none;
}

.contact {
    text-align: center;
}

.phone {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
}

.phone>div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phone span:first-child {
    font-size: 16px;
    font-weight: 500;
}

.phone span:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
}

.phone span:last-child {
    font-size: 16px;
    font-weight: 500;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
    /* background: linear-gradient(rgba(0, 75, 196, 0.7), rgba(0, 75, 196, 0.5)), 
                url('../images/lecture/hero_bg.jpg'); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* height: 880px; */
    height: 780px;
    position: relative;
    overflow: hidden;
    color: white;

    background: url('../images/lecture/hero_bg.jpg');
}

/* .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 75, 196, 0.3);
    z-index: 1;
} */

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding-top: 83px; */
    height: 100%;

    padding-top: 18px;
}

/* .hero .content {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 60px;
} */

.hero .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 840px;
}

.hero .text h1 {
    margin-bottom: 30px;
    font-size: 42px;
    color: #ffe500;
}

.hero .text h2 {
    margin-bottom: 8px;
    font-size: 43px;
    color: #fff;
}


.hero .image {
    margin-bottom: 50px;
    border-radius: unset;
    width: min(668px, 100%);
    height: auto;
}

.hero .description {
    font-size: 20px;
    color: white;
    text-align: center;

    font-weight: 700;
}

.hero .description br.slim {
    display: none;
}

.hero .speaker {
    position: absolute;
    right: 80px;
    bottom: 0;
}

.hero .speaker-image {
    width: 454px;
    height: 722px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.hero .speaker-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
}

.hero .speaker-image img:nth-of-type(2) {
    display: none;
}

.hero .speaker-card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    bottom: 90px;
    padding: 15px 35px;
    border-radius: 20px;
    width: 510px;
    background: #fff;
}

.hero .speaker-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #222;
    font-weight: 500;
}

.hero .speaker-title {
    font-size: 16px;
}

.hero .speaker-name {
    font-size: 28px;
    font-weight: 500;
}

.hero .speaker-role {
    font-size: 14px;
}

.hero .speaker-description {
    text-align: left;

    margin: 0 auto;
    width: 400px;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    line-height: calc(24 / 14);
}

.hero .cta {
    text-align: center;
    margin-top: 12px;
}

.hero .btn-primary {
    font-size: 24px;
    padding: 20px 40px;
    border-radius: 50px;

    width: 560px;
    height: 80px;
}

.hero .btn-primary:hover {
    transform: translateY(-2px);
}

.hero .btn-primary span br.slim {
    display: none;
}

/* ========================================
   MOYARIHATTO SECTION
   ======================================== */

/* .moyarihatto {
    padding: 80px 0 0;
}

.moyarihatto .container {
    display: flex;
    align-items: center;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 20px;
    border: 3px #004FC4 solid;

    justify-content: space-between;
    padding: 50px 40px 40px;
    border-radius: 20px;
    background: #edf7ff;
}

.moyarihatto .moyarihatto-content {
    width: 614px;
}

.moyarihatto-header h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    width: 478px;
    height: 60px;
    font-size: 36px;
    font-weight: 700;
    color: #ffe500;
    background: #003688;
}

.moyarihatto h4 {
    font-size: 32px;
    font-weight: 700;
    color: #003688;
    margin-bottom: 10px;
}

.moyarihatto .moyarihatto-content p {
    font-size: 16px;
    color: #003688;
    line-height: 35px;

    font-weight: 500;
}

.moyarihatto .moyarihatto-content p span {
    color: #f00;
    font-weight: 700;
}

.moyarihatto .line {
    width: 300px;
}

.moyarihatto .line img {
    width: 100%;
    object-fit: cover;
} */


/* ========================================
   RECOMMENDATION SECTION
   ======================================== */

.recommendation {
    /* padding: 80px 0; */
    background: url('../images/lecture/sec_osusume_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    padding: 60px 0 390px;
}


.recommendation h2 {
    font-size: 45px;
    font-weight: 700;
    text-align: center;
    /* margin-bottom: 40px; */
    line-height: calc(76 / 45);

    margin-bottom: 30px;
}

.recommendation h2 span {
    display: inline-block;
}

.recommendation .lists {
    margin: 0 auto 40px;
    width: min(780px, 100%);
}

.recommendation .lists ul {
    margin: 0;
    padding: 0;
    column-count: 3;
}

.recommendation .lists li {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    white-space: nowrap;
    padding-left: 0;
}

.recommendation .lists li::before {
    display: none;
}

.recommendation .lists li span {
    text-decoration: underline;
    text-underline-offset: 25%;
}

.recommendation p {
    font-size: 26px;
    font-weight: 700;
    color: #004fc4;
    text-align: center;
    /* margin-bottom: 40px; */

    margin-bottom: 20px;
}

.recommendation p span {
    display: inline-block;
}


.recommendation .btn-primary {
    background: #004fc4 url('../images/lecture/arrow_right.svg') no-repeat right 30px center / 15px 24px;
    font-size: 30px;
    /* padding: 20px 40px; */
    border-radius: 40px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
    width: min(400px, 98%);
    height: 80px;
}

.recommendation .btn-primary::after {
    content: unset;
}

/* ========================================
   ANXIETY SECTION
   ======================================== */

.anxiety {
    /* padding: 80px 0; */
    background: #ededed;

    padding: 80px 0 100px;
}

.anxiety h2 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.anxiety h3 {
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.anxiety h3 span {
    display: inline-block;
}

.anxiety .cards {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.anxiety .card {
    flex: 1;
    text-align: center;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.anxiety .card .image {
    width: 280px;
    height: 186px;
    margin: 0 auto 20px;
    border-radius: 10px;
    object-fit: cover;
}

.anxiety .card ul {
    text-align: left;
    padding-left: 0;
}

.anxiety .card li {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}

/* ========================================
   FEATURES SECTION
   ======================================== */

.features {
    padding: 80px 0;
    background: #00327e;
    color: white;
}

.features .container {
    padding: unset;
    width: min(1024px, 100%);
}

.features .features-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #00327e;
    /* padding: 40px 60px;
    border-radius: 20px; */
    margin-bottom: 20px;
}

.features .features-text h2 {
    /* font-size: 48px; */
    font-size: 70px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;

    line-height: 1;
}

.features .features-text h3 {
    /* font-size: 36px; */
    font-size: 50px;
    font-weight: 700;
    color: white;
    margin: 0;

    line-height: 1;
}

.features .features-text .highlight {
    color: #ffe500;
    /* font-weight: 700; */
}

.features .features-text .highlight span {
    font-size: 90px;
}

/* .features .chart {
    display: flex;
    align-items: center;
    gap: 20px;
} */

.features .chart .image {
    /* width: 120px;
    height: 120px;
    border-radius: 10px;
    object-fit: cover; */

    width: 338px;
    height: auto;
}

.features .chart-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.features .chart .text {
    font-size: 16px;
    font-weight: 700;
    /* color: #333; */
    margin-bottom: 5px;
}

.features .chart .percentage {
    font-size: 24px;
    font-weight: 700;
    color: #ff0000;
}

.features .cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
}

.features .cards .card {
    background: white;
    border-radius: 15px;
    /* padding: 40px; */
    display: flex;
    flex-direction: column;
    color: #222222;
    padding: 15px 40px 40px;
}

.features .cards .card.large {
    /* height: 890px; */

    padding-bottom: 60px;
}

.features .cards .card .card-header {
    display: flex;
    align-items: center;
    /* gap: 20px;
    margin-bottom: 30px; */

    gap: 6px;
}

.features .cards .card .number {
    font-family: 'Inter', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #222222;
    min-width: 80px;
}

.features .cards .card .card-body {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}



.features .cards .card h4 {
    font-size: 33px;
    font-weight: 700;
    margin: 0;
    flex: 1;
}

.features .cards .card .image {
    /* width: 250px;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0; */

    border-radius: unset;
    width: 320px;
    height: 150px;
    aspect-ratio: 32 / 15;
}

.features .cards .card p {
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    flex: 1;
    margin: 0;
}

.features .materials {
    text-align: center;
    margin-top: 20px;
}

.features .materials p:first-child {
    font-size: 26px;
    font-weight: 700;
    margin: 30px 0 10px;
}

.features .materials p:nth-of-type(2) {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 30px;
}

.features .materials-image {
    /* width: 100%;
    max-width: 800px; */
    width: min(720px, 100%);
    height: auto;
    /* border-radius: 10px; */
    margin: 0 auto 40px;
    display: block;

    border-radius: unset;
}

.features .materials .btn-primary,
.plan .contact .btn-primary,
.customer .testimonial .btn-primary,
.closing .contact .btn-primary {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto;
    /* padding: 0 0 0 50px; */
    border-radius: 40px;
    width: min(560px, 90%);
    height: 80px;
    font-size: 26px;
    /* background: linear-gradient(172deg, #E55B00 11%, #EFBC44 50%, #EEAE3A 59%, #E55B00 100%); */
}

/* .features .materials .btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 9999;
    width: 15px;
    height: 24px;
    background: url('../images/lecture/arrow_right.svg') no-repeat right 30px center / cover;
} */

/* ========================================
   THEME SECTION
   ======================================== */

.theme {
    background: #fcefe5 url('../images/lecture/sec_thema_bg.jpg') no-repeat center bottom;
    background-size: contain;

    padding: 130px 0 380px;
}

.theme .container {
    width: min(1024px, 100%);
}

.theme h2 {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.theme h3 {
    font-size: 40px;
    font-weight: 700;
    color: #e55b00;
    text-align: center;
    margin-bottom: 40px;
}

.theme .theme-examples {
    display: flex;
    flex-direction: column;

    row-gap: 75px;
}

.theme .theme-example {
    background: #fcefe5;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.theme .example-header {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    background: white;

    box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
}

.theme .badge {
    background: #e55b00;
    color: white;
    font-weight: 700;
    padding: 8px 15px;
    margin-right: 0;
    min-width: 60px;
    text-align: center;
    height: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 60px;
    font-size: 25px;
}

.theme .target {
    font-weight: 700;

    padding-left: 30px;
    font-size: 25px;
}

.theme .target span:first-of-type {
    display: inline-block;
    margin-right: 12px;
}

.theme .theme-detail {
    position: relative;

    margin-bottom: 35px;
    padding: 30px 0 0 100px;
}

.theme .theme-detail .label {
    border: 1px solid #333;
    font-weight: 700;
    margin-bottom: 15px;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 30px;
    font-size: 18px;
}

.theme .theme-detail h4 {
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;

    font-size: 30px;
}

.theme .theme-detail h4 .highlight {
    color: #e59500;
}

.theme .theme-detail .subtitle {
    font-weight: 500;

    margin-bottom: 20px;
    font-size: 22px;
}

.theme .theme-detail .description {

    font-size: 18px;
    line-height: 2;
}

.theme .theme-moyarihatto {
    display: flex;
    justify-content: space-between;
    padding: 30px 30px 35px;
    border: 3px solid #e59500;
    border-radius: 20px;
    background: #fff8f2;
    width: 100%;
    max-width: 895px;
    margin-left: 80px;
}

.theme .theme-moyarihatto .description {
    width: 61%;
}

.theme .theme-moyarihatto .description dl {
    margin-bottom: 20px;
}

.theme .theme-moyarihatto .description dl dt {
    margin-bottom: 8px;
    font-size: 41px;
    font-weight: 700;
    line-height: calc(52 / 41);
    color: #e59500;
}

.theme .theme-moyarihatto .description dl dd {
    font-size: 26px;
    font-weight: 700;
    line-height: calc(35 / 28);
    color: #e55800;
}

.theme .theme-moyarihatto .description dl dd span {
    display: inline-block;
}

.theme .theme-moyarihatto .description p {
    font-size: 14px;
    font-weight: 500;
    line-height: 2;
}

.theme .theme-moyarihatto .description p span {
    color: #f00;
}

.theme .theme-moyarihatto .graphic {
    display: block;
    width: 36%;
}

.theme .footer {
    text-align: center;

    margin-top: 120px;
}

.theme .footer h4 {
    font-size: 40px;
    font-weight: 700;
    line-height: 79px;
}

/* ========================================
   PROFILE SECTION
   ======================================== */

.profile {
    /* padding: 80px 0;
    background: #eff4f8 url('../images/lecture/sec_profile_japanmap.png') no-repeat left top;
    background-size: 50% auto; */

    padding: 0 0 100px;
    background: #eff4f8;
}

.profile .container {
    width: min(1280px, 100%);
    background: url('../images/lecture/sec_profile_japanmap.png') no-repeat left top;
    background-size: 50% auto;

    padding-top: 170px;
}

.profile .profile-header {
    text-align: center;
    /* margin-bottom: 60px; */

    margin-bottom: 30px;
}

.profile .profile-header h2 {
    font-size: 40px;
    font-weight: 700;
    color: #018f19;
    /* margin-bottom: 10px; */
}

.profile .profile-header h3 {
    font-size: 50px;
    font-weight: 700;
    color: #018f19;
    /* margin-bottom: 10px; */
}

.profile .profile-header p {
    /* font-size: 18px;
    /* color: #333; */

    font-size: 24px;
    font-weight: 500;
}

.profile .profile-main {
    /* display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 80px; */

    position: relative;
    margin: 0 auto;
    padding: 115px 0 40px;
    width: min(1024px, 100%);
}

.profile .profile-content {
    /* flex: 1; */

    width: min(620px, 100%);
}

.profile .profile-content h1 {
    font-size: 56px;
    font-weight: 900;
    color: #004fc4;
    line-height: 86px;
    margin-bottom: 40px;
}

/* .profile .profile-details {
    margin-bottom: 40px;
} */

.profile .profile-details .company {
    font-size: 18px;
    font-weight: 700;
    /* margin-bottom: 10px;
    color: #333; */
}

.profile .profile-details .name {
    font-size: 40px;
    font-weight: 700;
    /* margin-bottom: 5px;
    color: #333; */

    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-bottom: 35px;
}

.profile .profile-details .name-en {
    font-size: 18px;
    /* margin-bottom: 5px;
    color: #333; */
}

.profile .profile-details .title {
    font-size: 18px;
    /* margin-bottom: 20px;
    color: #333; */
}

.profile .profile-details .title,
.profile .profile-details .name-en {
    font-weight: 500;
}

.profile .profile-details .description {
    font-size: 20px;
    color: #22b5c8;
    line-height: 37px;

    font-weight: 500;
}

.profile .profile-credentials {
    /* margin-bottom: 40px; */

    margin: 0 auto 70px;
    padding: 15px 70px;
    width: min(1024px, 100%);
    background: #fff;
}

.profile .profile-credentials h3 {
    font-size: 20px;
    font-weight: 400;
    /* margin-bottom: 20px;
    color: #333; */
}

.profile .credentials-lists {
    display: flex;
    gap: 40px;
}

.profile .credentials-lists ul {
    /* flex: 1; */

    margin: 0;
    padding: 0;
}

.profile .credentials-lists li {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 5px;
    /* color: #333; */
}

.profile .credentials-lists ul li br.slim {
    display: none;
}

.profile .credentials-lists li ul li {
    padding: 0;
    font-size: 13px;

    margin-bottom: 0;
    line-height: calc(21 / 13);
}

.profile .credentials-lists li ul li::before {
    content: unset;
}

.profile .profile-achievements {
    /* margin: 40px 0 60px 0;
    text-align: center; */

    margin: 0 auto;
    padding: 30px 50px 30px 40px;
    width: min(1024px, 100%);
    background: rgba(255, 253, 253, .6);
    overflow: scroll;
    height: 300px;
}

.profile .profile-achievements h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.profile table.jisseki {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.profile table.jisseki td {
    border: 1px solid #ccc;
    padding: 15px 18px;
    vertical-align: top;
    width: 50%;
    font-size: 14px;
    text-align: left;
}

.profile table.jisseki td h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.profile .profile-achievements .contact-note {
    font-size: 18px;
    font-weight: 700;
    /* text-align: center;
    /* color: #333; */

    text-align: right;
}

.profile .profile-image {
    /* flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start; */

    position: absolute;
    right: 0;
    bottom: 0;
    width: 420px;
}

.profile .profile-image img {
    /* width: 100%;
    max-width: 500px; */
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}

.profile .profile-image img.slim {
    display: none;
}

.profile .youtube-section {
    text-align: center;
}

.profile .youtube-section a {
    display: inline-block;
    width: fit-content;
}

/*.profile .youtube-section h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    text-align: center;
} */

.profile .youtube-section .youtube-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 26px;
    width: 398px;
    height: 45px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #EFF4F8 0%, #004FC4 22%, #004FC4 83%, #EFF4F8 100%);
}

.profile .youtube-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* margin-bottom: 30px; */
}

.profile .video-thumbnail {
    width: 560px;
    height: 314px;
    border-radius: 10px;
    overflow: hidden;
}

.profile .video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile .youtube-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.profile .youtube-info p {
    font-size: 22px;
    font-weight: 700;
}

.profile .youtube-info p br.slim {
    display: none;
}

.profile .youtube-logo {
    /* width: 160px;
    height: 36px;
    border-radius: 5px;
    overflow: hidden; */

    width: min(360px, 100%);
    height: auto;
}

.profile .youtube-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile .youtube-info span {
    font-size: 38px;
    font-weight: 700;
    /* color: #333; */
}

/* .profile .btn-primary {
    background: #004fc4;
    color: white;
    font-size: 24px;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.profile .btn-primary:hover {
    background: #003a9b;
} */

/* ========================================
   PLAN SECTION
   Shared with the CLOSING SECTION
   ======================================== */

.plan,
.closing {
    /* padding: 80px 0; */
    background: #f7b845;
}

.plan {
    padding: 100px 0 40px;
}

.closing {
    padding: 100px 0 80px;
}

.plan .container,
.closing .container {
    width: min(900px, 100%);
}

.plan .plan-header,
.closing .plan-header {
    text-align: center;
    /* margin-bottom: 60px; */

    margin-bottom: 50px;
}

.plan .plan-lead-image,
.closing .plan-lead-image {
    /* width: 100%;
    max-width: 1200px; */
    height: auto;
    display: block;
    margin: 0 auto;

    width: min(520px, 100%);
}

.plan .plan-header h2,
.closing .plan-header h2 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    /* margin-top: 30px;
    color: #333; */
}

.plan .plan-header h3,
.closing .plan-header h3 {
    font-size: 68px;
    font-weight: 900;
    text-align: center;
    /* margin-top: 20px; */
    color: white;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

    line-height: 1;
}

.plan .speech-bubble,
.closing .speech-bubble {
    position: relative;
    /* background: #004fc4;
    border-radius: 20px;
    padding: 20px 30px; */
    margin: 30px auto 0;
    /* max-width: 600px; */
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    width: min(800px, 100%);
    height: 60px;
    background: #003688;
}

.plan .speech-bubble::after,
.closing .speech-bubble::after {
    content: '';
    position: absolute;
    /* bottom: -15px;
    left: 50px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #004fc4; */

    width: 25px;
    height: 26px;
    bottom: -22px;
    left: 55px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: #003688;
}

.plan .speech-bubble p,
.closing .speech-bubble p {
    /* font-size: 24px; */
    font-weight: 700;
    color: white;
    /* margin: 0;
    line-height: 1.4; */

    display: flex;
    align-items: center;
    width: fit-content;
    font-size: 30px;
}

.plan .speech-bubble .highlight,
.closing .speech-bubble .highlight {
    color: #ffe500;

    font-size: 38px;
}

.plan .mental-health-image,
.closing .mental-health-image {
    /* width: 100%;
    max-width: 400px; */
    height: auto;
    display: block;
    /* margin: 30px auto 0; */

    margin: 16px auto 6px;
    width: min(840px, 100%);
}

.plan .mental-health-image2,
.closing .mental-health-image2 {
    display: none;
}

.plan .highlight-banner,
.closing .highlight-banner {
    /* padding: 15px 30px;
    margin: 30px auto 0;
    max-width: 800px; */
    text-align: center;
}

.plan .highlight-banner>span,
.closing .highlight-banner>span {
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    background: linear-gradient(transparent 60%, #ffea2a 60%);
    padding: 5px 10px;
}

.plan .pricing {
    /* margin-bottom: 60px; */

    margin-bottom: 40px;
}

/* .plan .pricing-box {
    background: white;
    border-radius: 15px;
    border: 6px solid #e55b00;
    overflow: hidden;
} */

/* .plan .pricing-header {
    background: #e55b00;
    padding: 20px 30px;
    text-align: center;
} */

.plan .pricing-header h3 {
    font-size: 30px;
    font-weight: 700;
    color: white;
    /* margin: 0; */

    display: flex;
    justify-content: center;
    align-items: center;
    width: min(900px, 100%);
    height: 80px;
    background: #e55b00;
}

.plan .pricing-header h3 span {
    font-size: 60px;

    display: inline-block;
    margin: 0 15px;
}

.plan .pricing-content {
    display: block;
}

.plan .pricing-content .card {
    flex: 1;
    background: white;
    /* padding: 40px; */
    border: none;

    padding: 40px 38px 0;
    border-right: 6px solid #e55b00;
    border-left: 6px solid #e55b00;
    border-radius: unset;
    box-shadow: unset;
}

.plan .pricing-content .card:last-of-type {
    border-bottom: 6px solid #e55b00;
}

/* .plan .pricing-content .card.featured {
    border-left: 3px solid #e55b00;
} */

.plan .pricing-content .card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 30px; */
    gap: 20px;

    padding: 0 16px;
}

.plan .pricing-content .card h4 {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.plan .pricing-content .card .amount {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex-shrink: 0;

    line-height: 1;
}

.plan .pricing-content .card .amount span:first-child {
    font-family: 'Inter', sans-serif;
    font-size: 90px;
    font-weight: 700;
    color: #ff0000;
}

.plan .pricing-content .card .amount span:nth-child(2) {
    font-size: 30px;
    font-weight: 700;
    /* color: #00ac34; */

    color: #ff0000;
}

.plan .pricing-content .card .amount span:last-child {
    font-size: 30px;
    font-weight: 700;
    color: #222222;
}

.plan .pricing-content .card p.other-fee {
    font-size: 18px;
    font-weight: 400;
    /* text-align: center; */

    padding: 0 16px 8px;
    text-align: right;
}

.plan .pricing-content .card:first-of-type p,
.plan .pricing .card .breakdown {
    border-bottom: 2px solid #959595;
}


.plan .pricing .card .breakdown {
    /* display: flex;
    align-items: flex-start;
    gap: 30px; */
    margin-bottom: 30px;
}

.plan .pricing .card .breakdown .breakdown-inner {
    display: flex;
    column-gap: 26px;
    margin: 0 auto 30px;
    width: min(500px, 100%);
}

.plan .pricing .card .breakdown p {
    font-size: 24px;
    font-weight: 700;
    margin: 7px 0 0;
    flex-shrink: 0;
}

/* .plan .pricing .card .breakdown .items {
    flex: 1;
} */

/* .plan .pricing .card .breakdown .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 2px solid #959595;
} */

/* .plan .pricing .card .breakdown .item span:first-child, */
.plan .pricing .card .breakdown table th {
    font-size: 24px;
    font-weight: 700;

    text-align: left;
}

.plan .pricing .card .breakdown .item td {
    text-align: right;
}

.plan .pricing .card .breakdown table th,
.plan .pricing .card .breakdown table td {
    white-space: nowrap;
}

/* .plan .pricing .card .breakdown .item span:last-child, */
.plan .pricing .card .breakdown .item td span:first-of-type {
    font-family: 'Inter', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #00ac34;
}

.plan .pricing .card .breakdown .item td span:first-of-type span {
    font-size: 20px;
}

.plan .pricing .card .breakdown .item td span:last-of-type {
    font-size: 20px;
    font-weight: 700;
}

.plan .pricing .card .pricing-details .notes {
    padding-left: 10px;
    margin-bottom: 40px;
}

.plan .pricing .card .pricing-details .notes .section:not(:last-of-type) {
    margin-bottom: 30px;
}

.plan .pricing .card .pricing-details .notes .section p,
.plan .pricing .card .pricing-details .notes .section ul li {
    font-weight: 500;
}

.plan .pricing .card .pricing-details .notes .section ul {
    margin: 0;
    padding: 0 0 0 .5em;
}


.plan .contact,
.closing .contact {
    /* padding: 80px 0 {
    text-align: center;
}

.plan .contact .btn-primary {
    /* margin-bottom: 30px; */

    margin-bottom: 40px;
}

.plan .contact p,
.closing .contact p {
    font-size: 23px;
    font-weight: 700;
    /* margin-bottom: 30px; */

    margin-bottom: 10px;
}

.plan .numbers,
.closing .numbers {
    /* display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px; */

    margin: 0 auto 40px;
    width: fit-content;
}

.plan .number,
.closing .number {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 20px;

    line-height: 1.3;
}

.plan .number span:first-child,
.closing .number span:first-child {
    font-size: 24px;
    font-weight: 700;
}

.plan .number span:nth-child(2),
.closing .number span:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
}

.plan .number span:last-child,
.closing .number span:last-child {
    font-size: 30px;
    font-weight: 700;
}

/* .plan .btn-primary,
.closing .btn-primary {
    background: linear-gradient(135deg, #e55b00, #f7b845);
    font-size: 26px;
    padding: 20px 40px;
    border-radius: 50px;
} */

.plan .contact .btn-primary {
    margin-bottom: 40px;
}

.plan .contact .btn-primary span br,
.closing .contact .btn-primary span br {
    display: none;
}

.closing .contact .btn-primary {
    margin-bottom: 60px;
}

/* ========================================
    FLOW SECTION
   ======================================== */

.flow {
    /* padding: 80px 0;
    background: #f0f0f0; */

    padding: 115px 0 135px;
}

.flow h2 {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.flow h2 .highlight {
    color: #e55b00;

    color: #e59500;
}

.flow h2 br.slim {
    display: none;
}

.flow p {
    font-size: 20px;
    /* font-weight: 400; */
    text-align: center;
    margin-bottom: 60px;
    /* line-height: 36px; */

    font-weight: 500;
    line-height: 2;
}

.flow p br.slim {
    display: none;
}

.flow .steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 30px; */

    row-gap: 15px;
}

.flow .step {
    /* background: #f5f5dc;
    border-radius: 15px;
    padding: 20px 30px;
    text-align: center;
    width: 100%;
    max-width: 500px; */
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    width: min(600px, 90%);
    height: 80px;
    background: #fff3da;
}

.flow .step h4 {
    /* font-size: 24px; */
    font-weight: 700;
    /* margin-bottom: 10px;
    color: #333; */

    font-size: 20px;
    line-height: 1.5;
}

.flow .step p {
    font-size: 16px;
    /* font-weight: 400; */
    margin: 0;
    /* color: #666; */

    font-weight: 500;
    line-height: 1.2;
}

.flow .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 20px 0; */

    width: 60px;
    height: 30px;
}

.flow .arrow img {
    /* width: 30px;
    height: 30px; */
    object-fit: contain;
}

/* ========================================
   CUSTOMER SECTION
   ======================================== */

.customer {
    /* padding: 80px 0;
    background: #f0f0f0; */

    padding: 80px 0 360px;
    background: url('../images/lecture/sec_customer_bg.jpg') no-repeat center bottom / contain;
}

.customer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
    gap: 30px;
}

/* .customer-image-left,
.customer-image-right {
    flex-shrink: 0;
}

.customer-image-left img,
.customer-image-right img {
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
} */

.customer-title {
    /* flex: 1; */
    text-align: center;

    position: relative;
    margin: 0 auto;
    width: fit-content;
}

.customer-title::before,
.customer-title::after {
    content: "";
    position: absolute;
    top: 0;
}

.customer-title::before {
    width: 208px;
    height: 206px;
    background: url('../images/lecture/sec_customer_left.png') no-repeat center / contain;
    left: -208px;
}

.customer-title::after {
    width: 180px;
    height: 256px;
    background: url('../images/lecture/sec_customer_right.png') no-repeat center / contain;
    right: -180px;
}

.customer-title h2 {
    /* font-size: 40px; */
    font-weight: 700;
    margin-bottom: 20px;

    font-size: 58px;
}

.customer-title h2 br.slim {
    display: none;
}

.customer-title h3 {
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    color: #e55b00;

    font-weight: 700;
    line-height: calc(46 / 28);
}

.customer-title h3 br.slim {
    display: none;
}

.customer .testimonial-header,
.customer .testimonial {
    margin: 0 auto;
    width: min(900px, 100%);
}

.customer .testimonial-header {
    text-align: center;
    margin-bottom: 40px;
}

.customer .testimonial-header h3 {
    /* font-size: 32px; */
    font-weight: 700;
    /* color: #333;
    margin-bottom: 15px; */

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    height: 52px;
    font-size: 30px;
    color: #fff;
    background: #004fc4;
    line-height: 1;
}

.customer .testimonial-header p {
    /* font-size: 18px;
    font-weight: 400;
    color: #666;
    line-height: 28px; */

    color: #004fc4;
    font-size: 24px;
    font-weight: 700;
    line-height: calc(46 / 24);
    text-align: center;
}

.customer .testimonial-header p br.slim {
    display: none;
}

.customer .testimonial {
    background: #f5f5f5;
    border-radius: 15px;
    padding: 40px 40px 70px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.customer .content {
    margin-bottom: 40px;
}

.customer .qa {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.customer .qa:last-child {
    border-bottom: none;
}

.customer .question {
    font-size: 18px;
    /* font-weight: 700;
    color: #e55b00; */
    margin-bottom: 15px;

    color: #004fc4;
    font-weight: 500;
}

.customer .answer {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 10px;
}

.customer .answer:last-child {
    margin-bottom: 0;
}

.customer .footer {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.customer .footer br.slim {
    display: none;
}

/* .customer .btn-primary {
    background: #e55b00;
    font-size: 24px;
    padding: 15px 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
} */

.customer .testimonial .btn-primary span br {
    display: none;
}

/* ========================================
   CLOSING SECTION
   ======================================== */

/* .closing {
    padding: 80px 0;
    background: #f7b845;
}

.closing .header {
    margin-bottom: 60px;
}

.closing .banner {
    margin-bottom: 30px;
}

.closing .stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}


.closing .stats span:nth-child(2) {
    font-size: 22px;
    font-weight: 900;
}

.closing .stats span:nth-child(3) {
    font-size: 40px;
    font-weight: 700;
    color: #ff0000;
}

.closing .stats span:nth-child(4) {
    font-size: 22px;
    font-weight: 900;
}

.closing .moyarihatto {
    position: relative;
    margin-bottom: 30px;
}


.closing .moyarihatto p {
    font-size: 30px;
    font-weight: 700;
    color: white;
    text-align: center;
    margin: 10px 0;
}

.closing .moyarihatto .highlight {
    font-size: 38px;
    font-weight: 700;
    color: #ffe500;
    text-align: center;
}

.closing .title-section {
    text-align: center;
}

.closing .title-section h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.closing .title-section h3 {
    font-size: 68px;
    font-weight: 900;
    color: white;
    text-shadow: #222222 2px 2px 2px;
    margin-bottom: 20px;
}


.closing .contact {
    text-align: center;
}

.closing .contact p {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 30px;
}

.closing .numbers {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.closing .number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.closing .number span:first-child {
    font-size: 24px;
    font-weight: 700;
}

.closing .number span:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
}

.closing .number span:last-child {
    font-size: 30px;
    font-weight: 700;
}

.closing .btn-primary {
    background: linear-gradient(135deg, #e55b00, #f7b845);
    font-size: 26px;
    padding: 20px 40px;
    border-radius: 50px;
} */

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media screen and (max-width: 1380px) {
    .hero .text {
        width: 700px;
    }

    .hero .text h1 {
        font-size: 36px;
    }

    .hero .text h2 {
        font-size: 38px;
    }

    .hero .image {
        max-width: 640px;
    }

    .hero .speaker-card {
        padding: 15px 20px;
        width: 100%;
    }

    .hero .speaker-card h3 {
        display: block;
        margin-bottom: 10px;
    }

    .hero .speaker-role {
        display: block;
    }

    .hero .speaker-description {
        width: auto;
    }
}

@media (max-width: 1200px) {
    .container {
        padding: 0 15px;
    }

    /*
        Header
    ------------------------------ */
    .company p {
        font-size: 11px;
    }

    .company h1 {
        font-size: 18px;
    }

    .phone span:first-child {
        font-size: 14px;
    }

    .phone span:nth-child(2) {
        font-size: 24px;
    }

    .phone span:last-child {
        font-size: 14px;
    }

    /*
        Hero Section
    ------------------------------ */
    .hero {
        height: 660px;
    }

    .hero .text h1 {
        font-size: 30px;
    }

    .hero .text h2 {
        font-size: 32px;
    }

    /* .hero .moyarihatto-text {
        font-size: 40px;
    }

    .hero .moyarihatto-quote {
        font-size: 40px;
    } */

    .hero .btn-primary {
        width: 500px;
    }

    .hero .speaker {
        right: 4%;
        z-index: -1;
    }

    .hero .speaker-image {
        width: 382px;
        height: 608px;
    }

    .hero .speaker-card {
        bottom: 60px;
    }

    /*
        Moyarihatto Section
    ------------------------------ */
    /* .moyarihatto {
        padding-top: 60px;
    }

    .moyarihatto .container {
        max-width: unset;
        width: min(800px, 100%);
    }

    .moyarihatto .moyarihatto-content {
        width: min(390px, 100%);
    }

    .moyarihatto-header h3 {
        width: min(720px, 100%);
    }

    .moyarihatto h4 span {
        display: block;
    }

    .moyarihatto .line {
        margin-top: 40px;
    } */
}

@media screen and (max-width: 1140px) {
    .customer-title::before {
        left: -160px;
        z-index: -1;
        width: 180px;
        height: 178px;
    }

    .customer-title::after {
        right: -140px;
        z-index: -1;
        width: 140px;
        height: 165px;
    }
}

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

    /*
        Header
    ------------------------------ */
    .company p {
        font-size: 10px;
    }

    .company h1 {
        font-size: 16px;
    }

    .phone span:first-child {
        font-size: 12px;
    }

    .phone span:nth-child(2) {
        font-size: 21px;
    }

    .phone span:last-child {
        font-size: 11px;
    }

    /*
        Hero Section
    ------------------------------ */
    .hero {
        height: 590px;
    }

    .hero .container {
        padding: 18px 0 0;
    }

    .hero .text {
        position: relative;
        z-index: 2;
        margin-left: 25px;
        width: 570px;
    }

    .hero .text h2 {
        font-size: 30px;
    }

    .hero .image {
        max-width: unset;
        width: 100%;
    }

    /* .hero .moyarihatto p {
        font-size: 24px;
    }

    .hero .moyarihatto-text {
        font-size: 34px;
    }

    .hero .moyarihatto-quote {
        font-size: 34px;
    }

    .hero .moyarihatto-suffix {
        font-size: 24px;
    } */

    .hero .description {
        font-size: 16px;
    }

    .hero .btn-primary {
        width: 450px;
        height: 64px;
        font-size: 21px;
    }

    .hero .speaker {
        right: 40px;
        /* z-index: 1; */
    }

    .hero .speaker-image {
        width: 346px;
        height: 550px;
    }

    .hero .speaker-card {
        bottom: 60px;
        padding: 15px 20px;
    }


    /*
        Anxiety Section
    ------------------------------ */
    .anxiety .container {
        padding: 0;
        width: min(800px, 100%);
    }

    .anxiety .cards {
        column-gap: unset;
    }

    .anxiety .card .image {
        width: 220px;
        height: auto;
    }

    /*
        Features Section
    ------------------------------ */
    .features .container {
        width: min(800px, calc(100% - 30px));
    }

    .features .features-text h2 {
        font-size: 60px;
    }

    .features .features-text h3 {
        font-size: 38px;
    }

    .features .features-text .highlight span {
        font-size: 70px;
    }

    .features .chart .image {
        width: 260px;
    }

    .features .cards .card .card-header {
        align-items: start;
        margin-bottom: 4px;
    }

    .features .cards .card .number {
        line-height: 1.2;
    }

    .features .cards .card h4 {
        font-size: 30px;
        line-height: 1.8;
    }

    .features .cards .card .image {
        width: 280px;
        height: 170px;
        object-fit: cover;
        margin-top: 10px;
    }

    .features .materials p:first-child>span:last-of-type {
        display: block;
    }

    /*
        Theme Section
    ------------------------------ */
    .theme .container {
        padding: unset;
        width: min(800px, 100%);
    }

    .theme .theme-detail {
        padding: 30px 20px 0;
    }

    .theme .theme-moyarihatto {
        margin: 0 auto;
    }

    .theme .theme-detail .subtitle {
        font-size: 20px;
    }

    .theme .theme-moyarihatto .description dl dt {
        font-size: 30px
    }

    .theme .theme-moyarihatto .description dl dd {
        font-size: 20px;
    }

    .theme .footer h4 {
        font-size: 36px;
        line-height: calc(60 / 36);
    }

    /*
        Profile Section
    ------------------------------ */
    .profile .container {
        padding: 170px 0 0;
        width: min(800px, 100%);
    }

    .profile .profile-content h1 {
        font-size: 42px;
        line-height: calc(75 / 42);
    }

    .profile .profile-details .company span {
        display: block;
    }

    .profile .profile-details .description {
        width: 420px;
    }

    .profile .profile-image {
        width: 350px;
    }

    .profile .profile-credentials {
        padding: 25px;
    }

    .profile .credentials-lists {
        gap: 30px 15px;
    }

    .profile .credentials-lists li {
        padding-left: 12px;
        font-size: 14px;
    }

    .profile .credentials-lists li ul li {
        font-size: 12px;
    }

    /*
        Plan Section
    ------------------------------ */
    .plan .container,
    .closing .container {
        padding: unset;
        width: min(800px, 100%);
    }

    .plan .speech-bubble,
    .closing .speech-bubble {
        width: min(767px, 98%);
    }

    .plan .speech-bubble p,
    .closing .speech-bubble p {
        font-size: 28px;
    }

    .plan .speech-bubble .highlight,
    .closing .speech-bubble .highlight {
        font-size: 36px;
    }

    .plan .pricing-content .card {
        padding: 40px 20px 5px;
    }

    .plan .pricing-content .card .card-header {
        padding: 0 6px;
    }

    .plan .pricing-content .card p.other-fee {
        padding: 0 6px 27px
    }

    .plan .pricing .card .pricing-details .notes {
        padding-left: 6px;
    }


    /*
        Flow Section
    ------------------------------ */
    .flow .container {
        padding: 0;
        width: min(800px, 100%);
    }

    /*
        Customer Section
    ------------------------------ */
    .customer-title::before,
    .customer-title::after {
        content: unset;
    }
}

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

    html,
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        position: static;
    }

    .header {
        height: 80px;
    }

    body {
        position: static;
        padding-bottom: 60px;
        height: auto;
        max-height: unset;
    }

    header .contact {
        display: none;
    }

    .logo-icon {
        display: none;
    }

    footer.fixed {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        display: block;
        /* width: 100%; */
        width: auto;

        /* display: none; */
    }

    footer.fixed dl {
        display: flex;
        height: 60px;
    }

    footer.fixed dl div {
        display: flex;
        justify-content: center;
        align-items: center;
        /* gap: 5px 10px; */
        width: 50%;
        height: 100%;
        flex-direction: column;
    }

    footer.fixed dl div:first-of-type {
        background: #e55b00;
    }

    footer.fixed dl div:last-of-type {
        background: #ffe500;
    }

    footer.fixed dl dt,
    footer.fixed dl dd {
        /* color: #fff; */
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
    }

    footer.fixed dl dt span:first-of-type {
        font-size: 12px;
    }

    footer.fixed dl dt span:last-of-type {
        font-size: 11px;
    }

    footer.fixed dl dd {
        font-size: 21px;
    }


    /*
        Hero Section
    ------------------------------ */
    .hero {
        overflow: unset;
    }

    .hero .speaker {
        right: -20px;
    }

    .hero .speaker-card {
        left: 7%;
        transform: unset;
        width: 80%;
    }

    .hero .speaker-description {
        font-size: 13px;
    }
}

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

    /*
        Hero Section
    ------------------------------ */
    .hero .text {
        margin-left: 15px;
        width: 500px;
    }

    .hero .btn-primary {
        width: 400px;
    }


    /*
        Moyarihatto Section
    ------------------------------ */
    /* .moyarihatto .container {
        flex-direction: column;
        row-gap: 30px;
        padding: 48px 35px;
        width: min(440px, 100%);
    }

    .moyarihatto-header h3 {
        width: 100%;
        font-size: 30px;
    }

    .moyarihatto h4 {
        text-align: center;
    }

    .moyarihatto .line {
        margin-top: unset;
    } */


    /*
        Recommendation Section
    ------------------------------ */

    .recommendation {
        background-size: contain;
        background-position: center bottom;
        padding: 60px 0 170px;
    }


    .recommendation .container {
        padding: 0;
        width: min(440px, 100%);
    }

    .recommendation h2 {
        /* font-size: 36px; */
        font-size: 33px;
    }

    .recommendation .lists ul {
        column-count: 2;
    }

    .recommendation .lists li {
        /* font-size: 20px; */
        font-size: 19px;
    }


    /*
        Anxiety Section
    ------------------------------ */
    .anxiety .container {
        width: min(440px, 100%);
    }

    .anxiety h2 {
        margin-bottom: 8px;
    }

    .anxiety h3 {
        margin-bottom: 26px;
        font-size: 45px;
        line-height: calc(52 / 45);
    }

    .anxiety .cards {
        flex-direction: column;
        gap: unset;
    }

    .anxiety .card .image {
        width: 300px;
    }

    .anxiety .card:not(:first-of-type) img {
        display: none;
    }

    .anxiety .card ul {
        margin: unset;
        padding: unset;
    }


    /*
        Feature Section
    ------------------------------ */
    .features {
        padding-bottom: 100px;
    }

    .features .container {
        width: min(440px, 100%);
    }

    .features .features-banner {
        position: relative;
        display: block;
        margin-bottom: 10px;
        padding-bottom: 35px;
    }

    .features .features-text h2 {
        margin-bottom: 20px;
        font-size: 50px;
    }

    .features .features-text h3 {
        font-size: 35px;
        line-height: 1.2;
        text-align: left;
    }

    .features .features-text h3 .highlight {
        display: block;
        font-size: 42px;
    }

    .features .features-text h3 .highlight span {
        font-size: 80px;
    }

    .features .features-banner .chart {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .features .chart .image {
        width: 170px;
    }

    .features .cards {
        margin-bottom: 0;
    }

    .features .cards .card.large {
        padding-bottom: 55px;
    }

    .features .cards .card .card-header {
        margin-bottom: 15px;
    }

    .features .cards .card .number {
        min-width: unset;
        font-size: 50px;
        line-height: 1;
    }

    .features .cards .card h4 {
        font-size: 26px;
        line-height: 1.4;
    }

    .features .cards .card:first-of-type h4 .highlight,
    .features .cards .card:nth-of-type(3) h4 .highlight {
        display: block;
    }

    .features .cards .card .card-body {
        flex-direction: column;
        row-gap: 20px;
    }

    .features .cards .card .image {
        width: 100%;
        height: 160px;
    }

    .features .cards .card p {
        /* margin-bottom: 40px; */
        line-height: calc(30 / 18);
    }

    .features .materials {
        margin: 0;
    }

    .features .cards .card .materials p {
        line-height: 1.5;
        text-align: left;
    }

    .features .materials p:first-child {
        font-size: 24px;
    }

    .features .materials p:first-child>span:nth-of-type(2) {
        display: block;
    }

    .features .materials-image {
        margin-bottom: 35px;
    }

    .features .materials p:nth-of-type(2) {
        margin-bottom: 15px;
        font-size: 24px;
    }

    .features .materials .btn-primary {
        width: min(380px, 100%);
        font-size: 24px;
        line-height: calc(30 / 24);
    }

    .features .materials .btn-primary span span {
        display: block;
    }


    /*
        Theme Section
    ------------------------------ */
    .theme {
        padding: 80px 0 140px;
    }

    .theme .container {
        width: min(440px, 100%);
    }

    .theme h2 {
        font-size: 35px;
    }

    .theme h3 {
        font-size: 35px;
    }

    .theme h3 span {
        display: block;
    }

    .theme .theme-examples {
        row-gap: 45px;
    }

    .theme .badge {
        width: 80px;
    }

    .theme .target {
        padding-left: 8px;
    }

    .theme .theme-detail .subtitle {
        font-size: 18px;
        line-height: calc(30 / 18);
    }

    .theme .theme-detail h4 {
        font-size: 25px;
        line-height: calc(36 / 25);
    }

    .theme .theme-moyarihatto {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
        padding: 20px;
    }

    .theme .theme-moyarihatto .description {
        width: 100%;
    }

    .theme .theme-moyarihatto .graphic {
        width: 300px;
    }

    .theme .footer {
        margin-top: 45px;
    }

    .theme .footer h4 {
        font-size: 30px;
        line-height: calc(50 / 30);
    }

    .theme .footer h4 span span {
        display: inline-block;
    }


    /*
        Profile Section
    ------------------------------ */
    .profile {
        padding-bottom: 80px;
    }

    .profile .container {
        width: min(440px, 100%);
    }

    .profile .profile-header {
        margin-bottom: 25px;
    }

    .profile .profile-header h2 {
        font-size: 34px;
        line-height: calc(70 / 34);
    }

    .profile .profile-header h3 {
        font-size: 45px;
        line-height: calc(55 / 45);
    }

    .profile .profile-header h3 span {
        display: block;
    }

    .profile .profile-header p {
        font-size: 22px;
    }

    .profile .profile-achievements h3 {
        font-size: 18px;
    }

    .profile table.jisseki td {
        text-align: left;
    }

    .profile .profile-achievements {
        padding: 30px;
    }

    .profile .profile-achievements .contact-note {
        font-size: 14px;
        text-align: left;
    }

    .profile .profile-main {
        padding: 40px 0 290px;
    }

    .profile .profile-content h1 {
        margin-bottom: 15px;
        font-size: 38px;
        line-height: calc(55 / 38);
    }

    .profile .profile-details .description {
        font-size: 18px;
        line-height: calc(30 / 18);
    }

    .profile .profile-image {
        margin: 0 auto;
        width: fit-content;
    }

    .profile .profile-details .company,
    .profile .profile-details .name,
    .profile .profile-image img.wide {
        display: none;
    }

    .profile .profile-image img.slim {
        display: block;
        width: auto;
        height: 290px;
    }

    .profile .profile-credentials {
        padding: 20px 35px 30px;
    }

    .profile .credentials-lists {
        flex-direction: column;
        gap: unset;
    }


    .profile .youtube-section .youtube-title {
        width: 260px;
        font-size: 16px;
    }

    .profile .video-thumbnail {
        width: min(360px, 100%);
        height: auto;
    }

    .profile .youtube-info p {
        font-size: 14px;
        line-height: 1.2;
    }

    .profile .youtube-logo {
        width: min(235px, 100%);
    }


    /*
        Plan Section
    ------------------------------ */
    .plan {
        padding: 60px 0 20px;
    }

    .plan .container,
    .closing .container {
        width: min(440px, 100%);
    }

    .plan .plan-lead-image,
    .closing .plan-lead-image {
        width: min(400px, 100%);
    }

    .plan .plan-header h2,
    .closing .plan-header h2 {
        font-size: 26px;
        line-height: calc(34 / 26);
    }

    .plan .plan-header h3,
    .closing .plan-header h3 {
        font-size: 50px;
    }

    .plan .speech-bubble,
    .closing .speech-bubble {
        border-radius: 50px;
        width: min(420px, 100%);
        height: 100px;
    }

    .plan .speech-bubble p,
    .closing .speech-bubble p {
        flex-direction: column;
    }

    .plan .speech-bubble p,
    .closing .speech-bubble p {
        font-size: 24px;
    }

    .plan .speech-bubble .highlight,
    .closing .speech-bubble .highlight {
        font-size: 34px;
    }


    .plan .mental-health-image,
    .closing .mental-health-image {
        display: none;
    }

    .plan .mental-health-image2,
    .closing .mental-health-image2 {
        display: block;
        margin: 30px auto 6px;
        width: min(320px, 100%);
    }

    .plan .highlight-banner>span,
    .closing .highlight-banner>span {
        /* position: relative; */
        padding: unset;
        background: unset;
    }

    .plan .highlight-banner span span,
    .closing .highlight-banner span span {
        /* position: relative;
        z-index: 2; */
        display: inline-block;
        background: linear-gradient(transparent 60%, #ffea2a 60%);
    }

    /* .plan .highlight-banner span span::before, .closing .highlight-banner span span::before {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 20px;
        background: #ffe500;
    } */

    .plan .pricing-content .card {
        padding: 20px 20px 10px;
    }

    .plan .pricing-content .card .card-header {
        flex-direction: column;
        align-items: start;
        gap: 0;
        padding: 0 8px 0 0;
    }

    .plan .pricing-content .card h4 {
        font-size: 20px;
    }

    .plan .pricing-content .card h4 br {
        display: none;
    }

    .plan .pricing-content .card .amount {
        gap: 0;
    }

    .plan .pricing-content .card .amount span:first-child {
        font-size: 70px;
    }

    .plan .pricing-content .card .amount span:nth-child(2),
    .plan .pricing-content .card .amount span:last-child {
        font-size: 20px;
    }

    .plan .pricing .card .breakdown .breakdown-inner {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .plan .contact .btn-primary,
    .closing .contact .btn-primary {
        border-radius: 45px;
        width: min(380px, 100%);
        height: 90px;
        font-size: 24px;
        line-height: calc(30 / 24);
    }

    .plan .contact .btn-primary span br,
    .closing .contact .btn-primary span br {
        display: block;
    }

    .plan .contact p,
    .closing .contact p {
        font-size: 20px;
    }

    .plan .number,
    .closing .number {
        display: grid;
        grid-template-areas:
            "office tel"
            "support tel";
        grid-template-columns: 1fr auto;
        /* 左列と右列 */
        align-items: center;
        gap: 0 8px;
    }

    .plan .number:first-of-type,
    .closing .number:first-of-type {
        margin-bottom: 10px;
    }

    .plan .number span:nth-child(1),
    .closing .number span:nth-child(1) {
        grid-area: office;
        /* 左上 */
        font-size: 18px;
    }

    .plan .number span:nth-child(2),
    .closing .number span:nth-child(2) {
        grid-area: tel;
        /* 右側（上下にまたがる） */
        font-size: 36px;
    }

    .plan .number span:nth-child(3),
    .closing .number span:nth-child(3) {
        grid-area: support;
        /* 左下 */
        font-size: 16px;
    }

    .plan .pricing .card .pricing-details .notes {
        padding-left: 6px;
        font-size: 15px;
    }

    ul li {
        padding-left: 10px;
    }

    /*
        Customer Section
    ------------------------------ */
    .customer {
        padding: 75px 0 200px;
    }

    .customer .container {
        padding: unset;
        width: min(440px, 100%);
    }

    .customer-title h2 {
        font-size: 42px;
        line-height: calc(64 / 42);
    }

    .customer-title h2 br.wide {
        display: none;
    }

    .customer-title h2 br.slim {
        display: block;
    }

    .customer-title h3 {
        font-size: 20px;
        line-height: 2;
    }

    .customer-title h3 br.slim {
        display: block;
    }

    .customer .testimonial {
        padding: 20px 20px 40px;
    }

    .customer .testimonial-header p {
        font-size: 16px;
        line-height: calc(26 / 16);
    }

    .customer .testimonial-header p br.slim {
        display: block;
    }

    .customer .question {
        font-size: 16px;
    }

    .customer .answer {
        line-height: 2;
    }

    .customer .footer {
        text-align: left;
    }

    .customer .footer br.slim_none {
        display: none;
    }

    .customer .testimonial .btn-primary {
        border-radius: 45px;
        width: min(380px, 100%);
        height: 90px;
        font-size: 24px;
        line-height: calc(30 / 24);
    }

    .customer .testimonial .btn-primary span br {
        display: block;
    }


    /*
        Flow Section
    ------------------------------ */
    .flow {
        padding: 80px 0 100px;
    }

    .flow .container {
        width: min(440px, 100%);
    }

    .flow h2 {
        font-size: 35px;
    }

    .flow h2 br.slim {
        display: block;
    }

    .flow p {
        font-size: 16px;
        line-height: calc(28 / 16);
    }

    .flow p br.slim {
        display: block;
    }

    .flow .step {
        width: 100%;
    }


    /*
        Closing Section
    ------------------------------ */
    .closing {
        padding: 60px 0 50px;
    }
}


@media (max-width: 768px) {
    .header {
        height: 70px;
    }

    /* .header .container {
        flex-direction: column;
        height: auto;
        padding: 20px;
    } */
    .company p {
        display: none;
    }

    .header .btn-primary {
        padding: 15px 25px;
        width: 180px;
        height: 46px;
        font-size: 16px;
    }

    .hero .container {
        justify-content: start;
        padding: 25px 0 0;
    }

    .hero .content {
        /* flex-direction: column;
        text-align: center;
        gap: 40px; */
        padding: 0 20px;
    }

    .hero .text {
        display: block;
        margin: unset;
        /* width: 100%; */
    }

    .hero .text h1 {
        font-size: 24px;
        text-align: center;

        margin-bottom: 10px;
    }

    .hero .text h2 {
        margin-bottom: 10px;
        /* font-size: 20px; */
        text-align: center;

        font-size: 24px;
    }

    /* .hero .moyarihatto p {
        text-align: left;
    }

    .hero .moyarihatto-text {
        font-size: 30px;
    }

    .hero .moyarihatto-quote {
        font-size: 29px;
    }

    .hero .moyarihatto-suffix {
        font-size: 24px;
    } */

    .hero .description {
        margin-top: 26px;
        text-align: left;
    }

    .hero .cta {
        margin-top: 20px;
    }

    .hero .btn-primary {
        width: 320px;
        font-size: 18px;
        padding: 19px 25px 20px;
        height: 60px;
        justify-content: flex-start;
    }

    .btn-primary::after {
        right: 20px;
        width: 11px;
        height: 17px;
    }

    .hero .speaker {
        right: 10px;
        z-index: 2;
    }

    .hero .speaker-image {
        width: 340px;
        height: 370px;
    }

    .hero .speaker-image img:first-of-type {
        display: none;
    }

    .hero .speaker-image img:nth-of-type(2) {
        display: block;
    }

    .hero .speaker-card {
        bottom: 20px;
        left: 50%;
        padding: 10px 10px 15px 15px;
        transform: translateX(-50%);
        width: 83%;
    }

    .hero .speaker-title {
        font-size: 10px;
    }

    .hero .speaker-name {
        font-size: 16px;
    }

    .hero .speaker-role {
        font-size: 10px;
    }

    .hero .speaker-description {
        font-size: 12px;
        line-height: calc(19 / 14);
    }

    /* .moyarihatto .container {
        flex-direction: column;
        gap: 40px;
    } */


    .features .cards .card .number {
        font-size: 48px;
    }

    .features .cards .card .card-body {
        flex-direction: column;
        gap: 20px;
    }

    .features .cards .card .image {
        width: 100%;
        max-width: 300px;
        height: 200px;
        margin: 0 auto;
    }

    /* .moyarihatto .line img {
        max-width: 100%;
    } */

    .recommendation .lists {
        flex-direction: column;
    }

    .anxiety .cards {
        flex-direction: column;
    }

    .profile .profile-main {
        flex-direction: column;
        gap: 40px;
    }

    .profile .profile-content h1 {
        font-size: 36px;
        line-height: 50px;
    }

    .profile .profile-header h2 {
        font-size: 32px;
    }

    .profile .profile-header h3 {
        font-size: 40px;
    }

    .profile .credentials-lists {
        flex-direction: column;
        column-gap: 20px;
    }

    .profile .youtube-video {
        flex-direction: column;
        gap: 20px;
    }

    .profile .video-thumbnail {
        width: 100%;
        max-width: 400px;
        height: 225px;
    }

    .plan .plan-lead-image {
        max-width: 100%;
    }

    /* .plan .pricing-content .card {
        padding: 20px;
    } */

    .plan .pricing-content .card h4 {
        font-size: 24px;
    }

    .plan .pricing-content .card .amount span:first-child {
        font-size: 60px;
    }

    /* .plan .pricing-content .card .amount span:nth-child(2),
    .plan .pricing-content .card .amount span:last-child {
        font-size: 24px;
    } */

    .plan .pricing .card .breakdown p {
        font-size: 20px;
    }

    .plan .pricing .card .breakdown .item span:first-child {
        font-size: 20px;
    }

    .plan .pricing .card .breakdown .item span:last-child {
        font-size: 28px;
    }

    .plan .numbers {
        gap: 15px;
    }

    /* .plan .number span:first-child {
        font-size: 20px;
    }
    
    .plan .number span:nth-child(2) {
        font-size: 36px;
    }
    
    .plan .number span:last-child {
        font-size: 24px;
    } */

    .plan .btn-primary {
        font-size: 22px;
        padding: 15px 30px;
    }

    .customer-header {
        flex-direction: column;
        gap: 20px;
    }

    .customer-image-left,
    .customer-image-right {
        order: 2;
    }

    .customer-title {
        order: 1;
    }
}

@media (max-width: 680px) {
    .hero .speaker-image {
        width: 310px;
        height: 370px;
    }
}

@media (max-width: 640px) {
    .company h1 {
        font-size: 14px;
        line-height: calc(16 / 14);
    }

    .company h1 br.slim {
        display: block;
    }

    .hero .text {
        width: 420px;
    }

    /* .hero .highlight {
        margin: 0 0 0 20px;
    }

    .hero .moyarihatto-suffix {
        display: block;
        text-align: center;
        margin-top: 6px;
    } */

    .hero .description {
        margin: 26px 0 0 37px;
    }

    .hero .description br.slim {
        display: block;
    }

    .hero .cta {
        margin: 20px 0 0 28px;
    }

    .hero .btn-primary {
        border-radius: 23px;
        width: 200px;
        height: 46px;
        font-size: 14px;
        line-height: calc(18 / 14);
    }

    .btn-primary::after {
        right: 20px;
        width: 5px;
        height: 11px;
    }

    .hero .btn-primary span br.slim {
        display: block;
    }
}

@media (max-width: 540px) {
    .hero .text {
        width: 360px;
    }

    .hero .speaker-image {
        width: 100%;
        height: 390px;
    }

    .hero .description {
        margin: 16px 0 0 25px;
    }

    .hero .cta {
        margin: 10px 0 0 10px;
    }


    .theme .theme-moyarihatto .description dl dt {
        font-size: 20px;
    }

    .theme .theme-moyarihatto .description dl dd {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 875px;
    }

    .hero .text {
        width: 100%;
    }

    .hero .text h1,
    .hero .text h2 {
        font-size: 20px;
    }

    .hero .image {
        margin-bottom: 8px;
    }

    /* .hero .text h1 {
        font-size: 28px;
    } */

    /* .hero .highlight {
        display: block;
        width: 204px;
        margin: 0 auto;
    }

    .hero .moyarihatto p {
        text-align: center;
    }

    .hero .moyarihatto-text {
        font-size: 28px;
    }

    .hero .moyarihatto-quote {
        font-size: 28px;
    }

    .hero .moyarihatto-suffix {
        font-size: 20px;
    } */

    .hero .description {
        margin: 16px auto;
        text-align: center;
    }

    .hero .cta {
        margin: 10px auto;
        width: 300px;
    }

    .hero .btn-primary {
        padding: 0;
        border-radius: 42px;
        width: min(320px, 100%);
        height: 84px;
        font-size: 20px;
        line-height: calc(28 / 20);
        justify-content: center;
    }

    .hero .speaker {
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
    }

    .hero .speaker-card {
        width: 300px;
    }

    .hero .speaker-card h3 {
        text-align: center;
    }

    .hero .speaker-title {
        font-size: 14px;
        margin-right: 5px;
    }

    .hero .speaker-name {
        font-size: 24px;
    }

    .hero .speaker-role {
        font-size: 12px;
    }

    /* .moyarihatto, */
    .recommendation,
    .anxiety,
    .features,
    .theme,
    .profile,
    .plan,
    .customer,
    .flow,
    .closing {
        padding-right: 30px;
        padding-left: 30px;
    }

    .features .materials .btn-primary,
    .plan .contact .btn-primary,
    .customer .testimonial .btn-primary,
    .closing .contact .btn-primary {
        border-radius: 42px;
        width: min(320px, 100%);
        height: 84px;
    }

    /* .moyarihatto .container {
        padding: 47px 27px;
    }

    .moyarihatto-header h3 {
        margin-bottom: 20px;
        font-size: 25px;
    }

    .moyarihatto h4 {
        font-size: 30px;
    }

    .moyarihatto .moyarihatto-content p {
        line-height: calc(30 / 16);
    } */


    /* .recommendation {
        padding-bottom: 150px;
    } */
    .recommendation h2 {
        font-size: 28px;
        line-height: calc(48 / 28);
    }

    .recommendation .lists {
        margin-bottom: 20px;
        width: 320px;
    }

    .recommendation .lists li {
        font-size: 16px;
    }

    .recommendation p {
        font-size: 22px;
        line-height: calc(36 / 22);
    }

    .recommendation .btn-primary {
        border-radius: 30px;
        width: 320px;
        height: 60px;
        font-size: 23px;
    }


    .anxiety {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .anxiety h2 {
        font-size: 24px;
    }

    .anxiety h3 {
        font-size: 40px;
        line-height: calc(50 / 40);
    }

    .anxiety .card ul {
        padding: 0 20px;
    }

    .anxiety .card li {
        font-size: 14px;
    }


    .features {
        padding-top: 40px;
        padding-bottom: 80px;
    }

    .features .features-text h2 {
        font-size: 40px;
    }

    .features .features-text h3 {
        font-size: 26px;
    }

    .features .features-text h3 .highlight {
        font-size: 38px;
    }

    .features .features-text h3 .highlight span {
        font-size: 70px;
    }

    .features .features-banner .chart {
        bottom: 30px;
    }

    .features .chart .image {
        width: 130px;
    }

    .features .cards .card {
        padding: 30px;
    }

    .features .cards .card .number {
        font-size: 42px;
    }

    .features .cards .card h4 {
        font-size: 22px;
        line-height: calc(33 / 22);
    }

    .features .cards .card .image {
        height: 100%;
        aspect-ratio: 2 / 1;
    }

    .features .cards .card p {
        font-size: 14px;
        line-height: calc(26 / 14);
    }

    .features .materials p:first-child {
        font-size: 20px;
    }

    .features .materials-image {
        margin-bottom: 20px;
    }

    .features .materials p:nth-of-type(2) {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .features .materials .btn-primary {
        padding: 0;
        border-radius: 42px;
        width: min(320px, 100%);
        height: 84px;
        font-size: 20px;
        line-height: calc(28 / 20);
    }


    .theme {
        padding-top: 60px;
        padding-bottom: 160px;
    }

    .theme h2 {
        font-size: 26px;
    }

    .theme h3 {
        font-size: 30px;
    }

    .theme .theme-examples {
        gap: 0;
    }

    .theme .badge {
        height: 50px;
        font-size: 20px;
    }

    .theme .target {
        font-size: 20px;
    }

    .theme .theme-detail {
        /* padding: 30px 0 45px 8px; */
        padding: 30px 0 0 8px;
    }

    .theme .theme-detail .label {
        width: 100px;
        height: 25px;
        font-size: 14px;
    }

    .theme .theme-detail h4 {
        font-size: 22px;
        line-height: calc(30 / 22);
    }

    .theme .theme-detail .subtitle {
        line-height: calc(26 / 18);
    }

    .theme .theme-detail .description {
        font-size: 14px;
        line-height: calc(26 / 14);
    }

    .theme .theme-moyarihatto {
        margin-bottom: 35px;
    }

    .theme .theme-moyarihatto .description dl dd {
        font-size: 14px;
    }

    .theme .footer {
        margin-top: unset;
    }

    .theme .footer h4 {
        font-size: 24px;
        line-height: calc(40 / 24);
    }


    .profile {
        padding-bottom: 60px;
    }

    .profile .container {
        padding-top: 40px;
    }

    .profile .profile-header h2 {
        font-size: 22px;
        line-height: 2;
    }

    .profile .profile-header h3 {
        font-size: 35px;
        line-height: calc(45 / 35);
        margin-bottom: 10px;
    }

    .profile .profile-header p {
        font-size: 14px;
    }

    .profile table.jisseki td h4 {
        font-size: 14px;
    }

    .profile .profile-content h1 {
        margin: 0 auto 15px;
        width: fit-content;
        font-size: 28px;
        line-height: calc(42 / 28);
    }

    .profile .profile-details .description {
        width: 100%;
        font-size: 16px;
        line-height: calc(26 / 16);
    }

    .profile .profile-image img.slim {
        width: 100%;
        height: auto;
    }

    .profile .profile-credentials {
        padding: 20px 30px;
    }

    .profile .credentials-lists ul li {
        line-height: 1.5;
    }

    .profile .credentials-lists>ul>li:not(:last-of-type) {
        margin-bottom: 8px;
    }

    .profile .credentials-lists ul li br.slim {
        display: block;
    }

    .profile .youtube-section .youtube-title {
        margin-bottom: 15px;
        height: 30px;
    }

    .profile .video-thumbnail {
        max-width: unset;
        height: auto;
    }

    .profile .youtube-info p {
        font-size: 12px;
    }

    .profile .youtube-info p br.slim {
        display: block;
    }


    .plan .plan-header h3,
    .closing .plan-header h3 {
        font-size: 45px;
    }

    .plan .speech-bubble,
    .closing .speech-bubble {
        width: min(320px, 100%);
        height: 76px;
    }

    .plan .speech-bubble p,
    .closing .speech-bubble p {
        font-size: 18px;
    }

    .plan .speech-bubble .highlight,
    .closing .speech-bubble .highlight {
        font-size: 26px;
    }

    .plan .highlight-banner>span,
    .closing .highlight-banner>span {
        font-size: 27px;
    }

    .plan .pricing-header h3 {
        font-size: 20px;
    }

    .plan .pricing-header h3 span {
        font-size: 50px;
    }

    .plan .pricing-content .card .card-header {
        padding-left: 3px;
    }

    .plan .pricing-content .card h4 {
        font-size: 18px;
    }

    .plan .pricing-content .card .amount span:first-child {
        font-size: 50px;
    }

    .plan .pricing-content .card p.other-fee {
        font-size: 14px;
        padding: 0 6px 10px;
    }

    .plan .pricing-content .card {
        padding: 24px 20px 0;
    }

    .plan .pricing {
        margin-bottom: 30px;
    }

    .plan .pricing .card .breakdown {
        margin-bottom: 12px;
    }

    .plan .pricing .card .breakdown p {
        font-size: 19px;
    }

    .plan .pricing .card .breakdown table th {
        font-size: 19px;
    }

    .plan .pricing .card .breakdown .item td span:first-of-type {
        font-size: 27px;
    }

    .plan .pricing .card .breakdown .item td span:first-of-type span,
    .plan .pricing .card .breakdown .item td span:last-of-type {
        font-size: 16px;
    }

    .plan .pricing .card .pricing-details .notes .section p,
    .plan .pricing .card .pricing-details .notes .section ul li {
        font-size: 14px;
    }

    .plan .contact .btn-primary,
    .closing .contact .btn-primary {
        border-radius: 42px;
        width: min(320px, 100%);
        height: 84px;
        font-size: 20px;
        line-height: calc(28 / 20);
    }

    .plan .contact p,
    .closing .contact p {
        font-size: 18px;
    }

    .plan .number span:nth-child(1),
    .closing .number span:nth-child(1) {
        font-size: 16px;
    }

    .plan .number span:nth-child(2),
    .closing .number span:nth-child(2) {
        font-size: 32px;
    }

    .plan .number span:nth-child(3),
    .closing .number span:nth-child(3) {
        font-size: 12px;
    }


    .customer {
        padding-top: 50px;
        padding-bottom: 175px;
    }

    .customer-title h2 {
        font-size: 32px;
        line-height: calc(50 / 32);
    }

    .customer-title h3 {
        line-height: calc(32 / 20);
    }

    .customer .testimonial-header h3 {
        font-size: 24px;
    }

    .customer .testimonial-header p {
        font-size: 18px;
        text-align: left;
    }

    .customer .question {
        font-size: 14px;
    }

    .customer .answer {
        font-size: 14px;
    }

    .customer .footer {
        font-size: 16px;
        line-height: 2;
    }

    .customer .testimonial .btn-primary {
        font-size: 20px;
        line-height: calc(28 / 20);
    }


    .flow {
        padding-top: 45px;
        padding-bottom: 70px;
    }

    .flow h2 {
        margin-bottom: 12px;
        font-size: 30px;
    }

    .flow p {
        margin-bottom: 25px;
        font-size: 14px;
        line-height: 2;
    }
}

@media (max-width: 440px) {
    .hero {
        height: 840px;
    }
}

@media (max-width: 420px) {


    /* .moyarihatto, */
    .recommendation,
    .anxiety,
    .features,
    .theme,
    .profile,
    .plan,
    .customer,
    .flow,
    .closing {
        padding-right: 20px;
        padding-left: 20px;
    }

    /* .moyarihatto .container {
        padding: 25px;
    }

    .moyarihatto h4 {
        font-size: 22px;
    }

    .moyarihatto .line {
        width: 100%;
    } */


    .recommendation h2 {
        font-size: 22px;
    }

    .recommendation p {
        font-size: 20px;
    }

    .recommendation .lists li {
        font-size: 14px;
    }


    .anxiety h3 {
        font-size: 30px;
    }


    .features .features-text h2 {
        font-size: 35px;
    }

    .features .cards .card {
        padding: 15px;
    }

    .features .cards .card .card-header {
        flex-direction: column;
    }

    .features .cards .card .number {
        font-size: 30px;
    }

    .features .cards .card h4 {
        font-size: 18px;
    }

    .features .materials p:first-child {
        font-size: 20px;
    }


    .theme h2 {
        font-size: 20px;
    }

    .theme h3 {
        font-size: 24px;
    }

    .theme .badge {
        padding: unset;
        width: 60px;
        font-size: 18px;
    }

    .theme .target {
        font-size: 18px;
        line-height: 1.2;
    }

    .theme .target span {
        display: inline-block;
    }

    .theme .footer h4 {
        font-size: 20px;
    }


    .profile .profile-header h2 {
        font-size: 20px;
    }

    .profile .profile-header h3 {
        font-size: 24px;
    }

    .profile .profile-header p {
        font-size: 15px;
    }

    .profile .profile-achievements {
        padding: 20px;
    }

    .profile .profile-achievements h3 {
        font-size: 16px;
    }

    .profile .profile-content h1 {
        font-size: 22px;
    }

    .profile .profile-credentials {
        padding: 20px;
    }

    .profile .profile-credentials h3 {
        font-size: 18px;
    }


    .plan .plan-header h3,
    .closing .plan-header h3 {
        font-size: 32px;
    }

    .plan .highlight-banner>span,
    .closing .highlight-banner>span {
        font-size: 26px;
    }

    .plan .pricing-content .card .amount span:first-child {
        font-size: 40px;
    }

    .plan .pricing-content .card .amount span:nth-child(2),
    .plan .pricing-content .card .amount span:last-child {
        font-size: 18px;
    }

    .plan .pricing .card .breakdown p {
        font-size: 16px;
        margin: 0;
    }

    .plan .pricing .card .breakdown table th {
        font-size: 16px;
    }

    .plan .pricing .card .breakdown .item td span:first-of-type {
        font-size: 24px;
    }

    .plan .contact p,
    .closing .contact p {
        font-size: 16px;
    }

    .plan .number span:nth-child(2),
    .closing .number span:nth-child(2) {
        font-size: 24px;
    }


    .customer-title h2 {
        font-size: 26px;
    }

    .customer .testimonial-header {
        margin-bottom: 20px;
    }

    .customer .testimonial-header p {
        font-size: 16px;
    }

    .customer .qa:last-child {
        padding-bottom: unset;
    }


    .flow h2 {
        font-size: 24px;
    }

    .flow p {
        text-align: left;
    }

    .flow .step h4 {
        font-size: 18px;
    }
}


/*
footer
*/
footer.normal {
    background: #444;
}
footer.normal,
footer.normal .contact ul.phone li span:nth-child(2) {
    font-family: 'Noto Serif', serif;
}
footer.normal table {
    width: unset;
}
footer.normal p,
footer.normal li,
footer.normal li span a,
footer.normal li span a:link,
footer.normal li span a:visited,
footer.normal th,
footer.normal td,
footer.normal address {
    color: #fff;
}
footer.normal .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 25px;
}
footer.normal .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
    margin-bottom: 20px;
}
/*footer.normal .contact .business_hour {}*/
footer.normal .contact ul.phone {
    display: flex;
    flex-direction: unset;
    margin-left: unset;
}
footer.normal .contact ul.phone li {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 1em;
    padding: unset;
    font-size: 1.8rem;
}
footer.normal .contact ul.phone li::before {
    content: unset;
}
footer.normal .contact ul.phone li:first-of-type {
    margin-right: 32px;
}
footer.normal .contact ul.phone li:first-of-type::after {
    content: "／";
    position: absolute;
    top: 0;
    right: -32px;
    width: 32px;
    font-size: 18px;
    text-align: center;
}
footer.normal .contact ul.phone li span,
footer.normal .contact ul.phone li span:first-child {
    font-size: 18px;
}
footer.normal table.address {
    margin-bottom: 40px;
}
footer.normal table.address th,
footer.normal table.address td {
    padding: 0 12px;
}
footer.normal table.address th {
    vertical-align: top;
    text-align: left;
}
footer.normal table.address th span {
    position: relative;
    display: block;
    padding-left: 1.5em;
}
footer.normal table.address th span::before {
    content: "■";
    position: absolute;
    top: 0;
    left: 0;
}
footer.normal address {
    font-size: 1.2rem;
    font-style: normal;
    line-height: 1;
}
footer.normal address span:last-of-type {
    position: relative;
    display: inline-block;
    margin-left: .8em;
}
footer.normal address span:last-of-type::before {
    content: "／";
    position: absolute;
    top: 0;
    left: -1em;
}
footer.normal p.policy {
    font-size: 12px;
}
footer.normal p.policy a {
    color: #fff;
}
footer.normal address {
    font-size: 12px;
    font-style: normal;
    line-height: 1;
}

@media screen and (max-width: 1024px) {
    footer.normal .contact {
        flex-direction: column;
    }
}
@media screen and (max-width: 900px) {
    /* footer.normal .contact {
        flex-direction: column;
    } */
    footer.normal table.address th,
    footer.normal table.address td {
        display: block;
        padding: unset;
    }
    footer.normal table.address td {
        padding-left: 1.5em;
    }
}
@media screen and (max-width: 767px) {
    footer.normal .contact ul.phone {
        flex-direction: column;
    }
    footer.normal .contact ul.phone ul:first-of-type::after {
        content: unset;
    }

    /* footer.normal table.address th,
    footer.normal table.address td {
        display: block;
        padding: unset;
    }
    footer.normal table.address td {
        padding-left: 1.5em;
    } */
}
@media screen and (max-width: 539px) {
    footer.normal .contact {
        align-items: center;
    }
    /* footer.normal .contact ul.phone {
        flex-direction: column;
    } */
    footer.normal .contact ul.phone li:first-of-type {
        margin-right: unset;
    }
    footer.normal .contact ul.phone li:first-of-type::after {
        content: unset;
    }

    footer.normal table.address th,
    footer.normal table.address td {
        font-size: 14px;
    }
    footer.normal table.address tr:last-of-type td span {
        display: block;
        margin-left: 7em;
    }
    
    footer.normal address {
        line-height: 1.3;
    }
    footer.normal address span:last-of-type {
        display: block;
        margin-left: 3.5em;
    }
    footer.normal address span:last-of-type::before {
        content: unset;
    }
}