/* =========================
   layout.css – block / grid / header / pages
   （tokens.css前提・フォールバックなし）
========================= */

/* ---- reset（薄め） ---- */
*,*::before,*::after{ box-sizing:border-box; }
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{ margin:0;padding:0; }
ul,ol{ list-style:none; }
img,svg,video,canvas{ max-width:100%; height:auto; display:block; }

/* ----------------------
   main / section / article
---------------------- */
main{}
section { padding-block-start: var(--sp-ML); padding-block-end: var(--sp-L); }
section:last-child{padding-block-end: var(--sp-XL);}
section.bg{ background: var(--colr-bg-item); }

/* ========================
   .block（3モード）
   (1) デフォルト：センタリング。幅は rem 指定（SP:56 / TAB:82 / PC:112）
   (2) .block.full：全幅 100%（左右余白なし）
   (3) .block.strch：全幅 100% + 端末別左右padding（var(--side-pad)）
======================== */
.block{
  margin-inline:auto;
  margin-block-end: var(--sp-M);
  width: var(--container-sp); /* SP */
}
@media (min-width:601px) and (max-width:900px){
  .block{ width: var(--container-tb); }   /* TAB */
}
@media (min-width:901px){
  .block{ width: var(--container); }      /* PC */
}
.block.full{
  width: 100%;
  padding-inline: 0;
}
.block.strch{
  width: 100%;
  padding-inline: var(--side-pad);
}

/* ========================
   .column（自動ガター版）
   - 列幅は tokens の --colwN（帯で切替）
   - 余り幅を justify-content: space-between で“ガター”に充てる
   - gap は使わない（=0）
======================== */
.column{
  display: grid;
  grid-auto-rows: auto;
}
.column .dan{
  min-width: 0;
  margin-block-end: var(--sp-L);
}

/* --- SP（〜600px）: 2/3 は単段、4は 2 列 --- */
.column.dan1{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.column.dan2{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.column.dan3{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.column.dan4{
  grid-template-columns: repeat(2, var(--colw4));
  justify-content: space-between;
}

/* --- TAB（601–900px）: 4→3、それ以外は等分 --- */
@media (min-width:601px){
  .column.dan1{ grid-template-columns: repeat(1, minmax(0,1fr)); }

  .column.dan2{
    grid-template-columns: repeat(2, var(--colw2));
    justify-content: space-between;
  }
  .column.dan3{
    grid-template-columns: repeat(3, var(--colw3));
    justify-content: space-between;
  }
  .column.dan4{
    grid-template-columns: repeat(3, var(--colw4));
    justify-content: space-between;
  }
}

/* --- PC（901+）: 2/3/4 を列幅固定で並べ、余りをガターに --- */
@media (min-width:901px){
  .column.dan1{ grid-template-columns: repeat(1, minmax(0,1fr)); }

  .column.dan2{
    grid-template-columns: repeat(2, var(--colw2));
    justify-content: space-between;
  }
  .column.dan3{
    grid-template-columns: repeat(3, var(--colw3));
    justify-content: space-between;
  }
  .column.dan4{
    grid-template-columns: repeat(4, var(--colw4));
    justify-content: space-between;
  }
}

/* ===== 例外処理：.dan3.keep ===== */
/* SP（〜600px）だけ：dan3 を“1枚=固定幅センター”に */
@media (max-width:600px){
  /* 1列・カード幅固定（100%を超えないよう保険付き） */
  .column.dan3.keep{
    grid-template-columns: min(100%, 40rem); /* ← 35.0rem想定。350remの誤記ならここを調整 */
    justify-content: center;                  /* 全体センター */
  }
  /* 各カードも念のためセンター寄せ（はみ出し防止） */
  .column.dan3.keep .dan{
    margin-inline: auto;
    width: 100%;          /* gridの列幅に追随 */
    max-width: 40rem;     /* ← キープ値（必要なら変更） */
  }
}

/* ========== column.freesize3（子の実寸で親幅が決まる3カラム） ========== */
/* TAB/PC：横3列・折返しなし。親は shrink-wrap して中央配置 */
.column.freesize3{
  display: grid;
  grid-auto-flow: column;         /* 横方向に並べる */
  grid-auto-columns: max-content; /* 各列＝内容幅 */
  gap: var(--sp-S);
  align-items: center;

  /* 親を子の合計幅に縮めて中央へ */
  width: fit-content;
  margin-inline: auto;
}
.column.freesize3 > *{ min-width: 0; }

/* SP：縦積み＋中央寄せ（全段センター） */
@media (max-width:600px){
  .column.freesize3{
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    width: 100%;
    margin-inline: 0;
    justify-items: center;
  }
}


/* ===== 例外処理：.block.full / .block.strch のときだけ “固定ガター”運用へ切替 ===== */
/* TAB+PC だけ有効にする（SPは従来どおり単段化） */
@media (min-width:601px){
  .block.full .column.dan2,
  .block.strch .column.dan2{
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-content: normal;
    gap: var(--gap2);
  }
  .block.full .column.dan3,
  .block.strch .column.dan3{
    grid-template-columns: repeat(3, minmax(0,1fr));
    justify-content: normal;
    gap: var(--gap3);
  }
  .block.full .column.dan4,
  .block.strch .column.dan4{
    grid-template-columns: repeat(4, minmax(0,1fr)); /* TAB側は既存の 4→3 が上書き */
    justify-content: normal;
    gap: var(--gap4);
  }
}
/* full/strch 内の img を中央×cover に固定 */
.block.full .dan img,
.block.strch .dan img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}


/* ==========================================
   pictxt unit (mobile-first)
   - 画像＋テキストの2段組
   - SP: 縦積み（画像→テキスト）
   - TAB(601–900): 2カラム化／画像幅＝0.74×--picw
   - PC(901+): 画像幅＝--picw
   - 左右反転: .pictxt.rvs（TAB/PCのみ反転）
   - 幅指定: .pic240 ～ .pic500（20刻み）= --picw を上書き
========================================== */

/* ベース（SPデフォルト） */
.column.pictxt{
  --picw: 40rem;                /* 既定値。各 .picXXX で上書き */
  margin-block: var(--sp-M);
  display: grid;
  grid-auto-rows: auto;
  gap: var(--gap2);             /* dan2 と同じガター概念 */
  grid-template-columns: 1fr;   /* 縦積み */
  grid-template-areas:
    "pic"
    "txt";
}
.column.pictxt .dan{ min-width: 0; }
.column.pictxt .dan.pic{ grid-area: pic; inline-size: 100%; }
.column.pictxt .dan.txt{ grid-area: txt; }

/* 画像のフィット補助（任意） */
.column.pictxt .dan.pic img{
  display:block; width:100%; height:auto; object-fit:cover;
}

/* TAB（601–900px）：段組を解除してfloat運用へ */
@media (min-width:601px) and (max-width:900px){
  /* 親を普通のブロック化＋clearfix */
  .column.pictxt{
    display: block; /* ← grid解除 */
  }
  .column.pictxt::after{
    content:""; display:block; clear: both;  /* ← これで親が潰れない */
  }

  /* 画像ブロックをfloat化（幅は既存トークンを流用） */
  .column.pictxt .dan.pic{
    float: left;
    inline-size: calc(var(--picw) * 0.74);   /* もともとのTAB時の幅ロジックを踏襲 */
    margin: 0 var(--gap2) var(--sp-M) 0;     /* 右にガター、下に段落間 */
  }

  /* 反転バリエーション（.pictxt.rvs）で右回り込み */
  .column.pictxt.rvs .dan.pic{
    float: right;
    margin: 0 0 var(--sp-M) var(--gap2);     /* 左にガターを置き換え */
  }

  /* テキスト側はそのままでOK（長ければ自動で画像の下へ回り込む） */
  .column.pictxt .dan.txt{
    /* 何も指定不要。必要なら微調整だけ */
  }
}

/* PC（901px+）：float運用を終了して grid に復帰させる */
@media (min-width:901px){
  .column.pictxt{
    display: grid;                 /* ← 明示的に grid へ */
    grid-template-columns: auto 1fr;
    grid-template-areas: "pic txt";
    gap: var(--gap2);
  }
  .column.pictxt .dan.pic{
    float: none;                   /* ← float を解除（念のため） */
    inline-size: var(--picw);      /* 既存PCロジック */
    margin: 0;
  }
  .column.pictxt.rvs .dan.pic{ float: none; margin: 0; }
  .column.pictxt::after{ content: none; }  /* clearfix解除（保険） */
}





/* 幅マップ（20刻み）：--picw を差し替え */
.column.pictxt.pic240{ --picw: 24rem; }
.column.pictxt.pic260{ --picw: 26rem; }
.column.pictxt.pic280{ --picw: 28rem; }
.column.pictxt.pic300{ --picw: 30rem; }
.column.pictxt.pic320{ --picw: 32rem; }
.column.pictxt.pic340{ --picw: 34rem; }
.column.pictxt.pic350{ --picw: 35rem; }
.column.pictxt.pic360{ --picw: 36rem; }
.column.pictxt.pic380{ --picw: 38rem; }
.column.pictxt.pic400{ --picw: 40rem; }
.column.pictxt.pic420{ --picw: 42rem; }
.column.pictxt.pic440{ --picw: 44rem; }
.column.pictxt.pic450{ --picw: 45rem; }
.column.pictxt.pic460{ --picw: 46rem; }
.column.pictxt.pic480{ --picw: 48rem; }
.column.pictxt.pic500{ --picw: 50rem; }





/* .danのオプション */
/* 最初の子要素だけ上マージンを消す（論理プロパティ版） */
.first-mt0 > :first-child{ margin-block-start: 0; }

/* ついでに“最後の子の下マージンを消す”も便利 */
.last-mb0 > :last-child{ margin-block-end: 0; }

/* 上下どっちも消したい場面 */
.trim-mtb > :first-child{ margin-block-start: 0; }
.trim-mtb > :last-child{  margin-block-end: 0; }





/* ==========================================
   header (bd1120 v4) – PCでもmenu常時表示
========================================== */
header{
  height: 8rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 6rem; /* SP/TAB: [logo伸縮] [menu] */
  align-items: center;
  column-gap: var(--sp-MS);
  padding-inline: var(--side-pad); /* .block.strch と同値 */
  padding-block: 0;                /* menuをY:0に */
  background: var(--colr-wt);
  color: var(--colr-text-base);
  box-shadow: 0 0.1rem 1rem rgba(0,0,0,0.2);
  z-index: 99;
}

/* PC：列レイアウト */
@media (min-width:901px){
  header{ grid-template-columns: var(--head-logo) 1fr 6rem; } /* [logo固定] [nav伸縮] [menu] */
}

/* logo */
header .logo{
  margin-block: 1rem;  /* 8rem中の上下余白 → 実体6rem */
  height: 6rem;
  display: flex;
  align-items: center;
  min-width: 0;
}
header .logo a{
  display: grid; grid-auto-flow: column;
  align-items: center;
  column-gap: var(--sp-S);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
header .logo .mark{
  width: 8rem;  /* site.cssで上書き可 */
  height: 6rem;
  display: flex; align-items: center; justify-content: center;
}
header .logo .mark img{
  width: 100%; height: 100%; object-fit: contain;
}
header .logo .name{
  font-weight: 700;
  font-size: var(--tx-S);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* nav（PCのみ表示） */
header nav{ display:none; min-width:0; }
@media (min-width:901px){
  header nav{ display:block; }
  header nav ul{
    display:flex; gap: var(--sp-SS);
    justify-content:flex-end; align-items:center; flex-wrap: nowrap;
  }
  header nav a{
    display:inline-block; padding: .5rem 1rem;
    text-decoration:none; color: inherit;
    font-size: var(--tx-S);
  }
  header nav a:hover{ color: var(--colr-key); }
}

/* =========================================================
   HEADER MENU BUTTON（既にあればそのままでOK）
   - 閉じている時は 6rem のクリック領域
========================================================= */
header .menu{
  position: fixed;
  top: 0; right: var(--side-pad);
  inline-size: 6rem;
  block-size: 6rem;            /* 高さゼロ対策 */
  cursor: pointer;
  z-index: 3000;               /* 何より上に */
  background: url("../img/head-menu-open.svg") center/contain no-repeat;
}

/* =========================================================
   OVERLAY MENU（menu 直下にアタッチされる）
   - 閉時：6remの箱（pointer-events: none）
   - 開時：画面全体 fixed + スクロール拘束
========================================================= */
/* ===== OVL MENU（body 直下）============================================ */
.ovl-menu{
  position: fixed;
  inset: 0;
  z-index: 1200;                       /* ページより前面 */
  display: grid;
  grid-template-areas: "stack";
  opacity: 0;
  visibility: hidden;
  pointer-events: none;                /* ←閉じている間は一切拾わない */
  transition: opacity .25s ease, visibility .25s ease;
}
.ovl-menu.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 背景（黒 80%） */
.ovl-menu__bg{
  grid-area: stack;
  background: rgba(0,0,0,.7);
}

/* パネル（縦スクロール可） */
.ovl-menu__panel{
  grid-area: stack;
  place-self: start center;            /* 画面上部寄せ・中央 */
  margin-top: 10rem;                   /* 見やすい位置に */
  width: min(92vw, var(--container-tb)); /* だいたい dan2 幅感 */
  max-height: calc(100dvh - 14rem);    /* 閉じるボタン分を差し引く */
  overflow: auto;                      /* 項目が多くてもスクロール */
  /*  background: rgba(0,0,0,.5);*/
  border-radius: 1.2rem;
  outline: none;                       /* focus 用に JS で当てる */
}

/* リスト */
.ovl-menu__list{ margin:0; padding:0; list-style:none; }
.ovl-menu__list > li + li{ border-top: .1rem solid #333; }
.ovl-menu__list a{
  display: block;
  color: var(--colr-wt);
  text-decoration: none;
  padding: 3rem var(--side-pad); 
  position: relative;
  background: rgba(0,0,0,.5);
}
.ovl-menu__list a:hover{
  background: rgba(0,0,0,.8);
}
/* 右端の白い ＞（arw.svg をマスク） */
.ovl-menu__list a::after{
  content:"";
  position: absolute;
  top: 50%;
  right: var(--side-pad);
  transform: translateY(-50%);
  inline-size: 1.4em;
  block-size: 1.4em;
  -webkit-mask: url("../img/arw.svg") no-repeat center / contain;
  mask:         url("../img/arw.svg") no-repeat center / contain;
  background-color: currentColor;      /* 白 */
  opacity: .8;
}

/* 閉じるボタン（最前面・右上固定） */
.ovl-close{
  position: fixed;
  top: 0;                         /* ご指定どおり 0 */
  right: var(--side-pad);
  inline-size: 6rem;
  block-size: 6rem;
  border: 0;
  padding: 0;
  background: url("../img/head-menu-close.svg") center / contain no-repeat;
  cursor: pointer;
  z-index: 1300;
}

/* 常にスクロールバーの溝ぶんを確保しておく */
html{ scrollbar-gutter: stable; }  /* 対応: Chrome/Edge/Firefox/Safari ほぼOK */

/* 開いてる間だけ本当に止めたいなら（ズレなくなる） */
html.is-ovl-open, body.is-ovl-open { overflow: hidden; }




/* ========================
   Pages
======================== */

/* Page Head（ローカルヘッダ） */
.pagehead{
  display:grid; place-items:center;
  background: var(--colr-key);
  color: var(--colr-wt);
  min-block-size: 24rem;
  padding-inline: var(--side-pad);
}
/* Breadcrumb */
.pankuzu{
  padding-block: var(--sp-S);
  padding-inline: var(--side-pad);
  font-size: var(--tx-SS);
}
.pankuzu ul{
  display:flex;
  flex-wrap:wrap;
  gap: 0;
}
.pankuzu li{
  display:flex;
  align-items:center; /* 矢印と文字を縦中央揃え */
}

/* 矢印（SVGマスク利用） */
.pankuzu li::after{
  content:"";
  display:inline-block;
  inline-size: 0.8em;   /* 相対サイズ：文字サイズに比例 */
  block-size: 0.8em;
  margin-inline: 0.5em;

  -webkit-mask: url("../img/arw.svg") no-repeat center / contain;
  mask:         url("../img/arw.svg") no-repeat center / contain;
  background-color: currentColor; /* テキスト色に追随 */
}

/* 最後の要素だけ矢印を非表示 */
.pankuzu li:last-child::after{
  content:none;
}

.pankuzu a{
  color:inherit;
}



/* ========================
   footer
======================== */
footer{
  background: linear-gradient(to bottom,#333,#555);
  color: var(--colr-wt);
  padding-top: var(--sp-L);
}
footer .foot-head{ text-align:center; margin-bottom: var(--sp-M); }
footer .companyname{ margin-bottom: var(--sp-S); }
footer .telnum{ margin-bottom: var(--sp-S); }
footer .adds span{ margin-inline-end: var(--sp-S); }
footer nav{ margin: var(--sp-M) 0; }

footer .copyright{
  background: var(--colr-bk);
  color: var(--colr-text-weak);
  text-align:center;
  font-size: var(--tx-XS);
  padding-block: var(--sp-S);
}

/* ページトップボタン */
.pagetop {
  position: fixed;
  right: var(--side-pad);
  bottom: 0;
  inline-size: 4rem;
  block-size: 10rem;
  background: url("../img/pagetop.svg") center no-repeat;
  background-size: contain;
  cursor: pointer;
  z-index: 90;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.pagetop.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 隠れてるときクリック無効化 */
}

.pagetop:hover,
.pagetop:focus {
  opacity: 0.8;
}