@charset "utf-8";

html {
    font-size: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.7;
    color: #444;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.btn_hover {
    transition: transform 0.3s ease;
}

.btn_hover:hover {
    transform: translateY(-3px);
}


/* ---- image ---- */
img {
    max-width: 100%;
    vertical-align: bottom;
}

/* =========================
  header
========================= */
.header {
    background: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 中身の横並び */
.header_inner {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ロゴ */
.header_logo img {
    height: 89px;
    width: auto;
    display: block;
}

/* ボタン（png） */
.header_btn img {
    height: 65px;
    width: auto;
    display: block;
}


/* =========================
  header
========================= */
.header {
    background: #fff;
}

/* 横幅1100＆中央寄せ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 中身の横並び */
.header_inner {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header_btn_wrap {
    display: flex;
    gap: 16px;
}

/* ロゴ */
.header_logo img {
    height: 89px;
    width: auto;
    display: block;
}

/* ボタン（png） */
.header_btn {
    height: 65px;
    width: 390px;
    display: block;
}

.header_btn img {
    height: 100%;
    width: 100%;
   
}




/* ---bar---- */

.bar {
    background: #3F8180;
}

.bar .container {
    height: 80px;
    display: flex;
    align-items: center;
}

.bar_text {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.45;
    color: #fff;
}



/* =========================
  main
========================= */
.mv {
    background: #E4EEEB;
}

.mv_inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mv_ribbon_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    line-height: 1.4;
    width: 100%;
    text-align: left;
    padding-left: 20px;
            /* ←ここで右に寄せる */
}

.deadline {
    font-size: 24px;
    color: #E53935;
}

.mv_ribbon {
    position: absolute;
    top: 5px;
    left: 0;
    width: 350px;
}
.mv_ribbon img {
    width: 100%;
    height: auto;
    display: block;
}

.mv_title {
    padding-top: 90px;
    padding-bottom: 16px;
    line-height: 1.4;
}

.mv_title .title_big {
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 76px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #444444;
}

.mv_title .title_big.accent {
    color: #3F8180;
}

.mv_title .title_small {
    margin: 0;
    font-weight: 500;
    font-family: "Shippori Mincho", serif;
    font-size: 54px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #444444;
}

.marker {
    position: relative;
    display: inline-block;
    z-index: 0;
}

.marker::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 525px;
    height: 20px;
    background-color: #F9C74F;
    z-index: -1;
    clip-path: polygon(3% 0,
            100% 0,
            97% 100%,
            0% 100%);
}

.mv-label {
    position: relative;
    max-width: fit-content;
    text-align: center;
    padding: 5px 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.mv-label::before,
.mv-label::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #444;
}

.mv-label::before {
    top: 0;
}

.mv-label::after {
    bottom: 0;
}

.flag_icon {
    width: 40px;
    height: auto;
}

.label_text {
    margin: 0 12px;
    font-size: 30px;
    color: #444;
}

.mv_3icons {
    max-width: 669px;
    width: 100%;
    height: auto;
}


.mv_right {
    margin-right: -100px;
}

.mv_visual {
    max-width: 548px;
    width: 100%;
    height: auto;
}


.flag_icon {
    width: 24px;
}

.mv_title {
    padding-top: 80px;
}
                

.flag_icon {
    width: 24px;
}
.mv-label {
    margin: 0 auto;
}



/* ------cta----- */

.cta {
    background: #318880;
    padding: 60px 0;
}

.cta_container {
    max-width: 1000px;
    margin: 0 auto;
}

.cta_inner {
    text-align: center;
}

.cta_btn_wrap {
    display: flex;
    gap: 64px;
    /* ヘッダーより広め推奨 */
    justify-content: center;
    margin-bottom: 64px;
    align-items: center;
}

.cta_btn {
    width: 450px;
    height: 80px;
    display: block;
}

.cta_btn img {
    width: 100%;
    height: 100%;
}

.cta_box {
    background: #fff;
    width: 1000px;
    height: auto;
    margin: 0 auto;
    padding: 0 124px 40px;
    /* 左右124ずつ */
    box-sizing: border-box;
}

/* 上段：ロゴ + タイトル */
.cta_boxHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 指示どおり */
    padding-top: 50px;
    /* 線まで50下がる前提で、まず上の空気感 */
}

.cta_boxLogo {
    height: 89px;
    width: auto;
    display: block;
}

/* タイトル */
.cta_boxTitle {
    font-weight: 500;
    font-size: 32px;
    margin: 0;
    color: #3F8180;
}

/* 50px下の横線（幅900 / 1px） */
.cta_boxLine {
    width: 100%;
    max-width: 900px;
    height: 1px;
    background: #444;
    margin: 37px auto 19px;
}

/* 位置の基準（badgeをかぶせるため） */
.cta_detailWrap {
    position: relative;
    margin: 0 auto;
    /* 白ボックス内で中央 */
}

/* オレンジのラベル（上に13pxはみ出す） */
.cta_badge {
    position: absolute;
    top: -13px;
    left: 0px;
    height: 34px;
    background: #FED27B;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0;
    font-size: 22px;
    z-index: 1;
}

/* グレーの箱 */
.cta_detailBox {
    position: relative;
    background: #F6F6F6;
    max-width: 900px;
    width: 100%;
    height: 139px;
    /* 固定でOKなら */
    margin: 40px auto 0;
    padding: 38px 36px 20px;
    /* badge分、上は少し多めに */
    box-sizing: border-box;
    /* 角丸必要なら */
}

.cta_checkList {
    list-style: none;
    display: flex;
    flex-direction: column;
    /* ← 下の8px */
}

.cta_checkList li {
    display: flex;
    align-items: center;
    /* ← 縦ズレ防止（超重要） */
    gap: 12px;
}

.cta_checkList img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    /* ← アイコン潰れ防止 */
}

.cta_checkList span {
    font-size: 22px;
    font-weight: 600;
}

.cta_detailImg {
    position: absolute;
    right: 0px;
    bottom: 0px;
    /* 右から36px */
    transform: translateY(-1px);
    /* 縦中央 */
    width: 188px;
    height: auto;
}
.video_area {
    max-width: 900px;
    margin: 80px auto;
}




/* -----problem---- */
.problem_section {
    position: relative;
    background: #f2f2f2;
    padding: 148px 0 289px;
    /* 上148 / 下289（吹き出しの位置調整） */
}

.problem_fukidashi {
    width: 100%;
    max-width: 1005px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.problem_fukidashi_wrap {
    position: relative;
    display: block;
}

.problem_section .section_title {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
    font-size: 32px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: #444444;
}

.problem_wrap {
    position: relative;
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.problem_item {
    width: 48%;
    max-width: 550px;
    min-height: 140px;
    background: #fff;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 25px 15px;
    border-radius: 10px;
}

.problem_icon {
    width: 33px;
    height: 33px;
    flex-shrink: 0;

}

.problem_text {
    font-size: 20px;
    line-height: 1.7;
    color: #333;
}

.program_item--6 {
    position: relative;
}

.problem_image {
    max-width: 455px;
    height: auto;
    position: absolute;
    left: 100%;
    top: 100%;
    transform: translate(-100%, -13%);
    z-index: 2;
}


.problem_section::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 10vw;
    /* 高さは後で微調整 */
    background: #f2f2f2;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.triangle-group {
    position: absolute;
    left: 50%;
    bottom: -199px;
    /* ← 微調整ポイント */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    z-index: 3;
}

.triangle {
    width: 67px;
    height: 27px;
    background: #E8805A;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}



/* ----5つの強み----- */
.values_section {
    background: #D5EAE4;
    padding: 350px 0 150px;
}

.title-main {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.06em;
    color: #3F8180;
}

.title-sub {
    margin-top: 37px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.06em;
    color: #444444;
}

.title-number {
    font-size: 48px;
}



.section_title_mark {
    width: 100%;
    max-width: 1005px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-top: 37px;
}

.section_title {
    text-align: center;
    margin-bottom: 75px;
    line-height: 1.45;
}

.value_item {
    max-width: 1000px;
    height: auto;
    position: relative;
    background: #fff;
    padding: 30px;
    margin: 0 auto;

}

.value_item:not(:last-child) {
    margin-bottom: 86px;
}

.value_content {
    display: flex;
    align-items: center;
    gap: 25px;
}

.value_text {
    width: 50%;
    max-width: 450px;
}

.value_image {
    width: 50%;
}

.value_number {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    font-size: 64px;
    color: #D86A41;
    font-family: "DIN 2014", sans-serif;
    font-weight: 600;
}

.value_title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 17px;
}

.value_subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.55;
}

.value_image img {
    max-width: 465px;
    height: auto;
    display: block;
}

.term {
    border-bottom: 1px solid #444;
    padding-bottom: 2px;
    /* 好きな色に */
}

.note {
    font-size: 0.7em;
}


/* ----teacher----- */
.section {
    padding: 150px 0;
}

.inner {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.teacher_section .title-main {
    color: #444
}

.teacher_image img {
    display: block;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    margin: 0 auto;
}

.teacher_text {
    text-align: left;
    margin-top: 70px;
}

.teacher_name {
    font-weight: 500;
    font-size: 36px;
    line-height: 1.6;
    letter-spacing: 0;
    margin-bottom: 40px;
}

.teacher_position {
    font-weight: 400;
    font-size: 30px;
    line-height: 1.6;
    letter-spacing: 0;
    margin-bottom: 30px;
}

.teacher_profile {
    font-weight: 400;
    font-size: 22px;
    line-height: 1.7;
    letter-spacing: 0;
    margin-bottom: 24px;
}

.marker-highlight {
    font-weight: bold;
    position: relative;
    display: inline-block;
}

.marker-highlight::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    /* 文字との距離調整 */
    width: 100%;
    height: 14px;
    background: #D5EAE4;
    z-index: -1;
}

.bold-text {
    font-weight: bold;
}

.teacher_qualification_title {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.7;
    margin-top: 50px;
    margin-bottom: 17px;
}

.teacher_site {
    margin-top: 40px;
    font-size: 20px;
    text-align: left;
}

.teacher_site a {
    text-decoration: underline;
    color: #3F8180;
}


/* カテゴリー */
.teacher_category {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
}

/* リスト */
.teacher_list {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    padding-left: 1.2em;
    /* リストの余白 */
}

.teacher_list {
    list-style: disc;
    padding-left: 1.2em;
}

.second {
    margin-top: 60px;
}

/* ----class---- */

.class_section .title-main {
    color: #444444;
}

.class_item {
    margin-top: 90px;
}

.class_item img {
    max-width: 737px;
    width: 100%;
    height: auto;
    display: block;
}

/* 左寄せ */
.class_item_left .class_img img {
    margin-right: auto;
}

/* 右寄せ */
.class_item.right .class_img img {
    margin-left: auto;
}

.class_section {
    background-image: url("../images/bg_grid.png");
    background-repeat: repeat;
    background-position: top left;
}

.class_note {
    margin-top: 85px;
    text-align: right;
}
.class_note span {
    display: inline-block;
    border-bottom: 1px solid #444;
    padding-bottom: 4px;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #444;
}

/* ---price---- */

.price_section .title-main {
    color: #444;
}

.price_box {
    max-width: 1000px;
    margin: 85px auto 0;
    padding: 16px;
    /* 外枠と点線の間 */
    background-color: #E9EFED;
    border: 1px solid #ccc;
}

/* 内側点線 */
.price_inner {
    border: 1px dashed #444;
    padding: 48px 0;
    text-align: center;
}

.price_term,
.price_fee {
    max-width: 600px;
    margin: 0 auto;
}

/* 上の説明テキスト */
.price_term {
    font-size: 24px;
    font-weight: 500;
    color: #444;
    line-height: 1.45;
    letter-spacing: 0.06em;
}

.num_large {
    font-size: 32px;
    font-weight: 500;
    vertical-align: -2px;
}

.price_fee {
    margin-top: 22px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.45;
    color: #444;
    letter-spacing: 0.06em;
    position: relative;
        display: inline-block;
}

.price_label {
    color: #E8805A;
}

.price_amount {
    font-size: 48px;
    font-weight: 500;
    color: #E8805A;
    vertical-align: baseline;
}

.yen {
    font-size: 32px;
}

.price_tax {
    font-size: 24px;
}
/* --- 入学金込み（上の小さなテキスト） --- */
.price_note {
    position: absolute;
    right: 0;
    bottom: -25px;
    font-size: 22px;
    font-weight: 500;
    color: #444;
    letter-spacing: 0.08em;
}

/* --- 受講料と金額を横並び --- */
.price_main {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
}

/* 受講料ラベル調整 */
.price_label {
    font-size: 28px;
    font-weight: 500;
    vertical-align: baseline;
}

/* 税込を下に */
.price_tax {
    display: block;
    font-size: 20px;
    color: #444;
}

/* ----voice---- */

.voice_section .section_title {
    margin-bottom: 100px;
}

.voice_section {
    background-color: #D5EAE4;
}


.voice_section .title-main {
    color: #444;
}

.voice_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 83px;
}

.voice_item {
    max-width: 460px;
    width: 100%;
    background: #fff;
    padding: 18px 0 56px;
    border-radius: 25px;
}

.voice_inner {
    max-width: 370px;
    margin: 0 auto;
}

/* 上部 */
.voice_head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.voice_age {
    font-size: 20px;
    font-weight: 700;
}

.voice_head img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

/* 線 */
.voice_line {
    width: 100%;
    height: 1px;
    background-color: #444;
    margin-top: 10px;
}

/* タイトル */
.voice_title {
    margin-top: 29px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.06em;
    text-align: left;
}

/* 本文 */
.voice_text {
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: 0.06em;
    text-align: left;
}

/* ---cta--- */

.cta_underbar {
    padding: 110px 0 60px;
}

.cta_underbar .cta_inner {
    display: flex;
    gap: 64px;
    justify-content: center;
    align-items: center;
}
.cta_under_btn {
    width: 450px;
    height: 80px;
    display: block;
}

.cta_under_btn img {
    width: 100%;
    height: 100%;
}



/* ---footer--- */
.footer {
    background-color: #8EC4BD;
    padding: 34px 0 18px;
}

.footer_inner {
    max-width: 1200px;
    margin: 0 auto;
}
.footer_logo {
    margin-bottom: 39px;
}
.footer_logo img {
    max-width: 282px;
    width: 100%;
    height: auto;
    display: block;
}
.footer_copy {
    font-size: 14px;
    font-weight: bold;
    color: #E9EFED;
    text-align: center;
    /* 指定色（確認してください） */
}