@charset "UTF-8";
/* =========================================================
   AngryBabyz展 in 東京タワー / LP
   - デザイン原寸 : 幅 2000px（png フォルダの書き出しと 1:1）
   - SP / TB : コンテンツ幅 100%（単純拡大）
   - PC      : コンテンツ幅 640px 固定 + 左右にサイドコンテンツ（--main-w で変更）
   - サイズ指定は cqw（コンテナ幅基準）で統一 → 100cqw = デザイン 2000px
     ＝ デザイン Npx は  (N / 20) cqw
   ========================================================= */

/* ---------------------------------------------------------
   0. Base
   --------------------------------------------------------- */
:root{
  --navy:      #03365B;
  --red:       #D84D26;
  --yellow:    #FFF694;
  --cream:     #FFFAEE;
  --pale:      #FEF7B8;
  --mint:      #C3E8D0;
  --mint2:     #CAEAD6;
  --teal:      #7CC6B5;
  --teal-dark: #34727F;
  --green:     #BAE3C9;
  --deep:      #317181;

  /* ABOUT 内「開催概要」ボックス用（新カンプ 0804 実測値） */
  --line-teal: #72B5AF;   /* 枠線・飾り罫・日付下ライン */
  --txt-date:  #2D7083;   /* 会期 */
  --txt-hours: #00677D;   /* 開店時間 */
  --txt-note:  #63A9B8;   /* ※注記 */
  --txt-addr:  #1C6073;   /* 住所 */

  --txt-footer: #00677D;   /* フッター */

  /* PC時のコンテンツ幅。
     MV(1.260×W) + 開催概要バンド(0.164×W) = 1.424×W なので、
     この2つを1画面に収めるには「表示領域の高さ ÷ 1.424」以下が必要。
     画面高に応じて自動で収めたい場合は下行に差し替える：
       --main-w: min(640px, 70dvh);   */
  --main-w: 640px;
  --pc-bp:  1200px;     /* PCレイアウト開始幅（左右サイドの表示開始） */

  /* --- 書体（Adobe Fonts / kitId: sup5vdr） -----------------
     ・その他テキスト … 源ノ角ゴシック JP（Regular 400 / Bold 700）
     ・ABOUT 本文     … わんぱくルイカ
       ※ Adobe Fonts のウェイト指定に準拠
         WanpakuRuika 08（太）= font-weight:100
         WanpakuRuika 04（細）= font-weight:400
       太さを 04 に変えたい場合は --ruika-w を 400 にするだけ */
  --font-jp:    "source-han-sans-japanese", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --font-ruika: "wanpaku-ruika", var(--font-jp);
  --ruika-w: 100;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-jp);
  font-weight:700;
  color:var(--navy);
  background:var(--teal);
  line-height:1.6;
  overflow-x:hidden;
}
body.is-menuOpen{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* タップ時のハイライト／フォーカスリング
   iOS Safari はタップやプログラム的な .focus() でも青いリングを描画するため抑止する。
   ただしキーボード操作（:focus-visible）ではリングを残し、操作位置が分かるようにする */
a, button{ -webkit-tap-highlight-color:transparent; }
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:0.3rem solid var(--navy); outline-offset:0.2rem; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

/* ---------------------------------------------------------
   1. Layout
   --------------------------------------------------------- */
.l-main{
  container-type: inline-size;
  container-name: main;
  width:100%;
  max-width:var(--main-w);
  margin-inline:auto;
  position:relative;
  z-index:1;
  background:var(--teal);
  overflow:hidden;          /* はみ出し装飾のクリップ */
}

/* PC左右サイド（PC時のみ表示） */
.l-side{ display:none; }

/* ---------------------------------------------------------
   2. 共通パーツ
   --------------------------------------------------------- */
/* ハンバーガー */
.l-header{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:100;
  pointer-events:none;
}
.c-menuBtn{
  display:block;
  width:100%;
  max-width:var(--main-w);
  margin-inline:auto;
  pointer-events:none;
}
.c-menuBtn img{
  width:12.35%;
  margin-left:auto;
  margin-right:3.25%;
  pointer-events:auto;
  cursor:pointer;
  transition:transform .2s;
}

/* 見出し画像の共通 */
.c-h2{ line-height:0; }

/* ボタンのホバー */
.p-info__btns a,
.p-news__more a,
.p-contact__btn a,
.l-side__inner a,
.logo a{ display:block; transition:transform .2s; }

.p-info__btns a:hover,
.p-news__more a:hover{ transform:translateX(0.6cqw); }

.l-side__inner a:hover,
.logo a:hover,
.p-contact__btn a:hover{ transform:translateY(-0.6cqw); }


/* ---------------------------------------------------------
   3. MV
   --------------------------------------------------------- */
.p-mv{
  position:relative;
  aspect-ratio:2000 / 2550;   /* mv_img.png の下部は情報バンドに隠れる */
  overflow:hidden;
  background:var(--teal);
}
.p-mv img{
  width:100%;
  position:absolute;
  top:2cqw;
  left:0;
}

/* ---------------------------------------------------------
   4. 開催概要バンド
   --------------------------------------------------------- */
.p-info{
  /* .p-mv が position:relative のため、重ね順を明示しないと
     ネガティブマージンで持ち上げた日程バナーが MV の下に潜り込む */
  position:relative;
  z-index:1;
  /* flow-root で BFC を作り、日程バナーのネガティブマージンが
     セクション自身（＝背景カラー）まで引き上げるのを防ぐ。
     これにより背景の上端は MV の直下に留まり、バナーだけが上へはみ出す */
  display:flow-root;
  background:var(--teal-dark);
  padding-bottom:0.2cqw;
  text-align:center;
}
.p-info__date{
  width:88.5%;           /* img_date 1770px ÷ 2000 */
  margin:-5.95cqw auto 0;/* MVに 119px ぶん重ねる */
}
.p-info__double{
  width:87%;             /* img_double 1740px ÷ 2000 */
  margin:2.45cqw auto 3.0cqw;
}
.p-info__btns{
  display:flex;
  justify-content:center;
  gap:2.6%;
  margin-top:1.2cqw;
}
.p-info__btns li:nth-child(1){ width:43.5%; }
.p-info__btns li:nth-child(2){ width:45.7%; }

/* ---------------------------------------------------------
   5. NEWS
   --------------------------------------------------------- */
.p-news{
  /* READ MORE を ABOUT の上に重ねるため、後続セクションより上に描画する */
  position:relative;
  z-index:2;
  /* flow-root で BFC を作り、READ MORE のネガティブ下マージンが
     セクション自身と相殺するのを防ぐ（背景の下端はそのまま、画像だけ下へはみ出す） */
  display:flow-root;
  background:var(--mint);
  padding:3.7cqw 0 0;
}
.p-news__cloud{
  position:absolute;
  top:1.8cqw; right:0;
  width:55.45%;
  z-index:0;
}
.p-news__h2{
  position:relative;
  z-index:1;
  margin-left:7.25%;
}
.p-news__h2 img{ width:26.8%; }

.p-news__list{
  position:relative;
  z-index:1;
  margin-top:1.7cqw;
}
.p-news__list li + li{ margin-top:2cqw; }
.p-news__list a{
  position:relative;
  display:block;
  width:89.75%;
  margin-inline:auto;
  background:var(--cream);
  border:0.35cqw solid var(--navy);
  border-radius:8cqw;
  padding:1.0cqw 8cqw 1.2cqw 4.5cqw;
  transition:transform .2s, background-color .2s;
}
.p-news__list a:hover{ background:#fff; transform:translateY(-0.4cqw); }

.p-news__date{
  display:block;
  font-weight:700;
  font-size:3.9cqw;
  line-height:1.25;
  color:var(--teal-dark);
  letter-spacing:.02em;
}
.p-news__title{
  display:block;
  font-size:3.8cqw;
  font-weight:700;
  line-height:1.35;
  color:var(--navy);
}
/* ▶ */
.p-news__list a::after{
  content:"";
  position:absolute;
  top:50%; right:4.2cqw;
  transform:translateY(-50%);
  width:0; height:0;
  border-left:2.2cqw solid var(--navy);
  border-top:1.5cqw solid transparent;
  border-bottom:1.5cqw solid transparent;
}

.p-news__more{
  position:relative;
  z-index:1;
  /* 下マージンを負にして ABOUT へ 233px ぶんはみ出させる */
  /* margin:2.0cqw 4% -10.5cqw auto; */
  margin:2.0cqw 4% -10.5cqw auto;
  width:51.75%;
}

/* ---------------------------------------------------------
   6. ABOUT
   --------------------------------------------------------- */
.p-about{
  position:relative;
}
.p-about__head{
  position:relative;
  aspect-ratio:2000 / 1065;
  background:url("../img/h_about_bg.png") center top / 100% 100% no-repeat;
  background-color: var(--mint);
  margin-top:-0.1cqw;
  margin-bottom:-4cqw;
}
.p-about__h2{
  position:absolute;
  left:50%;
  top:22.75cqw;
  transform:translateX(-50%);
  width:54.95%;
}

.p-about__body{
  position:relative;
  padding:0 4% 2cqw;
  text-align:center;
  background:var(--pale);
}
.p-about__deco{
  position:absolute;
  top:0;
  z-index:0;
  pointer-events:none;
}
.p-about__deco--l{ left:3cqw; top:-11cqw; width:15.25%; }
.p-about__deco--r{ right:1cqw; top:-11cqw; width:16.45%; }

/* ABOUT の本文のみ「わんぱくルイカ」 */
.p-about__lead,
.p-about__txt{
  font-family:var(--font-ruika);
  font-weight:var(--ruika-w);
}

.p-about__lead{
  position:relative;
  z-index:1;
  margin-top:-2cqw;
  font-size:5.8cqw;
  line-height:1.55;
  letter-spacing:.02em;
}
.p-about__lead em{ font-style:normal; color:var(--red); }

.p-about__txt{
  position:relative;
  z-index:1;
  margin-top:6cqw;
  margin-bottom:6cqw;
  font-size:4.2cqw;
  line-height:1.65;
  letter-spacing:.02em;
}
.p-about__plus{
  font-size:5.2cqw;
}
.p-about__txt p + p{ margin-top:5cqw; }
.p-about__txt em{ font-style:normal; color:var(--red); }

/* --- ABOUT 内「開催概要」ボックス（新カンプ 0804 で追加） ---
   カンプ実測：箱 x86-1917 / y9542-11039、枠線 8px #72B5AF、角丸 75px、地色 #FFFAEE */
.p-about__outline{
  width:91.6%;                 /* 1832px ÷ 2000 */
  margin:3.7cqw auto 0;
  padding:4.55cqw 3.45cqw 4.95cqw;
  background:var(--cream);
  border:0.6cqw solid var(--line-teal);
  border-radius:3.75cqw;
  font-family:var(--font-jp);
  font-weight:700;
}

/* 「＼ AngryBabyz展 開催概要 ／」 飾り罫は素材が無いため CSS で描画 */
.p-about__outlineTtl{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7.5cqw;
  font-size:5.7cqw;
  line-height:1.2;
  color:var(--navy);
}
/* 飾り罫「＼ ／」（ABOUT 専用。フッターとは別指定）
   フォントサイズに依存しない固定値（cqw）で指定している */
.p-about__outlineTtl::before,
.p-about__outlineTtl::after{
  content:"";
  flex:none;
  width:0.9cqw;
  height:8.1cqw;
  border-radius:0.45cqw;
  background:var(--line-teal);
}
.p-about__outlineTtl::before{ transform:rotate(-25deg); }
.p-about__outlineTtl::after { transform:rotate(25deg); }

.p-about__outlineDate{
  margin-top:2.8cqw;
  text-align:center;
  font-size:4.55cqw;
  line-height:1.2;
  color:var(--txt-date);
}
.p-about__outlineDate::after{      /* 日付下のライン */
  content:"";
  display:block;
  width:21.75cqw;
  height:0.85cqw;
  margin:2.05cqw auto 0;
  border-radius:0.45cqw;
  background:var(--line-teal);
}

.p-about__outlineFree{
  margin-top:2.15cqw;
  text-align:center;
  font-size:4.1cqw;
  line-height:1.2;
  color:var(--red);
}

.p-about__outlineHours{
  margin-top:5.75cqw;
  font-size:4.1cqw;
  line-height:1.16;
  color:var(--txt-hours);
}
.p-about__outlineNote{
  margin-top:1.75cqw;
  font-size:3.15cqw;
  line-height:1.4;
  color:var(--txt-note);
}
.p-about__outlineAddr{
  margin-top:4.4cqw;
  font-size:3.6cqw;
  line-height:1.32;
  color:var(--txt-addr);
}
span.gallery {
  padding-left: 7em;
}
span.store {
  padding-left: 7em;
}
.p-officialsite__btn{
  width:45.7%;                 /* btn_anbabyhp 914px ÷ 2000 */
  margin:4.95cqw auto 0;
}
.p-officialsite__btn a{ display:block; transition:transform .2s; }
.p-officialsite__btn a:hover{ transform:translateY(-0.6cqw); }

.p-about__foot{ background:var(--pale); }
.p-about__map{ width:100%; background:var(--pale); }
.p-about__line{ width:100%; margin-top:2.85cqw; }

/* ---------------------------------------------------------
   7. EVENT
   --------------------------------------------------------- */
.p-event{
  font-family:var(--font-ruika);
  font-weight:var(--ruika-w);
}
.p-event{
  position:relative;
  background:var(--mint2);
  padding-bottom:0;   /* PERSONALITY と隙間なく繋げる */
  overflow:hidden;
}
.p-event__cloud{
  position:absolute;
  top:-11cqw;
  left:0;
  width:100%;
  z-index:0;
}
.p-event__box{
  position:relative;
  z-index:1;
  width:91.4%;
  margin:10cqw auto 0;
  aspect-ratio:1828 / 1839;   /* bg_event.png の実寸比。潰すと下端が上がって隙間が広がる */
  background:url("../img/bg_event.png") center top / 100% 100% no-repeat;
  padding:22cqw 6cqw 10cqw;
}
.p-event__h2{
  position:absolute;
  left:4.0cqw;
  top:0.5cqw;
  width:37.35cqw;
}
.p-event__inner{ text-align:center; }
.p-event__txt{
  font-size:4.6cqw;
  line-height:1.7;
  letter-spacing:.01em;
}
.gentei{
  font-size:5.55cqw;
}
.p-event__txt + .p-event__txt{ margin-top:5cqw; }
.p-event__txt em{ font-style:normal; color:var(--red); }
.p-event__soon{ margin-top:6cqw; margin-bottom: 6cqw; }
.p-event__soon img{ width:62.9cqw; margin-inline:auto; }

.p-stores__btn{
  position:absolute;
  left:50%;
  bottom:4%;
  transform:translateX(-50%);
  width:45.2%;
}
.p-stores__btn a{ display:block; transition:transform .2s; }
.p-stores__btn a:hover{ transform:translateY(-0.6cqw); }

.p-event_personality__cloud{
  position:absolute;
  bottom:-51cqw;;
  left:0;
  width:100%;
  z-index:0;
}

/* ---------------------------------------------------------
   8. PERSONALITY
   --------------------------------------------------------- */
.p-personality{
  position:relative;
  background:var(--mint2);
  padding-bottom:4cqw;
  overflow:hidden;
}
.p-personality__cloud{
  position:absolute;
  top:-12cqw;
  left:0;
  width:100%;
  z-index:0;
}
.p-personality__box{
  position:relative;
  z-index:1;
  width:91.35%;
  margin:0 auto;
  aspect-ratio:1827 / 1248;   /* bg_personarity.png の実寸比 */
  background:url("../img/bg_personarity.png") center top / 100% 100% no-repeat;
  padding:14cqw 6cqw 10cqw;
}
.p-personality__h2{
  position:absolute;
  left:4.0cqw;
  /* ボックス上辺は右上がりの斜め。見出しは左上コーナーのすぐ上に置く */
  top:5.5cqw;
  width:60.65cqw;
}
.p-personality__inner{ text-align:center; }
.p-personality__soon img{ width:62.9cqw; margin-inline:auto; margin-top: 18cqw; }

/* ---------------------------------------------------------
   9. CONTACT
   --------------------------------------------------------- */
/* CONTACT ボタンはフッター（SNSの下）へ移動したため、
   このセクションは fotter_deco.png の装飾帯のみを担う。
   カンプ実測：装飾画像の上端は PERSONALITY ボックス下端の 171px 上、
   画像の緑（#BAE3C9）が左端に達する行は 907（画像高 1262）。
   → 画像は ::before で上へはみ出させ、セクション自身は
     「緑が始まる行までの残り」＝ 907 - 251 = 656px 分の高さを持つ。 */
.p-contact{
  position:relative;
  aspect-ratio:2000 / 656;
  background:var(--mint2);
  margin-top:-0.1cqw;
}
.p-contact.sub-news{
  background:var(--pale);
}
.p-contact::before{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  top:-12.55cqw;              /* PERSONALITY の下端より 251px 上から描画 */
  aspect-ratio:2000 / 1262;   /* fotter_deco.png の実寸比 */
  background:url("../img/fotter_deco.png") center top / 100% 100% no-repeat;
  pointer-events:none;
}

/* ---------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------- */
.p-footer{
  position:relative;
  background:url("../img/fotter_bg.png") center 30% / 100% auto no-repeat, var(--green);
  margin-top:-0.2cqw;
}
.p-footer__body{
  position:relative;
  padding:2cqw 5% 4cqw;
}
.p-footer__body > *:not(.p-footer__mic){ position:relative; z-index:1; }

.p-footer__ttl{
  font-family:var(--font-ruika);
  font-weight:var(--ruika-w);
}
/* 飾り罫「＼ ／」はタイトル＋サブタイトルの 2行ぶんの高さの中央に揃う
   （カンプ実測：2行の範囲 y15740-15931／中心15835、罫線 y15756-15907／中心15831）。
   そのため h2 自身を flex コンテナにし、2行を span でひとまとめの
   flex アイテムにして align-items:center で縦中央に合わせる。
   罫線の指定は ABOUT と共通化せず、このセクション内で完結させている */
.p-footer__ttl{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.85cqw;      /* カンプ実測：罫線と文字の間 57px */
  text-align:center;
  font-size:5.2cqw;
  line-height:1.4;
  letter-spacing:.01em;
}
.p-footer__ttl small{
  display:block;
  font-size:.72em;
}
/* 飾り罫、フッター見出し（.p-footer__ttl > span）とサイズ違いにした */
.p-footer__ttl::before,
.p-footer__ttl::after{
  content:"";
  flex:none;
  width:1.2cqw;
  height:9.0cqw;
  border-radius:0.45cqw;
  background:var(--line-teal);
}

.p-footer__ttl::before{ transform:rotate(-25deg); }
.p-footer__ttl::after { transform:rotate(25deg); }

.p-footer__dl{
  color:var(--txt-footer);
  margin-top:4cqw;
  font-size:4.2cqw;
  line-height:1.4;
}
.p-footer__dl dt{
  color:var(--navy);
  font-size:4.6cqw;
  font-weight:700;
  margin-top:2.6cqw;
}
.p-footer__dl dt:first-child{ margin-top:0; }
.p-footer__dl dd{ font-weight:700; }
.p-footer__dl dd .note{ font-size:3.2cqw; }

.p-footer__credit{
  margin-top:4cqw;
  color:var(--txt-footer);
  font-size:3.0cqw;
  line-height:1.75;
  font-weight:700;
}

.p-footer__sns{
  margin-top:6cqw;
  max-width:52%;
}
.p-footer__snsTtl img{ width:100.0%; }
.p-footer__sns .c-snsList{
  justify-content:flex-start;
  margin-top:3cqw;
}

/* SNS アイコン ── フッター / オーバーレイメニュー / PC右サイド の共通指定
   --sns-h   … アイコンの高さ
   --sns-gap … アイコン間の余白（片側）
   ※ cqw はコンテナ（.l-main / .p-menu__inner）の内側でのみ有効。
     PC右サイドはコンテナ外なので .p-sideSns 側で px/rem に上書きしている。 */
.c-snsList{
  --sns-h:9cqw;
  --sns-gap:3.5cqw;
  display:flex;
  align-items:center;
  justify-content:center;
}
.c-snsList li{
  margin:0 var(--sns-gap);
}
.c-snsList img{
  width:auto;
  height:var(--sns-h);
  transition:transform .2s;
}
.c-snsList a:hover img{ transform:scale(1.08); }

/* CONTACT ボタン（新カンプ 0804 で SNS アイコンの下へ移動）
   カンプ実測：btn_contact 891x310 / アイコン下端から 108px 下 / 左揃え */
.p-contact__btn{
  width:44.55cqw;      /* 891px ÷ 2000 */
  margin-top:3.5cqw;
}

.p-footer__mic{
  position:absolute;
  right:4%;
  bottom:-1%;
  width:40.0%;
  z-index:0;
}

.p-footer__bottom{
  background:var(--deep);
  padding:2.4cqw 0;
}
.p-footer__bottom ul{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  font-size:2.9cqw;
  font-weight:700;
  color:var(--mint);
}
.p-footer__bottom li + li{
  border-left:0.15cqw solid var(--mint);
}
.p-footer__bottom a{
  display:block;
  padding:0 5cqw;
  transition:opacity .2s;
}
.p-footer__bottom a:hover{ opacity:.7; }

/* ---------------------------------------------------------
   11. オーバーレイメニュー
   --------------------------------------------------------- */
.p-menu{
  position:fixed;
  inset:0;
  z-index:200;
  background:url("../img/mv_img.png") center top / cover no-repeat;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  overflow-y:auto;
}
.p-menu::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(178, 220, 200, .88);
}
.p-menu.is-open{ opacity:1; visibility:visible; }

.c-menuBtn--close{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  z-index:2;
}

.p-menu__inner{
  container-type:inline-size;
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--main-w);
  min-height:100%;
  margin-inline:auto;
  padding:22cqw 0 10cqw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.p-menu__list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8cqw;
  width:100%;
}
.p-menu__list a{
  display:block;
  transition:transform .2s;
}
.p-menu__list a:hover{ transform:scale(1.05); }
.p-menu__list li:nth-child(1) img{ width:15.45cqw; }
.p-menu__list li:nth-child(2) img{ width:20.85cqw; }
.p-menu__list li:nth-child(3) img{ width:37.35cqw; }
.p-menu__list li:nth-child(4) img{ width:28.75cqw; }
.p-menu__list li:nth-child(5) img{ width:47.4cqw; }
.p-menu__list li:nth-child(6) img{ width:32.35cqw; }

.p-menu__sns{ margin-top:12cqw; }

/* =========================================================
   下層ページ（news/index.php・お知らせ詳細）
   ========================================================= */

/* コンテンツ本文（緑ヘッダーの下・pale 地色） */
.p-subBody{
  background:var(--pale);
  padding:4cqw 4% 0;
}

/* ---------- 下層ヘッダーブロック ---------- */
.p-subHero{
  position:relative;
  background:var(--teal) url("../img/deco_crowd_logo.png") center 10cqw / contain no-repeat;
  padding-bottom:0.5cqw;   /* pale との段差を消す微調整 */
  height: 50cqw;
}
.p-subHero__cloud{
  display:block;
  width:100%;              /* 2000x536 の雲装飾 */
}
.p-subHero__logo{
  position:absolute;
  top:6.5cqw;              /* カンプ実測 y170 相当 */
  left:50%;
  transform:translateX(-50%);
  width:68.4%;             /* 1368px ÷ 2000 */
  max-width:none;
  z-index:1;
}
.p-subHero__chara{
  position:absolute;
  bottom: 0;
  display:block;
  width:100%;              /* 2000x418 のキャラ列 */
  margin-top:-4cqw;        /* 雲装飾との重なり調整 */
}

/* ---------- お知らせ一覧／詳細 ---------- */
.p-newsPage{
  padding:0;               /* 元 .p-news の上余白は不要（.p-subBody 側で確保） */
  background:transparent;  /* pale が透ける */
}
.p-newsPage .p-news__h2{
  margin-left:0;
  text-align:center;       /* 下層ページは中央寄せ */
}
.p-newsPage .p-news__h2 img{
  width:26.8%;
  margin-inline:auto;
}
.p-newsPage .p-news__list{
  margin-top:4cqw;
}

/* お知らせ詳細（news/YYYYMMDD/index.php） */
.p-newsDetail{
  width:89.75%;
  margin:4cqw auto 0;
  background:var(--cream);
  border:0.35cqw solid var(--navy);
  border-radius:5cqw;
  padding:6cqw 5cqw;
  color:var(--navy);
}
.p-newsDetail__ttl{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4.5cqw;
  font-size:4.4cqw;
  font-weight:700;
  line-height:1.35;
  text-align:center;
}
.p-newsDetail__ttl::before,
.p-newsDetail__ttl::after{
  content:"";
  flex:none;
  width:0.9cqw;
  height:6.5cqw;
  border-radius:0.45cqw;
  background:var(--line-teal);
}
.p-newsDetail__ttl::before{ transform:rotate(-25deg); }
.p-newsDetail__ttl::after { transform:rotate(25deg); }

.p-newsDetail__date{
  margin-top:2.4cqw;
  text-align:center;
  font-size:3.6cqw;
  color:var(--txt-date);
  width:fit-content;
  margin-inline:auto;
  padding-bottom:0.4cqw;
}
.p-newsDetail__date::after{      /* 日付下のライン */
  content:"";
  display:block;
  width:21.75cqw;
  height:0.85cqw;
  margin:2.05cqw auto 0;
  border-radius:0.45cqw;
  background:var(--line-teal);
}

.p-newsDetail__body{
  margin-top:4.5cqw;
  font-size:3.6cqw;
  line-height:1.75;
}
.p-newsDetail__body p + p{ margin-top:2.5cqw; }
.p-newsDetail__body .mt0{ margin-top: 0; }
.p-newsDetail__body em{ font-style:normal; color:var(--red); }

.p-newsDetail p.url{
  padding-left: 6cqw;
  line-height: 1.4;
}
.p-newsDetail p.url a{
  font-size: 2.8cqw;
  text-decoration: underline 2px;
}

/* BACK ボタン（btn_back.png 620x329 → 31%） */
.p-news__back{
  width:31%;
  margin:5cqw auto 0;
}
.p-news__back a{ display:block; transition:transform .2s; }
.p-news__back a:hover{ transform:translateX(-0.6cqw); }


/* ---------------------------------------------------------
   12-a. コンテンツ幅を超えた画面（>= 640px）：背景パターンを表示
        ※ --main-w を変えたらこのブレイクポイントも合わせる
   --------------------------------------------------------- */
@media screen and (min-width:641px){
  body{
    background:url("../img/bg_pattern.webp") center center / cover no-repeat fixed #9bcabb;
  }
  .l-main{
    box-shadow:0 0 3rem rgba(3,54,91,.18);
    border-left : #186273 solid 0.3cqw;
    border-right:#186273 solid 0.3cqw;
  }
}

/* ---------------------------------------------------------
   12-b. PC（>= 1200px）：左右サイドコンテンツを表示
   --------------------------------------------------------- */
@media screen and (min-width:1200px){

  /* ハンバーガー・オーバーレイメニューはPCでは不要（右サイドナビを常時表示） */
  .l-header{ display:none; }
  .p-menu{ display:none; }

  .l-side{
    display:block;
    position:fixed;
    top:0;
    width:calc((100% - var(--main-w)) / 2);
    height:100vh;
    z-index:2;
  }
  .l-side--left{ left:0; }
  .l-side--right{ right:0; }

  .l-side--left .l-side__inner{
    height:100%;
    display:flex;
    flex-direction:column;
    /* justify-content:center; */
    align-items:center;
    gap:1.5rem;
    padding:2rem;
  }
  .p-sideChara{ width:min(84%, 470px); }
  .p-sideLogo{  width:min(85%, 320px); margin: auto; }

  .l-side--right .l-side__inner{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    padding:3.2rem 1.5rem 3rem 1.8rem;
  }
  .p-sideNav ul{
    display:flex;
    flex-direction:column;
    gap:1.15rem;
  }
  .p-sideNav a{
    display:block;
    transition:transform .2s;
  }
  .p-sideNav a:hover{ transform:translateX(4px); }
  .p-sideNav li:nth-child(1) img{ width:85px; }
  .p-sideNav li:nth-child(2) img{ width:114px; }
  .p-sideNav li:nth-child(3) img{ width:197px; }
  .p-sideNav li:nth-child(4) img{ width:153px; }
  .p-sideNav li:nth-child(5) img{ width:250px; }
  .p-sideNav li:nth-child(6) img{ width:173px; }

  /* PC右サイドはコンテナ外で cqw が使えないため、オーバーレイと同寸になるよう
     --main-w から換算する（オーバーレイのコンテナ幅 = --main-w、
     アイコン 9cqw / 余白 3.5cqw → 9% / 3.5%） */
  .p-sideSns{
    --sns-h:calc(var(--main-w) * .09);
    --sns-gap:calc(var(--main-w) * .035);
    justify-content:flex-start;
  }
  .p-sideSns li:first-child{ margin-left:0; }
  /* PC右サイドのSNSは他のSNSと同じく img の scale で拡大させる
     （.l-side__inner a の上下移動を打ち消し、
      .c-snsList a:hover img の scale だけ効かせる） */
  .p-sideSns a:hover{ transform:none; }
}

/* 狭いPC（サイドが窮屈になる範囲）の微調整 */
@media screen and (min-width:1200px) and (max-width:1439px){
  .l-side--right .l-side__inner{ padding-inline:1rem; }
  .p-sideNav li img{ max-width:100%; }
}