/* Google Fonts を全ページ共通で読む */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

/* ベースの文字設定（全ページ共通） */
html, body{
  font-family: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.9;
  font-size: 16px;
}

:root{
  --choco:#5b3a3a;
  --p1:#ffd1e8; --p2:#ffe7f5; --p3:#cfe8ff; --p4:#fff6fa;
  --line:#f6a7c0; --dot:#ff9ec4; --txt:#444;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"M PLUS Rounded 1c",system-ui; color:var(--txt); background:#fff}

/* 背景：チョコ×水玉 */
.bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(#ffc4dd 2px, transparent 3px) 0 0/22px 22px,
    radial-gradient(#ffc4dd 2px, transparent 3px) 11px 11px/22px 22px,
    #4a2f2f;
  opacity:.9;
}

/* ヘッダー・タブ */
.site-header{
  text-align:center; padding:0px 10px 8px;
  background:
    linear-gradient(#6c4747,#4a2f2f);
  color:#fff; position:relative;
  box-shadow: inset 0 -10px 0 rgba(255,255,255,.2);
}
.logo{font-weight:700; font-size:1.6rem; letter-spacing:.05em; text-shadow:0 2px 0 rgba(0,0,0,.25)}
.tabs{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px;
}
.tabs a{
  display:inline-block; background:#fff; color:var(--choco);
  padding:.45em 1em; border:3px solid var(--line);
  border-radius:14px 14px 0 0; font-weight:700;
  box-shadow: 0 3px 0 #f8bdd2;
}
.tabs a:hover{ background:#ffd9eb }

/* 2カラム */
.container{
  width:min(1040px, 96%); margin:18px auto; display:grid;
  grid-template-columns: 260px 1fr; gap:14px;
}

/* サイドバー */
.sidebar .widget{
  background:#fff; border:3px dotted var(--line); border-radius:14px;
  padding:12px; margin-bottom:12px; box-shadow:0 0 0 6px var(--p1);
}
.wtitle{
  display:inline-block; padding:.25em .8em; margin:0 0 .6em;
  border:2px solid var(--line); border-radius:999px; color:#ffffff;
  background:linear-gradient(90deg,#5c2e2e); font-weight:700;
}
.yume-nav{ display:grid; gap:8px }
.yume-nav .btn{
  display:block; text-align:center; padding:.55em .8em; color:#fff; font-weight:700;
  border-radius:999px; border:2px solid #fff;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
  box-shadow:0 3px 0 rgba(0,0,0,.1), 0 0 0 3px var(--p3);
  background:linear-gradient(#ff9ecb,#ff6fb0);
}
.yume-nav .btn.diary{background:linear-gradient(#a4d9ff,#6ec0ff)}
.yume-nav .btn.gallery{background:linear-gradient(#ffe08a,#ffb347); color:#7a3c00}
.yume-nav .btn.links{background:linear-gradient(#b6f5d6,#79e3b7)}
.yume-nav .btn.mail{ background:linear-gradient(#d6b9ff,#b58cff)}
.yume-nav .btn:hover{transform:translateY(1px);opacity:.95}

/* バナー風 */
.banners{display:grid; gap:8px}
.bnr{
  display:inline-block; padding:.35em .8em; border-radius:10px;
  border:2px solid #fff; color:#fff; font-weight:700; text-shadow:0 1px 0 rgba(0,0,0,.15);
  background:linear-gradient(#ff9ecb,#ff6fb0); box-shadow:0 2px 0 rgba(0,0,0,.12), 0 0 0 3px var(--p2)
}
.bnr.mint{ background:linear-gradient(#b6f5d6,#79e3b7) }
.bnr.sky { background:linear-gradient(#a4d9ff,#6ec0ff) }

/* 本文カード */
.content{ min-width:0 }
.card{
  background:#fff; padding:18px; border-radius:14px;
  border:3px dotted var(--line);
  box-shadow: 0 0 0 8px var(--p2), 0 6px 0 0 #ffecf5;
  margin-bottom:14px;
}
.title{
  margin:.2em 0 .6em; font-size:1.4rem; color:#ff63a8;
  padding:.35em .7em; border-radius:10px; border:2px solid var(--line);
  background:linear-gradient(90deg,#ffe1f1,#dff1ff); box-shadow:inset 0 -4px 0 rgba(255,255,255,.7)
}
.card h2{
  font-size:1.15rem; color:#ff63a8; margin:0 0 .5em
}
.log{padding-left:1.1em}
.log li{margin:.25em 0}
.card p{line-height:1.8}

/* フッター */
.footer{
  text-align:center; color:#fff; padding:12px 8px; margin-top:10px;
  background:linear-gradient(#4a2f2f,#3a2323);
  box-shadow:inset 0 8px 0 rgba(255,255,255,.2)
}

/* 今いるページをハイライト */
.tabs .tab.active,
.yume-nav .btn.active{
  outline: 3px solid #f6a7c0;
  box-shadow: 0 0 0 4px #ffd9e8 inset;
}

/* サイドボタン共通（お菓子トーン） */
.yume-nav .btn{
  background-image:none !important;
  color:#724b4b;
  transition:.15s;
}

/* 個別色（2色運用：ベージュ＆ピンク） */
.yume-nav .btn.home   { background:#fff8f2 !important; } /* beige */
.yume-nav .btn.diary  { background:#f2c1d1 !important; } /* pink  */
.yume-nav .btn.gallery{ background:#fff8f2 !important; } /* beige */
.yume-nav .btn.links  { background:#f2c1d1 !important; } /* pink  */
.yume-nav .btn.mail   { background:#fff8f2 !important; } /* beige ←(contactでなくmail) */

.yume-nav .btn:hover{ filter:brightness(90%); }

/* 上のタブも今いるページを少し強調したい時（任意） */
.tabs .tab.active{
  outline:3px solid #f6a7c0;
  box-shadow:0 0 0 4px #ffd9e8 inset;
}

/* ===== slider ===== */
.mslider{
  position:relative; width:100%;
  max-width: 760px; margin: 8px auto 18px;
  border-radius:14px; overflow:hidden;
  background:#fff; box-shadow:0 4px 0 #f3cbd7 inset;
}
.mslider-track{ display:flex; transition:transform .45s ease; }
.mslide{ flex:0 0 100%; }
.mslide img{ display:block; width:100%; height:auto; }

.ms-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; line-height:36px; text-align:center;
  border:0; border-radius:50%;
  background:rgba(255,182,193,.9); color:#5b4242; font-size:22px;
  cursor:pointer; box-shadow:0 0 0 3px #ffe8ef inset;
}
.ms-nav.prev{ left:8px; } .ms-nav.next{ right:8px; }
.ms-nav:hover{ filter:brightness(.92); }

.ms-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:6px; justify-content:center; list-style:none; margin:0; padding:0;
}
.ms-dots button{
  width:8px; height:8px; border-radius:50%; border:0; cursor:pointer;
  background:#ffe8ef; box-shadow:0 0 0 2px #f6a7c0 inset;
}
.ms-dots button.is-active{ background:#f6a7c0; }

/* スマホ微調整 */
@media (max-width:768px){
  .ms-nav{ width:30px; height:30px; font-size:18px; }
  .ms-dots{ bottom:6px; }
}
/* ===== スマホでも2カラムを維持 ===== */
@media (max-width: 768px){
  .container{
    display:grid !important;
    grid-template-columns:140px 1fr !important;
    gap:10px !important;
    align-items:start;
  }
  .sidebar{ width:auto !important; }
  .content{ padding:0 6px !important; }
  .widget{ margin:8px 0 !important; }
  .yume-nav .btn{ font-size:14px !important; padding:10px 8px !important; }
}  /* ←ココで必ず閉じる！ */

/* ===== タブを1列に収める（スマホ） ===== */
@media (max-width: 768px){
  .tabs{
    display:flex !important;
    justify-content:center;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .tabs .tab{
    flex:1 1 auto;
    text-align:center;
    font-size:13px !important;
    padding:6px 8px !important;
    min-width:60px;
  }
}
/* ===== guestbook の見た目（共通） ===== */
.guest{ max-width:820px; margin:0 auto; }
/* guestbook フォーム */
.gform{
  background:#fff; border-radius:12px; padding:14px;
  box-shadow:0 3px 0 #f3cbd7 inset;
}
.gform .row{
  display:flex; gap:8px; margin-bottom:8px;
}
.gform input, .gform button{
  padding:10px 12px; border:2px solid #f6a7c0; border-radius:10px;
  background:#fff; color:#5b4242; outline:none;
  font-size:14px;
}
.gform input{ flex:1 1 200px; }
.gform button{
  flex:0 0 auto; white-space:nowrap;
  background:#ffb6d9; font-weight:700; color:#fff;
  cursor:pointer; transition:.2s;
}
.gform button:hover{ filter:brightness(.9); }

.gform textarea{
  width:100%; padding:10px 12px;
  border:2px solid #f6a7c0; border-radius:10px;
  background:#fff; color:#5b4242;
  min-height:60px;
  resize:vertical;
}.gform button{
  width:100%; padding:10px 12px; border-radius:10px;
  border:2px solid #f6a7c0; background:#fff; color:#5b4242; outline:none;
  box-sizing:border-box;
}
.gform input{ flex:1 1 220px; max-width:100%; }
.gform button{
  flex:1 1 160px; white-space:nowrap;
  background:#ffd6e6; cursor:pointer;
}
.gform button:hover{ filter:brightness(.95); }

.gwrap{ display:grid; grid-template-columns:1fr 300px; gap:16px; margin-top:12px; }
#guest-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.gitem{ background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 3px 0 #ffe8ef inset; }
.ghead{ display:flex; gap:8px; align-items:baseline; }
.gname{ font-weight:700; } .gtime{ font-size:.85em; color:#8c7575; }
.gmsg{ margin:.3em 0 0; white-space:pre-wrap; }

.sticky-box{ background:#fff; border-radius:12px; padding:10px; box-shadow:0 3px 0 #e7f5ff inset; }
#sticker-wall{ display:flex; flex-wrap:wrap; gap:8px; }
#sticker-wall .sticker{ width:64px; height:64px; image-rendering:auto; }

dialog#sticker-modal{
  border:0; border-radius:16px; padding:16px; max-width:320px;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
}
#sticker-modal h3{ margin:0 0 8px; }
#sticker-modal img{ width:96px; height:96px; display:block; margin:8px auto; }
#sticker-ok{ display:block; margin:10px auto 0; padding:8px 16px; border:0; border-radius:10px; background:#ffd6e6; cursor:pointer; }

/* guestbook：スマホで1カラム */
@media (max-width:768px){
  .gwrap{ grid-template-columns:1fr; }
}

/* ===== グリッチ：タイトル ===== */
.glitch-mode .g-title{
  position:relative; display:inline-block; isolation:isolate;
}
.glitch-mode .g-title::before,
.glitch-mode .g-title::after{
  content:attr(data-text);
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:screen; opacity:.0;
}
.glitch-mode .g-title::before{ color:#ff6fa3; clip-path:inset(0 0 60% 0); }
.glitch-mode .g-title::after { color:#8ee3ff; clip-path:inset(40% 0 0 0); }

@keyframes gJitter {
  0%,92%,100% { transform:none; opacity:0; }
  93% { transform:translateX(-2px); opacity:.8; }
  96% { transform:translateX(2px);  opacity:.8; }
}
@keyframes gNoise {
  0%,96%,100% { filter:none; }
  97% { filter:hue-rotate(10deg) contrast(120%); }
  98% { filter:hue-rotate(-10deg) contrast(140%); }
}
@media (prefers-reduced-motion:no-preference){
  .glitch-mode .g-title{ animation:gNoise 6s infinite steps(1); }
  .glitch-mode .g-title::before,
  .glitch-mode .g-title::after{ animation:gJitter 6s infinite steps(1); }
}

/* ===== VHSノイズ・走査線 ===== */
.glitch-mode .vhs-noise{
  position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.25;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
    radial-gradient(transparent 60%, rgba(0,0,0,.2));
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:no-preference){
  .glitch-mode .vhs-noise{
    animation:vhsShift 8s infinite linear;
  }
  @keyframes vhsShift{
    0%  { background-position:0 0, 0 0; }
    50% { background-position:0 2px, 0 -10px; }
    100%{ background-position:0 0, 0 0; }
  }
}

/* ===== 壊れたカード ===== */
.glitch-mode .broken-card{
  position:relative; transform:rotate(.2deg);
  filter:contrast(105%) saturate(105%);
}
.glitch-mode .broken-card::before{
  content:""; position:absolute; inset:-6px; z-index:-1; border-radius:14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,105,180,.12) 0 6px, transparent 6px 12px),
    rgba(255,255,255,.6);
  transform:skewX(-.6deg); mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:no-preference){
  .glitch-mode .broken-card{
    animation:cardGlitch 7s infinite steps(1);
  }
  @keyframes cardGlitch{
    0%,96%,100% { transform:rotate(.2deg) translateX(0); }
    97%        { transform:rotate(.2deg) translateX(-2px); }
    98%        { transform:rotate(.2deg) translateX(2px); }
  }
}

}

/* スマホ用レイアウト調整 */
@media (max-width: 600px) {
  .sidebar {
    width: 100%;
    box-sizing: border-box;
  }
  .yume-nav .btn {
    width: 100%; /* ボタンを横幅いっぱいに */
  }
}

.about-box {
  width: 100%;              /* 親要素いっぱいに広げる */
  max-width: 300px;         /* 好みで上限幅を決めてもOK */
  word-wrap: break-word;    /* 単語を折り返す */
  overflow-wrap: break-word;/* 新しめブラウザ用 */
  white-space: normal;      /* 強制的に改行を許可 */
  box-sizing: border-box;   /* paddingぶんも幅に含める */
}
/* --- スマホ崩れ一括レスキュー --- */
@media (max-width: 680px){

  /* 1) サイドバーのバナーが外に飛び出すのを防ぐ */
  .sidebar .widget .banners{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sidebar .widget .banners a{
    position: static;   /* 変な相対/絶対位置指定を打ち消す */
    float: none;        /* floatしてたら解除 */
    flex: 1 1 120px;    /* 横に並べつつ、はみ出さない */
  }

  /* 2) guestbook 見出し（ピンクの楕円）がフォームに重ならないように */
  .card .wtitle{
    position: static;   /* もし相対/絶対配置なら通常フローに戻す */
    display: inline-block;
    margin: 0 0 10px;   /* 見出しの下に余白 */
    transform: none;
  }
  .guest .gform{ margin-top: 4px; } /* 念のための余白 */

  /* 3) guestbook の recent / my stickers を縦並びにしてはみ出し防止 */
  .gwrap{ display: block; }
  .gwrap section,
  .gwrap .sticky-box{ width: 100%; }

  /* 4) 共通のはみ出し対策（横スクロール抑止） */
  .sidebar, .content, .card{
    box-sizing: border-box;
    max-width: 100%;
    overflow: visible;
  }
}

@media (max-width:768px){
  .sidebar *{ max-width:100%; }
}

.bnr.mint{
  background:linear-gradient(#ffd6e6,#f6a7c0);
  color:#5b3a3a;
}
.bnr.sky{
  background:linear-gradient(#fff8f2,#f2c1d1);
  color:#5b3a3a;
}

.counter-box{
  display:inline-block;
  padding:.4em .9em;
  border:3px dotted var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 0 0 6px var(--p2);
  font-weight:700;
}
.counter-box strong{
  color:#5b3a3a;
  font-size:1.1em;
}

.share{
  margin: 14px 0;
  display:flex; gap:10px; flex-wrap:wrap;
}
.share a, .share button{
  display:inline-block;
  padding:.4em .9em;
  border-radius:10px;
  font-weight:700;
  color:#fff;
  background:#ff9ecb; /* ピンクベース */
  text-decoration:none;
  border:0;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.share a:hover, .share button:hover{
  filter:brightness(.9);
}

/* 個別カラー */
.share a:nth-child(1){ background:#888; }   
.share a:nth-child(2){ background:#c3ecd9; } 
.share button{ background:#ffc1cb; }    

/* --- guestbook：スマホで送信ボタンを改行して表示 --- */
@media (max-width: 600px){
  .gform .row{
    display: block;       /* 横並びやめて縦並びに */
  }
  .gform input{
    width: 100%;          /* 入力欄は幅いっぱい */
    margin-bottom: 8px;   /* ボタンとの間に余白 */
  }
  .gform button{
    width: 100%;          /* ボタンも幅いっぱい */
  }
}

      /* --- スマホ：DiaryとGalleryだけサイドバー非表示にして1カラム --- */
@media (max-width: 768px){
  body[data-page="diary"] .sidebar,
  body[data-page="gallery"] .sidebar {
    display: none !important;
  }
  body[data-page="diary"] .container,
  body[data-page="gallery"] .container {
    display: block !important;           /* グリッドやめる */
    grid-template-columns: 1fr !important;
  }
  body[data-page="diary"] .content,
  body[data-page="gallery"] .content {
    width: 100% !important;              /* 本文を全幅に */
  }
}
.lace {
  display: block;       /* インライン→ブロック化 */
  width: 100%;          /* 横幅いっぱい */
  height:60px;
  margin: 0;            /* 外余白なし */
  padding: 0;           /* 内余白なし */
  background: url("img/lace.png") repeat-x center top;
  background-size: auto 100%;
}

/* === feed (画像＋ボタンのみ) === */
.feedme.card.plain{ padding:10px; }
.feedme .girl-wrap.bare{
  position:relative; display:grid; place-items:center;
  background:transparent; border:0; box-shadow:none; min-height:auto;
}
.feedme .girl{
  width:min(240px, 70%); height:auto; image-rendering:auto;
  transform-origin:50% 100%;
}
.feedme .girl.happy{ animation:girlHappy .6s ease; }
@keyframes girlHappy{
  0%{ transform:translateY(0) scale(1); }
  30%{ transform:translateY(-6px) scale(1.05); }
  60%{ transform:translateY(0) scale(1); }
}
.feedme .fx-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.feedme .particle{
  position:absolute; font-size:22px;
  animation:rise 900ms ease-out forwards;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.1));
}
@keyframes rise{
  0%{ transform:translateY(0) scale(.9); opacity:0; }
  20%{ opacity:1; }
  100%{ transform:translateY(-120px) scale(1.2); opacity:0; }
}
.feedme .feed-ctrl{
  display:flex; justify-content:center; margin-top:10px;
}
.feedme .feed-ctrl .bnr{
  cursor:pointer;
}