/* 明るいポップ配色（公式サイトの空・海・砂浜イメージのオマージュ、常にライト表示） */
:root{
  --ground:#fffdf4;        /* 砂浜がかった白 */
  --card:#ffffff;
  --ink:#22456e;           /* 紺色の文字（空の濃紺を明るく） */
  --ink-soft:#5f7796;
  --sky:#2fa8e1;           /* 空色：メインカラー */
  --sky-soft:#e3f4fc;
  --sun:#ffd23f;           /* ひまわり色：アクセント */
  --sun-soft:#fff6d9;
  --orange:#f78d2d;        /* 元気なオレンジ：ボタン・CTA */
  --orange-soft:#ffeedd;
  --pink:#f2688c;          /* さくら色：見出し差し色 */
  --leaf:#2f9e6b;          /* メリット・OK */
  --leaf-soft:#e2f5ea;
  --caution:#d98a1f;       /* デメリット・注意 */
  --caution-soft:#fdf1dc;
  --line:#dbe7f0;
  --link:#1d7fbf;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","BIZ UDGothic","Yu Gothic","Noto Sans JP",sans-serif;
  line-height:1.85;
  font-size:16px;
  overflow-x:clip; /* ヒーローの全幅背景装飾によるはみ出し防止 */
}
a{color:var(--link)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* ヘッダー */
.unofficial{
  display:block;background:var(--sun-soft);color:var(--ink);
  font-size:.78rem;text-align:center;padding:6px 12px;
  border-bottom:1px solid var(--sun);
}
header.site{
  background:var(--card);
  border-bottom:4px solid var(--sky);
}
.head-inner{
  max-width:860px;margin:0 auto;padding:18px 20px 10px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
}
.site-name{font-size:1.35rem;font-weight:800;letter-spacing:.02em;color:var(--sky);text-decoration:none}
.site-name .dot{color:var(--pink)}
.site-tag{font-size:.8rem;color:var(--ink-soft)}
nav.global{
  max-width:860px;margin:0 auto;padding:0 20px 14px;
  display:flex;flex-wrap:wrap;gap:6px 8px;
}
nav.global a{
  text-decoration:none;font-size:.88rem;font-weight:700;
  color:var(--ink);
  border:2px solid var(--sky-soft);border-radius:999px;
  padding:5px 16px;background:var(--sky-soft);
}
nav.global a:hover{border-color:var(--sky)}
nav.global a[aria-current="page"]{
  color:#fff;border-color:var(--sky);background:var(--sky);
}
nav.global a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* 見出し */
h1,h2,h3{line-height:1.4;text-wrap:balance}
h2{
  font-size:1.3rem;margin:2.6em 0 .8em;
  padding-left:.6em;border-left:6px solid var(--sky);
  border-bottom:3px dotted var(--sun);
  padding-bottom:.25em;
}
h3{font-size:1.05rem;margin:1.8em 0 .5em}
.eyebrow{
  display:inline-block;font-size:.75rem;font-weight:700;
  letter-spacing:.14em;color:var(--pink);margin-bottom:.4em;
  background:#fdeaef;border-radius:999px;padding:2px 14px;
}

/* ヒーロー：空と雲のイメージ */
.hero{
  padding:48px 0 34px;position:relative;
}
.hero::before{
  content:"";position:absolute;inset:0 -100vw 0 -100vw;z-index:-1;
  background:
    radial-gradient(ellipse 120px 45px at 18% 22%, #ffffff 60%, transparent 61%),
    radial-gradient(ellipse 90px 36px at 78% 14%, #ffffff 60%, transparent 61%),
    radial-gradient(ellipse 70px 30px at 60% 75%, #ffffffaa 60%, transparent 61%),
    linear-gradient(180deg, var(--sky-soft) 0%, var(--ground) 92%);
}
.hero-art{margin-top:22px;border-radius:18px;overflow:hidden;box-shadow:0 4px 0 var(--line);line-height:0}
.hero-art svg{display:block;width:100%;height:auto}
.hero h1{font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:800;margin:.2em 0 .5em}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p.lead{max-width:38em;color:var(--ink-soft);margin:0 0 1.4em}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.badge{
  background:var(--card);border:2px solid var(--sun);border-radius:999px;
  padding:6px 16px;font-size:.85rem;font-weight:700;
  box-shadow:0 2px 0 var(--sun);
}
.badge b{color:var(--leaf)}

/* 要点ボックス */
.tldr{
  background:var(--card);border:2px solid var(--sky);border-radius:18px;
  padding:18px 22px;margin:1.4em 0;
  box-shadow:0 3px 0 var(--sky-soft);
}
.tldr h2{margin:.2em 0 .6em;border:none;padding:0;font-size:1.05rem;color:var(--sky)}
.tldr p{margin:.4em 0;font-size:.95rem}
.updated{font-size:.78rem;color:var(--ink-soft)}

/* カード */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:1.2em 0}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:18px 20px;
  box-shadow:0 3px 0 var(--line);
}
.card h3{margin:.1em 0 .4em;font-size:1rem;color:var(--sky)}
.card p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.card .to{display:inline-block;margin-top:.7em;font-size:.85rem;font-weight:700;color:var(--orange)}

/* CTA：公式のオレンジボタン風 */
.cta{
  background:var(--sun-soft);border:2px solid var(--sun);border-radius:18px;
  padding:22px 24px;margin:2em 0;
}
.cta p{margin:.3em 0}
.cta a{
  display:inline-block;background:var(--orange);color:#fff;
  text-decoration:none;font-weight:800;
  border-radius:999px;padding:9px 22px;margin:4px 6px 4px 0;
  box-shadow:0 3px 0 #d9741a;
}
.cta a:hover{opacity:.92}
.cta .note{font-size:.8rem;color:var(--ink-soft)}
.cta .note a{all:unset;color:var(--link);text-decoration:underline;cursor:pointer}

/* メリデメ */
ul.merit,ul.demerit{list-style:none;padding:0;margin:1em 0;display:grid;gap:10px}
ul.merit li,ul.demerit li{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px 14px 48px;position:relative;font-size:.95rem;
  box-shadow:0 2px 0 var(--line);
}
ul.merit li::before,ul.demerit li::before{
  position:absolute;left:14px;top:13px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  font-size:.8rem;font-weight:800;color:#fff;
}
ul.merit li::before{content:"◎";background:var(--leaf)}
ul.demerit li::before{content:"！";background:var(--caution)}
ul.merit li b{color:var(--leaf)}
ul.demerit li b{color:var(--caution)}
li .src{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:.3em}

/* FAQ */
.faq dt{
  font-weight:800;margin:1.4em 0 .3em;
  padding-left:1.9em;position:relative;
}
.faq dt::before{
  content:"Q";position:absolute;left:0;top:.1em;
  width:1.4em;height:1.4em;border-radius:50%;
  background:var(--sky);color:#fff;
  display:grid;place-items:center;font-size:.85em;
}
.faq dd{margin:0 0 1em;font-size:.95rem}

/* 向き不向き */
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:1.2em 0}
.fit section{border-radius:18px;padding:18px 20px}
.fit .yes{background:var(--leaf-soft)}
.fit .no{background:var(--caution-soft)}
.fit h3{margin:0 0 .5em}
.fit .yes h3{color:var(--leaf)}
.fit .no h3{color:var(--caution)}
.fit ul{margin:0;padding-left:1.3em;font-size:.92rem}
.fit li{margin:.3em 0}

.honesty{
  border:3px dashed var(--pink);border-radius:18px;
  padding:18px 22px;margin:1.6em 0;background:var(--card);
}
.honesty p{margin:.4em 0;font-size:.95rem}

/* ステップ */
ol.steps{counter-reset:step;list-style:none;padding:0;margin:1em 0;display:grid;gap:10px}
ol.steps li{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px 14px 52px;position:relative;font-size:.95rem;
  box-shadow:0 2px 0 var(--line);
}
ol.steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:14px;top:13px;
  width:26px;height:26px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;
}

/* 運営者プロフィール */
.owner-profile{display:flex;align-items:center;gap:18px;margin:1em 0}
.owner-profile img{
  width:110px;height:110px;border-radius:50%;
  border:4px solid var(--sun);background:#fdf3cf;
  box-shadow:0 3px 0 var(--line);flex-shrink:0;
}
.owner-profile p{margin:.2em 0;font-size:.95rem}
.owner-profile .name{font-weight:800;font-size:1.05rem;color:var(--sky)}

table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.9rem}
.table-scroll{overflow-x:auto}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;background:var(--card)}
th{background:var(--sky-soft);font-size:.85rem;white-space:nowrap}

footer.site{
  margin-top:64px;border-top:4px solid var(--sky);
  background:var(--sky-soft);
  padding:26px 0 40px;font-size:.8rem;color:var(--ink-soft);
}
footer.site p{margin:.3em 0}