@charset "UTF-8";

/* =========================================================
   藤本公認会計士事務所 — スタイル定義
   参考：うるが法律事務所（1ページ構成・明朝見出し・1色アクセント）
   ※色はブランドが異なるため濃紺に置き換え。--accent の1行で変更可能
   ========================================================= */

/* ===== 1. 変数定義（色・フォント）===== */
:root{
  /* ----- 色：会計事務所としての信頼感を濃紺で表現 ----- */
  --accent:        #1f3a5f;  /* 主役の色。罫線・フッター・強調に使用 */
  --accent-deep:   #162c48;  /* ヒーロー背景など、より深い面に使う */
  --ink:           #35342f;  /* 本文。真っ黒を避けて可読性を上げる */
  --ink-strong:    #1b1a17;  /* 見出し */
  --ink-mute:      #5c5a53;  /* 補足テキスト。小さい文字でもコントラスト比5.5以上を確保する */
  --bg:            #ffffff;
  --bg-alt:        #f8f7f2;  /* セクション交互の背景（温かみのあるオフホワイト）*/
  --line:          #d9d6cd;  /* 罫線 */
  --line-strong:   #b9b5a9;

  /* ----- フォント：和文の品格を明朝で、可読性を游ゴシックで ----- */
  --mincho: "游明朝", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  --gothic: "游ゴシック Medium", "Yu Gothic Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}

/* ===== 2. リセットと基本設定 ===== */
*, *::before, *::after{ box-sizing:border-box; }

html{
  /* rem を 10px 基準にして、以降のサイズ指定を分かりやすくする */
  font-size:62.5%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:1.7rem;
  line-height:2;
  /* 日本語を文節単位で折り返し、語の途中で切れるのを防ぐ */
  word-break:auto-phrase;
}

h1,h2,h3,p,ul,table{ margin:0; padding:0; }
ul{ list-style:none; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* 共通のコンテンツ幅 */
.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 4rem;
}

/* ===== 3. ヒーロー（ファーストビュー）=====
   背景写真の上に濃紺のオーバーレイを重ね、白文字の可読性を確保する */
.hero{
  position:relative;
  background:var(--accent-deep) url("images/hero.webp") center 35% / cover no-repeat;
  color:#fff;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(22,44,72,.72);
}
/* 中身をオーバーレイより前面に出す */
.hero__inner,
.hero__nav{
  position:relative;
  z-index:1;
}

.hero__inner{
  padding:14rem 4rem 10rem;
}

.hero__name{
  font-family:var(--mincho);
  font-size:4.8rem;
  font-weight:400;
  letter-spacing:.2em;
  /* letter-spacing で右に余白が出るぶんを打ち消して中央に見せる */
  text-indent:.2em;
  line-height:1.5;
  /* 背景写真の明るい部分に重なっても読めるよう、ごく薄い影を敷く */
  text-shadow:0 1px 12px rgba(8,20,36,.5);
}

.hero__catch{
  margin-top:3.2rem;
  font-family:var(--mincho);
  font-size:2rem;
  letter-spacing:.1em;
  line-height:2.2;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 10px rgba(8,20,36,.5);
}

/* ----- ヒーロー下部のアンカーナビ ----- */
.hero__nav{
  border-top:1px solid rgba(255,255,255,.25);
}
.hero__nav ul{
  display:flex;
  justify-content:center;
}
.hero__nav li + li{
  border-left:1px solid rgba(255,255,255,.25);
}
.hero__nav a{
  display:block;
  padding:2rem 4.5rem;
  font-size:1.5rem;
  letter-spacing:.14em;
  text-decoration:none;
  transition:background .25s;
}
.hero__nav a::before{
  content:"▼";
  font-size:.9rem;
  margin-right:.9rem;
  vertical-align:.15em;
  color:rgba(255,255,255,.6);
}
.hero__nav a:hover{
  background:rgba(255,255,255,.1);
}

/* ===== 4. セクション共通 ===== */
.section{
  padding:12rem 0;
}
.section--alt{
  background:var(--bg-alt);
}

/* ----- セクション見出し：文字の横に細い罫線を伸ばす ----- */
.section__title{
  display:flex;
  align-items:center;
  gap:3rem;
  margin-bottom:7rem;
  font-family:var(--mincho);
  font-size:3.2rem;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--ink-strong);
}
.section__title::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line-strong);
}
/* 右寄せの見出しは罫線を左側に回す */
.section__title--right{
  flex-direction:row-reverse;
}

/* ===== 5. 代表紹介 ===== */
/* 写真を掲載しない方針のため1カラム構成。
   経歴テーブルが横に伸びすぎないよう最大幅を抑える */
.profile{
  max-width:88rem;
}

.profile__role{
  font-size:1.5rem;
  letter-spacing:.16em;
  color:var(--ink-mute);
}
.profile__name{
  margin-top:.6rem;
  font-family:var(--mincho);
  font-size:3.4rem;
  letter-spacing:.14em;
  color:var(--ink-strong);
  line-height:1.4;
}
.profile__cert{
  margin-top:1.2rem;
  padding-bottom:2.4rem;
  border-bottom:1px solid var(--line);
  font-size:1.4rem;
  letter-spacing:.08em;
  color:var(--ink-mute);
}

/* ----- 強みの文章：和文40字前後で折り返して読み戻りを減らす ----- */
.profile__lead{
  margin-top:3.2rem;
}
.profile__lead p{
  max-width:40em;
}
.profile__lead p + p{
  margin-top:1.8rem;
}
.profile__lead strong{
  font-weight:600;
  color:var(--accent);
}
/* 語の途中で折り返してほしくない箇所を明示的に固める。
   word-break:auto-phrase は文節解析が外れると文字単位に落ちるため、
   崩れては困る箇所はここで押さえる */
.nb{
  white-space:nowrap;
}

/* ----- 経歴テーブル：下線のみの軽い罫線 ----- */
.history{
  width:100%;
  margin-top:4.5rem;
  border-collapse:collapse;
  font-size:1.5rem;
  line-height:1.9;
}
.history th,
.history td{
  padding:1.6rem 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.history th{
  width:19rem;
  padding-right:2.5rem;
  font-weight:400;
  color:var(--ink-mute);
  white-space:nowrap;
}
/* 「〜」の前後で改行されないようにまとめる */
.history .wave{
  margin:0 .2em;
}

/* ===== 6. 業務内容 ===== */
.service__block + .service__block{
  margin-top:8rem;
}

/* ----- 各ブロック冒頭の帯状イメージ ----- */
.service__media{
  margin:0 0 4rem;
}
.service__media img{
  display:block;
  width:100%;
  aspect-ratio:2 / 1;
  object-fit:cover;
}

.service__head{
  padding-left:1.6rem;
  border-left:3px solid var(--accent);
  font-family:var(--mincho);
  font-size:2.2rem;
  font-weight:400;
  letter-spacing:.12em;
  color:var(--ink-strong);
  line-height:1.6;
}

.service__list{
  margin-top:3rem;
}
.service__list > li{
  padding:1.8rem 0 1.8rem 1.8rem;
  border-bottom:1px solid var(--line);
  font-size:1.7rem;
  line-height:1.9;
  position:relative;
  max-width:52em;
}
/* 箇条書きの点はドットではなく短い罫線にして硬質な印象にする。
   top は「上余白18px＋1行目の中心16px」の実測値34pxに合わせている */
.service__list > li::before{
  content:"";
  position:absolute;
  left:0;
  top:3.4rem;
  width:8px;
  height:1px;
  background:var(--accent);
}
.service__list .sub{
  display:block;
  margin-top:.4rem;
  font-size:1.4rem;
  line-height:1.85;
  color:var(--ink-mute);
}

.service__note{
  margin-top:3.5rem;
  font-size:1.4rem;
  line-height:1.9;
  color:var(--ink-mute);
}
.service__note + .service__note{
  margin-top:.8rem;
}

/* ===== 7. 事務所概要 ===== */
.about{
  width:100%;
  max-width:88rem;
  border-collapse:collapse;
  font-size:1.6rem;
  line-height:1.9;
}
.about th,
.about td{
  padding:2.2rem 2.5rem;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.about th{
  width:22rem;
  background:var(--bg-alt);
  font-weight:400;
  letter-spacing:.08em;
  color:var(--ink-strong);
  white-space:nowrap;
}
.about .sub{
  display:block;
  margin-top:.3rem;
  font-size:1.4rem;
  color:var(--ink-mute);
}

/* ===== 8. フッター ===== */
.footer{
  background:var(--accent);
  color:#fff;
  padding:6rem 0 0;
}
/* 連絡先を置かないため、名義のみを中央に配置する */
.footer__inner{
  padding-bottom:4.5rem;
  text-align:center;
}

.footer__name{
  font-family:var(--mincho);
  font-size:2.4rem;
  letter-spacing:.16em;
  line-height:1.6;
}
.footer__person{
  margin-top:1.2rem;
  font-size:1.5rem;
  letter-spacing:.08em;
  color:rgba(255,255,255,.85);
}

.copyright{
  padding:2rem 4rem;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:1.2rem;
  letter-spacing:.08em;
  text-align:center;
  color:rgba(255,255,255,.75);
}

/* =========================================================
   9. レスポンシブ
   ========================================================= */

/* ----- スマートフォン ----- */
@media screen and (max-width:768px){
  body{
    font-size:1.6rem;
    line-height:1.95;
  }
  .wrap{
    padding:0 2.4rem;
  }

  .hero__inner{
    padding:8rem 2.4rem 6rem;
  }
  /* 事務所名は見出しの大きさを保つ。320px幅では2行になるが、
     HTML側で「事務所」を .nb で固めてあるため「藤本公認会計士／事務所」で折れる
     （縮めると逆に「…会計士事／務所」と悪い位置で切れる。実測で確認済み）*/
  .hero__name{
    font-size:2.8rem;
    letter-spacing:.14em;
    text-indent:.14em;
  }
  /* 1.6remだと「…パートナーと／して」と2字だけ残るため、1行に収まるサイズにする */
  .hero__catch{
    margin-top:2.4rem;
    font-size:1.5rem;
    line-height:2.1;
  }
  /* ナビは3つを均等割りにして、指で押しやすい高さを確保する */
  .hero__nav ul{
    justify-content:stretch;
  }
  .hero__nav li{
    flex:1;
  }
  .hero__nav a{
    padding:1.6rem .5rem;
    font-size:1.3rem;
    letter-spacing:.06em;
    text-align:center;
  }
  .hero__nav a::before{
    display:block;
    margin:0 0 .3rem;
  }

  .section{
    padding:7rem 0;
  }
  .section__title{
    gap:1.8rem;
    margin-bottom:4rem;
    font-size:2.4rem;
    letter-spacing:.14em;
  }

  .profile__name{
    font-size:2.8rem;
  }
  .profile__lead{
    margin-top:2.6rem;
  }

  /* 経歴テーブルは横並びをやめて縦積みにする */
  .history{
    margin-top:3.5rem;
    font-size:1.5rem;
  }
  .history tr{
    display:block;
    padding:1.6rem 0;
    border-bottom:1px solid var(--line);
  }
  .history th,
  .history td{
    display:block;
    width:auto;
    padding:0;
    border:none;
  }
  .history th{
    margin-bottom:.4rem;
    font-size:1.35rem;
    letter-spacing:.06em;
  }

  .service__block + .service__block{
    margin-top:5rem;
  }
  .service__head{
    font-size:1.9rem;
  }
  .service__list > li{
    padding:1.5rem 0 1.5rem 1.5rem;
    font-size:1.6rem;
  }
  /* スマホでは1行目の中心が29.5pxになるため、そこに合わせる */
  .service__list > li::before{
    top:3rem;
  }
  .service__list .sub{
    font-size:1.35rem;
  }

  /* 事務所概要の表も縦積みに */
  .about{
    font-size:1.5rem;
  }
  .about tr{
    display:block;
    border:1px solid var(--line);
  }
  .about tr + tr{
    border-top:none;
  }
  .about th,
  .about td{
    display:block;
    width:auto;
    border:none;
    padding:1.4rem 1.8rem;
  }
  .about th{
    padding-bottom:.4rem;
    font-size:1.35rem;
    color:var(--ink-mute);
  }
  .about td{
    padding-top:0;
  }

  .footer{
    padding-top:4.5rem;
  }
  .footer__inner{
    padding-bottom:3.5rem;
  }
  .footer__name{
    font-size:2rem;
  }
  .copyright{
    padding:1.8rem 2.4rem;
  }
}