@charset "utf-8";
/* ==========================================================================
   スマホ対応 + ユニバーサルデザイン オーバーレイ (2026 リニューアル)
   既存のBiND由来の固定幅レイアウトはそのままに、後から読み込んで上書きする。
   ページ本文の追加・変更はせず、全ページ共通のヘッダー/フッターと合わせて
   ここに集約する(inc/header.html・inc/footer.htmlと同じ「1箇所を直せば
   全ページに効く」方針)。
   ========================================================================== */

/* 注意: 全要素へのbox-sizing:border-box強制は、旧BiNDの枠線・角飾り画像が
   幅+パディングをcontent-box前提で組んでいるためズレ(二重枠のように見える表示崩れ)
   を引き起こすことが判明したため撤去。新規追加分(.nav-toggle等)だけに限定する。 */
.nav-toggle, .nav-toggle * { box-sizing: border-box; }

/* ---- デザイントークン ----
   --brand-blue-light はメインビジュアル(atz24/assets/img/top_1.png)の背景色を
   実際にサンプリングした値(#47B2E6)。文字色やボタンにそのまま使うと白背景で
   コントラスト比2.4:1程度しか出ないため、本文・UI用にはAA(4.5:1)を満たす
   --brand-blue を別途用意し、明るい方はアクセント・背景使いに留める。 */
:root {
  --brand-blue: #1c6fa0;
  --brand-blue-light: #47b2e6;
  --brand-blue-tint: #eaf6fc;
  --text-color: #333;
  --font-sans: "YakuHanJP", "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
}

/* ---- 読みやすさの底上げ(ユニバーサルデザイン) ---- */
html { font-size: 112.5%; } /* 基準18px相当 */
body {
  font-family: var(--font-sans);
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.015em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.45;
}
img { max-width: 100%; height: auto; }

/* 注意: a/buttonへの一律min-height:44pxも、旧ナビタブがheight:20px+paddingで
   隣接ボーダーと寸分違わず噛み合うよう作られているため崩れる原因になった。
   タップ領域の拡大はモバイル用ドロップダウン(下記@media内)のpaddingで個別に対応する。 */

a { color: var(--brand-blue); }
a:hover { color: var(--brand-blue-light); }

#area-billboard a,
#area-contents a,
#area-main a,
#area-side-a a,
#area-side-b a {
  color: var(--brand-blue) !important;
  text-decoration-color: rgba(28, 111, 160, 0.45);
  text-underline-offset: 2px;
}

#area-billboard a:hover,
#area-contents a:hover,
#area-main a:hover,
#area-side-a a:hover,
#area-side-b a:hover {
  color: #15577c !important;
}

/* 商品紹介リンクは、ホバー時に旧テーマの横長背景を出さず文字色だけ変える。 */
p.inner a,
p.inner a:hover,
p.inner a:focus-visible {
  background: transparent !important;
  border: 0 !important;
  color: var(--brand-blue) !important;
  text-decoration: underline;
  text-decoration-color: rgba(28, 111, 160, .35);
}

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}

/* ---- 固定幅→可変幅コンテナ ---- */
#area-header, #area-header.noskin,
#area-billboard, #area-billboard.noskin,
#area-main, #area-main.noskin,
#area-side-a, #area-side-a.noskin,
#area-side-b, #area-side-b.noskin,
#area-contents, #area-contents.noskin,
#area-footer, #area-footer.noskin {
  width: 100% !important;
  max-width: 1137px;
  margin-left: auto !important;
  margin-right: auto !important;
}

body { overflow-x: hidden; }

/* ---- デスクトップのヘッダー見た目調整 ---- */
@media (min-width: 769px) {
  body.legacy-page #area-billboard,
  body.legacy-page #area-contents,
  body.legacy-page #area-footer {
    width: 100% !important;
    max-width: 980px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.legacy-page #area-main {
    width: 100% !important;
    max-width: 840px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    float: none !important;
  }

  body.product-overview-page {
    overflow-x: hidden;
  }

  body.product-overview-page #area-billboard,
  body.product-overview-page #area-contents {
    width: 100% !important;
    max-width: 900px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: hidden;
  }

  body.product-overview-page #area-billboard .divboxc {
    width: min(100%, 825px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.store-page {
    overflow-x: hidden;
  }

  body.store-page #area-billboard,
  body.store-page #area-contents {
    width: 100% !important;
    max-width: 900px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: hidden;
  }

  body.store-page #area-main {
    width: min(100%, 840px) !important;
    max-width: 840px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    float: none !important;
  }

  #area-header,
  #area-footer {
    max-width: 1137px;
  }

  #area-header .h3 h3 {
    margin: 0;
    color: #526a78;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  #area-header .menu-c ul#site-nav {
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #d7e1e7;
    border-radius: 0;
    background: #fff;
  }

  #area-header .menu-c ul#site-nav li {
    border-right: 0;
  }

  #area-header .menu-c ul#site-nav li:last-child {
    border-right: 0;
  }

  #area-header .menu-c ul#site-nav a.mn1 {
    padding: 13px 12px 12px;
    color: #314b59;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  #area-header .menu-c ul#site-nav a.mn1:hover,
  #area-header .menu-c ul#site-nav a.mn1:focus-visible {
    background: var(--brand-blue-tint);
    color: #154f72;
  }

  #area-header .menu-c ul#site-nav a.mn1.cr,
  #area-header .menu-c ul#site-nav a.mn1.cr:hover {
    background: #fff;
    color: var(--brand-blue);
  }

  #area-header .menu-c ul#site-nav a.mn1.cr::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    background: var(--brand-blue);
    border-radius: 3px 3px 0 0;
  }
}

/* ---- ヘッダーナビ: 旧サイトから存在した不具合の修正 ----
   .menu-c ul の右端装飾画像(1_menuh_c_r.png)がul自体の右端に固定表示される一方、
   中のli(タブ)はfloatで中身の幅しか取らないため、タブの項目数が増えるにつれて
   右端に隙間ができていた(このバグは今回のレスポンシブ対応より前、オリジナルの
   サイトの時点で既に存在していたことをgit履歴のbaseline commitで確認済み)。
   liをflexで均等に伸ばして隙間を無くす。 */
#site-nav {
  display: flex;
}
#site-nav li {
  float: none;
  flex: 1 1 auto;
}
#site-nav a.mn1, #site-nav .nolink {
  display: block;
  text-align: center;
}

/* ナビの現在地/ホバー表示を、旧来の無彩色グレーからブランドブルーへ */
.type-1 .menuh .menu-c a.mn1:hover,
.type-1 .menuh .menu-c .cr,
.type-1 .menuh .menu-c .cr:hover {
  background-color: var(--brand-blue);
  color: #fff;
}

.nav-toggle { display: none; }

/* ---- モバイル(768px以下): ハンバーガーメニュー化 ---- */
@media (max-width: 768px) {
  body { font-size: 15px; }

  #L02 .indent.bubble,
  #L02 .indent.bubble .table { width: 100% !important; max-width: 100% !important; }
  #L02 .indent.bubble .table { display: block; }
  #L02 .indent.bubble .table tbody,
  #L02 .indent.bubble .table tr,
  #L02 .indent.bubble .table th,
  #L02 .indent.bubble .table td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #L02 .indent.bubble .table th { padding: 12px; text-align: left; }
  #L02 .indent.bubble .table td { padding: 0 12px 14px; }
  #L02 .indent.bubble .table th,
  #L02 .indent.bubble .table td {
    border: 0 !important;
    text-align: left;
  }
  #L02 .indent.bubble .table tr {
    border-bottom: 1px solid #dbe4e8;
  }
  #L02 .indent.bubble .table tr:last-child {
    border-bottom: 0;
  }
  #L02 .indent.bubble .table .th {
    margin: 0;
    padding: 0;
    font-size: .95rem;
    line-height: 1.45;
  }
  #L02 .indent.bubble .table th::before,
  #L02 .indent.bubble .table td::before,
  #L02 .indent.bubble .table tr::before {
    content: none !important;
    display: none !important;
  }
  #L02 .indent.bubble .table th::after,
  #L02 .indent.bubble .table .th::before,
  #L02 .indent.bubble .table .th::after {
    content: none !important;
    display: none !important;
  }
  #L02 .indent.bubble .lead p {
    margin: .2rem 0 !important;
    line-height: 1.55 !important;
  }
  #L02 .indent.bubble .lead {
    padding: 0;
  }
  #L02 .indent.bubble .lead ul,
  #L02 .indent.bubble .lead ol {
    margin: .25rem 0 !important;
    padding-left: 1.2rem;
  }
  #L02 .indent.bubble .lead li {
    margin: .15rem 0 !important;
    line-height: 1.55 !important;
  }
  #L02 .indent.bubble .table,
  #L02 .indent.bubble .table tr,
  #L02 .indent.bubble .table th,
  #L02 .indent.bubble .table .th {
    background: none !important;
    background-image: none !important;
    list-style: none !important;
  }
  #L02 .indent.bubble .table .lead,
  #L02 .indent.bubble .table .balloon {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #area-header h3 { font-size: 1rem; padding: 0 0.75em; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 48px;
    margin: 0 auto;
    padding: 8px 0;
    background: var(--brand-blue-tint);
    border: 1px solid var(--brand-blue);
    border-radius: 4px;
    cursor: pointer;
  }
  .nav-toggle-bar {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--brand-blue);
    border-radius: 2px;
  }
  .nav-toggle-label {
    font-size: 0.8rem;
    color: var(--brand-blue);
    font-weight: bold;
  }

  .menu-c { overflow: hidden; }
  .menu-c ul#site-nav {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  .menu-c ul#site-nav.is-open {
    display: flex;
  }
  .menu-c ul#site-nav li {
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid #ddd;
  }
  .menu-c ul#site-nav a.mn1 {
    display: block;
    width: 100%;
    padding: 0.9em 1em;
    font-size: 1.05rem;
    text-align: center;
  }

  div.divboxc,
  div.divboxc > div,
  div.divboxc .catc,
  div.divboxc .catc2,
  div.divboxc .catc3 {
    width: 100%;
    max-width: 100%;
  }

  div.divboxc .cinner {
    display: flex;
    width: 100%;
    min-height: 0;
  }

  div.divboxc .cinner > a {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px;
  }

  div.divboxc .cinner_l,
  div.divboxc .cinner_r {
    width: 100%;
    flex: 0 0 auto;
    text-align: center;
  }

  div.divboxc .cinner_r img {
    max-height: 180px;
  }
}

/* BiND旧レイアウトの親幅に左右されず、商品シリーズを中央に揃える。 */
#area-billboard .divboxc {
  display: block;
  width: min(100%, 825px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

#area-billboard .divboxc .catc {
  justify-content: center;
}

#area-main > .wrap,
#area-main > .wrap > .amm,
#area-main > .wrap > .amm > .amc,
#area-main .column {
  width: 100% !important;
  max-width: 825px;
  margin-right: auto !important;
  margin-left: auto !important;
}

#L02 #area-billboard img,
#L02 #area-contents img {
  border-radius: 1rem;
  box-shadow: none !important;
  filter: none !important;
}

#L02 #area-billboard a {
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#L02 #area-billboard a img {
  transition: transform .25s ease;
  box-shadow: none !important;
  filter: none !important;
}

#L02 #area-billboard p.ac,
#L02 #area-billboard .img,
#L02 #area-billboard .column,
#L02 #area-billboard .simple {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

#L02 #area-billboard a:hover img,
#L02 #area-billboard a:focus-visible img {
  transform: scale(1.015);
  filter: none;
  box-shadow: none !important;
}

#L02 #area-billboard a:hover,
#L02 #area-billboard a:focus-visible,
#L02 #area-billboard p.ac:hover,
#L02 #area-billboard .img:hover,
#L02 #area-billboard img:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#L02 #bk1606 h3 {
  margin: 1.5rem 0 1rem;
  padding: 0 0 .55rem;
  color: #333;
  border-bottom: 2px solid #d7e1e7;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .08em;
}

#L02 .indent.bubble .lead p {
  margin-top: .4em;
  margin-bottom: .4em;
}

#L02 .indent.bubble .table th::before,
#L02 .indent.bubble .table th::after,
#L02 .indent.bubble .table td::before,
#L02 .indent.bubble .table td::after,
#L02 .indent.bubble .table tr::before,
#L02 .indent.bubble .table tr::after,
#L02 .indent.bubble .table .th::before,
#L02 .indent.bubble .table .th::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 769px) {
  #main-group,
  #main-group .core {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #area-main {
    width: min(100%, 825px) !important;
    max-width: 825px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    float: none !important;
  }
}