/* DESIGN.md に準拠。色・余白は変数で管理する */
:root{
  --color-primary:#2440A8;
  --color-primary-dark:#1B3185;
  --color-surface:#F6F4EF;
  --color-bg:#FFFFFF;
  --color-text:#161D2E;
  --color-muted:#3F4A5A;
  --color-border:#E0DDD5;
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --color-accent:#E8604C;
  --space-1:8px;
  --space-2:16px;
  --space-3:32px;
  --space-4:64px;
  --space-5:96px;
  --radius-card:12px;
  --radius-pill:999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
  font-size:1.0625rem;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--color-text);
  background:var(--color-bg);
}
.container{max-width:1040px;margin:0 auto;padding:0 20px}

/* 日本語の改行: 文節で折り返し、見出しは行の長さをそろえる */
body{line-break:strict;word-break:auto-phrase}
h1,h2,h3,h4,.lead-strong{text-wrap:balance}
p,dd,li{text-wrap:pretty}
.nb{display:inline-block}
a{color:var(--color-primary)}

/* ボタン */
.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  background:var(--color-primary);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  transition:background .2s,transform .2s;
}
.btn:hover{background:var(--color-primary-dark);transform:translateY(-1px)}
.btn--sm{padding:8px 20px;font-size:.875rem}
.btn--inverse{background:#fff;color:var(--color-primary)}
.btn--inverse:hover{background:var(--color-surface)}

/* ヘッダー */
.site-header{
  position:sticky;top:0;z-index:10;
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:64px}
.site-name{font-weight:700;color:var(--color-text);text-decoration:none}
.site-nav ul{display:flex;gap:var(--space-3);list-style:none;margin:0;padding:0}
.site-nav a{color:var(--color-text);text-decoration:none;font-size:.9375rem}
.site-nav a:hover{color:var(--color-primary)}
.header-actions{display:flex;align-items:center;gap:var(--space-3)}

/* ヒーロー */
.hero{background:var(--color-bg);padding:0}
.hero-main{
  position:relative;
  padding:var(--space-5) 0 var(--space-4);
  min-height:600px;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,#0F1A4A 0%,#18287A 55%,#2440A8 100%);
  color:#fff;
}
.hero-main .container{width:100%;position:relative;z-index:1}
.hero h1{
  font-family:var(--font-serif);
  font-size:clamp(2.25rem,5vw,4rem);
  line-height:1.4;
  letter-spacing:.04em;
  font-weight:700;
  margin:0 0 var(--space-3);
}
.hero-main p{max-width:30em;margin:0 0 var(--space-3);color:#fff;font-size:1.1875rem}
.hero-main .note{color:#dfe6ff}
.hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-3)}
.note{font-size:.875rem;color:var(--color-muted);margin:var(--space-2) 0 0}
.hero-cta .note{margin:0}
/* 右側に自分の写真を、左へ溶け込むように重ねる(透過) */
.hero-main::after{
  content:"";
  position:absolute;top:0;right:0;bottom:0;width:min(36%,520px);
  background:url("images/hero-me.jpg") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 60%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 60%);
  pointer-events:none;
}
@media (max-width:639px){
  .hero-main{padding:var(--space-4) 0 var(--space-5);min-height:0}
  .hero-main::after{width:100%;opacity:.3;-webkit-mask-image:none;mask-image:none}
  .hero h1{font-size:1.875rem}
}

/* セクション共通 */
.section{padding:var(--space-5) 0}
.section--alt{background:var(--color-surface)}
.section h2{
  font-family:var(--font-serif);
  font-size:clamp(1.75rem,3.2vw,2.5rem);
  line-height:1.4;
  letter-spacing:.04em;
  margin:0 0 var(--space-3);
}
h3{font-size:1.125rem;line-height:1.5;margin:0 0 var(--space-1)}
.section p{margin:0;color:var(--color-muted)}

/* お悩み: 表情つきの顔アイコン+区切り線の一覧 */
.issues{list-style:none;margin:0;padding:0;max-width:46em}
.issues li{padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);border-left:3px solid var(--color-primary);background:#fff}
.issues p{font-size:1rem}

/* サービス: 名称と説明の2列 */
.rows{margin:0}
.rows>div{display:grid;grid-template-columns:14em 1fr;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
.rows>div:first-child{border-top:1px solid var(--color-border)}
.rows dt{font-weight:700}
.rows .price-tag{display:block;margin-top:4px;color:var(--color-primary);font-size:1.0625rem}
.rows dd{margin:0;color:var(--color-muted)}

/* 私について: 略歴・成功事例・できること */
.about h3{margin-top:var(--space-4);margin-bottom:var(--space-2);padding-bottom:var(--space-1);border-bottom:2px solid var(--color-primary)}
.about .lead{font-size:1.0625rem}
.career{margin:0}
.career>div{display:grid;grid-template-columns:6em 1fr;gap:var(--space-2);padding:var(--space-1) 0;border-bottom:1px solid var(--color-border)}
.career dt{font-weight:700;color:var(--color-text)}
.career dd{margin:0;color:var(--color-muted)}
.cases{list-style:none;margin:0;padding:0;max-width:42em}
.cases li{padding:var(--space-1) 0;border-bottom:1px solid var(--color-border);color:var(--color-muted)}
.cases b{display:block;color:var(--color-text)}
.about-side{position:sticky;top:96px;align-self:start}
.about .lead-strong{font-family:var(--font-serif);font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:700;line-height:1.6;color:var(--color-text);max-width:30em;margin-bottom:var(--space-2)}
/* できること・得意なこと */
.about .skills-label{font-size:.875rem;font-weight:700;color:var(--color-text);margin:0 0 var(--space-1)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-1);list-style:none;margin:0 0 var(--space-3);padding:0}
.chips li{padding:6px 18px;border:1px solid var(--color-primary);border-radius:var(--radius-pill);color:var(--color-primary);font-size:.9375rem;font-weight:700}
.chips li.is-main{background:var(--color-primary);color:#fff}
.skill-cols{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr))}
.skill-cols>div{border-top:2px solid var(--color-primary);padding-top:var(--space-2)}
.skill-cols h4{margin:0 0 var(--space-1);font-size:1rem;line-height:1.5;color:var(--color-text)}
.about .skill-cols p{font-size:.875rem;margin:0}

/* 運営者 */
.about-inner{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:var(--space-4);align-items:start}
.about-photo{width:100%;height:auto;border-radius:var(--radius-card);display:block}
.about p{max-width:42em;margin:0 0 var(--space-2)}

/* 申込 */
.contact{background:var(--color-primary);color:#fff;text-align:center}
.contact h2{color:#fff}
.contact p{margin:0 0 var(--space-3);color:#dbe4ff}
.contact .mail{margin-top:var(--space-3);font-size:.9375rem;color:#dbe4ff}
.contact .mail a{color:#fff}
/* 申込フォーム */
.apply{max-width:560px;margin:0 auto;text-align:left}
.contact .apply p{color:#dbe4ff}
.apply .field{margin-bottom:var(--space-2)}
.apply label{display:block;margin-bottom:6px;font-size:.9375rem;font-weight:700;color:#fff}
.apply .req{margin-left:8px;padding:1px 8px;border-radius:var(--radius-pill);background:#fff;color:var(--color-primary);font-size:.75rem;font-weight:700;vertical-align:1px}
.apply input[type="text"],.apply input[type="email"],.apply textarea{
  width:100%;padding:12px 14px;border:1px solid transparent;border-radius:8px;
  background:#fff;color:var(--color-text);font:inherit;font-size:1rem;line-height:1.6;
}
.apply textarea{resize:vertical}
.apply input:focus-visible,.apply textarea:focus-visible,.apply button:focus-visible{outline:3px solid #BFD0FF;outline-offset:2px}
.apply .field--check label{display:flex;align-items:center;gap:8px;font-weight:400}
.apply .field--check input{width:20px;height:20px;flex-shrink:0}
.apply .field--check a{color:#fff}
.apply .btn{width:100%;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:1.0625rem}
.apply .btn:disabled{opacity:.6;cursor:not-allowed}
.apply-status{min-height:1.9em;margin:var(--space-2) 0 0;font-size:.9375rem}
.apply-status.is-error{color:#FFD9D2!important}
.apply .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* フッター */
.site-footer{background:var(--color-primary-dark);color:#fff;padding:var(--space-4) 0 var(--space-3)}
.site-footer dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-3)}
.site-footer dt{color:#c3cffa;font-size:.875rem}
.site-footer dd{margin:0;font-size:.9375rem}
.site-footer a{color:#fff}
.site-footer small{display:block;color:#c3cffa;margin-top:var(--space-2)}

/* 付属ページ */
.page{padding:var(--space-4) 0 var(--space-5)}
.page h1{font-size:clamp(1.5rem,3.5vw,2.25rem);line-height:1.4;margin:0 0 var(--space-3)}
.page h2{font-size:1.25rem;margin:var(--space-3) 0 var(--space-1)}
.page p,.page li{max-width:42em}

@media (max-width:639px){
  .section{padding:var(--space-4) 0}
  .site-nav{display:none}
  .site-header .container{min-height:56px}
  .site-name{font-size:.8125rem;line-height:1.5;letter-spacing:0}
  .btn--sm{white-space:nowrap;padding:8px 14px;font-size:.8125rem}
  .header-actions{gap:var(--space-1)}
  .rows>div{grid-template-columns:1fr;gap:var(--space-1)}
  .about-inner{grid-template-columns:1fr;gap:var(--space-3)}
  .about-side{position:static}
  .skill-cols{grid-template-columns:1fr}
  .career>div{grid-template-columns:1fr;gap:0}
  .site-footer dl{grid-template-columns:1fr}
}