/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 16 2026 | 16:13:37 */
/* ============================================================
   【軽量版】統合CSS ① 全ページ共通
   2026-10-17 作成：28974「統合カスタムCSS（25ファイル統合版）」を
   使用状況で整理・分割した軽量版。全ページで読み込む（投稿・アーカイブ等はこれだけ）。
   元に戻す：このシリーズ（【軽量版】で始まる8件）を無効化し、
   28974 を有効化する。
   ============================================================ */
.ksvy-cover{font-family:'Noto Sans JP',sans-serif;max-width:720px;margin:28px auto 14px;color:#2b2320;border:1px solid #d8cabb;border-radius:8px;overflow:hidden;}
.ksvy-cover *{box-sizing:border-box;}
.ksvy-cover-top{padding:20px 22px 16px;background:linear-gradient(100deg,#fff,#fbf3f4);}
.ksvy-cover-kicker{font-size:11px;letter-spacing:.14em;color:#b08a48;font-weight:700;margin-bottom:6px;}
.ksvy-cover-ttl{font-size:19px;font-weight:700;line-height:1.5;margin:0;}
.ksvy-cover-ttl b{color:#7d3a4a;}
.ksvy-cover-meta{display:flex;flex-wrap:wrap;border-top:1px solid #e6ddd4;}
.ksvy-cover-meta div{flex:1 1 33%;padding:11px 14px;border-right:1px solid #f1ebe3;}
.ksvy-cover-meta div:last-child{border-right:none;}
.ksvy-cover-meta span{display:block;font-size:10px;letter-spacing:.1em;color:#b08a48;font-weight:700;margin-bottom:3px;}
.ksvy-cover-meta strong{font-weight:500;font-size:13px;line-height:1.5;}
@media(max-width:480px){
.ksvy-cover-meta div{flex:1 1 50%;}
}
.ksvy{font-family:'Noto Sans JP',sans-serif;max-width:720px;margin:28px auto;color:#2b2320;line-height:1.85;}
.ksvy *{box-sizing:border-box;}
.ksvy-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(100deg,#fff,#fbf3f4);border:1px solid #e6ddd4;border-bottom:none;border-radius:8px 8px 0 0;}
.ksvy-no{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#7d3a4a;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:12px;text-align:center;line-height:1.2;}
.ksvy-q{font-size:16px;font-weight:700;line-height:1.4;}
.ksvy-type{font-size:11px;color:#b08a48;font-weight:700;letter-spacing:.08em;}
.ksvy-body{border:1px solid #e6ddd4;border-radius:0 0 8px 8px;padding:20px 18px;background:#fff;}
.ksvy-lead{margin:0 0 14px;font-size:14px;line-height:1.95;color:#5a4f49;}
.ksvy-lead b,.ksvy-point b{color:#2b2320;}
.ksvy-bar{display:grid;grid-template-columns:9.5em 1fr 3.8em;align-items:center;gap:10px;margin:9px 0;font-size:13px;}
.ksvy-track{background:#f0e8e0;border-radius:7px;height:15px;overflow:hidden;}
.ksvy-fill{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#9c5462,#7d3a4a);}
.ksvy-fill.is-top{background:linear-gradient(90deg,#b08a48,#caa05a);}
.ksvy-val{text-align:right;font-weight:700;}
.ksvy-point{margin:14px 0 0;padding:11px 14px;background:#faf6ee;border-radius:8px;font-size:13px;line-height:1.85;color:#5a4f49;}
.ksvy-point b{color:#7d3a4a;}
.ksvy-cross{margin:18px 0 0;}
.ksvy-cross-ttl{font-size:12px;font-weight:700;color:#7d3a4a;margin:0 0 8px;padding-left:9px;border-left:3px solid #b08a48;}
.ksvy-table{width:100%;border-collapse:collapse;font-size:12px;}
.ksvy-table th,.ksvy-table td{padding:6px 5px;text-align:center;border-bottom:1px solid #f1ebe3;}
.ksvy-table th{background:#fbf6f1;color:#5a4f49;font-size:10.5px;font-weight:700;}
.ksvy-table th:first-child,.ksvy-table td:first-child{text-align:left;}
.ksvy-table td.ov{background:#f6f1ec;font-weight:700;}
.ksvy-table td.hi{background:#fbeef0;color:#7d3a4a;font-weight:700;}
.ksvy-note{margin:12px 0 0;font-size:10.5px;color:#a99;line-height:1.7;}
@media(max-width:480px){
.ksvy-bar{grid-template-columns:1fr auto;}
.ksvy-bar .ksvy-track{grid-column:1/-1;order:3;}
.ksvy-table{font-size:11px;}
.ksvy-table th,.ksvy-table td{padding:5px 3px;}
}
:root {
--c:#FAF7F2; --iv:#F3EDE4; --gold:#A07850; --glt:#C4A882;
--gpl:#EDE1CF; --ink:#2C2318; --mid:#5C4E38; --soft:#9A8A72;
--bdr:#DDD0BC; --wh:#FDFAF6; --dk:#1A1208; --dkm:#241A0E;
--top:#C85820; --topb:#FEF2EA; --topbr:rgba(200,88,32,.18);
--mdn:#2E6E46; --mdnb:#E6F5ED; --mdnbr:rgba(46,110,70,.18);
--bas:#2A4878; --basb:#E8EFF8; --basbr:rgba(42,72,120,.18);
--nv-top:     #C85820;
--nv-mid:     #2E6E46;
--nv-base:    #2A4878;
--nv-gold:    #A07850;
--nv-glt:     #C4A882;
--nv-dk:      #1A1208;
--nv-iv:      #F3EDE4;
--nv-gpl:     #EDE1CF;
--nv-bdr:     #DDD0BC;
--nv-wh:      #FDFAF6;
--nv-mid-ink: #5C4E38;
--nv-ink:     #2C2318;
--nv-soft:    #9A8A72;
--bnav:64px;
}
body {
font-family:'Noto Sans JP',sans-serif;
background:var(--c); color:var(--ink);
font-size:14px; line-height:1.7;
-webkit-font-smoothing:antialiased;
padding-bottom:calc(var(--bnav) + 24px);
}
@keyframes nv-ring-pulse {
0%   { box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
50%  { box-shadow: 0 0 0 6px rgba(255,255,255,.0);  }
100% { box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
}
@keyframes nv-card-in {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: none; }
}
.nv-sc-en   {
font-family: 'Cormorant Garamond', serif; font-style: italic;
font-size: 10px; letter-spacing: .18em; display: block; margin-bottom: 2px;
}
.nv-sc-jp   {
font-family: 'Noto Serif JP', serif;
font-size: 15px; font-weight: 400; letter-spacing: .07em;
color: var(--nv-ink); line-height: 1.3;
}
.tag  { font-size:10px; padding:2px 9px; border-radius:20px; letter-spacing:.04em; }
.fc.dim { opacity:.28; pointer-events:none; }
.tc.hide { display:none; }
.pp-mode-btn {
flex:1; min-width:calc(50% - 4px); padding:10px 8px; border-radius:10px;
border:1.5px solid var(--bdr); background:var(--wh);
cursor:pointer; text-align:center; transition:border-color .18s, background .18s;
outline:none; -webkit-tap-highlight-color:transparent;
}
.pp-mode-btn.active { border-color:var(--gold); background:var(--iv); }
.pp-dot.pp-inactive .dot-core { fill:var(--gpl); stroke:var(--bdr); opacity:.35; }
.pp-dot.pp-active .dot-core   { fill:rgba(160,120,80,.55); stroke:var(--glt); }
.pp-dot.pp-best .dot-ring     { opacity:.65; stroke-width:2; animation:pp-pulse 1.3s ease-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes pp-pulse {
0%   { transform:scale(1);   opacity:.65; }
100% { transform:scale(2.4); opacity:0;   }
}
.pp-mode-title { font-family:'Noto Serif JP',serif; font-size:14.5px; font-weight:400; letter-spacing:.08em; color:var(--ink); margin-bottom:6px; line-height:1.4; }
.pp-mode-desc  { font-size:11.5px; color:var(--mid); line-height:1.75; letter-spacing:.02em; margin-bottom:12px; padding:8px 10px; background:var(--iv); border-radius:6px; border-left:2px solid var(--gold); }
.pp-point-item  { display:flex; align-items:flex-start; gap:8px; opacity:0; transform:translateX(-8px); transition:opacity .3s ease, transform .3s ease; }
.pp-point-dot-badge { width:10px; height:10px; border-radius:50%; background:rgba(160,120,80,.5); flex-shrink:0; margin-top:4px; box-shadow:0 0 0 2px var(--gpl); }
.pp-point-item.best-point .pp-point-dot-badge { background:var(--gold); box-shadow:0 0 0 2px rgba(160,120,80,.25), 0 0 6px rgba(160,120,80,.35); }
.pp-point-name { font-size:12.5px; font-weight:500; color:var(--ink); letter-spacing:.04em; display:block; margin-bottom:1px; }
.pp-point-note { font-size:11px; color:var(--mid); line-height:1.55; letter-spacing:.02em; }
.pp-amount-hint { margin-top:12px; padding:10px 12px; background:var(--dk); border-radius:8px; font-size:11.5px; color:rgba(196,168,130,.85); letter-spacing:.03em; line-height:1.65; position:relative; overflow:hidden; }
.pp-amount-hint::before { content:''; position:absolute; inset:0 0 auto 0; height:1.5px; background:linear-gradient(90deg,var(--glt),var(--gold),var(--glt)); }
.pp-amount-hint strong { color:var(--glt); font-weight:500; }
.pp-special-row { display:flex; align-items:flex-start; gap:8px; opacity:0; transform:translateX(-8px); transition:opacity .3s ease, transform .3s ease; }
.pp-special-ico { font-size:18px; flex-shrink:0; margin-top:1px; line-height:1; }
.kaolig-picks img { max-width: 100%; display: block; }
@keyframes kp-orb-float {
0%,100% { transform: translate3d(0,0,0) scale(1); }
33%     { transform: translate3d(24px,-18px,0) scale(1.05); }
66%     { transform: translate3d(-14px,22px,0) scale(0.97); }
}
@keyframes kp-fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
:root {
--kp-bg:         #faf8f3;
--kp-bg-warm:    #f5f1e8;
--kp-paper:      #ffffff;
--kp-ink:        #0a0a0a;
--kp-ink-soft:   #2a2a28;
--kp-ink-mid:    #4a4a47;
--kp-ink-faint:  #6e6e6a;
--kp-line:       #e2dfd5;
--kp-line-soft:  #ede9dd;
--kp-sand:       #efe9d9;
--kp-dark:       #14110d;
--kp-pink-50:    #fbeaf0;
--kp-pink-200:   #efb8cd;
--kp-blue-50:    #e6f1fb;
--kp-blue-200:   #abc8e8;
--kp-serif:      'Noto Serif JP', serif;
--kp-sans:       'Noto Sans JP', sans-serif;
--kp-en:         'Cormorant Garamond', serif;
--kp-ease:       cubic-bezier(0.22, 1, 0.36, 1);
--c:    #faf8f3;
--iv:   #f5f1e8;
--gold: #9a7848;
--glt:  #c4a882;
--gpl:  #ede9dd;
--ink:  #0a0a0a;
--mid:  #4a4a47;
--soft: #6e6e6a;
--bdr:  #e2dfd5;
--wh:   #ffffff;
--dk:   #14110d;
--top:  #C85820;
--mdn:  #2E6E46;
--bas:  #2A4878;
--nv-top:     #C85820;
--nv-mid:     #2E6E46;
--nv-base:    #2A4878;
--nv-gold:    #A07850;
--nv-glt:     #C4A882;
--nv-dk:      #1A1208;
--nv-iv:      #F3EDE4;
--nv-gpl:     #EDE1CF;
--nv-bdr:     #DDD0BC;
--nv-wh:      #FDFAF6;
--nv-mid-ink: #5C4E38;
--nv-ink:     #2C2318;
--nv-soft:    #9A8A72;
--bnav:       64px;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--kp-sans);
background: var(--kp-bg);
color: var(--kp-ink);
font-size: 14px;
line-height: 1.7;
font-weight: 300;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
padding-bottom: calc(var(--bnav) + 24px);
}
@keyframes kl-orb-float {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33%       { transform: translate3d(14px, -10px, 0) scale(1.03); }
66%       { transform: translate3d(-10px, 14px, 0) scale(.98); }
}
.kl-bc-row.kl-selected { background: var(--kp-bg-warm); }
.kl-path-content.kl-show { display: block; animation: kl-fadein .48s cubic-bezier(.2,0,.2,1); }
.kl-after                { display: none; }
.kl-after.kl-show        { display: block; animation: kl-fadein .5s cubic-bezier(.2,0,.2,1) .1s both; }
@keyframes kl-fadein {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: none; }
}
.pp-mode-btn { flex: 1; min-width: calc(50% - 4px); padding: 12px 8px; border-radius: 0; border: 1px solid var(--kp-line); background: var(--kp-paper); cursor: pointer; text-align: center; transition: border-color .2s, background .2s; outline: none; -webkit-tap-highlight-color: transparent; }
.pp-mode-btn.active { border-color: var(--kp-ink); background: var(--kp-bg-warm); }
.pp-dot.pp-inactive .dot-core { fill: var(--gpl); stroke: var(--bdr); opacity: .3; }
.pp-dot.pp-inactive .dot-ring { opacity: 0; }
.pp-dot.pp-active .dot-core   { fill: rgba(154,120,72,.45); stroke: var(--glt); }
.pp-dot.pp-active .dot-ring   { opacity: .4; animation: pp-pulse 1.8s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.pp-dot.pp-best .dot-core     { fill: var(--gold); stroke: #fff; stroke-width: 1.5; }
.pp-dot.pp-best .dot-ring     { opacity: .6; stroke-width: 2; animation: pp-pulse 1.3s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pp-pulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.4);opacity:0} }
.pp-mode-title { font-family: var(--kp-serif); font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--kp-ink); margin-bottom: 8px; line-height: 1.4; }
.pp-mode-desc  { font-family: var(--kp-sans); font-size: 11.5px; color: var(--kp-ink-soft); line-height: 1.8; letter-spacing: .02em; margin-bottom: 14px; padding: 10px 12px; background: var(--kp-bg-warm); border-left: 2px solid var(--kp-line); }
.pp-point-list { display: flex; flex-direction: column; gap: 8px; }
.pp-point-item { display: flex; align-items: flex-start; gap: 8px; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.pp-point-item.visible { opacity: 1; transform: none; }
.pp-point-dot-badge { width: 8px; height: 8px; border-radius: 50%; background: rgba(154,120,72,.45); flex-shrink: 0; margin-top: 5px; box-shadow: 0 0 0 2px var(--kp-line); }
.pp-point-item.best-point .pp-point-dot-badge { background: var(--gold); box-shadow: 0 0 0 2px rgba(154,120,72,.2), 0 0 5px rgba(154,120,72,.3); }
.pp-point-name { font-family: var(--kp-serif); font-size: 12px; font-weight: 400; color: var(--kp-ink); letter-spacing: .04em; display: block; margin-bottom: 1px; }
.pp-point-item.best-point .pp-point-name { color: var(--gold); }
.pp-point-note { font-size: 11px; color: var(--kp-ink-mid); line-height: 1.55; letter-spacing: .02em; }
.pp-amount-hint { margin-top: 12px; padding: 10px 12px; background: var(--kp-dark); font-size: 11.5px; color: rgba(245,243,237,.7); letter-spacing: .03em; line-height: 1.65; position: relative; overflow: hidden; }
.pp-amount-hint::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, var(--kp-pink-200), var(--kp-blue-200)); opacity: .5; }
.pp-amount-hint strong { color: rgba(245,243,237,.9); font-weight: 400; }
.pp-special-row { display: flex; align-items: flex-start; gap: 8px; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.pp-special-row.visible { opacity: 1; transform: none; }
.pp-special-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; line-height: 1; }
.rv.in { opacity: 1; transform: none; }
@keyframes nv-ring-pulse { 0%{box-shadow:0 0 0 2px rgba(255,255,255,.3)} 50%{box-shadow:0 0 0 6px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 2px rgba(255,255,255,.3)} }
.nv-play-btn:hover, .nv-play-btn.playing { background: var(--nv-gold); color: #fff; }
.nv-sc-inner { padding: 16px; animation: nv-card-in .32s cubic-bezier(.22,1,.36,1); }
@keyframes nv-card-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.nv-sc-head  { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.nv-sc-ico   { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.nv-sc-meta  { flex: 1; min-width: 0; }
.nv-sc-en    { font-family: var(--kp-en); font-style: italic; font-size: 10px; letter-spacing: .18em; display: block; margin-bottom: 2px; }
.nv-sc-jp    { font-family: var(--kp-serif); font-size: 15px; font-weight: 400; letter-spacing: .07em; color: var(--nv-ink); line-height: 1.3; }
.nv-sc-badge { font-size: 10px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; letter-spacing: .04em; flex-shrink: 0; align-self: flex-start; }
.nv-sc-msg   { font-size: 12px; color: var(--nv-mid-ink); line-height: 1.8; letter-spacing: .02em; margin-bottom: 10px; }
.nv-sc-msg strong { color: var(--nv-ink); font-weight: 500; }
.nv-sc-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
.nv-sc-tags span { font-size: 10px; padding: 2px 8px; border-radius: 20px; letter-spacing: .04em; }
.nv-sc-top  .nv-sc-en    { color: var(--nv-top); }
.nv-sc-top  .nv-sc-badge { background: rgba(200,88,32,.1);  color: var(--nv-top); }
.nv-sc-top  .nv-sc-tags span { background: rgba(200,88,32,.1); color: var(--nv-top); }
.nv-sc-mid  .nv-sc-en    { color: var(--nv-mid); }
.nv-sc-mid  .nv-sc-badge { background: rgba(46,110,70,.1);  color: var(--nv-mid); }
.nv-sc-mid  .nv-sc-tags span { background: rgba(46,110,70,.1); color: var(--nv-mid); }
.nv-sc-base .nv-sc-en    { color: var(--nv-base); }
.nv-sc-base .nv-sc-badge { background: rgba(42,72,120,.1); color: var(--nv-base); }
.nv-sc-base .nv-sc-tags span { background: rgba(42,72,120,.1); color: var(--nv-base); }
@media (min-width: 580px){
.pp-mode-btn { min-width: 0; }
}
@keyframes ka-orb-float {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33%      { transform: translate3d(20px, -16px, 0) scale(1.05); }
66%      { transform: translate3d(-12px, 20px, 0) scale(0.97); }
}
@keyframes ka-scroll-tick {
0%   { transform: translateY(0); opacity: 0; }
20%  { opacity: 1; }
100% { transform: translateY(380%); opacity: 0; }
}
.sns-btn.sns-dif,
.sns-btn-dif {
background: #FDFAF6 !important;
border: 1px solid #DDD0BC !important;
border-top: 2px solid #A07850 !important;
border-radius: 0 0 12px 12px !important;
padding: 24px 20px 20px !important;
margin: 36px 0 !important;
position: relative !important;
box-shadow: 0 4px 20px rgba(44, 35, 24, .06) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.sns-btn.sns-dif::before,
.sns-btn-dif::before {
content: 'Share' !important;
position: absolute !important;
top: -1px !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: #A07850 !important;
color: #FDFAF6 !important;
font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
font-style: italic !important;
font-size: 10px !important;
font-weight: 300 !important;
letter-spacing: .38em !important;
padding: 3px 20px 3px 24px !important;
line-height: 1.4 !important;
white-space: nowrap !important;
pointer-events: none !important;
z-index: 2 !important;
}
.sns-btn.sns-dif .sns-btn__title,
.sns-btn-dif .sns-btn__title,
.sns-btn.sns-dif .dfont,
.sns-btn.sns-dif .sns-btn__title * {
display: none !important;
}
.sns-btn.sns-dif ul li a .share_txt,
.sns-btn-dif ul li a .share_txt,
.sns-btn.sns-dif ul li a span,
.sns-btn-dif ul li a span,
.sns-btn.sns-dif .sns-btn__item a span,
.sns-btn-dif .sns-btn__item a span {
display: none !important;
}
.sns-btn.sns-dif ul,
.sns-btn-dif ul {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
width: 100% !important;
box-sizing: border-box !important;
}
.sns-btn.sns-dif ul li,
.sns-btn-dif ul li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
flex-shrink: 0 !important;
}
.sns-btn.sns-dif ul li a,
.sns-btn-dif ul li a,
.sns-btn.sns-dif .sns-btn__item a,
.sns-btn-dif .sns-btn__item a {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 10px !important;
background: #F3EDE4 !important;
border: 1px solid #DDD0BC !important;
color: #5C4E38 !important;
box-shadow: none !important;
outline: none !important;
text-decoration: none !important;
-webkit-tap-highlight-color: transparent !important;
transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
cursor: pointer !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.sns-btn.sns-dif ul li a:hover,
.sns-btn-dif ul li a:hover {
background: #EDE1CF !important;
border-color: #A07850 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(160, 120, 80, .2) !important;
}
.sns-btn.sns-dif ul li a img,
.sns-btn-dif ul li a img,
.sns-btn.sns-dif .sns-btn__item a img,
.sns-btn-dif .sns-btn__item a img,
.sns-dif .sns-btn__item img {
display: block !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 3px !important;
box-shadow: none !important;
outline: none !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
body .sns-btn.sns-dif a img,
body .sns-btn.sns-dif a[rel] img {
outline: none !important;
border: none !important;
}
.sns-btn.sns-dif ul li.tw a:hover {
background: #EEEEEC !important;
border-color: #888 !important;
}
.sns-btn.sns-dif ul li.fb a:hover {
background: #EBF0FA !important;
border-color: #7A90CC !important;
}
.sns-btn.sns-dif ul li.hatebu a:hover {
background: #EBF0FA !important;
border-color: #6680BB !important;
}
.sns-btn.sns-dif ul li.line a:hover {
background: #EAFAEA !important;
border-color: #4AAA4A !important;
}
:root {
--cream:#FAF7F2; --ivory:#F3EDE4; --gold:#A07850; --gold-lt:#C4A882;
--gold-pale:#EDE1CF; --ink:#2C2318; --ink-mid:#5C4E38; --ink-soft:#8A7860;
--border:#DDD0BC; --white:#FDFAF6; --dark:#1A1208;
--sc-relax:#8B7355; --sc-focus:#5A7A6B; --sc-refresh:#6B7FA0;
--sc-sleep:#5B4F7A; --sc-morning:#A06040; --sc-romantic:#8B4562;
--sc-meditate:#6B5B45; --sc-purify:#4A7A6A; --sc-uplift:#8A6B2A;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body {
font-family:'Noto Sans JP',sans-serif;
background:var(--cream); color:var(--ink);
line-height:1.85; font-size:15px;
-webkit-font-smoothing:antialiased;
}
.cat-section.cat-hidden { display:none; }
.oil-item.scene-active { background:#FFFDF8; }
.oil-item.scene-active .oil-emoji-wrap { background:var(--gold-pale); }
.oil-item.open .oil-arrow svg { transform:rotate(180deg); }
.cat-section.visible { opacity:1; transform:none; }
:root {
--klg-bg0:   #FAF7F2;
--klg-bg1:   #F2EDE4;
--klg-bg2:   #EDE5D8;
--klg-gold:  #7A5428;
--klg-glt:   #5C3D18;
--klg-ink:   #1A1208;
--klg-ink2:  #3C2C18;
--klg-ink3:  #6A5438;
--klg-wh:    #FDFAF6;
--klg-bdr:   rgba(120,84,40,.18);
--klg-cat1:  #B05818;
--klg-cat2:  #4838A0;
--klg-cat3:  #286848;
}
.sgb-heading--type2 .sgb-heading__inner,
.sgb-heading__inner.sgb-heading--type2 {
color: #3a3038 !important;
-webkit-text-fill-color: #3a3038 !important;
}
[style*="background-color:#f9a8a8"] .sgb-heading__inner,
[style*="background-color:#ffa8"] .sgb-heading__inner {
color: #3a3038 !important;
-webkit-text-fill-color: #3a3038 !important;
}
.sgb-heading--type4 .sgb-heading__text,
.sgb-heading--type4 > .sgb-heading__text,
.sgb-heading__inner.sgb-heading--type4 .sgb-heading__text {
color: #3a3038 !important;
-webkit-text-fill-color: #3a3038 !important;
}
.sgb-heading--type4 strong,
.sgb-heading__inner.sgb-heading--type4 strong {
color: #3a3038 !important;
-webkit-text-fill-color: #3a3038 !important;
}
.sgb-heading--type4 [style*="color:#ffffff"],
.sgb-heading--type4 [style*="color: #ffffff"],
.sgb-heading--type4 [style*="color:white"],
.sgb-heading__inner[style*="background-color:#c9cbe7"] .sgb-heading__text,
[style*="background-color:#c9cbe7"] .sgb-heading__text,
[style*="background-color:#c9cbe7"] strong {
color: #3a3038 !important;
-webkit-text-fill-color: #3a3038 !important;
}
.sgb-heading__text[style*="color:gray"],
.sgb-heading__text[style*="color: gray"],
.sgb-heading__text[style*="color:grey"],
.sgb-heading__text[style*="color: grey"] {
color: #5c5260 !important;
-webkit-text-fill-color: #5c5260 !important;
}
figcaption.wp-element-caption,
.wp-element-caption,
.wp-block-image figcaption,
figure figcaption {
color: #5c5260 !important;
}
.btn.normal,
a.btn.normal {
color: #3a3038 !important;
border-color: rgba(58, 48, 56, 0.4) !important;
}
@media (hover: hover) and (pointer: fine){
.btn.normal:hover,
a.btn.normal:hover {
color: #5c5260 !important;
background-color: #f5f5f7 !important;
}
}
.sns-btn__title,
.sns-btn__title.dfont {
color: #5c5260 !important;
}
.author-info .tb span:not([class]),
.author-info__inner .tb > span,
.author-info .tb p,
.tb .author-profile-text {
color: #3a3038 !important;
}
.tb a.Instagram,
.author-info .tb a.Instagram {
color: #8a3060 !important;
}
.tb a.Website,
.author-info .tb a.Website {
color: #0055aa !important;
}
.tb a[class]:not(.Instagram):not(.Website):not(.Twitter):not(.X),
.author-info .tb a {
color: #0055aa !important;
}
[class*="prev"] > p,
[class*="next"] > p,
[class*="pager"] > p,
[class*="pager"] p,
[id*="prev-next"] p,
[id*="pager"] p {
color: #5c5260 !important;
}
body.single-post article ~ * p,
body.single-post .entry-content ~ * p,
body.wp-singular article ~ * p,
body.wp-singular #entry ~ * p,
body.single-post #entry + * p,
body.wp-singular #entry + * p {
color: #5c5260 !important;
}
body.single-post p:not(.entry-content p):not([class*="has-"]):not(.wp-block-paragraph),
body.wp-singular p:not(.entry-content p):not([class*="has-"]):not(.wp-block-paragraph) {
color: #5c5260 !important;
}
ul[id*="%e5%9b%ba%e5%ae%9a"] a,
ul[id*="%e5%9b%ba%e5%ae%9a"] > li > a {
color: #3a3038 !important;
font-weight: 600 !important;
}
@media (hover: hover) and (pointer: fine){
ul[id*="%e5%9b%ba%e5%ae%9a"] a:hover,
.footer-fixed-nav a:hover { color: #5c5260 !important; }
}
label[for="drawer__input"] {
color: #3a3038 !important;
font-weight: 600 !important;
cursor: pointer !important;
}
label[for="drawer__input"] i,
label[for="drawer__input"] span {
color: inherit !important;
}
@media (hover: hover) and (pointer: fine){
label[for="drawer__input"]:hover { color: #5c5260 !important; }
}
.entry-content a:not([class]),
.entry-content a.inner-link,
.entry-content p a {
color: #0055aa !important;
}
@media (hover: hover) and (pointer: fine){
.entry-content a:not([class]):hover,
.entry-content a.inner-link:hover {
color: #003d88 !important;
text-decoration: underline !important;
}
}
@media (prefers-reduced-motion: reduce){
.tb a, .btn.normal, .entry-content a { transition: none !important; }
}
.toc-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.toc-main-title { font-weight: 700; }
.toc-sub-text   { font-size: 11px; opacity: .6; margin-top: 3px; }
body label.fab-btn,
body label.fab-btn[for="fab"] {
position: relative !important;
display: flex !important;
margin: 16px auto 28px auto !important;
width: max-content !important;
background: transparent !important;
box-shadow: none !important;
color: #86868b !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
border: 1px solid #e5e5ea !important;
padding: 6px 18px !important;
border-radius: 20px !important;
align-items: center !important;
justify-content: center !important;
height: auto !important;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
body label.fab-btn i,
body label.fab-btn[for="fab"] i {
margin-right: 5px !important;
font-size: 11px !important;
color: inherit !important;
background: none !important;
-webkit-text-fill-color: inherit !important;
}
@media (hover: hover) and (pointer: fine){
body label.fab-btn:hover,
body label.fab-btn[for="fab"]:hover {
background: #f9f5ff !important;
color: #a855f7 !important;
border-color: rgba(168, 85, 247, 0.3) !important;
transform: translateY(-1px) !important;
}
}
body label.fab-btn:active,
body label.fab-btn[for="fab"]:active {
transform: scale(0.96) !important;
background: #f5f5f7 !important;
}
@keyframes eibFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.author-info.pastel-bc {
background: #ffffff !important; border: 1px solid rgba(0,0,0,.05) !important;
border-radius: 24px !important; box-shadow: 0 8px 30px rgba(0,0,0,.04) !important;
padding: 30px !important; margin-top: 40px !important; color: #1d1d1f !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif !important;
position: relative !important; overflow: hidden !important; overflow: clip !important;
contain: layout style !important;
}
.author-info.pastel-bc::before, .author-info.pastel-bc::after { display: none !important; }
.author-info__inner { display: flex !important; align-items: flex-start !important; gap: 0 !important; }
@supports (gap: 24px){
.author-info__inner { gap: 24px !important; }
}
@media (max-width: 768px){
.author-info.pastel-bc { padding: 24px !important; }
}
#breadcrumb,
nav.breadcrumb,
.breadcrumb {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 12px 0 !important;
margin-bottom: 20px !important;
overflow-x: auto !important;
white-space: nowrap !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
contain: layout style !important;
}
#breadcrumb::-webkit-scrollbar,
.breadcrumb::-webkit-scrollbar { display: none !important; }
#breadcrumb li,
#breadcrumb ol li,
.breadcrumb li,
.breadcrumb ol li {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
#breadcrumb ol,
.breadcrumb ol {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
flex-shrink: 0 !important;
}
#breadcrumb li a,
#breadcrumb ol li a,
#breadcrumb li span,
#breadcrumb ol li span,
.breadcrumb li a,
.breadcrumb ol li a {
font-family:
-apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto,
"Helvetica Neue", "Yu Gothic", sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #59595c !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
transition: color 0.15s ease, opacity 0.15s ease !important;
}
@media (hover: hover) and (pointer: fine){
#breadcrumb li a:hover,
#breadcrumb ol li a:hover,
.breadcrumb li a:hover { color: #1d1d1f !important; opacity: 0.8 !important; }
}
#breadcrumb li:first-child > a,
#breadcrumb ol li:first-child > a,
.breadcrumb li:first-child > a { font-weight: 700 !important; }
#breadcrumb li:first-child > a::before,
#breadcrumb ol li:first-child > a::before,
.breadcrumb li:first-child > a::before {
content: "\f0c3" !important;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
font-weight: 900 !important;
font-size: 15px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 6px !important;
background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
filter: drop-shadow(0 2px 4px rgba(236,72,153,.25)) !important;
}
#breadcrumb li::after,
#breadcrumb ol li::after,
.breadcrumb li::after {
content: "\f054" !important;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
font-weight: 900 !important;
font-size: 10px !important;
color: #8e8e93 !important;
margin: 0 10px !important;
display: inline-flex !important;
align-items: center !important;
}
#breadcrumb li:last-child::after,
#breadcrumb ol li:last-child::after,
.breadcrumb li:last-child::after { display: none !important; content: none !important; }
@media (prefers-reduced-motion: reduce){
#breadcrumb li a, .breadcrumb li a { transition: none !important; }
}
@media only screen and (max-width: 480px){
#breadcrumb, .breadcrumb { padding: 12px 16px !important; }
}
body .footer-meta {
background-color: #ffffff !important;
border: 1px solid rgba(0,0,0,.05) !important;
border-radius: 24px !important;
box-shadow: 0 8px 30px rgba(0,0,0,.04) !important;
padding: 30px !important;
margin: 40px 0 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", "Yu Gothic", sans-serif !important;
color: #1d1d1f !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
position: relative !important;
overflow: hidden !important;
overflow: clip !important;
}
body .footer-meta::before {
content: "" !important;
position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
pointer-events: none !important;
}
body .footer-meta a {
display: inline-block !important;
background: #f5f5f7 !important;
color: #3c3c43 !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
border-radius: 999px !important;
margin: 4px 6px 4px 0 !important;
text-decoration: none !important;
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s !important;
border: 1px solid transparent !important;
}
@media (hover: hover) and (pointer: fine){
body .footer-meta a:hover {
background: rgba(168,85,247,.08) !important;
color: #a855f7 !important;
border-color: rgba(168,85,247,.25) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(168,85,247,.12) !important;
}
}
body .footer-meta a:active { transform: scale(0.97) !important; }
body .footer-meta a:focus-visible { outline: 2px solid #a855f7 !important; outline-offset: 2px !important; }
@media (max-width: 768px){
body .footer-meta { padding: 24px !important; }
body .footer-meta a { font-size: 12px !important; padding: 5px 13px !important; }
}
.entry-content table {
width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
border: 1px solid rgba(0,0,0,.05) !important; border-radius: 16px !important;
overflow: hidden !important; box-shadow: 0 4px 20px rgba(0,0,0,.03) !important;
margin-bottom: 30px !important;
background: #ffffff !important; contain: layout style !important;
}
.entry-content table:where(:not(.ksvy-table)) { font-size: 15px !important; }
.entry-content table th {
background-color: #f5f5f7 !important; color: #1d1d1f !important; font-weight: 700 !important; text-align: left !important; border: none !important;
border-bottom: 1px solid #e5e5ea !important; line-height: 1.7 !important; vertical-align: middle !important;
}
.entry-content table:where(:not(.ksvy-table)) th { padding: 16px 20px !important; }
.entry-content table:where(:not(.ksvy-table)) tbody th { white-space: nowrap !important; width: 25% !important; }
.entry-content table td {
background-color: #ffffff !important; color: #424245 !important; border: none !important;
border-bottom: 1px solid #e5e5ea !important; line-height: 1.7 !important; vertical-align: middle !important;
}
.entry-content table:where(:not(.ksvy-table)) td { padding: 16px 20px !important; }
.entry-content table tr:last-child th,
.entry-content table tr:last-child td { border-bottom: none !important; }
@media (max-width: 768px){
.entry-content table:where(:not(.ksvy-table)) { font-size: 14px !important; }
.entry-content table:where(:not(.ksvy-table)) th, .entry-content table:where(:not(.ksvy-table)) td { padding: 14px !important; }
.entry-content table tbody th { width: auto !important; white-space: normal !important; }
}
.wp-block-sgb-box.sng-box.box1 .wp-block-columns { gap: 30px !important; margin-bottom: 40px !important; }
@media (max-width: 768px){
.wp-block-sgb-box.sng-box.box1 .wp-block-columns { flex-direction: column !important; gap: 24px !important; }
}
.wp-block-sgb-box.sng-box.box1 .wp-block-column {
background-color: #ffffff !important; border-radius: 20px !important; padding: 0 !important;
box-shadow: 0 10px 30px rgba(0,0,0,.05) !important; border: 1px solid #f0f0f5 !important;
overflow: visible !important; position: relative !important; contain: layout style !important;
}
.wp-block-sgb-box.sng-box.box1 .sgb-heading {
margin: 0 !important; padding: 20px 10px !important; border-radius: 20px 20px 0 0 !important;
text-align: center !important; position: relative !important; display: flex !important;
justify-content: center !important; align-items: center !important; background: none !important; border: none !important;
}
.wp-block-sgb-box.sng-box.box1 .sgb-heading__inner {
background: transparent !important; border: none !important; box-shadow: none !important;
padding: 0 !important; margin: 0 !important; display: inline-flex !important;
align-items: center !important; justify-content: center !important;
font-weight: 700 !important; color: #1d1d1f !important; font-size: 16px !important;
}
.wp-block-sgb-box.sng-box.box1 .sgb-heading__inner::after,
.wp-block-sgb-box.sng-box.box1 .sgb-heading::before { display: none !important; content: none !important; border: none !important; }
.wp-block-sgb-box.sng-box.box1 .sgb-heading::after {
content: '' !important; position: absolute !important; bottom: -10px !important;
left: 50% !important; transform: translateX(-50%) !important;
width: 0 !important; height: 0 !important; border-style: solid !important;
border-width: 10px 14px 0 14px !important; z-index: 10 !important;
}
.wp-block-sgb-box.sng-box.box1 .wp-block-column:first-child .sgb-heading { background-color: #eaf8ff !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:first-child .sgb-heading::after { border-color: #009ef3 transparent transparent transparent !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:first-child .sgb-heading__inner::before { content: '👍' !important; margin-right: 8px !important; font-size: 20px !important; display: inline-block !important; line-height: 1 !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:last-child .sgb-heading { background-color: #fff5f5 !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:last-child .sgb-heading::after { border-color: #ff8080 transparent transparent transparent !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:last-child .sgb-heading__inner::before { content: '🤔' !important; margin-right: 8px !important; font-size: 20px !important; display: inline-block !important; line-height: 1 !important; }
.wp-block-sgb-box.sng-box.box1 ul.wp-block-list { padding: 30px 24px 24px !important; margin: 0 !important; }
.wp-block-sgb-box.sng-box.box1 li {
list-style: none !important; border-bottom: 1px dashed #e5e5ea !important;
padding: 14px 0 14px 30px !important; font-size: 15px !important; color: #424245 !important;
position: relative !important; line-height: 1.6 !important; margin: 0 !important;
}
.wp-block-sgb-box.sng-box.box1 li:last-child { border-bottom: none !important; }
.wp-block-sgb-box.sng-box.box1 li::before { display: none !important; }
.wp-block-sgb-box.sng-box.box1 li::after {
content: '' !important; position: absolute !important; left: 4px !important; top: 26px !important;
transform: translateY(-50%) !important; width: 8px !important; height: 8px !important;
border-radius: 50% !important; background-color: #fff !important; border: 2px solid !important;
}
.wp-block-sgb-box.sng-box.box1 .wp-block-column:first-child li::after { border-color: #009ef3 !important; box-shadow: 0 0 0 2px rgba(0,158,243,.15) !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:last-child li::after { border-color: #ff8080 !important; box-shadow: 0 0 0 2px rgba(255,128,128,.15) !important; }
.wp-block-sgb-block-simple.sgb-box-simple {
background: #ffffff !important; border: 1px solid rgba(0,0,0,.05) !important;
border-radius: 24px !important; box-shadow: 0 16px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.03) !important;
padding: 0 !important; margin: 60px 0 !important; overflow: hidden !important; contain: layout style !important;
}
.wp-block-sgb-block-simple.sgb-box-simple .sgb-box-simple__title {
background-color: #fff5f5 !important; color: #1d1d1f !important; padding: 20px 28px !important;
font-size: 18px !important; font-weight: 700 !important; border: none !important;
display: flex !important; align-items: center !important; border-bottom: 1px solid rgba(0,0,0,.03) !important;
}
.wp-block-sgb-block-simple.sgb-box-simple .sgb-box-simple__title i {
color: #ff5e5e !important; margin-right: 12px !important; font-size: 20px !important;
background: rgba(255,94,94,.1) !important; width: 36px !important; height: 36px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
border-radius: 50% !important; flex-shrink: 0 !important;
}
.wp-block-sgb-block-simple.sgb-box-simple .sgb-box-simple__body {
border: none !important; background: transparent !important; padding: 32px 28px !important;
color: #424245 !important; font-size: 15px !important; line-height: 1.8 !important;
}
.wp-block-sgb-block-simple.sgb-box-simple ul { margin: 0 !important; padding-left: 0 !important; }
.wp-block-sgb-block-simple.sgb-box-simple li { list-style: none !important; margin-bottom: 16px !important; padding-left: 36px !important; position: relative !important; font-weight: 500 !important; }
.wp-block-sgb-block-simple.sgb-box-simple li::before {
content: '✓' !important; font-family: sans-serif !important; font-weight: 900 !important;
position: absolute !important; left: 0 !important; top: 2px !important;
background: linear-gradient(135deg, #7ad3e6 0%, #4facfe 100%) !important; color: #ffffff !important;
font-size: 13px !important; width: 24px !important; height: 24px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
border-radius: 50% !important; box-shadow: 0 4px 10px rgba(79,172,254,.3) !important; line-height: 1 !important;
}
@media (max-width: 768px){
.wp-block-sgb-block-simple.sgb-box-simple { margin: 40px 0 !important; border-radius: 20px !important; }
.wp-block-sgb-block-simple.sgb-box-simple .sgb-box-simple__body { padding: 24px 20px !important; }
}
.mobile-trust-box img, .mtb-avatar img, .mtb-logo-img,
.apple-profile-wrapper img, .ap-avatar img,
.author_img img, .stb-avatar img {
pointer-events: none !important;
cursor: default !important;
user-select: none !important;
}
.entry-header .entry-meta,
.article-header .entry-meta,
.entry-meta {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 0 !important;
margin-bottom: 12px !important;
contain: layout style !important;
}
.entry-meta > * + * { margin-left: 16px !important; }
@supports (gap: 16px){
.entry-header .entry-meta,
.article-header .entry-meta,
.entry-meta { gap: 16px !important; }
.entry-meta > * + * { margin-left: 0 !important; }
}
time.pubdate,
span.pubdate,
.pubdate,
time.updated,
span.updated,
.updated {
display: inline-flex !important;
align-items: center !important;
font-family:
-apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto,
"Helvetica Neue", "Yu Gothic", sans-serif !important;
font-size: 13px !important;
color: #59595c !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
line-height: 1 !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
.pubdate i, .updated i { display: none !important; }
time.pubdate::before, span.pubdate::before, .pubdate::before,
time.updated::before, span.updated::before, .updated::before {
display: inline-block !important;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
font-weight: 900 !important;
font-size: 13px !important;
margin-right: 5px !important;
background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
transition: none !important;
will-change: auto !important;
}
time.pubdate::before, span.pubdate::before, .pubdate::before {
content: "\f017" !important;
}
time.updated::before, span.updated::before, .updated::before {
content: "\f021" !important;
}
@media (prefers-reduced-motion: reduce){
.pubdate::before, .updated::before {
transition: none !important;
will-change: auto !important;
}
}
.wp-block-sgb-custom-group {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.75rem 1rem !important;
justify-content: center !important;
margin: 1rem 0 !important;
}
.wp-block-sgb-custom-group > * {
flex: 1 1 0 !important;
max-width: none !important;
margin: 0 !important;
}
.wp-block-sgb-custom-group a {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin: 0 !important;
padding: .8rem 1rem !important;
}
@media (min-width: 600px){
.wp-block-sgb-custom-group > * { min-width: 120px !important; }
}
@media (max-width: 600px){
.wp-block-sgb-custom-group { gap: 0.5rem !important; margin: 0.75rem 0 !important; }
.wp-block-sgb-custom-group > * { flex: 1 1 100% !important; max-width: none !important; }
}
.field-report-card {
background: #ffffff !important;
border: 1px solid #cfd8dc !important;
border-top: 2px solid #455a64 !important;
border-radius: 4px !important;
padding: 14px 18px !important;
margin: 24px 0 !important;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, sans-serif !important;
position: relative !important;
overflow: visible !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
contain: layout style !important;
}
.field-report-card::before { display: none !important; }
.frc-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 10px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid #eceff1 !important;
}
.frc-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #78909c !important;
}
.frc-badge-verified {
font-size: 10px !important;
font-weight: 700 !important;
color: #455a64 !important;
border: 1px solid #90a4ae !important;
border-radius: 2px !important;
padding: 1px 7px !important;
background: none !important;
letter-spacing: 0.03em !important;
}
.frc-body {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
}
.frc-image-wrap { flex-shrink: 0 !important; }
.frc-image {
width: 90px !important;
height: 68px !important;
border-radius: 3px !important;
background-size: cover !important;
background-position: center !important;
background-color: #eceff1 !important;
border: 1px solid #cfd8dc !important;
}
.frc-info {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.frc-store-name {
font-size: 14px !important;
font-weight: 700 !important;
color: #263238 !important;
line-height: 1.4 !important;
margin-bottom: 5px !important;
}
.frc-metas {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.frc-meta {
font-size: 12px !important;
color: #546e7a !important;
line-height: 1.5 !important;
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
}
.frc-meta-area::before {
content: "場所" !important;
font-size: 9px !important;
font-weight: 700 !important;
color: #90a4ae !important;
letter-spacing: 0.06em !important;
flex-shrink: 0 !important;
width: 24px !important;
display: inline-block !important;
}
.frc-meta-date::before {
content: "日時" !important;
font-size: 9px !important;
font-weight: 700 !important;
color: #90a4ae !important;
letter-spacing: 0.06em !important;
flex-shrink: 0 !important;
width: 24px !important;
display: inline-block !important;
}
.frc-meta time {
font-size: 12px !important;
color: #546e7a !important;
}
.frc-map-link {
display: inline-block !important;
font-size: 11.5px !important;
color: #546e7a !important;
text-decoration: none !important;
border-bottom: 1px solid #b0bec5 !important;
padding-bottom: 1px !important;
margin-top: 8px !important;
transition: color 0.15s ease, border-color 0.15s ease !important;
}
@media (hover: hover) and (pointer: fine){
.frc-map-link:hover {
color: #263238 !important;
border-color: #546e7a !important;
}
}
.frc-map-link:focus-visible {
outline: 2px solid #455a64 !important;
outline-offset: 2px !important;
}
@media (max-width: 480px){
.field-report-card { padding: 12px 14px !important; }
.frc-image { width: 72px !important; height: 56px !important; }
.frc-store-name { font-size: 13px !important; }
.frc-meta { font-size: 11.5px !important; }
}
@media (prefers-reduced-motion: reduce){
.frc-map-link { transition: none !important; }
}
.pick-section {
max-width: 720px;
margin: 0 auto;
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
color: #5c5260;
}
.pick-card {
background: #ffffff; border: 1px solid #ede4e9; border-radius: 14px;
box-shadow: 0 3px 14px rgba(100,60,80,.05); overflow: hidden;
position: relative; transition: box-shadow .2s, transform .2s;
}
.pick-card:hover { box-shadow: 0 6px 22px rgba(100,60,80,.10); transform: translateY(-1px); }
.pick-card-top { display: flex; flex-direction: row; }
.pick-badge-col {
flex-shrink: 0; width: 52px;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
padding: 16px 0 12px; background: #faf5f7; border-right: 1px solid #ede4e9;
}
.pick-num { font-size: 20px; font-weight: 800; line-height: 1; color: #b87888; font-family: 'Helvetica Neue', Arial, sans-serif; }
.pick-num-label { font-size: 8px; font-weight: 700; letter-spacing: .08em; color: #c99aa8; font-family: 'Helvetica Neue', Arial, sans-serif; margin-top: 2px; }
.pick-img-col { flex-shrink: 0; width: 88px; padding: 14px 10px; display: flex; align-items: center; justify-content: center; }
.pick-img-box { position: relative; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: #f4f0f3; border: 1px solid #ede4e9; }
.pick-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; }
.pick-affil-link { position: absolute; inset: 0; z-index: 2; border-radius: 9px; display: block; }
.pick-info-col { flex: 1; padding: 14px 14px 12px 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pick-brand { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #c99aa8; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }
.pick-name { font-size: 13.5px; font-weight: 800; color: #3a3038; line-height: 1.45; letter-spacing: .02em; word-break: break-all; }
.pick-buzz-tag {
display: inline-flex; align-items: center; gap: 4px;
font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: .03em;
background: #fff0e8; color: #c07030; border: 1px solid #f0d8b8;
margin-top: 2px; width: fit-content;
}
.pick-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pick-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: .04em; white-space: nowrap; }
.pick-tag-scent { background: #f4eee8; color: #a07850; border: 1px solid #e0cfb8; }
.pick-tag-scene { background: #faf5f7; color: #b87888; border: 1px solid #ede4e9; }
.pick-price-row { display: flex; align-items: baseline; margin-top: 1px; }
.pick-price { font-size: 13.5px; font-weight: 800; color: #3a3038; font-family: 'Helvetica Neue', Arial, sans-serif; }
.pick-price-note { font-size: 10px; color: #8a7e8c; font-family: 'Helvetica Neue', Arial, sans-serif; margin-left: 4px; font-weight: 400; }
.pick-cta { margin-top: 4px; }
.pick-cta a {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px; font-weight: 700; color: #c99aa8; text-decoration: none;
font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: .04em;
border-bottom: 1px solid #dbbac4; padding-bottom: 1px;
transition: color .15s, border-color .15s;
}
.pick-cta a:hover { color: #b87888; border-color: #b87888; }
.pick-card-bottom { border-top: 1px solid #ede4e9; }
.pick-bottom-row { display: flex; flex-direction: row; }
.pick-col-scene {
flex: 1; padding: 12px 14px; background: #f4f0fb;
border-right: 1px solid #ede4e9;
display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.pick-col-scene-label {
display: flex; align-items: center; gap: 4px;
font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
font-family: 'Helvetica Neue', Arial, sans-serif; color: #7060a0; margin-bottom: 1px;
}
.pick-col-scene-text { font-size: 12px; color: #5c5260; line-height: 1.65; }
.pick-col-impression {
flex: 1; padding: 12px 14px; background: #fdf4f7;
display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.pick-col-impression-label {
display: flex; align-items: center; gap: 4px;
font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
font-family: 'Helvetica Neue', Arial, sans-serif; color: #b87888; margin-bottom: 1px;
}
.pick-col-impression-text { font-size: 12px; color: #5c5260; line-height: 1.65; }
.pick-col-impression-text strong { color: #b87888; font-weight: 700; }
.pick-price-disclaimer {
font-size: 10.5px; color: #a09aa8; line-height: 1.9;
margin-top: 6px; padding: 10px 8px;
text-align: center;
border-top: 1px dashed #e0d0d8;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
@media (max-width: 480px){
.pick-badge-col { width: 40px; }
.pick-num { font-size: 16px; }
.pick-img-col { width: 70px; padding: 12px 7px; }
.pick-img-box { width: 56px; height: 56px; }
.pick-info-col { padding: 11px 10px 10px 3px; gap: 3px; }
.pick-name { font-size: 12px; }
.pick-tag { font-size: 9px; padding: 2px 6px; }
.pick-price { font-size: 12.5px; }
.pick-cta a { font-size: 11px; }
.pick-bottom-row { flex-direction: column; }
.pick-col-scene { border-right: none; border-bottom: 1px solid #ede4e9; padding: 10px 13px; }
.pick-col-impression { padding: 10px 13px; }
.pick-col-scene-label, .pick-col-impression-label { font-size: 8.5px; }
.pick-col-scene-text, .pick-col-impression-text { font-size: 12px; }
}
.comp-section {
max-width: 720px; margin: 0 auto;
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
color: #5c5260;
display: flex; flex-direction: column; gap: 14px;
padding: 4px 0 20px;
}
.comp-card {
background: #ffffff; border: 1px solid #ede4e9; border-radius: 14px;
box-shadow: 0 3px 14px rgba(100,60,80,.05); overflow: hidden;
display: flex; flex-direction: row;
transition: box-shadow .2s, transform .2s;
}
.comp-card:hover { box-shadow: 0 6px 22px rgba(100,60,80,.10); transform: translateY(-1px); }
.comp-badge-col {
flex-shrink: 0; width: 52px;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
padding: 16px 0 12px; background: #faf5f7; border-right: 1px solid #ede4e9;
}
.comp-num { font-size: 20px; font-weight: 800; line-height: 1; color: #b87888; font-family: 'Helvetica Neue', Arial, sans-serif; }
.comp-num-label { font-size: 8px; font-weight: 700; letter-spacing: .08em; color: #c99aa8; font-family: 'Helvetica Neue', Arial, sans-serif; margin-top: 2px; }
.comp-img-col { flex-shrink: 0; width: 88px; padding: 14px 10px; display: flex; align-items: flex-start; justify-content: center; }
.comp-img-col a { display: block; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: #f4f0f3; border: 1px solid #ede4e9; flex-shrink: 0; }
.comp-img-col a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-info-col { flex: 1; padding: 14px 14px 12px 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.comp-brand { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #c99aa8; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }
.comp-name { font-size: 13.5px; font-weight: 800; color: #3a3038; line-height: 1.45; word-break: break-all; }
.comp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.comp-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; font-family: 'Helvetica Neue', Arial, sans-serif; white-space: nowrap; }
.comp-tag-age   { background: #f0eaf4; color: #a898c0; border: 1px solid #ddd4ec; }
.comp-tag-scent { background: #f4eee8; color: #a07850; border: 1px solid #e0cfb8; }
.comp-tag-scene { background: #faf5f7; color: #b87888; border: 1px solid #ede4e9; }
.comp-price { font-size: 13.5px; font-weight: 800; color: #3a3038; font-family: 'Helvetica Neue', Arial, sans-serif; display: block; margin-top: 2px; }
.comp-price-note { font-size: 10px; color: #8a7e8c; font-family: 'Helvetica Neue', Arial, sans-serif; margin-left: 4px; font-weight: 400; }
.comp-gauge-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.comp-gauge-label {
font-size: 10px; font-weight: 700; color: #8a7e8c;
font-family: 'Helvetica Neue', Arial, sans-serif;
letter-spacing: .03em; white-space: nowrap; flex-shrink: 0;
min-width: 46px;
}
.comp-gauge-label-r { text-align: right; }
.comp-gauge-track {
flex: 1; height: 6px; background: #ddd0d8; border-radius: 3px;
position: relative; overflow: visible;
}
.comp-gauge-fill {
height: 100%; background: transparent; border-radius: 3px;
position: relative; overflow: visible;
}
.comp-gauge-fill::after {
content: ''; position: absolute; right: -7px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px; background: #b87888; border-radius: 50%;
box-shadow: 0 0 0 2.5px #ffffff, 0 1px 5px rgba(184,120,136,.45); z-index: 2;
}
.comp-btn {
display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
font-size: 11.5px; font-weight: 700; color: #c99aa8; text-decoration: none;
font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: .04em;
border-bottom: 1px solid #dbbac4; padding-bottom: 1px;
transition: color .15s, border-color .15s;
}
.comp-btn:hover { color: #b87888; border-color: #b87888; }
.comp-price-disclaimer {
font-size: 10.5px; color: #a09aa8; line-height: 1.9;
margin-top: 6px; padding: 10px 8px;
text-align: center;
border-top: 1px dashed #e0d0d8;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
@media (max-width: 480px){
.comp-badge-col { width: 40px; }
.comp-num { font-size: 16px; }
.comp-img-col { width: 70px; padding: 12px 7px; }
.comp-img-col a { width: 56px; height: 56px; }
.comp-info-col { padding: 11px 10px 10px 3px; gap: 3px; }
.comp-name { font-size: 12px; }
.comp-tag { font-size: 9px; padding: 2px 6px; }
.comp-price { font-size: 12.5px; }
.comp-gauge-label { font-size: 9px; min-width: 38px; }
}
.comp-mens .comp-gauge-fill::after {
background: #3d5a80;
box-shadow: 0 0 0 2.5px #ffffff, 0 1px 5px rgba(61,90,128,.45);
}
.trend-block {
max-width: 720px; margin: 24px auto;
background: #ffffff; border: 1px solid #ede4e9;
border-radius: 16px; box-shadow: 0 6px 24px rgba(100,60,80,0.06); overflow: hidden;
}
.trend-header {
position: relative; padding: 30px 24px 26px; text-align: center;
background: linear-gradient(140deg, #fdf4f7 0%, #f8eef4 30%, #f2ecf8 65%, #edf3f9 100%);
border-bottom: 1px solid #ede4e9; overflow: hidden;
}
.trend-header::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(108deg, transparent 30%, rgba(200,160,180,.10) 44%, rgba(220,200,230,.18) 50%, rgba(170,185,215,.10) 56%, transparent 70%);
background-size: 220% 100%;
animation: shimmer-bg 4s ease-in-out infinite; pointer-events: none;
}
@keyframes shimmer-bg {
0%   { background-position: 220% 0; }
100% { background-position: -220% 0; }
}
.trend-title {
position: relative; display: inline-block;
font-size: clamp(15px, 4vw, 19px); font-weight: 800;
line-height: 1.6; letter-spacing: .06em; color: transparent;
background: linear-gradient(90deg, #9a6878 0%, #b87888 18%, #c9a0a8 32%, #e8d8dc 44%, #c0aac8 52%, #d4b8c0 62%, #b87888 80%, #9a6878 100%);
background-size: 220% auto;
-webkit-background-clip: text; background-clip: text;
animation: shimmer-text 4s linear infinite; padding-bottom: 14px;
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
@keyframes shimmer-text {
0%   { background-position: 0% center; }
100% { background-position: 220% center; }
}
.trend-title::after {
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 40px; height: 1.5px;
background: linear-gradient(90deg, #dbbac4, #a898c0, #dbbac4);
background-size: 200% auto; border-radius: 2px;
animation: shimmer-line 4s linear infinite; opacity: .7;
}
@keyframes shimmer-line {
0%   { background-position: 0% center; }
100% { background-position: 200% center; }
}
@keyframes sparkle-pop {
0%,100% { opacity:0; transform:scale(.5) rotate(0deg); }
30%      { opacity:.7; transform:scale(1.1) rotate(15deg); }
60%      { opacity:.35; transform:scale(.85) rotate(-5deg); }
80%      { opacity:0; transform:scale(.5) rotate(0deg); }
}
.trend-body { padding: 26px 22px 30px; font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
.accordion-stack { display: flex; flex-direction: column; gap: 10px; }
.accordion-btn {
width: 100%; background: #faf5f7; border: 1px solid #e0d0d8;
border-radius: 10px; padding: 14px 14px 14px 16px; cursor: pointer;
display: flex; align-items: center; gap: 10px; text-align: left;
transition: background .2s, box-shadow .2s;
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
-webkit-tap-highlight-color: transparent;
}
.accordion-btn:hover,
.accordion-btn:focus-visible { background: #f4f0f3; box-shadow: 0 2px 8px rgba(100,60,80,.07); outline: none; }
.accordion-btn[aria-expanded="true"] { border-radius: 10px 10px 0 0; border-bottom-color: transparent; background: #f4f0f3; }
.acc-sub { display: block; font-size: 9px; font-weight: 700; color: #c99aa8; letter-spacing: .16em; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; margin-bottom: 3px; }
.acc-title { display: block; font-size: 13px; font-weight: 700; color: #3a3038; line-height: 1.55; letter-spacing: .02em; word-break: break-all; overflow-wrap: break-word; margin-bottom: 5px; }
@keyframes bounce-down {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(3px); }
}
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .42s cubic-bezier(.4,0,.2,1), opacity .35s ease; opacity: 0; background: #faf5f7; border: 1px solid #e0d0d8; border-top: none; border-radius: 0 0 10px 10px; }
.accordion-panel.is-open { max-height: 800px; opacity: 1; }
.accordion-panel-inner { padding: 18px 18px 20px; }
.accordion-panel-inner p { font-size: 13.5px; color: #5c5260; line-height: 2.1; margin-bottom: .9em; }
.accordion-panel-inner p:last-child { margin-bottom: 0; }
.accordion-panel-inner strong { color: #b87888; font-weight: 700; }
@media (max-width: 480px){
.trend-block { margin: 12px 10px; border-radius: 14px; }
.trend-header { padding: 22px 14px 20px; }
.trend-body { padding: 18px 14px 22px; }
.acc-title { font-size: 12.5px; }
.accordion-panel-inner p, .ev-text { font-size: 13px; }
}
.rcb-wrapper {
max-width: 100%; margin: 40px 0;
background: #ffffff; border: 1px solid #ede8e3;
border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
font-family: 'Helvetica Neue', Arial, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
-webkit-text-size-adjust: 100%;
position: relative; overflow: hidden; box-sizing: border-box;
contain: layout style;
}
.rcb-badge {
position: absolute; top: 0; left: 0;
background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%);
color: #fff; font-size: 11px; font-weight: 700;
padding: 6px 14px; border-radius: 0 0 12px 0;
letter-spacing: 0.05em; z-index: 10;
box-shadow: 2px 2px 8px rgba(176,122,138,0.25);
}
.rcb-inner { padding: 40px 24px 28px; }
.rcb-title-area { text-align: center; margin-bottom: 18px; }
.rcb-title-en { display: block; font-size: 10px; color: #b07a8a; font-weight: 800; letter-spacing: 0.2em; margin-bottom: 6px; text-transform: uppercase; }
.rcb-title {
font-size: 18px; font-weight: 800; color: #2d3748;
margin: 0 !important; display: inline-block; position: relative;
padding: 0 0 12px 0 !important; letter-spacing: 0.03em; line-height: 1.65;
border: none !important; background: transparent !important;
text-align: center;
}
.rcb-title::before { content: none !important; }
.rcb-title::after {
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 40px; height: 3px;
background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%); border-radius: 2px;
}
.rcb-lead { font-size: 13px; color: #4a5568; line-height: 1.9; text-align: left; margin: 0 0 22px 0; }
.rcb-lead br { display: none; }
.rcb-lead strong { color: #2d3748; font-weight: 700; }
.rcb-lead a {
color: #b07a8a; font-weight: 700; text-decoration: none;
border-bottom: 1px solid #dbbac4; padding-bottom: 1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.rcb-lead a:hover { color: #8a5a6a; border-color: #8a5a6a; }
@media (prefers-reduced-motion: reduce){
.rcb-lead a { transition: none; }
}
.rcb-pillars {
display: flex;
flex-direction: column;
gap: 10px;
}
.rcb-pillar {
display: flex;
align-items: flex-start;
gap: 14px;
background: #faf7f5;
border: 1px solid #ede8e3;
border-radius: 12px;
padding: 14px 16px;
text-align: left;
width: 100%;
box-sizing: border-box;
}
.rcb-pillar-icon { font-size: 22px; line-height: 1; flex-shrink: 0; display: block; }
.rcb-pillar-label { display: block; font-size: 11px; font-weight: 800; color: #9a6a7a; letter-spacing: 0.05em; margin-bottom: 6px; }
.rcb-pillar-text { font-size: 13px; color: #4a5568; line-height: 1.75; margin: 0; }
@media (min-width: 720px){
.rcb-lead { text-align: center; }
.rcb-lead br { display: inline; }
.rcb-pillars { flex-direction: row; }
.rcb-pillar {
flex: 1;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
padding: 16px 14px;
}
.rcb-pillar-icon { margin-bottom: 8px; }
.rcb-pillar-label { margin-bottom: 5px; }
}
.cil-wrapper {
max-width: 100%; margin: 40px 0;
background: #ffffff; border: 1px solid #f0ece1;
border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
position: relative; box-sizing: border-box;
}
.cil-badge {
position: absolute; top: 0; left: 0;
background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%);
color: #fff; font-size: 11px; font-weight: 700;
padding: 6px 14px; border-radius: 0 0 12px 0;
letter-spacing: 0.05em; z-index: 10;
box-shadow: 2px 2px 8px rgba(176,122,138,0.25);
}
.cil-inner { padding: 36px 24px 24px; }
.cil-title-area { text-align: center; margin-bottom: 20px; }
.cil-title-en { display: block; font-size: 10px; color: #b07a8a; font-weight: 800; letter-spacing: 0.2em; margin-bottom: 6px; text-transform: uppercase; }
.cil-title {
font-size: 19px; font-weight: 800; color: #2d3748;
margin: 0 !important; display: inline-block; position: relative;
padding: 0 0 12px 0 !important; letter-spacing: 0.05em;
border: none !important; background: transparent !important;
}
.cil-title::before { content: none !important; }
.cil-title::after {
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 40px; height: 3px;
background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%); border-radius: 2px;
}
.cil-desc { font-size: 13px; color: #4a5568; line-height: 1.6; margin: 0 0 24px 0; text-align: center; }
.cil-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.cil-list li a,
.cil-item {
display: flex !important; flex-direction: column !important; text-decoration: none !important;
background: #fdfaf6 !important; border: 1px solid #d8cfc8 !important;
border-radius: 12px !important; padding: 14px 44px 14px 16px !important;
transition: all 0.3s ease !important; position: relative !important;
margin-bottom: 12px !important;
}
.cil-list li a::after,
.cil-item::after {
content: '' !important; position: absolute !important; right: 18px; top: 50%;
width: 8px; height: 8px;
border-top: 2px solid #b8a8b0 !important; border-right: 2px solid #b8a8b0 !important;
transform: translateY(-50%) rotate(45deg) !important; transition: all 0.2s ease !important;
}
.cil-list li a:hover,
.cil-item:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
border-color: #c49aaa !important;
background: #ffffff !important;
}
.cil-list li a:hover::after,
.cil-item:hover::after {
border-color: #c49aaa !important;
right: 15px;
}
.cil-list li a:active,
.cil-item:active { transform: translateY(1px) !important; background: #f7f2eb !important; }
.cil-catch {
display: inline-block; font-size: 12px; font-weight: 800; color: #ffffff;
background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%);
border-radius: 4px; padding: 2px 10px; letter-spacing: 0.08em;
margin-bottom: 7px; align-self: flex-start;
}
.cil-intent { display: flex; align-items: center; font-size: 11.5px; color: #9a6a7a; font-weight: 700; margin-bottom: 5px; }
.cil-emoji { margin-right: 4px; font-size: 12px; }
.cil-link-text { font-size: 14px; color: #2d3748; font-weight: 700; line-height: 1.45; }
.cil-wrapper.cil-mens { border-color: #e8edf5; }
.cil-wrapper.cil-mens .cil-badge {
background: linear-gradient(135deg, #3d5a80 0%, #5b8ab0 100%);
box-shadow: 2px 2px 8px rgba(61,90,128,0.3);
}
.cil-wrapper.cil-mens .cil-title-en { color: #5b8ab0; }
.cil-wrapper.cil-mens .cil-title::after { background: linear-gradient(135deg, #3d5a80 0%, #5b8ab0 100%); }
.cil-wrapper.cil-mens .cil-list li a,
.cil-wrapper.cil-mens .cil-item { background: #f7f9fc !important; border-color: #c8d8e8 !important; }
.cil-wrapper.cil-mens .cil-list li a:hover,
.cil-wrapper.cil-mens .cil-item:hover { border-color: #5b8ab0 !important; background: #ffffff !important; }
.cil-wrapper.cil-mens .cil-list li a:hover::after,
.cil-wrapper.cil-mens .cil-item:hover::after { border-color: #5b8ab0 !important; }
.cil-wrapper.cil-mens .cil-list li a:active,
.cil-wrapper.cil-mens .cil-item:active { background: #edf2f7 !important; }
.cil-wrapper.cil-mens .cil-catch { background: linear-gradient(135deg, #3d5a80 0%, #5b8ab0 100%); }
.cil-wrapper.cil-mens .cil-intent { color: #2d6a9f; }
@media (max-width: 480px){
.cil-inner { padding: 32px 16px 20px; }
.cil-title { font-size: 17px; padding-bottom: 10px !important; }
.cil-desc { font-size: 12px; margin-bottom: 20px; }
.cil-list li a { padding: 13px 38px 13px 14px; }
.cil-catch { font-size: 11px; }
.cil-link-text { font-size: 13px; }
.cil-intent { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce){
.trend-header::before,
.trend-title,
.trend-title::after,
.trend-sp,
.acc-hint-arrow { animation: none !important; }
.pick-card, .comp-card,
.accordion-btn, .accordion-panel,
.acc-chevron svg { transition: none !important; }
}
.cta-arrow {
font-style: normal; font-size: 11px;
display: inline-block;
}
@media (prefers-reduced-motion: reduce){
.cta-arrow { transition: none; }
}
.ranking-list {
background: #f8f5f6;
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
-webkit-text-size-adjust: 100%;
color: #5c5260;
padding: 20px 12px 40px;
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
contain: layout style;
}
.rank-card {
background: #ffffff;
border: 1px solid #ede4e9;
border-radius: 14px;
box-shadow: 0 3px 14px rgba(100,60,80,.05);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
transition: box-shadow .2s ease, transform .2s ease;
will-change: transform;
}
@media (hover: hover) and (pointer: fine){
.rank-card:hover {
box-shadow: 0 6px 22px rgba(100,60,80,.10);
transform: translateY(-1px);
}
}
.rank-card[data-rank="1"] { border-left: 3px solid #c9a86c; }
.rank-card[data-rank="2"] { border-left: 3px solid #a0a8b8; }
.rank-card[data-rank="3"] { border-left: 3px solid #b8956a; }
.rank-badge-col {
flex-shrink: 0; width: 52px;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start;
padding: 16px 0 12px;
background: #faf5f7;
border-right: 1px solid #ede4e9;
}
.rank-num {
font-size: 20px; font-weight: 800; line-height: 1;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.rank-label {
font-size: 8px; font-weight: 700; letter-spacing: .08em;
font-family: 'Helvetica Neue', Arial, sans-serif;
margin-top: 2px;
}
.rank-card[data-rank="1"] .rank-num,
.rank-card[data-rank="1"] .rank-label { color: #c9a86c; }
.rank-card[data-rank="2"] .rank-num,
.rank-card[data-rank="2"] .rank-label { color: #a0a8b8; }
.rank-card[data-rank="3"] .rank-num,
.rank-card[data-rank="3"] .rank-label { color: #b8956a; }
.rank-card:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .rank-num,
.rank-card:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .rank-label {
color: #c99aa8;
}
.rank-img-col {
flex-shrink: 0; width: 118px;
padding: 14px 11px;
display: flex; align-items: flex-start; justify-content: center;
padding-top: 16px;
}
.rank-img-box {
position: relative;
width: 96px;
height: 96px;
border-radius: 12px;
overflow: hidden;
background: #f4f0f3;
border: 1px solid #ede4e9;
aspect-ratio: 1 / 1;
}
.rank-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity .3s ease;
}
.rank-img-box img[loading="lazy"] {
background-color: #f4f0f3;
}
.img-affil-link {
position: absolute; inset: 0; z-index: 2; display: block;
}
.rank-info-col {
flex: 1; padding: 14px 14px 12px 6px;
display: flex; flex-direction: column;
gap: 5px; min-width: 0;
}
.rank-brand {
font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
color: #c99aa8; text-transform: uppercase;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.rank-name {
font-size: 13.5px; font-weight: 800;
color: #3a3038; line-height: 1.45; letter-spacing: .02em;
word-break: break-all;
}
.rank-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
.tag {
display: inline-block; font-size: 9.5px; font-weight: 700;
padding: 2px 7px; border-radius: 20px;
font-family: 'Helvetica Neue', Arial, sans-serif;
letter-spacing: .04em; white-space: nowrap;
}
.tag-age   { background: #f0eaf4; color: #a898c0; border: 1px solid #ddd4ec; }
.tag-scent { background: #f4eee8; color: #a07850; border: 1px solid #e0cfb8; }
.tag-scene { background: #faf5f7; color: #b87888; border: 1px solid #ede4e9; }
.rank-price {
font-size: 14px; font-weight: 800; color: #3a3038;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.rank-price-note {
font-size: 10px; color: #8a7e8c;
font-family: 'Helvetica Neue', Arial, sans-serif;
margin-left: 4px; font-weight: 400;
}
.rank-impression {
font-size: 11.5px; color: #8a7e8c; line-height: 1.5;
}
.rank-impression strong { color: #b87888; font-weight: 700; }
.rank-cta {
border-top: 1px solid #ede4e9;
padding: 10px 14px;
display: flex;
justify-content: flex-end;
align-items: center;
background: #faf5f7;
}
.rank-cta a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: #b87888;
text-decoration: none;
font-family: 'Helvetica Neue', Arial, sans-serif;
letter-spacing: .04em;
background: #ffffff;
border: 1.5px solid #dbbac4;
border-radius: 20px;
padding: 8px 18px;
transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
box-shadow: 0 1px 4px rgba(184,120,136,.08);
}
@media (hover: hover) and (pointer: fine){
.rank-cta a:hover {
color: #9a5868;
border-color: #b87888;
background: #fff5f7;
box-shadow: 0 3px 10px rgba(184,120,136,.16);
}
}
.rank-cta a:active {
transform: scale(0.97);
}
.cta-arrow {
font-style: normal;
font-size: 11px;
display: inline-block;
}
.ranking-note {
font-size: 11px; color: #8a7e8c; line-height: 1.8;
margin-top: 4px; padding: 10px 14px;
background: #f4f0f3; border-radius: 8px;
border-left: 2px solid #e0d0d8;
}
@media (max-width: 480px){
.ranking-list { padding: 14px 8px 32px; }
.rank-badge-col { width: 44px; }
.rank-num { font-size: 17px; }
.rank-img-col { width: 100px; padding: 12px 8px; }
.rank-img-box { width: 80px; height: 80px; }
.rank-info-col { padding: 12px 10px 10px 4px; gap: 4px; }
.rank-name { font-size: 12.5px; }
.rank-price { font-size: 13px; }
.tag { font-size: 9px; padding: 2px 6px; }
.rank-cta { padding: 8px 12px; }
.rank-cta a {
font-size: 11.5px;
padding: 7px 14px;
}
}
@media (prefers-reduced-motion: reduce){
.rank-card { transition: none; will-change: auto; }
.rank-card:hover { transform: none; }
.rank-img-box img { transition: none; }
.rank-cta a { transition: none; }
}
.sgb-toc-menu,
.widget_sango_toc {
background: rgba(255, 255, 255, 0.7) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.04) !important;
border-radius: 16px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
margin: 0 0 30px 0 !important;
padding: 0 !important;
overflow: hidden !important;
will-change: transform;
}
.sgb-toc-menu__title,
.widgettitle {
background: transparent !important;
color: #1d1d1f !important;
font-size: 15px !important;
font-weight: 700 !important;
padding: 16px 20px !important;
margin: 0 !important;
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
}
.sgb-toc-menu__title i,
.widgettitle i {
display: none !important;
}
.sgb-toc-menu__title::before,
.widgettitle::before {
content: '📕' !important;
font-size: 16px !important;
margin-right: 10px !important;
background: #F2F2F7 !important;
padding: 6px !important;
border-radius: 8px !important;
line-height: 1 !important;
display: inline-block !important;
}
.toc_widget_list {
padding: 12px 12px 20px 12px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.toc_widget_list::before,
.toc_widget_list::after,
.toc_widget_list a::after,
.toc_widget_list a::before,
.navigator-child .navigator__indicator::before,
.navigator-child .navigator__indicator::after {
display: none !important;
}
.toc_widget_list a,
.navigator-child {
display: flex !important;
align-items: flex-start !important;
text-decoration: none !important;
padding: 8px 12px !important;
border-radius: 8px !important;
transition: background 0.2s ease !important;
}
@media (hover: hover) and (pointer: fine){
.toc_widget_list a:hover {
background: rgba(0, 0, 0, 0.02) !important;
}
}
.toc_widget_list ul ul,
.toc_widget_list li li {
margin-left: 14px !important;
}
.toc_widget_list ul ul a,
.toc_widget_list li li .navigator-child {
padding: 6px 12px !important;
}
.toc_widget_list .is-active,
.toc_widget_list .active,
.toc_widget_list li.active,
.toc_widget_list li.is-active {
background: transparent !important;
}
.toc_widget_list a.is-active,
.toc_widget_list a.active,
.navigator-child.is-active {
background: rgba(255, 45, 85, 0.04) !important;
}
@media (prefers-reduced-motion: reduce){
.toc_widget_list a,
.navigator-child,
.navigator__title,
.navigator__indicator {
transition: none !important;
}
}
@media screen and (max-width: 480px){
.sgb-toc-menu,
.widget_sango_toc {
margin: 0 0 20px 0 !important;
border-radius: 12px !important;
}
}
#toc_container {
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
border-radius: 20px !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
padding: 0 !important;
width: 100% !important;
max-width: 600px !important;
margin: 40px auto 60px auto !important;
overflow: hidden !important;
overflow: clip !important;
display: block !important;
position: relative !important;
}
.toc_title {
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
background: rgba(255, 255, 255, 0.90) !important;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 20px 24px !important;
margin: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
will-change: transform;
}
.toc_title::before,
.toc_title::after {
content: none !important;
display: none !important;
}
.toc_title .toc-icon-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
background: #F2F2F7 !important;
border-radius: 12px !important;
margin-right: 16px !important;
flex-shrink: 0 !important;
font-size: 0 !important;
color: transparent !important;
}
.toc_title .toc-icon-wrap svg,
.toc_title .toc-icon-wrap i,
.toc_title .toc-icon-wrap img {
display: none !important;
}
.toc_title .toc-icon-wrap::before {
content: '📕' !important;
font-size: 24px !important;
line-height: 1 !important;
color: initial !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
.toc_title .toc-text-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.toc_title .toc-main-title {
font-size: 20px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.toc_title .toc-sub-text {
font-size: 12px !important;
font-weight: 400 !important;
color: #86868b !important;
line-height: 1.4 !important;
margin-top: 4px !important;
}
.toc_list {
padding: 12px 0 !important;
margin: 0 !important;
max-height: 65vh !important;
overflow-y: auto !important;
}
.toc_list li, .toc_list ol, .toc_list ul,
.toc_list ol li, .toc_list ul li {
list-style: none !important;
background: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.toc_list > li > a {
display: flex !important;
align-items: center !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #1d1d1f !important;
padding: 14px 24px !important;
text-decoration: none !important;
line-height: 1.5 !important;
transition: background 0.2s ease !important;
}
.toc_list > li > a:active {
background: rgba(0, 0, 0, 0.05) !important;
}
.toc_list > li > a:focus-visible,
.toc_list ol li a:focus-visible,
.toc_list ul li a:focus-visible {
outline: 2px solid #ff2d55 !important;
outline-offset: -2px !important;
border-radius: 6px !important;
background: rgba(255, 45, 85, 0.04) !important;
}
.toc_list > li > a::before {
content: '' !important;
display: inline-block !important;
width: 8px !important;
height: 8px !important;
background-color: #ff2d55 !important;
border-radius: 50% !important;
margin-right: 12px !important;
flex-shrink: 0 !important;
}
.toc_list ol,
.toc_list ul {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.toc_list ol li,
.toc_list ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
margin-left: 28px !important;
}
.toc_list ol li:last-child,
.toc_list ul li:last-child {
border-bottom: none !important;
}
.toc_list ol li a,
.toc_list ul li a {
display: block !important;
font-size: 14px !important;
color: #424245 !important;
padding: 12px 16px 12px 24px !important;
text-decoration: none !important;
position: relative !important;
}
.toc_list ol li a:active,
.toc_list ul li a:active {
background: rgba(0, 0, 0, 0.03) !important;
}
.toc_list ol li a::before,
.toc_list ul li a::before {
content: '' !important;
position: absolute !important;
left: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 4px !important;
height: 4px !important;
background: linear-gradient(135deg, #007aff, #ff2d55) !important;
border-radius: 50% !important;
}
@media (prefers-reduced-motion: reduce){
.toc_list > li > a,
.toc_list ol li a,
.toc_list ul li a {
transition: none !important;
}
.toc_title {
will-change: auto !important;
}
}
@media screen and (max-width: 768px){
#toc_container {
margin: 30px 16px !important;
width: auto !important;
}
.toc_title {
padding: 16px 20px !important;
}
.toc_list > li > a {
padding: 14px 20px !important;
font-size: 16px !important;
}
.toc_list ol li,
.toc_list ul li {
margin-left: 24px !important;
}
.toc_list ol li a,
.toc_list ul li a {
padding-left: 20px !important;
font-size: 14px !important;
}
}
.credit-box { display: none !important; }
div.yyi-rinker-contents {
margin: 40px 0 !important;
display: flex !important;
justify-content: center !important;
}
div.yyi-rinker-box {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
max-width: 480px !important;
background: #ffffff !important;
border: 1px solid #f0f0f5 !important;
border-radius: 20px !important;
box-shadow: 0 12px 36px rgba(0,0,0,0.06) !important;
padding: 32px 24px !important;
box-sizing: border-box !important;
contain: layout style !important;
}
div.yyi-rinker-image {
width: 100% !important;
margin: 0 0 24px 0 !important;
display: flex !important;
justify-content: center !important;
}
div.yyi-rinker-image img {
max-width: 100% !important;
max-height: 200px !important;
object-fit: contain !important;
box-shadow: none !important;
}
.yyi-rinker-images-arrow,
.yyi-rinker-images-arrow-left,
.yyi-rinker-images-arrow-right,
.yyi-rinker-slider-prev,
.yyi-rinker-slider-next,
.yyi-rinker-slider-dots,
div.yyi-rinker-detail { display: none !important; }
div.yyi-rinker-info {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
div.yyi-rinker-title {
margin-bottom: 24px !important;
text-align: center !important;
width: 100% !important;
}
div.yyi-rinker-title a {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.5 !important;
text-decoration: none !important;
background: linear-gradient(90deg, #1A56DB 0%, #9333EA 50%, #EA580C 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
display: inline-block !important;
}
.rinker-stock-badge {
display: inline-flex !important;
align-items: center !important;
background: #f0fdf4 !important;
color: #16a34a !important;
border: 1px solid #bbf7d0 !important;
padding: 4px 14px !important;
border-radius: 20px !important;
font-size: 11px !important;
font-weight: 700 !important;
margin: -12px auto 20px auto !important;
letter-spacing: 0.05em !important;
}
.rinker-stock-badge i {
margin-right: 6px !important;
font-size: 12px !important;
}
.yyi-rinker-social-proof {
display: block !important;
background: #fffafa !important;
border: 1px solid #ffe4e6 !important;
border-radius: 12px !important;
padding: 20px 16px !important;
margin: 0 0 24px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
box-shadow: inset 0 2px 10px rgba(225, 29, 72, 0.02) !important;
}
.social-proof-stats {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #111827 !important;
margin-bottom: 16px !important;
}
.live-pulse {
display: block !important;
width: 10px !important;
height: 10px !important;
background-color: #e11d48 !important;
border-radius: 50% !important;
will-change: transform !important;
animation: live-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}
@keyframes live-ping {
0%   { transform: scale(0.95); box-shadow: 0 0 0 0   rgba(225, 29, 72, 0.7); }
70%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0   rgba(225, 29, 72, 0); }
}
@media (prefers-reduced-motion: reduce){
.live-pulse { animation: none !important; opacity: 0.7 !important; }
}
.social-proof-number {
color: #ffffff !important;
background: #e11d48 !important;
font-weight: 800 !important;
font-size: 16px !important;
padding: 3px 10px !important;
border-radius: 6px !important;
margin: 0 4px !important;
box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25) !important;
display: inline-block !important;
}
.social-proof-message {
background: #ffffff !important;
border: 1px dashed #fecdd3 !important;
border-radius: 8px !important;
padding: 14px 12px !important;
font-size: 13.5px !important;
color: #374151 !important;
text-align: center !important;
line-height: 1.6 !important;
}
.sp-highlight {
color: #be123c !important;
font-weight: 800 !important;
background: linear-gradient(transparent 60%, #ffe4e6 60%) !important;
padding: 0 2px !important;
display: inline !important;
}
.rinker-promo-chat {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
width: 100% !important;
margin: 0 0 20px 0 !important;
padding: 16px !important;
background: #f8fafc !important;
border-radius: 12px !important;
box-sizing: border-box !important;
border: 1px dashed #cbd5e1 !important;
}
.chat-avatar {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex-shrink: 0 !important;
width: 50px !important;
}
.chat-avatar img {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
object-fit: cover !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
border: 2px solid #ffffff !important;
}
.chat-name {
font-size: 10px !important;
color: #64748b !important;
margin-top: 6px !important;
font-weight: 700 !important;
}
.chat-bubble {
position: relative !important;
background: #ffffff !important;
padding: 14px 16px !important;
border-radius: 0 12px 12px 12px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
border: 1px solid #e2e8f0 !important;
font-size: 13px !important;
color: #334155 !important;
line-height: 1.6 !important;
font-weight: 600 !important;
width: 100% !important;
}
.chat-bubble::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -8px !important;
width: 0 !important;
height: 0 !important;
border-style: solid !important;
border-width: 0 8px 10px 0 !important;
border-color: transparent #ffffff transparent transparent !important;
}
ul.yyi-rinker-links {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
ul.yyi-rinker-links li {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
ul.yyi-rinker-links li > span:not(.kaolig-micro-copy),
ul.yyi-rinker-links li > div:not(.kaolig-micro-copy) { display: none !important; }
.kaolig-micro-copy {
display: block !important;
font-size: 11.5px !important;
font-weight: 800 !important;
margin-bottom: 6px !important;
letter-spacing: 0.05em !important;
text-align: center !important;
transition: opacity 0.2s ease !important;
opacity: 0.9 !important;
}
.micro-amazon  { color: #d97706 !important; }
.micro-rakuten { color: #be123c !important; }
.micro-yahoo   { color: #0369a1 !important; }
ul.yyi-rinker-links li a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 54px !important;
border-radius: 10px !important;
font-weight: 700 !important;
font-size: 15px !important;
color: #fff !important;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
position: relative !important;
overflow: hidden !important;
box-sizing: border-box !important;
z-index: 1 !important;
will-change: transform !important;
}
li.amazonlink a  { background: linear-gradient(135deg, #FF9900, #FFB84D) !important; }
li.rakutenlink a { background: linear-gradient(135deg, #BF0000, #E60000) !important; }
li.yahoolink a   { background: linear-gradient(135deg, #0073C6, #009AD6) !important; }
ul.yyi-rinker-links li a::before,
ul.yyi-rinker-links li a::after {
display: none !important;
content: none !important;
animation: none !important;
}
@media (hover: hover) and (pointer: fine){
ul.yyi-rinker-links li:hover a {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
opacity: 0.95 !important;
}
ul.yyi-rinker-links li:hover .kaolig-micro-copy { opacity: 1 !important; }
}
ul.yyi-rinker-links li:active a {
transform: translateY(1px) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
transition: transform 0.05s, box-shadow 0.05s !important;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 4px 12px rgba(219, 39, 119, 0.4); }
50%       { box-shadow: 0 4px 20px rgba(219, 39, 119, 0.8); }
}
@media (prefers-reduced-motion: reduce){
@keyframes pulse {
0%, 100% { opacity: 1; }
}
}
@media screen and (max-width: 600px){
div.yyi-rinker-box        { padding: 24px 16px !important; border-radius: 16px !important; }
div.yyi-rinker-title a    { font-size: 16px !important; }
.yyi-rinker-social-proof  { padding: 16px 12px !important; margin: 0 0 20px 0 !important; }
.social-proof-stats       { font-size: 14px !important; gap: 6px !important; }
.social-proof-number      { font-size: 15px !important; }
.social-proof-message     { font-size: 13px !important; padding: 12px 10px !important; }
.rinker-promo-chat        { padding: 12px !important; gap: 8px !important; margin-bottom: 16px !important; }
.chat-bubble              { font-size: 12px !important; padding: 12px !important; }
.chat-avatar              { width: 44px !important; }
.chat-avatar img          { width: 38px !important; height: 38px !important; }
ul.yyi-rinker-links li a  { height: 50px !important; font-size: 14px !important; }
.kaolig-micro-copy        { font-size: 10px !important; }
}
@keyframes fadeSlideDown {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flow-bar {
0% {
max-width: 0%;
}
100% {
max-width: 100%;
}
}
@keyframes card-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.progress-indicator {
position: fixed;
left: 20px;
bottom: 110px;
width: 60px;
height: 60px;
z-index: 9999;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
will-change: transform, opacity;
}
.progress-indicator.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 768px){
.progress-indicator {
left: 16px;
bottom: 100px;
width: 52px;
height: 52px;
}
}
.progress-circle {
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.progress-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
overflow: visible;
}
.progress-bg {
fill: none;
stroke: rgba(0, 0, 0, 0.06);
stroke-width: 3;
}
.progress-bar {
fill: none;
stroke: url(#brand-gradient);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 0 999;
transition: stroke-dashoffset 0.1s linear;
}
.progress-text {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
font-size: 13px;
font-weight: 700;
color: #1d1d1f;
font-feature-settings: "tnum";
transition: opacity 0.3s;
}
@media (max-width: 768px){
.progress-text { font-size: 11px; }
}
.progress-indicator.completed .progress-circle {
transform: scale(1.1);
background: #ffffff;
box-shadow: 0 12px 36px rgba(236, 72, 117, 0.25);
border-color: rgba(236, 72, 117, 0.2);
}
.progress-indicator.completed .progress-text {
opacity: 0;
}
.progress-indicator.completed::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%) scale(0);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='url(%23grad)' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23a855f7'/%3E%3Cstop offset='100%25' stop-color='%23f97316'/%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
animation: pop-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pop-check {
0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
50%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
.progress-indicator {
transition: opacity 0.3s ease;
}
.progress-indicator.is-visible {
transform: translateY(0);
}
.progress-circle {
transition: none;
}
.progress-bar {
transition: stroke-dashoffset 0.05s linear;
}
.progress-text {
transition: none;
}
@keyframes pop-check {
0%   { opacity: 0; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
}
.cf7__list {
position: relative !important;
display: flex !important;
flex-direction: column !important;
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(25px) saturate(180%) !important;
-webkit-backdrop-filter: blur(25px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
border-radius: 24px !important;
padding: 32px 24px 40px 24px !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
margin-bottom: 40px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.cf7__list dt:has(+ dd input.wpcf7-text), .cf7__list dd:has(input.wpcf7-text) { display: none !important; }
#remaining-badge {
position: absolute !important; top: -14px !important; left: 50% !important; transform: translateX(-50%) !important;
background: linear-gradient(135deg, #FF2D55, #FF375F) !important; color: #fff !important;
font-size: 13px !important; font-weight: 700 !important; padding: 6px 16px !important; border-radius: 20px !important;
box-shadow: 0 4px 16px rgba(255, 45, 85, 0.4) !important; z-index: 10 !important;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; display: flex; align-items: center; gap: 4px;
}
#remaining-badge.is-completed {
background: linear-gradient(135deg, #34C759, #30B350) !important;
box-shadow: 0 4px 16px rgba(52, 199, 89, 0.4) !important;
}
.cf7__list dt {
width: 100% !important; padding: 0 !important; margin-top: 24px !important; margin-bottom: 12px !important;
font-weight: 700 !important; color: #1d1d1f !important; font-size: 17px !important; line-height: 1.4 !important;
display: flex !important; align-items: center !important; gap: 12px !important; border-bottom: none !important;
}
.cf7__list dt:first-of-type { margin-top: 0 !important; }
.cf7__required { background: #FF2D55 !important; margin: 0 !important; padding: 4px 10px !important; font-size: 11px !important; border-radius: 6px !important; color: #fff !important; font-weight: 700 !important; flex-shrink: 0 !important; line-height: 1 !important; }
.cf7__optional { background: #86868b !important; margin: 0 !important; padding: 4px 10px !important; font-size: 11px !important; border-radius: 6px !important; color: #fff !important; font-weight: 700 !important; flex-shrink: 0 !important; line-height: 1 !important; }
.cf7__list dd {
width: 100% !important; margin: 0 !important; padding-bottom: 20px !important;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.cf7__list dd:last-of-type { border-bottom: none !important; }
.wpcf7-list-item { display: inline-block !important; margin: 0 10px 12px 0 !important; }
.wpcf7-list-item input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
.wpcf7-list-item label {
display: inline-block !important; padding: 12px 24px !important; background: rgba(255,255,255,0.8) !important;
border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 50px !important; font-size: 15px !important;
font-weight: 500 !important; color: #1d1d1f !important; cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
backdrop-filter: blur(5px);
}
.wpcf7-list-item label:hover {
background: rgba(255,255,255,1) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
.wpcf7-list-item input:checked + span, .wpcf7-list-item input:checked + label {
background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
color: #ffffff !important; border-color: transparent !important;
box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4) !important;
font-weight: 600 !important;
transform: translateY(-1px) !important;
}
.item-vanishing {
animation: appleFadeOut 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
pointer-events: none !important;
}
@keyframes appleFadeOut {
0% { transform: scale(1); opacity: 1; max-height: 200px; margin-bottom: 20px; filter: blur(0); }
100% { transform: scale(0.95) translateY(-20px); opacity: 0; max-height: 0; margin-bottom: 0; padding: 0; filter: blur(10px); }
}
.agree-section {
display: flex !important; flex-direction: column !important; align-items: center !important;
width: 100% !important; margin: 30px 0 20px 0 !important;
}
.wpcf7-acceptance { display: flex !important; justify-content: center !important; width: 100% !important; }
.wpcf7-acceptance label {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
padding: 14px 28px !important;
border: 1px solid rgba(0,0,0,0.1) !important;
border-radius: 50px !important;
background: rgba(255,255,255,0.8) !important;
color: #1d1d1f !important; font-size: 15px !important; font-weight: 600 !important;
cursor: pointer !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
backdrop-filter: blur(5px); box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
min-width: 260px !important;
}
.wpcf7-acceptance label:hover {
background: rgba(255,255,255,1) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
.wpcf7-acceptance input { display: none !important; }
.wpcf7-acceptance label:has(input:checked) {
background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
border-color: transparent !important;
color: #ffffff !important;
box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4) !important;
}
.wpcf7-acceptance label:has(input:checked)::before {
content: '✓' !important; margin-right: 8px !important; font-weight: 800 !important; font-size: 16px !important; color: #ffffff !important;
}
.cf7__button {
text-align: center !important;
margin-top: 10px !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.wpcf7-submit {
appearance: none !important; border: none !important; width: 100% !important; max-width: 360px !important;
padding: 18px 0 !important; font-size: 17px !important; font-weight: 700 !important;
border-radius: 50px !important; cursor: pointer !important;
background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
background-size: 200% auto !important; color: #ffffff !important;
box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4) !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
pointer-events: auto !important; opacity: 1 !important;
}
.wpcf7-submit:hover {
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 12px 32px rgba(236, 72, 153, 0.5) !important;
}
div.wpcf7-response-output {
border: none !important;
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-radius: 24px !important;
padding: 30px !important;
margin: 20px 0 !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
text-align: center !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #1d1d1f !important;
line-height: 1.6 !important;
animation: fadeUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
opacity: 0;
transform: translateY(20px);
}
div.wpcf7-mail-sent-ok {
border: 1px solid rgba(52, 199, 89, 0.3) !important;
}
div.wpcf7-mail-sent-ok::before {
content: '🎉';
display: block;
font-size: 40px;
margin-bottom: 16px;
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px){
.cf7__list { padding: 36px 20px 30px 20px !important; }
.wpcf7-list-item label, .wpcf7-acceptance label, .wpcf7-submit { width: 100% !important; text-align: center; max-width: none !important; }
}
@keyframes toc-pulse {
0%   { transform: scale(1); }
50%  { transform: scale(1.08); }
100% { transform: scale(1); }
}
@keyframes toc-bounce {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-6px); }
}
a.sgb-toc-button.js-toc-button.block {
width: 64px;
height: 64px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
90deg,
#4FA0F9 0%,
#B558D1 50%,
#EC4C75 100%
) !important;
color: #ffffff !important;
border-radius: 50% !important;
border: none !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
font-size: 1.4rem !important;
animation:
toc-pulse 2.5s ease-in-out infinite,
toc-bounce 3s ease-in-out infinite;
}
.toc-return-btn {
display: block !important;
margin: 32px auto 24px auto !important;
width: -webkit-fit-content !important;
width: fit-content !important;
padding: 12px 28px !important;
font-family: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 1px !important;
border-radius: 50px !important;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
) !important;
background-size: 200% 200% !important;
color: #fff !important;
text-decoration: none !important;
border: none !important;
cursor: pointer !important;
box-shadow:
0 8px 32px rgba(102, 126, 234, 0.4),
0 4px 16px rgba(118, 75, 162, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
transition:
transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.4s ease,
filter 0.2s ease !important;
animation: gentleFloat 3s ease-in-out infinite !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
backface-visibility: hidden !important;
will-change: transform !important;
position: relative !important;
overflow: hidden !important;
contain: layout style !important;
}
@media (hover: hover) and (pointer: fine){
.toc-return-btn:hover {
animation-play-state: paused !important;
transform: translateY(-4px) scale(1.05) !important;
background-position: 100% 0 !important;
box-shadow:
0 12px 40px rgba(102, 126, 234, 0.5),
0 6px 20px rgba(118, 75, 162, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
filter: brightness(1.1) !important;
}
.toc-return-btn:hover::before {
left: 100% !important;
}
}
.toc-return-btn:active {
transform: translateY(-2px) scale(1.02) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
@media (max-width: 768px){
.toc-return-btn {
font-size: 12px !important;
padding: 10px 22px !important;
margin: 24px auto 16px auto !important;
}
}
.toc-return-btn::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
) !important;
transition: left 0.8s ease !important;
border-radius: 50px !important;
z-index: 1 !important;
}
@keyframes gentleFloat {
0%   { transform: translateY(0); }
50%  { transform: translateY(-6px); }
100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.toc-return-btn {
animation: none !important;
will-change: auto !important;
transition: none !important;
transform: none !important;
}
.toc-return-btn:hover {
transform: none !important;
filter: brightness(1.1) !important;
}
.toc-return-btn::before {
transition: none !important;
}
.toc-return-btn:active {
transform: none !important;
transition: none !important;
}
}
html {
scroll-behavior: smooth !important;
scroll-padding-top: 50px !important;
}
.sgb-heading__inner.sgb-heading--type4,
.sgb-heading__inner.sgb-heading--type4 .sgb-heading__text,
.sgb-heading__inner.sgb-heading--type4 strong,
.sgb-heading__inner.sgb-heading--type4 * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.toc_container .toc_list li a {
padding: 6px 16px !important;
font-size: 14px !important;
}
.keb-summary{padding:10px 14px !important;}
.keb-icon{width:28px !important;height:28px !important;font-size:14px !important;}
.keb-main{font-size:12px !important;line-height:1.5 !important;}
.mtb-header{padding:6px 0 !important;}
.mtb-stat{font-size:12px !important;}
a.mtb-item{padding:10px 12px !important;}
.mtb-av,.mtb-av-bg{width:36px !important;height:36px !important;}
.mtb-desc{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden !important;}
.toc_container ol.toc_list{max-height:420px !important;}