@charset "UTF-8";

/* ============================================================
   色（ここを変えると全体の色が変わります）
   紙白 / 薄罫 / 緑十字 / 墨 / 蛍光
   ============================================================ */
:root{
  --paper:      #FBFBF8;  /* 地の色（紙） */
  --paper-2:    #F4F5F1;  /* 少し沈んだ紙 */
  --rule:       #DCE3E0;  /* 罫線 */
  --rule-soft:  #EAEEEB;
  --green:      #125340;  /* 緑十字（主役） */
  --green-deep: #0C3A2C;
  --ink:        #23312C;  /* 本文 */
  --ink-2:      #5C6B64;  /* 補助 */
  --hl:         #F5E45C;  /* 蛍光（差し色はこれだけ） */
  --hl-soft:    #FDFAEA;

  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --col:    860px;   /* 本文の柱の幅 */
  --h1:     clamp(2.45rem, 5.6vw, 4rem);  /* 見出しの大きさ */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:16px;
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;

  /* 日本語の改行を整える：小さい「ゃ」「ー」などが行頭に来ないようにする */
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
}

/* ============================================================
   改行の整え方
   ・見出し   … 各行の長さをそろえる（1文字だけ残らないように）
   ・本文     … 最後の行に1語だけ取り残さない
   ・対応ブラウザでは、単語の途中で切れないように文節で折り返す
   ============================================================ */
h1,h2,h3,
.hero-title,.h-sec,.h-sub,.h-contact,.h-name,
.panel-title,.target-head,.lead-after,.quote,
.ledger-row dt{
  text-wrap:balance;
}
p,dd,li,blockquote{
  text-wrap:pretty;
}
@supports (word-break: auto-phrase){
  h1,h2,h3,p,dt,dd,li,blockquote{
    word-break:auto-phrase;
  }
}
/* 途中で切りたくない言葉 */
.nb{ white-space:nowrap; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,blockquote{ margin:0; }

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

.wrap{
  width:min(100% - 48px, var(--col));
  margin-inline:auto;
}
/* 読みやすい行長におさえる（柱の左端はそろえたまま、文章だけ短くする） */
.prose > h2,
.prose > h3,
.prose > p,
.prose > ul,
.prose > blockquote,
.prose > .target,
.prose > .aside{ max-width:38em; }

.br-sp{ display:none; }

/* ============================================================
   ヘッダー
   ============================================================ */
.masthead{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(251,251,248,.93);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:2px;
  background:var(--green);
  color:var(--paper);
  font-family:var(--mincho);
  font-weight:700;
  font-size:1.1875rem;
  line-height:1;
  flex-shrink:0;
}
/* 「K」の代わりに顔のアイコンを入れる */
.brand-photo{ overflow:hidden; padding:0; }
.brand-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.brand-mark-sm{ width:28px; height:28px; font-size:.9375rem; margin-right:10px; }
.brand-words{ display:flex; flex-direction:column; line-height:1.4; }
.brand-name{
  font-family:var(--mincho);
  font-weight:700;
  font-size:1.0625rem;
  color:var(--green);
}
.brand-role{ font-size:.6875rem; letter-spacing:.1em; color:var(--ink-2); }

.nav{ display:flex; align-items:center; gap:28px; font-size:.875rem; }
.nav a{ color:var(--ink-2); padding-bottom:2px; border-bottom:1px solid transparent; }
.nav a:hover{ color:var(--green); border-bottom-color:var(--green); }
.nav-cta{
  color:var(--paper) !important;
  background:var(--green);
  padding:.55em 1.35em;
  border-radius:2px;
  border-bottom:none !important;
}
.nav-cta:hover{ background:var(--green-deep); }

/* ============================================================
   ファーストビュー
   ============================================================ */
.hero{ padding:112px 0 96px; }

.hero-title{
  font-family:var(--mincho);
  font-weight:700;
  font-size:var(--h1);
  line-height:1.34;
  letter-spacing:.005em;
  color:var(--green);
}

/* 蛍光ペンで引いた線 */
.hl{
  position:relative;
  display:inline-block;
}
.hl::before{
  content:"";
  position:absolute;
  left:-.04em; right:-.04em;
  bottom:.1em;
  height:.42em;
  background:var(--hl);
  transform:scaleX(0);
  transform-origin:left center;
  animation:swipe .62s cubic-bezier(.32,.72,.35,1) .35s forwards;
}
.hl-ink{ position:relative; }

@keyframes swipe{ to{ transform:scaleX(1); } }

.hero-lead{
  margin-top:36px;
  max-width:36em;
  font-size:1.0625rem;
  line-height:2.05;
  color:var(--ink-2);
}
.hero-acts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 32px;
  margin-top:44px;
}


/* ============================================================
   ボタン・リンク
   ============================================================ */
.btn{
  display:inline-block;
  padding:1em 2.4em;
  border-radius:2px;
  background:var(--green);
  color:var(--paper);
  font-family:var(--mincho);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.06em;
  transition:background-color .18s ease;
}
.btn:hover{ background:var(--green-deep); }
.btn-lg{ padding:1.15em 3.2em; font-size:1.0625rem; }

.link-plain{
  font-size:.9375rem;
  color:var(--green);
  padding-bottom:3px;
  border-bottom:1px solid var(--rule);
  transition:border-color .18s ease;
}
.link-plain:hover{ border-bottom-color:var(--green); }

.link-marked{
  display:inline-block;
  margin-top:14px;
  font-size:.9375rem;
  font-weight:500;
  color:var(--green);
  padding-bottom:3px;
  border-bottom:1.5px solid var(--hl);
  transition:border-color .18s ease;
}
.link-marked:hover{ border-bottom-color:var(--green); }

/* ============================================================
   セクション共通
   ============================================================ */
.band{
  padding:88px 0;
  border-top:1px solid var(--rule);
}

.h-sec{
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(1.55rem, 3.1vw, 2.15rem);
  line-height:1.6;
  letter-spacing:.01em;
  color:var(--green);
  margin-bottom:40px;
}
.h-sub{
  font-family:var(--mincho);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.7;
  color:var(--green);
  margin:48px 0 20px;
}

/* ============================================================
   困りごと
   ============================================================ */
.plain-list{
  border-top:1px solid var(--rule-soft);
}
.plain-list li{
  padding:18px 0 18px 26px;
  border-bottom:1px solid var(--rule-soft);
  font-size:.9375rem;
  line-height:1.9;
  position:relative;
}
.plain-list li::before{
  content:"";
  position:absolute;
  left:2px; top:1.72em;
  width:10px; height:1px;
  background:var(--ink-2);
}
.lead-after{
  margin-top:36px;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(1.15rem, 2.4vw, 1.5rem);
  line-height:1.8;
  color:var(--green);
}

/* ============================================================
   明細行（できること・約束・条件・実績の一部）
   ============================================================ */
.ledger{ border-top:1px solid var(--rule); }
.ledger-row{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:28px;
  padding:26px 0;
  border-bottom:1px solid var(--rule);
}
.ledger-row dt{
  font-family:var(--mincho);
  font-weight:700;
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--green);
}
.ledger-row dd{
  font-size:.9375rem;
  line-height:1.95;
  color:var(--ink-2);
  max-width:36em;
}
.ledger-tight{ margin-top:40px; }

/* ============================================================
   こんな方へ
   ============================================================ */
.target{
  padding:26px 0;
  border-bottom:1px solid var(--rule-soft);
}
.target:first-of-type{ border-top:1px solid var(--rule); }
.target-head{
  font-family:var(--mincho);
  font-weight:700;
  font-size:1.125rem;
  line-height:1.8;
  color:var(--green);
  margin-bottom:8px;
}
.target p:last-child{
  font-size:.9375rem;
  color:var(--ink-2);
}
.aside{
  margin-top:32px;
  padding:24px 28px;
  background:var(--paper-2);
  border-left:3px solid var(--green);
  font-size:.9375rem;
  line-height:1.95;
  color:var(--ink);
}

/* ============================================================
   実績：ページで唯一の「濃い面」
   ============================================================ */
.panel{
  background:var(--green);
  color:var(--paper);
  padding:52px 48px;
  border-radius:2px;
}
.panel-title{
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(1.3rem, 2.8vw, 1.75rem);
  line-height:1.65;
  margin-bottom:22px;
}
.panel-lead{
  font-size:.9375rem;
  line-height:2.05;
  color:rgba(251,251,248,.86);
  max-width:36em;
}
.panel-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 36px;
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid rgba(251,251,248,.24);
}
.panel-list li{
  position:relative;
  padding-left:20px;
  font-size:.875rem;
  line-height:1.85;
  color:rgba(251,251,248,.94);
}
.panel-list li::before{
  content:"";
  position:absolute;
  left:0; top:.88em;
  width:9px; height:2px;
  background:var(--hl);
}

/* ============================================================
   思い
   ============================================================ */
.prose > p{
  font-size:1rem;
  line-height:2.1;
  margin-bottom:22px;
}
.quote{
  margin:34px 0;
  padding:4px 0 4px 26px;
  border-left:3px solid var(--hl);
  font-family:var(--mincho);
  font-weight:600;
  font-size:clamp(1.15rem, 2.5vw, 1.45rem);
  line-height:1.9;
  color:var(--green);
}
.voice-by{
  font-family:var(--mincho);
  font-weight:600;
  font-size:.9375rem;
  color:var(--green);
}

/* ============================================================
   プロフィール
   ============================================================ */
/* 全身の画像（縦長）と文章を横に並べる */
.profile{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:52px;
  align-items:start;
}
.portrait{
  width:100%;
  aspect-ratio:480/1003;
  background:var(--green);
  border-radius:2px;
  overflow:hidden;
}
.portrait span{
  font-family:var(--mincho);
  font-weight:700;
  font-size:2.4rem;
  line-height:1;
  color:var(--paper);
}
/* あとから写真を入れる場合は、.portrait の中に <img> を置くだけです */
.portrait img{ display:block; width:100%; height:100%; object-fit:cover; }

.h-name{ margin-bottom:6px; }
.profile-role{
  margin-bottom:30px;
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--ink-2);
}

/* ============================================================
   お問い合わせ
   ============================================================ */
.contact{
  padding:96px 0 104px;
  background:var(--hl-soft);
  border-top:1px solid var(--rule);
}
.h-contact{
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(1.65rem, 3.6vw, 2.4rem);
  line-height:1.6;
  color:var(--green);
  margin-bottom:22px;
}
.contact-lead{
  font-size:.9375rem;
  line-height:2.05;
  color:var(--ink);
  margin-bottom:36px;
}
.contact-act{ margin-bottom:20px; }
.contact-note{ font-size:.8125rem; color:var(--ink-2); }

/* ============================================================
   フッター
   ============================================================ */
.foot{
  padding:34px 0;
  background:var(--green-deep);
  color:rgba(251,251,248,.8);
}
.foot-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.foot-brand{
  display:flex;
  align-items:center;
  font-family:var(--mincho);
  font-weight:600;
  font-size:.9375rem;
}
.foot .brand-mark{ background:rgba(251,251,248,.16); }
.foot-copy{ font-size:.75rem; letter-spacing:.06em; color:rgba(251,251,248,.55); }

/* ============================================================
   タブレット
   ============================================================ */
@media (max-width:900px){
  .hero{ padding:80px 0 72px; }
  .band{ padding:68px 0; }
  .ledger-row{ grid-template-columns:1fr; gap:10px; }
  .nav{ gap:18px; font-size:.8125rem; }
  .profile{ grid-template-columns:180px minmax(0,1fr); gap:36px; }
}

/* ============================================================
   スマートフォン
   ============================================================ */
@media (max-width:680px){
  body{ font-size:15px; }
  .wrap{ width:min(100% - 36px, 1120px); }
  .br-sp{ display:inline; }


  .masthead-in{ min-height:60px; }
  .nav a:not(.nav-cta){ display:none; }
  .nav-cta{ font-size:.8125rem; }

  .hero{ padding:52px 0 64px; }
  .hero-title{ font-size:2.4rem; line-height:1.42; }
  .hero-lead{ margin-top:26px; font-size:.9375rem; line-height:2; }
  .hero-acts{ margin-top:34px; flex-direction:column; align-items:flex-start; gap:18px; }
  .btn{ display:block; width:100%; text-align:center; padding:1.05em 1.4em; }

  .band{ padding:56px 0; }
  .h-sec{ margin-bottom:28px; }
  .h-sub{ margin:36px 0 16px; }

  .plain-list li{ padding:15px 0 15px 22px; font-size:.875rem; }
  .plain-list li::before{ top:1.6em; }

  .panel{ padding:34px 26px; }
  .panel-list{ grid-template-columns:1fr; gap:6px; margin-top:24px; padding-top:20px; }

  .aside{ padding:20px 20px; }
  .quote{ margin:28px 0; padding-left:20px; }

  .profile{ grid-template-columns:1fr; gap:28px; }
  .portrait{ width:150px; }
  .portrait span{ font-size:2rem; }

  .contact{ padding:64px 0 72px; }
  .btn-lg{ padding:1.15em 1.4em; font-size:1rem; }

  .foot-in{ flex-direction:column; text-align:center; gap:12px; }
}

/* ============================================================
   動きを減らす設定にしている方には、動きを出さない
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hl::before{ animation:none; transform:scaleX(1); }
  *{ transition-duration:.01ms !important; }
}