/*
Theme Name: COCO-NICO
Theme URI: https://coco-nico.jp/
Author: coco-nico
Description: 韓国人男性との国際結婚相談所 COCO-NICO のオリジナルテーマ。LP・ブログ・固定ページに対応。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: coconico
*/

:root{
  --rose-deep:#A8465C;
  --rose:#C4788A;
  --rose-pale:#F3DDE1;
  --rose-mist:#FAEEF0;
  --cream:#FDF8F5;
  --card:#FFFFFF;
  --ink:#3A2E2C;
  --ink-soft:#7C6A66;
  --line:#E8DAD5;
  --shadow:0 2px 18px rgba(168,70,92,.07);
  --serif:"Shippori Mincho B1",serif;
  --sans:"Zen Kaku Gothic New",sans-serif;
  --script:"Parisienne",cursive;
}
*{box-sizing:border-box}
/* html 直指定だと iOS でスクロール位置の復元が壊れるため :focus-within に限定 */
@media(prefers-reduced-motion:no-preference){
  html:focus-within{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
svg{max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:980px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px;margin-left:auto;margin-right:auto}

section{padding:76px 0}
@media(max-width:640px){section{padding:52px 0}}

/* ── 見出し ───────────────────────── */
.script{
  font-family:var(--script);
  color:var(--rose);
  font-size:1.9rem;
  line-height:1.2;
  margin:0 0 6px;
}
h2{
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(1.5rem,4.2vw,2.05rem);
  line-height:1.55;
  letter-spacing:.02em;
  margin:0 0 14px;
}
h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.12rem;
  line-height:1.6;
  margin:0 0 8px;
}
.lead{color:var(--ink-soft);margin:0 0 40px;font-size:.97rem}

/* ── ヒーロー ─────────────────────── */
.hero{
  position:relative;
  padding:64px 0 72px;
  background:
    radial-gradient(58% 68% at 8% 6%, var(--rose-mist) 0%, rgba(250,238,240,0) 62%),
    radial-gradient(46% 52% at 96% 84%, #F7E9EC 0%, rgba(247,233,236,0) 60%),
    var(--cream);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:32px}}

.hero h1{
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(2.3rem,7.4vw,3.5rem);
  line-height:1.32;
  letter-spacing:.01em;
  margin:0 0 22px;
}
.hero h1 .dot{color:var(--rose-deep)}

.tagline{
  display:inline-block;
  background:var(--rose-deep);
  color:#fff;
  font-size:.9rem;
  font-weight:500;
  padding:7px 20px;
  border-radius:999px;
  margin-bottom:16px;
}
.hero p.sub{margin:0 0 28px;font-size:1rem;color:var(--ink-soft)}

.hero-photo{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 30px rgba(168,70,92,.10);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}

/* ── ボタン ───────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:16px 40px;border-radius:999px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.btn-line{background:#06C755;color:#fff}
.btn-line:hover{background:#05a948}
.btn-ghost{background:transparent;color:var(--rose-deep);border:1.5px solid var(--rose)}
.btn-ghost:hover{background:var(--rose-mist)}
.btn:focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-note{font-size:.82rem;color:var(--ink-soft);margin:12px 0 0}

/* ── カード ───────────────────────── */
.card{
  background:var(--card);
  border-radius:16px;
  padding:30px 28px;
  box-shadow:var(--shadow);
}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.cards-3,.cards-2{grid-template-columns:1fr}}
.card p{margin:0;font-size:.93rem;color:var(--ink-soft)}
.icon{width:46px;height:46px;margin-bottom:14px;color:var(--rose)}

/* ── 共感 ─────────────────────────── */
.tint{background:var(--rose-mist)}
.feel-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.feel-list li{
  background:#fff;border-radius:12px;padding:15px 20px;
  font-size:.96rem;position:relative;padding-left:44px;
}
.feel-list li::before{
  content:"";position:absolute;left:20px;top:23px;
  width:9px;height:9px;border-radius:50%;background:var(--rose-pale);
  border:2px solid var(--rose);
}

/* ── 仲人 ─────────────────────────── */
.nakodo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.nakodo{grid-template-columns:1fr}}
.nakodo .card{text-align:left}
.face{
  width:112px;height:112px;border-radius:50%;
  margin-bottom:16px;object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 3px 14px rgba(168,70,92,.16);
}
.role{font-size:.82rem;color:var(--rose-deep);margin:0 0 2px}
.nakodo-name{font-family:var(--serif);font-size:1.6rem;font-weight:800;margin:0 0 12px}
.nakodo-name span{font-size:.9rem;font-weight:400;margin-left:8px;color:var(--ink-soft)}
.meta{list-style:none;padding:0;margin:0 0 14px;font-size:.88rem;color:var(--ink-soft)}
.meta li{padding:5px 0;border-bottom:1px dotted var(--line)}
.meta li:last-child{border-bottom:none}

/* ── 流れ ─────────────────────────── */
.flow{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:0}
.flow li{
  counter-increment:step;
  position:relative;
  padding:0 0 34px 62px;
  border-left:1.5px solid var(--rose-pale);
  margin-left:19px;
}
.flow li:last-child{border-left-color:transparent;padding-bottom:0}
.flow li::before{
  content:counter(step);
  position:absolute;left:-19px;top:-2px;
  width:38px;height:38px;border-radius:50%;
  background:var(--rose-deep);color:#fff;
  font-family:var(--serif);font-size:1rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.flow p{margin:0;font-size:.93rem;color:var(--ink-soft)}

/* ── 安心 ─────────────────────────── */
.safe{display:grid;gap:14px}
.safe div{
  background:#fff;border-left:3px solid var(--rose);
  border-radius:0 12px 12px 0;padding:18px 22px;
}
.safe strong{display:block;font-family:var(--serif);font-size:1rem;margin-bottom:4px}
.safe p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* ── 料金 ─────────────────────────── */
.price-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.price-table th,.price-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
.price-table th{width:44%;font-weight:500;background:var(--rose-mist);font-family:var(--serif)}
.price-table tr:last-child th,.price-table tr:last-child td{border-bottom:none}
.price-table td{font-weight:700;font-family:var(--serif);font-size:1.05rem}
.price-table td.zero{color:var(--rose-deep)}

/* ── 正直パート ───────────────────── */
.honest{background:#F7F3EF}
.honest .card{border:1px solid var(--line);box-shadow:none}

/* ── FAQ ──────────────────────────── */
details{
  background:#fff;border-radius:12px;margin-bottom:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
summary{
  cursor:pointer;padding:19px 52px 19px 24px;
  font-family:var(--serif);font-size:1rem;font-weight:600;
  position:relative;list-style:none;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:24px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:1.5px solid var(--rose);border-bottom:1.5px solid var(--rose);
  transform:rotate(45deg);transition:transform .2s ease;
}
details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
details p{margin:0;padding:0 24px 22px;font-size:.93rem;color:var(--ink-soft)}
summary:focus-visible{outline:3px solid var(--rose-deep);outline-offset:-3px}

/* ── 最終CTA ──────────────────────── */
.final{
  background:linear-gradient(165deg,#FAEEF0 0%,#F5E2E6 100%);
  text-align:center;
}
.final .script{font-size:2.2rem}

/* ── フッター ─────────────────────── */
footer{background:#fff;padding:52px 0 40px;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-soft)}
.logo{font-family:var(--serif);font-size:1.25rem;letter-spacing:.14em;color:var(--ink);margin:0 0 6px}
.footer-meta{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
@media(max-width:640px){.footer-meta{grid-template-columns:1fr}}
.footer-meta dt{font-weight:700;color:var(--ink);margin-top:10px;font-size:.82rem}
.footer-meta dd{margin:0 0 4px}
.fine{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:.78rem;line-height:1.8}

/* ── 追記が必要な箇所のマーカー ───── */
.todo{
  background:#FFF4D6;color:#8A6100;
  padding:1px 7px;border-radius:4px;
  font-size:.85em;font-weight:700;font-family:var(--sans);
}

/* ── モーション ───────────────────── */
@media(prefers-reduced-motion:no-preference){
  .hero-grid > *{animation:rise .7s cubic-bezier(.22,.8,.3,1) both}
  .hero-grid > *:nth-child(2){animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}


/* ══ 投稿・固定ページ ══════════════ */
.page-head{background:var(--rose-mist);padding:56px 0 44px;text-align:center}
.page-head h1{font-family:var(--serif);font-weight:800;font-size:clamp(1.5rem,4.6vw,2.1rem);line-height:1.5;margin:0}
.page-head .crumb{font-size:.82rem;color:var(--ink-soft);margin:0 0 10px}
.page-head .crumb a{text-decoration:none}
.page-head .crumb a:hover{text-decoration:underline}

.entry{padding:56px 0 72px}
.entry-body{font-size:1rem;line-height:2.05}
.entry-body h2{font-size:1.35rem;margin:52px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--rose-pale)}
.entry-body h3{font-size:1.1rem;margin:36px 0 10px;color:var(--rose-deep)}
.entry-body p{margin:0 0 22px}
.entry-body ul,.entry-body ol{margin:0 0 22px;padding-left:1.4em}
.entry-body li{margin-bottom:8px}
.entry-body a{color:var(--rose-deep)}
.entry-body img{border-radius:12px;margin:8px 0 24px}
.entry-body blockquote{margin:0 0 22px;padding:16px 22px;background:var(--rose-mist);border-left:3px solid var(--rose);border-radius:0 10px 10px 0}
.entry-body blockquote p:last-child{margin-bottom:0}
.entry-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.94rem}
.entry-body th,.entry-body td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.entry-body th{background:var(--rose-mist);font-weight:500}
.entry-meta{font-size:.84rem;color:var(--ink-soft);margin:0 0 30px}

.post-list{display:grid;gap:18px;padding:0;margin:0;list-style:none}
.post-list a{
  display:block;background:#fff;border-radius:14px;padding:24px 26px;
  box-shadow:var(--shadow);text-decoration:none;
  transition:box-shadow .18s ease;
}
.post-list a:hover{box-shadow:0 4px 26px rgba(168,70,92,.13)}
.post-list h2{font-size:1.08rem;margin:0 0 6px;line-height:1.6}
.post-list time{font-size:.8rem;color:var(--ink-soft)}
.post-list p{margin:8px 0 0;font-size:.9rem;color:var(--ink-soft)}

.pager{display:flex;gap:10px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;border-radius:999px;
  background:#fff;color:var(--ink);text-decoration:none;font-size:.92rem;
  box-shadow:var(--shadow);
}
.pager .page-numbers.current{background:var(--rose-deep);color:#fff}

.cta-inline{
  background:var(--rose-mist);border-radius:16px;padding:32px 30px;
  text-align:center;margin:52px 0 0;
}
.cta-inline h2{font-size:1.2rem;margin:0 0 8px;border:none;padding:0}
.cta-inline p{font-size:.92rem;color:var(--ink-soft);margin:0 0 20px}

/* ══ ヘッダーナビ ══════════════════ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(253,248,245,.94);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.site-title{font-family:var(--serif);font-size:1rem;letter-spacing:.1em;text-decoration:none;color:var(--ink);white-space:nowrap}
.site-title small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.04em;color:var(--ink-soft)}
.nav{display:flex;align-items:center;gap:22px}
.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-size:.9rem}
.nav a{text-decoration:none}
.nav a:hover{color:var(--rose-deep)}
.nav .btn{padding:10px 22px;font-size:.88rem}
@media(max-width:860px){
  .nav ul{display:none}
  .site-header .wrap{height:58px}
  .nav .btn{padding:9px 18px;font-size:.82rem}
}

/* ══ 追従CTA（スマホ） ═════════════ */
.sticky-cta{display:none}
@media(max-width:640px){
  .sticky-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line);
  }
  .sticky-cta .btn{flex:1;padding:14px 8px;font-size:.92rem}
  body{padding-bottom:76px}
}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:100;background:#fff;padding:10px 18px;border-radius:8px}

/* ══ フッターSNS ═══════════════════ */
.sns{display:flex;gap:12px;list-style:none;padding:0;margin:22px 0 0;flex-wrap:wrap}
.sns a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px 9px 15px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  text-decoration:none;font-size:.86rem;color:var(--ink);
  transition:border-color .18s ease,color .18s ease;
}
.sns a:hover{border-color:var(--rose);color:var(--rose-deep)}
.sns a:focus-visible{outline:3px solid var(--rose-deep);outline-offset:2px}
.sns svg{width:19px;height:19px;flex:0 0 19px;color:var(--rose)}

/* ══ LINE QRコード ═════════════════ */
.qr{margin:34px auto 26px;text-align:center}
.qr img{
  width:150px;height:150px;margin:0 auto 10px;
  padding:12px;background:#fff;border-radius:14px;
  box-shadow:var(--shadow);
}
.qr p{margin:0;font-size:.82rem;color:var(--ink-soft)}
/* スマホでは自分の画面のQRは読み取れないため非表示 */
@media(max-width:640px){.qr{display:none}}

/* ══ Snow Monkey Forms ═════════════ */
.smf-form{font-family:var(--sans);color:var(--ink)}

.smf-item{
  background:#fff;border-radius:14px;padding:22px 24px;
  margin-bottom:16px;box-shadow:var(--shadow);
}
.smf-item__col--label{margin-bottom:10px}
.smf-label,.smf-item__col--label label{
  font-family:var(--serif);font-weight:600;font-size:1rem;
}
.smf-item__require,.smf-item__col--label .smf-item__require{
  display:inline-block;margin-left:10px;padding:2px 10px;
  border-radius:999px;background:var(--rose-deep);color:#fff;
  font-size:.7rem;font-weight:700;vertical-align:middle;
}
.smf-item__description{font-size:.84rem;color:var(--ink-soft);margin-top:6px}

.smf-text-control__control,
.smf-email-control__control,
.smf-tel-control__control,
.smf-textarea-control__control,
.smf-select-control__control{
  width:100%;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--cream);
  border:1.5px solid var(--line);border-radius:10px;
  padding:13px 15px;
  transition:border-color .16s ease,background-color .16s ease;
  -webkit-appearance:none;appearance:none;
}
.smf-textarea-control__control{min-height:140px;line-height:1.8;resize:vertical}
.smf-select-control{position:relative;display:block}
.smf-select-control__control{padding-right:42px;cursor:pointer}
.smf-select-control__toggle{color:var(--rose)}

.smf-text-control__control:focus,
.smf-email-control__control:focus,
.smf-tel-control__control:focus,
.smf-textarea-control__control:focus,
.smf-select-control__control:focus{
  outline:none;background:#fff;border-color:var(--rose);
  box-shadow:0 0 0 3px var(--rose-mist);
}

/* チェックボックス・ラジオ */
.smf-checkboxes-control__control,
.smf-radio-buttons-control__control{display:grid;gap:10px}
.smf-label__text{font-family:var(--sans);font-weight:400;font-size:.95rem;line-height:1.7}
.smf-checkbox-control__control,
.smf-radio-control__control{accent-color:var(--rose-deep);width:18px;height:18px;margin-right:8px}
.smf-checkbox-control__label,
.smf-radio-control__label{display:flex;align-items:flex-start;cursor:pointer}
.smf-checkbox-control__label a,
.smf-radio-control__label a{color:var(--rose-deep)}

/* ボタン */
.smf-action{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.smf-button-control__control,
.smf-submit-button-control__control{
  font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:16px 46px;border-radius:999px;border:none;cursor:pointer;
  background:var(--rose-deep);color:#fff;
  transition:background-color .18s ease;
}
.smf-button-control__control:hover,
.smf-submit-button-control__control:hover{background:#93374B}
.smf-button-control__control:focus-visible,
.smf-submit-button-control__control:focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px}
.smf-back-button-control__control{
  background:transparent;color:var(--rose-deep);
  border:1.5px solid var(--rose);
}
.smf-back-button-control__control:hover{background:var(--rose-mist)}

/* エラー・完了 */
.smf-error-messages{
  background:#FDECEF;border-left:3px solid var(--rose-deep);
  border-radius:0 10px 10px 0;padding:12px 16px;margin-top:10px;
  font-size:.88rem;color:#8E2B41;
}
.smf-form--completed,
.smf-complete-content{
  background:var(--rose-mist);border-radius:16px;
  padding:38px 30px;text-align:center;font-size:1rem;line-height:2;
}

/* 確認画面 */
.smf-form--confirm .smf-item{background:var(--rose-mist);box-shadow:none}
.smf-form--confirm .smf-item__col--controls{font-size:1rem}

@media(max-width:640px){
  .smf-item{padding:18px 18px}
  .smf-action{flex-direction:column}
  .smf-action .smf-button-control__control,
  .smf-action .smf-submit-button-control__control,
  .smf-action .smf-back-button-control__control{width:100%;padding:16px 20px}
}