:root{
  --c-sky:#cbe6ff;      /* PPT背景の水色（抽出） */
  --c-ivory:#fff8e7;    /* サブ：薄いアイボリー */
  --c-ink:#0b2a38;      /* 文字色 */
  --c-link: #1a6fb3;    /* リンク色（後で変更OK） */
  --c-link-hover:#0f4f84;
  --radius:16px;        /* 角丸（後で変更OK） */
  --maxw:1100px;        /* コンテンツ最大幅（後で変更OK） */
  --header-h:96px;      /* ヘッダー高さ（後で変更OK） */
  --section-y:72px;     /* セクション上下余白（後で変更OK） */
  --shadow: 0 8px 20px rgba(0,0,0,.08);
}

*{box-sizing:border-box;}

/* ページ間でヘッダー位置が微妙にズレる原因の大半は
   「あるページだけ縦スクロールバーが出る」ことです。
   スクロールバー分の幅が変わると、中央寄せの .container が
   数px単位で左右に動いて見えます。
   → 常に同じ幅を確保してズレを防止 */
html{ scrollbar-gutter: stable; overflow-y: scroll; }

html,body{height:100%;}
body{
  margin:0;
  color:var(--c-ink);
  background: linear-gradient(180deg, var(--c-sky) 0%, #ffffff 60%);
  font-family: vdl-logomaru, "游ゴシック", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height:1.7;
}

img{max-width:100%; height:auto; display:block;}
a{color:var(--c-link); text-decoration:none;}
a:hover{color:var(--c-link-hover); text-decoration:underline;}

.container{
  width:min(var(--maxw), calc(100% - 32px));
  margin-inline:auto;
}

/* Header */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  background: rgba(203,230,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(11,42,56,.12);
  z-index:50;
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  width:200px;
  height:auto;
}

.icon-btn{
  appearance:none;
  border:1px solid rgba(11,42,56,.35);
  background:#fff;
  border-radius:12px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}
.icon-btn:active{transform: translateY(1px);}

/* Hamburger icon */
.hamburger{width:18px; height:14px; position:relative;}
.hamburger span{
  position:absolute; left:0; right:0;
  height:2px; background:var(--c-ink);
  border-radius:2px;
}
.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:6px;}
.hamburger span:nth-child(3){bottom:0;}

/* Main offset */
main{padding-top: calc(var(--header-h) + 18px);}

.section{padding: var(--section-y) 0;}
.section-title{
  font-size:clamp(20px, 3vw, 28px);
  margin:0 0 18px;
}

.card{
  background:#fff;
  border:1px solid rgba(11,42,56,.12);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}

/* Hero */
.hero{
  padding: 22px 0 0;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:center;
}
.hero-copy{
  background: rgba(255,255,255,.7);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid rgba(11,42,56,.10);
}
.hero-copy h1{margin:0 0 8px; font-size:clamp(26px, 4vw, 38px);}
.hero-copy p{margin:0;}

.hero-visual{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(11,42,56,.12);
}

/* Top buttons */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
}
.top-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  min-height:74px;
  font-size:18px;
  text-align:center;
}
.top-btn img{max-height:38px; width:auto;}

/* News list */
.news-wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;}
.news-list{
  max-height: 260px; /* “ちょこっとスクロール” */
  overflow:auto;
  padding: 12px;
}
.news-item{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
}
.news-item:hover{background: rgba(203,230,255,.35);}
.news-meta{font-size:12px; opacity:.8;}
.news-title{font-size:15px;}
.badge{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background: var(--c-ivory);
  border:1px solid rgba(11,42,56,.12);
  margin-left:6px;
}

/* X embed placeholder */
.embed-box{padding:14px;}
.embed-note{margin:0 0 10px; font-size:13px; opacity:.85;}

/* SNS */
.sns-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;}
.sns-link{padding:16px; display:flex; gap:10px; align-items:center; justify-content:center; text-align:center;}
.sns-link span{font-size:15px;}

/* Contact button */
.cta{padding: 18px; display:flex; align-items:center; justify-content:center;}
.cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--c-ivory);
  border: 1px solid rgba(11,42,56,.18);
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.cta a:hover{background:#fff; text-decoration:none;}

/* Footer video */
.footer-video{
  border-top: 1px solid rgba(11,42,56,.12);
  background: var(--c-sky);
}
.footer-video .container{padding: 18px 0;}
.footer-video video{
  width:100%;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(11,42,56,.12);
}

.site-footer{
  padding: 22px 0 40px;
  text-align:center;
  background: var(--c-sky);
}

/* Drawer menu */
/*
  Drawer menu（ハンバーガーのメニュー）
  - HTML側は .drawer / .drawer__overlay / .drawer__panel というクラス名なので、それに合わせる
  - JSは .drawer に is-open を付け外しします
*/
.drawer{
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.drawer.is-open{
  opacity: 1;
  pointer-events: auto;
}
.drawer__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
}
.drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(340px, 88vw);
  background: #fff;
  border-left: 1px solid rgba(11,42,56,.12);
  transform: translateX(102%);
  transition: transform .25s ease;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer.is-open .drawer__panel{ transform: translateX(0); }

.drawer__top{ display:flex; align-items:center; justify-content:space-between; }
.drawer__label{ font-weight: 700; letter-spacing: .08em; }

.drawer__list{ list-style:none; padding:0; margin:0; }
.drawer__list a{
  display:block;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(11,42,56,.10);
  margin-top: 10px;
  background: rgba(203,230,255,.25);
}
.drawer__list a:hover{ background: rgba(203,230,255,.5); text-decoration:none; }

/* Drawer open中は本文スクロールを止める */
body.no-scroll{ overflow: hidden; }

/* Responsive */
@media (max-width: 768px){
  .hero-inner{grid-template-columns: 1fr;}
  .grid-2{grid-template-columns: 1fr;}
  .news-wrap{grid-template-columns: 1fr;}
  .sns-grid{grid-template-columns: 1fr;}
  .brand img{width:170px;}
}

/* Images */
.card-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.img-link{ display:block; }

/* Banner buttons */
.sns-links{
  display: grid;
  gap: 12px;
}
.sns-banner, .contact-banner{
  display: block;
}
.sns-banner img, .contact-banner img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.sns-banner:focus-visible, .contact-banner:focus-visible{
  outline: 3px solid var(--c-link);
  outline-offset: 4px;
}

/* SNSバナーを左寄せ */
.sns-links{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start; /* 左寄せ */
}

/* バナーが必要以上に伸びないように（お好みで調整） */
.sns-banner{
  width: min(420px, 100%);
}
.sns-banner img{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Patch (ONLY: remove white strip under top banners + keep SNS banner images) ===== */

/* 茶色見出しバナー下の白いスジ（インライン行の隙間/カードpadding）を消す */
.top-banner{
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}
.top-banner a{
  display:block !important;
  line-height:0 !important;
}
.top-banner img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  vertical-align: top !important;
  margin:0 !important;
}

/* SNSバナー画像がテキストに戻らないように最低限 */
.sns-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* ===== Patch (fix news render + restore more-row + restore contact image + remove top-banner "white strip") ===== */

/* 見出しバナー：カードの影/枠が下に“白い余白”っぽく見えるので、ここだけ完全に消す */
.top-banner{
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* news-list は index-news.js が <li> を入れる前提 */
.news-list{
  list-style: none;
  margin: 0;
  padding: 12px;
}

/* もっと見る行（カード外） */
.more-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
.more-cell{
  display:flex;
  justify-content:center;
}

/* お問い合わせ：画像バナー表示 */
.contact-banner img{
  width: min(720px, 100%);
  height: auto;
  display:block;
  margin-inline:auto;
}

/* ===== Patch (A: banner white strip fix, B: contact side white fix, C: news scroll to bottom) ===== */

/* A) 「ばらひつじとは？ / おしらせ」茶色バナー下の白い帯をゼロにする
   - インラインの行の隙間
   - 親要素の line-height/font-size
   - 背景/影（白っぽく見える原因）
*/
.banner-card{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
.banner-card img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
}

/* B) お問い合わせフォーム：左右の白い余白（カードの白背景/余白）を消す */
.contact-card{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.contact-banner{
  display: block;
}
.contact-banner img{
  display: block;
  width: 100%;
  height: auto;
}

/* C) ニュース：カードの下までスクロール領域を伸ばす */
.news-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-card .news-list{
  flex: 1 1 auto;
  min-height: 0;   /* これが無いと overflow が効かず途中で止まることがあります */
  overflow: auto;
}

/* ===== Patch (banner white strip final fix) ===== */
/* 画像の下に出る1〜2pxの白い線は、サブピクセル描画/レイアウト由来の隙間なので
   親を茶色で塗り、画像を1pxだけ下へ食い込ませて確実に消します */
.banner-card{
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  background: #7a5658 !important;
}
.banner-card img{
  display: block !important;
  margin-bottom: -2px !important; /* これで下の白線を“食う” */
}

/* ===== Patch (restore: more buttons position / SNS banners right / footer center) ===== */

/* ① もっと見る：2列の真下で左右同じ位置に戻す */
.more-row{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
.more-cell{
  display: flex;
  justify-content: center;
}
.more-btn{
  width: min(260px, 100%);
  height: auto;
  display: block;
}

/* ② SNSバナー：右寄せに戻す（Twitter左 / 他SNS右） */
.sns-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 12px;
  align-items: start;
}
.sns-links{
  justify-self: end;
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sns-banner{
  display: block;
  width: min(420px, 100%);
}
.sns-banner img{
  width: 100%;
  height: auto;
  display: block;
}

/* ③ footer 動画：中央寄せに戻す */
.footer{
  display: flex;
  justify-content: center;
}
.footer video{
  display: block;
  margin: 0 auto;
}

/* ===== Patch (footer center + news fill card + fix overlap) ===== */

/* footer video: wrapperで中央寄せ（video自体に背景を持たせない） */
.video-strip{
  background: var(--c-sky);
  display: flex;
  justify-content: center;
  padding: 0;          /* 余計な余白を作らない */
}
.footer-video{
  display: block;
  margin: 0 auto;
  width: min(1100px, 100%);
  height: auto;
  background: transparent !important; /* 既存の背景指定を無効化 */
  border-top: 0 !important;           /* 既存のborder-topを無効化 */
}

/* news: カードの一番下までスクロール領域を伸ばす */
.news-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-card .news-list{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;     /* 260px制限を解除 */
  overflow: auto;
}

/* news: 文字の重なり防止（行間と列幅を少し調整） */
.news-item{
  align-items: start;
  grid-template-columns: 110px 1fr; /* 日付+タグが潰れて折り返さないよう少し広げる */
  margin-bottom: 12px;
}
.news-meta{
  line-height: 1.6;
  word-break: keep-all;
}
.news-title{
  font-size: 16px;
  line-height: 1.6;
}

/* ===== Patch (remove blank under illustration, match news height, shrink contact button) ===== */

/* 左（ばらひつじとは？）カードの下に出る空白を無くす：
   gridの伸びを止め、カードは中身の高さに合わせる */
.grid-2{
  align-items: start;
}

/* 左の紹介カード（illustration）を“画像ぴったり”に（白い余白を作らない） */
.ill-card{
  padding: 0 !important;
  overflow: hidden;
}
.ill-card img{
  display:block;
  width:100%;
  height:auto;
}

/* 右のニュースカードの高さを左に合わせる（同じ“正方形”枠にして中はスクロール）
   ※スマホでは自動高さに戻す */
.news-card{
  aspect-ratio: 1 / 1;
}
.news-card .news-list{
  height: 100%;
}

/* スマホでは自然な縦並び */
@media (max-width: 768px){
  .news-card{ aspect-ratio: auto; }
  .news-card .news-list{ height: auto; }
}

/* お問い合わせボタン：大きさを半分くらいに */
.contact-banner img{
  width: min(360px, 100%) !important;
}

/* ===== Patch (news wrapping + chip colors) ===== */

/* ニュース：変な改行にならないように3列グリッド化（日付 / 種別 / タイトル） */
.news-item{
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  padding: 10px 0;
  margin: 0;                 /* 余計な“段落”間隔を作らない */
}
.news-date{
  white-space: nowrap;
  line-height: 1.6;
}
.news-title{
  line-height: 1.6;
  overflow-wrap: anywhere;   /* 日本語の不自然な途中改行を減らしつつ、長文は崩さない */
  word-break: normal;
}

/* 種別ラベル（出展/おしらせ）を復活 */
.chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff7df;
  color: #5a4a2a;
  white-space: nowrap;
}
.chip--exhibit{
  background: #e9f6ff;
  color: #2a5a7a;
}
.chip--notice{
  background: #fff1e6;
  color: #7a3d2a;
}

/* ===== Patch (news: structured body + emphasize date/title) ===== */
.news-date{
  font-weight: 700;
  font-size: 16px;
}
.news-title{
  font-weight: 700;
  font-size: 16px;
}
.news-body{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
}
.news-body a{
  text-decoration: underline;
}

/* ===== News layout (ONLY news page): vertical, line-break oriented ===== */
.page-news .news-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.page-news .news-item{
  display: block;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}

.page-news .news-item .news-head{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-news .news-item .news-date{
  font-weight: 700;
  font-size: 16px;
}

.page-news .news-item .news-title{
  margin-top: 6px;
  font-weight: 700;
  font-size: 16px;
}

.page-news .news-item .news-body{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.8;
}

.page-news .news-item .news-link{
  margin-top: 6px;
  font-size: 14px;
}

.page-news .news-item .news-link a{
  text-decoration: underline;
}


/* ===== SNS title image (SNS_news.png) ===== */
.sns-title-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.sns-title-img{
  max-width: 420px;
  width: min(420px, 90%);
  height: auto;
  display: block;
}

/* ===== News page: width fix (確実に効かせる) ===== */
/* newsページの本文幅を「TOPの2カラム1枚分」くらいに揃える */
.news-page-container{
  max-width: 560px;
}

/* 念のため body に class が付いていない場合でも効くようにしておく */
.page-news .news-page-container,
.news-page-container{
  width: 100%;
  margin-inline: auto;
}

.page-news .news-page-card,
.news-page-card{
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

/* ===== Header title reset (空h1の余計なズレ防止) ===== */
.header-title{
  margin: 0;
  padding: 0;
  line-height: 1;
}
/* ===== TOP SNS override (final) =====
   既存の .sns-links が flex 右寄せ指定になっているため、
   SNSセクション内の .sns-links--grid3 だけを強制的に grid 3段に戻します。
*/
section[aria-label="SNS news"] .sns-title-img{
  max-width: 1500px !important;
  width: min(1600px,95%) !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--radius) !important;
  margin: 0 auto !important;
}

section[aria-label="SNS news"] .sns-links--grid3{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  justify-items: center !important;
  align-items: start !important;
}

/* 画像は親幅に追従（サイズ調整が確実に効く） */
section[aria-label="SNS news"] .sns-links--grid3 .sns-banner{
  display: block;
  width: min(420px, 100%) !important; /* 他のバナーは今まで通り */
}
section[aria-label="SNS news"] .sns-links--grid3 .sns-banner img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Row1: X はやや大きめ（他より少しだけ） */
section[aria-label="SNS news"] .sns-links--grid3 .sns-banner--x{
  grid-column: 1 / -1 !important;
  width: min(480px, 100%) !important;
}
/* ===== SNS (scoped by #snsNews) =====
   既存の .sns-links / .sns-grid の右寄せ指定や古い sns-title-img(420px) を上書きします。
*/
#snsNews .sns-title-img{
  max-width:1400px !important;
  width:min(1400px) !important;
  height:auto !important;
  display:block !important;
  border-radius: var(--radius) !important;
  margin: 0 auto !important;
}
#snsNews .sns-title-wrap{
  display:flex !important;
  justify-content:center !important;
  margin-bottom: 16px !important;
}

/* 3段：1行目X、2行目IG/LINE、3行目BS/YouTube */
#snsNews .sns-links{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  justify-items:center !important;
  align-items:start !important;
}

/* 画像は親に追従（ここが“サイズが変わらない”根本対策） */
#snsNews .sns-banner{
  display:block !important;
  width: min(420px, 100%) !important; /* 他は今の大きさ */
}
#snsNews .sns-banner img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border-radius: var(--radius) !important;
}

/* Xだけやや大きめ */
#snsNews .sns-banner--x{
  grid-column: 1 / -1 !important;
  width: min(480px, 100%) !important;
}

/* === TOP_NEWS_FIX:BEGIN === */
/* ===== TOP: おしらせ一覧の崩れ防止（ニュースページには影響しない） ===== */
.news-card #newsList,
.news-card .news-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news-card #newsList > li,
.news-card .news-list > li,
.news-card .news-item{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(11,42,56,.10);
}

.news-card #newsList > li:last-child,
.news-card .news-list > li:last-child{
  border-bottom: none;
}

.news-card .news-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.news-card .news-date{ font-weight: 700; }

.news-card .tag,
.news-card .badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(11,42,56,.12);
  background: rgba(255,255,255,.7);
}

.news-card .news-title{ font-weight: 700; }
.news-card .news-body{ line-height: 1.6; }

.news-card a{
  margin-left: 0 !important;
  white-space: normal;
  word-break: break-word;
  display: inline-block;
}
/* === TOP_NEWS_FIX:END === */

/* === SNS_FIX:BEGIN === */
/* ===== SNS only (scoped to #snsNews) =====
   並び：X / (Instagram, LINEstore) / (BlueSky, YouTube)
   Xはやや大きめ、他は今の大きさのまま
   SNS_news.png：1600pxの95%（min(95vw,1600px)）
   ※News / Footer 等には影響しません
*/
#snsNews .sns-title-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}
#snsNews .sns-title-img{
  max-width:1200px !important;
  width:min(1100px) !important;
  height:auto !important;
  display:block !important;
  border-radius: var(--radius);
  margin: 0 auto;
}

#snsNews .sns-links--grid3{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  justify-items:center !important;
  align-items:start !important;
}

#snsNews .sns-banner{
  display:block;
  width: min(420px, 100%) !important;
}
#snsNews .sns-banner img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border-radius: var(--radius);
}

/* Xだけやや大きめ */
#snsNews .sns-banner--x{
  grid-column: 1 / -1 !important;
  width: min(480px, 100%) !important;
}
/* === SNS_FIX:END === */

/* === NEWS_PAGE_SIZE:BEGIN === */
/* newsページ：一覧表示エリアを少し広く（幅~1500px / 高さ~1000pxイメージ） */
.page-news .news-page-container{
  max-width: 1000px;
}
.page-news .news-page-card{
  width: 100%;
}

/* カード内の一覧エリアを縦に少し広げる（最大1000px程度） */
.page-news .news-page-card .news-list{
  max-height: 500px;
  overflow: auto;
  padding: 14px;
}
/* === NEWS_PAGE_SIZE:END === */

/* === CHARACTERS_PAGE:BEGIN === */
/* キャラ紹介：左に画像 / 右に紹介文（微調整は後でOK） */
.character-list{
  display: grid;
  gap: 18px;
}

.character-card{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.character-card__media img{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: rgba(255,255,255,.6);
}

.character-card__name{
  margin: 0 0 10px;
  font-size: 22px;
}

.character-card__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
}

@media (max-width: 900px){
  .character-card{
    grid-template-columns: 1fr;
  }
}

/* ===== Drawer menu illustration (menu.png) =====
   Place /assets/img/menu.png and it will appear at the bottom of the hamburger menu.
   Width follows the menu panel, height auto.
*/
.drawer__panel{
  display: flex;
  flex-direction: column;
}
.drawer__nav{
  flex: 1 1 auto;
}
.drawer__illustration{
  width: 100%;
  height: auto;
  display: block;
  margin-top: auto;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}


/* === CHARACTERS_PAGE:END === */

/* === MENU_ILLUSTRATION_FIX:BEGIN === */
/* menu.png をドロワーメニュー最下部に表示（現行HTML: .drawer__list 版） */
.drawer__panel{ display:flex; flex-direction:column; }
.drawer__list{ flex: 1 1 auto; margin:0; padding:0; list-style:none; }
.drawer__illustration{
  width:100%;
  height:auto;
  display:block;
  margin-top:auto;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
/* === MENU_ILLUSTRATION_FIX:END === */

/* === MOBILE_LAYOUT_PATCH:BEGIN === */
@media (max-width: 768px){
  /* TOP: 2カラム（grid-2）を縦並びに */
  .grid-2{
    grid-template-columns: 1fr !important;
  }

  /* 「もっと見る」ボタンも縦に */
  .more-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .more-cell{ justify-content: center; }

  /* TOP内：newsカードが横スクロール等しないように */
  .news-card{ min-width: 0; }
  .news-list{ padding-left: 0; }

  /* SNS: 1-2-2 をスマホでは全て縦並びに */
  .sns-links--grid3{
    grid-template-columns: 1fr !important;
  }
  .sns-banner--x{
    justify-self: stretch !important;
  }
}
/* === MOBILE_LAYOUT_PATCH:END === */

/* === MOBILE_TOP_SNS_FIX:BEGIN ===
   目的:
   ① スマホで全体を中央寄せ
   ② TOP(ばらひつじとは?/キャラ画像/もっと見る/おしらせ/ニュース/もっと見る) の順番をスマホだけ変更
   ③ SNSバナーをスマホは縦1列（X→IG→LINE→BlueSky→YouTube）
   ④ SNS_news.png（タイトル画像）をスマホ幅にフィット
   ※PC(>768px)には影響しません
=== */
@media (max-width: 768px){

  /* ① 全体を中央寄せ（念のため） */
  .container{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ② TOP 2カラム → 1カラム & 並び替え（CSSだけで実現） */
  .grid-2{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "what"
      "illust"
      "more-illust"
      "oshirase"
      "news"
      "more-news" !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  /* grid-2の子要素（HTML順: what / oshirase / illust / news / more-row） */
  .grid-2 > :nth-child(1){ grid-area: what; }
  .grid-2 > :nth-child(2){ grid-area: oshirase; }
  .grid-2 > :nth-child(3){ grid-area: illust; }
  .grid-2 > :nth-child(4){ grid-area: news; }

  /* more-row を分解して、2つの「もっと見る」を別エリアに配置 */
  .grid-2 > .more-row{
    display: contents !important; /* 2つのボタンをgrid-2の直下要素として扱う */
  }
  .grid-2 > .more-row > .more-cell:nth-child(1){
    grid-area: more-illust;
    display:flex;
    justify-content:center;
  }
  .grid-2 > .more-row > .more-cell:nth-child(2){
    grid-area: more-news;
    display:flex;
    justify-content:center;
  }
  .more-btn{
    width: min(260px, 100%) !important;
    height: auto !important;
  }

  /* ③ SNS: 縦1列・中央寄せ */
  #snsNews .sns-links--grid3,
  #snsNews .sns-links{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: start !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }
  #snsNews .sns-banner{
    width: 100% !important;
    max-width: 520px !important;
  }
  #snsNews .sns-banner img{
    width: 100% !important;
    height: auto !important;
    display:block !important;
  }
  /* Xだけ“やや大きめ”は維持しつつ、はみ出さない */
  #snsNews .sns-banner--x{
    width: 100% !important;
    max-width: 560px !important;
  }

  /* ④ SNS_news.png（タイトル画像）をスマホ幅にフィット */
  #snsNews .sns-title-img{
    width: min(95vw, 560px) !important;
    max-width: 95vw !important;
    height: auto !important;
    display:block !important;
    margin: 0 auto !important;
  }
}
/* === MOBILE_TOP_SNS_FIX:END === */

/* === ONE_GRADIENT_BACKGROUND:BEGIN ===
   背景が「途中で途切れてまたグラデーション」に見えるのを防ぐため、
   bodyの背景を単一のlinear-gradientに統一（PC/スマホ共通）
=== */
html, body{
  min-height: 100%;
}
body{
  background-image: linear-gradient(180deg, var(--c-sky) 0%, #ffffff 60%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}
/* === ONE_GRADIENT_BACKGROUND:END === */


/* キャラ紹介：あらすじ（中央揃え） */
.chara-synopsis {
  margin-top: 12px;
  margin-bottom: 18px;
}

.chara-synopsis__text {
  text-align: center;
  line-height: 1.9;
  margin: 0;
}

/* 既存のキャラ紹介本文は左揃えのまま */
.character-card__body,
.character-card__text {
  text-align: left;
}