@charset "UTF-8";

/*
Theme Name: Himawari Portfolio
Author: NIKO HANA
Description: フリーランスWeb制作者向けのシンプルなポートフォリオ兼営業用LPテーマ
Version: 1.0
Text Domain: himawari-portfolio
*/
/* ============================================================
DESIGN SYSTEM
メイン：Trust Blue #1B5CB8（アイコンと統一）
アクセント：Himawari Yellow #F5C518（himawarilab ブランド）
背景：White #FFFFFF + Sky Light #EBF3FB
配色比率：白42% : 水色23% : 青24% : 黄11%
============================================================ */
:root {

  /* Core palette */
  --blue:      #1B5CB8;
  --blue-deep: #0F3D82;
  --blue-mid:  #3A7DC9;
  --blue-light:#EBF3FB;
  --blue-pale: #F4F9FF;
  --blue-line: #D4E6F9;
  --yellow:    #F5C518;
  --yellow-deep:#D4A800;
  --yellow-pale:#FFFAE6;
  --white:     #FFFFFF;
  --ink:       #1A2332;
  --ink-soft:  #52616F;
  --ink-light: #8796A5;
  --line:      #DDE8F4;
  --radius:    16px;
  --shadow:    0 4px 20px rgba(27,92,184,0.10);
  --shadow-lg: 0 8px 32px rgba(27,92,184,0.14);
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html {
  scroll-behavior:smooth;
}
body {
  font-family:'Noto Sans JP',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 {
  font-family:'Zen Maru Gothic',sans-serif;
}
a {
  color:inherit;
  text-decoration:none;
}
img {
  max-width:100%;
  display:block;
}
.container {
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}
.section {
  padding:80px 0;
}
@media (max-width:768px) {
  .section {
    padding:52px 0;
  }
}
.center {
  text-align:center;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--blue-deep);
  background:var(--blue-light);
  padding:5px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.eyebrow::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--yellow);
  flex-shrink:0;
}

/* ---------- Section typography ---------- */
.section-title {
  font-size:clamp(22px,3.4vw,32px);
  font-weight:700;
  color:var(--blue-deep);
  margin-bottom:12px;
  line-height:1.5;
}
.section-lead {
  color:var(--ink-soft);
  font-size:15px;
  max-width:540px;
  margin-bottom:44px;
}

/* ---------- Buttons ---------- */
.btn-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--yellow);
  color:var(--ink);
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:700;
  font-size:16px;
  padding:17px 36px;
  border-radius:999px;
  box-shadow:0 6px 20px rgba(213,168,0,0.36);
  border:none;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.btn-cta:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(213,168,0,0.44);
}
.btn-cta.lg {
  font-size:18px;
  padding:20px 44px;
}
.btn-outline {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  color:var(--blue-deep);
  font-weight:700;
  font-size:15px;
  padding:15px 28px;
  border-radius:999px;
  border:1.5px solid var(--blue-line);
}

/* ============================================================
HEADER
============================================================ */
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner {
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}

/* ロゴ：アイコン画像 + テキスト */
.logo {
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-img {
  width:38px;
  height:38px;
  border-radius:8px;
  object-fit:contain;
}
.logo-text {
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:17px;
  color:var(--blue-deep);
}
a.logo {
  text-decoration: none;
  color: inherit;
}
.logo-text span {
  color:var(--yellow-deep);
}
.header-right {
  display:flex;
  align-items:center;
  gap:14px;
}
.header-cta {
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  font-size:13px;
  padding:10px 20px;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(213,168,0,0.28);
}
@media (max-width:600px) {
  .header-cta span {
    display:none;
  }
}

/* ============================================================
HERO
============================================================ */
.hero {
  background:var(--white);
  padding:56px 0 72px;
  overflow:hidden;
  position:relative;
}
.hero::before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  background:var(--blue-pale);
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);
}
@media (max-width:880px) {
  .hero::before {
    display:none;
  }
}
.hero-inner {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
@media (max-width:880px) {
  .hero-inner {
    grid-template-columns:1fr;
    gap:36px;
  }
}

/* キッカー */
.hero-kicker {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.kicker-badge {
  background:var(--blue);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:4px 13px;
  border-radius:999px;
}
.kicker-sub {
  font-size:12px;
  font-weight:700;
  color:var(--blue-mid);
}

/* H1 */
.hero h1 {
  font-size:clamp(24px,4.2vw,40px);
  font-weight:900;
  color:var(--blue-deep);
  line-height:1.45;
  margin-bottom:4px;
}
.h1-line2 {
  display:inline;
  background:linear-gradient(transparent 55%, var(--yellow-pale) 55%);
}

/* 料金バッジ */
.price-badge {
  display:inline-flex;
  align-items:center;
  gap:0;
  background:var(--white);
  border:2px solid var(--yellow);
  border-radius:12px;
  padding:12px 20px;
  margin-top:20px;
  box-shadow:var(--shadow);
}
.price-badge .pl {
  font-size:12px;
  color:var(--ink-soft);
  margin-right:10px;
}
.price-badge .pv {
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:26px;
  color:var(--blue-deep);
}
.price-badge .pu {
  font-size:13px;
  color:var(--ink-soft);
  margin-left:4px;
}

/* 信頼チップ */
.trust-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.chip {
  display:flex;
  align-items:center;
  gap:5px;
  background:var(--blue-light);
  border:1px solid var(--blue-line);
  font-size:12px;
  font-weight:700;
  color:var(--blue-deep);
  padding:6px 13px;
  border-radius:999px;
}

/* CTA */
.hero-cta {
  margin-top:26px;
}
.cta-row {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.cta-notes {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.cta-note {
  font-size:12px;
  color:var(--ink-light);
  display:flex;
  align-items:center;
  gap:4px;
}
.cta-note::before {
  content:"✓";
  color:var(--blue-mid);
  font-weight:900;
}

/* 右ビジュアル */
.hero-visual {
  position:relative;
}

/* アイコン画像をカードの上に重ねる */
.hero-icon-wrap {
  position:absolute;
  top:-36px;
  right:12px;
  z-index:5;
}
.hero-icon-img {
  width:88px;
  height:88px;
  border-radius:16px;
  object-fit:contain;
  background:var(--white);
  box-shadow:0 4px 16px rgba(27,92,184,0.18);
  border:2px solid var(--blue-line);
}
.hero-card {
  background:var(--white);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:24px;
  border:1px solid var(--blue-line);
  margin-top:24px;
}
.hcard-tag {
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--blue-mid);
  background:var(--blue-light);
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:8px;
  display:inline-block;
}
.folder-row {
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--blue-pale);
  border-radius:8px;
  padding:7px 10px;
  font-weight:700;
  font-size:12px;
  color:var(--blue-deep);
  margin-bottom:10px;
}
.photo-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin-bottom:12px;
}
.pt {
  aspect-ratio:1;
  border-radius:5px;
  background:#CBD8EA;
}
.pt:nth-child(2n) {
  background:#B7CDE8;
}
.pt:nth-child(3n) {
  background:#D4E5F5;
}
.hcard-divider {
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:var(--yellow-deep);
  padding:7px 0;
  border-top:1px dashed var(--blue-line);
  border-bottom:1px dashed var(--blue-line);
  margin:0 0 12px;
}
.result-rows {
  display:flex;
  flex-direction:column;
  gap:5px;
}
.rrow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--blue-light);
  border-radius:7px;
  padding:7px 10px;
}
.rrow span {
  font-size:11px;
  font-weight:700;
  color:var(--blue-deep);
}
.rrow .ok {
  color:#27A36D;
}
.hcard-bottom {
  margin-top:12px;
  background:var(--yellow-pale);
  border-radius:8px;
  padding:8px 10px;
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:var(--yellow-deep);
  border:1px solid #F5DF6A;
}

/* ============================================================
TRUST BAND（青帯）
============================================================ */
.trust-band {
  background:var(--blue-deep);
  padding:18px 0;
}
.trust-band-inner {
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
}
.tb-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 28px;
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.tb-item .tbi-num {
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:20px;
  color:var(--yellow);
}
.tb-div {
  width:1px;
  height:32px;
  background:rgba(255,255,255,0.18);
}
@media (max-width:680px) {
  .tb-item {
    padding:8px 14px;
    font-size:12px;
  }
  .tb-div {
    display:none;
  }
}

/* ============================================================
PAIN POINTS
============================================================ */
.pain-sec {
  background:var(--white);
}
.pain-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
@media (max-width:640px) {
  .pain-grid {
    grid-template-columns:1fr;
  }
}
.pain-card {
  background:var(--blue-pale);
  border-radius:var(--radius);
  padding:22px;
  border:1px solid var(--blue-line);
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.pain-icon {
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--blue-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.pain-card h3 {
  font-size:14px;
  font-weight:700;
  color:var(--blue-deep);
  margin-bottom:4px;
}
.pain-card p {
  font-size:13px;
  color:var(--ink-soft);
}
.pain-box {
  margin-top:32px;
  background:var(--blue-deep);
  border-radius:var(--radius);
  padding:28px 32px;
  display:flex;
  align-items:center;
  gap:24px;
}
@media (max-width:600px) {
  .pain-box {
    flex-direction:column;
    gap:14px;
    text-align:center;
    padding:24px 20px;
  }
}
.pain-box .big {
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:40px;
  color:var(--yellow);
  white-space:nowrap;
}
.pain-box p {
  font-size:14px;
  color:#C8D9EE;
  line-height:1.75;
}
.pain-box strong {
  color:#fff;
}

/* ============================================================
ABOUT（青背景）
============================================================ */
.about-sec {
  background:var(--blue);
  border-radius:0;
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
@media (max-width:800px) {
  .about-grid {
    grid-template-columns:1fr;
  }
}
.about-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--yellow);
  background:rgba(245,197,24,0.15);
  padding:5px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.about-eyebrow::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--yellow);
  flex-shrink:0;
}
.about-title {
  color:#fff;
  font-size:clamp(20px,3vw,28px);
  margin-bottom:14px;
}
.about-lead {
  color:#B8D0EA;
  font-size:14px;
  margin-bottom:22px;
}
.about-quote {
  background:rgba(255,255,255,0.1);
  border-left:3px solid var(--yellow);
  border-radius:8px;
  padding:16px 20px;
  font-size:15px;
  font-weight:700;
  color:#fff;
}
.about-steps {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.astep {
  display:flex;
  gap:14px;
  align-items:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:11px;
  padding:14px 16px;
}
.astep-n {
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:18px;
  color:var(--yellow);
  width:26px;
  flex-shrink:0;
}
.astep p {
  font-size:13px;
  color:#D4E5F7;
}
.astep strong {
  color:#fff;
}

/* ============================================================
FLOW
============================================================ */
.flow-sec {
  background:var(--blue-light);
}
.flow-track {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
}
@media (max-width:800px) {
  .flow-track {
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
}
@media (max-width:480px) {
  .flow-track {
    grid-template-columns:1fr;
  }
}
.flow-track::before {
  content:"";
  position:absolute;
  top:42px;
  left:12%;
  right:12%;
  height:2px;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 10px,transparent 10px 18px);
}
@media (max-width:800px) {
  .flow-track::before {
    display:none;
  }
}
.fstep {
  text-align:center;
  padding:0 10px;
}
.fcirc {
  width:84px;
  height:84px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--blue-line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin:0 auto 14px;
  position:relative;
  z-index:2;
  box-shadow:var(--shadow);
}
.ftag {
  display:inline-block;
  font-size:10px;
  font-weight:700;
  color:var(--blue-deep);
  background:var(--yellow-pale);
  border:1px solid #F5DFA8;
  border-radius:999px;
  padding:3px 10px;
  margin-bottom:8px;
}
.fstep h3 {
  font-size:14px;
  font-weight:700;
  color:var(--blue-deep);
  margin-bottom:5px;
}
.fstep p {
  font-size:12px;
  color:var(--ink-soft);
}

/* ============================================================
BEFORE / AFTER
============================================================ */
.ba-sec {
  background:var(--white);
}
.ba-card-wrap {
  background:var(--blue-pale);
  border-radius:20px;
  padding:36px;
  border:1px solid var(--blue-line);
}
@media (max-width:620px) {
  .ba-card-wrap {
    padding:20px 16px;
  }
}
.ba-grid {
  display:grid;
  grid-template-columns:1fr 44px 1fr;
  gap:16px;
  align-items:center;
}
@media (max-width:680px) {
  .ba-grid {
    grid-template-columns:1fr;
  }
}
.ba-before-card {
  border-radius:12px;
  background:#FEF4F4;
  padding:20px;
  border:1.5px dashed #ECC6C6;
}
.ba-after-card {
  border-radius:12px;
  background:#EAF4EA;
  padding:20px;
  border:1.5px solid #B4D9B4;
}
.ba-label {
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  font-size:12px;
  margin-bottom:12px;
}
.ba-before-card .ba-label {
  color:#A33;
}
.ba-after-card .ba-label {
  color:#2A6E2A;
}
.ba-photos {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:8px;
}
.ba-photos span {
  width:34px;
  height:34px;
  border-radius:5px;
  background:#D9C0C0;
  display:block;
}
.ba-photos span:nth-child(2n) {
  transform:rotate(-7deg);
  background:#C9D5E8;
}
.ba-photos span:nth-child(3n) {
  transform:rotate(9deg);
  background:#E0C9B0;
}
.ba-note {
  font-size:11px;
  font-weight:700;
  color:#A33;
}
.ba-arrow {
  font-size:24px;
  color:var(--yellow-deep);
  text-align:center;
}
@media (max-width:680px) {
  .ba-arrow {
    transform:rotate(90deg);
  }
}
.ba-folders {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ba-frow {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  border-radius:7px;
  padding:7px 11px;
  font-size:12px;
  font-weight:700;
  color:var(--blue-deep);
  border:1px solid #C0D9C0;
}
.ba-frow.doc {
  border-color:var(--yellow);
  color:#8A6000;
}
.ba-after-note {
  font-size:11px;
  font-weight:700;
  color:#2A6E2A;
  margin-top:8px;
}

/* ============================================================
PRICING
============================================================ */
.price-sec {
  background:var(--blue-light);
}
.price-inner {
  max-width:620px;
  margin:0 auto;
}
.price-card {
  background:var(--white);
  border:2px solid var(--yellow);
  border-radius:22px;
  padding:44px 40px;
  text-align:center;
  box-shadow:var(--shadow-lg);
  position:relative;
}
@media (max-width:540px) {
  .price-card {
    padding:32px 20px;
  }
}
.price-tag {
  position:absolute;
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  background:var(--yellow);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  padding:5px 18px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 3px 10px rgba(213,168,0,0.3);
}

/* アイコンを料金カード右上 */
.price-icon {
  position:absolute;
  top:16px;
  right:16px;
  width:54px;
  height:54px;
  border-radius:10px;
  object-fit:contain;
  background:var(--blue-light);
  padding:4px;
  border:1px solid var(--blue-line);
}
.price-head {
  font-weight:700;
  color:var(--blue-mid);
  font-size:13px;
  margin-bottom:6px;
}
.price-num {
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:clamp(36px,5.5vw,52px);
  color:var(--blue-deep);
  margin-bottom:4px;
}
.price-num small {
  font-size:18px;
}
.price-range {
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:24px;
}
.price-list {
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:360px;
  margin:0 auto 26px;
}
.price-list li {
  list-style:none;
  font-size:14px;
  display:flex;
  gap:7px;
  align-items:flex-start;
}
.price-list li::before {
  content:"✓";
  color:var(--blue-mid);
  font-weight:900;
  flex-shrink:0;
  margin-top:2px;
}
.price-foot {
  font-size:12px;
  color:var(--ink-light);
  margin-top:14px;
}

/* ============================================================
REASONS（選ばれる理由）
============================================================ */
.reason-sec {
  background:var(--white);
}
.reason-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:820px) {
  .reason-grid {
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:520px) {
  .reason-grid {
    grid-template-columns:1fr;
  }
}
.reason-card {
  background:var(--blue-pale);
  border-radius:var(--radius);
  padding:24px 20px;
  border:1px solid var(--blue-line);
}
.reason-card.feat {
  background:var(--blue-deep);
  border-color:var(--blue-deep);
  grid-column:span 1;
}
.rnum {
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  color:var(--blue-line);
  font-size:32px;
  line-height:1;
  margin-bottom:6px;
}
.reason-card.feat .rnum {
  color:rgba(255,255,255,0.18);
}
.reason-card h3 {
  font-size:14px;
  font-weight:700;
  color:var(--blue-deep);
  margin-bottom:7px;
}
.reason-card.feat h3 {
  color:var(--yellow);
}
.reason-card p {
  font-size:13px;
  color:var(--ink-soft);
}
.reason-card.feat p {
  color:#B8D0EA;
}

/* ============================================================
CASE CHECK（対応案件の確認）
============================================================ */
.case-sec {
  background:var(--white);
}
.case-lead-box {
  max-width:640px;
  margin:0 auto 40px;
  text-align:center;
}
.case-lead-box p {
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.85;
}
.case-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width:900px;
  margin:0 auto 32px;
}
@media (max-width:680px) {
  .case-grid {
    grid-template-columns:1fr;
  }
}
.case-card {
  border-radius:var(--radius);
  padding:28px 26px;
  border:1.5px solid;
}
.case-card.good {
  background:var(--blue-pale);
  border-color:var(--blue-line);
}
.case-card.check {
  background:#FFFCF0;
  border-color:#F0DFA0;
}
.case-card-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.case-badge {
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:999px;
  letter-spacing:.04em;
}
.case-card.good .case-badge {
  background:var(--blue);
  color:#fff;
}
.case-card.check .case-badge {
  background:#E8B800;
  color:#fff;
}
.case-card-head h3 {
  font-size:15px;
  font-weight:700;
  color:var(--blue-deep);
  line-height:1.4;
}
.case-card.check .case-card-head h3 {
  color:#7A5800;
}
.case-list {
  display:flex;
  flex-direction:column;
  gap:9px;
}
.case-item {
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.6;
}
.case-item::before {
  flex-shrink:0;
  margin-top:3px;
  font-size:12px;
  font-weight:900;
}
.case-card.good .case-item::before {
  content:"✓";
  color:var(--blue-mid);
}
.case-card.check .case-item::before {
  content:"？";
  color:#C49000;
}
.case-message {
  max-width:680px;
  margin:0 auto;
  background:var(--blue-light);
  border:1px solid var(--blue-line);
  border-left:4px solid var(--blue);
  border-radius:var(--radius);
  padding:22px 24px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
@media (max-width:560px) {
  .case-message {
    flex-direction:column;
    gap:10px;
  }
}
.case-msg-icon {
  font-size:28px;
  flex-shrink:0;
  line-height:1;
}
.case-msg-body h4 {
  font-size:14px;
  font-weight:700;
  color:var(--blue-deep);
  margin-bottom:6px;
}
.case-msg-body p {
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.75;
}
.case-msg-body .cta-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  font-weight:700;
  color:var(--blue);
  margin-top:10px;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ============================================================
FAQ
============================================================ */
.faq-sec {
  background:var(--blue-light);
}
.faq-wrap {
  max-width:720px;
  margin:0 auto;
}
.faq-item {
  background:var(--white);
  border:1px solid var(--blue-line);
  border-radius:12px;
  margin-bottom:9px;
}
.faq-q {
  display:flex;
  align-items:center;
  gap:11px;
  padding:17px 20px;
  font-weight:700;
  color:var(--blue-deep);
  font-size:14px;
}
.qmark {
  flex-shrink:0;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:var(--ink);
}
.faq-a {
  padding:0 20px 16px 57px;
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.8;
}

/* ============================================================
FINAL CTA
============================================================ */
.final-sec {
  background:var(--blue-deep);
  padding:72px 0;
}
.final-inner {
  max-width:660px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}

/* アイコンを最終CTAにも */
.final-icon {
  width:72px;
  height:72px;
  border-radius:14px;
  object-fit:contain;
  background:rgba(255,255,255,0.12);
  padding:6px;
  border:1px solid rgba(255,255,255,0.2);
  margin:0 auto 18px;
  display:block;
}
.final-inner h2 {
  font-size:clamp(20px,3.4vw,28px);
  font-weight:900;
  color:var(--yellow);
  margin-bottom:12px;
}
.final-inner p {
  color:#B8D0EA;
  font-size:15px;
  margin-bottom:26px;
  line-height:1.8;
}
.final-chips {
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.fchip {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  padding:8px 16px;
  font-size:12px;
  color:#C8D9EE;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:5px;
}
.final-foot {
  font-size:12px;
  color:#627D94;
  margin-top:14px;
}

/* ============================================================
FOOTER
============================================================ */
.site-footer {
  background:var(--ink);
  padding:32px 0;
  text-align:center;
  color:#556677;
  font-size:12px;
}
.footer-logo {
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:900;
  font-size:15px;
  color:#E0EAF5;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.footer-logo-img {
  width:26px;
  height:26px;
  border-radius:5px;
  object-fit:contain;
}

/* ===== お問い合わせページ ===== */
.contact-main {
  background: #F4F9FF;
  min-height: 80vh;
  padding: 64px 0 80px;
}
.contact-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ヘッダー部分 */
.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #0F3D82;
  background: #EBF3FB;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.contact-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F5C518;
  flex-shrink: 0;
}
.contact-title {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 700;
  color: #0F3D82;
  line-height: 1.5;
  margin-bottom: 12px;
}
.contact-lead {
  font-size: 15px;
  color: #52616F;
  line-height: 1.85;
  margin-bottom: 20px;
}
.contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.contact-chip {
  font-size: 12px;
  font-weight: 700;
  color: #1B5CB8;
  background: #fff;
  border: 1px solid #D4E6F9;
  padding: 6px 14px;
  border-radius: 999px;
}

/* フォームボックス */
.contact-form-box {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid #D4E6F9;
  box-shadow: 0 4px 20px rgba(27, 92, 184, 0.08);
  margin-bottom: 16px;
}
@media (max-width: 560px) {
  .contact-form-box {
    padding: 24px 18px;
  }
}
.contact-note {
  font-size: 12px;
  color: #8796A5;
  text-align: center;
}

/* ===== CF7 フォーム要素のスタイル ===== */

/* ラベル */
.contact-form-box .wpcf7-form label,
.contact-form-box .wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.contact-form-box .wpcf7-form p {
  margin-bottom: 18px;
}
.contact-form-box .wpcf7-form label {
  font-size: 13px;
  font-weight: 700;
  color: #1B5CB8;
  margin-bottom: 6px;
  display: block;
}

/* テキスト・メール・電話 入力欄 */
.contact-form-box .wpcf7-form input[type="text"],
.contact-form-box .wpcf7-form input[type="email"],
.contact-form-box .wpcf7-form input[type="tel"],
.contact-form-box .wpcf7-form input[type="url"],
.contact-form-box .wpcf7-form select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #D4E6F9;
  border-radius: 10px;
  font-size: 14px;
  color: #1A2332;
  background: #F4F9FF;
  transition: border-color .15s, background .15s;
  outline: none;
  box-sizing: border-box;
}
.contact-form-box .wpcf7-form input[type="text"]:focus,
.contact-form-box .wpcf7-form input[type="email"]:focus,
.contact-form-box .wpcf7-form input[type="tel"]:focus,
.contact-form-box .wpcf7-form select:focus {
  border-color: #1B5CB8;
  background: #fff;
}

/* テキストエリア */
.contact-form-box .wpcf7-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #D4E6F9;
  border-radius: 10px;
  font-size: 14px;
  color: #1A2332;
  background: #F4F9FF;
  resize: vertical;
  min-height: 140px;
  transition: border-color .15s, background .15s;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}
.contact-form-box .wpcf7-form textarea:focus {
  border-color: #1B5CB8;
  background: #fff;
}

/* 送信ボタン */
.contact-form-box .wpcf7-form input[type="submit"] {
  display: block;
  width: 100%;
  padding: 16px;
  background: #F5C518;
  color: #1A2332;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(213, 168, 0, 0.34);
  transition: transform .15s, box-shadow .15s;
  margin-top: 8px;
}
.contact-form-box .wpcf7-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(213, 168, 0, 0.42);
}

/* バリデーションエラー */
.contact-form-box .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #C0392B;
  margin-top: 4px;
  display: block;
}
.contact-form-box .wpcf7-not-valid {
  border-color: #E8A0A0 !important;
  background: #FFF5F5 !important;
}

/* 送信完了メッセージ */
.contact-form-box .wpcf7-mail-sent-ok,
.contact-form-box .wpcf7-acceptance-missing {
  border: none !important;
  background: #EBF3FB;
  border-left: 4px solid #1B5CB8 !important;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #0F3D82;
  margin-top: 16px;
}
.contact-form-box .wpcf7-mail-sent-ng {
  border: none !important;
  background: #FFF5F5;
  border-left: 4px solid #E8A0A0 !important;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: #C0392B;
  margin-top: 16px;
}

/* スピナー（送信中） */
.contact-form-box .wpcf7-spinner {
  margin-left: 10px;
  vertical-align: middle;
}

/* ===== 導入事例セクション ===== */
.smk-case-study {
  background: #FFFAE6;
}
.smk-case-study__card {
  display: flex;
  gap: 0;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #D4E6F9;
  box-shadow: 0 4px 20px rgba(27, 92, 184, 0.08);
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}

/* 左帯 */
.smk-case-study__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1B5CB8;
  padding: 32px 28px;
  min-width: 130px;
  flex-shrink: 0;
}
.smk-case-study__status {
  font-size: 11px;
  font-weight: 700;
  color: #1B5CB8;
  background: #F5C518;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: .06em;
}
.smk-case-study__icon {
  font-size: 36px;
  line-height: 1;
}
.smk-case-study__category {
  font-size: 12px;
  font-weight: 700;
  color: #B8D0EA;
  text-align: center;
  line-height: 1.5;
}

/* 右本文 */
.smk-case-study__body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.smk-case-study__client {
  font-size: 18px;
  font-weight: 700;
  color: #0F3D82;
  margin: 0;
}
.smk-case-study__location {
  font-size: 12px;
  font-weight: 700;
  color: #3A7DC9;
  margin: 0;
}
.smk-case-study__desc {
  font-size: 14px;
  color: #52616F;
  line-height: 1.8;
  margin: 4px 0 8px;
}
.smk-case-study__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.smk-case-study__points li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #1B5CB8;
  background: #EBF3FB;
  border: 1px solid #D4E6F9;
  padding: 5px 12px;
  border-radius: 999px;
}
.smk-case-study__points li::before {
  content: "✓";
  color: #3A7DC9;
  font-weight: 900;
  font-size: 11px;
}

/* スマホ */
@media (max-width: 600px) {
  .smk-case-study__card {
    flex-direction: column;
  }
  .smk-case-study__left {
    flex-direction: row;
    justify-content: flex-start;
    padding: 16px 20px;
    gap: 12px;
    min-width: unset;
  }
  .smk-case-study__icon {
    font-size: 24px;
  }
  .smk-case-study__category {
    text-align: left;
  }
  .smk-case-study__body {
    padding: 20px;
  }
}
/* ============================================================
   写真まとめるくん LP — 動画セクション
   shashin.css に追記してください
   クラスプレフィックス: shashin-video-
   ============================================================ */

/* ---------- セクション全体 ---------- */
.shashin-video-sec {
  background: #ffffff;
  padding: 80px 20px 88px;
}

.shashin-video-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---------- 見出しエリア ---------- */
.shashin-video-heading {
  text-align: center;
}

.shashin-video-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #1B5CB8;
  background: #EBF3FB;
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 14px;
}

.shashin-video-title {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

/* 「写真まとめるくん」部分を青で強調したい場合は <span class="shashin-video-accent"> で囲む */
.shashin-video-accent {
  color: #1B5CB8;
}

.shashin-video-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  margin: 0;
}

/* ---------- スマホフレーム ---------- */
.shashin-video-frame-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.shashin-video-phone-frame {
  /* PC: 最大幅 420px / スマホ: 幅100% - 左右16pxずつ */
  width: min(420px, calc(100% - 32px));
  background: #1a1a1a;
  border-radius: 40px;
  padding: 14px 10px 20px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.06),
    0 16px 48px rgba(27, 92, 184, 0.12),
    inset 0 0 0 2px #2a2a2a;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ノッチ */
.shashin-video-notch {
  width: 90px;
  height: 22px;
  background: #111;
  border-radius: 0 0 16px 16px;
  flex-shrink: 0;
}

/* 動画画面部分 */
.shashin-video-screen {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  /* CLS対策: 9:16アスペクト比を確保 */
  aspect-ratio: 9 / 16;
  background: #000;
}

.shashin-video-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

/* ホームバー */
.shashin-video-homebar {
  width: 100px;
  height: 4px;
  background: #444;
  border-radius: 100px;
  flex-shrink: 0;
}

/* ---------- CTAボタン ---------- */
.shashin-video-cta-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.shashin-video-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1B5CB8;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(27, 92, 184, 0.28);
  transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
  letter-spacing: 0.04em;
  /* スムーズスクロールはJS or CSS scroll-behavior で対応 */
}

.shashin-video-cta-btn:hover,
.shashin-video-cta-btn:focus-visible {
  background: #1449A0;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(27, 92, 184, 0.36);
  color: #ffffff;
  text-decoration: none;
}

.shashin-video-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(27, 92, 184, 0.2);
}

.shashin-video-cta-note {
  font-size: 12px;
  color: #888;
  margin: 0;
  line-height: 1.6;
}

/* ---------- スムーズスクロール（既存にある場合は不要） ---------- */
html {
  scroll-behavior: smooth;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 480px) {
  .shashin-video-sec {
    padding: 60px 0 72px;
  }

  .shashin-video-inner {
    gap: 32px;
  }

  .shashin-video-phone-frame {
    border-radius: 32px;
    padding: 12px 8px 16px;
  }

  .shashin-video-notch {
    width: 72px;
    height: 18px;
  }

  .shashin-video-cta-btn {
    font-size: 15px;
    padding: 15px 28px;
  }
}