/*
 Theme Name: Shinagawa Child
 Template: twentytwentyfive
 Version: 1.0.0
 Author: 上條
 Description: 品川支部向け Twenty Twenty-Five 子テーマ
*/

/* =======================
   共通
======================= */
a { color: var(--wp--preset--color--primary); }
.wp-element-button,
.wp-block-button__link {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  border-radius: 9999px;
}
.wp-block-post-title { display: none !important; }  /* ページタイトル非表示 */
html, body { overflow-x: clip; }                    /* 横スクロール抑止 */

/* full幅ブロックの左右余白リセット（TT25） */
.wp-site-blocks > .alignfull,
.wp-site-blocks .wp-block-group.alignfull,
:where(.wp-site-blocks, .is-layout-constrained, .wp-block-post-content, .wp-block-group.is-layout-constrained) > .alignfull {
  margin-left: calc(-1 * var(--wp--style--root--padding-left));
  margin-right: calc(-1 * var(--wp--style--root--padding-right));
  width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
  max-width: none;
}
:where(.wp-site-blocks, .is-layout-constrained) > .alignwide {
  margin-left: auto; margin-right: auto;
}

/* モバイルの右寄り対策（root padding & modal補正） */
@media (max-width: 768px) {
  :root {
    --wp--style--root--padding-left: 0px !important;
    --wp--style--root--padding-right: 0px !important;
  }
  .wp-site-blocks,
  .wp-block-post-content,
  .is-layout-constrained.wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html.has-modal-open, body.has-modal-open, body.nav-open {
    padding-right: 0 !important;
    overflow: hidden;
  }
}

/* =======================
   固定ヘッダー
======================= */
.site-header{
  position: fixed; top:0; left:0; width:100%; z-index:1000;
  background: rgba(248,248,248,0.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .6rem 1rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: nowrap;   /* ← 折り返し禁止 */
  gap: 1rem;           /* 要素同士にちょっと余白 */
}

.site-header-inner > * {
  flex-shrink: 0;      /* ← 無理に縮んで折り返さないように */
}


/* ロゴ画像（画像ファイルは /res/logo.png を想定） */
.logo img{
  max-height: 40px; width:auto; display:block;
}
@media (max-width:480px){
  .logo img{ max-height: 32px; }
}

/* =======================
   モバイルメニュー（hidden制御＋にゅっとアニメ）
   必要なHTML:
   <button class="menu-toggle" aria-controls="mobile-menu" ...>☰</button>
   <nav id="mobile-menu" hidden> ... </nav>
======================= */

/* 閉じ状態（hidden）でもアニメ可能にする */
#mobile-menu[hidden],
#search-drawer[hidden] {
  display: block !important;     /* 高さ0で非表示 */
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.25s ease,
    transform  0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

/* 開き状態 */
#mobile-menu,
#search-drawer {
  max-height: 85vh;
  opacity: 1;
  transform: translateY(0);
}

/* 見た目 */
#mobile-menu {
  width: 100%;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}
#mobile-menu a {
  padding: .9rem 1rem;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  font-weight: 500;
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* PCではモバイルUI無効 */
@media (min-width:1024px){
  .menu-toggle { display:none; }
  #mobile-menu { display:none !important; }
}

/* =======================
   Hero
======================= */
.hero.alignfull{
  min-height: 100dvh;
  display:flex; justify-content:center; align-items:center;
  text-align:center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding-top: 4.2rem;  /* ヘッダー高さ分 */
  box-sizing:border-box;
}
.hero-inner{
  max-width: 1200px; margin:0 auto;
  padding-inline: 1rem;
}
.hero h1{
  font-size:2rem; font-weight:700; line-height:1.3; margin-bottom:1rem;
}
.hero p{
  font-size:1rem; color: var(--wp--preset--color--accent); margin-bottom:2rem;
}
@media (min-width:768px){
  .hero h1{ font-size:3rem; max-width:900px; }
  .hero p { font-size:1.25rem; max-width:700px; }
}
@media (min-width:1200px){
  .hero h1{ font-size:3.5rem; }
}
.hero .wp-element-button{
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  padding:.8rem 2rem;
  border-radius:9999px; font-weight:600;
  text-decoration:none;
  transition: transform .2s ease, background .2s ease;
}
.hero .wp-element-button:hover{
  transform: scale(1.05);
  background:#002244;
}

/* =======================
   Feature（2パターン）
======================= */

/* A) グレーの箱：上=タイトル／中=リンク／下=画像（<picture> or <img>を最下段） */
.feature-box{
  background:#f5f5f7;
  padding: clamp(2.5rem, 6vw, 5rem) 1rem;
  box-sizing:border-box;
}
.feature-box .feature-inner{
  max-width:1100px; margin:0 auto; text-align:center;
  display:grid; gap:1rem;
}
.feature-box .feature-inner h2{
  font-size:2rem; font-weight:700;
}
.feature-box .feature-link{
  font-weight:600; text-decoration:none;
  color: var(--wp--preset--color--primary);
  border-bottom:1px solid var(--wp--preset--color--primary);
}
.feature-box .feature-link:hover{ opacity:.85; }
.feature-media{ margin-top:1rem; display:block; }
.feature-media img{ display:block; width:100%; height:auto; border-radius:8px; }
@media (min-width:768px){
  .feature-box .feature-inner{ gap:1.25rem; }
  .feature-box .feature-inner h2{ font-size:2.25rem; }
}

/* B) グレー背景に背景画像を“contain”で配置（上下に余白を必ず作る） */
.feature-section{
  position:relative; width:100%;
  background-color:#f5f5f7;
  display:flex; justify-content:center; align-items:center;
  text-align:center;
  padding: clamp(3rem, 6vw, 6rem) 1rem;
  box-sizing:border-box;
  min-height:60vh;
}
.feature-section.with-image{
  background-color:#f5f5f7;
  background-image: var(--feature-image-mobile);  /* 例: inline style で指定不可のときはクラス分けを推奨 */
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (min-width:768px){
  .feature-section.with-image{
    background-image: var(--feature-image-desktop);
  }
}
.feature-section .feature-inner{
  max-width:900px; margin:0 auto; text-align:center;
  padding:2rem 1rem; box-sizing:border-box;
  position:relative; z-index:1;
}
.feature-section h2{
  font-size:2rem; font-weight:700; margin-bottom:.75rem;
}
.feature-section .feature-link{
  font-size:1.1rem; font-weight:600; text-decoration:none;
  color: var(--wp--preset--color--primary);
  border-bottom:1px solid var(--wp--preset--color--primary);
}
.feature-section .feature-link:hover{ opacity:.8; }

/* 背景画像をCSS側で切替したい場合（HTMLに変数が入らないとき）はクラス別定義を使用）
   .feature--top1 { background-image:url('/wp-content/res/images/sp-top1.png'); }
   @media (min-width:768px){ .feature--top1 { background-image:url('/wp-content/res/images/pc-top1.png'); } }
*/