*{box-sizing:border-box}body{margin:0;background:#fdfafc;color:#332d38;font:16px/1.85 system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}a{color:#8b356d}a:hover{text-decoration:none}.site-header{background:#fff;border-bottom:1px solid #eedee9}.container{width:min(1060px,92%);margin:auto}.header-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0}.brand{font-size:1.24rem;font-weight:800;color:#73305d;text-decoration:none}.brand small{display:block;font-size:.68rem;font-weight:400;color:#8a7684;letter-spacing:.04em}.nav{display:flex;gap:15px;flex-wrap:wrap}.nav a{text-decoration:none;font-size:.9rem;font-weight:600}.hero{padding:58px 0 44px;background:linear-gradient(135deg,#f9e7f1,#f6f0fb)}.eyebrow{color:#8b356d;font-size:.84rem;font-weight:700}.hero h1{line-height:1.4;font-size:clamp(1.8rem,4vw,2.9rem);margin:9px 0 18px}.lead{font-size:1.07rem;max-width:760px}.btn{display:inline-block;background:#81345f;color:white!important;padding:10px 22px;border-radius:8px;font-weight:700;text-decoration:none}.main{padding:36px 0 65px}.section-title{font-size:1.45rem;border-left:5px solid #c1769f;padding-left:13px;margin:38px 0 17px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:white;border:1px solid #eadde6;border-radius:12px;padding:21px;box-shadow:0 3px 18px #57304408}.card h3{margin:0 0 9px;line-height:1.55;font-size:1.03rem}.card p{color:#6e6170;font-size:.91rem}.card a{font-weight:700}.tag{display:inline-block;font-size:.76rem;color:#8b356d;background:#f8edf3;border-radius:20px;padding:2px 11px;margin-bottom:9px}.article{max-width:790px;background:#fff;border:1px solid #eadde6;border-radius:12px;padding:clamp(20px,5vw,45px);margin:auto}.article h1{font-size:clamp(1.5rem,4vw,2.3rem);line-height:1.48}.article h2{border-bottom:2px solid #f3dce9;padding-bottom:7px;margin-top:34px;font-size:1.28rem}.article p{line-height:2.05}.note{background:#f9f1f6;padding:15px 18px;border-radius:8px;font-size:.91rem}.breadcrumbs{font-size:.84rem;color:#817282;margin:0 0 15px}.ad-notice{padding:8px 0;background:#faf3f8;text-align:center;font-size:.79rem;color:#71526a}.footer{background:#403444;color:#f9f3f8;padding:34px 0}.footer a{color:#fff}.footer-nav{display:flex;flex-wrap:wrap;gap:15px;font-size:.85rem}.footer small{color:#e0cedd}.link-list{padding-left:22px}.link-list li{margin:7px 0}.quiz label{display:block;background:#fbf5fa;border:1px solid #ecdaea;border-radius:8px;padding:10px;margin:10px 0;cursor:pointer}.quiz button{border:none;cursor:pointer}.quiz-result{background:#f9edf4;padding:20px;border-radius:10px}.muted{color:#736774;font-size:.89rem}@media(max-width:760px){.header-wrap{display:block}.nav{padding-top:10px;gap:11px}.nav a{font-size:.82rem}.grid{grid-template-columns:1fr}.hero{padding:38px 0}.main{padding-top:22px}.article{border:0;padding:22px 17px}.container{width:min(100%,92%)}}
.detail-section{margin:1.8rem 0}.article table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;margin:1rem 0}.article th,.article td{border:1px solid #e9dce6;padding:.75rem;text-align:left;min-width:85px}.article th{background:#faf0f7}.article ol,.article ul{line-height:1.85}.topic-hub{margin:2rem 0}

/* v5: visual editorial system */
:root{--accent:#87466f;--ink:#392c3b;--line:#eadce6}
.hero{background:linear-gradient(120deg,#fbe5f0 0%,#f8eef8 58%,#f1e9f9 100%)}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);align-items:center;column-gap:24px}
.hero-layout>img{grid-column:2;grid-row:1/6;width:100%;max-height:330px;object-fit:cover;border-radius:26px;box-shadow:0 20px 50px #73305d18}
.hero-layout>h1,.hero-layout>.eyebrow,.hero-layout>.lead,.hero-layout>.btn{grid-column:1}
.hero-layout h1{font-weight:850;letter-spacing:.015em}
.card{padding:0;overflow:hidden;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #57304419}
.card>h3,.card>p,.card>.tag{margin-left:18px;margin-right:18px}
.card>h3{margin-top:8px}.card>p{margin-bottom:20px}
.card-cover{width:100%;aspect-ratio:16/8.5;object-fit:cover;display:block;background:#f6eaf2}
.card>.tag{margin-top:16px}
.article-cover{display:block;width:100%;aspect-ratio:16/8.2;object-fit:cover;border-radius:18px;margin:22px 0 20px}
.article h1{margin-bottom:12px}
.article h2{background:linear-gradient(90deg,#fbf0f6,transparent);padding:8px 10px;border-left:5px solid #bb83a6;border-bottom:0;border-radius:6px}
.article p{line-height:1.9}.article li{margin-bottom:6px}
.reading-guide{background:#faf3f8;border:1px solid #e9d6e3;border-radius:16px;padding:17px 20px;margin:22px 0}.reading-guide p{margin:.3rem 0 0;font-size:.92rem}
.visual-guide{display:flex;align-items:center;gap:20px;background:#f8f4fb;border:1px solid #e9e0ef;border-radius:18px;padding:18px 23px;margin:26px 0}
.visual-guide-icon{font-size:2.2rem;display:grid;place-items:center;flex:0 0 72px;height:72px;border-radius:20px;background:white;color:#aa618e}
.visual-guide p{font-size:.9rem;margin:.1rem 0;color:#6b5e69}
.quicknav{margin:0 0 32px;background:#fff;border:1px solid #ebdae7;padding:24px;border-radius:20px}
.quicknav h2{font-size:1.25rem;margin:0 0 14px}.quicknav-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quicknav-list a{padding:14px 10px;border-radius:14px;background:#f9edf4;text-align:center;font-weight:700;text-decoration:none}
.topic-hub .card{padding-top:16px}
@media(max-width:760px){.hero-layout{display:flex;flex-direction:column;align-items:flex-start}.hero-layout>img{order:-1;width:100%;max-height:230px;margin-bottom:18px}.hero{padding:24px 0 36px}.quicknav-list{grid-template-columns:repeat(2,1fr)}.quicknav{padding:18px}.visual-guide{gap:12px;padding:14px}.visual-guide-icon{flex-basis:52px;height:52px;font-size:1.5rem}.article-cover{margin:18px 0}.card>h3{font-size:1rem}}

.v5-special{margin:22px 0;background:#fff9fc;border:1px solid #f0dce8;border-radius:18px;padding:18px}.v5-special h2{margin:0 0 15px!important}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.steps-grid>div{background:white;border:1px solid #e8dbe7;border-radius:14px;padding:16px}.steps-grid b,.steps-grid span{display:block}.steps-grid b{color:#823c65}.steps-grid span{color:#695b68;font-size:.88rem;margin-top:7px}


/* v6: slightly more glamorous visual refresh */
:root{
  --rose:#b44d83;
  --rose-deep:#8b356d;
  --lav:#8b78c7;
  --gold:#d6a05e;
  --gold-soft:#f1d7aa;
  --cream:#fff8fb;
  --hero1:#ffe8f4;
  --hero2:#f6edff;
  --hero3:#fff4e6;
}
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(255,233,244,.85), transparent 18%),
    radial-gradient(circle at 88% 5%, rgba(241,215,170,.38), transparent 16%),
    radial-gradient(circle at 80% 26%, rgba(139,120,199,.12), transparent 24%),
    linear-gradient(180deg,#fffbfd 0%,#fff9fc 46%,#fdf8fc 100%);
}
a{color:var(--rose-deep)}
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(145%) blur(9px);
  border-bottom:1px solid #f0d9e7;
  box-shadow:0 10px 28px rgba(114,58,94,.06);
}
.brand{
  font-size:1.28rem;
  color:#7c255d;
}
.brand::before{
  content:"✦";
  color:var(--gold);
  margin-right:.42rem;
  font-size:.92rem;
  vertical-align:.04rem;
}
.nav a{
  padding:7px 10px;
  border-radius:999px;
}
.nav a:hover{
  background:#fbf0f6;
}
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.75), transparent 20%),
    radial-gradient(circle at 83% 22%, rgba(255,255,255,.58), transparent 15%),
    linear-gradient(125deg,var(--hero1) 0%,var(--hero2) 57%,var(--hero3) 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.65);
}
.hero::before,.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero::before{
  width:380px;height:380px;right:-120px;top:-110px;
  background:radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 68%);
}
.hero::after{
  width:240px;height:240px;left:-80px;bottom:-70px;
  background:radial-gradient(circle, rgba(255,247,229,.8), rgba(255,247,229,0) 70%);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--rose-deep);
  background:rgba(255,255,255,.66);
  border:1px solid #f2dce9;
  padding:.38rem .78rem;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(119,58,92,.06);
}
.eyebrow::before{content:"♡";color:var(--gold)}
.hero h1{
  color:#4a2842;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.lead{
  color:#5d4d5e;
  max-width:44rem;
}
.btn{
  background:linear-gradient(135deg,#c0558f,#8b356d 66%,#75315d 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 12px 26px rgba(139,53,109,.22), inset 0 1px 0 rgba(255,255,255,.32);
  border-radius:999px;
  padding:12px 24px;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(139,53,109,.26), inset 0 1px 0 rgba(255,255,255,.32)}
.home-hero-art, .hero-layout>img{
  border:1px solid rgba(255,255,255,.82);
  background:linear-gradient(180deg,#fffdfd,#fff5fa);
  box-shadow:0 22px 60px rgba(129,52,95,.12),0 10px 20px rgba(214,160,94,.10);
}
.quicknav{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,249,252,.98));
  border:1px solid #efd9e8;
  box-shadow:0 14px 34px rgba(119,58,92,.06);
}
.quicknav h2,.section-title{
  color:#5f3352;
}
.quicknav-list a{
  position:relative;
  background:linear-gradient(180deg,#fff8fc,#f9edf4);
  border:1px solid #efd8e6;
  box-shadow:0 8px 18px rgba(119,58,92,.05);
}
.quicknav-list a:hover{background:linear-gradient(180deg,#fffdfd,#f9f0f7)}
.note,.reading-guide,.v5-special{
  background:linear-gradient(180deg,#fffafb,#fff4f8);
  border:1px solid #f0dce7;
  box-shadow:0 10px 25px rgba(119,58,92,.04);
}
.section-title{
  position:relative;
  border-left:0;
  padding-left:0;
  margin-top:44px;
}
.section-title::before{
  content:"";
  display:block;
  width:76px;height:6px;
  margin-bottom:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold),#f0b6cf 50%,#be8fda 100%);
  box-shadow:0 4px 14px rgba(212,160,94,.18);
}
.card{
  border:1px solid #edd9e8;
  background:linear-gradient(180deg,#ffffff 0%,#fffafc 100%);
  box-shadow:0 14px 32px rgba(119,58,92,.06);
  border-radius:18px;
}
.card::after{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--gold),#efb2cb 50%,#c7a3e2);
  opacity:.75;
}
.card-cover{
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.95), transparent 24%),
    linear-gradient(135deg,#fde7f1,#f4edfe 66%,#fff4e8);
}
.card h3 a{text-decoration:none}
.card p{color:#655864}
.tag{
  background:linear-gradient(180deg,#fff8fb,#f8ecf3);
  border:1px solid #f0d8e6;
  color:var(--rose-deep);
}
.article{
  border:1px solid #ecd9e7;
  border-radius:22px;
  box-shadow:0 20px 48px rgba(119,58,92,.06);
  background:linear-gradient(180deg,#ffffff 0%,#fffdfd 100%);
}
.article-cover{
  border:1px solid #f1dfe8;
  box-shadow:0 18px 42px rgba(119,58,92,.08);
  background:linear-gradient(135deg,#fde7f1,#f4edfe 66%,#fff4e8);
}
.article h1{color:#4e2742}
.article h2{
  color:#5f3352;
  background:linear-gradient(90deg,#fff1f7,rgba(255,255,255,.3));
  border-left:6px solid #cb7ba7;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.6);
}
.article table{border-radius:16px;overflow:hidden;background:#fff}
.article th{
  background:linear-gradient(180deg,#fff4f9,#faedf5);
  color:#5c3351;
}
.visual-guide{
  background:linear-gradient(135deg,#fbf5fe,#fff7fa);
  box-shadow:0 12px 28px rgba(119,58,92,.05);
}
.visual-guide-icon{
  background:linear-gradient(180deg,#fff,#fff7fb);
  border:1px solid #f2ddeb;
  box-shadow:0 8px 20px rgba(119,58,92,.06);
  color:#b05b8e;
}
.steps-grid>div{
  background:linear-gradient(180deg,#fff,#fff8fb);
  box-shadow:0 8px 18px rgba(119,58,92,.04);
}
.footer{
  background:linear-gradient(180deg,#4a3444,#3c2b39);
  position:relative;
}
.footer::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent, rgba(241,215,170,.7), transparent);
  margin-bottom:18px;
}
@media(max-width:760px){
  .site-header{position:static}
  .brand{font-size:1.18rem}
  .card{border-radius:16px}
  .article{border-radius:18px}
}

/* v7 explanatory graphics: accessible, responsive and fully editable */
.info-visual{margin:26px 0 32px;padding:24px;border:1px solid #eed5e4;border-radius:20px;background:linear-gradient(125deg,#fff6fb,#f9f3ff 55%,#fff8ee);box-shadow:0 12px 28px #7b426012}.info-visual>h2{margin:0 0 18px!important;padding:0 0 10px!important;border:0!important;background:none!important;font-size:1.2rem}.info-visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.info-visual-card{position:relative;background:#fff;border:1px solid #eadde8;border-radius:14px;padding:15px;min-width:0}.info-visual-card strong{display:block;font-size:.94rem;color:#70345b}.info-visual-card p{font-size:.84rem;line-height:1.65;margin:7px 0 0;color:#665a66}.info-visual-number{display:block;font-size:.8rem;font-weight:800;letter-spacing:.08em;color:#b86e93;margin-bottom:6px}.info-visual-summary{margin:16px 0 0!important;padding:13px 15px;background:#fff;border-radius:12px;font-size:.9rem!important;line-height:1.75!important;color:#574758}.article>p,.article>section>p{max-width:70ch}@media(max-width:680px){.info-visual{padding:16px 13px}.info-visual-grid{grid-template-columns:1fr}.info-visual-card{padding:12px 15px}.info-visual-summary{font-size:.86rem!important}}

/* v9: inviting romantic quiz details */
.quiz fieldset{border:1px solid #efdae8;border-radius:18px;padding:18px;margin:18px 0;background:linear-gradient(145deg,#fffafd,#fff5fa)}
.quiz legend{font-weight:750;color:#71365d;padding:0 8px}
.quiz label{border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.quiz label:hover{border-color:#dba4c7;box-shadow:0 5px 16px #ad6a930d}
.quiz input{accent-color:#b64b86}
.quiz .btn{margin-top:9px}
.quiz-result{font-weight:650;color:#743657;background:linear-gradient(135deg,#fff0f8,#f8efff);border:1px solid #ecd4e7}

/* v9.1: トップの記事カードは画像・空白も含め全面クリック可能 */
.whole-card-link{position:relative;cursor:pointer}
.whole-card-link h3 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.whole-card-link:focus-within{outline:3px solid #a84b84;outline-offset:3px;box-shadow:0 14px 34px rgba(139,53,109,.20)}
.whole-card-link h3 a:focus-visible{outline:0}
.whole-card-link:hover h3 a{text-decoration:underline;text-underline-offset:3px}
@media(hover:none){.whole-card-link:hover{transform:none}}