/* ===========================================================
   Sasebo Guide — Shared Design System
   このファイルは全ページ共通です。色・フォントは全部ここで管理しています。
   色やフォントを変えたい場合は、下の :root 内の値だけ変更してください。
   =========================================================== */

:root{
  --clay:#D9622C;        /* メインアクセント(オレンジ) */
  --clay-soft:#E8804F;   /* アクセントの明るいトーン */
  --navy:#1B2A41;        /* メインカラー(ネイビー) */
  --navy-soft:#2E3F5C;
  --paper:#FFFFFF;       /* 背景(白) */
  --sand:#F6F5F2;        /* サブ背景(ごく薄いオフホワイト) */
  --white:#FFFFFF;
  --ink-soft: rgba(27,42,65,0.72);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--navy);
  font-family:'Zen Kaku Gothic New','Inter',sans-serif;
  line-height:1.9;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
.en{font-family:'Inter',sans-serif;}
.en-display{font-family:'Baloo 2',sans-serif;}
.jp-serif{font-family:'Shippori Mincho',serif;}
img{max-width:100%; display:block;}

.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.section{padding:120px 0;}
@media (max-width:760px){ .section{padding:72px 0;} }

/* ---------- Frame motif (signature element across the whole site) ---------- */
.framed{position:relative; display:inline-block;}
.framed::after{
  content:"";
  position:absolute;
  top:16px; left:16px;
  width:100%; height:100%;
  border:1.5px solid var(--clay);
  pointer-events:none;
  z-index:2;
}
.framed > .frame-inner{position:relative; z-index:1; display:block; overflow:hidden;}

/* ---------- Nav (shared across all pages) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(27,42,65,0.08);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.nav-logo{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:18px; letter-spacing:0.02em;}
.nav-logo span{color:var(--clay);}
.nav-links{display:flex; gap:28px; font-size:13px; letter-spacing:0.04em;}
.nav-links a{opacity:0.75; transition:opacity .2s;}
.nav-links a:hover{opacity:1; color:var(--clay);}
.nav-cta{
  background:var(--navy); color:var(--white);
  padding:10px 22px; border-radius:2px; font-size:13px;
  font-family:'Baloo 2',sans-serif; font-weight:600;
}
@media (max-width:760px){ .nav-links{display:none;} }

/* ---------- Language toggle button ---------- */
.lang-btn{
  border:1px solid rgba(27,42,65,0.25); background:transparent; color:var(--navy);
  font-family:'Baloo 2',sans-serif; font-weight:600; font-size:12px;
  padding:8px 14px; border-radius:2px; cursor:pointer; letter-spacing:0.03em;
  transition:background .2s, color .2s;
}
.lang-btn:hover{background:var(--navy); color:var(--white);}
.lang-btn.on-dark{border-color:rgba(255,255,255,0.35); color:var(--white);}
.lang-btn.on-dark:hover{background:var(--white); color:var(--navy);}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-block;
  background:var(--clay); color:var(--white);
  padding:16px 32px; font-family:'Baloo 2',sans-serif; font-weight:600; font-size:15px;
  border-radius:2px; transition:background .2s; border:none; cursor:pointer;
}
.btn-primary:hover{background:var(--clay-soft);}
.btn-ghost{
  display:inline-block;
  border:1px solid rgba(255,255,255,0.35); color:var(--white);
  padding:16px 32px; font-family:'Baloo 2',sans-serif; font-weight:600; font-size:15px;
  border-radius:2px;
}
.btn-ghost.on-light{border-color:rgba(27,42,65,0.3); color:var(--navy);}

/* ---------- Eyebrow label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--clay-soft); font-family:'Inter',sans-serif; font-weight:600;
  margin-bottom:28px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--clay-soft);}
.eyebrow.on-light{color:var(--clay);}
.eyebrow.on-light::before{background:var(--clay);}

/* ---------- Real photos ----------
   .frame-inner / .course-photo の中に <img> を入れると、
   枠いっぱいに自動で切り抜いて表示されます。
   ------------------------------------------------------------ */
.frame-inner img,
.course-photo img,
.itin-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---------- Photo placeholder blocks (swap with real photos later) ---------- */
.photo-placeholder{
  display:flex; align-items:flex-end; justify-content:center;
  background:linear-gradient(160deg,#3a5170,#1B2A41);
}
.photo-placeholder span{
  font-size:12px; color:rgba(255,255,255,0.6); padding:16px; text-align:center;
  font-family:'Inter',sans-serif; letter-spacing:0.03em;
}
.photo-placeholder.warm{background:linear-gradient(160deg,#cbb994,#e9ddc7 60%, #d9c8a3);}
.photo-placeholder.warm span{color:var(--ink-soft);}

/* ---------- Value / feature rows (alternating photo + text) ---------- */
.value-section{background:var(--navy); color:var(--white);}
.value-head{text-align:center; max-width:600px; margin:0 auto 72px;}
.value-head h2{font-size:clamp(24px,3vw,34px); font-weight:900; line-height:1.5;}
.value-rows{ display:flex; flex-direction:column; gap:64px; }
.value-row{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.value-row-reverse{ direction:rtl; }
.value-row-reverse > *{ direction:ltr; }
.value-row-photo{ aspect-ratio:4/3; overflow:hidden; }
.value-row-photo img{
  width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
}
.value-row:hover .value-row-photo img{ transform:scale(1.05); }
.value-num{
  font-family:'Baloo 2',sans-serif; font-size:14px; color:var(--clay-soft); margin-bottom:20px; letter-spacing:0.05em;
}
.value-row-text h3{font-size:22px; font-weight:700; margin-bottom:14px; line-height:1.6;}
.value-row-text p{font-size:14px; color:rgba(255,255,255,0.62); max-width:420px;}
@media (max-width:760px){
  .value-row, .value-row-reverse{ grid-template-columns:1fr; direction:ltr; gap:24px; }
}
@media (prefers-reduced-motion: reduce){
  .value-row-photo img{ transition:none; }
}

/* ---------- Quote block ---------- */
.quote-block{max-width:760px; margin:0 auto; text-align:center; padding:0 20px;}
.quote-mark{font-family:'Shippori Mincho',serif; font-size:60px; color:var(--clay); line-height:1; margin-bottom:8px;}
.quote-block p{
  font-family:'Shippori Mincho',serif; font-size:clamp(19px,2.4vw,24px); line-height:2; color:var(--navy); margin-bottom:20px;
}
.quote-attr{font-size:13px; color:var(--ink-soft); font-family:'Inter',sans-serif;}

/* ---------- Contact / inquiry form (shared component) ---------- */
.cta-section{background:var(--navy); color:var(--white); text-align:center;}
.cta-section h2{font-size:clamp(26px,3.6vw,40px); font-weight:900; line-height:1.5; margin:20px 0 20px;}
.cta-section .en-display{display:block; font-size:clamp(16px,2vw,20px); color:var(--clay-soft); margin-bottom:44px;}
form.inquiry{
  max-width:640px; margin:0 auto; text-align:left;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  padding:44px; border-radius:2px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.form-field{display:flex; flex-direction:column; gap:8px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:12px; letter-spacing:0.04em; color:rgba(255,255,255,0.7);}
.form-field input, .form-field select, .form-field textarea{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2);
  padding:12px 14px; color:var(--white); font-family:'Zen Kaku Gothic New',sans-serif; font-size:14px; border-radius:2px;
}
.form-field textarea{resize:vertical; min-height:90px;}
.form-submit{
  width:100%; margin-top:8px;
  background:var(--clay); color:var(--white); border:none;
  padding:16px; font-family:'Baloo 2',sans-serif; font-weight:600; font-size:15px; border-radius:2px; cursor:pointer;
  transition:background .2s;
}
.form-submit:hover{background:var(--clay-soft);}
.form-note{font-size:12px; color:rgba(255,255,255,0.5); margin-top:16px; text-align:center;}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} form.inquiry{padding:28px 22px;} }

/* ---------- Footer ---------- */
footer{background:#101c2e; color:rgba(255,255,255,0.55); padding:48px 0; text-align:center; font-size:13px;}
footer .nav-logo{color:var(--white); margin-bottom:10px; display:block;}
footer .foot-links{display:flex; justify-content:center; gap:24px; margin-top:16px; font-size:12px;}

/* ---------- Divider ---------- */
.divider{width:1px; height:56px; background:var(--clay); margin:56px auto; opacity:0.5;}

/* ---------- Scroll reveal (fade-up) ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; }
}

/* ---------- Guide profile photo: subtle parallax ----------
   このCSSは assets/reveal.js のパララックス処理とセットです。
   .profile-photo を削除・流用する場合はJS側も確認してください。
   ------------------------------------------------------------ */
.profile-photo{ overflow:hidden; }
.profile-photo img{ height:130%; will-change:transform; }
@media (prefers-reduced-motion: reduce){
  .profile-photo img{ transform:none !important; }
}

/* ---------- Hero photo: slow continuous zoom (Ken Burns) ---------- */
@keyframes heroKenBurns{
  from{ transform:scale(1); }
  to{ transform:scale(1.06); }
}
.hero-bg{
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none; }
}

/* ---------- Hover zoom on photo cards ---------- */
.course-photo img, .profile-photo img{
  transition: transform .5s ease;
}
.course-card:hover .course-photo img,
.profile:hover .profile-photo img{
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce){
  .course-photo img, .profile-photo img{ transition:none; }
}

/* ---------- Intro map video (Japan -> Nishi-Kyushu) ---------- */
.intro-map-video{
  max-width:520px; margin:0 auto 48px; aspect-ratio:4/3; overflow:hidden;
}
.map-video{
  width:100%; height:100%; object-fit:contain; display:block;
  /* 動画の和紙色の背景を白に近づけ(brightness)、multiplyでページ背景に溶け込ませて
     四角い枠感を消す。動画の背景色 rgb(233,219,197) 前提の調整値。 */
  filter:brightness(1.3);
  mix-blend-mode:multiply;
}

/* ---------- "More" link (Kikka Hirado-style minimal deep-link) ---------- */
.more-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.02em;
  color:var(--navy); border-bottom:1px solid rgba(27,42,65,0.3); padding-bottom:4px;
  transition:border-color .2s, color .2s;
}
.more-link::after{ content:"→"; transition:transform .2s; }
.more-link:hover{ color:var(--clay); border-color:var(--clay); }
.more-link:hover::after{ transform:translateX(3px); }
.more-link.on-dark{ color:var(--white); border-color:rgba(255,255,255,0.35); }
.more-link.on-dark:hover{ color:var(--clay-soft); border-color:var(--clay-soft); }