@charset "UTF-8";

/* =========================================================
   Base / Reset（必要最低限）
   ========================================================= */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*,*::before,*::after { box-sizing: inherit; }
body, h1,h2,h3,h4,h5,h6, p, ul,ol,li, figure { margin:0; padding:0; }
img { max-width:100%; height:auto; vertical-align:middle; border:0; }
ul,ol { list-style:none; }
a { color:inherit; text-decoration:none; }
button { background:none; border:0; padding:0; cursor:pointer; }
table { border-collapse:collapse; }

/* =========================================================
   Typography
   ========================================================= */
html { font-size:62.5%; } /* 1rem = 10px */
body {
  font-family: "Noto Sans JP", "Noto Sans Japanese", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:1.6rem; line-height:1.6; color:#111; background:#fff;
}

/* Link hover */
a:hover { text-decoration:underline; }

/* =========================================================
   Utilities（最小限）
   ========================================================= */
.container { max-width:1200px; margin:0 auto; padding:0 16px; }
.tal{text-align:left!important;} .tac{text-align:center!important;} .tar{text-align:right!important;}
.db{display:block;} .dn{display:none!important;}
.mt0{margin-top:0!important;} .mb0{margin-bottom:0!important;}
.mt16{margin-top:16px!important;} .mb16{margin-bottom:16px!important;}
.mt24{margin-top:24px!important;} .mb24{margin-bottom:24px!important;}

/* =========================================================
   Buttons（共通）
   ========================================================= */
.btn { display:inline-block; padding:10px 14px; border-radius:6px; font-size:1.4rem; line-height:1; }
.btn--ghost { border:1px solid #999; color:#111; background:#fff; }
.btn--primary { background:#e24040; color:#fff; }
.btn--primary:hover { opacity:.9; text-decoration:none; }

/* =========================================================
   Header（方法B：main-navigation + トグル）
   ---------------------------------------------------------
   対応HTML（parts/site-header.php）：
   <header id="site-header" class="site-header">
     <div class="inside-header">
       <div class="site-branding">…</div>
       <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">MENU</button>
       <nav id="site-navigation" class="main-navigation" aria-label="メインナビ">
         <ul id="primary-menu" class="menu primary-menu">…</ul>
       </nav>
       <div class="header-cta">…</div>
     </div>
   </header>
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:1000; background:#fff;
  /* 下部に赤ライン */
  box-shadow: inset 0 -2px 0 0 #e24040;
}
.site-header .inside-header{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* Branding */
.site-header .site-branding { flex:0 0 auto; }

/* CTA */
.site-header .header-cta { flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.site-header .header-cta .btn { font-size:1.4rem; }

/* Navigation (PC) */
.main-navigation { flex:1 1 auto; }
.main-navigation .menu{
  display:flex; align-items:center; justify-content:center; gap:24px;
  margin:0; padding:0;
}
.main-navigation .menu > li { position:relative; }
.main-navigation .menu > li > a{
  display:inline-block; padding:12px 0;
}

/* Dropdown (PC hover) */
.main-navigation .sub-menu{
  display:none; position:absolute; left:0; top:100%;
  min-width:220px; background:#fff; border:1px solid #e5e5e5;
  padding:6px 0; z-index:20; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.main-navigation .menu > li:hover > .sub-menu{ display:block; }
.main-navigation .sub-menu li a{
  display:block; padding:10px 14px; white-space:nowrap;
}

/* Current */
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-item > a{
  font-weight:600; text-decoration:underline;
}

/* Toggle button (mobile) */
.menu-toggle{
  display:none; font-size:1.4rem; border:1px solid #ddd; padding:8px 10px; border-radius:4px;
}

/* Mobile layout */
@media (max-width: 768px){
  .site-header .inside-header{ flex-wrap:wrap; gap:12px; }
  .menu-toggle{ display:block; }
  .main-navigation{ order:3; width:100%; }
  .main-navigation .menu{ display:none; flex-direction:column; align-items:flex-start; gap:8px; }
  .main-navigation.toggled .menu{ display:flex; }
  .main-navigation .sub-menu{ position:static; display:block; border:0; box-shadow:none; padding:0; }
  .main-navigation .sub-menu a{ padding:8px 0 8px 14px; }
  .site-header .header-cta{ order:2; width:100%; justify-content:flex-end; }
}

/* 固定ヘッダー時のアンカー余白（必要に応じ調整） */
:root { --header-height: 70px; }
body { scroll-padding-top: var(--header-height); }

/* =========================================================
   Footer
   ---------------------------------------------------------
   対応HTML（parts/site-footer.php）：
   <footer class="site-footer">
     <div class="inside-footer grid--footer"> … 各 .ft-col … </div>
     <div class="inside-footer bottom"> … </div>
   </footer>
   ========================================================= */
.site-footer{ background:#111; color:#eee; }
.site-footer a{ color:#eee; }
.site-footer a:hover{ text-decoration:underline; }

/* grid */
.grid--footer{
  display:grid; gap:24px; padding:40px 20px;
  grid-template-columns: repeat(5, minmax(0,1fr)); /* 会社情報＋4列 */
}
.ft-col .ft-ttl{ font-weight:700; font-size:1.6rem; margin:0 0 12px; }
.ft-list{ list-style:none; margin:0; padding:0; }
.ft-list li{ margin:6px 0; }

.ft-about .ft-address{ font-style:normal; line-height:1.6; margin:.5em 0 1em; }
.ft-cta .btn{ margin-right:8px; }

/* bottom row */
.site-footer .bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(255,255,255,.12); padding:12px 20px;
}
.to-top{ font-size:1.2rem; border:1px solid #666; padding:.3em .8em; border-radius:999px; }

/* responsive footer */
@media (max-width: 1100px){
  .grid--footer{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 700px){
  .grid--footer{ grid-template-columns: 1fr; }
  .site-footer .bottom{ flex-direction:column; gap:8px; }
}

/* =========================================================
   Slick dots（必要なら有効化、slick.css 本体は別ファイルに任せる）
   ========================================================= */
/*
.slick-dots{ display:flex; justify-content:center; gap:8px; margin:12px 0; }
.slick-dots li button{ width:.8em; height:.8em; padding:0; border-radius:50%; background:#e6e6e6; text-indent:-9999px; }
.slick-dots .slick-active button{ background:#e24040; }
*/

/* =========================================================
   Page scaffolding（必要に応じて使う軽いレイアウト）
   ========================================================= */
.section { padding:48px 0; }
.section .section-ttl{ font-size:2.0rem; font-weight:700; margin-bottom:16px; }

/* ==== Header Navigation (最小・強制) ==== */
#site-header .inside-header{
  max-width:1200px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* どのパターンでも横並びになるように対象を広げる */
#site-header nav .menu,
#site-header .main-navigation .menu,
#site-header .sf-menu { /* GPが付ける superfish クラスにも対応 */
  display:flex !important;
  gap:24px;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}

#site-header nav .menu > li { position:relative; }
#site-header nav .menu > li > a {
  display:inline-block;
  padding:12px 0;
  text-decoration:none;
}

/* ドロップダウン */
#site-header nav .sub-menu{
  display:none; position:absolute; left:0; top:100%;
  min-width:220px; background:#fff; border:1px solid #e6e6e6;
  box-shadow:0 6px 20px rgba(0,0,0,.08); z-index:20; padding:6px 0;
}
#site-header nav .menu > li:hover > .sub-menu{ display:block; }
#site-header nav .sub-menu li a{ display:block; padding:10px 14px; white-space:nowrap; }

/* モバイル（GPのトグル有無に依らず崩れにくい簡易版） */
@media (max-width:768px){
  #site-header .inside-header{ flex-wrap:wrap; }
  #site-header .header-cta{ order:3; width:100%; justify-content:flex-end; }
  #site-header .main-navigation{ order:2; width:100%; }
  #site-header nav .menu{ display:block !important; }
  #site-header nav .menu > li{ display:block; }
  #site-header nav .sub-menu{ position:static; display:block; border:0; box-shadow:none; padding:0; }
}

/* 見栄え＆下線 */
.site-header{ background:#fff; box-shadow:inset 0 -2px 0 0 #e24040; }

/* ロゴ調整 */
.site-logo img{ height:42px; width:auto; display:block; }
@media (max-width:768px){ .site-logo img{ height:36px; } }

/* ===== 共通：画像と枠 ===== */
.linksWrap > div > a{ display:block; }
.linksWrap img{ display:block; width:100%; height:auto; }
.childBdWrapLightGray > *{ border:1px solid #e6e6e6; }

/* ===== 3カラム（商品ラインナップ・contactNavIndex など） ===== */
.df-partition3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}

/* 3カラム内で“半幅×2=1列分”にしたい箱（PCだけ2カラム分を占有） */
.df-partition3 > .pc-widthHalf{ grid-column: span 2; }

/* ===== 2カラム（バナー2分割等） ===== */
.df-partition2,
.df-column2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}

/* ===== contactNavIndex の各リンクをタイル風に（任意で綺麗に） ===== */
.contactNavIndex a{
  display:flex; align-items:center; justify-content:center;
  padding:14px; min-height:48px; text-decoration:none;
}
.contactNavIndex i{ margin-right:.5em; }

/* ===== レスポンシブ ===== */
@media (max-width: 1024px){
  .df-partition3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .df-column2,
  .df-partition2{ grid-template-columns: 1fr 1fr; } /* タブレットは2列維持 */
  .df-partition3 > .pc-widthHalf{ grid-column: span 2; } /* 2列時も横幅2列分 */
}

@media (max-width: 640px){
  .df-partition3{ grid-template-columns: 1fr; } /* スマホは1列 */
  .df-partition2,
  .df-column2{ grid-template-columns: 1fr; }   /* スマホは1列 */
  /* “sp-widthHalf” を付けた要素はスマホで2列にしたい場合だけ有効化 */
  .df-partition3.sp-two,
  .df-column2.sp-two{ grid-template-columns: 1fr 1fr; }
  .df-partition3 > .pc-widthHalf{ grid-column: auto; } /* スマホでは通常幅に戻す */
}
/* ===== HOMEのカード系を確実に横並び＆等幅化 ===== */

/* 親をグリッドに固定 */
.df-partition3,
.df-partition2,
.df-column2{
  display:grid !important;
  gap:16px !important;
}

/* カラム数：PC */
.df-partition3{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.df-partition2,
.df-column2{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

/* 3カラム内で “半幅×2＝1列” を取る箱 */
.df-partition3 > .pc-widthHalf{ grid-column: span 2 !important; }

/* ネストされた 2 カラム（3カラムの中の2分割） */
.df-partition3 .df-partition2{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap:16px !important;
}

/* 中の a と img を “ブロック & 100% 幅” で強制 */
.linksWrap > div,
.linksWrap > div > a{ display:block !important; width:100% !important; }
.linksWrap img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;      /* 旧CSSの max-width による縮み対策 */
}

/* カード風の枠（必要なら） */
.childBdWrapLightGray > *{ border:1px solid #e6e6e6; }

/* contactNavIndex のタイル */
.contactNavIndex a{
  display:flex !important;
  align-items:center; justify-content:center;
  min-height:110px; padding:14px;
  text-decoration:none;
}

/* ---- レスポンシブ ---- */
@media (max-width: 1024px){
  .df-partition3{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  .df-partition3{ grid-template-columns: 1fr !important; }
  .df-partition2,.df-column2{ grid-template-columns: 1fr !important; }
  .df-partition3 > .pc-widthHalf{ grid-column:auto !important; } /* SPでは通常幅に戻す */
}
/* 商品ラインナップ：基本はシンプル3列 */
.df-partition3.linksWrap{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:16px !important;
}

/* ネストされた2カラムを親グリッドに“溶かす” */
.df-partition3.linksWrap > .df-partition2{ display: contents !important; }

/* 画像は等幅で表示 */
.df-partition3.linksWrap a{ display:block !important; width:100% !important; }
.df-partition3.linksWrap img{ display:block !important; width:100% !important; height:auto !important; }

/* レスポンシブ */
@media (max-width:1024px){
  .df-partition3.linksWrap{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){
  .df-partition3.linksWrap{ grid-template-columns: 1fr !important; }
}