:root {
    --primary-green:#2c7a2c; --secondary-green:#4caf50; --accent-orange:#ff8f00;
    --warm-beige:#f5f3f0; --light-green:#e8f5e8; --success-green:#27ae60;
    --warning-orange:#f39c12; --danger-red:#e74c3c; --text-dark:#2c3e50;
    --text-light:#7f8c8d; --card-shadow:rgba(0,0,0,.1);
    --gradient-primary:linear-gradient(135deg,#2c7a2c 0%,#4caf50 100%);
    --gradient-bg:linear-gradient(135deg,#f5f3f0 0%,#e8f5e8 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
    font-family:'Noto Sans JP','Inter',sans-serif;
    background:var(--gradient-bg); color:var(--text-dark); line-height:1.7; overflow-x:hidden;
}

/* ===== 3D 背景レイヤー ===== */
#dango3d{
    position:fixed; inset:0; z-index:0; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
    #dango3d{display:none!important;}
}

/* ===== ページ内容 ===== */
.container{max-width:900px;margin:0 auto;padding:2rem; position:relative; z-index:1;}
.header{text-align:center;margin-bottom:3rem}
.logo-section{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.5rem}
.logo-icon{width:60px;height:60px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem}
.main-title{font-size:2.2rem;font-weight:700;color:var(--primary-green)}
.subtitle{font-size:1.1rem;color:var(--text-light)}

.intro-card,.status-card,.wifi-card,.info-card{
    background:#fff;border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 8px 32px var(--card-shadow)
}

.status-indicator{display:flex;align-items:center;gap:1rem;padding:1.5rem;border-radius:12px;margin:1rem 0}
.status-ok{border-left:6px solid var(--success-green);background:#e8f5e9}
.status-maybe{border-left:6px solid var(--warning-orange);background:#fff8e1}
.status-ng{border-left:6px solid var(--danger-red);background:#ffebee}
.status-icon{font-size:1.5rem}
.ip-display{font-family:monospace;color:var(--primary-green);font-weight:700}

/* ===== 固定CTAボタン（常時表示） ===== */
.fixed-cta{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1000}
.fixed-cta .start-button{
    display:inline-flex;align-items:center;gap:.75rem;
    background:var(--gradient-primary);color:#fff;text-decoration:none;
    padding:1rem 2rem;border-radius:50px;font-weight:600;font-size:1rem;
    box-shadow:0 8px 25px rgba(44,122,44,.30)
}
.fixed-cta .start-button:hover{box-shadow:0 12px 35px rgba(44,122,44,.40)}

/* ===== 言語切替（body.show-en で英語表示） ===== */
.lang .en{ display:none }
body.show-en .lang .jp{ display:none }
body.show-en .lang .en{ display:inline }

/* ===== ガラス調：言語選択オーバーレイ ===== */
.glass-gate{
    position:fixed; inset:0; z-index:1400; display:grid; place-items:center;
    background:
    radial-gradient(1200px 800px at 20% -10%, rgba(58,167,255,.12), transparent 60%),
    radial-gradient(1000px 800px at 120% 10%, rgba(34,197,94,.12), transparent 60%),
    rgba(245,247,245,.86);
    backdrop-filter:saturate(130%) blur(10px);
}
.glass-hidden{display:none}
.glass-wrap{
    width:min(860px,92vw);
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.35);
    border-radius:24px; padding:28px 22px;
    box-shadow:0 30px 80px rgba(2,6,23,.18);
    backdrop-filter: blur(16px) saturate(160%);
    color:var(--text-dark);
    text-align:center;
}
.glass-title{margin:0 0 .25rem; font-size:1.35rem;}
.glass-sub{margin:0 0 1.2rem; color:var(--text-light); font-size:.95rem}
.glass-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:10px;}
.glass-card{
    position:relative; overflow:hidden; border-radius:20px;
    padding:20px 18px; text-align:center; cursor:pointer;
    background:linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.12));
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 14px 40px rgba(2,6,23,.12);
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.glass-card:hover{ transform:translateY(-2px); box-shadow:0 24px 60px rgba(2,6,23,.18); border-color:rgba(58,167,255,.6);}
.glass-icon{width:46px;height:46px; border-radius:14px; display:grid; place-items:center; font-weight:800;
    background:linear-gradient(180deg, rgba(58,167,255,.28), rgba(34,197,94,.22));}
.glass-main{font-size:1.25rem; font-weight:800; margin-top:10px}
.glass-subtle{color:var(--text-light); font-size:.92rem}
.glass-skip{margin-top:14px; background:transparent; border:none; color:var(--text-light);
    text-decoration:underline; cursor:pointer; font-size:.9rem;}
@media (max-width:680px){ .glass-grid{ grid-template-columns:1fr; } }

/* ===== 右上：言語選択ボタン ===== */
.lang-switch{
    position:fixed; top:12px; right:12px; z-index:1200;
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.45rem .7rem; border-radius:12px; font-weight:700; font-size:.9rem;
    background:rgba(255,255,255,.75); color:#0b1a0b;
    border:1px solid rgba(0,0,0,.08);
    backdrop-filter:saturate(140%) blur(8px);
    cursor:pointer; user-select:none;
    box-shadow:0 8px 22px rgba(2,6,23,.12);
}
.lang-switch:hover{ box-shadow:0 12px 30px rgba(2,6,23,.16); }
.lang-switch:focus-visible{ outline:2px solid #0ea5ea; outline-offset:2px; }
.lang-switch i{ font-size:.95rem; }

/* ===== 詳細ブロック ===== */
.detail-card{
    background:#fff;border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 8px 32px var(--card-shadow)
}
.detail-block{
    display:grid; gap:12px; margin-top:12px
}
.detail-row{
    display:grid; grid-template-columns:140px 1fr; gap:12px;
    padding:12px 14px; border:1px solid rgba(0,0,0,.06); border-radius:12px;
    background:rgba(255,255,255,.6)
}
.detail-label{
    font-weight:700; color:var(--text-dark); display:flex; align-items:center; gap:.5rem
}
.detail-value{ color:var(--text-dark) }
.detail-row i{ opacity:.8 }
@media (max-width:560px){
    .detail-row{ grid-template-columns:1fr; }
}

.detail-photo {
  margin-top: 12px;
}

.detail-photo img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.detail-photo figcaption {
  margin-top: 8px;
  font-size: 0.95rem;
  color: #5f6b7a;
}

.detail-row {
  align-items: flex-start;
}


    /* ===== マイページ案内カード ===== */
.mypage-highlight{
    position:relative;
    background:linear-gradient(135deg, #2c7a2c 0%, #4caf50 40%, #ffb74d 110%);
    border-radius:18px;
    padding:1.6rem 1.8rem;
    margin-bottom:2rem;
    box-shadow:0 14px 40px rgba(0,0,0,.18);
    color:#fff;
    overflow:hidden;
}
.mypage-highlight::before{
    content:"";
    position:absolute;
    right:-40px;
    top:-40px;
    width:160px;
    height:160px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.35);
    opacity:.65;
}
.mypage-tag{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.25rem .7rem;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:.6rem;
}
.mypage-tag span{ font-size:.75rem; }
.mypage-title{
    font-size:1.25rem;
    font-weight:800;
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.4rem;
}
.mypage-title i{ font-size:1.2rem; }
.mypage-text{
    font-size:.95rem;
    opacity:.95;
    margin-bottom:1rem;
}
.mypage-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    align-items:center;
}
.mypage-button{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.55rem 1.2rem;
    border-radius:999px;
    border:none;
    background:#fff;
    color:#2c7a2c;
    font-weight:700;
    font-size:.9rem;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
    transition:transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.mypage-button i{ font-size:.95rem; }
.mypage-button:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    background:#f5fff5;
}
.mypage-sub{
    font-size:.82rem;
    opacity:.9;
}
@media (max-width:560px){
    .mypage-highlight{ padding:1.3rem 1.2rem; }
    .mypage-title{ font-size:1.1rem; flex-wrap:wrap; }
}

/* 受け取り場所の写真 */
.detail-photo{ margin-top:10px; }
.detail-photo a{ display:block; text-decoration:none; }
.detail-photo img{
    width:100%;
    max-height:380px;
    object-fit:cover;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(2,6,23,.18);
}
.detail-photo figcaption{
    margin-top:6px;
    font-size:.9rem;
    color:var(--text-light);
}

/* ===== お知らせバー ===== */
.site-notice {
    position: sticky; top: 0; z-index: 1300;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(232,245,232,.92));
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(2,6,23,.08);
}
.notice-wrap { max-width: 1100px; margin: 0 auto; padding: .75rem 1rem; display: grid; gap: .5rem; }
.notice-head { display:flex; align-items:center; justify-content:space-between; gap: .75rem; }
.notice-title { display:flex; align-items:center; gap:.5rem; font-weight:800; color: var(--primary-green); }
.notice-title i { opacity:.85; }
.notice-close {
    background: transparent; border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px; padding: .35rem .6rem; cursor:pointer; color: var(--text-dark);
}
.notice-close:hover { background: rgba(0,0,0,.04); }
.notice-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.notice-chip {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem .6rem; border-radius: 12px;
    background: #fff; border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 4px 12px var(--card-shadow);
    font-weight:600;
}
.notice-chip i { opacity:.8; }
@media (max-width:640px){
    .notice-wrap { padding: .65rem .75rem; }
    .notice-chip { font-size:.92rem; }
}



/* ===== 予約開始エリア ===== */
.entry-card,
.intro-card {
position: relative;
}

.cta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 22px;
}

.cta-button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;

min-height: 64px;
padding: 18px 22px;
border-radius: 18px;

text-decoration: none;
font-weight: 700;
font-size: 1.05rem;
line-height: 1.4;

box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
opacity: 0.98;
}

.cta-button:active {
transform: translateY(0);
}

.cta-button i {
font-size: 1.1rem;
}

.cta-primary {
background: linear-gradient(135deg, #2f8f3a 0%, #4caf50 100%);
color: #ffffff;
}

.cta-primary:hover,
.cta-primary:visited {
color: #ffffff;
}

.cta-secondary {
background: #ffffff;
color: #2f7d32;
border: 2px solid #2f7d32;
}

.cta-secondary:hover,
.cta-secondary:visited {
color: #2f7d32;
}

/* ボタン内の多言語表示の余計な改行を防ぐ */
.cta-button .lang {
display: inline;
}

.cta-button .jp,
.cta-button .en {
white-space: nowrap;
}

/* スマホでは縦並び */
@media (max-width: 768px) {
.cta-grid {
    grid-template-columns: 1fr;
}

.cta-button {
    font-size: 1rem;
    min-height: 60px;
}
}