/* ==========================================================================
   なおひら｜ポートフォリオサイト
   方針：清潔感と信頼感。整骨院サンプルと同系の深い青を軸にした落ち着いたトーン。
   アイコン：Tabler Icons（MIT License / (c) 2020-2026 Paweł Kuna）
           https://github.com/tabler/tabler-icons
           SVG実体は index.html 冒頭のスプライト。色は currentColor。
   ========================================================================== */
:root{
  --ink:#26333d;
  --ink-d:#18242c;
  --sub:#5f707c;
  --main:#2a6076;          /* 深い青：信頼感 */
  --main-d:#1c4757;
  --main-l:#eaf2f5;
  --accent:#c98a3d;        /* 落ち着いた金茶：アクセント（料金・強調） */
  --paper:#ffffff;
  --wash:#f5f8f9;
  --bd:#dfe6ea;
  --shadow:0 6px 20px rgba(30,70,90,.08);
  --ico-w:1.6;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink);background:var(--paper);
  line-height:1.9;font-size:16px;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.pc{display:inline;}
.sp{display:none;}

/* ---- 共通 ---- */
.sec{padding:88px 24px;}
.inner{max-width:1020px;margin:0 auto;}
.sec__en{font-size:12px;letter-spacing:.28em;color:var(--main);font-weight:700;text-align:center;margin-bottom:8px;}
.sec__ttl{font-size:30px;line-height:1.5;font-weight:800;color:var(--ink-d);text-align:center;margin-bottom:16px;}
.sec__lead{text-align:center;color:var(--sub);font-size:14.5px;margin-bottom:44px;}
.sec__lead b{color:var(--ink);}
.cau{
  font-size:13.5px;line-height:1.85;color:var(--sub);text-align:center;
  background:var(--wash);border-radius:8px;padding:14px 18px;margin-top:30px;
}
.cau b{color:var(--ink);}

.sprite{display:none;}
.ico{
  width:1.1em;height:1.1em;flex:none;
  stroke:currentColor;fill:none;
  stroke-width:var(--ico-w);stroke-linecap:round;stroke-linejoin:round;
}

/* ---- ボタン ---- */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--main);color:#fff;font-weight:800;text-decoration:none;text-align:center;
  line-height:1.4;padding:14px 32px;border-radius:10px;
  transition:filter .15s,transform .15s;
}
.btn small{font-size:11px;font-weight:600;opacity:.85;margin-top:2px;}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn--sm{padding:9px 18px;font-size:13px;border-radius:8px;}
.btn--lg{padding:17px 42px;font-size:17px;}
.btn--ghost{background:#fff;color:var(--main-d);border:2px solid var(--main);}
.btn--white{background:#fff;color:var(--main-d);}
.btn.is-disabled{opacity:.75;cursor:default;}
.btn.is-disabled:hover{filter:none;transform:none;}
.ico--btn{width:19px;height:19px;margin-bottom:3px;}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--bd);
}
.head__inner{
  max-width:1100px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:22px;
}
.logo{font-size:19px;font-weight:900;letter-spacing:.02em;color:var(--ink-d);text-decoration:none;}
.logo span{color:var(--main);font-weight:700;}
.gnav{display:flex;gap:20px;margin-left:auto;}
.gnav a{text-decoration:none;font-size:14px;font-weight:700;color:var(--ink);}
.gnav a:hover{color:var(--main);}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#f7fbfc 0%,#e8f1f4 70%,#dcE9ee 100%);
  padding:96px 24px 104px;
}
.hero__inner{max-width:1020px;margin:0 auto;position:relative;z-index:1;}
.hero__tag{
  display:inline-block;font-size:13px;font-weight:800;color:var(--main-d);
  background:#fff;border:1px solid var(--bd);border-radius:999px;
  padding:7px 18px;margin-bottom:22px;
}
.hero__catch{font-size:46px;line-height:1.4;font-weight:900;color:var(--ink-d);margin-bottom:20px;letter-spacing:.01em;}
.hero__lead{font-size:15.5px;color:var(--sub);margin-bottom:34px;}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero__deco{
  position:absolute;right:-130px;top:-130px;width:430px;height:430px;border-radius:50%;
  border:1px solid rgba(42,96,118,.18);
}
.hero__deco::before,.hero__deco::after{
  content:"";position:absolute;inset:52px;border-radius:50%;
  border:1px solid rgba(42,96,118,.12);
}
.hero__deco::after{inset:110px;border-color:rgba(42,96,118,.08);}

/* ==========================================================================
   制作実績
   ========================================================================== */
.works{background:var(--wash);}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.wcard{
  background:#fff;border:1px solid var(--bd);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.wcard__shot{display:block;text-decoration:none;position:relative;}
.wcard__bar{
  display:flex;gap:5px;align-items:center;
  background:#e6edf1;padding:8px 12px;border-bottom:1px solid var(--bd);
}
.wcard__bar i{width:9px;height:9px;border-radius:50%;background:#c3d0d8;}
.wcard__ph{
  position:relative;aspect-ratio:16/10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:
    radial-gradient(100% 80% at 30% 15%, rgba(140,185,205,.4), transparent 60%),
    linear-gradient(165deg,#dbe8ed,#bfd4dd);
  color:rgba(30,70,90,.45);
}
.wcard__ph .ico{width:40px;height:40px;stroke-width:1.2;}
.wcard__phtxt{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-align:center;line-height:1.5;}
.wcard__ph--img img{width:100%;height:100%;object-fit:cover;object-position:top;}
.wcard__shot:hover .wcard__ph{filter:brightness(1.04);}
.wcard__body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column;}
.wcard__ttl{font-size:18px;font-weight:800;color:var(--ink-d);margin-bottom:10px;line-height:1.5;}
.wcard__desc{font-size:14px;color:var(--sub);margin-bottom:14px;}
.wcard__desc b{color:var(--ink);}
.wcard__tags{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.wcard__tags li{
  font-size:11.5px;font-weight:700;color:var(--main-d);
  background:var(--main-l);border-radius:999px;padding:3px 11px;
}
.wcard__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:14px;font-weight:800;color:var(--main-d);text-decoration:none;
  border-bottom:2px solid var(--main);padding-bottom:2px;
}
.wcard__link:hover{color:var(--main);}

/* ==========================================================================
   選ばれる理由
   ========================================================================== */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.rcard{
  background:#fff;border:1px solid var(--bd);border-radius:14px;
  padding:30px 24px;box-shadow:var(--shadow);text-align:center;
}
.rcard__ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:var(--main-l);color:var(--main-d);margin-bottom:16px;
}
.rcard__ic .ico{width:28px;height:28px;stroke-width:1.4;}
.rcard__ttl{font-size:18px;font-weight:800;color:var(--ink-d);line-height:1.55;margin-bottom:12px;}
.rcard__txt{font-size:14px;color:var(--sub);text-align:left;}

/* ==========================================================================
   制作の流れ
   ========================================================================== */
.flow{background:var(--wash);}
.steps{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  counter-reset:step;
}
.step{
  position:relative;background:#fff;border:1px solid var(--bd);border-radius:14px;
  padding:26px 20px 24px;box-shadow:var(--shadow);text-align:center;
}
.step__no{
  position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;
  background:var(--main);color:#fff;font-weight:900;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px var(--wash);
}
.step__ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;
  background:var(--main-l);color:var(--main-d);margin:8px 0 12px;
}
.step__ic .ico{width:24px;height:24px;stroke-width:1.4;}
.step__ttl{font-size:16.5px;font-weight:800;color:var(--ink-d);margin-bottom:8px;}
.step__txt{font-size:13px;color:var(--sub);text-align:left;}

/* ==========================================================================
   料金
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;max-width:860px;margin:0 auto;}
.pcard{
  background:#fff;border:1px solid var(--bd);border-radius:14px;
  padding:30px 28px;box-shadow:var(--shadow);position:relative;text-align:center;
}
.pcard--feat{border-color:var(--accent);box-shadow:0 8px 26px rgba(201,138,61,.16);}
.pcard__badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:13px;font-weight:800;
  border-radius:999px;padding:4px 18px;white-space:nowrap;
}
.pcard__name{font-size:19px;font-weight:800;color:var(--ink-d);margin-bottom:10px;}
.pcard__price{font-size:44px;font-weight:900;color:var(--main-d);line-height:1.15;}
.pcard__yen{font-size:24px;}
.pcard__unit{font-size:14px;font-weight:700;color:var(--sub);margin-left:4px;}
.pcard__was{font-size:13.5px;color:var(--sub);margin:4px 0 16px;text-decoration:line-through;}
.pcard__list{
  list-style:none;text-align:left;display:flex;flex-direction:column;gap:9px;
  margin:16px 0 14px;font-size:14.5px;
}
.pcard__list li{display:flex;gap:8px;align-items:flex-start;}
.pcard__list .ico{color:var(--main);margin-top:.35em;width:17px;height:17px;stroke-width:2.2;}
.pcard__note{font-size:12.5px;color:var(--sub);text-align:left;}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.contact{
  background:linear-gradient(160deg,var(--main),var(--main-d));color:#fff;
  text-align:center;padding:92px 24px;
}
.contact__en{font-size:12px;letter-spacing:.28em;color:#a9cdd9;font-weight:700;margin-bottom:8px;}
.contact__ttl{font-size:30px;font-weight:900;margin-bottom:14px;}
.contact__txt{font-size:15px;color:#d8e7ec;margin-bottom:32px;}

/* ---- フッター ---- */
.foot{background:#16222a;color:#93a4ae;text-align:center;padding:36px 24px;}
.foot__logo{font-size:16px;font-weight:900;color:#e2eaee;margin-bottom:10px;}
.foot__logo span{color:#7fb3c5;font-weight:700;}
.foot__txt{font-size:12px;margin-bottom:8px;}
.foot__credit{font-size:11px;color:#7d8f9a;margin-bottom:8px;}
.foot__credit a{color:inherit;}
.foot__copy{font-size:11.5px;color:#6f818c;}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width:900px){
  .wgrid,.rgrid{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:28px;}
  .pgrid{grid-template-columns:1fr;max-width:480px;}
}
@media (max-width:768px){
  .pc{display:none;}
  .sp{display:inline;}
  .gnav{display:none;}
  .head__inner{justify-content:space-between;}
  .sec{padding:60px 20px;}
  .sec__ttl{font-size:25px;}
  .hero{padding:64px 20px 72px;}
  .hero__catch{font-size:33px;}
  .hero__cta{flex-direction:column;}
  .hero__cta .btn{width:100%;}
  .steps{grid-template-columns:1fr;}
  .contact__ttl{font-size:25px;}
  .contact .btn{width:100%;}
}