body{margin:0;background:#FBF6EE}
#mx{--green:#1F3B2D;--deep:#12261C;--red:#B3262E;--gold:#E9D9A8;--gold2:#8A6A1F;--cream:#FBF6EE;--sand:#F3EADB;--ink:#2A2622;--sub:#5C554D;--line:#EADFCF;
 font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-text-size-adjust:100%;overflow-x:hidden}
#mx *,#mx *::before,#mx *::after{box-sizing:border-box}
#mx a{color:inherit}
#mx img{max-width:100%}
#mx .mx-wrap{max-width:1120px;margin:0 auto;position:relative}
#mx .mx-serif{font-family:'Noto Serif JP','Hiragino Mincho ProN',serif}
#mx .mx-sec{padding:72px 24px}
#mx .mx-center{text-align:center}
#mx h2,#mx h3,#mx p{margin:0}

/* hero */
#mx .mx-hero{position:relative;overflow:hidden;color:var(--cream);padding:24px 24px 64px;display:flex;flex-direction:column;
 background:linear-gradient(180deg,rgba(18,38,28,.7) 0%,rgba(18,38,28,0) 14%,rgba(18,38,28,0) 46%,rgba(18,38,28,.88) 66%,var(--deep) 88%),url("../images/hero.jpg") 45% 22%/cover no-repeat var(--deep)}
#mx .mx-fx{position:absolute;inset:0;pointer-events:none}
#mx .mx-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;width:100%}
#mx .mx-logo{text-decoration:none;color:var(--cream);font-weight:700;font-size:20px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:10px}
#mx .mx-mark{width:32px;height:32px;border:2px solid var(--gold);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px;letter-spacing:0;line-height:1;padding-bottom:3px}
#mx .mx-nav{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}
#mx .mx-nav a{color:var(--gold);text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.55);padding:6px 0}
#mx .mx-spacer{height:420px;flex:0 0 auto}
#mx .mx-herotext{max-width:820px;display:flex;flex-direction:column;gap:16px}
#mx .mx-kicker{color:var(--gold);font-size:18px;letter-spacing:.3em}
#mx .mx-h1{margin:0;font-weight:900;font-size:clamp(32px,4.4vw,56px);line-height:1.3;text-shadow:0 2px 16px rgba(0,0,0,.45);word-break:keep-all;overflow-wrap:anywhere}
#mx .mx-herolead{font-size:17px;line-height:1.9;max-width:520px}
#mx .mx-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
#mx .mx-btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:16px 28px;border-radius:999px;font-size:16px;box-shadow:0 6px 20px rgba(179,38,46,.45);position:relative;overflow:hidden}
#mx .mx-btn:hover{background:#9E1F27;color:#fff}
#mx .mx-btn-o{display:inline-block;border:1.5px solid var(--gold);color:var(--gold);text-decoration:none;font-weight:500;padding:15px 26px;border-radius:999px;font-size:16px}
#mx .mx-note{font-size:14px;color:var(--gold)}

/* effects */
#mx .mx-spark{position:absolute;background:radial-gradient(circle,#FFF8DC 0%,#F2D27A 45%,rgba(242,210,122,0) 70%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:mx-twinkle 3s ease-in-out infinite}
#mx .mx-glow{position:absolute;border-radius:50%;background:#FFE9A8;box-shadow:0 0 8px 2px rgba(255,233,168,.8);opacity:0;animation:mx-drift 7s linear infinite}
@keyframes mx-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes mx-drift{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}85%{opacity:.6}100%{opacity:0;transform:translateY(-120px)}}
#mx .mx-shimmer{background:linear-gradient(100deg,#F2C6C8 0%,#F2C6C8 40%,#FFF4D6 50%,#F2C6C8 60%,#F2C6C8 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mx-shimmer 3.5s ease-in-out infinite}
@keyframes mx-shimmer{0%{background-position:100% 0}100%{background-position:-50% 0}}
#mx .mx-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));animation:mx-sweep 3s ease-in-out infinite}
@keyframes mx-sweep{0%{left:-60%}60%,100%{left:130%}}
#mx .mx-fade{animation:mx-fadeup .9s ease-out both}
@keyframes mx-fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
#mx .mx-panel{animation:mx-panelin .6s ease-out both}
@keyframes mx-panelin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* featured */
#mx .mx-feat{display:flex;flex-wrap:wrap;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 0 0 1px rgba(242,210,122,.7),0 12px 32px rgba(31,59,45,.12)}
#mx .mx-feat-img{flex:1 1 320px;min-height:280px;background:#E8DCD2}
#mx .mx-feat-img img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
#mx .mx-feat-body{flex:2 1 360px;padding:32px 36px;display:flex;flex-direction:column;justify-content:center;gap:10px}
#mx .mx-label{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.1em}
#mx .mx-feat-name{font-weight:700;font-size:20px}
#mx .mx-feat-copy{font-size:14px;color:var(--sub);line-height:1.8}
#mx .mx-feat-price{font-size:22px;font-weight:700;margin-top:4px}
#mx .mx-feat-price small{font-size:12px;font-weight:400}

/* points */
#mx .mx-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px}
#mx .mx-point{background:#fff;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line)}
#mx .mx-pno{font-family:'Noto Serif JP',serif;color:var(--red);font-weight:900;font-size:28px}
#mx .mx-point b{font-size:18px}
#mx .mx-point p{font-size:14px;line-height:1.8;color:var(--sub)}

/* section head */
#mx .mx-head{text-align:center;display:flex;flex-direction:column;gap:8px;margin-bottom:32px}
#mx .mx-en{color:var(--gold2);letter-spacing:.3em;font-size:14px}
#mx .mx-h2{font-size:34px;line-height:1.4}
#mx .mx-lead{font-size:15px;color:var(--sub)}

/* tabs + cards */
#mx .mx-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
#mx .mx-tab{min-height:56px;min-width:150px;padding:10px 22px;border-radius:14px;cursor:pointer;font-family:inherit;background:#fff;color:var(--green);border:2px solid #D9CBB3;transition:background-color .4s ease,color .4s ease,border-color .4s ease}
#mx .mx-tab b{display:block;font-size:16px}
#mx .mx-tab small{display:block;font-size:12px;margin-top:2px}
#mx .mx-tab[aria-selected="true"]{background:var(--green);color:var(--cream);border-color:var(--green)}
#mx .mx-tab:focus-visible,#mx a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
#mx .mx-panel .mx-lead{color:var(--ink);margin-bottom:32px}
#mx .mx-panel[hidden]{display:none}
#mx .mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
#mx .mx-card{background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease}
#mx .mx-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(31,59,45,.12)}
#mx .mx-cimg{width:100%;height:auto;object-fit:cover;display:block;background:#F3EADB}
#mx .mx-sq{aspect-ratio:1/1}
#mx .mx-43{aspect-ratio:4/3}
#mx .mx-cbody{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
#mx .mx-brand{font-size:12px;color:var(--gold2);font-weight:700}
#mx .mx-name{font-weight:700;font-size:16px;line-height:1.5}
#mx .mx-copy{font-size:13px;color:var(--sub);line-height:1.7;flex:1}
#mx .mx-grow{flex:1}
#mx .mx-price{font-size:20px;font-weight:700;color:var(--red)}
#mx .mx-price small{font-size:11px;font-weight:400;color:var(--sub)}

/* genre */
#mx .mx-genre-sec{background:var(--sand)}
#mx .mx-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:56px}
#mx .mx-chip{background:#fff;color:var(--green);text-decoration:none;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid #D9CBB3}
#mx .mx-genre{margin-bottom:56px;scroll-margin-top:16px}
#mx .mx-genre:last-child{margin-bottom:0}
#mx .mx-ghead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;border-bottom:2px solid var(--green);padding-bottom:12px;margin-bottom:20px}
#mx .mx-ghead h3{font-family:'Noto Serif JP',serif;font-size:26px;color:var(--green)}
#mx .mx-ghead p{font-size:14px;color:var(--sub)}
#mx .mx-genre .mx-grid{gap:20px}
#mx .mx-genre .mx-name{font-size:15px}
#mx .mx-genre .mx-price{font-size:18px}

/* scenes */
#mx .mx-scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
#mx .mx-scene{background:var(--green);color:var(--cream);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px}
#mx .mx-scene b{font-family:'Noto Serif JP',serif;font-size:20px;color:var(--gold)}
#mx .mx-scene p{font-size:14px;line-height:1.8}
#mx .mx-scene a{color:#F2C6C8;font-size:14px;font-weight:700}

/* flow */
#mx .mx-flow{background:#fff;border-top:1px solid var(--line)}
#mx .mx-steps{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px}
#mx .mx-steps li{background:var(--cream);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:8px}
#mx .mx-sno{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
#mx .mx-steps b{font-size:16px}
#mx .mx-steps p{font-size:13px;line-height:1.8;color:var(--sub)}
#mx .mx-notebox{background:var(--cream);border-radius:14px;padding:20px 24px;font-size:13px;line-height:1.9;color:var(--sub)}
#mx .mx-notebox b{color:var(--ink)}

/* cta */
#mx .mx-cta{position:relative;overflow:hidden;color:var(--cream);text-align:center;padding:88px 24px;
 background:linear-gradient(rgba(18,38,28,.86),rgba(18,38,28,.86)),url("../images/hero.jpg") center/cover no-repeat var(--deep)}
#mx .mx-cta .mx-wrap{max-width:720px;display:flex;flex-direction:column;gap:20px;align-items:center}
#mx .mx-cta h2{font-size:32px;line-height:1.5}
#mx .mx-cta p{font-size:15px;color:var(--gold)}
#mx .mx-foot{padding:24px;text-align:center;font-size:13px;color:var(--sub)}

/* page top button */
#mx .mx-totop{position:fixed;right:20px;bottom:20px;z-index:50;width:64px;height:64px;border-radius:50%;background:var(--cream);border:3px solid var(--red);
 box-shadow:0 0 0 3px var(--gold),0 8px 20px rgba(18,38,28,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 0 0;cursor:pointer;font-family:inherit;
 opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease,visibility .4s}
#mx .mx-totop.is-show{opacity:1;visibility:visible;transform:none}
#mx .mx-totop.is-show:hover{transform:translateY(-4px)}
#mx .mx-totop svg{width:30px;height:30px;display:block;overflow:visible}
#mx .mx-totop span{font-size:10px;font-weight:700;color:var(--red);letter-spacing:.1em;line-height:1;margin-top:1px}
#mx .mx-totop .mx-tstar{transform-origin:16px 6.5px;animation:mx-starglow 2.4s ease-in-out infinite}
#mx .mx-totop:hover .mx-tstar{animation:mx-starspin .8s ease-in-out}
#mx .mx-totop:focus-visible{outline:3px solid var(--green);outline-offset:4px}
@keyframes mx-starglow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.85)}}
@keyframes mx-starspin{from{transform:rotate(0) scale(1.15)}to{transform:rotate(360deg) scale(1)}}

/* tablet */
@media (max-width:1024px){
 #mx .mx-hero{background:linear-gradient(180deg,rgba(18,38,28,.9) 0,rgba(18,38,28,.55) 20vw,rgba(18,38,28,0) 32vw,rgba(18,38,28,0) 46vw,var(--deep) 67vw),url("../images/hero.jpg") center top/100% auto no-repeat var(--deep)}
 #mx .mx-spacer{height:44vw}
 #mx .mx-note{font-size:15px;line-height:1.8}
 #mx .mx-lead{font-size:16px;line-height:1.8}
 #mx .mx-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
 #mx .mx-brand{font-size:13px}
 #mx .mx-copy{font-size:14px}
 #mx .mx-price small{font-size:12px}
 #mx .mx-ghead p{font-size:15px}
 #mx .mx-point p,#mx .mx-scene p,#mx .mx-steps p{font-size:15px;line-height:1.85}
 #mx .mx-notebox{font-size:15px}
 #mx .mx-h2{font-size:30px}
}
/* phone */
@media (max-width:600px){
 #mx .mx-hero,#mx .mx-sec,#mx .mx-cta{padding-left:16px;padding-right:16px}
 #mx .mx-sec{padding-top:56px;padding-bottom:56px}
 #mx .mx-nav{gap:6px 16px}
 #mx .mx-kicker{font-size:13px;letter-spacing:.2em}
 #mx .mx-h1{font-size:30px;line-height:1.4}
 #mx .mx-herolead{font-size:16px;line-height:1.85}
 #mx .mx-herolead br{display:none}
 #mx .mx-btns a{flex:1 1 100%;text-align:center}
 #mx .mx-h2{font-size:26px}
 #mx .mx-feat-body{padding:22px 20px 26px}
 #mx .mx-feat-name{font-size:22px;line-height:1.45}
 #mx .mx-feat-copy{font-size:15px}
 #mx .mx-tab{min-width:0;flex:1 1 calc(50% - 10px)}
 #mx .mx-grid,#mx .mx-genre .mx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #mx .mx-cbody{padding:12px 12px 16px}
 #mx .mx-name,#mx .mx-genre .mx-name{font-size:15px}
 #mx .mx-copy{font-size:13px}
 #mx .mx-price,#mx .mx-genre .mx-price{font-size:18px}
 #mx .mx-ghead h3{font-size:22px}
 #mx .mx-notebox{padding:18px}
 #mx .mx-cta h2{font-size:24px}
 #mx .mx-totop{right:14px;bottom:14px;width:56px;height:56px}
 #mx .mx-totop svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
 #mx .mx-spark,#mx .mx-glow,#mx .mx-shimmer,#mx .mx-btn::after,#mx .mx-fade,#mx .mx-panel,#mx .mx-card,#mx .mx-totop,#mx .mx-totop .mx-tstar{animation:none;transition:none}
 #mx .mx-spark{opacity:.7}
 #mx .mx-shimmer{color:#F2C6C8}
}