@charset "utf-8";
/* =========================================================================
   no-smoking.jp / signature 独立系統 — R4版スタイルシート（Phase 7）
   位置づけ：signature/ は本体サイトとは別のUTF-8系統・独自HTML構造を持つ
   独立システムのため、本体の css/style-r4.css を直接流用せず、
   「色・タイポグラフィ・spacing・header/navの考え方・footer」のみを
   本体R4デザインと共通化した、signature専用のR4版スタイルシートとする。

   このファイルへの切り替えは各HTMLの <link rel="stylesheet"> の参照先
   変更のみで行い、HTML構造・PHPブロック・JavaScript・class/id構成は
   一切変更しない（既存 signature 固有UIを保持するため）。
   旧 css/style.css は削除せず、そのまま保持（Freeze / ロールバック用）。
   ========================================================================= */

:root {
  /* 本体 css/style-r4.css と同一のトークン値（配色・書体・間隔の共通化） */
  --base: #F7F5F1;
  --paper: #FFFFFF;
  --hero-bg: #F3EAD9;
  --band-bg: #EFEBE4;
  --dark: #211D1A;

  --brown: #5A3A1F;
  --brown-soft: rgba(90, 58, 31, 0.08);
  --brown-soft-2: rgba(90, 58, 31, 0.05);

  --ink: #262220;
  --ink-muted: #6D6259;
  --on-dark: #F2ECE3;
  --on-dark-muted: rgba(242, 236, 227, 0.68);

  --line: #E4DCCD;

  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px;

  --font-sans: -apple-system, "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "游明朝",
    "Noto Serif JP", serif;

  /* signature固有：既存の840px系固定レイアウトをそのまま踏襲した最大幅 */
  --sig-max: 860px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  background-color: var(--paper);
  line-height: 1.8;
  text-align: center; /* 既存の中央寄せハック（#container側でtext-align:leftに戻す） */
}
h1 {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-2) var(--sp-3);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  background: transparent;
  border-left: 4px solid var(--brown);
}
h2 {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) 0 var(--sp-1) var(--sp-3);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--brown-soft-2);
  border-left: 4px solid var(--brown);
  border-bottom: none;
}
h3 {
  margin: 0 0 var(--sp-2);
  padding-left: var(--sp-1);
  color: var(--ink-muted);
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  background-color: transparent;
  border-bottom: 1px dashed var(--line);
}
p {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
  max-width: 100%;
  height: auto;
}
img.caution {
  vertical-align: middle;
}
img.left {
  float: left;
  margin-right: var(--sp-2);
}
a:link,
a:visited {
  color: var(--brown);
  text-decoration: underline;
}
a:hover,
a:active {
  color: var(--ink);
  text-decoration: underline;
}

/* =========================================================================
   ヘッダー
   ========================================================================= */
#header {
  width: 100%;
  background-color: var(--paper);
  border-bottom: 3px solid var(--brown);
  clear: left;
}
#h_content {
  max-width: var(--sig-max);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  margin-right: auto;
  margin-left: auto;
  clear: left;
}
#h_content img {
  border: 0;
  float: left;
  max-width: 220px;
}
#h_content p {
  margin: 0 0 var(--sp-1) 0;
  padding: var(--sp-1) 0 0 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  background-color: transparent;
  line-height: 1.4;
}

/* =========================================================================
   コンテナ / タブナビ
   ========================================================================= */
#container {
  max-width: var(--sig-max);
  margin-top: var(--sp-3);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--sp-5);
  padding: 0 var(--sp-3);
  text-align: left;
  clear: left;
}
#tabs {
  color: var(--ink);
  margin-top: var(--sp-2);
  background: var(--base);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.2;
}
#tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
#tabs li {
  display: block;
  margin: 0;
  padding: 0;
}
#tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  float: none;
  background: transparent;
  color: var(--ink);
  padding: 0 var(--sp-3);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
#tabs li a:hover {
  background: transparent;
  color: var(--brown);
  text-decoration: underline;
}
#tabs li a.now,
#tabs li a.current {
  background: transparent;
  color: var(--brown);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--brown);
}
#sub_menu p {
  max-width: 100%;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;
  background-color: var(--hero-bg);
  border-bottom: 1px solid var(--line);
}

/* =========================================================================
   本文 2カラム構成
   ========================================================================= */
#content {
  width: 100%;
  padding-top: var(--sp-4);
}
#b_left {
  margin: 0 var(--sp-4) var(--sp-3) 0;
  width: 240px;
  float: left;
}
#signature {
  margin-bottom: var(--sp-3);
  width: 100%;
  border: 1px solid var(--line);
}
#signature p {
  padding: var(--sp-2);
}
#signature p.early {
  font-size: 0.9rem;
  text-align: right;
}
#cando {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-3);
  width: 100%;
  font-size: 0.9rem;
  border-left: 2px solid var(--brown);
  border-right: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
  box-sizing: border-box;
}
#cando p {
  margin: 0;
  padding: var(--sp-4) var(--sp-2) var(--sp-2) var(--sp-2);
}
#cando ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.listmark {
  margin-right: var(--sp-1);
  color: var(--brown);
}
#cando li {
  margin: 0 var(--sp-1) 0 var(--sp-3);
  padding: 0 0 var(--sp-1) 0;
}
#b_right {
  width: 580px;
  float: right;
}
#b_r_left {
  width: 48%;
  font-size: 0.92rem;
  float: left;
}
#b_r_right {
  width: 48%;
  font-size: 0.92rem;
  float: right;
}
p.up {
  margin-top: var(--sp-3);
  font-size: 0.9rem;
  text-align: right;
}
.exp {
  margin-left: var(--sp-1);
  font-size: 0.92rem;
  line-height: 1.6;
}
.ts {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--brown);
  font-weight: 700;
}
.sendto {
  width: 260px;
  max-width: 100%;
  margin-left: var(--sp-5);
  padding: var(--sp-3);
  background-color: var(--brown-soft-2);
  border: 1px solid var(--line);
}
a.h2unlink,
a.h3unlink,
a.unlink {
  text-decoration: none;
}
a.h2unlink { color: var(--ink); }
a.h3unlink { color: var(--ink-muted); }
a.unlink { color: var(--ink); }
a:hover.h2unlink,
a:hover.h3unlink,
a:hover.unlink {
  text-decoration: none;
}
a:hover.h2unlink { color: var(--ink); }
a:hover.h3unlink { color: var(--ink-muted); }
a:hover.unlink { color: var(--ink); }
.info {
  margin-left: var(--sp-2);
  border: 1px solid var(--line);
}
.info p {
  padding: var(--sp-2);
  background-color: var(--brown-soft-2);
}
.clear {
  line-height: 0.1em;
  clear: both;
}
.darkred {
  color: #900;
}
address {
  margin-left: 0;
  margin-top: var(--sp-3);
  padding-left: var(--sp-2);
  font-style: normal;
  border-left: 5px solid var(--line);
}

/* =========================================================================
   LINK共通領域 + privacy policy（Phase 7B追加）
   本体 css/style-r4.css の .support-band / .link-zone / .link-grid と
   同一クラス名・同一ルールを採用し、共通性を保つ。signature固有の
   #header〜#footer 構造やclass名は一切変更しない。
   ========================================================================= */
.support-band {
  background: var(--band-bg);
  border-top: 1px solid var(--line);
  clear: both;
}
.link-zone {
  max-width: var(--sig-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  text-align: center;
}
.link-zone h2 {
  margin: 0 0 var(--sp-4);
  padding: 0;
  line-height: 0;
  background: transparent;
  border-left: none;
}
.link-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: calc(218px * 3 + 32px * 2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.link-grid li { display: flex; }
.link-grid a { display: inline-flex; line-height: 0; }
.link-grid img { width: 218px; height: 60px; max-width: 100%; height: auto; }
.footer-policy-line {
  margin: 0;
  padding: 0 var(--sp-3) var(--sp-4);
  text-align: center;
  font-size: 0.85rem;
}
.footer-policy-line a {
  color: var(--brown);
  text-decoration: underline;
}
.footer-policy-line a:hover {
  color: var(--ink);
}

/* =========================================================================
   フッター
   ========================================================================= */
#footer {
  padding: var(--sp-3) 0;
  clear: both;
  width: 100%;
  color: var(--on-dark);
  text-align: center;
  background-color: var(--dark);
  border-top: 4px solid var(--brown);
}
#footer #copyright {
  color: var(--on-dark-muted);
  font-size: 0.78rem;
}

/* =========================================================================
   レスポンシブ（〜700px：本体R4と同一のブレイクポイント）
   ========================================================================= */
@media (max-width: 700px) {
  #h_content img { max-width: 160px; }
  #h_content p { font-size: 0.88rem; }

  #tabs li a { min-height: 40px; padding: 0 var(--sp-2); font-size: 0.86rem; }

  #b_left,
  #b_right {
    width: 100%;
    float: none;
    margin: 0 0 var(--sp-3) 0;
  }
  #b_r_left,
  #b_r_right {
    width: 100%;
    float: none;
    margin-bottom: var(--sp-3);
  }
  .sendto { margin-left: 0; }
  address { margin-left: 0; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  h1 { font-size: 1.2rem; }
  #tabs ul { flex-direction: column; }
  #tabs li a { width: 100%; justify-content: flex-start; }
}