/* ============================================================
   いのちと夢のコンサート 特設サイト 共通CSS
   yugemusic.com/inochitoyume/
   トーン：和紙ベージュ×水彩パステル×墨文字（越えてゆけ方式を踏襲）
   設計：スマホ最優先（先生は職員室のスマホで見る）→ 861px以上でデスクトップ
   ============================================================ */

:root{
  /* 紙と墨 */
  --paper:      #fbf5ec;   /* 本文の紙 */
  --paper-deep: #f3ead9;   /* 一段濃い紙（帯・カード背景） */
  --frame:      #e9e2d6;   /* ページ外周 */
  --ink:        #3a342e;   /* 墨 */
  --ink-soft:   #6d655a;   /* 薄墨 */
  --ink-faint:  #9b8f7e;   /* 注記 */
  --line:       #ece1cf;   /* 罫線 */

  /* 水彩の色（朝の空 → 夕焼け のグラデ資産）
     ※2026-07-05に桜色を試したが本人判断で夕焼けに戻した */
  --sky:        #6f8aa0;  --sky-deep:    #33506b;  --sky-wash:    #dfecf4;
  --leaf:       #8a8a76;  --leaf-deep:   #3d3f33;  --leaf-wash:   #e9ece9;
  --sand:       #a08a6a;  --sand-deep:   #473d2d;  --sand-wash:   #f2ece1;
  --peach:      #bd8a5e;  --peach-deep:  #5a3f29;  --peach-wash:  #f8e6d3;
  --sunset:     #c4794f;  --sunset-deep: #6a3a23;  --sunset-wash: #f6d8c2;

  /* CTA（柿色＝あたたかい行動色） */
  --cta:        #bf6b45;
  --cta-hover:  #a95a37;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Shippori Mincho',serif;
  font-size:16px;
  line-height:1.9;
  -webkit-text-size-adjust:100%;
}
img{display:block;max-width:100%;}
a{color:inherit;}
.gothic{font-family:'Zen Kaku Gothic New',sans-serif;}
.mincho{font-family:'Shippori Mincho',serif;}

/* フルブリード（jwf方式）＝背景は画面いっぱい・中身は中央に絞る */
.wrap{width:100%;overflow:clip;}

/* ---------- ヘッダー ---------- */
.siteheader{position:sticky;top:0;z-index:50;
  background:rgba(251,245,236,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);}
.siteheader .bar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px;max-width:1240px;margin:0 auto;}
.siteheader .logo{text-decoration:none;line-height:1.35;}
.siteheader .logo .kicker{display:block;font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:9.5px;letter-spacing:.3em;color:var(--ink-faint);}
.siteheader .logo .name{font-size:17px;font-weight:700;letter-spacing:.1em;color:var(--ink);}
.siteheader .cta-mini{flex:none;font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:19px;font-weight:700;color:#fff;background:var(--cta);
  text-decoration:none;border-radius:26px;padding:12px 24px;letter-spacing:.06em;
  box-shadow:0 2px 8px rgba(190,105,65,.3);}
.siteheader .cta-mini:hover{background:var(--cta-hover);}
.sitenav{display:flex;gap:26px;overflow-x:auto;padding:0 16px 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.sitenav::-webkit-scrollbar{display:none;}
.sitenav a{flex:none;font-family:'Zen Kaku Gothic New',sans-serif;font-size:19px;
  color:var(--ink-soft);text-decoration:none;letter-spacing:.05em;padding:2px 0;}
.sitenav a[aria-current="page"]{color:var(--sunset-deep);font-weight:700;
  border-bottom:2px solid var(--sunset);}

/* ---------- 共通セクション ---------- */
.section{padding:56px 20px;}
.sec-label{font-family:'Zen Kaku Gothic New',sans-serif;font-size:11px;
  letter-spacing:.45em;color:var(--sand);text-align:center;}
.sec-title{font-size:26px;font-weight:700;letter-spacing:.06em;text-align:center;
  margin-top:10px;line-height:1.6;}
.sec-lead{font-size:14.5px;color:var(--ink-soft);text-align:center;margin:16px auto 0;
  max-width:34em;}

/* ---------- ボタン ---------- */
.btn{display:inline-block;font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:700;text-decoration:none;text-align:center;border-radius:30px;
  letter-spacing:.06em;}
.btn-primary{background:var(--cta);color:#fff;font-size:16px;padding:15px 34px;
  box-shadow:0 4px 14px rgba(190,105,65,.32);}
.btn-primary:hover{background:var(--cta-hover);}
.btn-ghost{border:1.5px solid var(--sand);color:var(--sand-deep);
  font-size:14px;padding:11px 26px;background:rgba(255,255,255,.5);}
.btn-ghost:hover{background:#fff;}

/* ---------- カード ---------- */
.card{background:rgba(255,255,255,.6);border:1px solid var(--line);
  border-radius:16px;padding:22px;}

/* 導線カード（トップ） */
.navcards{display:grid;grid-template-columns:1fr;gap:14px;margin:32px auto 0;
  max-width:1120px;}
.navcard{display:block;text-decoration:none;background:rgba(255,255,255,.55);
  border:1px solid var(--line);border-left:5px solid var(--edge,var(--sky));
  border-radius:14px;padding:16px 18px;transition:transform .15s,box-shadow .15s;}
.navcard:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(80,60,40,.12);}
.navcard .t{font-size:16.5px;font-weight:700;letter-spacing:.04em;}
.navcard .d{font-family:'Zen Kaku Gothic New',sans-serif;font-size:12.5px;
  color:var(--ink-soft);margin-top:6px;line-height:1.7;}
.navcard .go{font-family:'Zen Kaku Gothic New',sans-serif;font-size:11px;
  color:var(--edge,var(--sky));margin-top:8px;letter-spacing:.1em;}
.c-sky   {--edge:var(--sky);}
.c-leaf  {--edge:var(--leaf);}
.c-sand  {--edge:var(--sand);}
.c-peach {--edge:var(--peach);}
.c-sunset{--edge:var(--sunset);}

/* ---------- 素材待ちスロット ---------- */
.slot{display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(135deg,#eee6d6 0 12px,#f4eee1 12px 24px);
  color:#a99c86;font-family:ui-monospace,Menlo,monospace;font-size:11px;
  border-radius:14px;line-height:1.8;}

/* ---------- 仮テキスト印（第3段で全差し替え） ---------- */
.kari{font-family:'Zen Kaku Gothic New',sans-serif;font-size:9px;color:#c08a5a;
  border:1px solid #ddb894;border-radius:4px;padding:1px 5px;vertical-align:.2em;
  letter-spacing:.1em;white-space:nowrap;}

/* ---------- フッター（全ページ共通・お申込みブロック内蔵） ---------- */
.contactband{background:linear-gradient(180deg,var(--peach-wash),var(--sunset-wash));
  padding:52px 20px;text-align:center;}
.contactband .h{font-size:23px;font-weight:700;color:var(--sunset-deep);letter-spacing:.08em;}
.contactband .p{font-size:14px;color:#7a4b30;margin-top:12px;line-height:2;}
.contactband .tel{display:block;font-size:26px;font-weight:700;color:var(--sunset-deep);
  text-decoration:none;margin-top:18px;letter-spacing:.04em;}
.contactband .telnote{font-family:'Zen Kaku Gothic New',sans-serif;font-size:11.5px;
  color:#9a6a48;margin-top:4px;}
.contactband .btns{display:flex;flex-direction:column;gap:12px;align-items:center;
  margin-top:22px;}
.contactband .mail{font-family:'Zen Kaku Gothic New',sans-serif;font-size:13px;
  color:#7a4b30;margin-top:16px;word-break:break-all;}
.sitefooter{background:#e7b29a;padding:40px 20px 32px;}
.sitefooter .fmap{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;
  max-width:640px;margin:0 auto;}
.sitefooter .fmap a{font-family:'Zen Kaku Gothic New',sans-serif;font-size:12.5px;
  color:#7a2f1c;text-decoration:none;line-height:2;}
.sitefooter .corridor{margin-top:28px;padding-top:20px;border-top:1px solid rgba(122,47,28,.25);
  text-align:center;font-family:'Zen Kaku Gothic New',sans-serif;font-size:11.5px;
  color:#8a4636;line-height:2;}
.sitefooter .corridor a{color:#7a2f1c;}
.sitefooter .copy{text-align:center;font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:10.5px;color:#9a5a42;margin-top:22px;letter-spacing:.08em;}

/* ---------- reveal（スクロールで浮かび上がる・jwf方式） ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---------- 写真グリッド（笑顔が溢れる帯） ---------- */
.photogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  max-width:1320px;margin-left:auto;margin-right:auto;}
.photogrid .ph{aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  box-shadow:0 3px 12px rgba(50,40,35,.14);}
.photogrid .ph img{width:100%;height:100%;object-fit:cover;}
.photogrid .ph.slot{aspect-ratio:4/3;}
@media (min-width:861px){
  .photogrid{grid-template-columns:repeat(4,1fr);gap:14px;}
}

/* ---------- パンくず ---------- */
.breadcrumb{font-family:'Zen Kaku Gothic New',sans-serif;font-size:11px;
  color:var(--ink-faint);padding:14px 20px 0;}
.breadcrumb a{color:var(--ink-faint);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

/* ============================================================
   デスクトップ（861px〜）
   ============================================================ */
@media (min-width:861px){
  body{font-size:16.5px;}
  .siteheader .bar{padding:16px 40px;}
  .siteheader .logo .name{font-size:20px;}
  .sitenav{padding:0 40px 14px;gap:34px;justify-content:center;}
  .sitenav a{font-size:20px;}
  .section{padding:80px 64px;}
  .sec-title{font-size:32px;}
  .navcards{grid-template-columns:repeat(3,1fr);gap:18px;}
  .contactband{padding:72px 64px;}
  .contactband .h{font-size:28px;}
  .contactband .tel{font-size:34px;}
  .contactband .btns{flex-direction:row;justify-content:center;gap:18px;}
  .sitefooter{padding:56px 64px 40px;}
  .sitefooter .fmap{grid-template-columns:repeat(3,1fr);}
}