/* ===== 下層ページ共通 ===== */
.hd nav a[aria-current]:not(.btn){color:var(--blue);font-weight:700}
.page-hd{background:linear-gradient(180deg,var(--sky) 0%,#f4f9fe 100%);padding:48px 0 44px;position:relative;overflow:hidden}
.page-hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.page-hd .en{color:var(--blue);font-size:13px;letter-spacing:.2em;font-weight:700}
.page-hd h1{font-size:clamp(26px,3.4vw,36px);margin:4px 0 10px}
.page-hd p{color:var(--sub)}
.page-hd img{width:150px;flex-shrink:0}
.crumb{font-size:12px;color:var(--sub);margin-bottom:14px}
.crumb a{color:var(--blue)}
.anchor-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px}
.anchor-nav a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:14px;font-weight:500}
.anchor-nav a:hover{border-color:var(--blue);color:var(--blue)}

/* サービス詳細 */
.svc-detail{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:48px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.svc-detail:last-child{border-bottom:0}
.svc-detail .head .num{color:var(--blue);font-weight:700;font-size:15px}
.svc-detail .head h2{font-size:28px;margin:4px 0 12px}
.svc-detail .head .ico{width:64px;height:64px;border-radius:18px;background:var(--sky);display:grid;place-items:center}
.svc-detail .head .ico svg{width:34px;height:34px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-detail .head .from{margin-top:16px;font-size:14px;color:var(--sub)}
.svc-detail .head .from b{font-family:"Zen Maru Gothic";font-size:22px;color:var(--ink)}
.prob-sol{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-bottom:22px}
.prob-sol .box{border-radius:var(--r);padding:18px 20px}
.prob-sol .box h3{font-size:15px;margin-bottom:6px}
.prob-sol .prob{background:#f6f7f9}
.prob-sol .prob h3{color:var(--sub)}
.prob-sol .sol{background:var(--sky)}
.prob-sol .sol h3{color:var(--blue)}
.prob-sol ul{list-style:none;font-size:15px}
.prob-sol li{padding-left:1.1em;text-indent:-1.1em}
.prob-sol .prob li::before{content:"・"}
.prob-sol .sol li::before{content:"✓ ";color:var(--blue);font-weight:700}
.prob-sol .arrow{align-self:center;width:14px;height:14px;border-top:3px solid var(--blue);border-right:3px solid var(--blue);transform:rotate(45deg)}
.menu-list{display:flex;flex-wrap:wrap;gap:8px}
.menu-list span{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 14px;font-size:14px}
.menu-list span em{font-style:normal;color:var(--blue);font-weight:700;margin-left:6px}

/* 制作例 */
.filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.filter button{font:inherit;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;cursor:pointer;color:var(--ink)}
.filter button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.work-case{display:grid;grid-template-columns:1fr 1.2fr;background:#fff;border-radius:20px;overflow:hidden;margin-bottom:28px;box-shadow:0 2px 0 var(--line)}
.work-case .thumb{min-height:260px;background:repeating-linear-gradient(45deg,#f1f6fb,#f1f6fb 10px,#e7f0f8 10px,#e7f0f8 20px);display:grid;place-items:center;color:#9bb0c4;font-size:13px}
.work-case .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.work-case .thumb:has(img){background:#fff3dc}
.work-case .tags{margin-bottom:4px}
.work-case .body{padding:30px 32px}
.work-case h2{font-size:22px;margin:4px 0 14px}
.work-case dl{display:grid;grid-template-columns:5.5em 1fr;gap:8px 12px;font-size:15px;margin:16px 0 18px}
.work-case dt{color:var(--blue);font-weight:700}
.work-case[hidden]{display:none}

/* 料金 */
.plan-block{margin-bottom:56px;scroll-margin-top:90px}
.plan-block > h2{font-size:24px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.plan-block > h2::before{content:"";width:8px;height:28px;border-radius:4px;background:var(--blue)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;position:relative;display:flex;flex-direction:column}
.plan.rec{border:2px solid var(--blue);box-shadow:0 10px 24px rgba(43,120,194,.12)}
.plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--yellow);font-weight:700;font-size:13px;padding:3px 16px;border-radius:999px;white-space:nowrap}
.plan h3{font-size:20px}
.plan .desc{color:var(--sub);font-size:14px;margin:6px 0 14px;flex:1}
.plan .yen{font-family:"Zen Maru Gothic";font-weight:700;font-size:28px;color:var(--blue)}
.plan .yen small{font-size:14px}
.plan .yen s{font-size:13px;color:var(--sub);font-weight:400;margin-left:6px}
.ptable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.ptable th,.ptable td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:15px}
.ptable tr:last-child th,.ptable tr:last-child td{border-bottom:0}
.ptable th{font-weight:500;background:#f7fbfe;width:55%}
.ptable td{font-weight:700;font-family:"Zen Maru Gothic";text-align:right}
.ptable td small{display:block;font-family:"Noto Sans JP";font-weight:400;font-size:12px;color:var(--sub)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.note-box{background:#fffaf0;border:1px solid #f5e2b0;border-radius:var(--r);padding:22px 26px}
.note-box h3{font-size:17px;margin-bottom:8px}
.note-box ul{padding-left:1.2em;font-size:15px}
.sub-h{font-size:17px;margin:26px 0 12px}

/* お問い合わせ */
.contact-in{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;position:relative}
.field{margin-bottom:22px;border:0}
.field > label,.field > legend{display:block;font-weight:700;margin-bottom:8px}
.req,.opt{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-left:8px;vertical-align:2px}
.req{background:#e8524a;color:#fff}
.opt{background:#e6ebf0;color:var(--sub)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea,.field select{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fbfdff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(43,120,194,.15)}
.field textarea{min-height:160px;resize:vertical}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.checks label{display:flex;align-items:center;gap:8px;background:var(--sky);border-radius:10px;padding:10px 12px;font-size:15px;cursor:pointer}
.checks input{width:18px;height:18px;accent-color:var(--blue);flex-shrink:0}
.hint{font-size:13px;color:var(--sub);margin-top:6px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.privacy{font-size:13px;color:var(--sub);background:#f7f9fb;border-radius:10px;padding:14px 16px;margin-bottom:20px}
.form .btn{width:100%;font-size:17px;padding:16px;border:0;cursor:pointer;font-family:inherit}
.side-card{background:var(--sky);border-radius:20px;padding:26px;text-align:center}
.side-card img{width:150px;margin:0 auto 8px}
.side-card h3{font-size:18px;margin-bottom:8px}
.side-card .tel{display:block;font-family:"Zen Maru Gothic";font-weight:700;font-size:24px;color:var(--blue);margin:6px 0}
.side-card p{font-size:14px;color:var(--sub)}
.side-card + .side-card{margin-top:18px;background:#fff;border:1px solid var(--line);text-align:left}
.side-card ol{padding-left:1.3em;font-size:14px}
.thanks{text-align:center;padding:80px 0}
.thanks img{width:200px;margin:0 auto 20px}
.thanks h1{font-size:28px;margin-bottom:14px}
.thanks p{color:var(--sub);margin-bottom:28px}

@media (max-width:960px){
  .svc-detail{grid-template-columns:1fr;gap:20px}
  .plans{grid-template-columns:1fr;max-width:460px;margin:0 auto 18px}
  .plan.rec{order:-1}
  .contact-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .page-hd{padding:32px 0}
  .page-hd img{width:90px}
  .prob-sol{grid-template-columns:1fr}
  .prob-sol .arrow{justify-self:center;transform:rotate(135deg)}
  .work-case{grid-template-columns:1fr}
  .work-case .thumb{min-height:200px}
  .work-case .body{padding:22px 20px}
  .two{grid-template-columns:1fr}
  .ptable th,.ptable td{padding:12px 14px;font-size:14px}
  .form{padding:22px 18px}
  .checks{grid-template-columns:1fr}
}
.was-in{color:#8794a3;font-size:.85em;margin-left:8px;text-decoration-color:#e8524a;text-decoration-thickness:1.5px}
.menu-list span em{margin-left:4px}
.svc-detail .head .from .op-tag{margin-top:6px}

/* 制作例ギャラリー */
.case-gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:18px 20px 18px}
.case-gallery a{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#f1f6fb}
.case-gallery img{width:100%;height:100%;object-fit:cover;transition:.25s}
.case-gallery a:hover img{transform:scale(1.05)}
.work-case .thumb:has(img[src*="stream"]) img{object-fit:cover}
@media (max-width:760px){.case-gallery{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 14px 14px}}