@charset "UTF-8";
/* CSS Document */
/* ========= THEME (Orange) ========= */
:root{
  --ink:#2f2b38;
  --muted:#756b67;
  --line:#f2e9e3;
  --bg:#fffdfb;

  --orange-50:#ffe9d8;   /* 背景 */
  --orange-100:#ffd4b1;  /* 薄い装飾 */
  --orange-200:#FFC4A6;  /* アクセント */
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.06);
}
/* === Course card with photo === */
.card-media{
  position:relative; overflow:hidden; border-radius:12px; 
  aspect-ratio: 4 / 3;             /* 推奨比率：4:3（横1200×900など） */
  background:#fff7ef; border:1px solid var(--orange-50); 
  box-shadow: inset 0 0 0 1px #fff8f1;
}
.card-media picture, .card-media img{ width:100%; height:100%; display:block; object-fit:cover }
.card-media figcaption{
  position:absolute; left:10px; bottom:10px; 
  padding:.28rem .55rem; border-radius:999px;
  background:rgba(255,255,255,.86); border:1px solid #ffe2cd;
  color:#6b3f1f; font-size:.82rem; font-weight:700;
  backdrop-filter: blur(2px);
}

/* 画像ホバー（軽いズーム） */
.card:hover .card-media img{ transform:scale(1.04); transition:transform .35s ease }
.card-media img{ transition:transform .35s ease }

/* タイトルまわりの余白を調整（写真付き想定） */
.card h3{ margin:.7rem 0 .35rem }

/* ========= BASE ========= */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Hiragino Sans','Yu Gothic',system-ui,sans-serif;line-height:1.9}
a{color:#a65a00;text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1120px;margin:0 auto;padding:24px 20px}


/* ========= HERO (extra soft + gentle glow animation) ========= */
.hero{
  position:relative; overflow:hidden; text-align:center; color:#2b2623;
  /* 背景をもう1段階淡く（白寄り） */
  background:
    radial-gradient(900px 260px at 10% -10%, rgba(255,255,255,.82), transparent 60%),
    linear-gradient(135deg, #fff9f4 0%, #fff1e8 45%, #ffe8d7 100%);
  padding:64px 20px 56px;
  border-bottom:1px solid rgba(0,0,0,.05);
}

/* 細い“光の筋”が左→右へ、より上品に */
.hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  /* かなり細めのハイライト帯（角度はほんの少しだけ斜め） */
  background:
    linear-gradient(112deg,
      transparent 0%,
      rgba(255,255,255,.00) 46%,
      rgba(255,255,255,.38) 49%,
      rgba(255,255,255,.70) 50%,
      rgba(255,255,255,.38) 51%,
      rgba(255,255,255,.00) 54%,
      transparent 100%
    );
  background-size: 260% 100%;   /* 細い帯が画面を横断 */
  transform: translateX(-40%);  /* 左から開始 */
  animation: heroSheenThin 6.2s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity:.48;                  /* 目立つ場合は .40 〜 .44 に */
}

/* 左→右、一定速度寄りで上品に */
@keyframes heroSheenThin{
  0%   { transform: translateX(-40%); }
  100% { transform: translateX(120%); }
}

/* 動きを抑える環境配慮 */
@media (prefers-reduced-motion: reduce){
  .hero::after{ animation: none; opacity: 0; }
}

/* 1) レイヤーの基礎：ヒーロー内の要素を前面に */
.hero{ position: relative; isolation: isolate; } /* 新規 */
.hero > *{ position: relative; z-index: 1; }     /* テキストなどは前面へ */

/* 2) 細い光の帯：左→右（上品で控えめ） */
.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index: 0;                 /* 背景の上、テキストの下に配置 */
  pointer-events:none;
  background:
    linear-gradient(112deg,
      transparent 0%,
      rgba(255,255,255,0.00) 46.5%,
      rgba(255,255,255,0.42) 49.2%,
      rgba(255,255,255,0.74) 50%,
      rgba(255,255,255,0.42) 50.8%,
      rgba(255,255,255,0.00) 53.5%,
      transparent 100%
    );
  background-size: 260% 100%;
  transform: translateX(-42%);
  animation: heroSheenThin 6.5s linear infinite;
  mix-blend-mode: screen;
  opacity: .48; /* 弱ければ .55、強すぎれば .40 に */
}

/* 3) アニメーション本体（左→右） */
@keyframes heroSheenThin{
  0%   { transform: translateX(-42%); }
  100% { transform: translateX(118%); }
}

/* ※ 動きを抑える環境では非表示（必要なら削除OK） */
@media (prefers-reduced-motion: reduce){
  .hero::after{ animation: none; opacity: 0; }
}


/* ========= SECTION HEAD ========= */
.section-title{
  text-align:center; font-size:clamp(1.2rem,3.2vw,1.8rem); margin:28px 0 10px;
  color:#3a2c21; position:relative; display:inline-block; padding-bottom:12px;
}
.section-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:120px; height:8px; border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--orange-100),var(--orange-200),var(--orange-100),transparent);
  box-shadow:0 6px 14px rgba(255,191,139,.28);
}

/* ========= FEATURES ========= */
.features{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:18px auto 6px;
}
.feat{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px; box-shadow:var(--shadow)
}
.feat strong{display:block; margin-bottom:4px; color:#5d3b22}
.badge-free{
  display:inline-block; margin-left:.4rem; padding:.15rem .45rem; font-size:.82rem; border-radius:999px;
  background:var(--orange-50); border:1px solid var(--orange-100); color:#6b3f1f; font-weight:700
}

/* ========= COURSES ========= */
.course-grid{
  display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:4px
}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.card h3{
  margin:.2rem 0 .4rem; font-size:1.15rem; color:#3f2e1f; position:relative; padding-left:1.4rem
}
.card h3::before{
  content:""; position:absolute; left:0; top:.45rem; width:10px; height:10px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #ffffffb3 0 38%, transparent 39%),
    linear-gradient(180deg, var(--orange-100), var(--orange-200));
  box-shadow:0 2px 8px rgba(255,191,139,.45)
}
.card p{margin:0 0 .5rem; color:#4a4340}
.card ul{margin:.2rem 0 0 0; padding:0; list-style:none}
.card li{position:relative; padding-left:1.1rem; margin:.35rem 0}
.card li::before{
  content:"•"; position:absolute; left:0; color:#e78c3a; font-weight:900
}

/* ========= WHO ========= */
.bullets{
  list-style:none; margin:10px auto 0; padding:0;
  display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.bullets li{ position:relative; padding:.55rem .8rem .55rem 1.3rem; border:1px dashed var(--orange-100);
  border-radius:12px; background:#fff }
.bullets li::before{
  content:""; position:absolute; left:.55rem; top:1.05rem; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(180deg,var(--orange-100),var(--orange-200))
}

/* ========= HOW / SUPPORT ========= */
.panel{
  background:#fff; border:2px solid var(--orange-50); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.panel h4{margin:.1rem 0 .4rem; color:#5a3a22}
.panel p{margin:0}

/* ========= CTA ========= */
.cta{
  display:flex; gap:.7rem; justify-content:center; margin:18px 0 6px; flex-wrap:wrap
}
.btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.7rem 1.1rem; border-radius:999px; border:1px solid #e8d7c9;
  background:#fff; color:#5a3a22; font-weight:800; box-shadow:0 8px 20px rgba(0,0,0,.06)
}
.btn--solid{
  color:#fff; border-color:var(--orange-200);
  background:linear-gradient(180deg,var(--orange-100),var(--orange-200))
}
.btn--solid:hover{transform:translateY(-1px)}
.note{ color:#6c625d; font-size:.92rem }

/* ========= FOOTER NOTE ========= */
.small{font-size:.9rem;color:#6e665f}

/* ========= MEDIA ========= */
@media (max-width:640px){
  .hero{padding:48px 18px}
}

/* =========================
   FOOTER ORANGE THEME OVERRIDE
   ========================= */

/* パレット（未定義なら有効化） */
:root{
  --salmon: #FFA69E;
  --peach: #FFBCB3;
  --peach-soft: #FFD0C9;
  --rose-orange: #E8A598;
}

/* ベース（白背景＋ほんのり浮かせる） */
.foot-compact{
  margin-top:48px;
  background:#fff;
  border-top:1px solid #f1dfda;                 /* ピーチ寄りの境界線 */
  box-shadow: 0 -4px 18px rgba(232,165,152,.10);/* ごく淡いサーモン影 */
  position:relative;
}
.foot-compact::before{ display:none; }          /* 二重線はオフ（使うなら色を #ffe3db に） */

/* グリッド等はそのまま */
.foot-ct{
  max-width:1120px; margin:0 auto; padding:22px 20px;
  display:grid; gap:14px; align-items:center; grid-template-columns: 1fr auto auto;
}

/* テキスト色を少し温かめに */
.foot-brand .sub{ color:#7a5d55; font-size:.9rem; margin-top:4px }

/* リンク：温かいブラウン寄り＋ピーチの点線 */
.foot-links{ display:flex; gap:16px; flex-wrap:wrap; justify-self:center }
.foot-links a{
  color:#8a5a46; text-decoration:none; border-bottom:1px dotted #ffcabf;
}
.foot-links a:hover{ color: var(--rose-orange); border-bottom-color: var(--rose-orange); }

/* アクセントピル：ピーチ→サーモンのグラデ */
.foot-links .accent{
  color:#fff;
  background: linear-gradient(180deg, var(--peach), var(--salmon));
  padding:.42rem .7rem; border-radius:999px;
  border:1px solid var(--rose-orange);
  box-shadow: 0 4px 14px rgba(232,165,152,.18);
}

/* Instagramボタン：枠・アイコンをオレンジ系に */
.ig-btn{
  justify-self:end; display:inline-flex; align-items:center; gap:.45rem;
  color:#8a5a46; text-decoration:none; padding:.35rem .6rem;
  border:1px solid #f1dfda; border-radius:999px; background:#fff;
}
.ig-btn svg{ fill:none; stroke: var(--rose-orange); stroke-width:1.4 }
.ig-btn:hover{ box-shadow:0 6px 18px rgba(232,165,152,.16) }

/* コピーライトの色味を少し温かく */
.copy{ grid-column:1/-1; text-align:center; color:#a08179; font-size:.85rem; margin-top:6px }

/* SPレイアウトは従来通り */
@media (max-width:720px){
  .foot-ct{ grid-template-columns:1fr; justify-items:center; text-align:center }
  .ig-btn{ justify-self:center }
}

/* 既存 .k-foot の色替え（使っている場合のみ） */
.k-foot a, .k-foot .k-pill__label { color:#8a5a46; }
.k-foot a:hover{ color: var(--rose-orange); }

/* =========================
   SALMON–PEACH THEME OVERRIDE
   （このブロックをCSS一番下に追記）
   ========================= */
:root{
  /* 新パレット */
  --salmon:#FFA69E;       /* サーモンピンク（主アクセント） */
  --peach:#FFBCB3;        /* ピーチブロッサム（中間） */
  --peach-soft:#FFD0C9;   /* 淡いピーチピンク（背景・帯） */
  --rose-orange:#E8A598;  /* ローズオレンジ（締め色・ハイライト） */

  /* 既存のオレンジ系トークンへマッピング */
  --orange-50:  var(--peach-soft);
  --orange-100: var(--peach);
  --orange-200: var(--salmon);

  /* 影・枠はそのまま流用可 */
}

/* ==== Hero（やわらかサーモングラデ） ==== */
.hero{
  background:
    radial-gradient(900px 260px at 12% -8%, rgba(255,255,255,.75), transparent 60%),
    linear-gradient(135deg, var(--peach-soft) 0%, var(--peach) 42%, var(--salmon) 100%);
  color:#2f2b38;
}
.hero .eyebrow{
  background:#fff; border:1px solid #f3e6e2; color:#6b3f1f;
}

/* ==== セクション下線（中央カプセルの色替え） ==== */
.section-title::after{
  background: linear-gradient(90deg, transparent, var(--peach), var(--salmon), var(--peach), transparent);
  box-shadow: 0 6px 14px rgba(232,165,152,.28);
}

/* ==== カード・枠色（淡いピーチ寄り） ==== */
.card,
.feat,
.panel{
  border-color: #f4e3df;
  box-shadow: 0 10px 28px rgba(232,165,152,.10);
}

/* ==== ドット・アイコンのグラデ（サーモン→ローズ） ==== */
.card h3::before,
.bullets li::before{
  background:
    radial-gradient(circle at 30% 30%, #ffffffb3 0 38%, transparent 39%),
    linear-gradient(180deg, var(--peach), var(--salmon));
  box-shadow: 0 2px 8px rgba(232,165,152,.40);
}

/* ==== 特徴バッジ「ずっと無料」色味調整 ==== */
.badge-free{
  background: var(--peach-soft);
  border-color: var(--peach);
  color:#6b3f1f;
}

/* ==== ボタン ==== */
.btn{ border-color:#f1dfda; color:#5a3a22; background:#fff }
.btn--solid{
  border-color: var(--rose-orange);
  background: linear-gradient(180deg, var(--peach), var(--salmon));
  color:#fff;
  box-shadow: 0 8px 22px rgba(232,165,152,.22);
}
.btn--solid:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(232,165,152,.28) }

/* ==== 画像キャプションピル ==== */
.card-media{
  border-color: var(--peach-soft);
  box-shadow: inset 0 0 0 1px #fff5f2;
  background:#fff7f5;
}
.card-media figcaption{
  background: rgba(255,255,255,.86);
  border-color: var(--peach);
  color:#6b3f1f;
}

/* ==== 箇条書きチップ（破線枠の色替え） ==== */
.bullets li{
  border-color: var(--peach);
  background:#fff;
}

/* ==== 小さいアクセント色（リンク等） ==== */
a{ color:#a8553a }
a:hover{ opacity:.92 }

/* （任意）ヒーローの“きらり”が強いと感じたら薄める
.hero h1::after{ background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.55) 50%, transparent 55%); }
*/
/* ===== Features Promo (cute) ===== */
.features--promo{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  margin: 18px auto 8px;
}

.feat--cute{
  position:relative;
  background:
    radial-gradient(600px 180px at 12% -10%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(180deg, var(--peach-soft), #fff);
  border:1.5px solid #f6d9d3;
  border-radius:16px;
  padding:16px 14px 18px;
  box-shadow: 0 10px 26px rgba(232,165,152,.12);
  overflow:hidden;
}

/* 左上のリボンタブ */
.feat-ribbon{
  position:absolute; left:12px; top:10px;
  display:inline-block; padding:.18rem .55rem;
  font-size:.78rem; font-weight:800; letter-spacing:.06em;
  color:#6b3f1f; background:#fff; border:1px solid var(--peach);
  border-radius:8px;
  box-shadow:0 4px 10px rgba(232,165,152,.12);
}

/* アイコンの“ころん”チップ */
.feat-ico{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; margin:10px 2px 6px;
  background: linear-gradient(180deg, var(--peach), var(--salmon));
  box-shadow: 0 8px 18px rgba(232,165,152,.25);
}
.feat-ico svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* タイトル＋本文 */
.feat-ttl{
  margin:.2rem 0 .1rem; font-size:1.05rem; color:#3f2e1f; letter-spacing:.01em;
}
.feat-ttl .badge-free{
  margin-left:.4rem; padding:.1rem .45rem; font-size:.78rem; border-radius:999px;
  background:#fff; border:1px solid var(--peach); color:#6b3f1f; font-weight:800;
}
.feat-txt{ margin:0; color:#4a4340; line-height:1.8 }

/* きらり（控えめ） */
@media (prefers-reduced-motion:no-preference){
  .feat--cute::after{
    content:""; position:absolute; inset:-10% -30% auto -30%; height:120px;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.7) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-12deg);
    animation: featShine 6.5s ease-in-out infinite 1.2s;
    mix-blend-mode: screen; pointer-events:none; opacity:.6;
  }

	/* サポート枠（加盟校限定） */
.panel--notice{
  position:relative;
  border:2px solid var(--peach-soft);
  box-shadow: 0 10px 28px rgba(232,165,152,.10);
  border-radius:16px;
  background:
    radial-gradient(700px 200px at 12% -10%, #fff, transparent 60%),
    linear-gradient(180deg, #fff, #fff7f5);
}
.cap-head{ margin-bottom:.4rem }
.cap-title{ display:flex; align-items:center; gap:.5rem; margin:.1rem 0 .35rem; color:#5a3a22 }
.cap-badge{
  display:inline-block; padding:.12rem .5rem; font-size:.78rem; font-weight:800; letter-spacing:.06em;
  border-radius:999px; background:var(--peach-soft); border:1px solid var(--peach); color:#6b3f1f;
}
.cap-sub{ margin:0; color:#6c5a53 }

/* リスト流用（既存の .bullets スタイルそのまま活きます） */
.cap-list li{ border-style: dashed; border-color: var(--peach) }

/* 注記（アイコン付き） */
.cap-note{
  display:flex; align-items:center; gap:.45rem;
  margin:.6rem 0 0; padding:.6rem .7rem;
  border:1px dashed var(--peach); border-radius:12px; background:#fff;
  color:#7b5e56; font-size:.92rem;
}
.cap-i{ width:16px; height:16px; fill:none; stroke: var(--rose-orange); stroke-width:1.6 }
.cap-link{ color:#a8553a; border-bottom:1px dotted var(--peach); text-underline-offset:2px }
.cap-link:hover{ color: var(--rose-orange); border-bottom-color: var(--rose-orange) }
	
	/* 親のパネルに上下のゆとりを追加 */
.panel--notice{
  padding: 24px 22px 26px;     /* ← 上下を広げた */
}

/* 点線ボックスの並び：グリッド化して隙間を確保 */
.cap-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 20px;              /* ← 上下 18px / 左右 20px の間隔 */
  margin-top: .8rem;           /* 見出しとの間 */
}

/* 各ボックス自体の内側余白と角丸（詰まり感の原因になりがち） */
.cap-list li{
  padding: 16px 18px;
  border-width: 2px;           /* 線を少し太くして余白とのバランスUP（お好みで） */
  border-radius: 16px;
}

/* 最下段の注記の“上”を広げる */
.cap-note{
  margin-top: 18px;
  padding: 12px 14px;
}

/* もしボックスが縦にしか並ばない場合は、上下だけさらに広げる */
@media (max-width: 640px){
  .cap-list{ gap: 14px }       /* モバイルは少し詰める */
  .panel--notice{ padding: 20px 18px 22px; }
}

	/* ====== 「資格取得後のサポート」余白調整（このブロックを追記） ====== */

/* 親パネルの内側にゆとりを確保 */
.panel--notice{
  padding: 28px 24px 30px;          /* 上下を拡げる */
  margin-bottom: 22px;              /* セクション下の余白 */
  border-radius: 18px;
}

/* 見出し行との間隔 */
.panel--notice .cap-head{ margin-bottom: 12px; }

/* 点線ボックスをグリッド並びにして“間”を作る */
.panel--notice .cap-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px 22px;                   /* 上下18 / 左右22 */
  margin-top: .8rem;                /* 見出しとの距離 */
}

/* 各ボックスの内側余白と角丸（詰まり感の原因を解消） */
.panel--notice .cap-list.bullets li{
  padding: 16px 18px;
  border: 2px dashed var(--peach, #FFBCB3);
  border-radius: 16px;
  background: #fff;
}

/* 注記（最下段）の上にさらにスペース */
.panel--notice .cap-note{
  margin-top: 20px;
  padding: 12px 14px;
}

/* モバイルは少しだけ詰める */
@media (max-width: 640px){
  .panel--notice{ padding: 22px 18px 24px; }
  .panel--notice .cap-list{ gap: 14px; }
}

	/* CTAまわりの余白調整 */
.cta{
  margin-top: 48px;   /* ← ここをお好みで 32〜48px などに */
  margin-bottom: 10px;
}

/* 備考文との間も少し広げたい場合 */
.note{ 
  margin-top: 14px;   /* デフォルトより広めに */
}

/* モバイルはやや詰める（任意） */
@media (max-width: 640px){
  .cta{ margin-top: 26px; }
  .note{ margin-top: 12px; }
}

/* === 上品に光るボタン（.btn--solid） === */
.btn--solid{
  position: relative; overflow: hidden;
  isolation: isolate;                 /* 擬似要素を内側に */
  transition: transform .2s ease, box-shadow .3s ease, filter .3s ease;
  background: linear-gradient(180deg, var(--peach), var(--salmon));
  box-shadow: 0 8px 22px rgba(232,165,152,.22);
}

/* うっすらトップ光沢（常時・静的） */
.btn--solid::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 55%);
  mix-blend-mode:screen; pointer-events:none;
}

/* 斜めの“きらり”がスーッと走る（ホバー時） */
.btn--solid::before{
  content:"";
  position:absolute; top:-20%; bottom:-20%; left:-40%;
  width:40%; transform:skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  opacity:0; pointer-events:none;
}
.btn--solid:hover::before{ animation: btnSheen 900ms ease-out forwards; }
@keyframes btnSheen{
  0%   { transform: translateX(-120%) skewX(-20deg); opacity:0; }
  10%  { opacity:.9; }
  100% { transform: translateX(260%)  skewX(-20deg); opacity:0; }
}

/* さりげない持ち上がり＋影 */
.btn--solid:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(232,165,152,.28);
}

/* キーボード操作のときは上品なリングを */
.btn--solid:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--peach);
}

/* 低速端末/ユーザー設定でアニメ無効化 */
@media (prefers-reduced-motion: reduce){
  .btn--solid:hover::before{ animation:none; opacity:0; }
  .btn--solid{ transition:none; }
}

 /* すべてのボタンに共通の上下余白を追加（既存クラス名変更なし） */
.btn {
  display: inline-block;          /* 念のため確実にブロック化 */
  margin-top: 16px;
  margin-bottom: 16px;
}

/* 他ボタンとの距離が近すぎる場合は調整用 */
.btn + .btn {
  margin-top: 8px;                /* ボタン同士は少し狭めに */
}