@charset "UTF-8";

/* ============================================================
   林田｜ポートフォリオサイト
   色を変えたいときは、下の :root の値だけ書き換えてください。
   サイト全体の色が一度に変わります。
   ============================================================ */

:root{
  --navy:      #1e3a5f;   /* 基調色（濃紺） */
  --navy-dark: #12294a;   /* ヒーローの濃い側 */
  --navy-lite: #254a76;   /* ヒーローの明るい側 */
  --accent:    #e67e22;   /* 差し色（オレンジ） */
  --accent-lt: #f5a35c;   /* 濃い背景の上で使う差し色 */
  --ink:       #22282f;   /* 本文の文字色 */
  --ink-soft:  #5a6472;   /* 補足の文字色 */
  --line:      #dfe4ea;   /* 罫線 */
  --tint:      #f4f6f9;   /* 薄い背景 */
  --white:     #ffffff;

  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --wide: 980px;          /* コンテンツの最大幅 */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.95;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.inner{
  max-width:var(--wide);
  margin:0 auto;
  padding:0 24px;
}

/* ============================================================
   ナビゲーション（画面上部に固定）
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;
  align-items:center;
  gap:24px;
  height:62px;
}
.nav-brand{
  font-weight:900;
  font-size:17px;
  color:var(--navy);
  text-decoration:none;
  letter-spacing:.04em;
  flex:none;
}
.nav-brand span{
  font-size:11.5px;
  font-weight:500;
  color:var(--ink-soft);
}
.nav-menu{
  list-style:none;
  display:flex;
  gap:22px;
  margin-left:auto;
}
.nav-menu a{
  text-decoration:none;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.nav-menu a:hover{ color:var(--navy); border-bottom-color:var(--accent); }

.nav-cta{
  flex:none;
  background:var(--navy);
  color:var(--white);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  padding:11px 22px;
  border-radius:999px;
  transition:background-color .15s ease;
}
.nav-cta:hover{ background:var(--navy-lite); }

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{
  background:linear-gradient(150deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-lite) 100%);
  color:var(--white);
  padding:62px 0 54px;
  position:relative;
  overflow:hidden;
}
/* 右上の大きな円。文字だけの平板な画面にしないための図形 */
.hero::after{
  content:"";
  position:absolute;
  right:-140px; top:-140px;
  width:460px; height:460px;
  border-radius:50%;
  background:rgba(230,126,34,.13);
}
.hero .inner{ position:relative; z-index:1; }

.eyebrow{
  font-size:12px;
  letter-spacing:.24em;
  font-weight:700;
  color:var(--accent-lt);
  margin-bottom:16px;
}

.hero-title{
  font-family:var(--sans);
  font-size:clamp(25px, 4.4vw, 39px);
  font-weight:900;
  line-height:1.48;
  letter-spacing:.01em;
}
.hero-title em{
  font-style:normal;
  color:var(--accent-lt);
}

.hero-id{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:26px;
}
.avatar{
  width:56px; height:56px;
  border-radius:50%;
  object-fit:cover;
  background:var(--white);
  border:2px solid rgba(255,255,255,.55);
  flex:none;
}
.hero-name{
  font-size:19px;
  font-weight:700;
  letter-spacing:.02em;
}
.hero-name span{
  font-size:13px;
  font-weight:500;
  color:#c3d2e4;
  margin-left:2px;
}
.hero-since{
  font-size:13px;
  color:#c3d2e4;
  margin-top:2px;
}
/* ヒーローの副導線。主導線（ランサーズのボタン）より弱く見せる */
.hero-sub-link{
  margin-top:14px;
  font-size:13.5px;
  color:#a8bdd6;
}
.hero-sub-link a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.hero-sub-link a:hover{ color:var(--accent-lt); }

/* ============================================================
   ボタン
   ============================================================ */
.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }

.btn-hero{
  margin-top:24px;
  background:var(--accent);
  color:var(--white);
  padding:15px 36px;
  font-size:15.5px;
  box-shadow:0 8px 22px rgba(230,126,34,.32);
}
.btn-hero:hover{ background:#d97317; box-shadow:0 12px 28px rgba(230,126,34,.4); }

.btn-cta{
  margin-top:28px;
  background:var(--accent);
  color:var(--white);
  padding:19px 48px;
  font-size:17px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.btn-cta:hover{ background:#d97317; }

/* ============================================================
   数字ブロック
   ============================================================ */
.stats-wrap{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:0 0 30px;
}
.stats{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin-top:-1px;
}
.stat{
  text-align:center;
  padding:20px 10px 14px;
  border-right:1px solid var(--line);
}
.stat:last-child{ border-right:0; }

.num{
  display:block;
  font-size:clamp(20px, 2.5vw, 25px);
  font-weight:900;
  color:var(--navy);
  line-height:1;
  letter-spacing:-.02em;
}
.num small{
  font-size:.42em;
  font-weight:700;
  margin-left:3px;
}
.accent .num{ color:var(--accent); }

.cap{
  display:block;
  margin-top:9px;
  font-size:11px;
  line-height:1.6;
  color:var(--ink-soft);
  letter-spacing:.04em;
}
.stats-note{
  text-align:center;
  font-size:11.5px;
  color:#98a1ae;
  letter-spacing:.04em;
}

/* ============================================================
   セクション共通
   ============================================================ */
.sec{ padding:60px 0; }
.sec-tint{ background:var(--tint); }

.h2{
  font-family:var(--serif);
  font-size:clamp(21px, 2.6vw, 26px);
  font-weight:700;
  color:var(--navy);
  letter-spacing:.04em;
  margin-bottom:26px;
  padding-bottom:9px;
  border-bottom:2px solid var(--navy);
  display:inline-block;
}
.h2-light{ color:var(--white); border-bottom-color:var(--accent); }

/* H2直下のリード文（セクションの主語を示す） */
.sec-lead{
  font-size:16px;
  line-height:1.9;
  margin:-12px 0 6px;
  color:var(--ink);
}

.h3{
  font-size:19px;
  font-weight:700;
  color:var(--navy);
  margin:40px 0 16px;
  padding-left:14px;
  border-left:4px solid var(--navy);
  line-height:1.6;
}

/* 補足の囲み（地の文で浮く一文を受け止める） */
.callout{
  background:var(--tint);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 20px;
  font-size:15px;
  line-height:1.85;
  margin-bottom:16px;
}
.sec-tint .callout{ background:var(--white); }
.h3:first-of-type{ margin-top:0; }

.lead{ margin-bottom:16px; }
.lead-strong{
  font-size:19px;
  font-weight:700;
  color:var(--navy);
  margin:6px 0 18px;
  padding:16px 20px;
  background:var(--tint);
  border-radius:8px;
}
.sec-tint .lead-strong{ background:var(--white); }
.note{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.9;
  padding:16px 20px;
  background:rgba(30,58,95,.05);
  border-radius:8px;
}

/* ============================================================
   書ける分野
   ============================================================ */
.fields{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin-bottom:26px;
}
.fields li{
  background:var(--tint);
  border-radius:10px;
  padding:18px 20px;
  border-left:4px solid var(--navy);
}
.sec-tint .fields li{ background:var(--white); }
.fields strong{
  display:block;
  font-size:16.5px;
  color:var(--navy);
  line-height:1.6;
}
.fields span{
  display:block;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.7;
  margin-top:2px;
}

/* ============================================================
   各工程でやっていること
   ============================================================ */
.steps{
  list-style:none;
  display:grid;
  gap:2px;
  margin-bottom:22px;
  background:var(--line);
  border-radius:12px;
  overflow:hidden;
}
.steps li{
  display:flex;
  gap:16px;
  background:var(--white);
  padding:22px 24px;
}
.sec-tint .steps li{ background:var(--tint); }
.step-no{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--navy);
  color:var(--white);
  font-size:13px;
  font-weight:900;
  flex:none;
  margin-top:2px;
}
.step-t{
  font-size:16.5px;
  font-weight:700;
  color:var(--navy);
  line-height:1.6;
}
.step-d{
  font-size:14.5px;
  line-height:1.85;
  color:var(--ink-soft);
  margin-top:2px;
}

/* ============================================================
   実績カード
   ============================================================ */
.cards{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin-bottom:26px;
}
.card{
  background:var(--white);
  border-radius:12px;
  padding:26px 24px;
  box-shadow:0 3px 14px rgba(30,58,95,.09);
  border-top:4px solid var(--navy);
}
.card-genre{
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--accent);
  margin-bottom:10px;
}
.card-main{
  font-size:17px;
  font-weight:500;
  line-height:1.7;
  color:var(--ink);
}
.card-main strong{ color:var(--navy); font-weight:900; }
.card-sub{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:8px;
  line-height:1.7;
}

/* ============================================================
   資格
   ============================================================ */
.quals{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.quals li{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 20px;
  font-size:14px;
  font-weight:500;
}

/* ============================================================
   使用ツール（1行の列挙）
   ============================================================ */
.tools-line{
  font-size:15px;
  color:var(--navy);
  font-weight:500;
  line-height:2;
}

/* ============================================================
   稼働・料金
   ============================================================ */
.terms{ border-top:1px solid var(--line); }
.terms > div{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:16px;
  padding:20px 4px;
  border-bottom:1px solid var(--line);
}
.terms dt{
  font-weight:700;
  color:var(--navy);
  font-size:15px;
}
.terms dd{ font-size:15.5px; }
.terms dd strong{
  font-size:18px;
  font-weight:900;
  color:var(--navy);
}
.terms dd span{
  display:block;
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.7;
}

/* ============================================================
   お問い合わせ
   ============================================================ */
.sec-cta{
  background:linear-gradient(150deg, var(--navy-dark) 0%, var(--navy) 100%);
  color:var(--white);
  text-align:center;
}
.sec-cta .h2{ margin-bottom:34px; }
.cta-lead{ font-size:16px; color:#d3dfee; }
.cta-sns{ margin-top:28px; font-size:14px; color:#c3d2e4; }
.cta-sns a{ color:var(--accent-lt); font-weight:700; text-decoration:none; }
.cta-sns a:hover{ text-decoration:underline; }

/* ============================================================
   フッター
   ============================================================ */
.footer{
  background:var(--navy-dark);
  color:#8fa2ba;
  text-align:center;
  padding:26px 0;
  font-size:12.5px;
}

/* ============================================================
   スマホ（画面幅 720px 以下）
   ============================================================ */
@media (max-width:720px){
  body{ font-size:15.5px; line-height:1.9; }
  .inner{ padding:0 20px; }

  /* ナビはメニューを隠し、屋号と依頼ボタンだけ残す */
  .nav-inner{ height:56px; gap:12px; }
  .nav-menu{ display:none; }
  .nav-brand span{ display:none; }
  .nav-cta{ margin-left:auto; font-size:12.5px; padding:10px 18px; }

  .hero{ padding:44px 0 40px; }
  .hero::after{ right:-120px; top:-120px; width:300px; height:300px; }
  .hero-id{ margin-top:22px; gap:12px; }
  .avatar{ width:48px; height:48px; }
  .btn-hero{ display:block; text-align:center; padding:15px 20px; margin-top:20px; }

  .stats{ grid-template-columns:repeat(2, 1fr); }
  .stat{ padding:20px 8px 16px; border-bottom:1px solid var(--line); }
  .steps li{ padding:18px 18px; gap:13px; }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-last-child(-n+2){ border-bottom:0; }

  .sec{ padding:52px 0; }
  .h2{ margin-bottom:22px; }
  .h3{ margin:36px 0 14px; font-size:17.5px; }

  .fields{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }

  .terms > div{ grid-template-columns:1fr; gap:4px; padding:16px 4px; }

  .btn-cta{ display:block; padding:17px 20px; }
}