@charset "UTF-8";

/*
変数定義
----------------------------------------------------------- */
:root {
    /* カラー */
    --color-primary: #4CB0E6; 
    --color-secondary: #F47C20; 
    --color-tertiary: #6FB82F; 
    --color-accent: #FBCB0A; 
    --color-navy: #0E3A5D;
    --color-text: #333;
    --color-link: #006ad6;
    --color-white: #fff;
    --color-gray: #959595;
    --color-bg: #F8F7F4; /* セクション背景色 */
    --color-btn-bg: #eee;
    --color-btn-text: #313131;
    /* グリッド用カラー */
    --color-grid-bg: #F4F8FC; 
    --color-grid-line: #FFFFFF; 
    /* --- フォント定義 --- */
    --font-base: "Noto Sans JP", sans-serif; /* 基本の日本語 */
    --font-en: "Urbanist", sans-serif; /* 英字見出し用 */
    /* フォントサイズ定義 */
    --fz-xl: 3.125rem; /* 50px / 16 = 3.125rem (セクション英字見出し) */
    --fz-xl-m: 2.5rem; /* 40px (Mobileセクション見出しなどに) */
    --fz-l: 2rem; /* 32px / 16 = 2.0rem (About見出しなど) */
    --fz-m: 1.5rem; /* 24px / 16 = 1.5rem (カード見出しなど) */
    --fz-ms: 1.25rem; /* 20px (Medium-Small) */
    --fz-mb: 1.125rem;    /* 18px (Medium-Base) */
    --fz-base: 1rem; /* 16px / 16 = 1.0rem (本文 / リード文) */
    --fz-s: 0.9375rem; /* 15px / 16 = 0.9375rem (カード説明文) */
    --fz-xs: 0.875rem; /* 14px / 16 = 0.875rem (コピーライトなど) */
    /* レイアウト */
    --width-content: 1200px;
    --space-unit: 15px;
    --space-section: 80px; /* セクション間の余白 */
    /* その他 */
    --flex-gap: 30px;
    --duration: 0.5s;
}

/*
ベース
----------------------------------------------------------- */
body {
    font-family: var(--font-base); /* 全体のフォントを Noto Sans JP に設定 */
    color: var(--color-text);
    overflow-x: hidden;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased; /* 文字を滑らかにする */
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.accordion-a {
    display: grid;               /* Gridを使用 */
    grid-template-rows: 0fr;    /* 最初は高さ0 */
    transition: grid-template-rows 0.3s ease-out; /* 0.3秒でなめらかに */
    overflow: hidden;           /* はみ出た中身を隠す */
}
.pc-only {
    display: block;
}
.sp-only {
    display: none;
}

/*
レイアウト・サイズ
----------------------------------------------------------- */
.wrapper {
    max-width: var(--width-content);
    margin: 0 auto;
    position: relative;
    padding: 0 var(--space-unit);
    box-sizing: border-box;
}

/*
共通コンポーネント
----------------------------------------------------------- */
.bg-grid {
    background-color: var(--color-grid-bg);
    /* 1pxの白い線を縦横に引く設定 */
    background-image: 
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
    background-size: 20px 20px; /
}
.sec-ttl {
    font-family: var(--font-en); 
    font-size: var(--fz-xl); 
    letter-spacing: 0.05em;     
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
    padding-top: var(--space-section);
}
/* 英字見出しの最初の3文字の色分け */
.sec-ttl span:nth-child(1) { color: #4CB0E6; } 
.sec-ttl span:nth-child(2) { color: #F47C20; } 
.sec-ttl span:nth-child(3) { color: #6FB82F; } 

/* --- 見出しとサブ見出しのアニメーション設定 --- */
.sec-ttl span, 
.sub-ttl span {
    display: inline-block;
    opacity: 0;
    /* 下側に30pxずらしておく */
    transform: translateY(30px); 
    /* 最初は速く、最後はゆっくり止まるイージング */
    transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* セクションが画面に入った時の動き */
.is-active .sec-ttl span,
.is-active .sub-ttl span {
    opacity: 1;
    /* 元の位置（0）に戻る */
    transform: translateY(0);
}
.sec-header .sec-ttl {
    padding-top: 45px;
}

.mv-ttl {
    font-family: var(--font-base);
    font-weight: 700;
}
.sub-ttl {
    font-size: var(--fz-base); 
    font-weight: bold;
    text-align: center;
    padding-bottom: 40px;
}
.lead {
    font-size: var(--fz-base); 
    line-height: calc(48 / 16);
    text-align: center;
    padding-bottom: 45px;
}

.lead span {
    color: var(--color-secondary);
}

/* ボタン共通 */
.btn-primary {
    display: flex;
    justify-content: center; 
    align-items: center;
    width: fit-content;    /* 文字数に合わせて広がる */
    min-width: 260px;      /* ただし、短すぎても不格好なので「最低これくらい」は保つ */
    padding: 15px 0px;    /* 左右の余白を多めに取るとバランスが良くなります */
    background: #eee; 
    color: #313131;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px; 
    position: relative;
    transition: 0.3s ease-in-out;
    margin: 0 auto;
    border: none; 
}
/* 右側の矢印アイコン */
.btn-primary::after {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    content: "\f0da"; /* Font Awesomeの矢印 */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900;
    transition: 0.2s ease-in-out;
}
/* オレンジボタン（無料体験会） */
.btn-orange {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: none;
}
/* ：ブルー枠ボタン（お問い合わせ） */
.btn-blue-border {
    background-color: var(--color-white);
    color: var(--color-primary); /* メインのブルー */
    border: 2px solid var(--color-primary); /* ブルーの枠線 */
    transition: 0.3s;
}
.btn-header{ /* 共通のクラス名を想定 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 40px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-sizing: border-box; /* 枠線を含めたサイズ計算 */
}
/* ホバー時に色を反転させるとプロっぽくなります */
@media (hover: hover) {
.btn-orange:hover {
    opacity: 0.8;
}
.btn-blue-border:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
}
/* gear */
.gear-box {
    position: absolute; 
    opacity: 0.3;
    z-index: 1; 
    pointer-events: none; 
}
.gear-img {
    width: 100%;
    height: auto;
    /* 回転の中心を真ん中に固定（JSで綺麗に回すために必要） */
    transform-origin: center center;
}
.sp-fixed-banner {
    display: none;
}
/* ホバー設定 */
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover {
    color: var(--color-white); /* 文字を白に */
    background: #231815; /* 黒背景 */
    color: var(--color-white);
    opacity: 1; /* 前のopacity設定を上書き */
}
}

/*
Loading Screen
----------------------------------------------------------- */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; 
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transitionの設定 */
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader-logo {
    width: 500px; 
    max-width: 80%; 
    /* 最初から見える状態にしておく（アニメーションが動かないリスクを避けるため） */
    opacity: 1; 
}

.loader-video {
    width: 100%;
    height: auto;
    display: block;
}

/* 読み込み完了後にJSで付与されるクラス */
#loader.loaded {
    opacity: 0;
    visibility: hidden;
}

/* ローディング中は後ろをスクロールさせない */
body.is-loading {
    overflow: hidden;
}

/*
header
----------------------------------------------------------- */
.header {
    /* ★追従のための必須設定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; 
    /* 初期状態（一番上にいる時） */
    background-color: var(--color-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: 100px;
}
/* ヘッダー内の共通レイアウト */
.header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; 
    max-width: none ;
    width: 100% ;
    padding: 0 50px;
    gap: 40px;
}

.menu {
    display: none;
}

.logo img {
    width: 220px; 
    height: auto; 
    margin: 0;
}
.header.is-scrolled {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
    background-color: rgba(255, 255, 255, 0.95);
}
.nav-list {
    display: flex;
    list-style: none;
    gap: 30px;
}
/* --- ヘッダーナビゲーションのホバーエフェクト --- */
.nav-link {
    text-decoration: none;
    color: var(--color-text); 
    font-weight: bold;
    font-size: var(--fz-base);
    transition: color 0.3s, opacity 0.3s; 
}
/* ホバー時の動き */
@media (hover: hover) {
.nav-link:hover {
    color: var(--color-primary); 
}
.nav-link:hover::after {
    width: 100%; 
}
}
/* ボタンエリアを横に並べる */
.header-btns {
    display: flex;
    gap: 10px; 
}
/* ナビゲーションの位置微調整 */
.nav {
    margin-left: auto; 
}

/*
Main Visual (hero)
----------------------------------------------------------- */
.mv-content {
    height: 100vh;
    min-height: 700px;
    background: 
        linear-gradient(to right, rgba(255,255,255,0.7) 0%, transparent 60%),
        url(../img/mv.webp) no-repeat center center / cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ★全ての要素の左端をビシッと揃える */
    align-items: flex-start; 
    padding-left: 10%; /* カンプに合わせて左余白を調整 */
    padding-top: 80px;
    overflow: hidden;
}
/* 1. メインコピー画像（高さと間隔を調整） */
.mv-ttl {
    margin: 0;
    line-height: 0; /* 画像の隙間をリセット */
}
.mv-catch-01, .mv-catch-02 {
    display: block;
    /* clampを使って、画面幅に合わせて高さも少し伸縮するようにすると綺麗 */
    height: clamp(80px, 10vw, 115px); 
    
    width: auto; /* 横幅は比率を保って自動で計算されるようにする */
    object-fit: contain;   /* 画像を歪ませずに枠に収める */
    margin-left: 0;
}
.mv-catch-01 {
    display: block;
    margin-bottom: 5px; 
}
.mv-catch-02 {
    display: block;
    margin-bottom: 40px; 
}
/* 2. 年長・小学生向け（マーカー風アンダーライン） */
.mv-grade {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 25px;
    line-height: 1;
    /* ★文字の背面にマーカーを引く（グラデーションを利用） */
    background: linear-gradient(transparent 60%, var(--color-accent) 50%);
    padding: 0 0.2em; /* 左右に少し色をはみ出させる */
}
/* 3. ロボットプログラミング教室（文字間と座布団） */
.mv-class {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.75rem;
    font-weight: 700;
    padding: 0.3em 1em;
    border-radius: 4px;
    /* ★文字間を10%（0.1em）空ける */
    letter-spacing: 0.1em;
    /* 左端をキャッチに合わせるため余計なマージンをリセット */
    margin-left: 0;
}
/* --- キャッチコピー画像の設定 --- */
.mv-catch-01, 
.mv-catch-02, 
.mv-grade, 
.mv-class {
    opacity: 0;                 /* 最初は透明 */
    transform: translateX(-40px); /* 最初は左に40pxずらしておく */
    /* 変化のスピード（0.8秒かけて、滑らかに動く） */
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* --- サブタイトルエリアの設定 --- */
.mv-subttl {
    background-color: transparent;
    display: block;
    padding: 0;
    margin-top: 0;
    text-align: left; /* 左揃えを確定 */
}
/* 年長・小学生向け（★下線をイエローに変更） */
.mv-grade {
    display: inline-block;
    font-size: var(--fz-l);
    font-weight: 700;
    color: var(--color-text);
    /* オレンジ(--color-secondary)からイエロー(--color-accent)へ変更 */
    border-bottom: 6px solid var(--color-accent); 
    margin-bottom: 20px;
    line-height: 1.2;
}
/* ロボットプログラミング教室（ブルー座布団） */
.mv-class {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.75rem;
    font-weight: 700;
    padding: 0.25em 0.8em;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* --- アニメーション実行（JS用） --- */
.is-appeared .mv-catch-01 { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.is-appeared .mv-catch-02 { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }
.is-appeared .mv-grade    { opacity: 1; transform: translateX(0); transition-delay: 0.6s; }
.is-appeared .mv-class    { opacity: 1; transform: translateX(0); transition-delay: 0.8s; }
/* ステッカーの位置微調整（さらに内側へ） */
.btn-mv-trial {
    position: absolute;
    bottom: 5%;
    right: 5%; /* 男の子の近くに寄せる */
    width: 320px;
    height: 320px;
    background: url(../img/mv-02.webp) no-repeat center center / contain;
    z-index: 10;
    animation: mv-sticker-float 4s ease-in-out infinite;
}
/* ★ 3. マウスを乗せた時だけ、スッと上に浮かす */
@media (hover: hover) {
.btn-mv-trial:hover {
/* ぐいっと大きくせず、8pxほど上に移動させるだけにする */
    transform: translateY(-5px); 
        
/* 影を少し下に落とすことで、浮いている感じを演出 */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
}
}
.sp-fixed-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 3000;
    /* バナーの背景色と画像の背景色を合わせると隙間が目立ちません */
    background-color: var(--color-accent); 
    line-height: 0; /* 画像の下にできる隙間を消す */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(calc(100% + 20px));
    transition: transform 0.3s ease;
}
.sp-fixed-banner.is-visible {
    transform: translateY(0);
}
.sp-fixed-banner img {
    width: 100%;
    height: auto;
}

/*
section01 (About)
----------------------------------------------------------- */
.catch {
    font-size: var(--fz-l);
    line-height: 48px;     /* 指定の48px */
    font-weight: 500;      /* ミディアム（Google Fontsの500） */
    text-align: center;    /* 中央揃え */
    margin-bottom: 30px;
}
.sec01 {
    position: relative;
    /* ★歯車が画面からはみ出しても、横スクロールバーが出ないようにする */
    overflow: hidden; 
    padding-top: var(--space-section);
}
/* 大きい歯車（右上） */
.gear-large {
    width: 500px;
    top: -50px;
    /* 画面中央(50%)から右に100px離れた位置に配置 */
    /* 数値を小さくする（例：50px）と、もっと中央に寄りになる */
    left: calc(50% + 300px); 
    right: auto; /* 以前のright設定を打ち消す */
}
/* 小さい歯車（左下）の修正 */
.gear-small {
    width: 300px;
    bottom: -10px; /* セクションの下端からの距離を少し調整 */
    left: calc(50% - 800px); 
    right: auto;
    opacity: 0.4; /* 動画の邪魔をしないように少し薄くするのもあり */
}

/*
Video Area (Fukidashi & Tablet Video)
----------------------------------------------------------- */
.video-area {
    text-align: center;
    margin-top: 60px;
    padding-bottom: var(--space-section);
}
/* ＼ テキスト ／ のスタイル */
.fukidashi {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 15px;            /* 線と文字の間の距離 */
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}
/* 左右の線の共通設定 */
.fukidashi::before,
.fukidashi::after {
    content: "";
    width: 40px;          /* 線の長さ */
    height: 1.5px;        /* 線の太さ */
    background-color: var(--color-text);
    display: inline-block;
}
/* 左側の線 ＼ */
.fukidashi::before {
    transform: rotate(45deg); /* 右肩下がりに回転 */
}
/* 右側の線 ／ */
.fukidashi::after {
    transform: rotate(-45deg); /* 右肩上がりに回転 */
}
/* タブレットとはめ込み動画の設定 */
.tablet-wrapper {
    position: relative;
    max-width: 900px; /* 全体のサイズを決める */
    margin: 0 auto;
    overflow: hidden;
    background-color: #000;
    border-radius: 50px;
}
.tablet-img {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 10;
    /* ★重要：これを入れると、画像の上から下の動画を直接クリック・操作できるように */
    pointer-events: none; 
}
.tablet-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: auto;
    object-fit: cover;
    z-index: 1; /* 画像の下 */
}
/* 再生ボタンのデザイン */
.play-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    /* サイズと形 */
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9); /* 白の少し透過 */
    border-radius: 50%; /* 正円 */
    /* アイコンを真ん中に寄せる */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
/* 再生アイコンの色とサイズ */
.play-guide i {
    color: var(--color-primary); /* ギアと同じ青色 */
    font-size: 30px;
    /* アイコンが微妙に左に寄って見えるのを微調整 */
    margin-left: 5px; 
}
/* ホバー時に少し大きくする */
@media (hover: hover) {
.play-guide:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--color-white);
}
}
/* ボタンが動くアニメーション */
.play-guide::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: play-pulse 2s infinite;
}
@keyframes play-pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/*
section02 (Course) - 背景色を適用
----------------------------------------------------------- */
/* --- コース全体設定 --- */
.sec02 {
    background-color: var(--color-bg); /* F8F7F4 */
    position: relative;
    overflow: hidden;
    padding-bottom: var(--space-section);
}
/* 右上のロボット配置 */
/* カードコンテナ (2x2) */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-gap);
    justify-content: center;
    margin-top: 40px;
    margin-bottom: var(--space-section);
}
/* カード共通：塗りつぶしデザイン */
.card {
    width: calc(50% - 15px); /* 2列 */
    border-radius: 25px;
    overflow: hidden;
    color: var(--color-white); /* 文字を白抜きに */
    display: flex;
    flex-direction: column;
    border: none; /* 枠線を消して塗りつぶしに */
    cursor: pointer; /* ★マウスを乗せると指マークになるように */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ★アニメーションを滑らかに */
}
/* カードごとの背景色 */
.course-01 { background-color: var(--color-secondary); } /* オレンジ */
.course-02 { background-color: var(--color-tertiary); }  /* 緑 */
.course-03 { background-color: var(--color-primary); }   /* 水色 */
.course-04 { background-color: var(--color-navy); }      /* 紺 */
.card-img-box {
    padding: 20px 20px 0; /* 写真の周りに少し余白（カンプ風） */
}
.card-img-box img {
    border-radius: 15px; /* 写真の角を少し丸める */
}
.card-ttl {
    font-size: var(--fz-m);
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.card-txt {
    font-size: var(--fz-s); /* 15px */
    line-height: 1.8; /* 行間を広げて読みやすく */
    text-align: left;
}
.card > div {
    padding: 30px 35px 45px; /* ここでテキストの周りだけ広くする */
    flex-grow: 1; /* 中身が少なくてもカードの底を揃える */
}
/* --- ロボットの配置調整 --- */
.course-robot {
    position: absolute;
    /* topを150px〜200px程度に下げて、カードに近い位置へ */
    top: 180px; 
    right: calc(50% - 600px); 
    width: 220px; /* 少しだけ大きく */
    z-index: 5;
    /* ふわふわ浮いているようなアニメーション */
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
/* ★ホバー（マウスを乗せた時）の動き */
@media (hover: hover) {
.card:hover {
    transform: translateY(-10px); /* 10px上に浮き上がる */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 影をつけて浮かせる */
}
}
/* タイトルと矢印 */
.card-ttl i {
    font-size:  var(--fz-base); /* 矢印のサイズ */
}

/*
section03 (Outreach)
----------------------------------------------------------- */
/* --- 出張授業セクション全体 --- */
.sec03 {
    position: relative;
    padding-bottom: var(--space-section);
}
/* 左下のロボット画像 */
/* ボックスのリスト（横並び） */
.box-list {
    display: flex;
    justify-content: center;
    gap: var(--flex-gap);
    list-style: none;
    padding: 40px 0 60px;
}
/* ★ポップなボックスデザイン */
.box {
    flex: 1;
    max-width: 380px;
    background: #fff;
    padding: 40px 20px;
    border-radius: 15px;
    border: 3px solid var(--color-text); /* 太い枠線 */
    /* ★ズレた青い影（box-shadowをボカさない） */
    box-shadow: 8px 8px 0 var(--color-primary); 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* ボックス内のパーツ */
.box-point {
    font-family: var(--font-en);
    font-size: var(--fz-l);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}
.box-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}
.box-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.box-ttl {
    font-size: var(--fz-m);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
    color: var(--color-text);
}
.box-txt {
    font-size: var(--fz-xs);
    line-height: 1.6;
    text-align: left;
}
/* --- ロボットの動き設定 --- */
.outreach-robot {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 750px);
    width: 250px;
    z-index: 5;
    /* 最初は透明で左にずらしておく */
    opacity: 0;
    transform: translateX(-50px);
    transition: 1.5s ease-out; 
}
/* 動きのスイッチ：セクションが見えたら実行 */
.sec03.is-active .outreach-robot {
    opacity: 1;
    transform: translateX(0);
}
/* 出てきた後にふわふわさせる（画像自体にかける） */
.outreach-robot img {
    animation: outreach-float 5s ease-in-out infinite;
}
@keyframes outreach-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

/*
section04 (Q&A)
----------------------------------------------------------- */
/* --- SEC04: Q&A 全体 --- */
.sec04 {
    /* 1. 上下の余白をしっかり取る（見切れ防止） */
    padding-bottom: var(--space-section);
    /* 2. 背景画像の設定をアップデート */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.75)), 
        url(../img/sec04-01.webp);
    background-repeat: no-repeat;
    /* ★重要：画像を画面に固定する（これでアコーディオンが開いても画像は巨大化しない） */
    background-attachment: fixed;
    /* ★重要：画像の上側（モニターがある部分）を優先的に見せる */
    background-position: center top; 
    background-size: cover;
}
/* アコーディオンのカードに少し強めの影をつけて、背景から浮かせる */
.accordion > li {
    background: #fff;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* 影を少し深く */
    overflow: hidden;
    transition: 0.3s;
}
.accordion > li.is-open .accordion-q-icon::after {
    transform: rotate(0deg); /* 縦線を横にしてマイナスに見せる */
}
/* 質問ボタン部分 */
.accordion-q button {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 25px 60px 25px 30px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}
/* Qの色（青） */
.accordion-q-prefix {
    font-family: var(--font-en);
    font-size: var(--fz-l);
    font-weight: 700;
    color: var(--color-primary);
    margin-right: 20px;
}
.accordion-q-content {
    font-weight: 700;
    font-size: var(--fz-base);
    color: var(--color-text);
}
/* 右側の＋アイコン */
.accordion-q-icon {
    position: absolute;
    right: 25px;
    width: 20px;
    height: 20px;
}
.accordion-q-icon::before,
.accordion-q-icon::after {
    content: "";
    display: block;
    position: absolute;
    background: var(--color-text);
    width: 100%;
    height: 2px;
    top: 9px;
    transition: 0.4s;
}
.accordion-q-icon::after {
    transform: rotate(90deg); /* 縦線 */
}
/* 開いた時にマイナスにする */
.is-open .accordion-q-icon::after {
    transform: rotate(0deg);
}
/* 回答部分 */
.accordion-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    visibility: hidden;
    
}

/* 開いた時 */
li.is-open .accordion-a {
    grid-template-rows: 1fr;
    visibility: visible;
}

/* 内部コンテナ：ここも余白は0にする */
.accordion-a-inner {
    overflow: hidden;
    /* paddingは消して、中身の要素で制御する */
}

/* 中身の実体：ここに余白を持たせる */
.accordion-a-content-wrapper {
    padding: 20px 30px 20px; /* 上・左右・下 */
    display: flex;
    align-items: center;
    border-top: 1px solid #f0f0f0;
}


/* アイコンの回転も少しゆっくり、滑らかに */
.accordion-q-icon::after {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Aの色（オレンジ） */
.accordion-a-prefix {
    font-family: var(--font-en);
    font-size: var(--fz-l);
    font-weight: 700;
    color: var(--color-secondary);
    margin-right: 20px;
}

.accordion-a-content p {
    font-size: var(--fz-s);
    line-height: 1.8;
    color: var(--color-text);
}

.accordion-q-prefix,
.accordion-a-prefix {
    display: inline-block; /* 幅を指定できるようにする */
    width: 1.5em;          /* 文字自体の幅に左右されない「箱」の幅 */
    margin-right: 5px;     /* 箱からの距離にするので、少し小さめでOK */
    text-align: left;      /* 左揃え */
    flex-shrink: 0;        /* 潰れないようにガード */
}

/* --- News Section --- */
.sec-news {
    padding-bottom: var(--space-section) ;
}


/* 白い枠のコンテナ */
.news-container {
    background: #fff;
    border-radius: 20px;
    padding: 40px 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin: 0 auto;
    margin-bottom: var(--space-section);
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 2px dotted #dddddd; /* ドットの区切り線 */
}

.news-item:last-child {
    border-bottom: none; /* 最後の線の除去 */
}

/* 日付とカテゴリーの塊 */
.news-meta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 300px; /* PCでの幅固定 */
}

.news-date {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: var(--fz-base);
    margin-right: 30px;
    color: #333;
}

/* カテゴリー（教室・イベント）のタグ */
.news-category {
    display: inline-block;
    border: 1px solid var(--color-gray);
    border-radius: 50px;
    padding: 4px 25px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    min-width: 100px;
}

/* お知らせ本文のリンク */
.news-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    flex-grow: 1;
    transition: color 0.3s;
    line-height: 1.6;
}

.news-link:hover {
    color: var(--color-primary); /* ホバー時にオレンジに */
}


/*
section05 (Access)
----------------------------------------------------------- */
/* --- SEC05: Access 全体の装飾 --- */
.sec05 {
    padding-bottom: var(--space-section);
    position: relative;
    background-color: #fff;
    /* ★方眼を30pxに戻して密度を上げる */
    background-image: 
        linear-gradient(rgba(76, 176, 230, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 176, 230, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
}
.access-content {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 60px; /* 隙間を少し詰める */
}
/* ★左側：写真エリアを大きく（flex: 1.5） */
.access-img-wrapper {
    position: relative;
    flex: 1.5; 
    max-width: 650px; /* 写真の最大サイズをアップ */
}
/* ★洗練された「目印バッジ」のデザイン */
.access-bubble {
    position: absolute;
    top: -20px;
    left: -10px;
    background: var(--color-secondary);
    color: #fff;
    padding: 8px 24px;
    border-radius: 100px; /* 綺麗な楕円に */
    font-weight: 700;
    font-size: var(--fz-xs);
    letter-spacing: 0.05em;
    z-index: 10;
    /* 少し斜めにして「ステッカー感」を出す */
    transform: rotate(-5deg);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    /* ふわふわ動かす */
    animation: badge-float 3s ease-in-out infinite;
}
/* バッジの小さな角（あえて控えめに） */
.access-bubble::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 40px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid var(--color-secondary);
    transform: rotate(15deg);
}
@keyframes badge-float {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50% { transform: rotate(-5deg) translateY(-8px); }
}
.access-img img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    /* 影を少しシャープにして今どきっぽく */
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    display: block;
}
/* 右側：情報エリア */
.access-info {
    flex: 1;
    max-width: 450px;
}
.access-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 25px;
    padding-bottom: 15px;
}
.access-item dt {
    font-weight: 700;
    color: var(--color-primary);
    font-size: var(--fz-base);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.access-item dd {
    font-size: var(--fz-base);
    line-height: 1.7;
    padding-left: 32px;
}
.access-item dd ul {
    list-style: none;
    padding: 0;
}
/* ボタンの位置 */
.access-btn {
    text-align: left; 
}

/*
footer
----------------------------------------------------------- */
.footer {
    background-color: var(--color-bg);
    padding-top: 60px; /* 上側の余白 */
}
.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直方向中央 */
    padding-bottom: 60px; /* コピーライトバーとの間の余白 */
}
/* ロゴ */
.footer-logo img {
    width: 200px;
    margin: 0;
}
/* ナビゲーション */
.footer-nav ul {
    list-style: none;
    padding: 0;
}
.footer-nav li {
    margin-bottom: 20px;
}
.footer-nav li:last-child {
    margin-bottom: 0;
}
.footer-nav a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--fz-base);
    transition: 0.3s;
}
.footer-nav a:hover {
    color: var(--color-primary);
}
/* ボタンエリア */
.footer-btns {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 15px;
}
/* フッター専用ボタンの基本形 */
.btn-footer {
    display: block;
    width: 180px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fz-base);
    transition: 0.3s;
}
.btn-orange {
    background-color: var(--color-secondary); 
    color: var(--color-white);
}
.btn-border {
    background-color: var(--color-white);
    color: var(--color-text);
    border: 1px solid #ccc;
}
.btn-footer:hover {
    opacity: 0.8;
}
/* コピーライトバー */
.copyright {
    background-color: var(--color-navy);
    color: var(--color-white);
    text-align: center;
    padding: 15px 0;
}
.copyright p {
    font-size: var(--fz-xs);
    letter-spacing: 0.05em;
}

/* ---★（ここから添削なし）ABT-MVセクション全体 --- */
.abt-mv {
    position: relative;
    width: 100%;
    min-height: 600px; /* PC時の高さ */
    background-color: var(--color-grid-bg);
    /* グリッド背景 */
    background-image: 
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    margin-top: 100px; /* ここにヘッダーの高さを入れてください */
}

/* --- 装飾円の配置とアニメーション --- */
.abt-mv-circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* テキスト選択の邪魔をしない */
}

.abt-mv-circles .circle {
    position: absolute;
    background-color: #4CB0E6;
    opacity: 0.5; /* 透過度 */
    border-radius: 50%;
    /* ふわふわアニメーションを適用 */
    animation: float 8s ease-in-out infinite;
}

/* 各円のサイズと初期位置 */
.circle-01 { width: 140px; height: 140px; top: -20px; left: 5%; animation-delay: 0s; }
.circle-02 { width: 300px; height: 300px; top: 20%; left: 18%; animation-delay: -2s; animation-duration: 10s; }
.circle-03 { width: 100px; height: 100px; bottom: 5%; left: -20px; animation-delay: -4s; }
.circle-04 { width: 400px; height: 400px; top: -10%; right: -5%; animation-delay: -1s; animation-duration: 12s; }
.circle-05 { width: 150px; height: 150px; bottom: 15%; right: 8%; animation-delay: -5s; }

/* ふわふわ浮遊するキーフレーム */
@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0);
    }
    33% {
        transform: translateY(-20px) translateX(10px) rotate(2deg);
    }
    66% {
        transform: translateY(10px) translateX(-10px) rotate(-2deg);
    }
}

/* ---★（ここから添削なし）ABT-SEC01セクション全体 --- */
.abt-sec01 {
    padding-bottom: var(--space-section);
}
.sec-lead .catch {
    padding-top: var(--space-section);
}
.abt-point-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* アイテム同士の間隔 */
    padding-bottom: var(--s);
}

.abt-point-item {
    display: flex;
    align-items: center; /* 文章を画像に対して上下中央に */
    justify-content: space-between;
    gap: 60px;
}

/* 画像側 */
.abt-point-img {
    flex: 0 0 50%;
}

.abt-point-img img {
    width: 100%;
    border-radius: 20px;
}

/* テキスト側 */
.abt-point-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.abt-point-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.abt-point-num {
    font-family: var(--font-en);
    font-size: var(--fz-xl-m); /* 40px */
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-top: 5px; /* タイトルの位置と微調整 */
}

/* 見出しのテキスト */
.abt-point-content .card-ttl {
    text-align: left;
    margin-bottom: 0; /* headの中で並べるのでmarginは不要 */
    font-size: var(--fz-m); /* 24px */
    line-height: 1.4;
    color: var(--color-text);
}

/* 本文のテキスト */
.abt-point-content .card-txt {
    font-size: var(--fz-base); /* 16px */
    line-height: calc(38 / 16);
    color: var(--color-text);
    margin-bottom: 0;
}

/* 点線の区切り（テキストの直下、画像の下には入らない） */
.abt-point-separator {
    width: 100%;
    height: 30px;
    margin-top: 40px;
    /* 丸いドットを繰り返す */
    background-image: radial-gradient(circle, #ddd 1.5px, transparent 2.5px);
    background-size: 16px 100%;
    background-position: left center;
    background-repeat: repeat-x;
}

/* --- abt-sec02 共通レイアウト --- */
.abt-sec02 {
    padding: var(--space-section) 0;
}

/* メイン見出し */
.abt-ttl {
    font-size: var(--fz-l);
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
}

.abt-ttl span {
    font-size: 1.5em; /* "3"を大きく */
    font-family: var(--font-en);
    margin: 0 0.1em;
}

/* リスト全体のレイアウト */
.abt-sec02-list {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* アイテム間の距離 */
    margin-top: 50px;
}

/* 各アイテムの器 */
.abt-sec02-item {
    flex: 1;
    text-align: center;
}


/* 円の装飾 */
.abt-sec02-circle {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin-bottom: 20px;
    position: relative; /* ★重要：ここを基準にする */
}

.abt-sec02-circle::after {
    content: "\f04b"; /* Font Awesome の play アイコン */
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    
    /* 縦方向の真ん中寄せ（魔法のセット） */
    top: 50%;
    transform: translateY(-50%); 
    
    /* 円の右側に出す（gapに合わせて調整） */
    right: -30px; 
    
    font-size: 1.2rem;
    color: #333;
    z-index: 2;
}

.abt-sec02-item:last-child .abt-sec02-circle::after {
    display: none;
}

.abt-sec02-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* イラスト全体が見えるように */
}


/* カラーバリエーション */
.color-blue   { color: var(--color-primary); }
.color-orange { color: var(--color-secondary); }
.color-green  { color: var(--color-tertiary); }

.abt-sec02-item-ttl {
    font-size: var(--fz-l);
    font-weight: 700;
}


/* テキスト */
.abt-sec02-txt {
    font-size: var(--fz-s); 
    line-height: 1.7;
    text-align: left;
    max-width: 300px;
}


/* --- abt-sec03: この教室をつくった人 --- */
.abt-sec03 {
    position: relative;
    padding: var(--space-section) 0;
    overflow: hidden; /* 装飾円のはみ出しをカット */
    background-color: #fff; /* グリッド背景のベース */
}

.bg-dot {
    background-color: #fff; /* ベースの背景色 */
    /* 1.5pxの円を20px間隔で並べる設定 */
    background-image: radial-gradient(rgba(76, 176, 230, 0.15) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

/* 背景装飾（円） */
.abt-sec03-decor .circle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* 円の配置と色（画像に合わせて調整） */
.circle-gray-tl { width: 220px; height: 220px; background-color: #F4F4F4; top: 10%; left: -50px; }
.circle-blue-bl { width: 300px; height: 300px; background-color: #D6EFFF; bottom: -50px; left: -80px; opacity: 0.8; }
.circle-gray-tr { width: 180px; height: 180px; background-color: #F4F4F4; top: 10%; right: -30px; }
.circle-blue-br { width: 280px; height: 280px; background-color: #D6EFFF; bottom: 5%; right: -100px; opacity: 0.7; }


.abt-sec03 .wrapper {
    position: relative;
    z-index: 10;
}

.abt-sec-header {
    text-align: center; /* ★これで中の inline-block 要素が中央に行きます */
    width: 100%;
}

.abt-deco-ttl {
    display: inline-block; /* ★重要：幅を文字の長さに合わせる */
    position: relative;
    padding: 0 60px;       /* 左右に線のスペースを空ける */
    color: var(--color-text);
    /* 以前設定した padding-top などは維持 */
}

.abt-deco-ttl::before,
.abt-deco-ttl::after {
    content: '';
    position: absolute;
    top: 55%;              /* 縦位置の微調整（文字の重心に合わせる） */
    width: 40px;           /* 線の長さ */
    height: 2px;           /* 線の太さ（3pxより2pxの方が今どきで綺麗です） */
    background-color: var(--color-text); /* 文字と同じ色 */
    border-radius: 2px;    /* 角をわずかに丸めると質感が上がります */
}

/* 左側の線 */
.abt-deco-ttl::before {
    left: 0;
}

/* 右側の線 */
.abt-deco-ttl::after {
    right: 0;
}
.abt-founder-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.abt-founder-text {
    flex: 1;
}

.abt-founder-heading {
    font-size: var(--fz-ms); 
    font-weight: 700;
    margin-bottom: 30px;
}

.abt-founder-body p {
    font-size: var(--fz-base);
    line-height: 1.8;
    margin-bottom: 1.5em;
}

.abt-founder-name {
    text-align: right;
    font-weight: 700;
    margin-top: 40px;
    font-size: var(--fz-base);
}

.abt-founder-img {
    flex: 0 0 500px; 
}

.abt-founder-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- abt-sec04: こんなご家庭に選ばれています --- */
.abt-sec04 {
    position: relative;
    padding: var(--space-section) 0 180px; /* 下側の余白を広めにとる（V字の深さ分） */
    /* ★V字に切り抜く（模様がそのまま残ります） */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 50% 100%, 0 calc(100% - 100px));
    z-index: 10;
}



/* ノート風のコンテナ */
.abt-notebook-box {
    margin: 0 auto;
    padding: 3.5em 2em 3.5em; /* 上を広めにして装飾スペースを確保 */
    position: relative;
    background: #fff; /* グリッド上で目立つように白背景 */
    max-width: 700px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 軽い影で浮遊感 */
    border-radius: 4px;
    box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.08), 
    0 5px 15px rgba(0, 0, 0, 0.04);
}

/* ノート上部のドット装飾（切り取り線風） */
.abt-notebook-box::before {
    content: '';
    position: absolute;
    inset: 0.6em 0 0 0;
    margin: 0 auto;
    width: 92%;
    border-top: dotted 12px var(--color-grid-bg); /* 背景と同じ色で抜く */
    pointer-events: none;
    opacity: 1;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15));
}

/* チェックリスト本体 */
.abt-check-list {
    list-style: none;
    padding: 0;
}

.abt-check-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 1.2em 0.5em;
    font-size: var(--fz-ms); /* 20px */
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 1px dotted #ccc; /* ノートの罫線 */
}


/* Font Awesome アイコンのスタイル */
.abt-check-list li i {
    color: #444; /* チェックの色（あえて落ち着いた黒系） */
    font-size: 1.1em;
    flex-shrink: 0;
}


.abt-check-list li {
    font-size: var(--fz-base); /* 16px */
    padding: 1em 0;
}
.abt-notebook-box {
    padding: 3em 1.5em 1.5em;
}

/* --- セクション境界の三角（V字）装飾 --- */
.abt-triangle-bottom {
    position: relative;
    z-index: 10; 
}

.abt-triangle-bottom::after {
    content: "";
    position: absolute;
    top: 100%; /* セクションの最下部に配置 */
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    border-right: 50vw solid transparent;
    border-left: 50vw solid transparent;
    pointer-events: none;
}
.liner span {
    /* マーカーの基本設定 */
    background: linear-gradient(transparent 60%, var(--color-accent) 60%);
    background-repeat: no-repeat;
    
    /* ★初期状態：マーカーの横幅を 0 にしておく */
    background-size: 0% 100%;
    
    font-size: var(--fz-l);
    padding: 0 0.3em;
    display: inline-block;
    
    /* ★アニメーションの速度指定 */
    /* 文字が下から出てくる（0.5s）のを待ってから引きたいので、delayをかけます */
    transition: background-size 0.8s ease-out 0.6s; 
}

/* ★セクションが画面に入った時（is-active）に横幅を 100% にする */
.is-active .liner span {
    background-size: 100% 100%;
}

/* --- abt-sec05: 下側の青いセクション --- */
.abt-sec05 {
    background-color: var(--color-primary);
    color: #fff;
    margin-top: -200px; 
    padding: 240px 0 100px;
    position: relative;
    /* ★重要：セクション自体に z-index を指定し、中身のギアが見えるようにする */
    z-index: 5; 
}

.abt-cta-box .abt-ttl {
    padding-top: var(--space-section);
}

.abt-cta-box .btn-primary {
    background: var(--color-accent);
}
/* ギアの配置（左右） */
.abt-sec05 .gear-img {
    /* 元の画像が何色でも、これで真っ白になります */
    filter: brightness(0) invert(1); 
}
.cta-gear-left {
    width: 220px;
    top:350px; /* 頂点からの位置 */
    left: calc(50% - 620px);
    z-index: 1; /* ★重要：背景色より上の数字にする */
}

.cta-gear-right {
    width: 300px;
    top: 200px;
    left: calc(50% + 380px);
    z-index: 1; /* ★重要：背景色より上の数字にする */
}
/* --- 無限ループスライダー --- */
.abt-gallery {
    width: 100%;
    overflow: hidden; /* はみ出しを隠す */
    padding: 60px 0;
    background-color: var(--color-primary);
}

.slide-contents {
    display: flex;
    gap: 20px;
    width: max-content; /* 中身の幅を確保 */
    will-change: transform; /* アニメーションを滑らかにするプロの指定 */
}

.slide-contents li {
    width: 350px; /* PCサイズ */
    flex-shrink: 0;
}

.slide-contents li img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
}

.btn-primary.btn-yellow {
    background-color: var(--color-accent); /* イエロー #FBCB0A */
    color: var(--color-text);             /* 文字色は黒系 #333 */
    border: 3px solid var(--color-btn-text); /* デザイン上の濃い枠線 */
}

/* ホバー時の挙動 */
@media (hover: hover) {
    .btn-primary.btn-yellow:hover {
        background-color: var(--color-btn-text); /* ホバーで濃いグレー #313131 に */
        color: var(--color-white);                /* 文字を白に */
    }
}
/* --- Course Contents --- */


.crs-sec02 {
    padding-bottom: var(--space-section);
}

.sec-ttl-sub {
    font-size: var(--fz-m);
    font-weight: 700;
    margin-bottom: 10px;
}

/* 3色のドット装飾 */
.color-dots {
    display: flex;
    gap: 8px;
    padding-bottom: 30px;
}
.color-dots span {
    width: 8px; height: 8px; border-radius: 50%;
}
.color-dots span:nth-child(1) { background-color: var(--color-primary); }
.color-dots span:nth-child(2) { background-color: var(--color-secondary); }
.color-dots span:nth-child(3) { background-color: var(--color-tertiary); }


/* カードのリスト */
.course-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* カード本体（横並び・白背景・影） */
.course-item {
    scroll-margin-top: 100px;
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 45px 50px;
    gap: 50px;
    box-shadow:1px 1px 5px #afafaf;
    color: var(--color-text);
}

/* 左側のテキストエリア */
.course-body {
    flex: 1;
}

/* 見出しの装飾（左側の太い線） */
.course-title {
    font-size: var(--fz-m); /* 24px */
    font-weight: 700;
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 8px solid #ddd; /* 基本の太い線 */
}

/* コースごとの色指定（見出しの色と線の色） */
.color-orange { color: var(--color-secondary); border-left-color: var(--color-secondary); }
.color-green  { color: var(--color-tertiary); border-left-color: var(--color-tertiary); }
.color-blue   { color: var(--color-primary); border-left-color: var(--color-primary); }
.color-navy   { color: var(--color-navy); border-left-color: var(--color-navy); }

/* コースごとの色指定（背景色） */
.course-item.color-orange { background-color: color-mix(in srgb, var(--color-secondary), white 95%); }
.course-item.color-green  { background-color: color-mix(in srgb, var(--color-tertiary), white 95%); }
.course-item.color-blue   { background-color: color-mix(in srgb, var(--color-primary), white 95%); }
.course-item.color-navy   { background-color: color-mix(in srgb, var(--color-navy), white 95%); }

/* タグ（対象・時間）の横並び */
.course-meta {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
}

.meta-tag {
    display: flex;
    align-items: center;
    font-weight: 700;
    color:var(--color-text)
}

/* 「対象」「時間」のグレーの丸 */
.label {
    background-color: #E6E6E6;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: var(--fz-s); /* 15px */
    margin-right: 12px;
}

.value {
    font-size: var(--fz-s);
}

/* 説明文 */
.course-desc {
    font-size: var(--fz-base); /* 16px */
    line-height: 2; /* 行間を広げて見本に合わせる */
    text-align: left;
    color:var(--color-text)
}

/* 右側の画像 */
.course-img {
    flex: 0 0 42%;
}

.course-img img {
    border-radius: 20px;
    width: 100%;
}

/* --- Price Table --- */
.crs-sec03 {
    padding-bottom: var(--space-section);
}
.price-table-wrapper {
    width: 100%;
    margin-top: 20px;
    overflow-x: auto; /* スマホ対策 */
}

/* --- テーブル全体のレイアウト --- */
.price-table {
    width: 100%;
    /* セルを分離させて隙間を作る */
    border-collapse: separate;
    border-spacing: 8px 12px; 
    table-layout: fixed; /* 列の幅を安定させる */
}

/* --- ヘッダー（グレーの部分） --- */
.price-table th {
    background-color: #e0e0e0;
    color: #333;
    padding: 15px;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
}

/* --- 全てのデータセルの基本設定 --- */
.price-table td {
    padding: 25px 15px;
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    border-radius: 4px;
    position: relative;
    color: #333;
}

/* --- 左端のコース名セルの設定 --- */
.price-table td.t-name {
    color: #fff; /* 文字を白に */
    font-size: 1.1rem;
}

/* 三角形の突起を作る */
.price-table td.t-name::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px; /* セルの外側に少し出す */
    transform: translateY(-50%);
    border-style: solid;
    border-width: 10px 0 10px 12px; /* 右向きの三角形 */
    border-color: transparent transparent transparent currentColor; /* 現在の色を使用 */
    z-index: 10;
}

/* --- カラーバリエーションの設定 --- */

/* オレンジ */
.row-orange td.t-name { background-color: var(--color-secondary); color: #fff; }
.row-orange td.t-name::after { color: var(--color-secondary); } /* 三角形の色 */
.row-orange td:not(.t-name) { background-color: rgba(243, 152, 0, 0.08); } /* 薄い背景 */

/* 緑 */
.row-green td.t-name { background-color: var(--color-tertiary); color: #fff; }
.row-green td.t-name::after { color: var(--color-tertiary); }
.row-green td:not(.t-name) { background-color: rgba(140, 198, 63, 0.08); }

/* 青 */
.row-blue td.t-name { background-color: var(--color-primary); color: #fff; }
.row-blue td.t-name::after { color: var(--color-primary); }
.row-blue td:not(.t-name) { background-color: rgba(0, 160, 233, 0.08); }

/* 紺 */
.row-navy td.t-name { background-color: var(--color-navy); color: #fff; }
.row-navy td.t-name::after { color: var(--color-navy); }
.row-navy td:not(.t-name) { background-color: rgba(0, 50, 100, 0.08); }

/* 金額の強調 */
.t-price {
    font-size: 1.2rem;
    color: #333;
}

/* 注意書き */
.price-notes {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}


.crs-sec04{
    margin-top: 0;
    padding: 0;
}

.crs-sec04 .cta-gear-left {
    top: 200px; 
}
.crs-sec04 .cta-gear-right {
    top: 50px; 
}

/* =========================================================
出張授業ページ (Outreach Page)
   ========================================================= */

/* ご利用シーン */
.out-sec02 {
    padding-bottom: var(--space-section);
}
.scene-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.scene-item {
    flex: 1;
    max-width: 350px;
    text-align: center;
}

/* --- 数字と見出しのエリア --- */
.scene-head {
    display: flex;
    align-items: flex-end; 
    margin-bottom: 15px;
    position: relative;
    justify-content: center; 
}

/* 数字のスタイル */
.scene-num {
    font-family: 'Urbanist', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 0.9;
    opacity: 0.3; 
    border-bottom: 1px solid currentColor; 
    padding-bottom: 5px;
    margin-right: -18px; 
    z-index: 1;
}

/* タイトルのスタイル */
.scene-item-ttl {
    font-size: 1.15rem;
    font-weight: 700;
    color: #333;
    z-index: 2; /* 数字の上にくるように設定 */
    margin-bottom: 10px; /* ラインより少し上に浮かす調整 */
    white-space: nowrap; /* 改行を防いで重なりを維持 */
}


/* 画像エリア */
.scene-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 15px;
    position: relative; 
}

.scene-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}


.scene-txt {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
}

.scene-item h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* 授業の流れ */
/* --- 共通の矢印リストレイアウト --- */
.out-sec03 {
    padding: var(--space-section) 0;
}

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

/* 共通の矢印（シェブロン）スタイル */
.flow-item {
    flex: 1;
    position: relative;
    padding: 45px 15px 40px 35px; /* 左側に凹みがある分、左パディングを多めに */
    text-align: center;
    color: #333;
    /* 矢印の形に切り抜く（右が凸、左が凹） */
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
}

/* 1番目のアイテムだけ左端をまっすぐにする */
.flow-item:first-child {
    padding-left: 20px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

/* 各ステップの背景色（4段階のグラデーション） */
.step-01 { background-color: #56b7e6 }
.step-02 { background-color: #3d9cd1; }
.step-03 { background-color: #2482bd; }
.step-04 { background-color: #1a608d; }

/* 数字の白い丸 */
.flow-num {
    width: 38px;
    height: 38px;
    background: #fff;
    color: #3e9ed8; /* step-04の色 */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* ★テキストブロックを中央に寄せる設定 */
.flow-body {
    display: inline-block;
    text-align: left; /* 文字自体は左揃え */
    width: fit-content;
    max-width: 100%;
    color: var(--color-white);
}

.flow-item h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
    color: inherit; /* 背景に合わせて見やすい色に */
}

.flow-item p {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

/* OUT-SEC04: Q&A */
.out-sec04 {
    padding: var(--space-section) 0;
}
/* Contact Area */
.out-sec05{
    margin-top: 0;
    padding: 0;
}
/* タイトルとリード文を白にするためのクラス */
.out-sec05 .sec-ttl,
.out-sec05 .sec-ttl span {
    color: var(--color-white) ;
}
.contact-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: var(--space-section);
}

/* 白いカード本体 */
.contact-card {
    background-color: var(--color-white);
    border-radius: 12px;
    flex: 1;
    max-width: 500px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 軽い影をつける */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.contact-info-inner {
    display: flex;
    gap: 20px;         
}
.contact-text-group {
    display: flex;
    flex-direction: column;
    width: fit-content; 
    align-items: flex-start; 
}
/* 点線パーツの上書き */
.contact-text-group .abt-point-separator {
    width: 100%; 
    height: 12px;
    margin: 8px 0; 
    background-image: radial-gradient(circle, #ddd 1.5px, transparent 1.5px);
    background-size: 12px 100%;
    background-repeat: repeat-x;
}
/* 丸枠アイコン */
.contact-icon {
    width: 60px;
    height: 60px;
    background-color: var(--color-primary); /* 水色 */
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

/* 電話番号・メールアドレスの大きな文字 */
.contact-main-text {
    font-size: var(--fz-l); 
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.02em;
}

.abt-cta-box .abt-point-separator {
    margin: 0 auto; /* 上下の余白を詰めて中央寄せ */
}

/* 受付時間のテキスト */
.contact-sub-text {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    color: var(--color-text);
}

.out-sec05 .cta-gear-left {
    width: 220px;
    top:300px; /* 頂点からの位置 */
    left: calc(50% - 720px);
    z-index: 1; /* ★重要：背景色より上の数字にする */
}

.out-sec05 .cta-gear-right {
    width: 300px;
    top: 10px;
    left: calc(50% + 380px);
    z-index: 1; /* ★重要：背景色より上の数字にする */
}

/* =========================================================
お知らせ
   ========================================================= */

.news-sec-01 {
    padding-top: var(--space-section);
}

/* 簡易的なページネーションのスタイル */
.pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: center;
}

.pagination .num, .pagination .prev, .pagination .next {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
    border: 1px solid #ddd;
    transition: all 0.3s;
}

.pagination .num.current {
    background-color: #eb6100;
    color: #fff;
    border-color: #eb6100;
}

.pagination .num:hover:not(.current) {
    background-color: #f0f0f0;
}

/* =========================================================
お知らせシングルページ
   ========================================================= */
/* --- Breadcrumb (パンくずリスト) --- */
.breadcrumb {
    padding: 20px 0;
    font-size: 0.9rem;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* スマホで長くなった時に折り返す設定 */
    align-items: center;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    color: #333; /* 現在のページの文字色 */
    font-weight: 500;
}

/* リンクになっている部分（TOPとお知らせ） */
.breadcrumb li a {
    text-decoration: none;
    color: #b7b7b7; /* 画像のような薄いグレー */
    transition: color 0.3s;
}

.breadcrumb li a:hover {
    color: #eb6100; /* ホバー時はオレンジ */
}

/* 区切り記号（ドット）の設定 */
.breadcrumb li:not(:last-child)::after {
    content: "•";
    margin: 0 15px;
    color: #b7b7b7;
}

/* 英単語（TOP）だけフォントを変える場合 */
.breadcrumb li a[href="index.html"] {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
}


   /* --- News Detail Page --- */
.news-detail-content {
    padding-top: var(--space-section);
}


.detail-container {
    background: #fff;
    border-radius: 20px;
    padding: 60px;
    max-width: 900px;
    margin: 0 auto 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* メタ情報（日付・カテゴリー） */
.detail-meta {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.detail-date {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #888;
    margin-right: 20px;
}

.detail-category {
    border: 1px solid #333;
    border-radius: 50px;
    padding: 2px 15px;
    font-size: 0.85rem;
}

/* タイトル */
.detail-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
}

/* メイン画像 */
.detail-main-img {
    margin-bottom: 40px;
}
.detail-main-img img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* 記事本文 */
.detail-body {
    line-height: 1.8;
    font-size: 1.05rem;
    color: #333;
    margin-bottom: 60px;
}

.detail-body p {
    margin-bottom: 20px;
}

.detail-body h3 {
    font-size: 1.4rem;
    border-left: 5px solid #eb6100;
    padding-left: 15px;
    margin: 40px 0 20px;
}

.detail-body ul {
    margin-bottom: 20px;
    list-style: disc;
    padding-left: 20px;
}

/* フッター（戻るボタン） */
.detail-footer {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 50px;
}



/* =========================================================
無料体験会
   ========================================================= */

/* --- 無料体験ページ専用 MV 修正版 --- */

/* 1. セクション全体の高さと余白を再定義 */
.abt-mv.trial-page-mv {
    height: auto;
    min-height: 600px; /* 全体の高さをしっかり確保 */
    padding-bottom: 0 !important;   /* ★下側の余白を完全にゼロにする */
    display: flex;
    align-items: stretch;
}

/* 2. wrapper自体を下揃えにする */
.abt-mv.trial-page-mv .wrapper {
    display: flex;
    align-items: flex-end; /* ★これで中身を一番下（底）に強制的に沈める */
    width: 100%;
}

/* 3. コンテナ（左右の並び）の設定 */
.trial-page-mv .trial-mv-container {
    display: flex;
    align-items: flex-end; /* 画像とテキストエリアを下で揃える */
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

/* 4. 左側：テキストエリアの調整 */
.trial-page-mv .trial-mv-text {
    flex: 1;
    /* 画像は底につくが、テキストは適度な高さに浮かせたいので下余白を入れる */
    padding-bottom: 180px; 
    z-index: 10;
}

/* 5. 右側：画像エリアの調整 */
.trial-page-mv .trial-mv-img {
    flex: 1.7;
    line-height: 0; /* 画像下の数ピクセルの隙間を消す */
}

.trial-page-mv .trial-mv-img img {
    width: 100%;
    max-width: 800px;
    display: block; /* インライン要素の隙間を消す */
    height: auto;
    vertical-align: bottom;
}

/* --- パーツ単体のスタイル --- */

/* 青い丸文字バッジ（デザインに合わせて青色に修正：もし青変数が別にあればそれを使ってください） */
.trial-badge {
    display: inline-block;
    background-color: var(--color-secondary); /* デザイン通りの青色に固定 */
    color: #fff;
    font-weight: 700;
    padding: 6px 24px;
    border-radius: 50px;
    font-size: 1.125rem;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* キャッチコピー */
.trial-main-copy {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text);
}

/* --- キャンペーンセクション全体 --- */

/* キャンペーンセクション全体 */
.trial-sec01 {
    padding: var(--space-section) 0;
}

/* 青い外枠のボックス */
.campaign-box {
    position: relative;
    border: 3px solid #56B7E6;
    border-radius: 12px;
    padding: 60px 15px 50px;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
    text-align: center;
}

/* 右上のステッカー画像 */
.campaign-sticker {
    position: absolute;
    top: -55px; /* ボックスの上にはみ出させる */
    right: 30px;
    width: 160px;
    z-index: 10;
}
.campaign-sticker img {
    width: 100%;
    height: auto;
}

/* タイトル画像と黄色い下線 */
.campaign-ttl {
    display: inline-block;
    position: relative;
    margin-bottom: 25px;
}
.campaign-ttl img {
    max-width: 630px; /* PCでの表示サイズを調整 */
    height: auto;
}
.campaign-ttl::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #FFD100;
    z-index: -1;
}


/* 特典カードの並び */
.benefit-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.benefit-card {
    flex: 1;
    max-width: 420px;
    border: 3px solid;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* 特典ヘッダー（文字部分はテキストでOK） */
.benefit-header {
    padding: 10px;
    font-weight: 700;
    font-size: 1.3rem;
    text-align: center;
}

.benefit-content {
    flex-grow: 1;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.benefit-content img {
    width: 100%;
    height: auto;
}

/* イエロー特典の色分け */
.benefit-yellow { border-color: #FFD100; }
.benefit-yellow .benefit-header { background-color: #FFD100; color: #333; }

/* ブルー特典の色分け */
.benefit-blue { border-color: #56B7E6; }
.benefit-blue .benefit-header { background-color: #56B7E6; color: #fff; }


.trial-sec02 .box-point {
    font-size: var(--fz-m);
}
.trial-sec02 .box-icon {
    /* 固定サイズを解除して横幅いっぱいに広げる */
    width: 100%; 
    height: auto; 
    margin-bottom: 25px;
}

.trial-sec02 .box-icon img {
    width: 100%;
    height: auto;
    /* containからcoverに変えると、枠いっぱいに写真が広がります */
    object-fit: cover; 
    border-radius: 5px; /* 写真らしく角を少し丸める */
}

.trial-sec02 .box-ttl {
    /* 文字のサイズや間隔を微調整 */
    font-size: 1.25rem;
    line-height: 1.4;
    margin-top: auto; /* 画像との間隔を調整 */
}
/* --- trial-sec03 無料体験の流れ --- */

.trial-sec03 {
    padding: var(--space-section) 0;
}

/* リスト全体のレイアウト */
.flow-list {
    display: flex;
    justify-content: center;
}

/* 共通の矢印ボックススタイル */
.flow-item {
    flex: 1;
    position: relative;
    padding: 40px 20px 40px 40px; /* 左側を少し多めに開ける */
    text-align: center;
    color: #333;
    border: none;
    border-radius: 3px;
    /* 矢印の形に切り抜く（右が凸、左が凹） */
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%, 12% 50%);
}

/* 1つ目だけ左側をまっすぐにする */
.flow-item:first-child {
    padding-left: 20px;
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
}

/* ★ここがポイント：テキストブロックの設定 */
.flow-body {
    display: inline-block; /* 中身の幅に合わせる */
    text-align: center;      /* 文字自体は左揃えにする */
    max-width: 100%;       /* はみ出し防止 */
}
/* 数字の白い丸 */
.flow-num {
    width: 45px;
    height: 45px;
    background: #fff;
    color: #49A9E1; /* step-03と同じ青 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en); /* Urbanistなど */
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 auto 15px;
}

/* ステップ見出し */
.flow-ttl {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* ステップ説明文 */
.flow-txt {
    font-size: 0.9rem;
    line-height: 1.6;
}

.trial-sec04 {
    padding: var(--space-section) 0;
}

.trial-sec05 {
    padding: var(--space-section) 0;
    background-color: var(--color-white);
}

.trial-sec05 .sec-header-sub {
    text-align: center; /* タイトルを中央へ */
}

/* ドットの中央寄せ */
.trial-sec05 .color-dots {
    justify-content: center;
}

.trial-sec05 .form-intro {
    text-align: center; /* リード文も中央へ */
    margin-bottom: 50px;
    line-height: 1.8;
}

/* フォームの器 */
.form-container {
    max-width: 650px; /* 画像のバランスに合わせて少し狭める */
    margin: 0 auto;
}

/* 各入力項目のまとまり */
.form-item {
    margin-bottom: 25px;
}

/* ラベルテキスト */
.form-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 12px;
    color: #333;
}

/* プルダウンの親要素（矢印を配置する基準） */
.form-select-wrap {
    position: relative;
    width: 100%;
}

/* プルダウン本体のデザイン */
.form-select {
    width: 100%;
    padding: 15px;
    background-color: #e0e0e0; /* 他の入力欄と同じグレー */
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    color: #333;
    outline: none;
    cursor: pointer;
    
    /* ブラウザ標準の矢印を消す */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 自作の矢印（右側の ∨ マーク） */
.form-select-wrap::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 7px;
    background-color: #666; /* 矢印の色 */
    /* 三角形の形に切り抜く */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none; /* 矢印の上をクリックしてもセレクトボックスが反応するように */
}

/* 他の入力欄（form-input / form-textarea）にフォーカスが当たった時と同様の処理 */
.form-select:focus {
    background-color: #d0d0d0;
}
/* 入力欄共通（薄グレー背景） */
.form-input,
.form-textarea {
    width: 100%;
    padding: 15px;
    background-color: #e0e0e0; /* 画像に合わせた薄グレー */
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
    transition: background-color 0.3s;
}

/* フォーカス時の色変更 */
.form-input:focus,
.form-textarea:focus {
    background-color: #d0d0d0;
}

/* テキストエリアの高さ */
.form-textarea {
    height: 300px; /* 画像に合わせて大きめに */
    resize: vertical;
}

/* 送信ボタンエリア */
.form-submit {
    text-align: center;
    margin-top: 50px;
}

/* 送信ボタン本体 */
.btn-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    padding: 16px 20px;
    background-color: #fff;
    color: #555;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border: 3px solid #666; /* 太めのグレー枠線 */
    border-radius: 50px;    /* 完全な丸み */
    cursor: pointer;
    transition: all 0.3s;
}

/* ボタンホバー時 */
.btn-submit:hover {
    background-color: #666;
    color: #fff;
    transform: translateY(-2px);
}