@font-face { font-family:"Noto Sans JP"; src:url("assets/NotoSansJP-subset.woff2") format("woff2"); font-weight:100 900; font-display:block; }

:root {
  --ink:#294d40; --body-ink:#293d34; --gold:#b6a171;
  --paper:#f8f6ee; --column-width:min(72.7273%,1120px); --band-w:clamp(58px,10.3vw,168px); --band-gap:20px; --header-height:76px;
  --paper-image:url("assets/washi-outer.webp");
  --column-paper-image:url("assets/washi-main.webp");
  color-scheme:light;
}

* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--header-height) + 16px); }
body { margin:0; padding-top:var(--header-height); border-bottom:4px solid #294f40; background:#f3f0e5 var(--paper-image) repeat; color:var(--body-ink); font-family:"Noto Sans JP",sans-serif; font-size:16px; line-height:1.9; -webkit-text-size-adjust:100%; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-underline-offset:.25em; }
button { font:inherit; }
a:focus-visible, button:focus-visible { outline:2px solid #54775d; outline-offset:4px; }
[hidden] { display:none !important; }
p { margin:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-150%); z-index:100; padding:10px 20px; background:var(--paper); border:1px solid var(--ink); }
.skip-link:focus { transform:none; }

/* ヘッダー */
.site-header { position:fixed; top:0; left:0; right:0; width:100%; z-index:50; background:linear-gradient(rgb(248 246 238 / 56%),rgb(248 246 238 / 56%)),var(--column-paper-image),#f3f0e5; background-size:auto,1200px auto; background-position:center top; border-bottom:1px solid #d9cdb1; }
.header-inner { max-width:1440px; min-height:76px; margin:auto; padding:12px 5%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; min-width:0; font-size:clamp(16px,1.35vw,21px); line-height:0; letter-spacing:.02em; text-decoration:none; color:var(--ink); }
.brand img { height:clamp(16px,2.4vw,24px); width:auto; max-width:min(62vw,420px); object-fit:contain; }
.site-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 20px; font-size:13px; flex-shrink:0; }
.site-nav a { display:flex; align-items:center; min-height:44px; text-decoration:none; white-space:nowrap; word-break:keep-all; }
.site-nav a:hover { text-decoration:underline; }
.site-nav .nav-shop { justify-content:center; padding:8px 18px; border:1px solid #baa878; background:#315847; color:#fbf8ed; font-size:13px; }
.site-nav .nav-shop:hover { text-decoration:none; }
.menu-toggle { display:none; width:44px; height:44px; background:transparent; border:1px solid #c2b48e; padding:11px; flex-shrink:0; color:var(--ink); }
.menu-toggle span { display:block; height:1px; margin:5px 0; background:currentColor; }

/* 背景・帯 */
.page-body { position:relative; background:linear-gradient(rgb(248 246 238 / 56%),rgb(248 246 238 / 56%)),var(--column-paper-image); background-size:auto,1200px auto; background-position:center top; }
.side-pattern { position:absolute; z-index:3; top:0; bottom:0; width:round(down,min(var(--band-w),calc((100% - var(--column-width)) / 2 - 38px)),1px); background:linear-gradient(rgb(248 246 238 / 58%),rgb(248 246 238 / 58%)),#f5f1e4 url("assets/pattern-diamond.png") repeat; background-size:auto,77.7px 30.1px; pointer-events:none; }
.side-pattern-left { left:round(max(8px,calc(50% - var(--column-width) / 2 - var(--band-gap) - var(--band-w) - 4.6%)),1px); }
.side-pattern-right { right:round(max(8px,calc(50% - var(--column-width) / 2 - var(--band-gap) - var(--band-w) - 4.6%)),1px); }
.paper-column { position:relative; width:var(--column-width); margin-inline:auto; }

/* キービジュアル */
.key-visual { padding-bottom:4px; }
.kv-stage { position:relative; overflow:hidden; aspect-ratio:16/9; }
.kv-layer { position:absolute; inset:0; }
.kv-layer img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; }
.kv-bg { animation:kvBgIn 2.4s cubic-bezier(.16,.78,.22,1) both; }
.kv-chara { animation:kvCharaIn 1.9s cubic-bezier(.16,.8,.24,1) .45s both; }
.kv-ticket { overflow:hidden; animation:kvTicketIn 1.5s cubic-bezier(.22,.9,.28,1) 1.15s both; }

/* セクション共通 */
.content-section { padding-bottom:8px; }
#raden-contact { padding-bottom:40px; }
.section-heading { position:relative; isolation:isolate; min-height:0; padding:40px 20px 24px; display:grid; place-items:center; }
#raden-about .section-heading { padding-top:48px; }
.section-title { margin:0; text-align:center; color:#315548; font-weight:500; }
.section-title small { display:block; margin-bottom:12px; font-size:11px; line-height:1.5; font-weight:500; color:#9e895b; letter-spacing:.3em; }
.section-title span { display:flex; align-items:center; justify-content:center; gap:20px; font-size:32px; line-height:1.55; letter-spacing:.1em; }
.section-title span::before, .section-title span::after { content:""; display:block; width:clamp(48px,9vw,120px); height:1px; background:#1a4436; flex:none; }

.material-panel { position:relative; isolation:isolate; width:min(98%,1104px); min-width:0; margin-inline:auto; padding:84px clamp(32px,8%,142px); }
.material-panel::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(rgb(255 255 253 / 94%),rgb(255 255 253 / 94%)),var(--column-paper-image) repeat; background-size:auto,1200px auto; -webkit-mask-box-image-source:var(--material-frame); -webkit-mask-box-image-slice:50 fill; -webkit-mask-box-image-width:72px; -webkit-mask-box-image-outset:0; -webkit-mask-box-image-repeat:stretch; }
#raden-about .material-panel { --material-frame:url("assets/frame-01.svg"); }
#raden-goods .material-panel { --material-frame:url("assets/frame-02.svg"); }
#raden-contents .material-panel { --material-frame:url("assets/frame-03.svg"); padding-bottom:56px; }
#raden-access .material-panel { --material-frame:url("assets/frame-04.svg"); }
#raden-contact .material-panel { --material-frame:url("assets/frame-01.svg"); }

.panel-cloud { position:absolute; top:-40px; left:-6px; width:280px; height:auto; max-width:none; object-fit:contain; opacity:.28; z-index:1; pointer-events:none; }
#raden-goods .panel-cloud { left:auto; right:-8px; top:-30px; width:310px; }
#raden-contents .panel-cloud { left:-2px; width:270px; }
#raden-access .panel-cloud { left:auto; right:-4px; top:-30px; width:300px; }
#raden-contact .panel-cloud { left:-4px; width:270px; }

/* 本文 */
.intro { margin:0 auto 42px; text-align:center; font-size:15px; line-height:2.1; }
.details { margin:0; border-top:1px solid #c6c2b5; }
.detail-row { display:grid; grid-template-columns:92px minmax(0,1fr); gap:20px; padding:18px 10px; border-bottom:1px solid #c6c2b5; align-items:start; }
dt { color:var(--ink); font-weight:500; letter-spacing:.1em; }
dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.note { font-size:.92em; }
h3 { margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid #cdbf9d; color:var(--ink); font-size:18px; font-weight:600; line-height:1.8; letter-spacing:.05em; overflow-wrap:anywhere; }
.bonus-title { display:inline-block; margin:20px 0 10px; padding:6px 16px; background:#2d6a4f; color:#f6f2e5; border-radius:4px; font-weight:500; letter-spacing:.06em; }
.diamond-list { list-style:none; padding:0; margin:0; }
.bonus-title + .diamond-list { font-size:calc(1em - 2pt); line-height:1.6; }
.bonus-title + .diamond-list li { margin:6px 0; }
.diamond-list li { position:relative; padding-left:20px; margin:8px 0; }
.diamond-list li::before { content:"◆"; position:absolute; top:0; left:0; color:#b5a16a; transform:scale(.56) translateY(-.04em); transform-origin:left center; }
.content-block + .content-block { margin-top:42px; }
.coming-soon { text-align:center; margin-top:42px; }
.access-group + .access-group { margin-top:34px; }
.access-notes { margin-top:26px; }
.contact-note { margin-top:16px; font-size:.92em; }

/* グッズ */
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 18px; margin:32px 0 40px; }
.product { min-width:0; margin:0; }
.bonus-grid { margin-top:21px; }
.bonus-text { grid-column:span 2; min-width:0; }
.bonus-text .bonus-title { margin-top:0; }
@media (max-width:900px) { .bonus-text { grid-column:1 / -1; } }
.product-image { display:grid; place-items:center; aspect-ratio:1/1; border:1px solid #d4cfc2; color:#486657; font-size:12px; letter-spacing:.1em; }
.product-photo { position:relative; background:#fff; overflow:hidden; }
.zoom-trigger { position:absolute; inset:0; padding:0; border:0; background:none; cursor:zoom-in; }
.zoom-trigger img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; }
.product figcaption { margin-top:10px; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.price { display:block; margin-top:3px; color:#244b3c; font-weight:500; }
.item-head { display:block; }
.set-name { display:block; margin-top:16px; }
.goods-note { margin:12px 0 28px; font-size:11px; line-height:1.6; text-align:left; }

/* ECバナー */
.shop-banner { position:relative; display:grid; grid-template-columns:40% minmax(0,1fr); align-items:stretch; gap:2%; min-height:156px; margin-top:72px; padding:0 28px 0 0; background:#2d6a4f; color:#f6f2e5; border:1px solid #b6a171; border-radius:12px; text-decoration:none; transition:filter .2s; }
.shop-banner:hover { filter:brightness(1.08); }
.shop-banner:focus-visible { outline:3px solid #c9b27a; outline-offset:3px; }
.shop-art { position:relative; align-self:stretch; min-height:156px; clip-path:inset(-120px 0 0 0); }
.shop-art img { position:absolute; top:-40px; right:-11px; width:260px; max-width:none; }
.shop-copy { align-self:center; min-width:0; padding:20px 0; text-align:center; }
.shop-copy p { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0; font-size:14px; line-height:1.9; letter-spacing:.08em; color:#f6f2e5; white-space:nowrap; }
.shop-button { display:flex; justify-content:center; align-items:center; gap:18px; width:min(100%,360px); max-width:100%; min-height:64px; margin:16px auto 0; padding:12px 24px; border:1px solid #d8c89a; border-radius:999px; background:#f4eddb; color:#284a3b; font-size:17px; letter-spacing:.14em; box-shadow:0 4px 12px rgb(0 0 0 / 22%); }
.arrow { flex-shrink:0; font-size:11px; }
@media (min-width:1181px) { .shop-copy p { font-size:calc(15px + 2pt); } .shop-button { font-size:calc(18px + 2pt); } }
.shop-closed { position:absolute; inset:-1px; z-index:2; display:flex; align-items:center; justify-content:center; padding:0 16px; border-radius:inherit; background:rgb(120 128 120 / 45%); -webkit-backdrop-filter:grayscale(.55); backdrop-filter:grayscale(.55); color:#2b2b2b; font-size:36px; font-weight:700; line-height:1.4; letter-spacing:.06em; text-align:center; text-shadow:0 0 2px #fff,0 0 4px #fff; }
@media (min-width:601px) and (max-width:1180px) { .shop-closed { font-size:28px; } }
@media (max-width:600px) { .shop-closed { font-size:48px; } }

/* フッター */
.site-footer { background:#2e5145; color:#e7e8d9; }
.footer-inner { position:relative; max-width:1260px; margin:auto; padding:42px 7%; display:flex; justify-content:space-between; align-items:center; gap:24px 40px; }
@media (min-width:601px) { .footer-inner { width:var(--column-width); max-width:none; padding-inline:7px; } }
.footer-brand { font-size:18px; line-height:0; }
.footer-brand img { height:clamp(14px,1.8vw,20px); width:auto; max-width:min(80vw,360px); object-fit:contain; }
.copyright { margin-left:auto; font-size:11px; line-height:1.9; text-align:left; }
.back-top { position:fixed; right:24px; bottom:24px; z-index:60; display:flex; align-items:center; justify-content:center; min-height:44px; padding:10px 15px; border:1px solid #9fba9e; background:#2e5145; color:#e7e8d9; font-size:12px; text-decoration:none; box-shadow:0 2px 10px rgb(0 0 0 / 18%); }

/* 画像拡大 */
.zoom-view { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:64px 24px 24px; background:rgb(20 32 27 / 88%); cursor:zoom-out; }
.zoom-view img { max-width:min(100%,1100px); max-height:100%; width:auto; height:auto; object-fit:contain; background:#fff; }
.zoom-close { position:absolute; top:12px; right:12px; width:44px; height:44px; border:1px solid #9fba9e; background:#2e5145; color:#e7e8d9; font-size:22px; line-height:1; cursor:pointer; }

/* アニメーション */
@keyframes kvBgIn { from { transform:scale(1.14); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes kvCharaIn { from { transform:translate3d(2.5%,7%,0) scale(1.07); opacity:0; } to { transform:none; opacity:1; } }
@keyframes kvTicketIn { from { transform:translate3d(-5%,0,0); opacity:0; } to { transform:none; opacity:1; } }
@keyframes cloudSettleL { from { transform:translate3d(57px,0,0); opacity:0; } to { transform:none; opacity:.28; } }
@keyframes cloudSettleR { from { transform:translate3d(-57px,0,0); opacity:0; } to { transform:none; opacity:.28; } }
@keyframes panelSpread { from { transform:scale(.86,.7); opacity:0; } to { transform:none; opacity:1; } }
@keyframes bandDrawDown { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } }
.has-js .panel-cloud { opacity:0; transform:translate3d(57px,0,0); }
.has-js .panel-cloud[data-dir="R"] { transform:translate3d(-57px,0,0); }
.has-js .panel-cloud[data-in="1"] { animation:cloudSettleL 4.6s cubic-bezier(.16,.72,.18,1) forwards; }
.has-js .panel-cloud[data-dir="R"][data-in="1"] { animation-name:cloudSettleR; }
.has-js .material-panel::before { transform-origin:center center; opacity:0; }
.has-js .material-panel[data-in="1"]::before { animation:panelSpread .9s cubic-bezier(.16,.84,.34,1) both; }
.has-js .side-pattern { clip-path:inset(0 0 100% 0); animation:bandDrawDown 5.4s cubic-bezier(.32,.05,.16,1) .35s forwards; }
.has-js .side-pattern-right { animation-delay:.95s; }

@media (max-width:1180px) {
  .back-top { min-height:33px; padding:6px 10px; font-size:10.5px; }
  :root { --band-gap:12px; --column-width:calc(100% - 210px); }
  .header-inner { flex-wrap:wrap; justify-content:center; gap:6px 24px; padding-inline:24px; }
  .brand { flex:0 0 100%; justify-content:center; }
  .site-nav { justify-content:center; flex:1 1 100%; max-width:100%; }
  .intro br { display:none; }
  #raden-contents .panel-cloud, #raden-contact .panel-cloud { left:-6px; }
  #raden-goods .panel-cloud, #raden-access .panel-cloud { right:-6px; }
}
@media (min-width:601px) and (max-width:1180px) {
  .shop-banner { grid-template-columns:38% minmax(0,1fr); padding-right:20px; }
  .shop-art img { top:-38px; right:-15px; width:220px; }
  .shop-copy p { gap:10px; font-size:13px; letter-spacing:.04em; }
}
@media (min-width:601px) and (max-width:760px) {
  .shop-copy p { font-size:12px; letter-spacing:0; }
}
@media (max-width:900px) {
  :root { --column-width:100%; }
  .side-pattern { display:none; }
  .header-inner { justify-content:space-between; gap:12px; }
  .brand { flex:1 1 auto; justify-content:flex-start; font-size:18px; }
  .has-js .menu-toggle { display:block; }
  .site-nav { width:100%; flex-shrink:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; border-top:1px solid #d9cdb1; padding:10px 0 4px; font-size:15px; }
  .site-nav a { min-height:48px; justify-content:center; }
  .site-nav .nav-shop { margin:4px 0; }
  .content-section { padding-bottom:12px; }
  .section-title span { font-size:30px; }
  .material-panel { width:calc(100% - 48px); padding-inline:36px; }
  .material-panel::before { -webkit-mask-box-image-width:56px; }
  .panel-cloud, #raden-contents .panel-cloud, #raden-contact .panel-cloud { top:-30px; width:250px; }
  #raden-goods .panel-cloud, #raden-access .panel-cloud { top:-26px; right:-6px; width:270px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
  .footer-inner { flex-wrap:wrap; }
}
@media (max-width:600px) {
  body { border-bottom-width:3px; }
  .header-inner { min-height:68px; padding:10px 16px; }
  .brand { flex:1; font-size:16px; }
  #raden-contact { padding-bottom:28px; }
  .section-heading { padding:32px 18px 24px; }
  #raden-about .section-heading { padding-top:32px; }
  .section-title small { margin-bottom:8px; font-size:10px; }
  .section-title span { gap:12px; font-size:27px; }
  .section-title span::before, .section-title span::after { width:clamp(30px,8vw,60px); }
  .material-panel { width:auto; margin-inline:12px; padding:52px 24px; }
  .material-panel::before { -webkit-mask-box-image-width:40px; }
  #raden-contents .material-panel { padding-bottom:35px; }
  .panel-cloud, #raden-contents .panel-cloud, #raden-contact .panel-cloud { left:-10px; top:-16px; width:145px; }
  #raden-goods .panel-cloud, #raden-access .panel-cloud { right:-10px; top:-16px; width:166px; }
  .intro { margin-bottom:28px; text-align:left; font-size:16px; line-height:1.95; }
  .detail-row { grid-template-columns:minmax(0,1fr); gap:5px; padding:15px 0; }
  dt { font-size:15px; font-weight:600; }
  dd { font-size:16px; }
  .note { font-size:15px; }
  .date-oneline { font-size:clamp(14.5px,calc((100vw - 74px) / 19.8),16px); letter-spacing:0; }
  .date-oneline span { display:inline-block; white-space:nowrap; }
  h3 { letter-spacing:.025em; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 12px; margin-block:26px 32px; }
  .product figcaption { font-size:13px; line-height:1.7; }
  .shop-banner { width:760px; max-width:none; margin-top:36px; transform-origin:0 0; grid-template-columns:44% minmax(0,1fr); }
  .shop-art { container-type:size; clip-path:inset(-120px -80px 0 0); }
  .shop-art img { top:-21cqh; right:-6cqh; width:135cqh; }
  .shop-copy { padding:28px 0; }
  .shop-copy p { font-size:27px; font-weight:500; line-height:1.45; letter-spacing:.04em; white-space:normal; }
  .shop-button { width:100%; min-height:90px; margin-top:22px; padding:14px 20px; gap:20px; font-size:31px; font-weight:500; letter-spacing:.08em; }
  .shop-button .arrow { font-size:20px; }
  .coming-soon { text-align:left; margin-top:30px; }
  .coming-soon br { display:none; }
  .footer-inner { padding:30px 20px; align-items:flex-start; gap:20px; }
  .footer-brand { width:100%; font-size:16px; }
  .back-top { right:16px; bottom:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .kv-layer, .has-js .panel-cloud, .has-js .material-panel::before, .has-js .side-pattern { animation:none !important; }
  .has-js .panel-cloud { transform:none; opacity:.28; }
  .has-js .material-panel::before { transform:none; opacity:1; }
  .has-js .side-pattern { clip-path:none; }
}