@charset "UTF-8";

/* ============================================================
   名古屋税理士会半田支部　サイト共通スタイル
   common.css

   ※このファイルは UTF-8 で保存されています。
   　先頭の @charset 宣言により、HTML側が Shift_JIS でも
   　正しく読み込まれます。エディタで編集する際は
   　必ず UTF-8 のまま保存してください。
   ============================================================ */

:root {
  --font-sans:
    "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN",                        /* macOS */
    "Yu Gothic Medium", "游ゴシック Medium", YuGothic,  /* Windows */
    "Noto Sans JP", Meiryo, sans-serif;

  --color-text:   #333;
  --color-sub:    #666;
  --color-mark:   #0b57a4;   /* 強調用の青（旧 #0000ff） */
  --color-line:   #d5d5d5;
  --color-accent: #f5b656;   /* 見出しのオレンジ */
  --color-head:   #4a3204;   /* オレンジ地の上の文字色 */
  --color-hover:  #fdf6ec;
  --color-link:   #1a5fa8;

  --page-width:   940px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--color-link); }
a:hover { color: #d18a1e; }

img { border: 0; vertical-align: bottom; }

p { margin: 0.6em 0; }


/* ============================================================
   ページ全体の枠
   ============================================================ */

/* 左寄せ。中央寄せにする場合は margin: 0 auto; */
#wrap {
  width: var(--page-width);
  margin: 0;
}


/* ============================================================
   ヘッダー（ロゴ2点）
   ============================================================ */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 43px 3px 14px;
}
#header img { display: block; }


/* ============================================================
   区切り線
   ============================================================ */

img.sen { display: block; }


/* ============================================================
   ボタン列（ホーム／支部紹介／税務相談／お問い合わせ／会員専用）
   ------------------------------------------------------------
   space-between により、元の left: 11 / 197 / 384 / 572 / 760
   とほぼ同じ間隔で自動配置されます。
   ============================================================ */

#nav {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px 0 11px;
}
#nav img { display: block; }


/* ============================================================
   バナー画像
   ============================================================ */

#banner { display: block; }


/* ============================================================
   表の共通ベース
   ------------------------------------------------------------
   ※旧ソースの class="wakusen" は定義が存在せず、罫線は
   　border="1" 属性による立体枠でした。ここで作り直しています。
   ============================================================ */

.tbl {
  border-collapse: collapse;
}

/* 子セレクタで限定し、入れ子の表（料金表など）に継承させない */
.tbl > thead > tr > th,
.tbl > thead > tr > td,
.tbl > tbody > tr > th,
.tbl > tbody > tr > td {
  border: 1px solid var(--color-line);
  padding: 12px 10px;
  vertical-align: top;
}

/* オレンジ地の見出しセル */
.tbl > thead > tr > th,
.tbl > tbody > tr > th[scope="row"],
.tbl > tbody > tr > th[scope="rowgroup"] {
  background-color: var(--color-accent);
  color: var(--color-head);
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}

.tbl > tbody > tr:hover { background-color: var(--color-hover); }


/* ============================================================
   会員用ページ　日程表（kaiin20XX.html）
   ============================================================ */

/* 表の位置。バナー画像（margin-left: 9px）と左端を揃える */
#schedule {
  margin: 14px 0 0 9px;
}

.kaiin-table {
  width: 930px;
  font-size: 0.9375rem;   /* 15px */
}

/* 日時セル：「R9年1月8日(金)」を折り返さない */
.kaiin-table td.date {
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  vertical-align: middle;
  padding-left: 8px;
  padding-right: 8px;
}

/* 研修時間・会場セル：「アイプラザ半田」を折り返さない */
.kaiin-table td.c {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding-left: 8px;
  padding-right: 8px;
}

/* 内容セル：<br><br> による余白調整をやめ、要素ごとの余白で組む */
.kaiin-table td.detail .title    { display: block; font-weight: 600; }
.kaiin-table td.detail .subject  { display: block; margin-top: 0.8em; }
.kaiin-table td.detail .lecturer { display: block; margin-top: 0.2em; color: var(--color-sub); }
.kaiin-table td.detail .extra    { display: block; margin-top: 0.8em; }

/* 資料ダウンロードセル */
.kaiin-table td.dl {
  text-align: center;
  vertical-align: middle;
  font-size: 0.8125rem;   /* 13px */
}


/* ============================================================
   税務相談所ページ（soudan.html）
   ============================================================ */

/* 冒頭の案内文 */
#intro {
  width: 900px;
  margin: 24px 0 0 18px;
  text-align: center;
}
#intro .address {
  margin-top: 1em;
  color: var(--color-sub);
}
#intro .address a { text-decoration: none; }

/* 本文の表 */
.info-table {
  width: 900px;
  margin: 8px 0 0 17px;
}
.info-table > tbody > tr > th[scope="row"] {
  width: 90px;
  white-space: nowrap;
}
.info-table th .sub {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
}
.info-table td > :first-child { margin-top: 0; }
.info-table td > :last-child  { margin-bottom: 0; }

/* 「（１）　個人納税者」のような小見出し */
.item-head {
  font-weight: 600;
  margin: 1.2em 0 0.2em;
}
.info-table td > .item-head:first-child { margin-top: 0; }

/* 青字の強調 */
.mark {
  color: var(--color-mark);
  font-weight: 600;
}

/* （１）（２）… のぶら下げリスト */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li {
  padding-left: 3.4em;
  text-indent: -3.4em;
  margin: 0.3em 0;
}

/* 料金表 */
.price-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 560px;
  margin: 0.2em 0 1em;
}
.price-table th,
.price-table td {
  border: 0;
  border-bottom: 1px dotted #ccc;
  padding: 7px 4px;
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
  background: none;
  color: inherit;
}
.price-table .amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 1.5em;
}
.price-table .suffix {
  text-align: left;
  white-space: nowrap;
  width: 2.5em;
  color: var(--color-sub);
}
.price-table tr.sub th { padding-left: 3.4em; }

/* ※注記 */
.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;   /* 14px */
  color: var(--color-sub);
}
.notes li {
  padding-left: 3em;
  text-indent: -3em;
  margin: 0.3em 0;
}
.notes li .cont {
  display: block;
  text-indent: 0;
}

/* 日程表PDFへのリンク画像 */
.pdf-link { margin: 1.2em 0; }
.pdf-link img { display: block; }

.note {
  font-size: 0.875rem;
  color: var(--color-sub);
}


/* ============================================================
   支部紹介ページ（syoukai.html）
   ============================================================ */

/* 構成地域・支部長・支部組織の表 */
.syoukai-table {
  width: 920px;
  margin: 12px 0 0 9px;
}
.syoukai-table > tbody > tr > td.name {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: 600;
}

/* 見出し付きの囲みブロック（支部長挨拶・所属税理士一覧などで共用） */
.box {
  width: 920px;
  margin: 24px 0 0 9px;
  border: 1px solid var(--color-line);
}
.sec-head {
  margin: 0;
  padding: 12px 10px;
  background-color: var(--color-accent);
  color: var(--color-head);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--color-line);
}
.box-body { padding: 20px; }
.box-body > :first-child { margin-top: 0; }
.box-body > :last-child  { margin-bottom: 0; }

/* 外部サイトへのボタン */
.btn-row {
  display: flex;
  gap: 12px;
  margin: 16px 0 0;
}
.btn-link {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--color-accent);
  color: var(--color-head);
  border: 1px solid #e5a34a;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}
.btn-link:hover {
  background-color: #f9cd91;
  color: var(--color-head);
}
.btn-link::after {
  content: " ↗";       /* 外部リンクであることを示す */
  font-weight: 400;
}

/* 囲みブロック内の小見出し */
.sub-head {
  margin: 0 0 0.7em;
  padding-left: 10px;
  border-left: 4px solid var(--color-accent);
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* 本文（左）＋写真（右）の並び。租税教室・定例集会などで使用 */
.item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.item + .item {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px dotted #ddd;
}
.item-text { flex: 1; }
.item-text > :first-child { margin-top: 0; }
.item-text > :last-child  { margin-bottom: 0; }
.item-photo { flex: none; }
.item-photo img {
  display: block;
  border: 1px solid var(--color-line);
}
.item-photo img + img { margin-top: 10px; }

/* 画像が未用意の箇所に置く仮枠。画像を入れたら丸ごと <img> に差し替える */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ccc;
  border-radius: 4px;
  background-color: #fafafa;
  color: #999;
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
}

/* 支部長挨拶 */
.greeting-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
}
.greeting-photo {
  flex: none;
  width: 240px;
}
.greeting-photo img {
  display: block;
  width: 240px;
  height: auto;
}
.greeting-text { flex: 1; }
.greeting-text p {
  margin: 0 0 1em;
  text-align: justify;
}
.greeting-text .sign {
  margin: 1.5em 0 0;
  text-align: right;
  font-weight: 600;
}

/* リード文（左）＋イメージ画像（右） */
.lead {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.lead-text { flex: 1; }
.lead-text > :first-child { margin-top: 0; }
.lead-photo { flex: none; width: 280px; }
.lead-photo img { display: block; width: 280px; height: auto; }

/* 税理士業務の構造図 */
.gyoumu-table {
  width: 100%;
  margin-top: 24px;
  font-size: 0.9375rem;   /* 15px */
}
.gyoumu-table > tbody > tr > th[scope="rowgroup"] { width: 180px; }
.gyoumu-table > tbody > tr > th .ref {
  display: block;
  margin-top: 0.4em;
  font-size: 0.75rem;
  font-weight: 400;
}
.gyoumu-table > tbody > tr > td.gname {
  width: 180px;
  font-weight: 600;
  vertical-align: middle;
}


/* ============================================================
   お問い合わせページ（otoiawase.html）
   ============================================================ */

#otoiawase-body img { display: block; }
#otoiawase-body .addr-img { margin: 24px 0 0 41px; }

/* Googleマップの埋め込み。上の住所画像と左端・幅を揃えています */
#otoiawase-body .map {
  width: 855px;
  margin: 26px 0 0 41px;
}
#otoiawase-body .map iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 1px solid var(--color-line);
}
#otoiawase-body .map-link {
  margin: 8px 0 0 41px;
  font-size: 0.875rem;
}


/* ============================================================
   トップページ（index.html）
   ============================================================ */

/* メインビジュアル。「税理士とは」の枠（左9px・幅920px）と左端を揃える */
#top-visual {
  display: block;
  margin: 24px 0 0 9px;
}

/* 左：バナー2枚／右：見出し・動画・お知らせ の2カラム */
#main {
  display: flex;
  gap: 8px;
  margin: 13px 0 0 13px;
}
#main .col-left {
  display: flex;
  flex-direction: column;
  gap: 47px;
  width: 270px;
  flex: none;
}
#main .col-left img { display: block; }

#main .col-right {
  width: 645px;
  flex: none;
}
#main .col-right img { display: block; }

/* 見出し画像 */
#main .heading { margin: 0; }
#main .heading + * { margin-top: 10px; }

/* YouTube 埋め込み。幅に対して 16:9 を保ちます */
#main .video {
  width: 560px;
  margin: 10px auto 0;
  aspect-ratio: 16 / 9;
}
#main .video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

#main .oshirase { margin-top: 24px; }

/* お知らせ本文 */
#main .news {
  margin-top: 20px;
  padding-left: 50px;
}

/* 関連リンクのロゴ列 */
#links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 40px 0 0 17px;
}
#links img { display: block; }


/* ============================================================
   フッター
   ============================================================ */

#footer {
  margin: 24px 0 0 0;
  padding-bottom: 24px;
}
#footer .fnotes { margin: 0 12px 0 14px; }
#footer img.sen { margin-top: 16px; }

#footer .copyright {
  text-align: right;
  font-size: 0.6875rem;   /* 11px */
  color: gray;
  margin: 6px 12px 0 14px;
}
#footer .copyright a {
  text-decoration: none;
  color: #8b8989;
}