/* =================================================================
   retopo.css　全ページ共通（案A「全力平成」：ホームページビルダー × 前略プロフ）
   色は :root の変数を使う。色コードを直接書かない
================================================================= */

/* ---------- 基準値 ---------- */
:root{
  --pink:#F48CB0; --pink-d:#e2578b; --pink-l:#ffe3ef; --pink-ll:#fff4f8; --pink-bg:#ffd6e7; --pink-dash:#f6b6cd;
  --aqua:#7DCFDA; --aqua-d:#2fa4b4; --aqua-l:#e3f6f8;
  --yellow:#fff27a; --yellow-d:#e0b400;
  --ink:#4a3540; --white:#fff; --link:#1a5fd1; --red:#ff1a1a;
  /* お知らせのカテゴリ */
  --c-announce:#2fa4b4; --c-press:#e2578b; --c-collab:#8a5cc7; --c-campaign:#e07b00; --c-other:#8a7d84;
  --font:'M PLUS Rounded 1c',sans-serif;
  --pop:'Mochiy Pop One','M PLUS Rounded 1c',sans-serif;
}

/* ---------- リセット・文字組み ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font);font-size:15px;line-height:1.8;color:var(--ink);background:var(--pink-bg);-webkit-font-smoothing:antialiased;
  /* 日本語は文節の切れ目（書き出し時に入れる <wbr>）でだけ改行する。長い英数字ははみ出さないよう折り返す */
  word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--aqua-d);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.empty{color:var(--c-other);font-size:14px;padding:8px 0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- 背景と外枠 ---------- */
.bg{
  background-color:var(--pink-bg);
  background-image:
    radial-gradient(circle at 25% 25%, var(--white) 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(255,255,255,.45) 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.45) 50%, transparent 50%);
  background-size:48px 48px,24px 24px,24px 24px;
  min-height:100vh;padding:16px 10px 80px;
}
.site{
  max-width:880px;margin:0 auto;background:var(--white);
  border:4px double var(--pink);border-radius:6px;
  box-shadow:0 0 0 6px var(--pink-l),0 0 0 8px var(--pink);
}

/* ---------- ヘッダー ---------- */
.site-head{padding:18px 70px 10px;text-align:center;background:linear-gradient(var(--white),#fff0f6)}
.site-head .logo{display:block;width:min(420px,100%);margin:0 auto}
.site-head .catch{font-family:var(--pop);font-size:clamp(15px,3.6vw,20px);color:var(--pink-d);margin-top:6px;letter-spacing:.04em}
@media(max-width:560px){.site-head{padding:14px 64px 8px 14px}}
.bar{
  background:linear-gradient(#9fe3ec,#5cc3d1);color:var(--white);font-weight:800;font-size:14px;
  padding:6px 0;border-top:2px solid var(--white);border-bottom:2px solid var(--white);text-shadow:1px 1px 0 #2a8f9c;
}
.marquee{overflow:hidden;white-space:nowrap}
.marquee > div{display:inline-block;padding-left:100%;white-space:nowrap;word-break:normal;animation:mq 26s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}

/* ---------- 2段組み ---------- */
.layout{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:14px}
.layout > *{min-width:0}
@media(max-width:720px){.layout{grid-template-columns:1fr}}

/* ---------- サイドメニュー ---------- */
.side .box{border:2px solid var(--pink);border-radius:8px;overflow:hidden;margin-bottom:12px;background:var(--pink-ll)}
.box-ttl,.ttl,.fab-ttl{
  font-family:var(--pop);font-weight:400;font-size:15px;color:var(--white);text-align:center;
  background:linear-gradient(90deg,var(--pink),#ffb3cf,var(--aqua));padding:6px 8px;
  text-shadow:1px 1px 0 var(--pink-d);letter-spacing:.06em;line-height:1.5;
}
.side ul{list-style:none;padding:8px 10px}
.side li a{display:block;text-decoration:none;font-weight:700;padding:5px 4px;border-bottom:1px dashed var(--pink-dash)}
.side li a::before{content:"♪";color:var(--pink);margin-right:6px}
.side li a:hover{background:var(--yellow)}
/* PCでは右上のメニューがあるので、左のメニューは出さない（スマホでは上に出す） */
@media(min-width:721px){.side .side-nav{display:none}}
.side .girl{padding:8px}
.side .girl p{font-size:12px;text-align:center;font-weight:700;color:var(--pink-d)}
@media(max-width:720px){
  .side{order:-1}
  .side ul{display:flex;flex-wrap:wrap;gap:4px 8px}
  .side li a{border-bottom:0;padding:3px 2px;font-size:14px}
  .side .girl,.side .ig,.side .counter-box{display:none}
}

/* ---------- 本文ボックス ---------- */
.main > .sec{border:2px solid var(--pink);border-radius:8px;overflow:hidden;margin-bottom:16px;background:var(--white)}
.main .in{padding:14px 16px}
.ttl{font-size:17px;text-align:left;padding:8px 14px}
.ttl::before{content:"★☆ "}
.ttl::after{content:" ☆★"}
.lead{font-family:var(--pop);font-size:clamp(16px,4vw,20px);color:var(--pink-d);text-align:center;margin:4px 0 10px;line-height:1.6}
.lead em{font-style:normal;color:var(--aqua-d)}
.more{text-align:right;margin-top:8px;font-weight:700}
.more a,.main .in > p a,.acc a{color:var(--link)}
.more.back{text-align:left;margin-top:20px}

/* ---------- プリクラ風スライド ---------- */
.puri{
  position:relative;margin:4px auto 6px;width:min(100%,520px);aspect-ratio:1/1;
  border:10px solid var(--white);outline:4px dotted var(--pink);outline-offset:-2px;border-radius:14px;
  box-shadow:0 0 0 6px var(--pink-l);
}
.slides{position:absolute;inset:0;overflow:hidden;border-radius:6px;background:var(--pink-l)}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.slides img.on{opacity:1}
.puri .stamp{position:absolute;z-index:2;font-family:var(--pop);color:var(--white);-webkit-text-stroke:1px var(--pink-d);text-shadow:2px 2px 0 var(--pink-d)}
.puri .s1{left:10px;top:8px;font-size:clamp(18px,4.6vw,28px);transform:rotate(-8deg)}
.puri .s2{right:10px;bottom:10px;font-size:clamp(14px,3.6vw,20px);transform:rotate(6deg)}
.puri .s3{right:14px;top:10px;font-size:30px;color:var(--yellow);-webkit-text-stroke:1px var(--yellow-d);text-shadow:none}
.welcome{text-align:center;font-weight:800;color:var(--aqua-d);margin-top:10px}

/* ---------- メディア掲載（流れるロゴ） ---------- */
.logos{overflow:hidden}
.logos .track{display:flex;gap:16px;width:max-content;animation:lg 36s linear infinite}
.logos:hover .track{animation-play-state:paused}
@keyframes lg{to{transform:translateX(calc(-50% - 8px))}}
.logos .item{
  flex:0 0 auto;min-width:140px;height:64px;padding:6px 14px;border:2px solid var(--pink);border-radius:6px;background:var(--pink-ll);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--pink-d);white-space:nowrap;
}
.logos .item.has-logo{background:var(--white)}
.logos .item img{max-height:48px;max-width:180px;width:auto;height:auto;object-fit:contain}

/* ---------- お知らせ ---------- */
.news{list-style:none}
.news li{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;padding:8px 0;border-bottom:1px dashed var(--pink-dash)}
.news li a{flex-basis:100%}
.news li[hidden]{display:none}
.news time{font-weight:800;color:var(--pink-d);margin-right:8px}
.news a{color:var(--link)}
.new{
  display:inline-block;font:800 11px/1 sans-serif;color:var(--white);background:var(--red);padding:3px 5px;margin-right:6px;
  animation:blink 1s steps(1) infinite;vertical-align:2px;
}
@keyframes blink{50%{opacity:0}}
/* カテゴリ（お知らせ・メディア掲載・コラボ実施・キャンペーン・その他） */
.cat{
  display:inline-block;font:800 11px/1 var(--font);color:var(--white);background:var(--c,var(--c-other));
  padding:4px 8px 3px;border-radius:999px;margin-right:8px;vertical-align:2px;border:1.5px solid var(--white);box-shadow:0 0 0 1.5px var(--c,var(--c-other));
}
.c-announce{--c:var(--c-announce)} .c-press{--c:var(--c-press)} .c-collab{--c:var(--c-collab)}
.c-campaign{--c:var(--c-campaign)} .c-other{--c:var(--c-other)} .c-all{--c:var(--ink)}
/* 一覧ページの絞り込み */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filters button{
  font:800 13px/1 var(--font);color:var(--c);background:var(--white);border:2px solid var(--c);
  padding:8px 14px;border-radius:999px;
}
.filters button[aria-pressed=true],.filters button:hover{background:var(--c);color:var(--white)}

/* ---------- 記事 ---------- */
.article .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.article .meta time{font-weight:800;color:var(--pink-d);margin-right:4px}
.article .upd{font-size:12px;color:var(--c-other);margin-right:6px}
.article h1{font-family:var(--pop);font-weight:400;font-size:clamp(18px,4.4vw,24px);line-height:1.5;color:var(--pink-d);margin:10px 0 14px;padding-bottom:10px;border-bottom:3px dotted var(--pink)}
.article .body > * + *{margin-top:14px}
.article .body h2{font-size:17px;color:var(--white);background:var(--pink);padding:4px 12px;border-radius:6px;margin-top:24px}
.article .body h3{font-size:16px;color:var(--aqua-d);border-left:6px solid var(--aqua);padding-left:8px;margin-top:20px}
.article .body ul,.article .body ol{padding-left:1.4em}
.article .body a:not(.btn){color:var(--link)}
.article .lead-text{font-weight:800;font-size:16px}
.article blockquote{border:2px dashed var(--aqua);background:var(--aqua-l);border-radius:8px;padding:10px 14px}
.article blockquote cite{display:block;font-size:12px;font-style:normal;margin-top:4px}
.article figure img{border:6px solid var(--white);box-shadow:0 2px 6px rgba(0,0,0,.18);border-radius:4px}
.article figcaption{font-size:12px;margin-top:4px}
.article hr{border:0;border-top:2px dashed var(--pink-dash)}
.notice{border:2px solid var(--yellow-d);background:#fffbd6;border-radius:8px;padding:10px 14px}
.notice b{color:#a07a00}

/* ---------- プロフ表・できること ---------- */
.prof{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--pink);border-radius:6px;overflow:hidden}
.prof th,.prof td{padding:8px 10px;text-align:left;vertical-align:top;font-size:14px}
.prof th{width:8.5em;background:var(--pink);color:var(--white);font-weight:800;white-space:nowrap}
.prof tr:nth-child(odd) td{background:var(--pink-ll)}
.prof tr:nth-child(even) td{background:var(--white)}
@media(max-width:420px){.prof th{width:auto}.prof th,.prof td{display:block;width:100%}.prof th{padding:5px 10px}}
.can{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:560px){.can{gap:8px}.can b{font-size:13px}.can div{padding:6px}}
.can div{border:2px dashed var(--aqua);border-radius:10px;padding:8px;background:var(--aqua-l);text-align:center;line-height:1.4}
.can img{border:4px solid var(--white);border-radius:6px;margin-bottom:6px;width:100%}
.can b{color:var(--aqua-d)}

/* シール交換のおすすめ */
.pickup{margin-top:14px;border:3px dashed var(--pink);border-radius:12px;background:var(--pink-ll);padding:12px 14px;text-align:center}
.pickup-ttl{font-family:var(--pop);color:var(--pink-d);font-size:clamp(15px,3.8vw,18px);margin-bottom:4px}
.pickup p:not(.pickup-ttl){font-size:14px}
.pickup-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 10px}
.pickup-photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border:5px solid var(--white);box-shadow:0 2px 6px rgba(0,0,0,.15);transform:rotate(-2deg)}
.pickup-photos img:nth-child(2){transform:rotate(2deg)}

/* ---------- お部屋のようす（横長のスライド） ---------- */
.room{
  position:relative;aspect-ratio:16/9;border:8px solid var(--white);outline:3px dotted var(--aqua);outline-offset:-2px;
  border-radius:12px;box-shadow:0 0 0 5px var(--aqua-l);
}

/* ---------- ギャラリー ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:560px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border:6px solid var(--white);box-shadow:0 2px 6px rgba(0,0,0,.18);transform:rotate(-2deg)}
.gal img:nth-child(even){transform:rotate(2deg)}

/* ---------- アクセス ---------- */
.entrance{margin-bottom:12px}
.entrance img{width:100%;border:6px solid var(--white);box-shadow:0 2px 6px rgba(0,0,0,.18);border-radius:4px}
.entrance figcaption{font-size:13px;font-weight:800;color:var(--aqua-d);text-align:center;margin-top:4px}
.acc{width:100%;border:3px double var(--aqua-d)}
.acc th,.acc td{border:1px solid var(--aqua);padding:8px 10px;text-align:left;vertical-align:top;font-size:14px}
.acc th{width:7em;background:var(--aqua-l);color:var(--aqua-d);white-space:nowrap}
@media(max-width:420px){.acc th{width:5.5em;padding:8px 6px}}
.info{list-style:none;margin-top:10px;font-size:14px}
.info li{padding-left:1.2em;text-indent:-1.2em}
.info li::before{content:"★";color:var(--pink);margin-right:4px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{
  display:inline-block;text-decoration:none;font-weight:800;color:var(--white);padding:8px 18px;border-radius:999px;
  background:linear-gradient(#ffa6c6,var(--pink-d));border:2px solid var(--white);box-shadow:0 0 0 2px var(--pink-d);
}
.btn.aq{background:linear-gradient(#a6e7ef,var(--aqua-d));box-shadow:0 0 0 2px var(--aqua-d)}
.btn:hover{filter:brightness(1.08)}

/* ---------- リンク（バナー） ---------- */
.banners{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:860px){.banners{grid-template-columns:1fr 1fr}}
.banners a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:58px;padding:6px 8px;text-decoration:none;color:var(--white);
  border:2px outset rgba(255,255,255,.8);border-radius:4px;text-shadow:1px 1px 0 rgba(0,0,0,.25);
  box-shadow:2px 2px 0 rgba(0,0,0,.15);transition:transform .15s;
}
.banners a:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(0,0,0,.2)}
.banners small{font:700 11px/1.3 var(--font);opacity:.95}
.banners b{font:400 15px/1.3 var(--pop);letter-spacing:.03em}
@media(max-width:420px){.banners{gap:8px}.banners b{font-size:13px}.banners small{font-size:10px}}

/* ---------- フッター ---------- */
.site-foot{text-align:center;font-size:12px;padding:14px;border-top:2px dashed var(--pink);background:var(--pink-ll)}
.site-foot .to-top{display:inline-block;margin-bottom:6px;font-weight:700;color:var(--link)}
.site-foot .counter{margin-bottom:10px}

/* ---------- アクセスカウンター（雰囲気用の目安の数） ---------- */
.counter{text-align:center;font-size:12px;font-weight:700}
.counter .digits{display:inline-flex;gap:2px;padding:4px;background:#222;border:2px inset #999;border-radius:3px;margin:4px 0;min-height:34px}
.counter .digits span{
  width:15px;height:22px;display:flex;align-items:center;justify-content:center;
  font:700 16px/1 'Courier New',monospace;color:#7dff8a;background:linear-gradient(#111,#2a2a2a 50%,#111);
  text-shadow:0 0 4px #3f3;border-radius:2px;
}
.counter .sub{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin-top:4px;color:var(--pink-d)}
.counter .sub span{display:inline-flex;align-items:center;gap:4px}
.counter .digits.mini{margin:0;padding:3px;min-height:0}
.counter .digits.mini span{width:11px;height:16px;font-size:12px}
.side .counter{padding:10px 6px}
.site-foot .counter .digits:not(.mini) span{width:17px;height:24px;font-size:17px}

/* ---------- 右上の追従メニュー ---------- */
.fab{
  position:fixed;top:12px;right:12px;z-index:900;width:56px;height:56px;border-radius:50%;
  border:3px solid var(--white);background:radial-gradient(circle at 35% 30%,#ffc2d8,var(--pink) 60%,var(--pink-d));
  box-shadow:0 0 0 3px var(--pink-d),0 4px 10px rgba(226,87,139,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.fab i{display:block;width:24px;height:3px;border-radius:2px;background:var(--white);transition:transform .25s,opacity .25s}
.fab[aria-expanded=true] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.fab[aria-expanded=true] i:nth-child(2){opacity:0}
.fab[aria-expanded=true] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.fab-menu{
  position:fixed;top:78px;right:12px;z-index:899;width:min(260px,calc(100vw - 24px));
  background:var(--white);border:3px double var(--pink);border-radius:12px;box-shadow:0 0 0 4px var(--pink-l),0 8px 20px rgba(0,0,0,.15);
  overflow:hidden;max-height:calc(100vh - 100px);overflow-y:auto;
}
.fab-menu[hidden]{display:none}
.fab-ttl{font-size:14px;padding:6px}
.fab-menu a{display:block;text-decoration:none;font-weight:700;padding:10px 16px;border-bottom:1px dashed var(--pink-dash);color:var(--ink)}
.fab-menu a::before{content:"♪";color:var(--pink);margin-right:8px}
.fab-menu a:hover{background:var(--yellow)}
/* いま見ている場所のメニュー項目 */
.fab-menu a.is-current{background:var(--pink-l);color:var(--pink-d)}
.fab-menu a.is-current::before{content:"★";color:var(--pink-d)}
.side li a.is-current{background:var(--yellow)}

/* ---------- キラキラ（マウス・タップ） ---------- */
.spark{position:fixed;pointer-events:none;z-index:9998;font-size:14px;color:var(--yellow);text-shadow:0 0 4px #ff9fc4;animation:sp .8s ease-out forwards}
@keyframes sp{to{transform:translateY(18px) scale(.4);opacity:0}}

/* ---------- かわいいマウスカーソル（PCのみ。リンクの上ではハート） ---------- */
@media (pointer:fine){
  html,body,body *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%202%20L3%2022%20L8.5%2017%20L12%2025%20L15.5%2023.5%20L12%2015.5%20L19%2015.5%20Z%22%20fill%3D%22%23F48CB0%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M25%203l1.6%203.4%203.4%201.6-3.4%201.6L25%2013l-1.6-3.4L20%208l3.4-1.6z%22%20fill%3D%22%23fff27a%22%20stroke%3D%22%23e2578b%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 3 2,auto}
  a,a *,button,button *,[role=button]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%2028C6%2021%203%2015.5%203%2011a6.5%206.5%200%200%201%2013-1%206.5%206.5%200%200%201%2013%201c0%204.5-3%2010-13%2017z%22%20fill%3D%22%23e2578b%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20fill%3D%22%23fff%22%20opacity%3D%22.8%22/%3E%3C/svg%3E") 16 16,pointer}
}

@media(prefers-reduced-motion:reduce){
  .marquee > div,.logos .track,.new{animation:none}
  .logos{overflow-x:auto}
}