@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;
}
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（GeneratePressのmain-navigationを横並び固定）
   ========================================================= */
.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;
}
.site-header .site-branding { flex:0 0 auto; }
.site-header .header-cta { flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.site-header .header-cta .btn { font-size:1.4rem; }

/* ナビ（PC） */
.main-navigation { flex:1 1 auto; }
.main-navigation .menu,
#site-header nav .menu,
#site-header .sf-menu{ /* superfish にも対応 */
  display:flex !important; align-items:center; justify-content:center; gap:24px;
  margin:0; padding:0; list-style:none;
}
.main-navigation .menu > li { position:relative; }
.main-navigation .menu > li > a{ display:inline-block; padding:12px 0; }

/* ドロップダウン（PC） */
.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; }

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

/* トグル（SP） */
.menu-toggle{ display:none; font-size:1.4rem; border:1px solid #ddd; padding:8px 10px; border-radius:4px; }

/* モバイル */
@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 !important; }
  .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); }

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

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:#111; color:#eee; }
.site-footer a{ color:#eee; }
.site-footer a:hover{ text-decoration:underline; }
.grid--footer{
  display:grid; gap:24px; padding:40px 20px;
  grid-template-columns: repeat(5, minmax(0,1fr));
}
.ft-col .ft-ttl{ font-weight:700; font-size:1.6rem; margin:0 0 12px; }
.ft-list{ margin:0; padding:0; }
.ft-list li{ margin:6px 0; }
.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; }

@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; }
}

/* =========================================================
   TOP：カード系（旧CSSを尊重しつつ最小上書き）
   ========================================================= */
.linksWrap > div > a{ display:block; }
.linksWrap img{ display:block; width:100%; height:auto; }
.childBdWrapLightGray > *{ border:1px solid #e6e6e6; }

/* 3カラム（商品ラインナップ／More DaiwaKasei 等） */
.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;
}

/* ネスト2カラムを親3列に“溶かす”（下段2×2を3列に自然配置） */
.df-partition3.linksWrap > .df-partition2{ display: contents; }

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

/* --- ヘッダーを2段レイアウトに：上 機能列、下 ナビ --- */
.site-header .inside-header{
  display:grid;
  grid-template-columns: 1fr auto;           /* 左=ロゴ, 右=CTA */
  grid-template-areas:
    "brand cta"                               /* 1段目：ロゴ／CTA */
    "nav   nav";                              /* 2段目：ナビを全幅中央 */
  align-items:center;
  gap:16px;
}

/* 配置指定 */
.site-header .site-branding   { grid-area: brand; }
.site-header .header-cta      { grid-area: cta;   justify-self:end; display:flex; gap:10px; }
.site-header .main-navigation { grid-area: nav;   justify-self:center; }

/* 既存の“メニュー横並び”は維持 */
.site-header .main-navigation .menu{
  display:flex !important; align-items:center; justify-content:center; gap:24px;
}

/* モバイル時は縦積み（必要に応じ調整） */
@media (max-width:768px){
  .site-header .inside-header{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "nav   nav";
    gap:12px;
  }
  .site-header .header-cta{ justify-self:end; }
  .site-header .main-navigation{ width:100%; }
}