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

/* =======================
   共通(後で使うかもよう）
======================= */

@media all and (max-width:0px) {




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 {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


: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: 1rem !important;   /* ← 最低限の余白を残す */
    --wp--style--root--padding-right: 1rem !important;  /* ← 右も同じ */
  }

  .wp-site-blocks,
  .wp-block-post-content,
  .is-layout-constrained.wp-block-group {
    padding-left: 0rem !important;   /* ← 左右バランス */
    padding-right: 0rem !important;
    box-sizing: border-box;

    /* ★追加：中央揃え */
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;  /* 横はみ出し防止 */
  }

  html.has-modal-open,
  body.has-modal-open,
  body.nav-open {
    padding-right: 0 !important;
    overflow: hidden;
  }
}


}


/* =======================
   トップページ専用
======================= */
body.home a { 
  color: var(--wp--preset--color--primary); 
}

body.home .wp-element-button,
body.home .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  border-radius: 9999px;
}

body.home .wp-block-post-title { 
  display: none !important;  /* ページタイトル非表示 */ 
}

body.home html,
body.home body { 
  overflow-x: clip;          /* 横スクロール抑止 */ 
}

/* full幅ブロックの左右余白リセット（TT25） */
body.home .wp-site-blocks > .alignfull,
body.home .wp-site-blocks .wp-block-group.alignfull {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* alignwide を中央寄せ */
body.home :where(.wp-site-blocks, .is-layout-constrained) > .alignwide {
  margin-left: auto; 
  margin-right: auto;
}

/* モバイルの右寄り対策（root padding & modal補正） */
@media (max-width: 768px) {
  body.home :root {
    --wp--style--root--padding-left: 1rem !important;   /* ← 最低限の余白を残す */
    --wp--style--root--padding-right: 1rem !important;  /* ← 右も同じ */
  }

  body.home .wp-site-blocks,
  body.home .wp-block-post-content,
  body.home .is-layout-constrained.wp-block-group {
    padding-left: 0rem !important;   /* ← 左右バランス */
    padding-right: 0rem !important;
    box-sizing: border-box;

    /* ★追加：中央揃え */
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;  /* 横はみ出し防止 */
  }

  body.home html.has-modal-open,
  body.home body.has-modal-open,
  body.home 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);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  gap: 1rem;
}

.logo { flex: 0 0 auto; }
.logo img { max-height: 40px; width:auto; display:block; }
@media (max-width:480px){
  .logo img { max-height: 32px; }
}
/* ヘッダー右側（検索＋メニュー） */
.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;      /* ← 右端で潰れない */
}

/* =======================
   検索エリア
======================= */
/* --- ヘッダー右側を伸びる領域にする --- */
.header-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:1 1 auto;   /* ← ここ重要：右側を広げる */
  min-width:0;     /* ← 折り返し時の潰れ防止 */
}

/* --- 検索ラッパ：幅を持たせて基準化 --- */
.search-wrapper{
  position:relative;
  flex:1 1 auto;   /* ← アイコンだけの幅にならない */
  min-width:0;
  height: 2.5rem;  /* 好みで。フォーム高さの基準に */
}

/* 虫眼鏡は右端に固定（押されて動かない） */
.search-toggle{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:2;         /* ← フォームより手前で押せる */
  background:none;
  border:none;
  padding:.25rem;
  display:flex; align-items:center; justify-content:center;
}
.search-toggle svg{ width:24px; height:24px; }

/* --- フォームは虫眼鏡の左で横に伸びる --- */
.header-search{
  position:absolute;
  top:50%;
  right: calc(24px + .5rem);   /* ← 虫眼鏡の幅＋余白ぶんを確保 */
  transform:translateY(-50%);
  width:0;                      /* 初期は隠す */
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition: width .35s ease, opacity .25s ease;

  background:#fff;
  border:1px solid #ccc;
  border-radius:6px;
  padding:.25rem .5rem;
  z-index:1;                    /* アイコンより後ろでOK */
  box-sizing:border-box;
}

/* 表示時：ラッパ幅を基準に%でにゅっと */
.search-wrapper.active .header-search{
  /* 虫眼鏡分を引いた残り幅の中で最大値を取る */
  width: min(70%, calc(100% - (24px + .75rem)));
  opacity:1;
  pointer-events:auto;
}

/* モバイルは広めに */
@media (max-width:768px){
  .search-wrapper.active .header-search{
    width: calc(100% - (24px + .75rem));
  }
}

/* 中身は100%でフィット */
.header-search form{
  display:flex; align-items:center; gap:.4rem; width:100%;
}
.header-search input[type="search"]{
  flex:1 1 auto; min-width:0; width:100%;
  padding:.4rem .6rem; font-size:.9rem;
  border:1px solid #ccc; border-radius:4px; box-sizing:border-box;
}
.header-search .wp-element-button{
  flex:0 0 auto;
  padding:.3rem .8rem; font-size:.85rem; white-space:nowrap; line-height:1.2;
}

@media (max-width:480px){
  .header-search input[type="search"]{ font-size:.8rem; padding:.3rem .4rem; }
  .header-search .wp-element-button{ padding:.25rem .5rem; font-size:.7rem; }
}





/* アイコンボタン */
.icon-btn {
  background: none;
  border: none;
  padding: .25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PC用フルメニュー（残しておくけど今は非表示） */
.header-nav[hidden] {
  display: none !important;
}

/* =======================
   ハンバーガーメニュー
======================= */


/* ハンバーガーは常に表示 */
.menu-toggle {
  display: inline-flex !important; /* ← スマホで潰されないよう強制 */
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  z-index: 2000; /* 他の要素より前に出す */
  position: relative;
}


/* モバイルメニュー 初期状態 */
#mobile-menu {
  display: flex;              /* ← ここで消さない */
  flex-direction: column;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height .35s ease, opacity .25s ease;
}

/* 開いた状態 */
#mobile-menu.active {
  max-height: 85vh;
  opacity: 1;
  pointer-events: auto;
}

/* メニューリンク */
#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);
}




/* =======================
   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'); } }
*/
/* ヘッダーの高さ分だけ本文を下げる */
body {
  padding-top: 70px; /* ヘッダー高さに合わせる */
}
body.admin-bar {
  padding-top: calc(70px + 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    padding-top: calc(70px + 46px);
  }
}



/* ログイン時の管理バーが出ているとき */
body.admin-bar .site-header {
  top: 32px;   /* 管理バーの高さ（PCは32px） */
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px; /* モバイルは管理バーが46pxになる */
  }
}

/* =======================
   投稿リスト横スクロール
======================= */

/* ラッパー */
.wp-block-latest-posts.post-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;           /* 横スクロール */
  scroll-snap-type: x mandatory;
  padding: 0;
  margin: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch; /* iOSスムーズ */
}

/* カード */
.wp-block-latest-posts.post-scroll li {
  flex: 0 0 280px;            /* PC: 280px幅のカード */
  scroll-snap-align: start;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* アイキャッチ画像 */
.wp-block-latest-posts.post-scroll img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* タイトル */
.wp-block-latest-posts.post-scroll a {
  display: block;
  padding: .6rem;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  line-height: 1.4;
  word-break: break-word;     /* 長い単語も折り返す */
}
.wp-block-latest-posts.post-scroll a:hover {
  opacity: .8;
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
  .wp-block-latest-posts.post-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: center;   /* ★中央寄せ */
    padding: 0 1rem;           /* 左右に余白 */
  }

  .wp-block-latest-posts.post-scroll li {
    flex: 0 0 90%;             /* ほぼ全幅 */
    max-width: 90%;
    margin: 0 auto;            /* ★中央寄せ */
    scroll-snap-align: center; /* ★スナップで中央に止まる */
  }

  .wp-block-latest-posts.post-scroll img {
    width: 100%;
    height: 140px;             /* 画像を少し小さく */
    object-fit: cover;
  }

  .wp-block-latest-posts.post-scroll a {
    font-size: .9rem;
    padding: .5rem;
    display: block;
    text-align: center;        /* タイトルも中央寄せ */
  }
}