@charset "UTF-8";
/* 羽ばたく留学 — style.css（reset.css=destyle の後に読み込み／BP 768px） */

/* ============================================================
   共通（サイト全体で使用）
   ============================================================ */

/* ===== フォント ===== */
@font-face {
    font-family: "en";
    font-weight: 200;
    src: url(fonts/Outfit-ExtraLight.woff2) format("woff2");
    font-display: swap;
}

/* @font-face {
    font-family: "en";
    font-weight: 400;
    src: url(fonts/Outfit-Light.woff2) format("woff2");
    font-display: swap;
} */

@font-face {
    font-family: "en";
    font-weight: 500;
    src: url(fonts/Outfit-Regular.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "en";
    font-weight: 700;
    src: url(fonts/Outfit-Regular.woff2) format("woff2");
    font-display: swap;
}

/* ===== トークン ===== */
:root {
    /* 色 */
    --color-navy: #172B5C;
    --color-blue: #315BC2;
    --color-aqua: #2FA4B7;
    --color-aqua-d: #1A7E8F;
    --color-gray: #57617B;
    --color-gray-l: #E7EBF6;
    --color-bg-aqua: #D7EFF3;
    --color-dot: #F9FAFE;
    --color-white: #fff;
    --color-alert: #C0392B;
    --color-txt: var(--color-navy);

    /* 書体・行間・ウェイト */
    --font: "en", "Noto Sans JP", "Noto Sans Japanese", "Noto Sans CJK JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Segoe UI", system-ui, sans-serif;
    --line-h-10: 1;
    --line-h-13: 1.3;
    --line-h-15: 1.5;
    --line-h-18: 1.8;
    --line-h-20: 2;
    --thin: 200;
    --normal: 500;
    --bold: 700;

    /* 余白・幅・縦リズム */
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --inner: min(100%, 1200px);
    --inner-narrow: min(100%, 800px);
    --header: 80px;
    --header-h: calc(48px + 1em + var(--header));
    --unit-s: 60px;
    --unit-m: 80px;
    --unit-l: 100px;
    --unit-xl: 120px;

    /* 角丸・演出 */
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 20px;
    --radius-xl: 40px;
    --transition: 0.3s ease-in-out;
    --shadow: 0 0 16px rgba(0, 0, 0, 0.04);
}

@media screen and (max-width: 768px) {
    :root {
        --space-8: 6px;
        --space-16: 12px;
        --space-24: 16px;
        --space-32: 20px;
        --space-40: 26px;
        --space-48: 32px;
        --unit-s: 32px;
        --unit-m: 40px;
        --unit-l: 60px;
        --unit-xl: 80px;
        --radius-l: 14px;
        --radius-xl: 20px;
        --header: 60px;
        --header-h: calc(16px + var(--header));
    }
}

/* 英語版：行間を詰める（Latin は 1.8-2.0 だと間延びし可読性が下がるため。JAは据え置き） */
html[lang^="en"] {
    --line-h-18: 1.6;
    --line-h-20: 1.7;
}

/* ===== フルイドタイポ（各要素の --size-min / --size-max を線形補間） ===== */
*,
::before,
::after {
    --size-root: 16;
    --clamp-slope: calc((var(--size-max) - var(--size-min)) / (var(--viewport-max) - var(--viewport-min)));
    --clamp-intercept: calc(var(--size-min) - (var(--clamp-slope) * var(--viewport-min)));
    --clamp-value: calc(var(--clamp-intercept) * (1rem / var(--size-root)) + (var(--clamp-slope) * 100vw));
    --clamp: clamp(calc(var(--size-min) * (1rem / var(--size-root))),
            var(--clamp-value),
            calc(var(--size-max) * (1rem / var(--size-root))));
    font-size: var(--clamp);
}

/* ===== ベース ===== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header);
    color-scheme: light;
}

body {
    --color: var(--color-txt);
    font-family: var(--font);
    font-weight: var(--normal);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow-x: clip;
    color: var(--color);
    background: var(--color-white);
    line-height: var(--line-h-18);
    -webkit-font-smoothing: antialiased;
    --size-min: 16;
    --size-max: 16;
    --viewport-min: 375;
    --viewport-max: 1333;
}

footer {
    margin-top: auto;
}

h1,
h2,
h3,
h4,
h5 {
    line-height: var(--line-h-13);
    font-weight: var(--bold);
    word-break: break-word;
}

address {
    font-style: normal;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

:where(a, a *) {
    text-decoration: none;
}

:where(a:focus-visible),
:where(button:focus-visible) {
    outline-color: var(--color);
    outline-offset: 2px;
}

::selection {
    background: var(--color-aqua);
    color: var(--color-white);
}

/* 電話番号：PCはタップ無効 */
@media screen and (min-width: 768.1px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== レイアウト ===== */
.wrap {
    width: 100%;
    padding: var(--unit-xl) 5%;
}

.inner {
    width: var(--inner);
    margin-inline: auto;
}

.inner_narrow {
    width: var(--inner-narrow);
    margin-inline: auto;
}

@media screen and (max-width: 768px) {
    .wrap {
        padding: var(--unit-xl) 3%;
    }
}

@media screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 768.1px) {
    .sp {
        display: none !important;
    }
}

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

/* ===== 出現アニメ（html.js 時のみ隠し、JSの IntersectionObserver が .is_shown 付与→完了後にクラス除去） ===== */
html.js :where(.fade_up, .fade_in, .zoom_in, .blur_in) {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out, filter 1s ease-out;
    transition-delay: var(--delay, 0s);
}

html.js .fade_up {
    transform: translateY(20px);
}

html.js .zoom_in {
    transform: scale(0.96);
}

html.js .blur_in {
    filter: blur(8px);
}

html.js :where(.fade_up, .fade_in, .zoom_in, .blur_in).is_shown {
    opacity: 1;
    filter: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js :where(.fade_up, .fade_in, .zoom_in, .blur_in) {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* ===== ユーティリティ ===== */
.dib {
    display: inline-block;
}

.db {
    display: block;
}

.dc {
    display: contents;
}

.wbr {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

@media screen and (min-width: 768.1px) {
    .wbr_pc {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

@media screen and (max-width: 768px) {
    .wbr_sp {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

.flex {
    display: flex;
}

.flex_col {
    display: flex;
    flex-direction: column;
}

.flex_wrap {
    flex-wrap: wrap;
}

.grow {
    flex: 1;
}

.items_start {
    align-items: flex-start;
}

.items_center {
    align-items: center;
}

.items_end {
    align-items: flex-end;
}

.items_stretch {
    align-items: stretch;
}

.justify_center {
    justify-content: center;
}

.justify_between {
    justify-content: space-between;
}

.justify_end {
    justify-content: flex-end;
}

.gap_8 {
    gap: var(--space-8);
}

.gap_4-24 {
    gap: calc(var(--space-8) * .5) var(--space-24);
}

.gap_16 {
    gap: var(--space-16);
}

.gap_24 {
    gap: var(--space-24);
}


.gap_32 {
    gap: var(--space-32);
}

.gap_40 {
    gap: var(--space-40);
}

.gap_48 {
    gap: 5% var(--space-48);
}

:where(.grid2) {
    display: grid;
    gap: 5% var(--space-32);
}

@media screen and (min-width: 768.1px) {
    .grid2 {
        grid-template-columns: 1fr 1fr;
    }

    .flex_pc {
        display: flex;
    }
}

.bold {
    font-weight: var(--bold);
}

.thin {
    font-weight: var(--thin);
}

.normal {
    font-weight: var(--normal);
}

.strong {
    font-size: 1.2em;
    font-weight: var(--bold);
}

.font_reduction {
    font-size: 0.8em;
}

.font_12 {
    --size-min: 12;
    --size-max: 12;
}

.font_14 {
    --size-min: 14;
    --size-max: 14;
}

.font_16 {
    --size-min: 16;
    --size-max: 16;
}

.font_18 {
    --size-min: 16;
    --size-max: 18;
}

.font_20 {
    --size-min: 18;
    --size-max: 20;
}

.font_24 {
    --size-min: 20;
    --size-max: 24;
}

.font_32 {
    --size-min: 20;
    --size-max: 32;
}

.font_40 {
    --size-min: 24;
    --size-max: 40;
}

.line-h_10 {
    line-height: var(--line-h-10);
}

.line-h_13 {
    line-height: var(--line-h-13);
}

.line-h_15 {
    line-height: var(--line-h-15);
}

.line-h_18 {
    line-height: var(--line-h-18);
}

.line-h_20 {
    line-height: var(--line-h-20);
}

.letter_l {
    letter-spacing: 0.03em;
}

.tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}

.tac_cont {
    text-align: center;
    width: fit-content;
    margin-inline: auto;
}

@media screen and (min-width: 768.1px) {
    .tac_pc {
        text-align: center;
    }

    .tar_pc {
        text-align: right;
    }
}

@media screen and (max-width: 768px) {
    .tac_sp {
        text-align: center;
    }
}

.color_navy {
    color: var(--color-navy);
}

.color_blue {
    color: var(--color-blue);
}

.color_aqua {
    color: var(--color-aqua);
}

.color_aqua-d {
    color: var(--color-aqua-d);
}

.color_gray {
    color: var(--color-gray);
}

.color_white {
    color: var(--color-white);
}

/* 地色（--color-bg / --color-txt を切替。文字色も追従） */
:where([class*=bg_]) {
    background-color: var(--color-bg);
}

:where(.bg_white) {
    --color-bg: var(--color-white);
    --color-txt: var(--color-navy);
}

:where(.bg_gray) {
    --color-bg: var(--color-gray-l);
    --color-txt: var(--color-navy);
}

:where(.bg_aqua) {
    --color-bg: var(--color-bg-aqua);
    --color-txt: var(--color-navy);
}

:where(.bg_navy, .bg_map) {
    --color-txt: var(--color-white);
    --color-bg: var(--color-navy);
}

:where(.bg_white, .bg_gray, .bg_aqua, .bg_navy, .bg_map) {
    color: var(--color-txt);
}

.bg_dot,
.bg_dot+.cta {
    --color-bg: var(--color-dot);
    --dot-size: 1.5px;
    --dot-gap: 10px;
    background-image: radial-gradient(var(--color-white) var(--dot-size), transparent var(--dot-size));
    background-color: var(--color-dot);
    background-size: var(--dot-gap) var(--dot-gap);
    background-position: 0 0;
}

.bg_map {
    background: var(--color-navy) url(img/bg_earth-map2.png) center no-repeat;
    background-size: cover;
}


.bg_map_w {
    --color-bg: var(--color-white);
    background: var(--color-white) url(img/bg_earth-map.png) center / cover no-repeat;
    overflow: inherit;
}

.bg_circle {
    position: relative;
    overflow: inherit;
}

.bg_circle::before {
    content: "";
    position: absolute;
    bottom: -100px;
    right: max(-10vw, -80px);
    width: clamp(300px, 60vw, 100%);
    height: min(60vw, 240px);
    background: url(img/bg_circle-noise.jpg) center no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: var(--space-16);
    mix-blend-mode: multiply;
}

.wrap_circle {
    position: relative;
    overflow: hidden;
}

.wrap_circle::before,
.wrap_circle::after {
    content: "";
    position: absolute;
    width: 60vw;
    height: calc(var(--unit-l) * 4);
    background: url(img/bg_circle-noise.jpg) center no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: var(--space-16);
    mix-blend-mode: multiply;
    opacity: .5;
}

.wrap_circle::before {
    bottom: calc(var(--unit-l) * -2);
    left: -20vw;
    transform: scale(1, -1);
}

.wrap_circle::after {
    top: calc(var(--unit-l) * -2);
    right: -20vw;
}

@media screen and (max-width: 768px) {
    .bg_map {
        background: var(--color-navy) url(img/bg_earth-map2.png) center top 60px no-repeat;
        background-size: contain;
    }

    .bg_circle::before {
        bottom: -60px;
        width: 80%;
    }

    .wrap_circle::before,
    .wrap_circle::after {
        width: 100vw;
    }
}

.m-inline_auto {
    margin-inline: auto;
}

.m-top_05 {
    margin-top: .5em;
}

.m-top_1 {
    margin-top: 1em;
}

.m-top_2 {
    margin-top: 2em;
}

.m-top_40 {
    margin-top: var(--space-40);
}

.m-top_s {
    margin-top: var(--unit-s);
}

.m-top_m {
    margin-top: var(--unit-m);
}

.m-top_l {
    margin-top: var(--unit-l);
}

.m-top_xl {
    margin-top: var(--unit-xl);
}

.m-btm_05 {
    margin-bottom: .5em;
}

.m-btm_1 {
    margin-bottom: 1em;
}

.m-btm_2 {
    margin-bottom: 2em;
}

.m-btm_40 {
    margin-bottom: var(--space-40);
}

.m-btm_s {
    margin-bottom: var(--unit-s);
}

.m-btm_m {
    margin-bottom: var(--unit-m);
}

.m-btm_l {
    margin-bottom: var(--unit-l);
}

.m-btm_xl {
    margin-bottom: var(--unit-xl);
}

.p-top_s {
    padding-top: var(--unit-s);
}

.p-top_m {
    padding-top: var(--unit-m);
}

.p-top_l {
    padding-top: var(--unit-l);
}

.p-top_xl {
    padding-top: var(--unit-xl);
}

.p-top_0 {
    padding-top: 0;
}

.p-btm_0 {
    padding-bottom: 0;
}

.p-btm_s {
    padding-bottom: var(--unit-s);
}

.p-btm_m {
    padding-bottom: var(--unit-m);
}

.p-btm_l {
    padding-bottom: var(--unit-l);
}

.p-btm_xl {
    padding-bottom: var(--unit-xl);
}

.img_cover,
.img_contain,
.img_fill {
    position: relative;
    overflow: hidden;
}

.img_cover img,
.img_cover video {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.img_contain img {
    position: absolute;
    object-fit: contain;
    height: 100%;
}

.img_fill img {
    position: absolute;
    object-fit: fill;
    width: 100%;
    height: 100%;
}

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

    .img_cover,
    .img_contain,
    .img_fill {
        aspect-ratio: 5/3;
    }
}

.radius_xs {
    border-radius: var(--radius-xs);
}

.radius_s {
    border-radius: var(--radius-s);
}

.radius_m {
    border-radius: var(--radius-m);
}

.radius_l {
    border-radius: var(--radius-l);
}

/* ===== ボタン ===== */
.btn_main,
.post_body .wp-block-button__link {
    --size-min: 16;
    --size-max: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    min-width: min(297px, 100%);
    max-width: 100%;
    padding: .5em .5em .5em 1.5em;
    color: var(--color-white);
    background: var(--color-blue);
    /* 同色ボーダー常設＝hover時のアウトライン化でシフトしない */
    border: 2px solid var(--color-blue);
    border-radius: 1000px;
    line-height: 1;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
    letter-spacing: 0.05em;
}

.btn_main:not(:has(.btn_ico)),
.post_body .wp-block-button__link {
    min-width: auto;
    padding: .5em 1em;
    --size-max: 16;
}

.ico {
    height: 1em;
    width: auto;
    transition: filter var(--transition);
}

.btn_ico {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15em 1em;
    background: var(--color-white);
    border-radius: 1000px;
    transition: background-color var(--transition);
}

@media (any-hover: hover) {
    .btn_main:hover,
    .post_body .wp-block-button__link:hover {
        background: transparent;
        color: var(--color-blue);
    }

    .btn_main:hover .btn_ico {
        background: var(--color-blue);
    }

    .btn_main:hover .ico {
        filter: brightness(0) invert(1);
    }
}

/* 暗い地 / .btn_white で白ピルに反転 */
:where(.bg_navy, .bg_map) .btn_main,
.btn_main.btn_white {
    background: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);
}

:where(.bg_navy, .bg_map) .btn_ico,
.btn_white .btn_ico {
    background: var(--color-blue);
}

.btn_min {
    display: flex;
    align-items: center;
    gap: 5px;
    --size-min: 16;
    --size-max: 16;
    font-weight: var(--normal);
    letter-spacing: 0.1em;
    color: var(--color-blue);
    width: fit-content;
}

.btn_min .btn_ico {
    padding-inline: .5em;
    background: var(--color-blue);
}

.btn_min .ico {
    height: .9em;
}

.btn_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.3em;
    height: 1.3em;
    background: var(--color-blue);
    border-radius: 50%;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .btn_min {
        background-image: linear-gradient(97deg, #51B7C7 35%, var(--color-blue));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@media (any-hover: hover) {

    :where(.bg_navy, .bg_map) .btn_main:hover,
    .btn_main.btn_white:hover,
    .cta_card:hover .btn_main {
        background: transparent;
        color: var(--color-white);
        border-color: var(--color-white);
    }

    :where(.bg_navy, .bg_map) .btn_main:hover .btn_ico,
    .btn_main.btn_white:hover .btn_ico,
    .cta_card:hover .btn_main .btn_ico {
        background: var(--color-white);
    }

    :where(.bg_navy, .bg_map) .btn_main:hover .ico,
    .btn_main.btn_white:hover .ico,
    .cta_card:hover .btn_main .ico {
        filter: brightness(0);
    }
}

@media screen and (max-width: 768px) {
    .btn_main {
        margin-inline: auto;
    }
}

/* ===== セクション見出し（アイコン＋和文＋大型英字。英字色は color 継承） ===== */
.sec_head {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    font-weight: var(--normal);
}

.sec_label {
    display: flex;
    align-items: center;
    gap: 4px;
    --size-min: 14;
    --size-max: 18;
    line-height: 1.6;
}

.sec_label img {
    width: 24px;
    height: 24px;
}

.sec_en,
.sec_en * {
    font-size: clamp(32px, 10vw, 60px);
    font-weight: var(--thin);
    letter-spacing: 0.02em;
    line-height: 1;
}

/* 外周だけを描く（SVG feMorphology で外側リング生成）。内部は透過＝背景が見える。
   color はフォールバック兼フィルタ入力（塗り自体は出力されない） */
.initial {
    color: var(--color-aqua-d);
    font-weight: var(--bold);
    filter: url(#outline-aqua);
}

.bg_map .initial {
    color: var(--color-txt);
    filter: url(#outline-white);
}

@media screen and (min-width:768.1px) {
    .sec_head+.tar_pc.font_14 {
        margin-left: auto;
    }
}

/* 小見出し（縦バー＋和名＋英名。国名など繰り返し使用） */
.min_head {
    display: flex;
    align-items: flex-end;
    gap: .2em 0;
    font-weight: var(--normal);
    line-height: 1;
    flex-wrap: wrap;
}

.min_head_ttl {
    --size-min: 20;
    --size-max: 24;
    color: var(--color-navy);
}

.bar_v+.min_head_ttl {
    margin-left: .5em;
}

.min_head_en {
    --size-min: 16;
    --size-max: 16;
    letter-spacing: 0.03em;
    color: var(--color-aqua-d);
    margin-left: .8em;
}

/* アクセントバー（横＝ラベル用 / 縦＝小見出し用）・区切り線 */
.bar {
    flex: none;
    width: .8em;
    height: .2em;
    border-radius: 6px;
    background: var(--color-blue);
}

.bar_v {
    flex: none;
    width: .2em;
    align-self: stretch;
    border-radius: 2px;
    background: var(--color-blue);
}

.line {
    width: 100%;
    height: 1px;
    border: 0;
    background: var(--color-gray-l);
}

/* 箇条書き（本文中のドットリスト） */
.list_dot {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.list_dot>li {
    position: relative;
    padding-left: 1.3em;
}

.list_dot>li::before {
    content: "";
    position: absolute;
    top: 1em;
    left: .35em;
    width: .35em;
    height: .35em;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-blue);
}

/* 下線ユーティリティ */
.under-line {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* ホバー下線（下中心から左右に広がる幅100%・高さ1px） */
.under-line_hover,
.news_item {
    position: relative;
    width: fit-content;
    height: fit-content;
}

.under-line_hover::after,
.news_item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.news_item::after {
    background: var(--color-blue);
}

@media (any-hover: hover) {

    .under-line_hover:hover::after,
    .news_item:hover::after {
        transform: scaleX(1);
    }
}

/* ===== カード（.cards=繰り返しgrid / .card=subgridで各段を揃える） ===== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: var(--space-24);
}

.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 0;
    width: 100%;
    max-width: 450px;
    margin-inline: auto;
    background: var(--color-white);
    color: var(--color-navy);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}

@media (any-hover: hover) {
    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    }

    a:hover .btn_ico {
        background: var(--color-aqua)
    }
}

.card_img {
    grid-row: 1;
    aspect-ratio: 500 / 295;
}

.card_body {
    grid-row: 2 / span 3;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--space-16);
    padding: var(--space-24) 20px;
}

.card_head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card_name_ja {
    --size-min: 12;
    --size-max: 12;
    line-height: 1.6;
    color: var(--color-gray);
}

.card_name_en {
    --size-min: 20;
    --size-max: 24;
    font-weight: var(--normal);
    line-height: 1.2;
    color: var(--color-blue);
}

.card_loc {
    --size-min: 14;
    --size-max: 14;
    line-height: 1.6;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) 4px;
    /* subgridでセルが高くなってもピルを伸ばさず上詰め */
    align-items: center;
    align-content: flex-start;
}

.tag {
    padding: 4px 12px;
    background: var(--color-bg-aqua);
    color: var(--color-navy);
    border-radius: 30px;
    --size-min: 12;
    --size-max: 12;
    line-height: 1.3;
    white-space: nowrap;
    text-align: center;
}

.tag_dot {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .4em 1em;
    background: var(--color-white);
    border: 1px solid var(--color-gray-l);
    border-radius: 50px;
    --size-min: 14;
}

.tag_dot::before {
    content: "";
    flex: none;
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: var(--color-aqua);
}

/* ===== お知らせリスト（news・共通） ===== */
.news_item {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding-block: var(--space-24);
    border-bottom: 1px solid var(--color-gray-l);
    color: var(--color-navy);
}

.news_meta {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.news_date {
    --size-min: 16;
    --size-max: 16;
    color: var(--color-gray);
}

.news_ttl {
    flex: 1;
}

.news_item .btn_arrow {
    flex: none;
}

@media (any-hover: hover) {
    .news_item .btn_arrow {
        transition: background-color var(--transition);
    }

    .news_item:hover .btn_arrow {
        background: var(--color-aqua);
    }
}

/* SP：日付＋タグを1段目、見出しを2段目に。矢印は右端で項目全体の縦中央 */
@media screen and (max-width:768px) {
    .news_item {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-8);
        padding-right: 36px;
        width: 100%;
    }

    .news_item .btn_arrow {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* PC：日付・カテゴリ・見出しの頭を subgrid で揃える */
@media screen and (min-width:768.1px) {
    .news {
        display: grid;
        grid-template-columns: max-content max-content 1fr auto;
        column-gap: var(--space-16);
    }

    .news>li {
        display: contents;
    }

    .news_item {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
    }

    .news_meta {
        display: contents;
    }
}

/* ===== お知らせ本文タイポグラフィ（.post_body＝the_content 内） ===== */
/* ブロック間の縦リズム（段落間） */
.post_body> :first-child {
    margin-top: 0;
}

.post_body>*+* {
    margin-top: 1.5em;
}

/* 見出しの前は広め・見出し直後は詰める */
.post_body>*+ :where(h2, h3, h4) {
    margin-top: 2.2em;
}

.post_body> :where(h2, h3, h4)+* {
    margin-top: .8em;
}

/* 見出し */
.post_body :where(h3, h4) {
    font-weight: var(--normal);
}

.post_body h2 {
    --size-min: 20;
    --size-max: 26;
    padding-bottom: .4em;
    border-bottom: 2px solid var(--color-gray-l);
}

.post_body h3 {
    --size-min: 17;
    --size-max: 20;
    padding-left: .6em;
    border-left: 4px solid var(--color-blue);
}

.post_body h4 {
    --size-min: 16;
    --size-max: 18;
    color: var(--color-blue);
}

/* リスト（ul＝中黒 / ol＝番号） */
.post_body :where(ul, ol) {
    padding-left: 1.6em;
}

.post_body ul {
    list-style: disc;
}

.post_body ul ul {
    list-style: circle;
}

.post_body ol {
    list-style: decimal;
}

.post_body li::marker {
    color: var(--color-blue);
}

.post_body li> :where(ul, ol) {
    margin-top: .5em;
}

/* リンク・強調・区切り・画像（ボタン btn_main/btn_min/ブロックボタン は除外） */
.post_body a:not(.btn_main):not(.btn_min):not(.wp-block-button__link) {
    color: var(--color-blue);
    text-decoration: underline;
    text-underline-offset: .15em;
    word-break: break-word;
}

.post_body strong {
    font-weight: var(--bold);
}

.post_body hr {
    margin-block: 2em;
    border: 0;
    border-top: 1px solid var(--color-gray-l);
}

.post_body img {
    border-radius: var(--radius-s);
}

.second_kv {
    margin-top: calc(-1 * var(--header-h));
    padding-top: calc(var(--header-h) + var(--unit-m));
    overflow: hidden;
}

/* ===== 汎用：Quick Facts ===== */
.facts {
    --size-min: 18;
    --size-max: 28;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    padding: 1em;
    background: var(--color-white);
    border: 1px solid var(--color-gray-l);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
}

.fact {
    flex: 1;
    min-width: 5em;
    padding: .4em .5em;
    background: var(--color-white);
    border: 1px solid var(--color-gray-l);
    border-radius: var(--radius-s);
}

.fact_num {
    color: var(--color-blue);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.fact_label {
    --size-min: 12;
    --size-max: 14;
    color: var(--color-gray);
}

/* ===== 汎用：白カード / 2・3カラムgrid / column段組み ===== */
.panel {
    padding: var(--space-32);
    background: var(--color-white);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
}

.panel.bg_gray {
    background: var(--color-dot);
    box-shadow: none;
}

.grid_col2,
.grid_col3 {
    display: grid;
    gap: var(--space-24);
}

.grid_col3>.modal {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-s);
}

@media screen and (min-width:768.1px) {

    .grid_col2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid_col3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* column-count 段組み（Area / Japan Tips）。子は分割禁止＋下マージン */
.cols2 {
    column-count: 2;
    column-gap: var(--space-24);
}

.cols2>* {
    break-inside: avoid;
    margin-bottom: var(--space-24);
}

@media screen and (max-width:768px) {
    .cols2 {
        column-count: 1;
    }
}

/* ===== 汎用：テキスト＋メディア左右段（.media / 反転 .media_rev） ===== */
.media {
    display: flex;
    gap: var(--space-48);
    align-items: center;
}

.media_rev {
    flex-direction: row-reverse;
}

.media>.grid_imgs {
    flex: none;
    width: 39%;
}

/* 2枚のときは幅を約2/3に（KEC） */
.media>.grid_imgs:has(> :nth-child(2):last-child) {
    width: 26%;
}

.media> :not(.grid_imgs) {
    flex: 1;
    min-width: 0;
}

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

    .media,
    .media_rev {
        flex-direction: column;
        gap: var(--space-24);
    }

    .media>.grid_imgs,
    .media>.grid_imgs:has(> :nth-child(2):last-child) {
        width: 100%;
    }
}

/* ===== 汎用：画像枚数で組み替わるグリッド（5:3固定・SP変更なし） ===== */
.grid_imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.grid_imgs>.modal {
    aspect-ratio: 5 / 3;
    border-radius: var(--radius-s);
}

/* 1枚=全幅大 / 2枚=全幅2段 / 3枚=1枚目のみ全幅・残り半幅 / 4枚=すべて半幅 */
.grid_imgs:has(> :nth-child(1):last-child)>*,
.grid_imgs:has(> :nth-child(2):last-child)>*,
.grid_imgs:has(> :nth-child(3):last-child)> :first-child {
    grid-column: span 2;
}

/* ===== 画像拡大モーダル（.modal＝トリガー（画像ラッパー） / .modal_view＝オーバーレイ） ===== */
.modal {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: zoom-in;
}

.modal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 拡大できる目印：右下の虫眼鏡アイコン */
.modal::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 24px;
    height: 24px;
    background: url(img/ico_loupe.svg) center / contain no-repeat;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
    pointer-events: none;
}

html.is_modal_open {
    overflow: hidden;
}

.modal_view {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    background: rgba(0, 0, 0, 0.65);
    cursor: zoom-out;
}

.modal_view.is_open {
    display: flex;
}

.modal_view_inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.modal_view img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-s);
}

.modal_close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    cursor: pointer;
}

.modal_close::before,
.modal_close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: var(--color-white);
}

.modal_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width:768px) {
    .modal::after {
        width: 16px;
        height: 16px;
    }

    .modal_view {
        padding: 5vh 3vw;
    }

    .modal_view_inner {
        max-width: 100%;
    }

    .modal_view img {
        max-width: 100%;
    }
}

.card .btn_min {
    margin-left: auto;
}

/* ===== ヘッダー ===== */
.header {
    display: contents;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 16px 5vw 0 auto;
    width: fit-content;
    line-height: var(--line-h-10);
    font-weight: bold;
    z-index: 2;
}

.lang-switch a {
    color: var(--color-navy);
    transition: color var(--transition);
}

/* 現在言語＝アクティブ（両言語とも紺。状態はトグル位置で表現／カーソルのみ通常に） */
html[lang^="ja"] .lang-switch a[hreflang="ja"],
html[lang^="en"] .lang-switch a[hreflang="en"] {
    cursor: default;
}

.lang-switch_btn {
    display: flex;
    flex: none;
    width: 2.25em;
    height: 1em;
    padding: 0.09em;
    border-radius: 100px;
    background: var(--color-blue);
    cursor: pointer;
}

.lang-switch_btn span {
    width: 1.3125em;
    border-radius: 100px;
    background: var(--color-white);
}

/* ノブ位置：JA=右／EN=左 */
html[lang^="ja"] .lang-switch_btn span {
    margin-left: auto;
}

html[lang^="en"] .lang-switch_btn span {
    margin-right: auto;
}

@media screen and (max-width:768px) {
    .lang-switch {
        margin-right: 3vw;
    }
}

.header_logo {
    width: fit-content;
    z-index: 2;
}

/* ロゴは単色マスク化＝背景色で描画。暗いゾーンで白へなめらかに切替（JSが .on_dark 付与）。PC=header_logo／SP=float_logo */
.header_logo a {
    display: block;
    height: var(--header);
    aspect-ratio: 3270 / 2375;
    background-color: var(--color-navy);
    -webkit-mask: url(img/logo_b.svg) center / contain no-repeat;
    mask: url(img/logo_b.svg) center / contain no-repeat;
    transition: background-color var(--transition);
}

.header_logo img {
    display: none;
}

.header_logo.on_dark a {
    background-color: var(--color-white);
}

.header_nav {
    background: rgba(234, 240, 253, 0.80);
    backdrop-filter: blur(4px);
    display: flex;
    gap: min(1.5em, 2vw);
    padding: .5em 2em;
    border-radius: 5em;
    align-items: center;
    line-height: var(--line-h-13);
}

.mode_l .header_nav {
    --size-max: 14;
    --size-min: 12;
}

.header_nav li {
    display: contents;
}

.header_nav img {
    height: 1.3em;
}

.header_nav_contact {
    display: flex;
    align-items: center;
    gap: .3em;
    padding: .2em 1em;
    color: var(--color-white);
    background: var(--color-blue);
    /* 同色ボーダー常設＝hover時の透過でシフトしない */
    border: 1px solid var(--color-blue);
    border-radius: 2em;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* アイコンは currentColor に追従（白文字＝白／hover青文字＝青） */
.header_nav_contact span {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask: url(img/ico_mail_w.svg) center / contain no-repeat;
    mask: url(img/ico_mail_w.svg) center / contain no-repeat;
    transition: background-color var(--transition);
}

.header_nav_contact span img {
    display: none;
}

@media (any-hover: hover) {
    .header_nav_contact:hover {
        color: var(--color-blue);
        background: transparent;
    }
}

@media screen and (min-width:768.1px) {
    .header_wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 16px 5vw;
        width: 90vw;
        position: sticky;
        top: 16px;
        z-index: 999;
    }

}

@media screen and (max-width:768px) {
    .header_wrap {
        display: contents;
    }

    .header_logo {
        margin: -1em 0 0 3vw;
    }

    .header_nav {
        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        padding: .5em;
        z-index: 999;
        width: min(94vw, 30em);
        justify-content: space-evenly;
        --size-min: 14;
        flex-wrap: wrap;
        border: .5px solid var(--color-white);
    }
}

/* ===== SPフローティングロゴ（100vhスクロールでフェードイン／戻ると非表示） ===== */
.float_logo {
    position: fixed;
    top: 16px;
    left: 3vw;
    z-index: 900;
    display: block;
    width: 110px;
    aspect-ratio: 4833.5734446 / 1160.5223378;
    background-color: var(--color-navy);
    -webkit-mask: url(img/logo2_b.svg) center / contain no-repeat;
    mask: url(img/logo2_b.svg) center / contain no-repeat;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), background-color var(--transition);
}

.float_logo img {
    display: none;
}

.float_logo.on_dark {
    background-color: var(--color-white);
}

.float_logo.is_visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* ===== CTA / Get in Touch（共通） ===== */
.cta h2 {
    --size-min: 14;
    --size-max: 24;
}

.cta_card {
    display: block;
    width: min(100%, 1400px);
    padding: min(80px, 7vw);
    color: var(--color-white);
    background: url(img/bg_cta.jpg) center / cover;
    /* background-blend-mode: multiply; */
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.cta_en {
    font-size: clamp(40px, 5vw, 64px);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.cta_note {
    --size-min: 12;
    --size-max: 16;
}

/* PC：横棒が伸縮する右向き矢印（矢頭は末尾に追従）。既定は矢印自身の20%短縮→カードhoverで100% */
.cta_arrow {
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--color-white);
}

.cta_arrow::before {
    content: "";
    flex: 1;
    height: 2px;
    background: currentColor;
}

/* margin-right の % は .cta_arrow 自身の幅基準（＝子基準）。棒はその分縮み矢頭も追従 */
.cta_arrow::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: -22px;
    margin-right: 20%;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: margin var(--transition);
}

@media (any-hover: hover) {
    .cta_card:hover .cta_arrow::after {
        margin-right: 0;
    }
}

@media screen and (min-width:768.1px) {
    .cta {
        padding-inline: 1%;
    }
}

@media screen and (max-width:768px) {
    .cta_card {
        text-align: center;
        padding: min(60px, 10vw);
    }

    .cta_action {
        flex-direction: column;
        align-items: center;
        gap: var(--space-16);
    }

    /* SP：矢印を90°回転して下向きに（棒の長さ＝height）。短縮演出は無効 */
    .cta_arrow {
        flex: none;
        width: 44px;
        height: 44px;
        transform: rotate(90deg);
        margin-bottom: 6px;
    }

    .cta_arrow::after {
        margin-right: 0;
    }
}

/* ===== フッター ===== */
.footer {
    padding-block: var(--unit-s);
}

.footer_logo img {
    width: 120px;
    height: auto;
}

.footer_note {
    background: #fff1;
    border-left: 1px solid var(--color-white);
    padding: 8px 16px;
    --size-min: 12;
    --size-max: 14;
}

/* SP：ロゴ中央 → ナビ → 注記 → コピーライト */
@media screen and (max-width:768px) {
    .footer {
        padding-block: var(--unit-s) calc(var(--unit-xl) + var(--header));
    }

    .footer_top {
        flex-direction: column;
        align-items: center;
        /* text-align: center; */
        gap: var(--space-32);
    }

    .footer_logo img {
        width: 100px;
    }

    .footer nav {
        flex-wrap: wrap;
    }

    .footer_bottom {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-8);
    }

    .footer_bottom p:last-child {
        text-align: right;
    }
}

/* ============================================================
   ページ個別
   ============================================================ */

/* ---------- TOP（index.html） ---------- */

/* ===== TOP：KV ===== */
.wrap:has(.top_kw) {
    background-image: url(img/bg_earth-map.png);
    background-repeat: no-repeat;
    background-position: -3vw center;
    background-size: min(60%, 1300px);
    overflow: hidden;
}

.top_kw .normal {
    display: block;
    --size-max: 24;
    --size-min: 14;
}

.top_kw .thin {
    display: block;
    color: var(--color-navy);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .top_kw .thin {
        background-color: rgb(73, 168, 180);
        background-image:
            radial-gradient(at 82% 17%, hsla(222, 60%, 22%, 1) 0px, transparent 50%),
            radial-gradient(at 21% 65%, hsla(222, 59%, 47%, 1) 0px, transparent 50%),
            radial-gradient(at 71% 81%, hsla(290, 38%, 74%, 1) 0px, transparent 50%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        background-size: 150% 150%;
        animation: kv_flow 10s ease-in-out infinite alternate;
    }
}

.top_kw .db {
    font-size: clamp(20px, 7vw, 96px);
    line-height: 1;
}

.top_kw_note {
    --size-min: 14;
    color: var(--color-gray);
}

/* 動画のトリミングは内側が担当（外側 .top_kv_right は bg_circle をはみ出させるためクリップしない） */
.top_kv_video {
    height: 100%;
}

/* ===== TOP：KVモーション（bg_circleフェード＋英字グラデの流れ。入場は .fade_up 等の汎用クラス） ===== */
/* bg_circle：ふわっとフェードイン（SPは content:none なので無効） */
.top_kv_right::before {
    animation: kv_fade 1s ease-out 0.35s both;
}

@keyframes kv_fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes kv_flow {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 100% 100%;
    }
}

@media screen and (min-width:768.1px) {
    .top_kv {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5%;
    }

    .top_kv_left {
        display: grid;
        gap: 2em;
        padding-block: 2em;
    }

    .top_kv_right {
        margin-right: min(-5vw, 600px - 50vw);
    }

    .top_kv_video {
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    }
}

@media screen and (max-width:768px) {
    .wrap:has(.top_kw) {
        background-position: center bottom 48px;
        background-size: 450px;
    }

    .top_kv {
        display: grid;
        gap: 2em;
    }

    .top_kv_left {
        display: contents;
    }

    .top_kv_right {
        order: -1;
        margin-top: -2em;
        width: auto;
        margin-inline: calc(50% - 50vw);
    }

    .top_kv_right::before {
        content: none;
    }

    .top_kv_video {
        aspect-ratio: 5/3;
        border-radius: 0;
    }

    .top_kw {
        order: -1;
        z-index: 2;
    }

    .top_kw .normal {
        text-align: right;
    }

    .top_kw .db {
        font-size: clamp(20px, 16vw, 96px);
    }

    .top_kw .db:last-of-type {
        text-align: right;
        margin-bottom: -0.3em;
    }
}

.top_kv_toggle {
    position: absolute;
    right: 2vw;
    bottom: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--color-white);
    cursor: pointer;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .4));
}

.top_kv_toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

.top_kv_toggle .top_kv_toggle_play {
    display: none;
}

.top_kv_toggle.is_paused .top_kv_toggle_pause {
    display: none;
}

.top_kv_toggle.is_paused .top_kv_toggle_play {
    display: block;
}

/* ===== TOP：想い / Our Purpose ===== */
.top_purpose {
    position: relative;
}

.top_purpose::before {
    content: "";
    position: absolute;
    background: linear-gradient(to bottom, var(--color-white), transparent 70%);
    inset: 0;
}

.top_purpose .inner {
    position: relative;
}

.top_purpose_ttl {
    display: flex;
    flex-direction: column;
}

.top_purpose_ttl .thin {
    --size-min: 28;
    --size-max: 36;
    letter-spacing: 0.02em;
    color: var(--color-blue);
}

.line_2em {
    width: 1.7em;
    height: 1px;
    background-color: var(--color-txt);
    display: inline-block;
    vertical-align: super;
    margin-left: .3em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .top_purpose_ttl .thin {
        background-image: linear-gradient(98deg, #51B7C7 35%, var(--color-blue));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

@media screen and (min-width:768.1px) {
    .top_purpose_ttl {
        align-items: flex-end;
        text-align: right;
        margin-block: min(var(--unit-m), 7vw);
    }
}

@media screen and (max-width:768px) {
    .top_purpose_ttl {
        align-items: center;
        text-align: center;
    }

    .top_purpose_img img:first-of-type {
        margin-inline: auto -3vw;
        width: 85vw;
        border-radius: 8px 0 0 8px;
    }

    .top_purpose_img img:last-of-type {
        margin: -10vw auto 0 -3vw;
        width: 70vw;
        border-radius: 0 8px 8px 0;
    }
}

.top_purpose_ttl h2 {
    font-weight: var(--normal);
}

.top_purpose_ttl .db:first-child {
    --size-min: 22;
    --size-max: 32;
}

.top_purpose_ttl .db:last-child,
.top_purpose_ttl .db:last-child * {
    --size-min: 26;
    --size-max: 40;
}

html[lang^="en"] .top_purpose_ttl .db:first-child {
    --size-min: 16;
    --size-max: 24;
}

html[lang^="en"] .top_purpose_ttl .db:last-child,
html[lang^="en"] .top_purpose_ttl .db:last-child * {
    --size-min: 20;
    --size-max: 32;
}

.top_purpose_lead {
    display: flex;
    justify-content: center;
    margin-block: var(--unit-l);
    --size-min: 18;
    --size-max: 24;
    font-weight: var(--normal);
    line-height: var(--line-h-18);
    text-align: center;
}

.top_purpose_lead span {
    flex: none;
    width: 1em;
    height: 2em;
}

.top_purpose_lead span:first-child {
    border-top: 1px solid var(--color-navy);
    border-left: 1px solid var(--color-navy);
    margin-top: -.5em;
    align-self: flex-start;
}

.top_purpose_lead span:last-child {
    border-right: 1px solid var(--color-navy);
    border-bottom: 1px solid var(--color-navy);
    margin-bottom: -.5em;
    align-self: flex-end;
}

/* ===== TOP：スクロール指標（点線トラック＋飛行機ループ） ===== */
.scroll_indicator {
    position: relative;
    width: 20px;
    height: 66px;
    margin-inline: auto;
    animation: scroll_fade 3s linear infinite;
}

.scroll_indicator span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 0;
    transform: translateX(-50%);
    background-image: radial-gradient(circle, #B0DFE7 1.2px, transparent 1.4px);
    background-size: 4px 6px;
    background-position: top;
    animation: scroll_trail 3s linear infinite;
}

.scroll_indicator img {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    animation: scroll_airplane 3s linear infinite;
}

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

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes scroll_airplane {
    0% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(52px);
    }
}

@keyframes scroll_trail {
    0% {
        height: 0;
    }

    100% {
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .scroll_indicator {
        animation: none;
        opacity: 1;
    }

    .scroll_indicator span {
        animation: none;
        height: 100%;
    }

    .scroll_indicator img {
        animation: none;
        transform: translateY(44px);
    }
}

/* ===== TOP：ご挨拶 / Message ===== */
.top_message_grid {
    display: grid;
    gap: var(--space-32);
}

.top_message_text {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

@media screen and (min-width:768.1px) {
    .top_message_grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 5%;
        align-items: center;
    }
}

/* SP：写真を見出しと本文の間に差し込む */
@media screen and (max-width:768px) {
    .top_message_grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-24);
    }

    .top_message_text {
        display: contents;
    }

    .top_message_head {
        order: 1;
    }

    .top_message_photos {
        order: 2;
    }

    .top_message_body {
        order: 3;
    }
}

.top_message_photos {
    position: relative;
    display: grid;
    place-items: center;
    padding-block: 1em;
}

.top_message_photos img {
    grid-area: 1 / 1;
    width: min(48%, 240px);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow);
}

.top_message_photos img:first-of-type {
    rotate: -8deg;
    translate: -32% 0;
}

.top_message_photos img:last-of-type {
    rotate: 7deg;
    translate: 32% 0;
    z-index: 1;
}

.top_message_badge {
    position: absolute;
    right: 20%;
    bottom: .5em;
    rotate: -4deg;
    padding: 5px 16px;
    background: var(--color-bg-aqua);
    border-radius: var(--radius-s);
    --size-min: 14;
    --size-max: 16;
    line-height: 1.2;
    text-align: center;
    color: var(--color-navy);
    z-index: 2;
}

/* ===== TOP：フォトスライドショー（左→右へ無限ループ） ===== */
.top_slideshow {
    overflow: hidden;
}

.top_slideshow_track {
    display: flex;
    width: max-content;
    animation: slideshow 60s linear infinite;
}

.top_slideshow_track img {
    flex: none;
    height: clamp(180px, 22vw, 321px);
    width: auto;
}

@keyframes slideshow {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* ---------- 学校詳細（schools/choate.html） ---------- */

/* ===== 学校詳細：KV（新規） ===== */
.wrap:has(.detail_kv) {
    padding-top: calc(var(--header-h) + 16px);
}

.detail_kv {
    display: flex;
    gap: var(--space-40);
    align-items: stretch;
}

.detail_kv_body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .4em;
}

.detail_kv_en {
    --size-min: 32;
    --size-max: 64;
    font-weight: var(--thin);
    color: var(--color-blue);
    line-height: 1.1;
}

.detail_kv_ja {
    --size-min: 16;
    --size-max: 24;
}

.detail_kv .color_gray {
    --size-min: 12;
}

.detail_kv_media {
    position: relative;
    flex: none;
    width: 45%;
    /* 写真の下に余白（校章の重なり用） */
}

.detail_kv_media:has(.detail_kv_emblem) {
    padding-bottom: 40px;
}

.detail_kv_photo {
    height: 100%;
    border-radius: var(--radius-xl);
}

/* 校章：写真右下に白バッジで重ねる。学校ごとに縦横比が違うため中の画像は height 固定・width auto */
.detail_kv_emblem {
    position: absolute;
    right: -10px;
    bottom: 0;
    display: flex;
    padding: var(--space-16) var(--space-24);
    background: var(--color-white);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
}

.detail_kv_emblem img {
    height: clamp(76px, 8vw, 100px);
    width: auto;
}

@media screen and (min-width:768.1px) {
    .detail_kv_body {
        align-self: center;
    }

    .detail_kv_media {
        min-height: 400px;
    }
}

@media screen and (max-width:768px) {
    .detail_kv {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-24);
    }

    .detail_kv_media {
        order: -1;
        width: 100%;
    }

    .detail_kv_photo {
        aspect-ratio: 542 / 339;
    }
}

/* ===== 学校詳細：Access（日本からのアクセス／持ち物） ===== */
.access_panel {
    display: flex;
    gap: var(--space-40);
    align-items: stretch;
    padding: var(--space-48);
    background: var(--color-navy);
    color: var(--color-white);
    border-radius: var(--radius-l);
}

.access_map {
    flex: none;
    width: min(520px, 45%);
    border-radius: var(--radius-s);
    overflow: hidden;
    border: 1px solid var(--color-gray);
}

.access_map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    border: 0;
}

.access_body {
    flex: 1;
    min-width: 0;
}

.access_panel .min_head_ttl {
    color: var(--color-white);
}

.access_panel .min_head_en {
    color: #A1AECC;
}

@media screen and (max-width:768px) {
    .access_panel {
        flex-direction: column;
        padding: var(--space-32);
    }

    .access_map {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* ---------- お問い合わせ（contact.html） ---------- */
/* フォーム部品はCF7出力にも流用可（CF7側で class: 指定 or ラッパーに付与） */
.form_card {
    width: min(100%, 810px);
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-48);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.form_field {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.form_label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    --size-min: 16;
    --size-max: 16;
    color: var(--color-navy);
}

/* 必須／任意バッジ */
.badge_req,
.badge_any {
    --size-min: 12;
    --size-max: 12;
    padding: .17em .67em;
    line-height: 1.5;
    border-radius: var(--radius-xs);
}

.badge_req {
    color: var(--color-white);
    background: var(--color-blue);
}

.badge_any {
    color: var(--color-gray);
    background: var(--color-gray-l);
}

/* 入力欄・セレクト・テキストエリア */
.form_input,
.form_select,
.form_area {
    width: 100%;
    padding: 0 1em;
    --size-min: 16;
    --size-max: 16;
    color: var(--color-navy);
    background: var(--color-white);
    border: 1px solid var(--color-gray-l);
    border-radius: 10px;
    transition: border-color var(--transition);
}

.form_input,
.form_select {
    height: 52px;
}

.form_area {
    min-height: 180px;
    padding: .875em 1em;
    line-height: var(--line-h-18);
    resize: vertical;
}

.form_input:focus,
.form_select:focus,
.form_area:focus {
    border-color: var(--color-blue);
    outline: none;
}

.form_input::placeholder,
.form_area::placeholder {
    color: #A1AECC;
}

/* セレクト（右に▾／未選択はプレースホルダー色） */
.form_select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-gray) 50%), linear-gradient(135deg, var(--color-gray) 50%, transparent 50%);
    background-position: right 20px center, right 15px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form_select:invalid,
.form_select:has(option[value=""]:checked) {
    color: #A1AECC;
}

/* 選択ピル（CF7の [radio]／[checkbox] 出力＝.wpcf7-radio／.wpcf7-checkbox をピル表示） */
.wpcf7-radio,
.wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 4px;
}

.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item {
    margin: 0;
}

.wpcf7-radio label,
.wpcf7-checkbox label {
    display: block;
    cursor: pointer;
}

.wpcf7-radio .wpcf7-list-item input,
.wpcf7-checkbox .wpcf7-list-item input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.wpcf7-radio .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item-label {
    display: block;
    padding: .2em 1em;
    --size-min: 14;
    --size-max: 14;
    color: var(--color-gray);
    background: var(--color-white);
    border: 1px solid var(--color-gray-l);
    border-radius: 30px;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.wpcf7-radio .wpcf7-list-item input:checked+.wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item input:checked+.wpcf7-list-item-label {
    color: var(--color-white);
    background: var(--color-navy);
    border-color: var(--color-navy);
}

.wpcf7-radio .wpcf7-list-item input:focus-visible+.wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item input:focus-visible+.wpcf7-list-item-label {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

@media (any-hover: hover) {

    .wpcf7-radio label:hover .wpcf7-list-item-label,
    .wpcf7-checkbox label:hover .wpcf7-list-item-label {
        border-color: var(--color-blue);
    }
}

/* 補足テキスト */
.form_note {
    --size-min: 12;
    --size-max: 12;
    color: var(--color-gray);
}

/* テキスト/メール/電話/セレクト/テキストエリアは shortcode の class: で .form_input 等を付与。ラジオ/同意/送信はCF7出力クラスへ直接スタイル */
.wpcf7-form-control-wrap {
    display: block;
}

/* 同意チェック（[acceptance]） */
.wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.wpcf7-acceptance label {
    display: flex;
    align-items: center;
    gap: 10px;
    --size-min: 14;
    --size-max: 14;
    color: var(--color-gray);
    cursor: pointer;
}

.wpcf7-acceptance input {
    flex: none;
    width: 18px;
    height: 18px;
    accent-color: var(--color-blue);
}

/* バリデーション表示 */
.wpcf7-not-valid {
    border-color: var(--color-alert) !important;
}

.wpcf7-not-valid-tip {
    --size-min: 12;
    --size-max: 12;
    margin-top: .3em;
    color: var(--color-alert);
}

.wpcf7 .wpcf7-response-output {
    margin: 1.5em 0 0;
    padding: .8em 1em;
    --size-min: 14;
    --size-max: 14;
    border-radius: var(--radius-s);
}

/* ===== ページネーション（archive）===== */
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    padding: 0 .4em;
}

.pagination span.page-numbers {
    color: var(--color-gray);
}

.pagination a.page-numbers {
    font-weight: bold;
}