/* Landing-page-only system. No application/dashboard selectors. */ .reward-landing{--rm-bg:#160f20;--rm-panel:#21172e;--rm-ink:#fcf4f6;--rm-muted:#c0b2ca;--rm-pink:#f4b6cf;--rm-line:#ffffff21;margin:0;background:var(--rm-bg);color:var(--rm-ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.8;color-scheme:dark} .reward-landing *{box-sizing:border-box} .reward-landing [hidden]{display:none!important} .reward-landing :is(h1,h2,h3,p,figure,ol){margin:0} .reward-landing a{color:inherit;text-decoration:none} .reward-landing button{font:inherit;cursor:pointer} .reward-landing img{display:block;max-width:100%;height:auto} .reward-landing :is(a,button,summary):focus-visible{outline:3px solid var(--rm-pink);outline-offset:5px} .reward-landing ::selection{background:#f4b6cf;color:#201329} .reward-landing section{scroll-margin-top:35px} :where(.reward-landing) .rm-container{width:min(1120px,calc(100% - 80px));margin-inline:auto} :where(.reward-landing) .rm-skip{position:absolute;top:-100px;left:20px;z-index:10;padding:12px 20px;background:#f4b6cf;color:#160f20!important} :where(.reward-landing) .rm-skip:focus{top:12px} :where(.reward-landing) .rm-header{border-bottom:1px solid var(--rm-line)} :where(.reward-landing) .rm-header-inner{height:84px;display:flex;align-items:center;justify-content:space-between;gap:28px} :where(.reward-landing) .rm-logo{position:relative;width:178px;height:48px;overflow:hidden;flex-shrink:0} :where(.reward-landing) .rm-logo img{position:absolute;width:178px;height:auto;top:-36px;max-width:none} :where(.reward-landing) .rm-nav,:where(.reward-landing) .rm-header-actions{display:flex;align-items:center;gap:30px;font-size:12px} :where(.reward-landing) .rm-nav a,:where(.reward-landing) .rm-login{color:var(--rm-muted)!important} :where(.reward-landing) .rm-nav a:hover,:where(.reward-landing) .rm-login:hover{color:var(--rm-ink)!important} :where(.reward-landing) .rm-button{display:inline-flex;align-items:center;justify-content:center;gap:38px;min-height:56px;padding:15px 26px;border:1px solid transparent;border-radius:8px;background:var(--rm-pink);color:#2b1630!important;font-size:14px;font-weight:700;line-height:1.5;transition:background .2s,transform .2s} :where(.reward-landing) .rm-button:hover{background:#ffcede;transform:translateY(-2px)} :where(.reward-landing) .rm-button-small{min-height:44px;padding:12px 18px;font-size:12px} :where(.reward-landing) .rm-text-link{font-size:13px;display:inline-flex;gap:22px;align-items:center;border-bottom:1px solid #c7a7bb70;padding:10px 0} :where(.reward-landing) .rm-text-link:hover{color:var(--rm-pink)} :where(.reward-landing) .rm-guest-form{margin:0} :where(.reward-landing) .rm-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--rm-pink);font-weight:600} :where(.reward-landing) .rm-eyebrow>span{font-size:19px;margin-right:10px;vertical-align:middle} :where(.reward-landing) .rm-body-copy{max-width:42ch;font-size:14px;color:var(--rm-muted);line-height:2.1} :where(.reward-landing) .rm-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap} :where(.reward-landing) .rm-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:5%;align-items:center;padding-block:42px 36px} :where(.reward-landing) .rm-hero h1{font-size:clamp(30px,3.35vw,48px);line-height:1.65;letter-spacing:-.045em;font-weight:600;margin:26px 0} :where(.reward-landing) .rm-hero h1 span{color:var(--rm-pink)} :where(.reward-landing) .rm-lead{font-size:17px;margin-bottom:14px!important} :where(.reward-landing) .rm-hero .rm-actions{margin-top:30px} :where(.reward-landing) .rm-note{font-size:12px;color:var(--rm-muted);margin-top:17px!important} :where(.reward-landing) .rm-note a{text-decoration:underline;text-underline-offset:4px} :where(.reward-landing) .rm-hero-signature{display:flex;align-items:center;gap:15px;margin-top:28px;color:var(--rm-muted)} :where(.reward-landing) .rm-hero-signature>span{font-size:35px;font-family:Georgia,serif;color:var(--rm-pink)} :where(.reward-landing) .rm-hero-signature p{font-size:12px;letter-spacing:.08em;line-height:1.8} :where(.reward-landing) .rm-room-window{position:relative;isolation:isolate;height:clamp(360px,55vh,460px);border-radius:190px 190px 14px 14px;overflow:hidden;border:1px solid #d6b8eb65;background:#4b2c66;box-shadow:0 30px 80px #0003} :where(.reward-landing) .rm-room{width:100%;height:100%!important;object-fit:cover;object-position:44% 50%;position:absolute;inset:0;z-index:-2} :where(.reward-landing) .rm-room-shade{position:absolute;inset:0;background:linear-gradient(180deg,#1c112a33 0%,transparent 42%,#160f208c 100%);z-index:-1} :where(.reward-landing) .rm-room-label{position:absolute;top:42px;width:100%;text-align:center;font-size:12px;letter-spacing:.22em;text-shadow:0 1px 10px #000} :where(.reward-landing) .rm-room-label span{display:block;font-size:12px;margin-top:6px;color:#eee0f8} :where(.reward-landing) .rm-room-caption{position:absolute;bottom:28px;text-align:center;width:100%;font-size:12px;letter-spacing:.04em} :where(.reward-landing) .rm-room-caption>span{margin-right:8px} :where(.reward-landing) .rm-art-note{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;margin-top:16px!important;font-size:12px;letter-spacing:.12em;color:var(--rm-muted)} :where(.reward-landing) .rm-art-note span{font-size:12px;letter-spacing:0} :where(.reward-landing) .rm-section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px} .reward-landing h2{font-size:clamp(26px,2.7vw,38px);line-height:1.65;letter-spacing:-.03em;font-weight:500;margin-top:18px} :where(.reward-landing) .rm-steps{border-top:1px solid var(--rm-line);padding-block:52px 60px;margin-top:12px} :where(.reward-landing) .rm-step-list{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0} :where(.reward-landing) .rm-step-list li{padding:0 32px;border-left:1px solid var(--rm-line)} :where(.reward-landing) .rm-step-list li:first-child{padding-left:0;border-left:0} :where(.reward-landing) .rm-step-list li:last-child{padding-right:0} :where(.reward-landing) .rm-step-number{font-family:Georgia,serif;font-size:42px;font-style:italic;color:#9d839f} :where(.reward-landing) .rm-step-list h3{font-size:18px;font-weight:500;margin:14px 0} :where(.reward-landing) .rm-step-list p{font-size:14px;line-height:2;color:var(--rm-muted);max-width:310px} :where(.reward-landing) .rm-step-tag{display:block;font-size:12px;letter-spacing:.12em;color:#bea1ba;margin-top:24px} :where(.reward-landing) .rm-task-preview,:where(.reward-landing) .rm-fun-preview{min-height:132px;margin-top:20px;border:1px solid #f4d6ee2e;border-radius:8px;background:#21172e;overflow:hidden} :where(.reward-landing) .rm-task-preview{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px} :where(.reward-landing) .rm-task-preview>span{display:flex;align-items:center;gap:9px;min-height:27px;padding:3px 7px;border:1px solid #f4d6ee1f;border-radius:5px;color:#d7c7d8;font-size:12px} :where(.reward-landing) .rm-task-preview i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#563853;color:#f4b6cf;font-style:normal;font-weight:700} :where(.reward-landing) .rm-task-preview .is-done{color:#fff;background:#f4b6cf12} :where(.reward-landing) .rm-task-preview .is-done i{background:#f4b6cf;color:#2b1630} :where(.reward-landing) .rm-fun-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#f4d6ee2e} :where(.reward-landing) .rm-fun-preview>span{display:flex;flex-direction:column;min-width:0;background:#21172e} :where(.reward-landing) .rm-fun-preview img{width:100%;height:91px;object-fit:cover} :where(.reward-landing) .rm-fun-preview b{padding:7px 3px;color:#e8d9e9;font-size:12px;font-weight:500;text-align:center} :where(.reward-landing) .rm-reward-preview{display:grid;grid-template-columns:.85fr 1.15fr;gap:8px;margin-top:20px} :where(.reward-landing) .rm-box-preview,:where(.reward-landing) .rm-letter-preview{min-height:132px;border:1px solid #f4d6ee2e;border-radius:8px;background:#21172e;overflow:hidden} :where(.reward-landing) .rm-box-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;color:#e8cfde} :where(.reward-landing) .rm-box-preview img{width:76px;height:71px;object-fit:contain;filter:drop-shadow(0 8px 16px #f69ac52b)} :where(.reward-landing) .rm-box-preview span{font-size:12px;margin-top:2px} :where(.reward-landing) .rm-letter-preview{position:relative;display:flex;flex-direction:column;justify-content:center;padding:17px 10px 14px 36px;background:linear-gradient(145deg,#2e203b,#21172e)} :where(.reward-landing) .rm-letter-icon{position:absolute;left:10px;top:17px;color:var(--rm-pink);font-size:20px} :where(.reward-landing) .rm-letter-preview small{font-size:12px;letter-spacing:.04em;color:#d2a9c2;white-space:nowrap} :where(.reward-landing) .rm-letter-preview strong{font-size:12px;line-height:1.7;font-weight:500;margin-top:7px} :where(.reward-landing) .rm-letter-new{position:absolute;right:8px;top:8px;padding:2px 7px;border-radius:20px;background:#ef79ad;color:#251229;font-size:12px;font-weight:700} :where(.reward-landing) .rm-companion{background:#efe5eb;color:#342137;padding-block:60px;color-scheme:light} :where(.reward-landing) .rm-companion .rm-eyebrow{color:#81516e} :where(.reward-landing) .rm-companion .rm-body-copy{color:#6a5367;margin-top:22px} :where(.reward-landing) .rm-companion-grid{display:grid;grid-template-columns:.8fr 1.9fr;gap:46px;align-items:center} :where(.reward-landing) .rm-colors{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px} :where(.reward-landing) .rm-color{background:transparent;border:1px solid #34213730;border-radius:30px;min-height:44px;display:flex;align-items:center;gap:6px;padding:9px 11px;font-size:12px!important;color:#503b50} :where(.reward-landing) .rm-color span{width:10px;height:10px;border-radius:50%;background:#8962a4} :where(.reward-landing) .rm-color-pink span{background:#cb789a} :where(.reward-landing) .rm-color-blue span{background:#527dae} :where(.reward-landing) .rm-color[aria-pressed=true]{border-color:#745068;background:#fff7fb} :where(.reward-landing) .rm-companion .rm-color:focus-visible{outline-color:#734466} :where(.reward-landing) .rm-evolution-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:15px;font-size:12px;border-bottom:1px solid #34213726;padding-bottom:18px} :where(.reward-landing) .rm-evolution-label span{font-size:12px;letter-spacing:.1em;color:#745f70} :where(.reward-landing) .rm-stages{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px!important} :where(.reward-landing) .rm-stages li{text-align:center;min-width:0} :where(.reward-landing) .rm-stage-image{height:210px;display:flex;justify-content:center;align-items:end} :where(.reward-landing) .rm-stage-image img{height:100%;width:100%;object-fit:contain;object-position:bottom} :where(.reward-landing) .rm-stages li:first-child .rm-stage-image img{height:52%} :where(.reward-landing) .rm-stages li:nth-child(2) .rm-stage-image img{height:68%} :where(.reward-landing) .rm-stages li:nth-child(3) .rm-stage-image img{height:84%} :where(.reward-landing) .rm-stage-index{display:block;font:italic 14px Georgia,serif;color:#8d7285;margin:14px 0 4px} :where(.reward-landing) .rm-stages li p{font-size:12px} :where(.reward-landing) .rm-evolution-note{text-align:right;font-size:12px;color:#715d6a;margin-top:20px!important} :where(.reward-landing) .rm-room-growth{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:end;margin-top:4px;padding-top:32px;border-top:1px solid #34213726} :where(.reward-landing) .rm-room-growth-copy h3{font-size:25px;line-height:1.55;font-weight:500;margin:10px 0} :where(.reward-landing) .rm-room-growth-copy>p:last-child{font-size:13px;line-height:1.9;color:#6a5367} :where(.reward-landing) .rm-room-stages{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;list-style:none;padding:0} :where(.reward-landing) .rm-room-stages li{position:relative;min-width:0;border:1px solid #34213724;border-radius:7px;overflow:hidden;background:#d8c9d4} :where(.reward-landing) .rm-room-stages img{width:100%;aspect-ratio:3/2;object-fit:cover} :where(.reward-landing) .rm-room-stages span{position:absolute;left:6px;bottom:5px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#2f1e36d9;color:#fff;font:italic 12px Georgia,serif} :where(.reward-landing) .rm-showcase{padding-block:60px} :where(.reward-landing) .rm-screen-buttons{max-width:1020px;margin-inline:auto;display:flex;border-bottom:1px solid var(--rm-line);gap:28px;margin-bottom:26px} :where(.reward-landing) .rm-screen-buttons button{padding:15px 0;background:none;border:0;border-bottom:2px solid transparent;color:var(--rm-muted);font-size:13px;min-height:48px} :where(.reward-landing) .rm-screen-buttons button span{font-size:12px;letter-spacing:.05em;margin-right:10px} :where(.reward-landing) .rm-screen-buttons button[aria-pressed=true]{color:var(--rm-pink);border-color:var(--rm-pink)} :where(.reward-landing) .rm-screen{max-width:1020px;margin-inline:auto!important} :where(.reward-landing) .rm-screen-frame{border:1px solid #d9c1e238;border-radius:12px;overflow:hidden;background:#1c1529} :where(.reward-landing) .rm-screen-bar{height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;color:#c6b2cd;font-size:12px;letter-spacing:.1em;border-bottom:1px solid var(--rm-line)} :where(.reward-landing) .rm-screen-bar span:first-child{font-size:12px;letter-spacing:3px;color:#a080ad} :where(.reward-landing) .rm-screen-zoom{position:relative;display:block;width:100%;padding:0;border:0;background:#130a22;cursor:zoom-in!important} :where(.reward-landing) .rm-screen-zoom img{width:100%;height:auto;max-height:62vh;aspect-ratio:2934/1672;object-fit:contain;filter:brightness(1.12) saturate(1.04)} :where(.reward-landing) #screen-0 .rm-screen-zoom img{aspect-ratio:1920/1278} :where(.reward-landing) .rm-screen-zoom>span{position:absolute;right:16px;bottom:16px;padding:7px 13px;background:#201329eb;border:1px solid #f4d6ee4d;color:#fff;font-size:12px;border-radius:5px} :where(.reward-landing) .rm-screen figcaption{display:grid;grid-template-columns:130px 1fr auto;gap:25px;align-items:baseline;margin-top:22px} :where(.reward-landing) .rm-screen figcaption strong{font-size:13px;font-weight:500} :where(.reward-landing) .rm-screen figcaption p{font-size:12px;color:var(--rm-muted);line-height:1.9} :where(.reward-landing) .rm-screen figcaption>span{font-size:12px;letter-spacing:.1em;color:var(--rm-muted)} :where(.reward-landing) .rm-game-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;list-style:none;padding:0;margin:24px 0 0!important} :where(.reward-landing) .rm-game-strip li{overflow:hidden;border:1px solid #d9c1e22e;border-radius:7px;background:#21172e} :where(.reward-landing) .rm-game-strip img{width:100%;height:86px;object-fit:cover} :where(.reward-landing) .rm-game-strip span{display:block;min-height:46px;padding:10px 7px;color:#e6d7e7;font-size:12px;line-height:1.5;text-align:center} :where(.reward-landing) .rm-faq{display:grid;grid-template-columns:1fr 1.6fr;gap:70px;padding-block:0 60px} :where(.reward-landing) .rm-questions details{border-top:1px solid var(--rm-line);padding:22px 0} :where(.reward-landing) .rm-questions details:last-child{border-bottom:1px solid var(--rm-line)} :where(.reward-landing) .rm-questions summary{cursor:pointer;display:flex;justify-content:space-between;gap:18px;font-size:14px;list-style:none} :where(.reward-landing) .rm-questions summary::-webkit-details-marker{display:none} :where(.reward-landing) .rm-questions summary span{color:var(--rm-pink);transition:transform .2s} :where(.reward-landing) .rm-questions details[open] summary span{transform:rotate(45deg)} :where(.reward-landing) .rm-questions details p{margin-top:15px;font-size:14px;color:var(--rm-muted);line-height:2} :where(.reward-landing) .rm-start{background:radial-gradient(ellipse at 20% 80%,#74446938,transparent 65%),#21152b;border-top:1px solid var(--rm-line);border-bottom:1px solid var(--rm-line);overflow:hidden} :where(.reward-landing) .rm-start-inner{display:grid;grid-template-columns:1fr 1.3fr;gap:7%;align-items:center;padding-block:48px} :where(.reward-landing) .rm-start h2{font-size:clamp(28px,3.2vw,44px)} :where(.reward-landing) .rm-start .rm-body-copy{margin-top:20px} :where(.reward-landing) .rm-start .rm-actions{margin-top:30px} :where(.reward-landing) .rm-start-art{position:relative;height:280px;display:flex;justify-content:center;align-items:center} :where(.reward-landing) .rm-start-art:before{content:'';position:absolute;width:290px;height:290px;border:1px solid #f4b6cf2b;border-radius:50%} .reward-landing .rm-start-trio{position:relative;width:450px;height:270px;display:flex;align-items:flex-end;justify-content:center} .reward-landing .rm-start-trio-image{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 16px #09030c66)} :where(.reward-landing) .rm-start-art>span{position:absolute;bottom:0;right:0;font:italic 22px Georgia,serif;color:#d6b0c5;transform:rotate(-8deg)} :where(.reward-landing) .rm-footer{padding-block:38px} :where(.reward-landing) .rm-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px} :where(.reward-landing) .rm-footer-brand{font-family:Georgia,serif;font-size:26px} :where(.reward-landing) .rm-footer-brand span{display:block;font:12px/1.8 "Hiragino Kaku Gothic ProN",sans-serif;color:var(--rm-muted);margin-top:7px} :where(.reward-landing) .rm-footer nav{display:flex;gap:25px;font-size:12px;color:var(--rm-muted)} :where(.reward-landing) .rm-footer small{font-size:12px;color:var(--rm-muted)} :where(.reward-landing) .rm-lightbox{padding:18px;border:1px solid #dec4e947;border-radius:12px;background:#160f20;color:#fff;max-width:94vw;width:1300px;max-height:92vh;overflow:auto} :where(.reward-landing) .rm-lightbox::backdrop{background:#09050ee8} :where(.reward-landing) .rm-lightbox-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px;font-size:12px} :where(.reward-landing) .rm-lightbox-head button{padding:9px 16px;border:1px solid #d4bbdf70;border-radius:5px;background:#2b2036;color:#fff} :where(.reward-landing) .rm-lightbox>img{width:auto;max-width:100%;max-height:76vh;object-fit:contain;margin:auto} html.rm-no-scroll:has(> body.reward-landing){overflow:hidden} @media(min-width:761px) and (max-height:740px){:where(.reward-landing) .rm-hero{padding-block:16px} :where(.reward-landing) .rm-hero h1{margin-block:16px} :where(.reward-landing) .rm-hero .rm-actions{margin-top:20px} :where(.reward-landing) .rm-hero-signature{margin-top:18px} :where(.reward-landing) .rm-room-window{height:360px} :where(.reward-landing) .rm-screen-zoom img{max-height:50vh} } @media(max-width:1050px){:where(.reward-landing) .rm-container{width:calc(100% - 64px)} :where(.reward-landing) .rm-nav{gap:18px} :where(.reward-landing) .rm-nav a:nth-child(2){display:none} :where(.reward-landing) .rm-header-actions{gap:18px} :where(.reward-landing) .rm-hero{gap:30px} :where(.reward-landing) .rm-room-window{height:clamp(360px,55vh,440px);border-radius:145px 145px 12px 12px} :where(.reward-landing) .rm-hero h1{font-size:32px} :where(.reward-landing) .rm-body-copy{font-size:14px} :where(.reward-landing) .rm-desktop-break{display:none} :where(.reward-landing) .rm-hero-signature{margin-top:30px} :where(.reward-landing) .rm-hero .rm-actions{gap:15px} :where(.reward-landing) .rm-companion-grid{grid-template-columns:.75fr 1.75fr;gap:28px} :where(.reward-landing) .rm-stage-image{height:180px} :where(.reward-landing) .rm-step-list li{padding-inline:22px} :where(.reward-landing) .rm-room-growth{grid-template-columns:180px 1fr;gap:22px} :where(.reward-landing) .rm-room-growth-copy h3{font-size:22px} :where(.reward-landing) .rm-game-strip img{height:72px} :where(.reward-landing) .rm-footer-inner{flex-wrap:wrap} :where(.reward-landing) .rm-footer small{margin-left:auto} } @media(max-width:760px){:where(.reward-landing) .rm-container{width:calc(100% - 40px)} :where(.reward-landing) .rm-header-inner{height:76px;gap:15px} :where(.reward-landing) .rm-logo{width:138px;height:42px} :where(.reward-landing) .rm-logo img{width:138px;top:-27px} :where(.reward-landing) .rm-nav{display:none} :where(.reward-landing) .rm-header-actions{gap:15px} :where(.reward-landing) .rm-login{font-size:12px} :where(.reward-landing) .rm-header .rm-button-small{display:none} :where(.reward-landing) .rm-hero{grid-template-columns:1fr;padding-block:42px 32px;gap:36px} :where(.reward-landing) .rm-hero h1{font-size:clamp(26px,6.9vw,42px);line-height:1.65;margin:20px 0} :where(.reward-landing) .rm-eyebrow{font-size:12px} :where(.reward-landing) .rm-lead{font-size:15px} :where(.reward-landing) .rm-hero .rm-body-copy{max-width:400px} :where(.reward-landing) .rm-hero .rm-actions{gap:22px;margin-top:25px} :where(.reward-landing) .rm-button{font-size:13px;min-height:52px;padding:14px 22px;gap:24px} :where(.reward-landing) .rm-text-link{font-size:12px;gap:12px} :where(.reward-landing) .rm-note{font-size:12px} :where(.reward-landing) .rm-hero-signature{display:none} :where(.reward-landing) .rm-hero-art{width:100%;max-width:510px;justify-self:center} :where(.reward-landing) .rm-room-window{height:350px;border-radius:140px 140px 12px 12px} :where(.reward-landing) .rm-room-label{top:35px} :where(.reward-landing) .rm-room-caption{bottom:20px;font-size:12px} :where(.reward-landing) .rm-art-note{font-size:12px} :where(.reward-landing) .rm-art-note span{font-size:12px} :where(.reward-landing) .rm-steps{margin-top:16px;padding-block:44px 56px} :where(.reward-landing) .rm-section-head{display:block;margin-bottom:30px} :where(.reward-landing) .rm-section-head>.rm-body-copy{margin-top:20px} .reward-landing h2{font-size:27px;margin-top:13px} :where(.reward-landing) .rm-step-list{grid-template-columns:1fr;gap:0} :where(.reward-landing) .rm-step-list li,:where(.reward-landing) .rm-step-list li:first-child,:where(.reward-landing) .rm-step-list li:last-child{border:0;border-top:1px solid var(--rm-line);padding:24px 0 24px 50px;position:relative} :where(.reward-landing) .rm-step-number{position:absolute;top:23px;left:0;font-size:27px} :where(.reward-landing) .rm-step-list h3{margin:2px 0 9px;font-size:17px} :where(.reward-landing) .rm-step-list p{max-width:none} :where(.reward-landing) .rm-step-tag{margin-top:14px;font-size:12px} :where(.reward-landing) .rm-task-preview,:where(.reward-landing) .rm-fun-preview{max-width:440px} :where(.reward-landing) .rm-reward-preview{max-width:440px;grid-template-columns:1fr 1.4fr} :where(.reward-landing) .rm-step-reward .rm-step-tag{margin-top:16px} :where(.reward-landing) .rm-companion{padding-block:50px} :where(.reward-landing) .rm-companion-grid{grid-template-columns:1fr;gap:35px} :where(.reward-landing) .rm-companion .rm-body-copy{margin-top:16px} :where(.reward-landing) .rm-stage-image{height:190px} :where(.reward-landing) .rm-stages{grid-template-columns:repeat(2,1fr);gap:20px 10px} :where(.reward-landing) .rm-stage-index{margin-top:10px} :where(.reward-landing) .rm-room-growth{grid-template-columns:1fr;gap:20px;padding-top:28px} :where(.reward-landing) .rm-room-growth-copy h3{font-size:23px} :where(.reward-landing) .rm-room-stages{grid-template-columns:repeat(3,1fr)} :where(.reward-landing) .rm-showcase{padding-block:56px} :where(.reward-landing) .rm-screen-buttons{gap:0;justify-content:space-between} :where(.reward-landing) .rm-screen-buttons button{font-size:12px;padding:12px 3px;flex:1} :where(.reward-landing) .rm-screen-buttons button span{display:block;margin:0;font-size:12px} :where(.reward-landing) .rm-screen-bar{font-size:12px;padding-inline:10px;height:30px} :where(.reward-landing) .rm-screen-bar span:last-child{display:none} :where(.reward-landing) .rm-screen-zoom>span{bottom:8px;right:8px;font-size:12px;padding:4px 8px} :where(.reward-landing) .rm-screen figcaption{grid-template-columns:1fr auto;gap:8px;margin-top:16px} :where(.reward-landing) .rm-screen figcaption p{grid-row:2;grid-column:1/-1} :where(.reward-landing) .rm-screen figcaption>span{grid-column:2;grid-row:1;font-size:12px} :where(.reward-landing) .rm-game-strip{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px!important} :where(.reward-landing) .rm-game-strip li:last-child{grid-column:1/-1;max-width:calc(50% - 4px);width:100%;justify-self:center} :where(.reward-landing) .rm-game-strip img{height:90px} :where(.reward-landing) .rm-faq{grid-template-columns:1fr;gap:25px;padding-block:0 55px} :where(.reward-landing) .rm-questions summary{font-size:13px} :where(.reward-landing) .rm-start-inner{grid-template-columns:1fr;gap:32px;padding-block:45px} :where(.reward-landing) .rm-start-art{grid-row:2;height:250px} .reward-landing .rm-start-trio{width:330px;height:242px} :where(.reward-landing) .rm-start-art:before{width:230px;height:230px} :where(.reward-landing) .rm-start-art>span{right:5%;font-size:20px} :where(.reward-landing) .rm-start .rm-actions{gap:15px} :where(.reward-landing) .rm-start h2{font-size:32px} :where(.reward-landing) .rm-footer{padding-block:30px} :where(.reward-landing) .rm-footer-inner{gap:23px} :where(.reward-landing) .rm-footer nav{flex-wrap:wrap;gap:20px;font-size:12px} :where(.reward-landing) .rm-footer small{width:100%;margin-left:0} :where(.reward-landing) .rm-lightbox{padding:12px} :where(.reward-landing) .rm-lightbox-head{font-size:12px} } @media(prefers-reduced-motion:reduce){.reward-landing *{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* Explain each reward and its trigger without shrinking reading text. */ :where(.reward-landing) .rm-step-details{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rm-line);display:grid;gap:18px} :where(.reward-landing) .rm-step-details dt{font-size:14px;font-weight:600;color:#f4b6cf;margin-bottom:5px} :where(.reward-landing) .rm-step-details dd{margin:0;font-size:14px;line-height:1.95;color:#d5c8dc} :where(.reward-landing) .rm-step-list>li>p{min-height:112px;color:#d5c8dc} @media(max-width:760px){:where(.reward-landing) .rm-step-list>li>p{min-height:0}:where(.reward-landing) .rm-step-details{gap:15px}} /* HOW IT WORKS: one clear, playful subject per step. */ :where(.reward-landing) .rm-step-scene{height:232px;margin-top:20px;border:1px solid #e8c3f04d;border-radius:16px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#71468a70,transparent 70%),linear-gradient(145deg,#362046,#20142f)} :where(.reward-landing) .rm-step-scene img{object-fit:contain} :where(.reward-landing) .rm-scene-letter-screen{display:block;position:relative;width:100%;height:144px;border:0;padding:0;background:#160b2a;cursor:zoom-in;overflow:hidden} :where(.reward-landing) .rm-scene-letter-screen img{width:100%;height:100%;object-fit:cover;object-position:center 24%} :where(.reward-landing) .rm-scene-letter-screen>span{position:absolute;bottom:8px;right:8px;padding:3px 9px;background:#301939ed;border:1px solid #d0a6cc66;border-radius:20px;color:#fff0fa;font-size:12px} :where(.reward-landing) .rm-scene-box-strip{display:flex;align-items:center;justify-content:center;gap:13px;height:88px;color:#ecd4e9;font-size:12px} :where(.reward-landing) .rm-scene-box-strip img{width:80px;height:80px;object-fit:contain} :where(.reward-landing) .rm-scene-box-strip strong{font-size:14px;font-weight:500;color:#fff0fa} :where(.reward-landing) .rm-fun-panel{position:relative;display:block;width:100%;height:187px;border:0;padding:0;background:#291336;cursor:zoom-in;overflow:hidden} :where(.reward-landing) .rm-fun-panel img{width:100%;height:100%;object-fit:cover;object-position:40% center} :where(.reward-landing) .rm-fun-panel[data-fun=gacha] img{object-position:50% center} :where(.reward-landing) .rm-fun-panel>span{position:absolute;right:8px;bottom:8px;padding:3px 9px;background:#301939ed;border:1px solid #d0a6cc66;border-radius:20px;color:#fff0fa;font-size:12px} :where(.reward-landing) .rm-fun-buttons{display:flex;gap:6px;align-items:center;justify-content:center;height:44px;background:#241431} :where(.reward-landing) .rm-fun-buttons button{min-height:32px;padding:3px 12px;border:1px solid #d5b4df55;background:transparent;border-radius:20px;color:#d8bedb;font-size:12px} :where(.reward-landing) .rm-fun-buttons button[aria-pressed=true]{background:#e2aad1;color:#291230;border-color:#e2aad1} :where(.reward-landing) .rm-scene-task-screen{display:block;position:relative;width:100%;height:100%;border:0;padding:0;background:#21172e;cursor:zoom-in;overflow:hidden} /* Keep the original screenshot for enlargement; give Benny room in the preview. */ :where(.reward-landing) .rm-scene-task-screen .rm-task-preview{position:absolute;bottom:0;left:0;width:100%;height:105px;object-fit:cover;object-position:center bottom} :where(.reward-landing) .rm-task-companion{position:absolute;inset:0 0 auto;height:127px;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#2a1b3b,#21172e);color:#f8e5f4} :where(.reward-landing) .rm-task-companion img{width:82px;height:119px;object-fit:contain;filter:drop-shadow(0 6px 10px #b891db33)} :where(.reward-landing) .rm-task-companion>span{font-size:14px;line-height:1.6;padding:9px 12px;border:1px solid #c0a9d459;border-radius:24px;background:#ac90bf2b} :where(.reward-landing) .rm-task-enlarge{position:absolute;bottom:8px;right:8px;padding:3px 9px;background:#301939ed;border:1px solid #d0a6cc66;border-radius:20px;color:#fff0fa;font-size:12px} @media(max-width:420px){:where(.reward-landing) .rm-task-companion{gap:7px}:where(.reward-landing) .rm-task-companion>span{font-size:13px;padding:9px}} @charset "UTF-8"; /* ===================== CSS読み込み設定（Rails用） ===================== */ /* */ /* ===================== フッター ===================== */ /* line 12, app/assets/stylesheets/application.scss */ .site-footer { position: fixed; bottom: 16px; right: 20px; z-index: 100; } /* line 19, app/assets/stylesheets/application.scss */ .github-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: rgba(255, 230, 255, 0.9); font-size: 12px; font-weight: bold; text-decoration: none; letter-spacing: 0.5px; transition: all 0.22s ease; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(180, 100, 255, 0.08); } /* line 41, app/assets/stylesheets/application.scss */ .github-badge:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 210, 250, 0.45); color: #fff; box-shadow: 0 6px 32px rgba(180, 80, 255, 0.25), 0 0 20px rgba(255, 160, 220, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45); transform: translateY(-2px); } /* line 52, app/assets/stylesheets/application.scss */ .github-badge-ico { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } /* ===================== ヘッダー ===================== */ /* line 62, app/assets/stylesheets/application.scss */ .header { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1340px; margin: 0 auto; padding: 0 20px; height: 68px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; box-shadow: none; } /* line 78, app/assets/stylesheets/application.scss */ .header-link { background: linear-gradient(135deg, #ff8fab, #c96fff); color: white; text-decoration: none; font-weight: bold; padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 14px rgba(255, 143, 171, 0.4); display: inline-block; position: relative; z-index: 20; } /* line 91, app/assets/stylesheets/application.scss */ .header-title { font-size: 14px; color: #e8b4ff; font-weight: bold; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; } /* line 101, app/assets/stylesheets/application.scss */ .header-link:hover { opacity: 0.8; } /* line 105, app/assets/stylesheets/application.scss */ .header { position: relative; z-index: 10; flex-wrap: wrap; } /* ===================== ゲームUI風カレンダー ===================== */ /* line 114, app/assets/stylesheets/application.scss */ .calendar-wrapper { width: 100%; max-width: 100%; margin: 0; } /* line 120, app/assets/stylesheets/application.scss */ .simple-calendar { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; max-width: 100%; border-radius: 0; } /* line 130, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #f5e6ff; } /* line 139, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading .calendar-title { font-size: 15px; font-weight: bold; display: flex; align-items: center; gap: 6px; } /* line 147, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading .calendar-title::before { content: "△"; font-size: 12px; color: rgba(245, 230, 255, 0.45); } /* line 153, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading nav { display: flex; align-items: center; gap: 4px; } /* line 159, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading nav a { text-decoration: none; transition: background 0.15s; } /* line 164, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading nav a:first-child { font-size: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 143, 171, 0.15); border: 1px solid rgba(255, 143, 171, 0.3); color: #ff8fab; } /* line 177, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading nav a:first-child::before { content: "＜"; font-size: 12px; } /* line 182, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading nav a:nth-child(2) { display: none; } /* line 186, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading nav a:last-child { font-size: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 143, 171, 0.15); border: 1px solid rgba(255, 143, 171, 0.3); color: #ff8fab; } /* line 199, app/assets/stylesheets/application.scss */ .simple-calendar .calendar-heading nav a:last-child::before { content: "＞"; font-size: 12px; } /* line 204, app/assets/stylesheets/application.scss */ .simple-calendar table { width: 100%; border-collapse: separate; border-spacing: 3px; } /* line 210, app/assets/stylesheets/application.scss */ .simple-calendar th { font-size: 10px; font-weight: bold; color: #e8b4ff; text-align: center; padding: 4px 0; width: 14.28%; } /* line 219, app/assets/stylesheets/application.scss */ .simple-calendar td { width: 14.28%; height: 44px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 160, 200, 0.06); border-radius: 8px; text-align: center; vertical-align: middle; color: #f5e6ff; padding: 2px; transition: background 0.15s; position: relative; } /* line 233, app/assets/stylesheets/application.scss */ .simple-calendar td:hover { background: rgba(255, 143, 171, 0.12); } /* line 237, app/assets/stylesheets/application.scss */ .simple-calendar .today { background: linear-gradient(135deg, #ff8fab, #c96fff) !important; color: white !important; font-weight: bold; border: none; transform: none; } /* line 245, app/assets/stylesheets/application.scss */ .simple-calendar .prev-month, .simple-calendar .next-month { opacity: 0.2; } /* line 250, app/assets/stylesheets/application.scss */ .cal-day { display: block; font-size: 11px; line-height: 1.3; } /* line 256, app/assets/stylesheets/application.scss */ .cal-icon { display: block; font-size: 12px; line-height: 1; } /* line 262, app/assets/stylesheets/application.scss */ .calendar-legend { display: flex; justify-content: center; gap: 16px; margin-top: 10px; font-size: 11px; color: rgba(240, 200, 255, 0.55); } /* 🍰表示 */ /* line 272, app/assets/stylesheets/application.scss */ .calendar-task { display: inline-block; font-size: 18px; background: rgba(255, 143, 171, 0.25); border-radius: 999px; padding: 2px 6px; margin-top: 4px; } /* ===================== 全体 ===================== */ /* line 284, app/assets/stylesheets/application.scss */ body { background: #0c0428; background-image: linear-gradient(160deg, #0f0330 0%, #0c0428 45%, #090220 100%); background-attachment: fixed; font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; padding-top: 12px; color: #f5e6ff; } /* ===================== タイトル ===================== */ /* line 298, app/assets/stylesheets/application.scss */ h1 { text-align: center; color: #f5e6ff; text-shadow: 0 0 20px rgba(200, 120, 255, 0.5); } /* ===================== ボタン ===================== */ /* line 307, app/assets/stylesheets/application.scss */ button, input[type="submit"] { cursor: pointer; background: linear-gradient(135deg, #ff8fab, #c96fff); border-radius: 999px; color: white; border: none; padding: 6px 12px; box-shadow: 0 4px 14px rgba(200, 80, 255, 0.3); } /* line 318, app/assets/stylesheets/application.scss */ input[type="submit"]:hover, button:hover { opacity: 0.8; } /* 横並び */ /* line 324, app/assets/stylesheets/application.scss */ .task-card form { display: inline-block; margin-right: 5px; } /* ===================== ログイン画面（1カラム中央寄せ） ===================== */ /* line 333, app/assets/stylesheets/application.scss */ body:has(.login-page) { padding-top: 0 !important; } /* 認証画面の背景は .login-page の aurora グラデーション＋orb＋particle で 完結させる。body::before / ::after の固定グロー2枚（blur(80px)）は 別系統の重ね掛けで、密度だけが増えて世界観には効いていなかったので止める。 */ /* line 340, app/assets/stylesheets/application.scss */ body:has(.login-page)::before, body:has(.login-page)::after { content: none; } /* line 345, app/assets/stylesheets/application.scss */ .login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; box-sizing: border-box; /* LP と同じ aurora グラデーション */ background: radial-gradient(ellipse 130% 60% at 10% 10%, rgba(201, 111, 255, 0.26) 0%, transparent 52%), radial-gradient(ellipse 80% 50% at 90% 35%, rgba(255, 143, 172, 0.18) 0%, transparent 50%), radial-gradient(ellipse 70% 65% at 50% 90%, rgba(90, 130, 255, 0.13) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 15% 65%, rgba(110, 221, 160, 0.07) 0%, transparent 50%), #0d0719; background-attachment: fixed; } /* Aurora orbs（LP と同世界観）*/ /* line 364, app/assets/stylesheets/application.scss */ .login-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; } /* line 371, app/assets/stylesheets/application.scss */ .login-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.4; } /* line 378, app/assets/stylesheets/application.scss */ .login-orb--1 { width: 460px; height: 460px; background: #c96fff; top: -100px; left: 50%; transform: translateX(-50%); } /* line 385, app/assets/stylesheets/application.scss */ .login-orb--2 { width: 260px; height: 260px; background: #ff8fac; top: 40%; right: -60px; } /* line 391, app/assets/stylesheets/application.scss */ .login-orb--3 { width: 180px; height: 180px; background: #5a82ff; bottom: 10%; left: -40px; } /* 星屑パーティクル */ /* line 398, app/assets/stylesheets/application.scss */ .login-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; } /* line 405, app/assets/stylesheets/application.scss */ .particle { position: absolute; left: var(--x); bottom: -10px; width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 240, 0.95), rgba(200, 130, 255, 0.5)); box-shadow: 0 0 6px rgba(255, 180, 230, 0.7); animation: particleFloat 12s var(--delay) infinite ease-in-out; } @keyframes particleFloat { 0% { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; } 10% { opacity: 0.85; } 50% { transform: translateY(-52vh) translateX(18px) scale(1.1); } 90% { opacity: 0.3; } 100% { transform: translateY(-105vh) translateX(-8px) scale(0.5); opacity: 0; } } /* ===== ロゴ（上部中央） ===== */ /* line 426, app/assets/stylesheets/application.scss */ .login-header { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 48px; position: relative; z-index: 2; } /* ロゴ画像 160px はカード幅(360px)の44%あり、カードと主役を取り合っていた。 カードを主役に据え、ロゴは「ここはRewardMe」と分かる名札の大きさに戻す。 位置合わせの margin-bottom:-12px は .login-header の gap に置き換え。 */ /* line 440, app/assets/stylesheets/application.scss */ .login-logo-img { height: 104px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(255, 143, 172, 0.35)) drop-shadow(0 0 40px rgba(201, 111, 255, 0.2)); } /* ロゴ（テキスト版 fallback） */ /* line 448, app/assets/stylesheets/application.scss */ .login-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* line 455, app/assets/stylesheets/application.scss */ .login-logo-r { font-size: 82px; font-weight: 900; line-height: 1; font-style: italic; background: linear-gradient(135deg, #ffb3d0 0%, #da8fff 55%, #b97aff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 28px #ffa0e6) drop-shadow(0 0 12px rgba(220, 140, 255, 0.8)); } /* line 467, app/assets/stylesheets/application.scss */ .login-logo-words { display: flex; flex-direction: column; gap: 3px; } /* line 473, app/assets/stylesheets/application.scss */ .login-logo-name { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: 0.5px; } /* line 480, app/assets/stylesheets/application.scss */ .login-logo-reward { color: #ffffff; text-shadow: 0 0 20px rgba(255, 200, 255, 0.6); } /* line 482, app/assets/stylesheets/application.scss */ .login-logo-me { background: linear-gradient(135deg, #ff8fab, #c96fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* line 489, app/assets/stylesheets/application.scss */ .login-logo-sub { font-size: 11px; color: rgba(255, 200, 240, 0.85); letter-spacing: 3px; text-shadow: 0 0 12px rgba(220, 140, 255, 0.5); } /* キャッチコピー */ /* line 497, app/assets/stylesheets/application.scss */ .login-left-copy { font-size: 12px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.1em; margin: 0; font-weight: 600; } /* ===== フォームカード（中央） ===== */ /* line 506, app/assets/stylesheets/application.scss */ .login-center { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; width: 100%; box-sizing: border-box; /* 旧 padding-bottom:220px は下部固定の3キャラトリオのための場所取りだった。 トリオ撤去に伴い、上下は同じ余白で受ける（カードが画面中央に座る）。 */ padding: 40px 20px 56px; } /* フォームカード */ /* line 521, app/assets/stylesheets/application.scss */ .login-card { width: 100%; max-width: 360px; padding: 28px 28px 24px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(32px) saturate(1.6); -webkit-backdrop-filter: blur(32px) saturate(1.6); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(200, 140, 255, 0.08); text-align: center; color: #f5e6ff; position: relative; overflow: hidden; } /* line 540, app/assets/stylesheets/application.scss */ .login-card::before { content: ""; position: absolute; inset: 0; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 60%, rgba(180, 100, 255, 0.08) 100%); pointer-events: none; } /* ===== 認証カードの型 ===== 文字サイズは 20 / 15 / 12 の3段階だけを使う。 余白は 8px グリッド（8 / 16 / 24）に揃える。 従来は 14/8/12/2/4px と font-size 11〜15px が混在し、 「カードを中央に置いただけ」の印象の実体になっていた。 */ /* line 560, app/assets/stylesheets/application.scss */ .login-card-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0.04em; color: #f5e6ff; text-shadow: 0 0 20px rgba(200, 120, 255, 0.5); } /* 旧 .login-welcome::after / .signup-heading::after で CSS の content に 埋まっていた文言を、ビュー側の要素として持ち上げたもの。 */ /* line 571, app/assets/stylesheets/application.scss */ .login-card-sub { margin: 8px 0 0; font-size: 12px; font-weight: normal; color: rgba(255, 200, 240, 0.65); } /* line 578, app/assets/stylesheets/application.scss */ .login-card form { margin-top: 24px; } /* line 582, app/assets/stylesheets/application.scss */ .form-group { text-align: left; margin-bottom: 16px; } /* line 587, app/assets/stylesheets/application.scss */ .login-card label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: rgba(255, 210, 240, 0.8); letter-spacing: 0.5px; } /* 入力欄：従来 .form-input は :558 と :930 で二重定義され、 ログイン用に書いた :558 は padding / border / radius / background が すべて後段のアプリ共通 input 群に上書きされて死んでいた。 ここではカード内だけに効かせ、共通の input には触らない。 半径はカード(28px)との関係で決める（28 - 内側余白28 → 14px）。 */ /* line 601, app/assets/stylesheets/application.scss */ .login-card .form-input { width: 100%; padding: 12px 14px; border: 1px solid rgba(255, 200, 240, 0.25); border-radius: 14px; box-sizing: border-box; background: rgba(255, 255, 255, 0.1); color: #f5e6ff; font-size: 15px; font-family: inherit; } /* ログインボタン */ /* ラベルに混ざっていた装飾記号「✦」はビュー側で除去した。 長さの違う2語（ログイン／登録する）に同じ飾りが付き、 letter-spacing が飾りにも効いて字面の重心がズレていたため。 */ /* line 617, app/assets/stylesheets/application.scss */ .login-btn-new { width: 100%; padding: 14px; margin-top: 8px; font-size: 15px; font-weight: bold; color: white; background: linear-gradient(135deg, #ff8fab, #c96fff, #9b4dff); border: none; border-radius: 999px; cursor: pointer; letter-spacing: 1.5px; box-shadow: 0 6px 24px rgba(200, 80, 255, 0.55), 0 0 35px rgba(255, 140, 210, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); animation: btnGlowPulse 2.5s ease-in-out infinite; transition: transform 0.2s ease, box-shadow 0.2s ease; } @keyframes btnGlowPulse { 0%, 100% { box-shadow: 0 6px 24px rgba(200, 80, 255, 0.55), 0 0 35px rgba(255, 140, 210, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 6px 32px rgba(200, 80, 255, 0.75), 0 0 55px rgba(255, 140, 210, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); } } /* line 652, app/assets/stylesheets/application.scss */ .login-btn-new:hover { transform: translateY(-2px) scale(1.02); animation: none; box-shadow: 0 10px 36px rgba(200, 80, 255, 0.8), 0 0 60px rgba(255, 140, 210, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* .login-btn-new はタスク追加フォーム・設定画面でも使い回されているため、 常時発光の停止は認証カード内だけに限定する（他画面の見た目は不変）。 ラベルの装飾記号「✦」もビュー側で認証2画面のみ除去済み。 */ /* line 664, app/assets/stylesheets/application.scss */ .login-card .login-btn-new { font-family: inherit; letter-spacing: 0.08em; animation: none; box-shadow: 0 6px 20px rgba(200, 80, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25); } /* line 673, app/assets/stylesheets/application.scss */ .login-card .login-btn-new:hover, .login-card .login-btn-new:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(200, 80, 255, 0.62), 0 0 40px rgba(255, 140, 210, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* line 682, app/assets/stylesheets/application.scss */ .login-card .login-btn-new:active { transform: translateY(0); } /* 新規登録リンク */ /* line 685, app/assets/stylesheets/application.scss */ .login-signup-link { margin: 24px 0 0; font-size: 12px; color: rgba(240, 200, 255, 0.6); } /* line 691, app/assets/stylesheets/application.scss */ .login-link { color: #ff8fab; font-weight: bold; text-decoration: none; } /* line 697, app/assets/stylesheets/application.scss */ .login-link:hover { text-decoration: underline; } /* ===== 「または」区切り ===== */ /* line 700, app/assets/stylesheets/application.scss */ .login-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; color: rgba(240, 200, 255, 0.45); font-size: 11px; letter-spacing: 1px; } /* .login-or はたまご選択画面でも使われているため、 8pxグリッド／文字サイズ3段階への揃えは認証カード内だけに効かせる。 */ /* line 712, app/assets/stylesheets/application.scss */ .login-card .login-or { gap: 8px; margin: 24px 0 8px; font-size: 12px; } /* line 718, app/assets/stylesheets/application.scss */ .login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 140, 255, 0.25), transparent); } /* ===== ゲストで試す（セカンダリ：枠も塗りもなし・余白で見せるCTA） ===== */ /* line 727, app/assets/stylesheets/application.scss */ .login-guest-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px; margin-top: 0; background: none; border: none; /* 共通の button ルール（box-shadow: 0 4px 14px …）が残っていたため、 「枠も塗りもなし」の指定に反してピル状の影が出ていた。ここで打ち消す。 */ box-shadow: none; border-radius: 999px; color: rgba(255, 200, 224, 0.85); font-size: 15px; font-family: inherit; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease; } /* line 750, app/assets/stylesheets/application.scss */ .login-guest-btn:hover { color: #ffd6e6; text-shadow: 0 0 14px rgba(255, 140, 210, 0.55); transform: translateY(-1px); } /* ===== ログイン BGM ボタン ===== */ /* line 757, app/assets/stylesheets/application.scss */ .login-bgm-btn { position: fixed; top: 14px; right: 16px; z-index: 20; background: rgba(10, 2, 32, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(200, 140, 255, 0.3); border-radius: 50%; width: 40px; height: 40px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.15s; } /* line 776, app/assets/stylesheets/application.scss */ .login-bgm-btn:hover { background: rgba(30, 8, 60, 0.75); transform: scale(1.1); } /* 3キャラトリオ（stage4 の立ち絵3体を下部に固定）は撤去した。 認証画面の主役をフォームカードに戻すため。移設も代替も置かない。 これに伴い .login-center の padding-bottom:220px（トリオの場所取り）も解消済み。 @keyframes loginCharaFloat は他4箇所で使用中のため残す。 */ /* 旧スタイル（互換のため残す） */ /* line 787, app/assets/stylesheets/application.scss */ .login-chara-corner { display: none; } /* line 789, app/assets/stylesheets/application.scss */ .login-chara-img { height: 320px; width: auto; object-fit: contain; object-position: bottom; position: relative; z-index: 1; transform-origin: center bottom; animation: loginCharaFloat 3.5s ease-in-out infinite, loginEggGlow 4s ease-in-out infinite; } /* ぽよん：ボタンホバー時に1回だけ発火 */ /* line 801, app/assets/stylesheets/application.scss */ .login-chara-img.egg-pyon { animation: eggPyon 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards !important; } @keyframes eggPyon { 0% { transform: translateY(0) scaleX(1) scaleY(1); } 10% { transform: translateY(6px) scaleX(1.14) scaleY(0.78); } 32% { transform: translateY(-46px) scaleX(0.9) scaleY(1.14); } 55% { transform: translateY(-20px) scaleX(0.95) scaleY(1.06); } 72% { transform: translateY(5px) scaleX(1.11) scaleY(0.86); } 85% { transform: translateY(-10px) scaleX(0.97) scaleY(1.04); } 94% { transform: translateY(1px) scaleX(1.03) scaleY(0.98); } 100% { transform: translateY(0) scaleX(1) scaleY(1); } } /* キラキラ（✦マーク） */ /* line 817, app/assets/stylesheets/application.scss */ .egg-sparkle { position: absolute; color: #fff; font-size: 16px; pointer-events: none; animation: eggSparkle var(--dur, 2.5s) var(--delay, 0s) ease-in-out infinite; text-shadow: 0 0 6px #ffdcf0, 0 0 14px rgba(255, 143, 172, 0.9), 0 0 28px rgba(201, 111, 255, 0.7); } /* line 829, app/assets/stylesheets/application.scss */ .egg-sparkle--1 { top: 18%; left: 8%; --dur: 2.2s; --delay: 0s; font-size: 18px; } /* line 830, app/assets/stylesheets/application.scss */ .egg-sparkle--2 { top: 12%; right: 10%; --dur: 2.8s; --delay: 0.5s; font-size: 14px; } /* line 831, app/assets/stylesheets/application.scss */ .egg-sparkle--3 { top: 45%; right: 5%; --dur: 2.0s; --delay: 1.1s; font-size: 12px; } /* line 832, app/assets/stylesheets/application.scss */ .egg-sparkle--4 { top: 52%; left: 6%; --dur: 3.1s; --delay: 0.7s; font-size: 10px; } /* line 833, app/assets/stylesheets/application.scss */ .egg-sparkle--5 { top: 5%; left: 40%; --dur: 2.5s; --delay: 1.5s; font-size: 20px; } /* line 834, app/assets/stylesheets/application.scss */ .egg-sparkle--6 { top: 28%; left: 12%; --dur: 2.7s; --delay: 0.3s; font-size: 11px; } @keyframes eggSparkle { 0%, 100% { transform: scale(0.4) translateY(0); opacity: 0.2; } 40% { transform: scale(1.4) translateY(-8px); opacity: 1.0; } 70% { transform: scale(0.8) translateY(-4px); opacity: 0.6; } } @keyframes loginCharaFloat { 0%, 100% { transform: translateY(0px); } 30% { transform: translateY(-18px); } 60% { transform: translateY(-12px); } } @keyframes loginEggGlow { 0%, 100% { filter: brightness(1.08) contrast(1.05) drop-shadow(0 8px 20px rgba(255, 143, 172, 0.4)) drop-shadow(0 0 32px rgba(201, 111, 255, 0.28)); } 50% { filter: brightness(1.22) contrast(1.08) drop-shadow(0 8px 28px rgba(255, 143, 172, 0.7)) drop-shadow(0 0 56px rgba(201, 111, 255, 0.6)) drop-shadow(0 0 100px rgba(255, 190, 230, 0.4)); } } /* レスポンシブ */ @media (max-width: 600px) { /* line 866, app/assets/stylesheets/application.scss */ .login-header { padding-top: 24px; } /* line 867, app/assets/stylesheets/application.scss */ .login-logo-img { height: 80px; } /* line 868, app/assets/stylesheets/application.scss */ .login-center { padding: 24px 20px 40px; } /* line 869, app/assets/stylesheets/application.scss */ .login-logo-r { font-size: 48px; } /* line 870, app/assets/stylesheets/application.scss */ .login-logo-name { font-size: 26px; } /* line 871, app/assets/stylesheets/application.scss */ .login-chara-wrap { width: 200px; height: 220px; } /* line 872, app/assets/stylesheets/application.scss */ .login-chara-img { height: 190px; } } /* ===================== 仕上げ：ふわかわ完成デザイン ===================== */ /* 背景のグロー装飾 */ /* line 879, app/assets/stylesheets/application.scss */ body::before { content: ""; position: fixed; top: 10%; left: 5%; width: 320px; height: 320px; background: rgba(140, 40, 220, 0.12); border-radius: 50%; filter: blur(80px); z-index: -1; } /* line 892, app/assets/stylesheets/application.scss */ body::after { content: ""; position: fixed; bottom: 10%; right: 8%; width: 300px; height: 300px; background: rgba(200, 60, 120, 0.09); border-radius: 50%; filter: blur(80px); z-index: -1; } /* 旧 .login-welcome::after / .signup-heading::after はここで画面の文言を CSS の content として持っていた（ビューを開いても見つからない状態）。 文言は .login-card-sub としてビューへ移設済み。 */ /* ===== 認証カードのエラー表示 ===== 従来：ログインは flash.now を立てるだけで描画先が無く無反応、 新規登録は .login-errors を使っていたが CSS 定義が無く素のテキストだった。 両画面で同じ器・同じ見え方に揃える。 */ /* line 913, app/assets/stylesheets/application.scss */ .login-errors { margin: 16px 0 0; padding: 12px 14px; text-align: left; border-radius: 14px; background: rgba(255, 90, 140, 0.12); border: 1px solid rgba(255, 120, 160, 0.38); } /* line 922, app/assets/stylesheets/application.scss */ .login-errors p { margin: 0; font-size: 12px; line-height: 1.6; color: #ffc2d6; } /* line 929, app/assets/stylesheets/application.scss */ .login-errors p + p { margin-top: 4px; } /* 入力欄 */ /* line 932, app/assets/stylesheets/application.scss */ .form-input, input[type="email"], input[type="password"], input[type="text"], input[type="date"], select { width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 160, 200, 0.3); border-radius: 14px; box-sizing: border-box; background: rgba(255, 255, 255, 0.08); color: #f5e6ff; } /* line 947, app/assets/stylesheets/application.scss */ .form-input::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="text"]::placeholder { color: rgba(255, 200, 230, 0.5); } /* line 954, app/assets/stylesheets/application.scss */ .form-input:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, input[type="date"]:focus, select:focus { outline: none; border-color: #ff8fab; box-shadow: 0 0 0 3px rgba(255, 143, 171, 0.2); } /* line 965, app/assets/stylesheets/application.scss */ select option { background: #2a0a40; color: #f5e6ff; } /* ボタンをぷにっと */ /* line 971, app/assets/stylesheets/application.scss */ button, input[type="submit"], .header-link, .new-task-button, .back-link { transition: 0.2s ease; } /* line 979, app/assets/stylesheets/application.scss */ button:hover, input[type="submit"]:hover, .header-link:hover, .new-task-button:hover, .back-link:hover { transform: translateY(-2px); } /* GitHubリンクも浮かせる */ /* line 988, app/assets/stylesheets/application.scss */ a[href*="github"] { display: inline-block; margin: 20px; color: #ff8fab; font-weight: bold; } /* line 995, app/assets/stylesheets/application.scss */ .sparkles span { position: absolute; width: 12px; height: 12px; background: white; border-radius: 50%; box-shadow: 0 0 8px white, 0 0 16px white, 0 0 24px #ffd6f0; animation: twinkle 3s infinite; } /* line 1011, app/assets/stylesheets/application.scss */ .ribbon-image { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 20px rgba(255, 220, 240, 0.8)); } /* ===================== ヘッダー ゲームUI ===================== */ /* line 1020, app/assets/stylesheets/application.scss */ .header-logo { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 160, 200, 0.28); color: #f5e6ff; text-decoration: none; font-size: 14px; font-weight: bold; padding: 7px 16px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } /* line 1033, app/assets/stylesheets/application.scss */ .header-logo:hover { opacity: 0.85; } /* line 1037, app/assets/stylesheets/application.scss */ .header-status { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 460px; } /* line 1045, app/assets/stylesheets/application.scss */ .header-lv { font-size: 13px; font-weight: bold; color: #ffd060; white-space: nowrap; } /* line 1052, app/assets/stylesheets/application.scss */ .header-exp-wrap { display: flex; align-items: center; gap: 8px; flex: 1; } /* line 1059, app/assets/stylesheets/application.scss */ .header-exp-bar { flex: 1; height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 160, 200, 0.18); } /* line 1068, app/assets/stylesheets/application.scss */ .header-exp-fill { height: 100%; background: linear-gradient(90deg, var(--accent-1, #ff8fab), var(--accent-2, #c96fff)); border-radius: 999px; box-shadow: 0 0 8px var(--accent-glow, rgba(200, 80, 255, 0.4)); } /* line 1075, app/assets/stylesheets/application.scss */ .header-exp-text { font-size: 11px; color: rgba(240, 200, 255, 0.65); white-space: nowrap; } /* line 1081, app/assets/stylesheets/application.scss */ .header-stage { font-size: 11px; color: #e8b4ff; white-space: nowrap; background: rgba(255, 160, 200, 0.1); border: 1px solid rgba(255, 160, 200, 0.2); padding: 3px 10px; border-radius: 999px; } /* line 1091, app/assets/stylesheets/application.scss */ .header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* line 1098, app/assets/stylesheets/application.scss */ .header-username { font-size: 13px; color: #e8b4ff; white-space: nowrap; } /* line 1105, app/assets/stylesheets/application.scss */ .header-logo-image { height: 56px; filter: drop-shadow(0 0 8px rgba(255, 160, 220, 0.35)) drop-shadow(0 0 20px rgba(200, 100, 255, 0.25)); } /* line 1112, app/assets/stylesheets/application.scss */ .header-lives { font-size: 12px; color: #ff8fa3; white-space: nowrap; background: rgba(255, 100, 130, 0.12); border: 1px solid rgba(255, 100, 130, 0.25); padding: 3px 10px; border-radius: 999px; } /* line 1122, app/assets/stylesheets/application.scss */ .header-coins { font-size: 12px; color: #ffd060; font-weight: bold; white-space: nowrap; background: rgba(255, 210, 50, 0.1); border: 1px solid rgba(255, 210, 50, 0.25); padding: 3px 10px; border-radius: 999px; } /* line 1133, app/assets/stylesheets/application.scss */ .nav-icon-link { display: inline-flex; align-items: center; justify-content: center; } /* line 1139, app/assets/stylesheets/application.scss */ .nav-home-icon { width: 64px; height: 64px; object-fit: contain; transition: transform 0.2s ease; } /* line 1146, app/assets/stylesheets/application.scss */ .nav-home-icon:hover { transform: scale(1.08); } /* line 1150, app/assets/stylesheets/application.scss */ .sidebar-card { text-align: center; margin-bottom: 24px; } /* line 1155, app/assets/stylesheets/application.scss */ .home-icon { width: 90px; height: auto; display: block; margin: 0 auto 10px; } /* line 1161, app/assets/stylesheets/application.scss */ .home-icon:hover { transform: scale(1.05); } /* line 1165, app/assets/stylesheets/application.scss */ .home-title { color: white; font-size: 24px; font-weight: bold; } /* line 1171, app/assets/stylesheets/application.scss */ .brand-logo { font-size: 28px; margin-bottom: 8px; } /* line 1176, app/assets/stylesheets/application.scss */ .brand-subtitle { font-size: 13px; line-height: 1.6; opacity: .8; } /* line 1182, app/assets/stylesheets/application.scss */ .brand-panel { padding: 18px; } /* ===================== たまご選択画面 ===================== */ /* line 1188, app/assets/stylesheets/application.scss */ .choose-egg-page { justify-content: flex-start; padding-top: 20px; } /* line 1193, app/assets/stylesheets/application.scss */ .choose-egg-main { text-align: center; padding: 0 20px 40px; position: relative; z-index: 2; } /* line 1200, app/assets/stylesheets/application.scss */ .choose-egg-greeting { font-size: 16px; color: rgba(255, 210, 240, 0.75); margin: 0 0 8px; letter-spacing: 2px; } /* line 1207, app/assets/stylesheets/application.scss */ .choose-egg-title { font-size: 26px; font-weight: bold; color: #fff; margin: 0 0 44px; line-height: 1.6; text-shadow: 0 0 32px rgba(255, 143, 172, 0.5); } /* line 1216, app/assets/stylesheets/application.scss */ .choose-egg-grid { display: flex; gap: 28px; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 32px; } /* ===== カード ===== */ /* line 1226, app/assets/stylesheets/application.scss */ .egg-choice-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 22px 24px; width: 186px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(20px); border-radius: 28px; border: 1.5px solid rgba(255, 160, 200, 0.2); cursor: pointer; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s, opacity 0.3s; overflow: visible; user-select: none; } /* line 1247, app/assets/stylesheets/application.scss */ .egg-choice-card:hover { transform: translateY(-14px) scale(1.05); } /* line 1251, app/assets/stylesheets/application.scss */ .egg-choice-card--pink:hover { border-color: rgba(255, 143, 172, 0.7); box-shadow: 0 20px 56px rgba(255, 100, 160, 0.4), 0 0 0 3px rgba(255, 143, 172, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* line 1257, app/assets/stylesheets/application.scss */ .egg-choice-card--blue:hover { border-color: rgba(100, 160, 255, 0.7); box-shadow: 0 20px 56px rgba(80, 130, 255, 0.4), 0 0 0 3px rgba(100, 160, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* line 1263, app/assets/stylesheets/application.scss */ .egg-choice-card--purple:hover { border-color: rgba(180, 100, 255, 0.7); box-shadow: 0 20px 56px rgba(150, 60, 240, 0.4), 0 0 0 3px rgba(180, 100, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* 選択時の状態 */ /* line 1271, app/assets/stylesheets/application.scss */ .egg-card--dim { opacity: 0.25; transform: scale(0.93) !important; pointer-events: none; } /* line 1277, app/assets/stylesheets/application.scss */ .egg-card--chosen-pulse { transform: translateY(-14px) scale(1.1) !important; z-index: 10; } /* 外側リングアニメ（ホバー時だけ） */ /* line 1283, app/assets/stylesheets/application.scss */ .egg-choice-outer-ring { position: absolute; inset: -6px; border-radius: 34px; border: 2px solid transparent; transition: border-color 0.3s, box-shadow 0.3s; pointer-events: none; } /* line 1292, app/assets/stylesheets/application.scss */ .egg-choice-card--pink:hover .egg-choice-outer-ring { border-color: rgba(255, 143, 172, 0.35); box-shadow: 0 0 16px rgba(255, 100, 160, 0.25); } /* line 1293, app/assets/stylesheets/application.scss */ .egg-choice-card--blue:hover .egg-choice-outer-ring { border-color: rgba(100, 160, 255, 0.35); box-shadow: 0 0 16px rgba(80, 130, 255, 0.25); } /* line 1294, app/assets/stylesheets/application.scss */ .egg-choice-card--purple:hover .egg-choice-outer-ring { border-color: rgba(180, 100, 255, 0.35); box-shadow: 0 0 16px rgba(150, 60, 240, 0.25); } /* 背景グロー */ /* line 1297, app/assets/stylesheets/application.scss */ .egg-choice-glow { position: absolute; inset: 0; border-radius: 28px; opacity: 0; transition: opacity 0.3s; pointer-events: none; } /* line 1305, app/assets/stylesheets/application.scss */ .egg-choice-card:hover .egg-choice-glow { opacity: 1; } /* line 1306, app/assets/stylesheets/application.scss */ .egg-glow--pink { background: radial-gradient(ellipse at 50% 25%, rgba(255, 143, 172, 0.22) 0%, transparent 65%); } /* line 1307, app/assets/stylesheets/application.scss */ .egg-glow--blue { background: radial-gradient(ellipse at 50% 25%, rgba(100, 160, 255, 0.22) 0%, transparent 65%); } /* line 1308, app/assets/stylesheets/application.scss */ .egg-glow--purple { background: radial-gradient(ellipse at 50% 25%, rgba(180, 100, 255, 0.22) 0%, transparent 65%); } /* ===== たまご画像 ===== */ /* line 1311, app/assets/stylesheets/application.scss */ .egg-choice-img-wrap { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; } /* line 1320, app/assets/stylesheets/application.scss */ .egg-choice-img { height: 142px; width: auto; object-fit: contain; animation: loginCharaFloat 3.5s ease-in-out infinite; filter: brightness(1.12) contrast(1.04) drop-shadow(0 6px 20px rgba(255, 143, 172, 0.55)) drop-shadow(0 0 40px rgba(255, 100, 160, 0.25)); } /* ホバー時に卵をさらに光らせる */ /* line 1331, app/assets/stylesheets/application.scss */ .egg-choice-card--pink:hover .egg-choice-img { filter: brightness(1.22) contrast(1.06) drop-shadow(0 6px 24px rgba(255, 143, 172, 0.8)) drop-shadow(0 0 60px rgba(255, 100, 160, 0.5)); } /* line 1336, app/assets/stylesheets/application.scss */ .egg-choice-card--blue:hover .egg-choice-img { filter: brightness(1.1) drop-shadow(0 6px 24px rgba(80, 140, 255, 0.85)) drop-shadow(0 0 60px rgba(60, 120, 255, 0.5)); } /* line 1341, app/assets/stylesheets/application.scss */ .egg-choice-card--purple:hover .egg-choice-img { filter: brightness(1.12) drop-shadow(0 6px 24px rgba(180, 100, 255, 0.85)) drop-shadow(0 0 60px rgba(150, 60, 240, 0.5)); } /* line 1347, app/assets/stylesheets/application.scss */ .egg-choice-emoji { font-size: 20px; line-height: 1; } /* line 1352, app/assets/stylesheets/application.scss */ .egg-choice-label { font-size: 14px; font-weight: bold; color: rgba(255, 235, 248, 0.95); letter-spacing: 0.5px; } /* line 1359, app/assets/stylesheets/application.scss */ .egg-choice-desc { font-size: 11px; color: rgba(255, 200, 235, 0.55); letter-spacing: 0.2px; } /* line 1365, app/assets/stylesheets/application.scss */ .choose-egg-note { font-size: 12px; color: rgba(255, 200, 240, 0.45); margin: 0; } /* ===== オーバーレイ ===== */ /* line 1372, app/assets/stylesheets/application.scss */ .choose-egg-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(13, 7, 25, 0); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background 0.5s; } /* line 1384, app/assets/stylesheets/application.scss */ .choose-egg-overlay--show { background: rgba(13, 7, 25, 0.92); pointer-events: all; } /* line 1389, app/assets/stylesheets/application.scss */ .choose-egg-overlay--fadeout { opacity: 0; transition: opacity 0.5s; } /* line 1394, app/assets/stylesheets/application.scss */ .choose-egg-overlay-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; } /* 中央に拡大して表示する卵 */ /* line 1403, app/assets/stylesheets/application.scss */ .chosen-egg-img { height: 200px; width: auto; object-fit: contain; opacity: 0; transform: scale(0.6); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); filter: brightness(1.3) drop-shadow(0 0 40px rgba(255, 200, 230, 0.8)); animation: loginCharaFloat 3s ease-in-out infinite; } /* line 1415, app/assets/stylesheets/application.scss */ .choose-egg-overlay--show .chosen-egg-img { opacity: 1; transform: scale(1); } /* パーティクルコンテナ */ /* line 1421, app/assets/stylesheets/application.scss */ .choose-egg-particles { position: absolute; inset: 0; pointer-events: none; } /* line 1427, app/assets/stylesheets/application.scss */ .egg-particle { position: absolute; top: 50%; left: 50%; font-size: var(--size, 12px); opacity: 0; animation: eggParticleFly 1.2s var(--delay, 0s) cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes eggParticleFly { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--dist)); } } /* メッセージ */ /* line 1448, app/assets/stylesheets/application.scss */ .choose-egg-result-msg { text-align: center; color: #fff; opacity: 0; transform: translateY(20px); transition: opacity 0.45s 0.1s, transform 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1); margin-top: 24px; } /* line 1457, app/assets/stylesheets/application.scss */ .choose-egg-result-msg--show { opacity: 1; transform: translateY(0); } /* line 1462, app/assets/stylesheets/application.scss */ .choose-egg-sparkle-big { display: block; font-size: 48px; margin-bottom: 12px; animation: loginCharaFloat 2s ease-in-out infinite; } /* line 1469, app/assets/stylesheets/application.scss */ .choose-egg-result-msg p { font-size: 22px; font-weight: bold; line-height: 1.65; text-shadow: 0 0 32px rgba(255, 143, 172, 0.8); } /* ============================================================ RewardMe – dashboard grid graft（適用範囲: .dashboard-layout--home のみ） (GRAFT 01 / v21・魔法の雫方式) ------------------------------------------------------------ 完成カンプ実測（1920×1080・コンテナ1760・gap20）を規定値とする。 ■ カンプ設計図（正） カラム: 300 / 380 / 500(1fr) / 520 行: topbar72 / 第2段478（成長263+gap20+バッジ195）/ 第3段361横一線 / 第4段227 ■ v4での到達点（実測） 成長263（規定どおり）/ HERO472（誤差6px）/ 第3段445で横一線 ※第3段の絶対値361は week/tasks の中身が痩せる後工程で収束させる 撤去: このファイルを消せば即・元に戻る（ERB無変更）。 ============================================================ */ /* ================================================================ TIER 1: 1101px〜 共通（3カラム＋コンポーネント補正） ================================================================ */ @media (min-width: 1101px) { .dashboard-layout--home { display: grid !important; max-width: 1760px !important; margin: 0 auto; gap: 20px !important; align-items: stretch !important; grid-template-columns: 260px minmax(0, 1fr) 400px !important; grid-template-areas: "nav hero hero" "nav evo badge" "box week stats" "prize tasks stats" "grow grow deco" !important; } /* 既存ラッパーの透明化（ERB無変更の要） ※ 必ず .dashboard-layout--home 配下に限定すること。 .col-left / .col-center は /games・/shop・/letters・/habits・/settings でも 使われている共有クラスで、無条件に display:contents にすると それらのページの構造まで溶かしてしまう（実際に一度やらかしている）。 */ /* 子結合子(>)ではなく子孫にすること。 .center-bottom は .col-center の中に入れ子になっているため、 > だと透明化されず、そこだけ塊のまま残って盤面が崩れる。 */ .dashboard-layout--home .col-left, .dashboard-layout--home .col-center, .dashboard-layout--home .col-right, .dashboard-layout--home .center-bottom { display: contents !important; } .dashboard-layout--home .col-left > div:has(> .daily-box-panel) { display: contents !important; } /* 配置 */ .side-menu { grid-area: nav !important; align-self: start !important; } .my-room { grid-area: hero !important; } .evo-chain-panel { grid-area: evo !important; } .badge-panel { grid-area: badge !important; } .daily-box-panel { grid-area: box !important; } .today-prize-panel { grid-area: prize !important; align-self: start !important; } .week-panel { grid-area: week !important; } .tasks-panel { grid-area: tasks !important; } .stats-panel { grid-area: stats !important; } .room-growth-panel { grid-area: grow !important; } /* --- HERO: 部屋画像に行の高さを主張させない --- room-bg（in-flow img）が 幅×画像比 で高さを決めていたのが 「HEROがデカすぎる」の正体。absolute化して行に従わせる。 */ .my-room { position: relative !important; overflow: hidden !important; height: auto !important; min-height: 400px; } .my-room .room-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* --- 成長チェーン: 縦積み→横1列（カンプ規定263px枠に収める） --- */ .evo-chain-panel { padding: 14px 16px !important; } .evo-chain-panel .panel-title { margin-bottom: 8px !important; } .evo-chain-panel .evo-vertical-chain { display: flex !important; flex-direction: row !important; align-items: stretch; justify-content: space-between; gap: 4px; } .evo-v-item { display: flex !important; flex-direction: column !important; align-items: center; text-align: center; flex: 1 1 0; gap: 4px; padding: 6px 2px !important; margin: 0 !important; } .evo-v-item--current { flex: 1.4 1 0; } /* 今ここカードは少し広く */ .evo-v-arrow { align-self: center; transform: rotate(-90deg); padding: 0 !important; margin: 0 !important; } .evo-v-img-wrap { width: 72px !important; height: 72px !important; } .evo-v-item--current .evo-v-img-wrap { width: 84px !important; height: 84px !important; } .evo-v-img { width: 100% !important; height: 100% !important; object-fit: contain; } .evo-v-name { font-size: 11px !important; line-height: 1.3; } .evo-v-lv { font-size: 10px !important; } .evo-v-progress { height: 6px !important; margin: 2px 0 !important; } .evo-v-progress-text { font-size: 10px !important; } /* --- 第3段の横一線: 各パネルの自前heightを外し stretch を通す --- */ .daily-box-panel, .week-panel, .tasks-panel, .stats-panel { height: auto !important; } .stats-panel { align-self: stretch !important; } /* バッジは中身の高さのまま（stretchで水膨れさせない） */ .badge-panel { align-self: start !important; } } /* ================================================================ TIER 2: 1620px〜 カンプと同じ4カラム格子＋行の規定値 ================================================================ */ @media (min-width: 1620px) { .dashboard-layout--home { grid-template-columns: 300px 380px minmax(0, 1fr) 520px !important; grid-template-areas: "nav hero hero evo" "nav hero hero badge" "box week tasks stats" "prize week tasks stats" "grow grow grow deco" !important; /* 行の規定値: 成長263 / バッジ195（中身が収まれば HERO=478） 第3段は固定: 260 + gap20 + 100 = 帯380（合意レンジ350〜380の上限） → 中身が増えてもrowは伸びない。はみ出しはパネル内部で処理 */ grid-template-rows: minmax(263px, auto) minmax(195px, auto) 260px 100px minmax(227px, auto) !important; } /* 4カラムでは行が高さを規定するので min-height は不要 */ .my-room { min-height: 0 !important; } } /* ---- 1100px以下：何もしない（既存のモバイル/タブレットCSSに委ねる） ---- */ /* ================================================================ 第4段の完成（grow + deco）と盤面密度 v5/v6 ================================================================ */ @media (min-width: 1101px) { /* 盤面密度: ブラウザ90%表示で確認した見え方を100%ズームで再現 （実測: zoom=0.90 ちょうど。盤面1760→実効1584px・左右余白168px） */ body { zoom: 0.9; } /* --- お部屋の成長: カンプ規定 h227 に合わせて厚みを出す --- */ .room-growth-panel { grid-area: grow !important; margin-top: 0 !important; } .room-growth-img { height: 110px !important; } /* --- お部屋のデコレーション（新設パネル・カンプ準拠） --- */ .deco-panel { grid-area: deco; padding: 16px 18px 18px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 20px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); display: flex; flex-direction: column; } .deco-panel .panel-title { margin-bottom: 8px; } .deco-panel-text { font-size: 12px; line-height: 1.7; color: rgba(240, 200, 255, 0.75); margin: 0 0 10px; } .deco-panel-items { margin: 0 -4px 12px; padding: 8px; border: 1px solid rgba(255, 190, 220, 0.13); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 150, 205, 0.025)); overflow: hidden; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } .deco-panel-item { min-width: 0; padding: 5px 2px 6px; border: 1px solid rgba(255, 190, 220, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.035); text-align: center; } .deco-panel-item-art { display: block; position: relative; height: 48px; overflow: hidden; } .deco-panel-item-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(20, 4, 38, 0.38)); } .deco-panel-item-name { display: block; margin-top: -1px; color: rgba(255, 225, 240, 0.78); font-size: 9px; line-height: 1.2; } .deco-panel-btn { margin-top: auto; display: block; text-align: center; text-decoration: none; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #ff7ab8, #c86bd8); box-shadow: 0 4px 14px rgba(255, 110, 180, 0.3); transition: transform .18s, box-shadow .18s; } .deco-panel-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 110, 180, 0.42); } /* --- GitHubバッジ: 盤面外要素として弱める（消さない） --- */ .site-footer { opacity: 0.35; transition: opacity .2s; } .site-footer:hover { opacity: 1; } } /* お部屋のデコレーションは家具/デコの実装が入るまで未解放。 触れそうに見えて何も起きない状態を避けるため、ロビーの .game-card--coming-soon と同じ作法（薄く落とす＋鍵＋操作不能）で 「これから開く場所」として見せる。メディアクエリ外に置き全幅で効かせる。 */ .deco-panel--locked { opacity: 0.72; filter: grayscale(0.15); } .deco-lock-ico { font-size: 0.85em; opacity: 0.85; } .deco-panel--locked .deco-panel-btn--locked { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(160, 120, 255, 0.28); color: rgba(230, 210, 255, 0.75); box-shadow: none; letter-spacing: 0.5px; cursor: default; pointer-events: none; transform: none; } /* モバイル/タブレットでは deco はグリッド外になるので出さない （room-growth-panel と同じ扱い） */ @media (max-width: 1100px) { .deco-panel { display: none; } } /* ================================================================ カレンダー（今週の記録の後継・カンプ準拠） v7 モバイルでも使うためメディアクエリ外に置く ================================================================ */ .week-panel .cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cal-head .panel-title { margin-bottom: 0; } .cal-year { font-size: 12px; font-weight: 500; color: rgba(240, 200, 255, 0.5); } .cal-nav { display: flex; gap: 6px; } .cal-nav-btn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; text-decoration: none; font-size: 15px; line-height: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(240, 200, 255, 0.7); transition: color .15s, border-color .15s; } .cal-nav-btn:hover { color: #ff8ec4; border-color: rgba(255, 142, 196, 0.4); } table.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .cal-grid th { font-size: 11px; font-weight: 600; padding-bottom: 6px; color: rgba(240, 200, 255, 0.5); } .cal-grid th:first-child { color: #ff8f8f; } .cal-grid th:last-child { color: #8fb4ff; } .cal-grid td { text-align: center; padding: 2px 0; height: 38px; vertical-align: top; } .cal-day { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; color: #f4ecff; } .cal-day.out { opacity: 0.35; } .cal-day.today { background: linear-gradient(135deg, #ff7ab8, #d76bd0); font-weight: 800; box-shadow: 0 0 0 3px rgba(255, 122, 184, 0.2); } .cal-dots { display: flex; justify-content: center; height: 6px; margin-top: 1px; } .cal-dots i { width: 4px; height: 4px; border-radius: 50%; display: block; } .cal-d-done { background: #a78bfa; } .cal-d-part { background: #fbbf24; } .cal-d-miss { background: #6b6280; } .cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; color: rgba(240, 200, 255, 0.6); } .cal-legend span { display: inline-flex; align-items: center; gap: 5px; } .cal-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } /* ================================================================ 今日のタスク 内装（v8）: 行の語彙をカンプへ・外寸不変 .tasks-panel 内のみに効かせ、タスク管理ページの .task-card は触らない ================================================================ */ /* --- 行: カード箱→静かな1行（ヘアライン区切り） --- */ .tasks-panel .task-card { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 9px 4px !important; margin: 0 !important; max-width: none !important; font-size: 14px !important; } .tasks-panel .task-card-inner { display: flex !important; align-items: center !important; gap: 10px !important; } .tasks-panel .task-title-text { flex: 1; min-width: 0; font-weight: 600; } .tasks-panel .task-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto; } .tasks-panel .task-star { color: #fbbf24; font-size: 12px; } .tasks-panel .task-exp { font-size: 12px; font-weight: 800; color: #f9a8d4; min-width: 52px; text-align: right; white-space: nowrap; } /* --- ○ボタン --- */ .tasks-panel .task-circle-btn { width: 22px !important; height: 22px !important; flex: none; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; cursor: pointer; display: grid; place-items: center; color: transparent; font-size: 11px; line-height: 1; transition: border-color .15s, background .15s; } .tasks-panel .task-circle-btn:hover { border-color: #ff8ec4 !important; } /* --- 完了行: ピンク✓＋打ち消し線 --- */ .tasks-panel .task-circle-btn--done { background: linear-gradient(135deg, #ff7ab8, #d76bd0) !important; border: none !important; color: #fff !important; } .tasks-panel .task-card--done .task-title-text { color: rgba(240, 200, 255, 0.45); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); } .tasks-panel .task-card--done .category-chip, .tasks-panel .task-card--done .task-star, .tasks-panel .task-card--done .task-exp { opacity: 0.55; } /* --- 削除×は普段は気配だけ --- */ .tasks-panel .task-delete-btn { opacity: 0.22 !important; transition: opacity .15s; } .tasks-panel .task-card:hover .task-delete-btn { opacity: 0.85 !important; } /* --- タスク0件の提案チップ: 発光を落として行の語彙に合わせる --- */ .tasks-panel .tasks-zero-chip { background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; font-weight: 600 !important; color: rgba(240, 220, 250, 0.85) !important; } .tasks-panel .tasks-zero-chip:hover { border-color: rgba(255, 142, 196, 0.35) !important; background: rgba(255, 142, 196, 0.07) !important; transform: none !important; } /* --- フッター → ミッション帯（カンプ準拠の帯、中身は実データのまま） --- */ .tasks-panel .tasks-panel-footer { margin-top: 12px !important; padding: 10px 14px !important; border-radius: 12px !important; border: 1px solid rgba(255, 142, 196, 0.22) !important; border-top: 1px solid rgba(255, 142, 196, 0.22) !important; background: linear-gradient(90deg, rgba(255, 142, 196, 0.14), rgba(167, 139, 250, 0.10)); font-size: 12.5px; font-weight: 700; } /* ================================================================ 第3段の高さ収束（v9）: 帯380px固定・中身にrowを押させない 4カラム（1620px〜）のみ。横の基準線 300/380/500/520 と gap20 は不変 ================================================================ */ @media (min-width: 1620px) { /* 帯の4枚: 行高に従い、あふれたら内部スクロール（バーはほぼ不可視） */ .week-panel, .tasks-panel, .stats-panel { min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; } .week-panel::-webkit-scrollbar, .tasks-panel::-webkit-scrollbar, .stats-panel::-webkit-scrollbar { width: 4px; } .week-panel::-webkit-scrollbar-thumb, .tasks-panel::-webkit-scrollbar-thumb, .stats-panel::-webkit-scrollbar-thumb { background: rgba(255, 142, 196, 0.25); border-radius: 4px; } .week-panel::-webkit-scrollbar-track, .tasks-panel::-webkit-scrollbar-track, .stats-panel::-webkit-scrollbar-track { background: transparent; } .daily-box-panel { min-height: 0 !important; overflow: hidden !important; } /* rowを押し広げていた犯人たち: 画像・チップ・うさぎを帯に収める */ .tasks-all-done { padding: 6px 0 !important; } .tasks-all-done-img { max-height: 96px !important; width: auto !important; } .tasks-benny-img { max-height: 52px !important; width: auto !important; } .tasks-benny-row { margin-bottom: 6px !important; } .tasks-panel .tasks-zero-chip { padding: 8px 14px !important; } .daily-box-egg-wrap img { max-height: 118px !important; width: auto !important; } /* ステータスは中の余白を1段階だけ詰めて380に収める */ .stats-panel { padding: 14px 16px !important; } /* 獲得アイテムカードも row(100px) に従わせる */ .today-prize-panel { align-self: stretch !important; min-height: 0 !important; height: 100% !important; margin: 0 !important; /* tasks.css の margin-bottom:14px がstretchを縮めていた */ overflow: hidden !important; padding: 10px 14px !important; box-sizing: border-box !important; } /* tasks の全完了ブロックをもう一段圧縮（内部スクロール解消） */ .tasks-all-done-img { max-height: 78px !important; } .tasks-all-done-msg { font-size: 12px !important; margin: 4px 0 0 !important; } .tasks-panel .tasks-panel-footer { margin-top: 10px !important; } } /* 素サイズ保険: サイズ指定が min-width:1101px の中にしか無く、 幅がそれ未満だとアバターが無サイズ＝PNG原寸で巨大化してヘッダーから 飛び出すため、全幅で効く基底サイズをここで確保する。 */ .header-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: contain; box-sizing: border-box; } /* ================================================================ ヘッダー→トップバー化（v10）: カンプの語彙へ・盤面と端を揃える ================================================================ */ @media (min-width: 1101px) { /* 盤面(1760)と左右端を一致させる */ .header { max-width: 1760px !important; } .header-logo-img { height: 44px !important; width: auto !important; } .header--desktop { justify-content: flex-start !important; gap: 18px !important; } /* ステータス群: 中央散らばり→ロゴ隣に左詰め */ .header-status { display: flex !important; align-items: center !important; gap: 14px !important; margin-right: auto !important; flex-wrap: nowrap !important; } .header-right { margin-left: auto !important; } /* アバター（進化段階の姿がそのまま出る） */ .header-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: contain; padding: 3px; box-sizing: border-box; background: radial-gradient(circle at 35% 30%, rgba(255, 211, 232, 0.85), rgba(255, 134, 189, 0.55)); box-shadow: 0 0 0 2px rgba(255, 142, 196, 0.45), 0 0 14px rgba(255, 142, 196, 0.28); } /* EXPバーをカンプの主役サイズに */ .header-exp-wrap { display: flex !important; align-items: center !important; gap: 8px !important; } .header-exp-bar { width: 200px !important; height: 8px !important; border-radius: 999px !important; } } /* ================================================================ 最終美装（v11）: ヘッダーの存在感1段階UP＋左ナビにブランドの重心 盤面・帯・第4段・カラム幅は一切触らない ================================================================ */ @media (min-width: 1101px) { /* サイドバーがあるページ（＝ダッシュボード）ではロゴはナビ側に移る。 他ページはロゴ維持 */ body:has(.side-menu) .header-logo-link { display: none !important; } /* --- アバター＋2行ブロック（名前の上・Lv+EXPの下） --- */ .header-avatar { width: 46px !important; height: 46px !important; } .header-idbox { display: flex; flex-direction: column; gap: 1px; min-width: max-content; } .header-lv-row { min-width: max-content; } .header-stage { font-size: 11px !important; color: rgba(240, 200, 255, 0.6) !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: 1.2; } .header-lv-row { display: flex; align-items: center; gap: 10px; } .header-lv { font-size: 15px !important; font-weight: 800 !important; } .header-exp-bar { width: 230px !important; height: 9px !important; } .header-exp-text { font-size: 10.5px !important; color: rgba(240, 200, 255, 0.55) !important; } .header-status { gap: 16px !important; } /* --- 左ナビのブランドブロック --- */ .side-brand { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .side-brand-mark { font-size: 24px; filter: drop-shadow(0 0 8px rgba(255, 142, 196, 0.5)); } .side-brand-text { min-width: 0; } .side-brand-name { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: 0.4px; background: linear-gradient(90deg, #ffb3d9, #ff7ab8); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.2; } .side-brand-sub { margin: 2px 0 0; font-size: 9.5px; color: rgba(240, 200, 255, 0.5); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* モバイルではブランドブロック非表示（ドロワーに既にユーザー情報がある） */ @media (max-width: 1100px) { .side-brand { display: none; } } /* ================================================================ Typography / Contrast Pass（v12） 寸法・grid・gap・row・カードサイズには一切触れない。 文字の size / weight / color / line-height だけで3階層を作る: 主情報 … 明るく太く（#f6efff / w700-800） 見出し … ピンクで統一（#f9a8d4 / 15px / w700） 補助情報 … 小さく淡く（rgba(240,200,255,.55)） ================================================================ */ @media (min-width: 1101px) { /* --- 見出し: 全カード共通で1段階アップ＆ピンク統一 --- */ .panel-title { font-size: 15px !important; font-weight: 700 !important; color: #f9a8d4 !important; letter-spacing: 0.01em; } /* --- カレンダー: 日付を「読める文字」に --- */ .cal-day { font-size: 13px !important; font-weight: 600 !important; color: #f6efff !important; } .cal-day.out { opacity: 0.28 !important; } .cal-grid th { font-weight: 700 !important; } .cal-year { font-weight: 600; } /* --- タスク行: タスク名を主役に、EXPを準主役に --- */ .tasks-panel .task-title-text { font-size: 14px !important; font-weight: 650 !important; color: #f6efff !important; } .tasks-panel .task-exp { font-weight: 800 !important; color: #f9a8d4 !important; } .tasks-panel .tasks-zero-chip { font-size: 13.5px !important; } .tasks-panel .tasks-zero-chip span:first-child { color: #f6efff !important; font-weight: 650 !important; } .tasks-panel .category-chip { font-weight: 700 !important; } /* --- 今週のステータス: 数値を主役に --- */ .stats-panel .rp-label { font-size: 11px !important; color: rgba(240, 200, 255, 0.55) !important; } .stats-panel .rp-value { font-size: 30px !important; font-weight: 800 !important; color: #f6efff !important; line-height: 1.15 !important; } .stats-panel .rp-goal { font-size: 11px !important; color: rgba(240, 200, 255, 0.55) !important; } .stats-panel .rp-ring-text { font-weight: 800 !important; color: #f6efff !important; } .stats-panel .stat-label { font-size: 11px !important; color: rgba(240, 200, 255, 0.55) !important; } .stats-panel .stat-value { font-size: 21px !important; font-weight: 800 !important; color: #f6efff !important; } /* --- 成長チェーン / バッジ: 名前は読める、レベルは補助 --- */ .evo-v-name { font-weight: 700 !important; color: #f6efff !important; } .evo-v-lv { color: rgba(240, 200, 255, 0.5) !important; } .badge-panel .badge-note, .badge-panel .badge-current-row { font-size: 11px; color: rgba(240, 200, 255, 0.55); } /* --- 第4段: ラベルの可読性 --- */ .room-growth-label { font-size: 11.5px !important; font-weight: 600 !important; color: #f6efff !important; } .room-growth-sub { font-size: 12px !important; color: rgba(240, 200, 255, 0.55) !important; } .deco-panel-text { color: rgba(240, 200, 255, 0.65) !important; } /* --- ヘッダー: Lvと通貨は主情報 --- */ .header-lv { color: #f6efff !important; } .header-coins, .header-gems, .header-lives { font-weight: 700 !important; color: #f6efff !important; } .header-exp-text { font-weight: 500 !important; } /* --- リボンBOX / 獲得アイテム --- */ .daily-box-title, .today-prize-title { font-size: 14px !important; font-weight: 700 !important; color: #f9a8d4 !important; } } /* ================================================================ Typography Pass 2（v13）: 上段＋極小文字の追加監査 変更前実測: メニュー項目13px/w400/白70% ・ 非current進化 op0.3 ・ バッジ未取得 op0.35 ・ badge-name 8px ・ 今ここバッジ 9px ・ evo-v-lv 10px/50% ・ ??? 18px/25% font-size/weight/color/opacity/line-height のみ。寸法は不変。 ================================================================ */ @media (min-width: 1101px) { /* --- 左ナビ: メニュー項目は主情報 --- */ .side-menu-item { font-size: 14px !important; font-weight: 600 !important; color: #f6efff !important; } .side-menu-item:not(.active):not(:hover) { color: rgba(246, 239, 255, 0.82) !important; } .side-section-label { font-size: 10.5px !important; letter-spacing: 0.06em; } .side-brand-sub { font-size: 10px; } /* --- 成長チェーン: 次の姿の絵柄と名前も見える明るさに --- */ .evo-v-item:not(.evo-v-item--current) { opacity: 0.82 !important; } .evo-v-name { font-size: 12.5px !important; } .evo-v-lv { font-size: 11.5px !important; color: rgba(240, 200, 255, 0.72) !important; } .evo-v-progress-text { font-size: 11.5px !important; font-weight: 600 !important; } .evo-v-badge { font-size: 10px !important; } /* --- バッジ: 未取得の区別を残しつつ、名前が読める濃さに --- */ .badge-name { font-size: 11.5px !important; font-weight: 600 !important; color: #f6efff !important; line-height: 1.3 !important; } .badge-item:not(.earned) { opacity: 0.68 !important; } /* --- 獲得アイテム: ??? をワクワク側に --- */ .today-prize-mystery-mark { font-size: 22px !important; font-weight: 800 !important; color: rgba(240, 200, 255, 0.45) !important; letter-spacing: 0.15em; } .today-prize-label { font-weight: 700 !important; color: #f6efff !important; } } /* ================================================================ 素材差し替え（v14）: 全完了バナー＝横長専用絵（額縁に絵を合わせる方式） ================================================================ */ @media (min-width: 1101px) { .tasks-panel .tasks-all-done { padding: 8px 0 4px !important; text-align: center; } .tasks-all-done-img { display: block; width: 100% !important; max-width: none !important; height: 120px !important; /* 3カラム時の高さ */ max-height: none !important; object-fit: cover !important; /* fill(押し込み)をやめて切り取りに */ object-position: center 42%; /* 3人の顔が帯の中心に来る位置 */ border-radius: 14px !important; } } /* 4カラム（帯380固定）ではバナーを92pxに（v9の予算に合わせる） */ @media (min-width: 1620px) { .tasks-all-done-img { height: 92px !important; } } /* ================================================================ v14.2: 開封後のリボンBOXも箱絵をディム表示＋ヘッダーEXPテキスト整列 ================================================================ */ @media (min-width: 1101px) { .daily-box-done-img { display: block; margin: 0 auto 6px; max-height: 110px; width: auto; opacity: 0.45; filter: saturate(0.65); } .daily-box-done-ico { display: none; } /* EXPテキストが通貨チップに被らないよう、バーの直後にインラインで置く */ .header-exp-text { position: static !important; transform: none !important; margin-left: 6px !important; white-space: nowrap; } } /* ================================================================ v15: 全完了バナーの「切り取ってる感」解消 絵は2:1縦構図（顔上・ケーキ下）なのに枠が4.5:1で水平スライスに なっていた。全完了状態ではうさぎ行を隠し（絵の中にうさぎがいる）、 バナーを aspect-ratio 2/1 のほぼ無切断で表示する。 ================================================================ */ @media (min-width: 1101px) { /* うさぎはパーティーに参加中（全完了時のみ非表示・通常時は今まで通り） */ .tasks-panel:has(.tasks-all-done) .tasks-benny-row { display: none !important; } /* バナー専用画（額装・角丸焼き込み/透過）を無加工で表示 */ .tasks-all-done-img { height: 200px !important; width: auto !important; max-width: 100% !important; margin: 0 auto; object-fit: contain !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; /* マイルームと視線を取り合わないよう光量だけ15%抑える（色・彩度不変） */ filter: brightness(0.85); } } @media (min-width: 1620px) { /* 帯380の予算内（ヘッダー50+完了行+ミッション帯を差し引いた枠） */ .tasks-all-done-img { height: 150px !important; } } /* ================================================================ v16: 成長ルームのストリップ（実データ・4段階） 素材が16:9の横長になったため、サムネの比率と情報量を合わせる ================================================================ */ @media (min-width: 1101px) { .room-growth-item { position: relative; } /* 未到達の段階は「まだ見ぬ未来」として沈める（消さない） */ .room-growth-item.locked .room-growth-img { filter: grayscale(0.7) brightness(0.55); opacity: 0.5; } .room-growth-item.locked .room-growth-label, .room-growth-item.locked .room-growth-req { opacity: 0.5; } /* 現在地を明示 */ .room-growth-item.current .room-growth-img { outline: 2px solid rgba(255, 142, 196, 0.75); outline-offset: -2px; box-shadow: 0 0 18px rgba(255, 142, 196, 0.35); } /* 到達条件の行（成長ルームのみ） */ .room-growth-req { display: block; font-size: 10px; color: rgba(240, 200, 255, 0.5); text-align: center; margin-top: 1px; } } /* ================================================================ v17: ゲームロビー① — 金色の報酬帯を「役割の帯」に置き換える ---------------------------------------------------------------- 従来 .game-card-reward は金色の背景＋金色の太字コインで、 4ゲームすべてを「コイン自販機」に見せていた。 .game-card-focus は同じ位置に座り、そのゲーム固有の 「次に起きること」を主役にする。色はシステムカラーとして 固定せず、カード既存のビジュアルに馴染む薄さに留める。 ================================================================ */ .game-card-focus { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 10px; margin: 2px 0 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.09); text-align: center; } .game-card-focus .gcf-lead { font-size: 11.5px; color: rgba(255, 210, 240, 0.68); line-height: 1.2; } .game-card-focus .gcf-lead strong { font-size: 14px; font-weight: 800; color: #ffd9ee; } .game-card-focus .gcf-main { font-size: 15px; font-weight: 800; line-height: 1.3; color: #ffe9f7; } /* COLLECT（パズル）: 次の1枚に、ほんのり期待の色を乗せる */ .game-card-focus--collect { background: rgba(255, 142, 196, 0.10); border-color: rgba(255, 142, 196, 0.22); } /* CHALLENGE（ポーション）: 次の一段へ向かう色 */ .game-card-focus--challenge { background: rgba(167, 139, 250, 0.11); border-color: rgba(167, 139, 250, 0.24); } /* コインは副情報へ降格（金色の主張をやめ、他のメタ行と同格に） */ .game-card-meta-item--coin { color: rgba(255, 215, 120, 0.62) !important; font-weight: 600; } /* ================================================================ v18: ポーション「つづきから」— 副導線と全クリア表示 ================================================================ */ .pg-restart-link { display: block; margin: 10px auto 0; padding: 6px 14px; background: none; border: none; font-size: 12.5px; font-weight: 600; color: rgba(240, 200, 255, 0.55); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .15s; } .pg-restart-link:hover { color: rgba(255, 142, 196, 0.9); } .pg-cleared-msg { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: #ffd9ee; text-shadow: 0 0 12px rgba(255, 142, 196, 0.45); } /* ================================================================ v21: ポーション「魔法の雫」方式（Ball Sort系の表示へ移行） ---------------------------------------------------------------- なぜ変えたか: ゲームロジック（_canPour / _pour / _isWon）はもともと 「同色が連続していればまとめて動かす」= Ball Sort そのもの。 液体で描いていたせいで、傾き・水平な液面・体積保存・注ぐ流れ、 という“物理を近似し続ける戦い”が永久に終わらなかった。 中身を雫にすると、その問題群が丸ごと消える。 変えていないもの: ゲームロジック / STAGES / 価格・コイン / サーバー側 / v3のガラス試験管（胴・リム・反射・底の厚み） 変えたもの: 中身の描画（帯 → 雫）と移動演出（注ぐ → 飛ぶ）だけ。 完成時は雫が溶け合って1本のポーションになる。 ================================================================ */ /* ── 胴（ガラス）: v3のまま ── */ .pg-vial-body { position: relative; width: 62px !important; height: 174px !important; border-radius: 4px 4px 31px 31px !important; border: 1.5px solid rgba(255, 255, 255, 0.28) !important; border-left-color: rgba(255, 255, 255, 0.52) !important; border-right-color: rgba(255, 255, 255, 0.16) !important; background: linear-gradient(102deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.035) 32%, rgba(255,255,255,.02) 70%, rgba(255,255,255,.09) 100%) !important; overflow: hidden !important; display: block !important; box-shadow: inset 7px 0 13px -5px rgba(255,255,255,.32), inset -6px 0 11px -5px rgba(0,0,0,.32), inset 0 -9px 15px -7px rgba(0,0,0,.36) !important; } /* 底の厚み */ .pg-vial-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.30)); pointer-events: none; z-index: 4; } /* ================================================================ 魔法の雫（エッセンス） ---------------------------------------------------------------- ベタ塗りのボールにしない。3層の背景を重ねて宝石にする: 1) 左上の鋭いハイライト（ガラス玉の照り） 2) 右下の弱い反射光（環境光の回り込み） 3) 本体の球状グラデーション（--c1 → --c2 → --c3） さらに ::before で内部の淡い光、::after で小さな鏡面点。 --glow で外周をその色に発光させ、背景の紫に馴染ませる。 ================================================================ */ .pg-drop { position: absolute; left: 50%; margin-left: -22.5px; /* = DROP/2。transform はアニメ用に空けておく */ width: 45px; height: 45px; /* JS の DROP と一致 */ border-radius: 50%; z-index: 2; pointer-events: none; background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.34) 13%, transparent 33%), radial-gradient(circle at 70% 78%, rgba(255,255,255,.26) 0%, transparent 42%), radial-gradient(circle at 40% 34%, var(--c1) 0%, var(--c2) 60%, var(--c3) 100%); box-shadow: inset -4px -6px 12px rgba(0,0,0,.30), inset 4px 5px 11px rgba(255,255,255,.34), 0 3px 7px rgba(0,0,0,.28), 0 0 14px rgba(var(--glow), .45); opacity: .94; /* うっすら向こうが透ける = 半透明の宝石 */ } /* 内部の淡い光 */ .pg-drop::before { content: ""; position: absolute; inset: 21% 20% 17% 21%; border-radius: 50%; background: radial-gradient(circle at 50% 56%, rgba(255,255,255,.36), transparent 68%); filter: blur(3px); } /* 小さな鏡面点 */ .pg-drop::after { content: ""; position: absolute; top: 16%; left: 25%; width: 9px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.96); filter: blur(.5px); transform: rotate(-24deg); } /* 瓶が傾く transition（JS側 .22s）は TILT_MS=220 と一致させること。 ズレると傾き切る前に雫が離れ、速度が繋がらない。 */ /* 選択中の瓶は「次に飛ぶ雫」がふわふわ浮いて予告する */ @keyframes pgDropFloat { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(-12px); } } .pg-vial--selected .pg-drop--top { animation: pgDropFloat 1.15s ease-in-out infinite; } /* ── 飛行中のクローン（position:fixed で画面上を動く）── */ .pg-drop--fly { position: fixed !important; margin-left: 0 !important; z-index: 9999; opacity: 1; box-shadow: inset -4px -6px 12px rgba(0,0,0,.30), inset 4px 5px 11px rgba(255,255,255,.34), 0 6px 14px rgba(0,0,0,.34), 0 0 22px rgba(var(--glow), .70); } /* ── 着地の潰れ ── */ @keyframes pgDropLand { 0% { transform: scale(1.18, .82); } 40% { transform: scale(.94, 1.06); } 70% { transform: scale(1.025, .985); } 88% { transform: scale(.995, 1.005); } 100% { transform: scale(1, 1); } } /* 減衰を4段に分ける。1回のバウンドだと静止の直前に段差が出る */ .pg-drop--land { animation: pgDropLand .34s cubic-bezier(.22,.68,.36,1) both; } /* ================================================================ 錬成できた状態（4つ揃ったとき） ---------------------------------------------------------------- ここで液体には変えない。 盤面は「素材の魔法雫を4つ揃える」場所であって、 完成したポーションはステージクリア画面で初めて登場する。 途中で表現のルールが変わると、雫という見立てが壊れる。 きゅっと整列 → 全体が発光 → キラッ → 完成マーク 各キーフレームの始点は前フェーズの終点と数値まで一致させてある。 ================================================================ */ /* ① きゅっと整列 --ay は「重心へ詰めるぶんの移動量」。JS が段ごとに配る。 わずかに行き過ぎてから収まることで、かちっと嵌まった感じが出る。 */ @keyframes pgDropAlign { 0% { transform: translateY(0) scale(1); } 38% { transform: translateY(calc(var(--ay, 0px) * 1.20)) scale(1.045); } 72% { transform: translateY(calc(var(--ay, 0px) * .965)) scale(.992); } 100% { transform: translateY(var(--ay, 0px)) scale(1); } } .pg-drop--align { animation: pgDropAlign .30s cubic-bezier(.3,.8,.35,1) both; } /* ② 全体が発光（整列の終点から始まり、整列の終点に戻る＝再描画で跳ねない） */ @keyframes pgDropCharged { 0% { transform: translateY(var(--ay, 0px)) scale(1); filter: brightness(1); } 38% { transform: translateY(var(--ay, 0px)) scale(1.075); filter: brightness(1.62); } 100% { transform: translateY(var(--ay, 0px)) scale(1); filter: brightness(1); } } .pg-drop--charged { animation: pgDropCharged .66s cubic-bezier(.3,.6,.4,1) both; } /* 瓶の内側が、その雫の色で満たされる。 z-index:1 で雫より後ろに置くので「内側から光っている」ように見える。 */ @keyframes pgVialGlow { 0% { opacity: 0; } 28% { opacity: .85; } 62% { opacity: .45; } 100% { opacity: 0; } } .pg-vial-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(var(--glow), .78) 0%, rgba(var(--glow), .24) 46%, transparent 74%); animation: pgVialGlow .92s cubic-bezier(.25,.6,.35,1) both; } /* ③ キラッ — ガラスの上を光が斜めに横切る（本体の overflow で切り取られる） */ @keyframes pgVialSpark { 0% { transform: translate(-115%, 55%) rotate(16deg); opacity: 0; } 24% { opacity: .92; } 100% { transform: translate(115%, -55%) rotate(16deg); opacity: 0; } } .pg-vial-spark { position: absolute; top: -22%; left: 0; z-index: 4; width: 170%; height: 145%; pointer-events: none; background: linear-gradient(102deg, transparent 41%, rgba(255,255,255,.20) 47%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.20) 53%, transparent 59%); filter: blur(2px); animation: pgVialSpark .58s cubic-bezier(.3,.5,.3,1) both; } /* 小さな輝き。瓶の外に出るので .pg-vial（overflow なし）側に置く */ @keyframes pgTwinkle { 0% { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity: 0; } 34% { transform: translate(-50%,-50%) scale(1.15) rotate(38deg); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(0) rotate(86deg); opacity: 0; } } .pg-twinkle { position: absolute; top: 16%; left: 76%; z-index: 7; width: 26px; height: 26px; pointer-events: none; animation: pgTwinkle .62s cubic-bezier(.25,.7,.35,1) both; } .pg-twinkle::before, .pg-twinkle::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 50%; box-shadow: 0 0 9px rgba(255,255,255,.95), 0 0 18px rgba(255,255,255,.55); } .pg-twinkle::before { width: 2.5px; height: 26px; transform: translate(-50%,-50%); } .pg-twinkle::after { width: 26px; height: 2.5px; transform: translate(-50%,-50%); } /* ④ 完成マーク（tasks.css の translateX(-50%) を保持したまま弾ませる） */ @keyframes pgDoneMarkPop { 0% { transform: translateX(-50%) scale(0) rotate(-24deg); opacity: 0; } 52% { transform: translateX(-50%) scale(1.28) rotate(7deg); opacity: 1; } 78% { transform: translateX(-50%) scale(.94) rotate(-2deg); } 100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; } } .pg-vial-done-mark--pop { animation: pgDoneMarkPop .40s cubic-bezier(.3,.9,.4,1) both; } /* ================================================================ 完成したポーション（1本ぶんの液体） ---------------------------------------------------------------- ※ 盤面では使わない。ステージクリア画面で初めて出すための部品として 定義だけ残してある（「ポーション完成！」の主役）。 ================================================================ */ .pg-potion { position: absolute; left: 0; right: 0; bottom: 0; height: 168px; z-index: 2; border-radius: 0 0 30px 30px; background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 34%, var(--c2) 52%, var(--c3) 100%), radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.28), transparent 60%); box-shadow: inset 0 -10px 18px rgba(0,0,0,.28), inset 0 0 22px rgba(255,255,255,.16), 0 0 18px rgba(var(--glow), .45); pointer-events: none; } /* 液面（ここだけハイライトを引く） */ .pg-potion::before { content: ""; position: absolute; top: -3px; left: 2px; right: 2px; height: 7px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.10)); filter: blur(.5px); } /* 内部のゆらめき */ @keyframes pgPotionShimmer { 0%, 100% { opacity: .55; transform: translateY(0) scale(1); } 50% { opacity: .95; transform: translateY(-5px) scale(1.06); } } .pg-potion::after { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 38% at 32% 22%, rgba(255,255,255,.26), transparent 70%); animation: pgPotionShimmer 3.4s ease-in-out infinite; } /* とろっと生まれる（中央から上下へ広がる） */ @keyframes pgPotionForm { 0% { transform: scaleY(.10) scaleX(.72); opacity: .20; filter: blur(5px); } 38% { transform: scaleY(.64) scaleX(1.06); opacity: 1; filter: blur(1.6px); } 64% { transform: scaleY(1.035) scaleX(.982); filter: blur(0); } 84% { transform: scaleY(.992) scaleX(1.006); } 100% { transform: scaleY(1) scaleX(1); } } .pg-potion--form { transform-origin: 50% 46%; /* 雫が集まった中心と一致させる */ animation: pgPotionForm .60s cubic-bezier(.28,.72,.34,1) both; } /* ── ガラスの反射（雫より手前）── */ .pg-glass-shine { position: absolute; top: 16px; left: 9px; z-index: 3; width: 9px; height: 120px; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.13) 55%, transparent); filter: blur(1.2px); pointer-events: none; } .pg-glass-shine2 { position: absolute; top: 34px; right: 11px; z-index: 3; width: 4px; height: 74px; border-radius: 4px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.24), transparent); filter: blur(1px); pointer-events: none; } /* ── 口のリム（ガラスの厚み。首は作らない）── */ .pg-vial-rim { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 70px; height: 13px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.10) 55%, rgba(255,255,255,.20)); border: 1px solid rgba(255,255,255,.40); box-shadow: 0 2px 3px rgba(0,0,0,.32), inset 0 -2px 3px rgba(0,0,0,.22); pointer-events: none; } .pg-vial-rim::after { content: ""; position: absolute; top: 3px; left: 5px; right: 5px; bottom: 3px; border-radius: 50%; background: rgba(20,10,34,.55); box-shadow: inset 0 2px 3px rgba(0,0,0,.5); } /* 完成した瓶 */ .pg-vial--done .pg-vial-body { border-color: rgba(255, 215, 0, 0.7) !important; box-shadow: 0 0 0 1px rgba(255,215,0,.5), 0 0 18px rgba(255,215,0,.38), inset 7px 0 13px -5px rgba(255,255,255,.30), inset -6px 0 11px -5px rgba(0,0,0,.30) !important; } .pg-vial--done .pg-vial-rim { border-color: rgba(255,215,0,.55); } /* 選択中 */ .pg-vial--selected .pg-vial-body { box-shadow: 0 0 0 2px #ff80ff, 0 0 16px rgba(255,80,255,.7), 0 0 32px rgba(200,60,255,.4), inset 7px 0 13px -5px rgba(255,255,255,.32), inset -6px 0 11px -5px rgba(0,0,0,.32) !important; } /* ================================================================ v22: ステージクリア画面 — 完成ポーションを初登場の主役にする ---------------------------------------------------------------- 旧: 主役の位置に絵文字の ⭐ が置かれ、その下の「錬成完了！✨」が 全部を言葉で説明していた。さらに魔法陣からは★型の虹色ポリゴンが 飛び出していて、クリア画面の前に山場を先取りしていた。 新: 盤面が最後まで雫のままになったので、ここが液体の初登場になる。 瓶そのものに仕事をさせ、文字は肩書きに下げる。 ★虹色ポリゴンは引退（.pg-star-potion / pgPotionRainbow は未使用）。 ================================================================ */ .pg-clear-potion-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 190px; height: 300px; margin-bottom: 2px; } /* 主役の瓶。盤面と同じ部品を 1.5 倍で組み直す */ .pg-vial--hero { position: relative; zoom: 1.5; animation: pgHeroBorn .78s cubic-bezier(.24,.72,.32,1) both, pgHeroFloat 3.6s ease-in-out .78s infinite; } .pg-vial--hero:hover { transform: none; } /* 登場: 下から静かに浮き上がる。跳ねさせない（「ジャーン」にしない） */ @keyframes pgHeroBorn { 0% { opacity: 0; transform: translateY(16px) scale(.90); filter: blur(6px) brightness(1.5); } 46% { opacity: 1; filter: blur(1px) brightness(1.18); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); } } /* ふわっと浮く */ @keyframes pgHeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* 背後のほのかな色光。瓶より後ろ、控えめに息をする */ @keyframes pgHeroHalo { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 40% { opacity: .85; } 100% { opacity: .55; transform: translate(-50%,-50%) scale(1); } } @keyframes pgHeroHaloBreath { 0%, 100% { opacity: .58; } 50% { opacity: .92; } } .pg-hero-halo { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(var(--glow), .62) 0%, rgba(var(--glow), .28) 38%, rgba(var(--glow), .10) 58%, transparent 74%); filter: blur(10px); animation: pgHeroHalo .9s ease-out both, pgHeroHaloBreath 4.2s ease-in-out .9s infinite; } /* 液面のゆらぎ。中身が「液体である」ことを、動きで言う */ @keyframes pgHeroSurface { 0%, 100% { transform: scaleX(1) translateY(0); opacity: .85; } 33% { transform: scaleX(1.03) translateY(-.8px); opacity: 1; } 66% { transform: scaleX(.985) translateY(.6px); opacity: .78; } } .pg-vial--hero .pg-potion::before { animation: pgHeroSurface 4.4s ease-in-out infinite; } /* 中の光もゆっくり回す（盤面より遅く。落ち着いて見せたい） */ .pg-vial--hero .pg-potion::after { animation-duration: 5.2s; } /* 周囲のごく小さな光。3つを別々の周期・遅延で瞬かせる */ @keyframes pgHeroSpark { 0%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: .95; } } .pg-hero-spark { position: absolute; z-index: 8; pointer-events: none; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.5); opacity: 0; } .pg-hero-spark--1 { top: 14%; left: -18%; animation: pgHeroSpark 2.6s ease-in-out 1.10s infinite; } .pg-hero-spark--2 { top: 58%; left: 112%; animation: pgHeroSpark 3.4s ease-in-out 1.95s infinite; } .pg-hero-spark--3 { top: 86%; left: -10%; animation: pgHeroSpark 3.0s ease-in-out 2.70s infinite; } /* ── 文字は肩書きに下げる ── 主役は瓶。「ポーション完成！」だけが見出しで、 Stage CLEAR と COIN は結果の注記にすぎない。 */ .pg-clear-title { font-size: 30px !important; letter-spacing: .02em; animation: pgClearTitleIn .5s cubic-bezier(.25,.7,.35,1) .34s both; } @keyframes pgClearTitleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .pg-clear-stage { font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .16em; color: rgba(255, 215, 0, .78) !important; animation: pgClearTitleIn .5s cubic-bezier(.25,.7,.35,1) .46s both; } /* コイン額はサーバーの返答を待って後から入る。 先に1行分の高さを確保しておかないと、画面が出た直後に カードが 17px 伸びてボタンが押し下がる（＝切り替わり際の「ガクッ」）。 */ .pg-clear-coins { font-size: 12.5px !important; min-height: 18px; display: flex; align-items: center; justify-content: center; animation: pgClearTitleIn .5s cubic-bezier(.25,.7,.35,1) .56s both; } .pg-clear-coin { font-size: 12.5px; letter-spacing: .1em; color: rgba(255, 215, 0, .78) !important; } .pg-clear-coin--used { font-size: 12px; color: rgba(220,180,255,.55) !important; } /* 見出しと注記の間を詰めて、瓶〜文字をひとかたまりに見せる */ .pg-clear-inner { gap: 9px !important; padding: 30px 30px 34px !important; } .pg-clear-btns { margin-top: 12px; } /* ★虹色ポリゴンは引退。万一どこかに残っても出てこないようにする */ .pg-star-potion, .pg-clear-star-icon { display: none !important; } /* ================================================================ v23: リボンマッチのスタート — 盤面のヴェールを外して始める ---------------------------------------------------------------- 旧: btn_start.png（280pxの画像ボタン）＋「✦ スタートを押してね ✦」 ＋上下の飾り線「── ── ──」の3つが同じことを言っていた。 ボタンは画像なので、盤面のCSSと世界観が揃いようがなかった。 新: 盤面は最初から見えていて、薄いヴェールが1枚かかっているだけ。 タップするとヴェールがスッと引いて始まる。 ※ ヴェール（.mg-board-overlay）は元から実装されていた。 新しい演出を足したのではなく、眠っていた部品を繋いだだけ。 ================================================================ */ /* カウントダウン層は盤面全面(inset:0)を覆う表示専用のレイヤーだが、 pointer-events:auto かつ z-index がヴェールと同じ5で、DOM上あとに 置かれているため、実際のタップを全部こちらが吸っていた。 （開始後は display:none になるので、これまでは表面化していなかった） クリックを受け取る必要は一切ないので透過させる。 */ .mg-countdown { pointer-events: none !important; } .mg-board-overlay--veil { cursor: pointer; display: flex; align-items: center; justify-content: center; /* 盤面を隠さない濃さ。「見えているけど、まだ触れない」が伝わればいい */ background: radial-gradient(120% 90% at 50% 50%, rgba(28,4,58,.30), rgba(18,2,40,.52)) !important; backdrop-filter: saturate(.78) blur(.6px); -webkit-backdrop-filter: saturate(.78) blur(.6px); transition: opacity .34s ease, backdrop-filter .34s ease; } .mg-board-overlay--veil:hover { background: radial-gradient(120% 90% at 50% 50%, rgba(28,4,58,.24), rgba(18,2,40,.46)) !important; } .mg-board-overlay--veil:active .mg-veil-label { transform: scale(.97); } /* 案内は1つだけ。点滅させず、ゆっくり呼吸させる */ .mg-veil-label { font-size: 15px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 232, 250, .92); text-shadow: 0 0 12px rgba(255,120,210,.55), 0 2px 6px rgba(0,0,0,.5); padding: 11px 26px; border-radius: 999px; background: rgba(60, 14, 96, .42); border: 1px solid rgba(255, 170, 235, .34); box-shadow: 0 4px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: transform .14s ease; animation: mgVeilBreath 3.4s ease-in-out infinite; pointer-events: none; user-select: none; } @keyframes mgVeilBreath { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } /* 遊べないとき（今日は終わり）。押せないことが分かる見た目にする */ .mg-board-overlay--done { cursor: default; } .mg-board-overlay--done .mg-veil-label { color: rgba(238, 220, 250, .72); background: rgba(42, 12, 70, .50); border-color: rgba(210, 180, 235, .22); text-shadow: 0 2px 6px rgba(0,0,0,.5); animation: none; /* 呼吸させない = 誘わない */ } .mg-board-overlay--done:hover { background: radial-gradient(120% 90% at 50% 50%, rgba(28,4,58,.30), rgba(18,2,40,.52)) !important; } /* 退職した3人。万一どこかに残っても出てこないようにする */ .mg-start-area, .mg-start-deco, .mg-start-hint, .mg-btn--start-img-btn, .btn-start-img { display: none !important; } /* ================================================================ 【一時的・調査用】リボンマッチのチラつき切り分けスイッチ URLに ?fx=... を付けると、容疑者を1つずつ止められる。 原因が確定したらこのブロックごと削除すること。 ================================================================ */ html[data-mg-fx*="nozoom"] body { zoom: 1 !important; } /* ── 第2弾の切り分け。前の4つ(nostar/noorn/nozoom/noshadow)が全滅したので、 「そもそも盤面が原因か」から二分する ── */ /* flat: 駒の描画コストを極限まで下げる（グラデ・影・blur・疑似要素を全撤去） これでもチラつく＝原因は駒の描画ではない */ html[data-mg-fx*="flat"] .mg-tile { background: #c0559a !important; box-shadow: none !important; border-radius: 50% !important; transform: none !important; transition: none !important; } html[data-mg-fx*="flat"] .mg-tile::before, html[data-mg-fx*="flat"] .mg-tile::after { display: none !important; } /* nomotion: ページ上の全アニメーションとトランジションを停止 これでもチラつく＝動いている要素が原因ではない */ html[data-mg-fx*="nomotion"] *, html[data-mg-fx*="nomotion"] *::before, html[data-mg-fx*="nomotion"] *::after { animation: none !important; transition: none !important; } /* noboard: 盤面そのものを消す 盤面が無いのに同じ場所でカーソルを動かしてチラつく＝原因はページ側 */ html[data-mg-fx*="noboard"] .mg-board { visibility: hidden !important; } html[data-mg-fx*="noshadow"] .mg-board-wrap, html[data-mg-fx*="noshadow"] .mg-board-wrap--active { box-shadow: none !important; } html[data-mg-fx*="noorn"] .mg-board-wrap::before, html[data-mg-fx*="noorn"] .mg-board-wrap::after { display: none !important; } html[data-mg-fx*="noorn"] .mg-board-ornament, html[data-mg-fx*="noorn"] .mg-hud-center-ornament { animation: none !important; } /* ================================================================ Match の駒：14:23 のパステル版（社長が「さっきよりはマシ」と判定した版） ---------------------------------------------------------------- ローズ / ピーチ / ハニー / ミント / アクア / ラベンダー これを最終形として確定する。以後この見た目は調整しない。 （撤回済み：蛍光色のゴム球版 / 中心が暗い反転版 / 白四角アイコン版 / MITスプライト版） ゲーム側の改善（6色化・手詰まり対策・ドラッグ交換・状態機械・ cadence集約・差分更新）はすべて維持している。 ================================================================ */ .mg-tile-img { display: none !important; } .mg-tile { border-radius: 50% 50% 53% 47% / 47% 49% 51% 53% !important; border: none !important; overflow: visible !important; background: radial-gradient(46% 40% at 66% 68%, hsl(var(--h) var(--s) calc(var(--l) - 22%) / .40) 0%, transparent 76%), radial-gradient(40% 34% at 32% 44%, hsl(var(--h) var(--s) calc(var(--l) + 14%) / .34) 0%, transparent 74%), radial-gradient(34% 30% at 54% 38%, hsl(var(--h) calc(var(--s) - 14%) calc(var(--l) + 22%) / .30) 0%, transparent 78%), radial-gradient(56% 38% at 46% 86%, hsl(var(--h) var(--s) calc(var(--l) + 10%) / .62) 0%, hsl(var(--h) var(--s) var(--l) / .20) 50%, transparent 80%), radial-gradient(88% 92% at 42% 40%, hsl(var(--h) var(--s) calc(var(--l) + 10%)) 0%, hsl(var(--h) var(--s) var(--l)) 52%, hsl(var(--h) calc(var(--s) - 8%) calc(var(--l) - 16%)) 100%) !important; box-shadow: inset 0 0 10px -6px hsl(var(--h) 40% 30% / .22), inset 0 -5px 8px -6px hsl(var(--h) var(--s) 88% / .55), 0 3px 7px -4px hsl(280 60% 8% / .38), 0 0 10px hsl(var(--h) var(--s) calc(var(--l) + 6%) / .18) !important; transform: scale(1, .972); transition: transform .13s cubic-bezier(.3,.9,.4,1), box-shadow .13s ease; } .mg-tile::before { content: ''; position: absolute; left: 12%; top: 8%; width: 58%; height: 40%; border-radius: 50%; z-index: 2; pointer-events: none; background: radial-gradient(58% 58% at 46% 44%, hsl(var(--h) 40% 96% / .30), hsl(var(--h) 40% 96% / .07) 58%, transparent 82%); filter: blur(6px); border: none !important; box-shadow: none !important; inset: auto; } .mg-tile::after { display: none !important; } .mg-tile:not(.mg-tile--full) { background: none !important; box-shadow: none !important; } .mg-tile:not(.mg-tile--full)::before { display: none !important; } .mg-tile[data-tile-type="0"] { --h: 342; --s: 58%; --l: 66%; } /* ローズ */ .mg-tile[data-tile-type="1"] { --h: 20; --s: 74%; --l: 75%; } /* ピーチ */ .mg-tile[data-tile-type="2"] { --h: 46; --s: 76%; --l: 66%; } /* ハニー */ .mg-tile[data-tile-type="3"] { --h: 152; --s: 40%; --l: 71%; } /* ミント */ .mg-tile[data-tile-type="4"] { --h: 194; --s: 50%; --l: 65%; } /* アクア */ .mg-tile[data-tile-type="5"] { --h: 272; --s: 48%; --l: 78%; } /* ラベンダー */ /* hoverで駒を動かさない（tasks.css に残る四角タイル時代のルールを打ち消す。 これは見た目の調整ではなくチラつきのバグ修正なので維持する） */ @media (hover: hover) { .mg-tile:hover { transform: scale(1, .972) !important; } } .mg-tile--selected { transform: translateY(-3px) scale(1.08, .96) !important; box-shadow: inset 0 -5px 8px -6px hsl(var(--h) var(--s) 92% / .70), 0 0 0 1.5px hsl(var(--h) 70% 88% / .85), 0 0 13px hsl(var(--h) var(--s) calc(var(--l) + 8%) / .62), 0 0 28px hsl(var(--h) var(--s) var(--l) / .32) !important; z-index: 4; } .mg-board { background: radial-gradient(120% 100% at 50% 0%, rgba(52,14,92,.46), rgba(28,8,54,.58)) !important; border: 1px solid rgba(255,255,255,.05) !important; /* スマホでスワイプ交換が成立するように（ドラッグ交換の必須条件） */ touch-action: none !important; } /* ============================================================ 残タスク（GRAFT 02以降・このファイルでは触らない） ------------------------------------------------------------ GRAFT 01 完了（v11=最終美装まで）。以後この盤面の数値は凍結： 1760盤面 / 300・380・500・520 / gap20 / 帯380 / 第4段230 / zoom0.9 ※ 第3段は帯380px固定で最終ロック(v9)。横基準線300/380/500/520+gap20は不変 ※ 解消済: GitHubバッジ/grow+deco(v6)/カレンダー化(v7)/タスク行(v8) ============================================================ */ /* ================================================================ チラつき切り分け 第3ラウンド（全ページ共通・調査専用） /games のロビーでもチラつくと報告があったため、Match 限定ではなく サイト全体の描画コストを二分探索する。 ---------------------------------------------------------------- */ /* nobackdrop: 全 backdrop-filter を無効化（このアプリに 130 箇所ある） これでチラつかない＝背景ぼかしの再合成が原因 */ html[data-mg-fx*="nobackdrop"] *, html[data-mg-fx*="nobackdrop"] *::before, html[data-mg-fx*="nobackdrop"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* noanim: 常時アニメーションだけ停止（transition は残す） これでチラつかない＝ずっと動いている要素が毎フレーム再合成を誘発している */ html[data-mg-fx*="noanim"] *, html[data-mg-fx*="noanim"] *::before, html[data-mg-fx*="noanim"] *::after { animation: none !important; } /* notrans: transition だけ停止（animation は残す） これでチラつかない＝カーソル移動によるホバー遷移が原因 */ html[data-mg-fx*="notrans"] *, html[data-mg-fx*="notrans"] *::before, html[data-mg-fx*="notrans"] *::after { transition: none !important; } /* nofilter: filter / drop-shadow を停止 */ html[data-mg-fx*="nofilter"] *, html[data-mg-fx*="nofilter"] *::before, html[data-mg-fx*="nofilter"] *::after { filter: none !important; } /* Home dashboard: bring the live interface closer to the room-led concept mock. Keep this pass scoped to the home view; other pages share these components. */ .dashboard-layout--home .evo-next-panel { display: none; } .dashboard-layout--home .side-home-story { display: none; } /* Keep every evolution image on the same visual stage, regardless of source ratio. */ .dashboard-layout--home .evo-v-img-wrap, .dashboard-layout--home .evo-v-item--current .evo-v-img-wrap { width: min(100%, 84px) !important; height: 84px !important; } /* Keep the active stage from borrowing width from the other three stages. */ html body .dashboard-layout.dashboard-layout--home .evo-chain-panel .evo-vertical-chain .evo-v-item, html body .dashboard-layout.dashboard-layout--home .evo-chain-panel .evo-vertical-chain .evo-v-item--current { flex: 1 1 0 !important; } html body .dashboard-layout.dashboard-layout--home .evo-chain-panel .evo-vertical-chain .evo-v-item .evo-v-img-wrap, html body .dashboard-layout.dashboard-layout--home .evo-chain-panel .evo-vertical-chain .evo-v-item--current .evo-v-img-wrap { width: 84px !important; max-width: 100% !important; height: 84px !important; } @media (min-width: 1420px) { body:has(.dashboard-layout--home) { padding-top: 0 !important; zoom: 1 !important; background: radial-gradient(ellipse at 29% 0%, rgba(103, 55, 117, .28), transparent 45%), linear-gradient(145deg, #170d25 0%, #130b25 53%, #100920 100%); background-attachment: fixed; } .dashboard-layout--home { max-width: 1510px !important; padding: 16px 18px 28px !important; box-sizing: border-box; gap: 14px !important; grid-template-columns: clamp(226px, 15vw, 270px) clamp(260px, 18vw, 320px) minmax(0, 1fr) clamp(330px, 23vw, 410px) !important; grid-template-rows: 220px 56px 156px 215px 94px minmax(180px, auto) !important; grid-template-areas: "nav hero hero evo" "nav hero hero next" "nav hero hero badge" "box week tasks stats" "prize week tasks stats" "grow grow grow deco" !important; } /* The existing status controls sit inside the top edge of the room. */ body:has(.dashboard-layout--home) .header--desktop { position: absolute !important; top: 21px !important; left: calc(max(0px, (100vw - 1510px) / 2) + 32px + clamp(226px, 15vw, 270px)) !important; right: calc(max(0px, (100vw - 1510px) / 2) + 32px + clamp(330px, 23vw, 410px)) !important; width: auto !important; max-width: none !important; height: 54px !important; padding: 4px 14px !important; box-sizing: border-box; border-radius: 16px; background: linear-gradient(90deg, rgba(26, 12, 43, .76), rgba(26, 12, 43, .48)) !important; border: 1px solid rgba(255, 224, 246, .24); box-shadow: 0 8px 28px rgba(21, 8, 39, .25); z-index: 20; flex-wrap: nowrap !important; gap: 8px !important; } body:has(.dashboard-layout--home) .header-status { min-width: 0; gap: 6px !important; margin-right: 0 !important; } body:has(.dashboard-layout--home) .header-exp-bar { width: 105px !important; } body:has(.dashboard-layout--home) .header-avatar { width: 40px !important; height: 40px !important; } body:has(.dashboard-layout--home) .header-lv { font-size: 13px !important; } body:has(.dashboard-layout--home) .header-stage { font-size: 10px !important; } .dashboard-layout--home .side-menu, .dashboard-layout--home .evo-chain-panel, .dashboard-layout--home .evo-next-panel, .dashboard-layout--home .badge-panel, .dashboard-layout--home .daily-box-panel, .dashboard-layout--home .today-prize-panel, .dashboard-layout--home .week-panel, .dashboard-layout--home .tasks-panel, .dashboard-layout--home .stats-panel, .dashboard-layout--home .room-growth-panel, .dashboard-layout--home .deco-panel { background: linear-gradient(145deg, rgba(77, 53, 94, .44), rgba(37, 25, 57, .72)); border: 1px solid rgba(255, 211, 239, .23); box-shadow: 0 8px 26px rgba(9, 4, 22, .2), inset 0 1px rgba(255, 255, 255, .055); border-radius: 16px; } .dashboard-layout--home .side-menu { height: 100%; align-self: stretch !important; padding: 10px 12px; box-sizing: border-box; gap: 2px; } .dashboard-layout--home .side-brand { margin: 0 0 2px; padding: 3px 4px 7px; } .dashboard-layout--home .side-brand-mark { font-size: 25px; } .dashboard-layout--home .side-brand-name { font-size: 22px; } .dashboard-layout--home .side-brand-sub { font-size: 10px; } .dashboard-layout--home .side-home-story { display: block; margin: 0 4px 5px; font-size: 12.5px; line-height: 1.55; color: #e9d0e9; } .dashboard-layout--home .side-section-label { margin: 1px 4px; } .dashboard-layout--home .side-menu-item { min-height: 28px; padding: 4px 10px; box-sizing: border-box; } .dashboard-layout--home .my-room { min-height: 0 !important; margin: 0 !important; border-radius: 18px; border: 1px solid rgba(255, 220, 246, .44); box-shadow: 0 14px 44px rgba(6, 2, 24, .42), 0 0 30px rgba(165, 104, 193, .13); } .dashboard-layout--home .room-bg { object-position: center 46%; } .dashboard-layout--home .room-title { top: 76px; left: 16px; } .dashboard-layout--home .room-neon { top: auto; bottom: 20px; right: 23px; font-size: 21px; } .dashboard-layout--home .room-speech { bottom: 18px; left: 18px; } .dashboard-layout--home .evo-chain-panel { padding: 13px 14px !important; overflow: hidden; } .dashboard-layout--home .evo-chain-panel .panel-title { margin-bottom: 15px !important; } .dashboard-layout--home .evo-v-item { min-width: 0; gap: 5px; padding: 6px 2px !important; } .dashboard-layout--home .evo-v-img-wrap, .dashboard-layout--home .evo-v-item--current .evo-v-img-wrap { width: min(100%, 84px) !important; height: 84px !important; } .dashboard-layout--home .evo-v-item--current { flex: 1.05 1 0; } .dashboard-layout--home .evo-v-arrow { flex: 0 0 8px; font-size: 12px; } .dashboard-layout--home .evo-v-progress, .dashboard-layout--home .evo-v-progress-text { display: none; } .dashboard-layout--home .evo-v-name { font-size: 11px !important; } .dashboard-layout--home .evo-v-lv { font-size: 10.5px !important; } .dashboard-layout--home .evo-next-panel { display: flex; grid-area: next; align-items: center; gap: 10px; padding: 9px 15px; box-sizing: border-box; min-width: 0; } .dashboard-layout--home .evo-next-copy { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; } .dashboard-layout--home .evo-next-copy span { font-size: 10px; color: #d9b7df; } .dashboard-layout--home .evo-next-copy strong { font-size: 12px; color: #ffe1f0; } .dashboard-layout--home .evo-next-progress { flex: 1; height: 8px; min-width: 35px; border-radius: 99px; background: rgba(231, 199, 236, .2); overflow: hidden; } .dashboard-layout--home .evo-next-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #efa1ca, #c885e1); } .dashboard-layout--home .evo-next-count { font-size: 11px; color: #e8cfe9; white-space: nowrap; } .dashboard-layout--home .evo-next-complete { font-size: 13px; font-weight: 700; color: #ffe1f0; } .dashboard-layout--home .badge-panel { align-self: stretch !important; padding: 12px 14px; } .dashboard-layout--home .badge-panel .panel-title { margin-bottom: 8px !important; } .dashboard-layout--home .badge-grid { gap: 5px; } .dashboard-layout--home .badge-item { min-width: 0; } .dashboard-layout--home .badge-note, .dashboard-layout--home .badge-current-row { display: none; } .dashboard-layout--home .daily-box-panel, .dashboard-layout--home .week-panel, .dashboard-layout--home .tasks-panel, .dashboard-layout--home .stats-panel { height: auto !important; min-height: 0 !important; } .dashboard-layout--home .daily-box-panel { margin: 0; } .dashboard-layout--home .daily-box-egg { width: 104px; height: 104px; } .dashboard-layout--home .daily-box-egg-wrap { gap: 5px; } .dashboard-layout--home .daily-box-btn { margin-top: 2px; padding: 7px 12px; } .dashboard-layout--home .today-prize-panel { align-self: stretch !important; height: 100% !important; margin: 0 !important; padding: 9px 12px; box-sizing: border-box; overflow: hidden; } .dashboard-layout--home .week-panel { overflow-y: auto; gap: 8px; } .dashboard-layout--home .tasks-panel, .dashboard-layout--home .stats-panel { overflow-y: auto; } .dashboard-layout--home .tasks-all-done-img { height: 112px !important; } .dashboard-layout--home .room-growth-panel { margin: 0 !important; min-height: 0; padding: 10px 15px; } .dashboard-layout--home .room-growth-img { height: 72px !important; } .dashboard-layout--home .room-growth-head { margin-bottom: 7px; } .dashboard-layout--home .room-growth-head .panel-title { margin: 0 !important; } .dashboard-layout--home .room-growth-item { min-width: 0; } .dashboard-layout--home .deco-panel { min-height: 0; padding: 11px 15px; } .dashboard-layout--home .deco-panel .panel-title { margin: 0 0 6px !important; } .dashboard-layout--home .deco-panel-text { margin: 0 0 4px; line-height: 1.45; } .dashboard-layout--home .deco-panel-emojis { margin: 0 0 5px; font-size: 22px; } .dashboard-layout--home .deco-panel-btn { padding: 7px 12px; } } @media (min-width: 1101px) and (max-width: 1419px) { /* The three-column layout retains its existing in-card progress indicator. */ .dashboard-layout--home .evo-next-panel { display: none; } } /* ================================================================ バッジ: 獲得済みと未獲得をひと目で分ける（2026-10-15） 獲得済み＝金枠＋発光（公開版の表現）、未獲得＝灰色＋点線。 色だけに頼らないよう、下に「獲得済み／未獲得」の文字も出す。 名前は view で意味の切れ目に を入れ、そこでだけ折る。 ================================================================ */ .badge-item { position: relative; } .badge-name { word-break: keep-all; overflow-wrap: normal; } .badge-state { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; padding: 2px 6px; border-radius: 999px; margin-top: 1px; } .badge-item.earned { opacity: 1 !important; filter: none !important; background: linear-gradient(180deg, rgba(255, 214, 102, 0.18), rgba(255, 170, 60, 0.06)) !important; border: 2px solid rgba(255, 206, 92, 0.8) !important; box-shadow: 0 0 14px rgba(255, 200, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .badge-item.earned .badge-ico { filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.6)); } .badge-item.earned .badge-name { color: #ffe9b0 !important; } .badge-item.earned .badge-state { color: #3b2400; background: linear-gradient(180deg, #ffe08a, #f6b93b); } .badge-item:not(.earned) { opacity: 0.55 !important; filter: grayscale(0.9) !important; background: rgba(255, 255, 255, 0.03) !important; border: 2px dashed rgba(255, 255, 255, 0.16) !important; box-shadow: none !important; } .badge-item:not(.earned) .badge-state { color: rgba(246, 239, 255, 0.75); background: rgba(255, 255, 255, 0.08); } /* ================================================================ 今日のタスク: 枠の下に続きがある時だけ、下端に合図を出す （scroll_hint_controller が .has-more を付け外しする） ================================================================ */ .scroll-hint { display: none; } .tasks-panel.has-more .scroll-hint { display: flex; justify-content: center; align-items: flex-end; position: sticky; bottom: -14px; z-index: 2; height: 44px; margin: -44px -16px -14px; padding-bottom: 8px; background: linear-gradient(180deg, rgba(38, 20, 52, 0), rgba(38, 20, 52, 0.96) 70%); pointer-events: none; } .scroll-hint span { font-size: 11px; font-weight: 700; color: #f9a8d4; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; background: rgba(255, 142, 196, 0.14); border: 1px solid rgba(255, 142, 196, 0.3); } @media (prefers-reduced-motion: no-preference) { .scroll-hint span { animation: scroll-hint-nudge 1.8s ease-in-out infinite; } } @keyframes scroll-hint-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } } /* 「獲得済み／未獲得」の文字を足した分（約13px）、ホームのバッジ欄では アイコンと余白を詰めて、欄の高さを変えずに収める */ .dashboard-layout--home .badge-item { padding: 7px 2px 6px !important; gap: 3px !important; } .dashboard-layout--home .badge-ico { font-size: 28px !important; } /* ================================================================ 今週のステータス: 最下段（総完了数）が枠で見切れないように詰める 変更前実測（2000px幅）: 中身347px / 枠321px → 26px はみ出し ================================================================ */ .dashboard-layout--home .stats-panel .rp-row { margin-bottom: 4px !important; } .dashboard-layout--home .stats-panel .stats-grid { gap: 6px !important; } .dashboard-layout--home .stats-panel .stat-item { padding: 5px 12px !important; } /* */ /* hidden属性を確実に適用する */ [hidden] { display: none !important; } /* ===================================================================== ルームテーマ：CSS カスタムプロパティ body[data-room-theme="X"] で全体のアクセントカラーが切り替わる ===================================================================== */ :root { --accent-1: #ff8fab; --accent-2: #c96fff; --accent-glow: rgba(200, 80, 255, 0.4); --accent-mid: rgba(255, 143, 171, 0.25); } body[data-room-theme="sweets"] { --accent-1: #f472b6; --accent-2: #fb7185; --accent-glow: rgba(244, 114, 182, 0.45); --accent-mid: rgba(244, 114, 182, 0.22); } body[data-room-theme="ribbon"] { --accent-1: #ff8fab; --accent-2: #f472b6; --accent-glow: rgba(255, 143, 171, 0.4); --accent-mid: rgba(255, 143, 171, 0.22); } body[data-room-theme="sakura"] { --accent-1: #f9a8d4; --accent-2: #c084fc; --accent-glow: rgba(249, 168, 212, 0.45); --accent-mid: rgba(249, 168, 212, 0.22); } body[data-room-theme="star"] { --accent-1: #818cf8; --accent-2: #a78bfa; --accent-glow: rgba(129, 140, 248, 0.5); --accent-mid: rgba(129, 140, 248, 0.22); } body[data-room-theme="tearoom"] { --accent-1: #fbbf24; --accent-2: #f472b6; --accent-glow: rgba(251, 191, 36, 0.4); --accent-mid: rgba(251, 191, 36, 0.2); } body[data-room-theme="winter"] { --accent-1: #38bdf8; --accent-2: #818cf8; --accent-glow: rgba(56, 189, 248, 0.45); --accent-mid: rgba(56, 189, 248, 0.2); } body[data-room-theme="halloween"] { --accent-1: #fb923c; --accent-2: #c026d3; --accent-glow: rgba(251, 146, 60, 0.45); --accent-mid: rgba(251, 146, 60, 0.2); } body[data-room-theme="christmas"] { --accent-1: #f87171; --accent-2: #4ade80; --accent-glow: rgba(248, 113, 113, 0.4); --accent-mid: rgba(248, 113, 113, 0.2); } body[data-room-theme="princess"] { --accent-1: #fbbf24; --accent-2: #a855f7; --accent-glow: rgba(251, 191, 36, 0.4); --accent-mid: rgba(251, 191, 36, 0.2); } body[data-room-theme="night_simple"] { --accent-1: #6366f1; --accent-2: #818cf8; --accent-glow: rgba(99, 102, 241, 0.5); --accent-mid: rgba(99, 102, 241, 0.22); } body[data-room-theme="sunny"] { --accent-1: #fde68a; --accent-2: #fbbf24; --accent-glow: rgba(253, 212, 60, 0.45); --accent-mid: rgba(253, 212, 60, 0.2); } /* ===================================================================== たまごカラー：部屋オーバーレイ用カスタムプロパティ body[data-egg-color="X"] で部屋の色調がたまごに合わせて微調整される ===================================================================== */ :root { --egg-tint: transparent; } body[data-egg-color="blue"] { --egg-tint: rgba(80, 110, 255, 0.10); } body[data-egg-color="purple"] { --egg-tint: rgba(160, 80, 255, 0.10); } /* ===================== タスクカード（統合） ===================== */ .task-card { position: relative; font-size: 16px; line-height: 1.5; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255, 160, 200, 0.18); box-shadow: 0 6px 24px rgba(60, 0, 80, 0.25); transition: all 0.2s ease; max-width: 600px; margin: 10px auto; color: #f5e6ff; } .task-card:hover { transform: translateY(-2px); } .task-card.priority-high { background: rgba(255, 80, 100, 0.15); border-color: rgba(255, 100, 120, 0.3); } .task-card.priority-medium { background: rgba(255, 200, 60, 0.1); border-color: rgba(255, 200, 80, 0.25); } .task-card.priority-low { background: rgba(80, 220, 130, 0.1); border-color: rgba(80, 220, 150, 0.22); } .task-card-inner { display: flex; align-items: center; gap: 10px; } .task-card-inner form { display: contents; margin: 0; } .task-card .task-title-text { flex: 1; font-size: 14px; font-weight: 500; color: #f5e6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin: 0; } .task-title-text.is-done { opacity: 0.5; text-decoration: line-through; text-decoration-color: rgba(255, 143, 171, 0.5); } .task-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .task-star { font-size: 11px; color: #ffd060; } .task-exp { font-size: 11px; font-weight: bold; color: #ffd060; min-width: 46px; text-align: right; white-space: nowrap; } button.task-circle-btn { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; border: 2px solid rgba(255, 143, 171, 0.55); background: transparent; color: transparent; font-size: 0; padding: 0; box-shadow: none; flex-shrink: 0; transition: all 0.2s ease; } button.task-circle-btn:hover { background: rgba(255, 143, 171, 0.18); transform: scale(1.12); box-shadow: 0 0 8px rgba(255, 143, 171, 0.4); } button.task-circle-btn.is-done { background: linear-gradient(135deg, #ff8fab, #c96fff); border-color: transparent; color: white; font-size: 14px; } button.task-circle-btn.is-done:hover { background: linear-gradient(135deg, #ff6f94, #b560f0); transform: scale(1.08); } button.task-delete-btn { position: static; width: 20px; height: 20px; min-width: 20px; border-radius: 50%; background: rgba(255, 100, 130, 0.12); border: 1px solid rgba(255, 100, 130, 0.25); color: rgba(255, 160, 175, 0.8); font-size: 10px; font-weight: bold; padding: 0; box-shadow: none; line-height: 20px; opacity: 0; transition: opacity 0.15s ease; flex-shrink: 0; } .task-card:hover button.task-delete-btn { opacity: 1; } button.task-delete-btn:hover { background: rgba(255, 80, 110, 0.35); color: white; transform: none; } /* ===================== カテゴリ / 優先度チップ ===================== */ .category-chip { display: inline-block; font-size: 10px; font-weight: bold; padding: 1px 8px; border-radius: 999px; } .category-学習 { background: rgba(100,120,255,0.2); border: 1px solid rgba(100,120,255,0.4); color: #a0aeff; } .category-健康 { background: rgba(80,200,100,0.15); border: 1px solid rgba(80,200,100,0.35); color: #70e090; } .category-習慣 { background: rgba(255,130,200,0.18); border: 1px solid rgba(255,130,200,0.35); color: #ffaadd; } .category-家事 { background: rgba(255,180,50,0.15); border: 1px solid rgba(255,180,50,0.35); color: #ffd060; } .category-仕事 { background: rgba(50,200,220,0.15); border: 1px solid rgba(50,200,220,0.3); color: #70d8e8; } .category-その他 { background: rgba(200,200,220,0.1); border: 1px solid rgba(200,200,220,0.2); color: rgba(240,200,255,0.55); } .priority-chip { display: inline-block; font-size: 10px; font-weight: bold; padding: 1px 8px; border-radius: 999px; width: fit-content; } .priority-chip--high { background: rgba(255, 80, 100, 0.2); border: 1px solid rgba(255, 100, 120, 0.4); color: #ff8fa3; } .priority-chip--medium { background: rgba(255, 200, 60, 0.15); border: 1px solid rgba(255, 200, 80, 0.35); color: #ffd060; } .priority-chip--low { background: rgba(80, 220, 130, 0.12); border: 1px solid rgba(80, 220, 150, 0.3); color: #6edda0; } /* ===================== 完了タスク ===================== */ .done { background: rgba(80, 220, 130, 0.1); border-color: rgba(80, 220, 150, 0.22); opacity: 0.75; } .done p { margin-top: 8px; font-size: 14px; } /* ===================== 通知バナー ===================== */ .notice-wrapper { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 999; } .notice { display: inline-block; background: rgba(255, 100, 160, 0.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #ffb3d9; border: 1px solid rgba(255, 143, 171, 0.35); border-radius: 999px; padding: 14px 24px; font-weight: bold; box-shadow: 0 8px 24px rgba(60, 0, 80, 0.3); animation: popupFade 3s ease forwards; } @keyframes popupFade { 0% { opacity: 0; transform: translateY(-12px) scale(0.95); } 15% { opacity: 1; transform: translateY(0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px) scale(0.95); } } /* ===================== フォーム ===================== */ .task-form { max-width: 500px; margin: 0 auto; background: #ffffff; padding: 24px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); animation: fadeInUp 0.6s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .form-group { margin-bottom: 18px; } .form-group label, .form-check label { display: block; font-weight: bold; margin-bottom: 6px; color: #555; } .form-group input, .form-group select { width: 100%; padding: 10px; border: 2px solid #dceeff; border-radius: 12px; font-size: 16px; } /* tf-group内は上記の古いスタイルを無効化 */ .tf-group input, .tf-group select { border: 1px solid rgba(255, 160, 200, 0.3); padding: 10px 12px; border-radius: 14px; font-size: 14px; background: rgba(255, 255, 255, 0.08); color: #f5e6ff; } .form-check { margin: 16px 0; } .submit-button { background: linear-gradient(135deg, #ff8fab, #c96fff); padding: 10px 20px; font-weight: bold; border: none; border-radius: 999px; color: white; cursor: pointer; box-shadow: 0 4px 14px rgba(200, 80, 255, 0.3); } .submit-button:hover { opacity: 0.8; } /* ===================== ナビゲーション ===================== */ .new-task-button { display: block; width: fit-content; margin: 20px auto; background: #ff8fab; color: white; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: bold; } .new-task-button:hover { opacity: 0.8; } .back-link-wrapper { text-align: center; } .back-link { display: inline-block; margin-top: 30px; color: #ff8fab; text-decoration: none; font-weight: bold; } .footer { text-align: center; font-size: 12px; color: rgba(200, 160, 220, 0.5); } /* ===================== セクション ===================== */ #tasks { max-width: 600px; margin: 0 auto; } #not-done-tasks, #done-tasks { max-width: 600px; margin: 0 auto; } h1 { margin-top: 40px; } h2 { max-width: 600px; margin: 40px auto 20px; color: #f5e6ff; } .app-description { text-align: center; max-width: 600px; margin: 0 auto 30px; } .section-title { display: flex; align-items: center; gap: 12px; white-space: nowrap; max-width: 600px; margin: 40px auto 20px; } .section-icon { width: 40px; height: 40px; object-fit: contain; } /* ===================== 全体 / ヘッダー ===================== */ body { background-size: cover; background-position: center; background-attachment: fixed; font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; padding-top: 90px; position: relative; } body:has(.lp-nav) { padding-top: 0; } body:has(.mg-wrap) { padding-top: 68px; background: #2b1247; } main, #tasks, .dashboard-area, .calendar-wrapper, .ribbon-card { position: relative; z-index: 1; } header { position: sticky; top: 0; z-index: 1000; } .header { position: fixed; top: 0; left: 0; right: 0; height: 68px; z-index: 9999; background: rgba(15, 5, 40, 0.80); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: visible; } footer { clear: both; text-align: center; margin-top: 80px; padding-bottom: 40px; } footer p { margin: 0; } /* ===================== ボタン全般 ===================== */ button, .new-task-button, .submit-button, .header-link, .back-link { transition: all 0.2s ease; } button:hover, .new-task-button:hover, .submit-button:hover, .back-link:hover { transform: translateY(-2px); } button:active, .new-task-button:active, .submit-button:active { transform: scale(0.95); } .badge-box { max-width: 350px; margin: 16px auto; padding: 14px 18px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 143, 171, 0.25); border-radius: 999px; text-align: center; font-weight: bold; color: #ffb3d9; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.25); } .today { background: var(--accent-1) !important; color: white; border-radius: 12px; } /* ===================== Ribbon Card ===================== */ .ribbon-card { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 24px; width: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 8px 32px rgba(60, 0, 80, 0.3); } .ribbon-image { height: 190px; width: auto; flex-shrink: 0; margin-bottom: -20px; position: relative; z-index: 1; } .ribbon-character { position: relative; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 220, 240, 0.22); box-shadow: 0 0 28px rgba(200, 100, 255, 0.4), 0 0 56px rgba(255, 160, 220, 0.2); margin: 0 auto 24px; display: flex; align-items: flex-end; justify-content: center; overflow: visible; } .ribbon-text { display: flex; flex-direction: column; justify-content: center; } .ribbon-text h3 { color: #f5c6ff; font-size: 24px; font-weight: bold; margin: 0 0 8px; text-shadow: 0 0 12px rgba(200, 120, 255, 0.5); } .ribbon-text p { font-size: 16px; font-weight: 500; color: rgba(240, 200, 255, 0.75); margin: 0 0 8px; } .exp-bar { width: 100%; height: 22px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 999px; overflow: hidden; margin-bottom: 16px; } .exp-fill { width: 10%; height: 100%; background: linear-gradient(90deg, #ff8fab, #c96fff); border-radius: 999px; box-shadow: 0 0 10px rgba(200, 80, 255, 0.5); } .ribbon-message { color: #ffb3d9; font-size: 18px; font-weight: bold; text-shadow: 0 0 10px rgba(255, 100, 180, 0.4); } .ribbon-stage { font-size: 12px; color: #999; } .evolution-icon { position: absolute; top: 10px; right: 10px; font-size: 40px; } .corner-ribbon { position: fixed; right: 20px; bottom: 20px; width: 120px; opacity: 0.25; pointer-events: none; z-index: 0; } .status-card { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 24px; padding: 16px 24px; width: fit-content; margin: 20px auto; text-align: center; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.25); } .status-title { font-size: 18px; font-weight: bold; color: #f5c6ff; margin-bottom: 8px; } .status-stats { font-size: 16px; color: rgba(240, 200, 255, 0.8); } /* ===================== ダッシュボード グリッド（修正：重なり防止） ===================== */ .dashboard-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; grid-template-areas: "left center right"; gap: 24px; max-width: 1340px; margin: 0 auto; padding: 0 20px; align-items: start; } .dashboard-layout--2col { grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "left center"; } .col-left { grid-area: left; position: sticky; top: 110px; } .col-center { grid-area: center; min-width: 0; } .col-right { grid-area: right; position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* ===================== 右カラム パネル ===================== */ .badge-panel, .stats-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 16px; padding: 16px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .panel-title { font-size: 13px; font-weight: bold; color: #e8b4ff; margin-bottom: 12px; } .badge-current { font-size: 15px; font-weight: bold; color: #f5e6ff; text-align: center; padding: 10px 12px; background: rgba(255, 143, 171, 0.1); border-radius: 12px; border: 1px solid rgba(255, 143, 171, 0.2); } .stats-grid { display: flex; flex-direction: column; gap: 8px; } .stat-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; border: 1px solid rgba(255, 160, 200, 0.1); } .stat-label { font-size: 12px; color: rgba(240, 200, 255, 0.7); } .stat-value { font-size: 16px; font-weight: bold; color: #f5c6ff; } /* ===================== レスポンシブ ===================== */ @media (max-width: 1100px) { .dashboard-layout { grid-template-columns: 260px 1fr; grid-template-areas: "left center" "right right"; } .col-left, .col-right { position: static; } .col-right { flex-direction: row; flex-wrap: wrap; } .col-right > * { flex: 1; min-width: 220px; } } @media (max-width: 700px) { .dashboard-layout { grid-template-columns: 1fr; grid-template-areas: "left" "center" "right"; padding: 0 12px; } } /* ===================== ホームパネル（左カラム） ===================== */ .home-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 24px; padding: 24px 20px; display: flex; flex-direction: column; gap: 28px; box-shadow: 0 8px 32px rgba(60, 0, 80, 0.3); } .home-panel-title { font-size: 13px; font-weight: bold; color: #e8b4ff; margin: 0; } .home-block-label { font-size: 12px; font-weight: bold; color: rgba(240, 200, 255, 0.6); margin: 0 0 10px; } .home-message-bubble { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 14px; padding: 14px 16px; } .home-message-text { font-size: 14px; color: #f5e6ff; line-height: 1.6; margin: 0; } .home-streak-value { font-size: 36px; font-weight: bold; color: #ffd060; text-align: center; margin: 0; text-shadow: 0 0 16px rgba(255, 210, 60, 0.4); } .home-streak-unit { font-size: 18px; color: rgba(255, 210, 100, 0.7); } .home-evo-bar { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 999px; overflow: hidden; margin-bottom: 8px; } .home-evo-fill { height: 100%; background: linear-gradient(90deg, #ff8fab, #c96fff); border-radius: 999px; transition: width 0.5s ease; } .home-evo-text { font-size: 12px; color: rgba(240, 200, 255, 0.65); margin: 0; } .home-evo-max { font-size: 13px; font-weight: bold; color: #e8b4ff; text-align: center; margin: 0; } /* ===================== 進化チャート ===================== */ .evolution-chart { margin-top: 16px; padding: 14px 12px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 16px; border: 1px solid rgba(255, 160, 200, 0.18); box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); overflow: hidden; } .evo-chart-title { font-size: 13px; font-weight: bold; color: #e8b4ff; text-align: center; margin-bottom: 12px; } .evo-stages { display: flex; align-items: flex-start; justify-content: space-between; gap: 0; } .evo-stage { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; padding: 6px 1px; border-radius: 10px; border: 2px solid transparent; transition: 0.2s; } .evo-stage.active { background: rgba(255, 143, 171, 0.15); border-color: #ff8fab; } .evo-stage.locked { opacity: 0.3; filter: grayscale(60%); } .evo-stage.unlocked { opacity: 0.65; } .evo-img { width: 36px; height: 36px; object-fit: contain; } .evo-name { font-size: 9px; color: rgba(240, 200, 255, 0.7); text-align: center; line-height: 1.15; word-break: keep-all; } .evo-lv { font-size: 9px; font-weight: bold; color: #e8b4ff; } .evo-arrow { color: #ffb3c6; font-size: 11px; margin-top: 18px; flex: 0 0 auto; } .evo-progress-text { font-size: 12px; color: rgba(240, 200, 255, 0.75); text-align: center; margin: 10px 0 6px; } .evo-bar { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 999px; overflow: hidden; } .evo-fill { height: 100%; background: linear-gradient(90deg, #ff8fab, #ff6b9a); border-radius: 999px; transition: width 0.5s ease; } .evo-count { font-size: 11px; color: rgba(240, 200, 255, 0.5); text-align: right; margin-top: 4px; } .max-evolution { text-align: center; color: #e8b4ff; font-weight: bold; font-size: 13px; margin-top: 10px; text-shadow: 0 0 10px rgba(200, 120, 255, 0.5); } @keyframes glow { 0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); } 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); } } /* ===================== マイルーム ===================== */ .my-room { position: relative; width: 100%; height: 500px; min-height: 450px; border-radius: 20px; overflow: hidden; margin-bottom: 32px; box-shadow: 0 12px 48px rgba(60, 0, 80, 0.55); border: 1px solid rgba(255, 160, 200, 0.25); } .room-bg { width: 100%; height: 100%; object-fit: cover; display: block; } .room-egg-tint { position: absolute; inset: 0; background: var(--egg-tint, transparent); mix-blend-mode: screen; pointer-events: none; z-index: 1; } /* 時間帯ティント（room-egg-tint の上、キャラクターの下に重ねる） */ .my-room::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; transition: background 1.2s ease; background: transparent; } body[data-time-period="morning"] .my-room::after { background: linear-gradient(180deg, rgba(255, 210, 100, 0.10) 0%, rgba(255, 160, 60, 0.05) 100%); mix-blend-mode: screen; } body[data-time-period="afternoon"] .my-room::after { background: transparent; } body[data-time-period="evening"] .my-room::after { background: linear-gradient(180deg, rgba(255, 90, 60, 0.14) 0%, rgba(200, 60, 120, 0.08) 100%); mix-blend-mode: screen; } body[data-time-period="night"] .my-room::after { /* multiply×濃い青は部屋を青黒くくすませ「具合悪そう」になっていた。soft-lightで色を殺さず夜ムードだけ薄く乗せる */ background: linear-gradient(180deg, rgba(60, 45, 110, 0.12) 0%, rgba(80, 40, 100, 0.08) 100%); mix-blend-mode: soft-light; } .room-character { position: absolute; bottom: 0; left: calc(63% - 8px); transform: translateX(-30%) translateY(-33px); height: 38%; z-index: 3; display: flex; align-items: flex-end; } .room-character--stage3 { height: 43%; } .room-character--stage4 { height: 43%; } .room-chara-img { height: 100%; width: auto; object-fit: contain; /* グレー背景の矩形端をフェードアウト（img自体に当てることで浮遊時も追従） */ mask-image: radial-gradient(ellipse 82% 88% at 50% 58%, black 45%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 82% 88% at 50% 58%, black 45%, transparent 100%); animation: roomCharaFloat 4.5s ease-in-out infinite, roomCharaSparkle 8.0s ease-in-out infinite; } /* 浮遊のみ（scaleなし→マスク干渉を防ぐ） */ @keyframes roomCharaFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } /* タスクチェック時ジャンプ */ .room-chara--jump { animation: roomCharaJump 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards !important; } @keyframes roomCharaJump { 0% { transform: translateY(0) scaleY(1); } 20% { transform: translateY(-20px) scaleY(1.08); } 45% { transform: translateY(-28px) scaleY(1.12); } 65% { transform: translateY(-10px) scaleY(0.96); } 82% { transform: translateY(-18px) scaleY(1.05); } 100% { transform: translateY(0) scaleY(1); } } /* 紙吹雪 */ .confetti-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 99999; overflow: hidden; } .confetti-piece { position: absolute; top: -14px; animation: confettiFall linear forwards; opacity: 0.92; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 80% { opacity: 0.8; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0; } } /* 鼓動はラッパーdivでscale */ .room-chara-shake { height: 100%; display: flex; align-items: flex-end; transform-origin: center bottom; animation: roomCharaBeat 1.4s ease-in-out infinite; } @keyframes roomCharaBeat { 0%, 100% { transform: scale(1.000); } 12% { transform: scale(1.018); } 20% { transform: scale(0.998); } 28% { transform: scale(1.012); } 38% { transform: scale(1.000); } } /* たまにキラッと光る（控えめに） */ @keyframes roomCharaSparkle { 0%, 28%, 36%, 100% { filter: drop-shadow(0 0 20px rgba(255, 160, 210, 0.30)) drop-shadow(0 0 40px rgba(180, 70, 255, 0.18)) brightness(1.04); } 31% { filter: drop-shadow(0 0 32px rgba(255, 220, 255, 0.55)) drop-shadow(0 0 60px rgba(200, 100, 255, 0.35)) brightness(1.18); } 33% { filter: drop-shadow(0 0 24px rgba(255, 160, 210, 0.40)) drop-shadow(0 0 48px rgba(180, 70, 255, 0.25)) brightness(1.08); } } /* 進化直前の揺れ */ .room-chara-shake.near-evo { animation: roomCharaBeat 1.4s ease-in-out infinite, nearEvoShake 2.8s ease-in-out infinite; } @keyframes nearEvoShake { 0%, 80%, 100% { transform: scale(1.000) rotate(0deg); } 83% { transform: scale(1.010) rotate(-2.5deg); } 86% { transform: scale(1.010) rotate(2.5deg); } 89% { transform: scale(1.005) rotate(-2deg); } 92% { transform: scale(1.005) rotate(1.5deg); } 96% { transform: scale(1.000) rotate(0deg); } } /* stage_baby のゴールド背景を隠すマスク */ .chara-gold-bg { mask-image: radial-gradient(ellipse 58% 65% at 50% 50%, black 38%, transparent 68%); -webkit-mask-image: radial-gradient(ellipse 58% 65% at 50% 50%, black 38%, transparent 68%); } /* 進化チャート内の stage_baby */ .evo-img--gold-bg { mask-image: radial-gradient(ellipse 60% 68% at 50% 50%, black 40%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 68% at 50% 50%, black 40%, transparent 70%); } .room-speech { position: absolute; bottom: 32px; left: 36px; z-index: 3; background: rgba(15, 5, 40, 0.42); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border: 1px solid rgba(255, 200, 230, 0.35); border-radius: 12px; /* 吹き出しが大きく背景の主役（窓・ベッド・キャラ）を隠していたため縮小。 文言は不変、位置も不変で、占める面積だけを落とす。 */ padding: 10px 14px; max-width: 200px; box-shadow: 0 4px 16px rgba(40, 0, 60, 0.28); } .room-speech-label { font-size: 11px; font-weight: bold; color: #e8b4ff; margin-bottom: 3px; } .room-speech-text { font-size: 14px; color: #f5e6ff; font-weight: bold; line-height: 1.45; } /* ===================== 中央下: カレンダー + タスク（修正：幅バランス） ===================== */ .center-bottom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; } @media (max-width: 700px) { .center-bottom { grid-template-columns: 1fr; } } /* ===== 今週の記録パネル ===== */ .week-panel { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(200, 140, 255, 0.2); border-radius: 20px; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; } .week-streak { font-size: 13px; font-weight: 800; color: #ffb347; margin: 0; } .week-stats { display: flex; flex-direction: column; gap: 8px; padding: 10px 2px 4px; } .week-stat-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .week-stat-label { font-size: 11px; color: rgba(220,180,255,0.60); white-space: nowrap; } .week-stat-value { font-size: 12px; font-weight: 800; color: rgba(255,220,255,0.90); display: flex; align-items: center; gap: 6px; } .week-stat-value--exp { color: #ffd700; } .week-stat-bar-wrap { width: 52px; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.10); overflow: hidden; display: inline-block; } .week-stat-bar-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff6ec7, #c060ff); transition: width 0.6s ease; } .week-divider { border: none; border-top: 1px solid rgba(200, 140, 255, 0.18); } .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; } .week-col { display: flex; flex-direction: column; align-items: center; gap: 5px; } .week-label { font-size: 10px; color: rgba(240, 200, 255, 0.5); font-weight: 600; } .week-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; transition: transform 0.15s; } .week-dot.done { background: linear-gradient(135deg, #ff8fb5, #c060ff); color: #fff; box-shadow: 0 0 10px rgba(192, 96, 255, 0.45); } .week-dot.empty { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(200, 140, 255, 0.2); color: transparent; } .week-dot.future { background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(200, 140, 255, 0.15); } .week-dot.today { box-shadow: 0 0 0 2px #c060ff, 0 0 12px rgba(192, 96, 255, 0.5); } .week-date { font-size: 10px; color: rgba(240, 200, 255, 0.5); } .week-date.today { color: #e8b4ff; font-weight: 700; } .week-total { font-size: 11px; color: rgba(240, 200, 255, 0.45); text-align: center; } .week-total strong { color: #e8b4ff; font-size: 14px; } .week-game-btn { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; background: linear-gradient(135deg, rgba(255,143,172,0.15), rgba(192,96,255,0.15)); border: 1px solid rgba(255, 143, 172, 0.3); border-radius: 14px; text-decoration: none; transition: background 0.18s, transform 0.15s; position: relative; } .week-game-btn:hover { background: linear-gradient(135deg, rgba(255,143,172,0.25), rgba(192,96,255,0.25)); transform: translateY(-1px); } .week-game-title { font-size: 13px; font-weight: 800; color: #f5e6ff; margin: 0; } .week-game-sub { font-size: 11px; color: rgba(240, 200, 255, 0.55); margin: 0; } .week-game-sub strong { color: #ffe066; } .week-game-play { display: block; text-align: center; background: linear-gradient(135deg, #ff80c0, #c060ff); color: #fff; font-size: 13px; font-weight: 800; padding: 7px; border-radius: 10px; margin-top: 2px; } /* ─── ダッシュボード：ゲームへのリンク ─── */ .week-games-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,80,180,0.18), rgba(160,60,255,0.18)); border: 1px solid rgba(255,150,220,0.30); color: rgba(255,220,255,0.90); font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.15s, transform 0.12s; } .week-games-link:hover { background: linear-gradient(135deg, rgba(255,80,180,0.28), rgba(160,60,255,0.28)); transform: translateX(2px); } .week-games-link-icon { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(255,100,200,0.35)); transition: transform 0.15s; } .week-games-link:hover .week-games-link-icon { transform: rotate(-6deg) scale(1.08); } .week-games-link span { flex: 1; } .week-games-link-arrow { font-size: 16px; opacity: 0.7; flex: 0 !important; } /* ─── ゲームロビー ─── */ .games-lobby { flex: 1; padding: 24px 28px; min-width: 0; } .games-lobby-header { margin-bottom: 28px; text-align: center; } .games-lobby-hero { position: relative; background-image: url(/assets/games_lobby_bg.jpg); background-size: cover; background-position: center top; border-radius: 16px; padding: 36px 24px; overflow: hidden; } .games-lobby-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,8,40,0.82), rgba(60,10,80,0.75)); backdrop-filter: blur(3px); border-radius: 16px; } .games-lobby-hero .games-lobby-title, .games-lobby-hero .games-lobby-sub { position: relative; z-index: 1; } .games-lobby-title { font-size: 26px; font-weight: 900; color: #fff; margin: 0 0 4px; text-shadow: 0 2px 12px rgba(255,100,200,0.5); } .games-lobby-sub { font-size: 14px; color: rgba(255,200,240,0.65); margin: 0; text-align: center; } .games-lobby-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 900px) { .games-lobby-grid { grid-template-columns: 1fr; } } .game-card { /* B: 背景不透明度で"すりガラス風"を代替（backdrop-filterは下で撤去＝GPU再計算ゼロ・ちらつきなし） */ background: linear-gradient(160deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.10) 100%); border: 1px solid rgba(255,255,255,0.22); border-radius: 20px; padding: 0 0 20px; display: flex; flex-direction: column; gap: 0; /* backdrop-filter は撤去（確定）：6枚ぶんのぼかし層が毎フレーム再合成されてちらつく原因だった */ /* backdrop-filter: blur(16px); */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 24px rgba(0,0,0,0.20); transition: transform 0.15s, box-shadow 0.15s; overflow: hidden; } .game-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 32px rgba(0,0,0,0.28); } .game-card-preview { width: 100%; height: 130px; background-size: cover; background-position: center top; position: relative; flex-shrink: 0; } /* ── パズルカードプレビュー ── */ .gc-puzzle-preview { background-size: cover; background-position: center top; position: relative; overflow: hidden; } /* コラージュを半透明で重ねる */ .gc-puzzle-collage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.72; z-index: 1; } /* 下から暗くしてテキストを読みやすく */ .gc-puzzle-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(20,8,40,0.55) 100%); pointer-events: none; z-index: 2; } /* ── ポーションカード魔法陣プレビュー ── */ .gc-potion-preview { background-size: cover; background-position: center center; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* 背景画像の上に紫オーバーレイ（魔法陣を見やすく） */ .gc-potion-preview > * { position: relative; z-index: 1; } .gc-potion-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 55%, rgba(140,40,220,0.50) 0%, transparent 70%), rgba(20, 4, 50, 0.52); z-index: 0; pointer-events: none; } .gc-magic-ring { position: absolute; border-radius: 50%; pointer-events: none; transition: none; } .gc-magic-ring--outer { width: 120px; height: 78px; border: 1.5px solid rgba(255,100,220,0.70); box-shadow: 0 0 10px rgba(255,80,220,0.45), inset 0 0 8px rgba(255,80,220,0.20); animation: gcMagicRot 10s linear infinite; } .gc-magic-ring--mid { width: 88px; height: 56px; border: 1px dashed rgba(200,100,255,0.65); box-shadow: 0 0 8px rgba(180,80,255,0.40); animation: gcMagicRot 6s linear infinite reverse; } .gc-magic-ring--inner { width: 50px; height: 50px; border: 1.5px solid rgba(255,120,220,0.75); box-shadow: 0 0 12px rgba(255,100,220,0.55), inset 0 0 6px rgba(255,100,220,0.25); animation: gcMagicRot 3s linear infinite; } @keyframes gcMagicRot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .gc-magic-svg { position: absolute; width: 84px; height: 84px; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255,100,220,0.70)); } .gc-magic-core { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255,120,220,0.9) 40%, rgba(200,80,255,0.5) 100%); box-shadow: 0 0 10px rgba(255,120,220,1), 0 0 24px rgba(200,80,255,0.75), 0 0 40px rgba(255,80,200,0.40); animation: gcCorePulse 1.6s ease-in-out infinite; } @keyframes gcCorePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255,120,220,1), 0 0 24px rgba(200,80,255,0.75); } 50% { transform: scale(1.6); box-shadow: 0 0 18px rgba(255,140,220,1), 0 0 40px rgba(200,80,255,1), 0 0 60px rgba(255,80,200,0.5); } } .gc-magic-vials { position: absolute; bottom: 10px; right: 12px; display: flex; gap: 5px; align-items: flex-end; } .gc-vial { width: 13px; height: 38px; border-radius: 0 0 7px 7px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); overflow: hidden; display: flex; align-items: flex-end; box-shadow: 0 0 6px rgba(255,255,255,0.10); } .gc-liq { width: 100%; border-radius: 0 0 6px 6px; opacity: 0.90; } .game-card-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,5,40,0.00) 0%, rgba(20,5,40,0.25) 65%, rgba(20,5,40,0.72) 100%); } .game-card .game-card-badge-wrap, .game-card .game-card-icon, .game-card .game-card-title, .game-card .game-card-desc, .game-card .game-card-meta, .game-card .game-card-reward, .game-card .game-card-btn { padding-left: 18px; padding-right: 18px; } .game-card .game-card-badge-wrap { padding-top: 12px; } .game-card .game-card-btn { margin-top: auto; } .game-card-badge-wrap { min-height: 22px; } .game-card-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; letter-spacing: 0.5px; } .game-card-badge--new { background: linear-gradient(135deg, #ff4db8, #c060ff); color: #fff; } .game-card-badge--done { background: rgba(255,255,255,0.10); color: rgba(255,220,255,0.45); } .game-card-icon { font-size: 40px; line-height: 1; } .game-card-title { font-size: 20px; font-weight: 900; color: #fff; margin: 0; text-shadow: 0 1px 8px rgba(255,100,200,0.4); } .game-card-desc { font-size: 13px; color: rgba(255,210,240,0.75); margin: 0; line-height: 1.6; } .game-card-meta { display: flex; flex-direction: column; gap: 3px; } .game-card-meta-item { font-size: 12px; color: rgba(255,200,240,0.65); } .game-card-meta-item strong { color: #ffe066; } .game-card-reward { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,200,240,0.60); padding: 6px 10px; background: rgba(255,215,0,0.08); border-radius: 8px; border: 1px solid rgba(255,215,0,0.15); } .game-card-coin { font-weight: 800; color: #ffd700; } .game-card-btn { display: block; text-align: center; padding: 11px; border-radius: 12px; font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(135deg, #ff4db8, #c060ff); box-shadow: 0 3px 14px rgba(255,60,180,0.45); margin-top: auto; transition: transform 0.12s, box-shadow 0.12s; } .game-card-btn:hover { transform: scale(1.03); box-shadow: 0 5px 20px rgba(255,60,180,0.60); } .game-card-btn--done { background: rgba(255,255,255,0.10); box-shadow: none; color: rgba(255,200,240,0.45); pointer-events: none; } .game-card--gacha { background: linear-gradient(160deg, rgba(255,220,140,0.10) 0%, rgba(255,100,200,0.08) 100%); border-color: rgba(255,210,100,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 24px rgba(0,0,0,0.20), 0 0 0 1px rgba(255,210,100,0.12); } .game-card--gacha:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 32px rgba(0,0,0,0.28), 0 0 18px rgba(255,200,80,0.18); } .game-card-btn--gacha { position: relative; background: linear-gradient(135deg, #ff6ec7 0%, #ffcc55 50%, #ff6ec7 100%); background-size: 200% 100%; animation: gacha-btn-shimmer 2.4s ease-in-out infinite; box-shadow: 0 3px 14px rgba(255,160,80,0.45), 0 0 0 1px rgba(255,220,100,0.30), inset 0 1px 0 rgba(255,255,255,0.40); color: #fff; text-shadow: 0 1px 4px rgba(180,80,0,0.30); } .game-card-btn--gacha:hover { box-shadow: 0 5px 22px rgba(255,160,80,0.65), 0 0 0 1px rgba(255,220,100,0.50), inset 0 1px 0 rgba(255,255,255,0.40); animation-duration: 1.2s; } @keyframes gacha-btn-shimmer { 0% { background-position: 100% 0; } 50% { background-position: 0% 0; } 100% { background-position: 100% 0; } } /* ── Coming Soon: リボンクエスト ── */ .game-card--coming-soon { opacity: 0.72; filter: grayscale(0.15); background: linear-gradient(160deg, rgba(120,80,200,0.10) 0%, rgba(80,140,255,0.07) 100%); border-color: rgba(160,120,255,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 18px rgba(0,0,0,0.18); pointer-events: none; } .gc-quest-preview { background-size: cover; background-position: center top; height: 130px; position: relative; overflow: hidden; } .gc-quest-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(20,10,40,0.45) 100%); } .game-card-badge--soon { background: rgba(120,80,200,0.22); color: #c8b0ff; border: 1px solid rgba(160,120,255,0.35); } .game-card-btn--soon { background: rgba(100,80,160,0.25); color: rgba(180,160,220,0.7); cursor: not-allowed; box-shadow: none; } .calendar-panel { min-width: 0; overflow: hidden; border-radius: 20px; padding: 16px 18px 14px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .calendar-panel .calendar-wrapper { width: 100%; max-width: 100%; } .calendar-panel .simple-calendar { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* ===================== タスクパネル（統合） ===================== */ .tasks-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 20px; padding: 16px 20px 20px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); min-width: 0; } .tasks-panel .section-title { max-width: none; margin: 12px 0 10px; white-space: normal; } .tasks-panel #not-done-tasks, .tasks-panel #done-tasks { max-width: none; } .tasks-panel .task-card { max-width: none; margin: 4px 0; padding: 13px 14px; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 160, 200, 0.08); } .tasks-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .tasks-add-btn { width: auto; height: 28px; border-radius: 999px; font-size: 12px; font-weight: bold; line-height: 28px; padding: 0 14px; display: inline-flex; align-items: center; text-decoration: none; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: white; box-shadow: 0 2px 8px var(--accent-glow); flex-shrink: 0; } .tasks-add-btn:hover { opacity: 0.85; transform: translateY(-1px); } .tasks-empty { text-align: center; color: rgba(240, 200, 255, 0.5); font-size: 14px; padding: 24px 0; margin: 0; } .tasks-empty-sub { display: block; margin-top: 6px; font-size: 12px; color: rgba(240, 200, 255, 0.35); } /* ── タスク0件: リボンちゃん + クイック追加 ── */ .tasks-benny-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 8px 4px 4px; } .tasks-benny-float { animation: zero-chara-float 3.2s ease-in-out infinite; flex-shrink: 0; } .tasks-benny-img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 12px rgba(255,120,200,0.45)); display: block; } .tasks-benny-bubble { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.07)); border: 1px solid rgba(255,180,230,0.35); border-radius: 18px; padding: 7px 14px; font-size: 12px; font-weight: 700; color: rgba(255,220,245,0.90); backdrop-filter: blur(8px); transition: opacity 0.28s; } .tasks-benny-bubble::before { content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-right-color: rgba(255,180,230,0.35); } .tasks-zero-state { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 10px 0 6px; } .tasks-zero-chara { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-bottom: 10px; } .tasks-zero-float { animation: zero-chara-float 3.2s ease-in-out infinite; } @keyframes zero-chara-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .tasks-zero-img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 3px 12px rgba(255,120,200,0.45)); display: block; } .tasks-zero-img--blink { animation: bennyBlink 0.22s ease-in-out forwards; } @keyframes bennyBlink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(0.08); } } .tasks-zero-bubble--fade { opacity: 0; transition: opacity 0.28s; } .tasks-zero-bubble { transition: opacity 0.28s; } .tasks-zero-bubble { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.07)); border: 1px solid rgba(255,180,230,0.35); border-radius: 18px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: rgba(255,220,245,0.90); white-space: nowrap; width: fit-content; max-width: 78%; backdrop-filter: blur(8px); } .tasks-zero-bubble::before { content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-right-color: rgba(255,180,230,0.35); } .tasks-zero-chips { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; } .tasks-zero-chip { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 16px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,160,220,0.22); border-radius: 12px; font-size: 14px; font-weight: 700; color: rgba(255,220,245,0.85); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.12s; text-align: left; } .tasks-zero-chip:hover { background: rgba(255,100,200,0.14); border-color: rgba(255,120,210,0.45); transform: translateX(3px); } .tasks-zero-chip-plus { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,100,200,0.18); border: 1px solid rgba(255,140,220,0.35); font-size: 15px; font-weight: 900; color: rgba(255,180,230,0.85); display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .tasks-panel-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 160, 200, 0.12); } .tasks-footer-count { font-size: 12px; font-weight: 700; color: rgba(240, 200, 255, 0.60); } .tasks-footer-reward { font-size: 11px; font-weight: 700; color: #ffd700; opacity: 0.80; } /* ===================== ヘッダーロゴ ===================== */ .header-logo-link { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; margin-left: 10px; } .header-logo-img { height: 120px; width: auto; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 140, 210, 0.5)); transition: filter 0.2s ease; } .header-logo-link:hover .header-logo-img { filter: drop-shadow(0 0 14px rgba(255, 140, 210, 0.9)) drop-shadow(0 0 28px rgba(180, 80, 255, 0.6)); } .header-brand-ico { font-size: 26px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 150, 210, 0.6)); } .header-brand-wrap { display: flex; flex-direction: column; line-height: 1.1; } .header-brand-text { font-size: 22px; font-weight: 800; letter-spacing: 0.5px; background: linear-gradient(90deg, #ffb1dc, #ff7ec0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ff8fc4; text-shadow: 0 0 18px rgba(255, 130, 200, 0.35); } .header-brand-sub { font-size: 10px; color: rgba(240, 200, 255, 0.7); } /* ===================== 左カラム: ブランドパネル + サイドメニュー ===================== */ .brand-panel { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; padding: 24px; margin-bottom: 24px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .brand-logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; } .brand-logo-ico { font-size: 30px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 150, 210, 0.6)); } .brand-logo-text { font-size: 30px; font-weight: 800; letter-spacing: 0.5px; background: linear-gradient(90deg, #ffb1dc, #ff7ec0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ff8fc4; text-shadow: 0 0 18px rgba(255, 130, 200, 0.35); } .logo-icon { font-size: 32px; } .logo-text { line-height: 1; } .brand-subtitle { text-align: center; font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 20px; } .concept-button { width: 100%; text-align: center; border-radius: 18px; padding: 14px; margin-bottom: 20px; } .concept-text { text-align: center; font-size: 13px; line-height: 1.8; margin-bottom: 20px; } .brand-subtitle { color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin-bottom: 20px; font-size: 13px; text-align: center; } .concept-button { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; text-align: center; padding: 14px; margin-bottom: 20px; font-weight: bold; color: rgba(255, 255, 255, 0.8); font-size: 12px; } .concept-text { color: rgba(255, 255, 255, 0.85); line-height: 2; margin-bottom: 20px; font-size: 12px; } .concept-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .concept-list li { color: white; font-size: 12px; } .side-menu { display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 24px; padding: 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .side-menu-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; transition: background 0.15s, color 0.15s; } .side-menu-item:hover { background: rgba(255, 182, 213, 0.12); color: white; } .side-menu-item.active { background: rgba(255, 182, 213, 0.15); border: 1px solid rgba(255, 182, 213, 0.4); color: white; font-weight: bold; } /* ── クイックアクセス行（マイルーム / ガチャ） ── */ .side-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .side-quick-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.70); font-size: 11px; font-weight: 600; text-decoration: none; text-align: center; transition: background 0.15s, color 0.15s; } .side-quick-btn:hover { background: rgba(255,182,213,0.14); color: #fff; } .side-quick-btn.active { background: rgba(255,182,213,0.18); border-color: rgba(255,182,213,0.40); color: #fff; font-weight: 700; } .side-quick-ico { font-size: 20px; line-height: 1; } .side-quick-btn--room { position: relative; overflow: hidden; padding: 0; height: 84px; justify-content: flex-end; align-items: flex-end; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.2); } .side-quick-room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; opacity: 0.70; } .side-quick-room-chara { position: absolute; bottom: 0; right: 8px; height: 58px; width: auto; object-fit: contain; z-index: 2; } .side-quick-room-label { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 3px 8px; font-size: 10px; font-weight: 700; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent); border-radius: 0 0 11px 11px; color: rgba(255,255,255,0.90); } /* ── セクションラベル ── */ .side-section-label { font-size: 10px; font-weight: 800; letter-spacing: 0.8px; color: rgba(255,180,220,0.55); padding: 6px 8px 2px; text-transform: uppercase; } /* ── ゲームリンク（ミニゲーム下） ── */ .side-menu-item--game { background: linear-gradient(135deg, rgba(255,60,180,0.14), rgba(160,60,255,0.14)); border-color: rgba(255,120,210,0.22); justify-content: space-between; } .side-menu-item--game:hover { background: linear-gradient(135deg, rgba(255,60,180,0.22), rgba(160,60,255,0.22)); } .side-menu-item--game.active { background: linear-gradient(135deg, rgba(255,60,180,0.25), rgba(160,60,255,0.25)); border-color: rgba(255,120,210,0.50); } /* サイドメニューバッジ（NEW / 未読数） */ .side-menu-badge { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 10px; background: linear-gradient(135deg, #ff80c0, #c060ff); color: #fff; } .menu-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .rewardme-logo { width: 100%; max-width: 150px; height: auto; display: block; margin: 0 auto 12px; } .brand-panel { overflow: hidden; text-align: center; } /* ===================== お部屋の成長ストリップ（ダミー） ===================== */ .room-growth-panel { margin-top: 28px; padding: 16px 18px 18px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 20px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .room-growth-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .room-growth-head .panel-title { margin-bottom: 0; } .room-growth-sub { font-size: 11px; color: rgba(240, 200, 255, 0.6); } .room-growth-strip { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding-bottom: 4px; } .room-growth-item { flex: 1 0 0; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; border: 1px solid rgba(255, 160, 200, 0.12); background: rgba(255, 255, 255, 0.03); opacity: 0.55; filter: grayscale(35%) brightness(0.8); transition: 0.2s; } .room-growth-item.current { opacity: 1; filter: none; border-color: rgba(255, 143, 171, 0.55); box-shadow: 0 0 14px rgba(200, 100, 255, 0.25); } .room-growth-img { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; display: block; } .room-growth-label { font-size: 10px; font-weight: bold; color: rgba(240, 200, 255, 0.8); white-space: nowrap; } .room-growth-arrow { flex-shrink: 0; color: #ffb3c6; font-size: 18px; } /* ===================== バッジコレクション（ダミー） ===================== */ .badge-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; } .badge-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 2px solid rgba(255, 160, 200, 0.12); opacity: 0.35; filter: grayscale(80%); transition: 0.2s; } .badge-item.earned { opacity: 1; filter: none; background: rgba(255, 200, 60, 0.08); border-color: rgba(255, 200, 60, 0.45); box-shadow: 0 0 16px rgba(255, 200, 60, 0.2), inset 0 1px 0 rgba(255,255,255,0.1); } .badge-ico { font-size: 36px; line-height: 1; filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.0)); } .badge-item.earned .badge-ico { filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.5)); } .badge-name { font-size: 8px; color: rgba(240, 200, 255, 0.8); text-align: center; line-height: 1.3; } .badge-note { font-size: 10px; color: rgba(240, 200, 255, 0.5); text-align: center; margin: 0 0 8px; } .badge-current-row { font-size: 12px; font-weight: bold; color: #f5e6ff; text-align: center; padding: 8px 10px; background: rgba(255, 143, 171, 0.1); border-radius: 10px; border: 1px solid rgba(255, 143, 171, 0.2); } /* ===================== リワードポイント（RP）リング ===================== */ .rp-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .rp-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rp-label { font-size: 11px; color: rgba(240, 200, 255, 0.65); } .rp-value { font-size: 24px; font-weight: bold; color: #f5c6ff; text-shadow: 0 0 12px rgba(200, 120, 255, 0.4); line-height: 1.1; } .rp-value small { font-size: 12px; font-weight: bold; color: rgba(245, 198, 255, 0.7); } .rp-bar { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 999px; overflow: hidden; } .rp-fill { height: 100%; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); border-radius: 999px; box-shadow: 0 0 8px var(--accent-glow); } .rp-goal { font-size: 10px; color: rgba(240, 200, 255, 0.5); } .rp-ring { position: relative; width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--accent-1) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.1) 0); display: flex; align-items: center; justify-content: center; } .rp-ring::before { content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(20, 8, 45, 0.92); } .rp-ring-text { position: relative; z-index: 1; font-size: 16px; font-weight: bold; color: #f5c6ff; } /* ===================== お部屋のデコレーション（ダミー） ===================== */ .deco-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 16px; padding: 16px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .deco-sub { font-size: 11px; color: rgba(240, 200, 255, 0.6); margin: 0 0 12px; } .deco-row { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 14px; } .deco-ico { flex: 1; text-align: center; font-size: 24px; padding: 8px 0; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.12); border-radius: 12px; } .deco-shop-btn { text-align: center; font-size: 13px; font-weight: bold; color: white; padding: 10px; border-radius: 999px; background: linear-gradient(135deg, #ff8fab, #c96fff); box-shadow: 0 4px 14px rgba(200, 80, 255, 0.3); cursor: pointer; } .deco-shop-btn:hover { opacity: 0.85; } /* ===================== ヘッダー: ジェム + アイコン（ダミー） ===================== */ .header-gems { font-size: 12px; color: #8be8ff; font-weight: bold; white-space: nowrap; background: rgba(80, 200, 230, 0.1); border: 1px solid rgba(80, 200, 230, 0.28); padding: 3px 10px; border-radius: 999px; } .header-icons { display: flex; align-items: center; gap: 6px; } .header-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 160, 200, 0.2); cursor: pointer; transition: 0.15s; } /* ── プロフィールドロップダウン ── */ .header-profile-wrap { position: relative; } .header-profile-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,160,200,0.22); border-radius: 20px; cursor: pointer; transition: background 0.15s; color: rgba(255,220,255,0.90); } .header-profile-btn:hover { background: rgba(255,100,200,0.15); } .header-profile-name { font-size: 13px; font-weight: 700; } .header-profile-caret { font-size: 10px; opacity: 0.60; } .header-profile-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 130px; background: rgba(40,10,70,0.96); border: 1px solid rgba(255,160,200,0.25); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.40); backdrop-filter: blur(16px); z-index: 200; } .header-profile-item { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 13px; font-weight: 700; color: rgba(255,220,255,0.85); text-decoration: none; transition: background 0.12s; } .header-profile-item:hover { background: rgba(255,100,200,0.14); } .header-profile-item--logout { color: rgba(255,100,130,1.0); border-top: 1px solid rgba(255,160,200,0.25); width: 100%; background: none; font-size: 13px; font-weight: 700; } .header-icon:hover { background: rgba(255, 182, 213, 0.18); transform: translateY(-1px); } .header-icon--btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 160, 200, 0.2); font-family: inherit; color: inherit; text-decoration: none; } /* ===== 🎵 BGMボタン ===== */ .bgm-toggle-btn { transition: opacity 0.2s, transform 0.15s; } .bgm-toggle-btn:hover { transform: scale(1.15); opacity: 0.85; } .bgm-wrap { position: relative; } .bgm-popover { position: fixed; top: 68px; right: 0; z-index: 200; width: 190px; background: rgba(10, 2, 32, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(200, 140, 255, 0.35); border-radius: 14px; padding: 11px 13px; display: none; flex-direction: column; gap: 8px; box-shadow: 0 8px 28px rgba(40, 0, 80, 0.5); } .bgm-popover--open { display: flex; } .bgm-popover-title { font-size: 11px; font-weight: 700; color: #e8b4ff; margin: 0; } .bgm-volume-row { display: flex; align-items: center; gap: 6px; } .bgm-vol-icon { font-size: 12px; line-height: 1; } /* カスタムスライダー：ピンク→パープルグラデーション */ .bgm-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 5px; border-radius: 3px; background: linear-gradient(to right, #ff8fb5, #c060ff); outline: none; cursor: pointer; } .bgm-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #c060ff; box-shadow: 0 0 6px rgba(192, 96, 255, 0.7); cursor: pointer; } .bgm-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #c060ff; box-shadow: 0 0 6px rgba(192, 96, 255, 0.7); cursor: pointer; } .bgm-mute-btn { background: rgba(200, 140, 255, 0.12); border: 1px solid rgba(200, 140, 255, 0.3); border-radius: 9px; color: #e8b4ff; font-size: 11px; font-weight: 700; padding: 6px; cursor: pointer; transition: background 0.15s; width: 100%; } .bgm-mute-btn:hover { background: rgba(200, 140, 255, 0.25); } /* ===== 📮 お手紙ボタン ===== */ .header-mail-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(255, 160, 200, 0.2); background: rgba(255, 255, 255, 0.07); color: inherit; text-decoration: none; font-size: 12px; font-family: inherit; font-weight: bold; letter-spacing: 0.03em; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; white-space: nowrap; } .header-mail-btn:hover { background: rgba(255, 255, 255, 0.13); text-decoration: none; color: inherit; } .header-mail-btn--unread { border-color: rgba(255, 100, 150, 0.55); background: rgba(255, 80, 130, 0.13); animation: mailPulse 2.4s ease-in-out infinite; } .header-mail-text { font-size: 11px; } @keyframes mailPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 100, 150, 0); } 50% { box-shadow: 0 0 10px 2px rgba(255, 100, 150, 0.28); } } /* ===== 通知バッジ ===== */ .header-notif-wrap { position: relative; } .notif-badge { position: absolute; top: -4px; right: -4px; background: #ff4d6d; color: white; font-size: 9px; font-weight: bold; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; pointer-events: none; box-shadow: 0 1px 4px rgba(255, 60, 90, 0.5); } /* ===== 通知ドロップダウン ===== */ .notif-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; background: rgba(30, 10, 50, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 160, 200, 0.25); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); z-index: 200; padding: 14px 0 8px; animation: notifFadeIn 0.15s ease; } @keyframes notifFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .notif-dropdown-title { font-size: 11px; font-weight: bold; color: rgba(240, 200, 255, 0.6); letter-spacing: 0.5px; padding: 0 16px 10px; border-bottom: 1px solid rgba(255, 160, 200, 0.12); margin: 0 0 6px; } .notif-empty { font-size: 13px; color: rgba(240, 200, 255, 0.45); text-align: center; padding: 16px 0; margin: 0; } .notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px; transition: background 0.1s; } .notif-item:hover { background: rgba(255, 255, 255, 0.05); } .notif-item--overdue { border-left: 2px solid #ff4d6d; margin-left: 2px; padding-left: 14px; } .notif-item--today { border-left: 2px solid #ffd060; margin-left: 2px; padding-left: 14px; } .notif-item-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; } .notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .notif-item-title { font-size: 13px; color: #f0e0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-item-date { font-size: 11px; color: rgba(240, 200, 255, 0.5); } .notif-item--overdue .notif-item-date { color: #ff8fa3; } .notif-item--today .notif-item-date { color: #ffd060; } .notif-footer-link { display: block; text-align: center; font-size: 12px; color: rgba(240, 200, 255, 0.5); text-decoration: none; padding: 10px 16px 4px; border-top: 1px solid rgba(255, 160, 200, 0.12); margin-top: 6px; transition: color 0.15s; } .notif-footer-link:hover { color: #ffb3d9; } /* ===================== 部屋の演出（マイルーム / ネオン） ===================== */ .room-title { position: absolute; top: 16px; left: 16px; z-index: 3; font-size: 14px; font-weight: bold; color: #f5e6ff; padding: 6px 16px; border-radius: 999px; background: rgba(15, 5, 40, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 160, 200, 0.3); } .room-neon { position: absolute; top: 18px; right: 22px; z-index: 3; font-size: 24px; font-style: italic; font-weight: bold; color: #ffe3f6; text-shadow: 0 0 6px #ff7ec0, 0 0 14px #ff7ec0, 0 0 26px rgba(255, 126, 192, 0.7); } /* ===================== ミッション完了CTA ===================== */ .mission-cta { margin-top: 12px; text-align: center; font-size: 13px; font-weight: bold; color: #fff; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 143, 171, 0.9), rgba(201, 111, 255, 0.9)); border: 1px solid rgba(255, 200, 230, 0.4); box-shadow: 0 4px 18px rgba(200, 80, 255, 0.35); cursor: pointer; transition: 0.2s; } /* ミニゲーム入口カード */ .game-entry-card { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 16px; text-decoration: none; transition: background 0.2s, border-color 0.2s; } .game-entry-card:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 160, 200, 0.4); } .game-entry-ico { font-size: 28px; flex-shrink: 0; } .game-entry-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .game-entry-title { font-size: 14px; font-weight: 700; color: #f5e6ff; } .game-entry-sub { font-size: 11px; color: rgba(240, 200, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-entry-arrow { font-size: 20px; color: rgba(255, 160, 200, 0.5); flex-shrink: 0; } .game-entry-card--gacha { border-color: rgba(200, 140, 255, 0.25); background: linear-gradient(135deg, rgba(140, 60, 255, 0.06), rgba(255, 80, 180, 0.04)); } .game-entry-card--gacha:hover { border-color: rgba(200, 140, 255, 0.5); background: linear-gradient(135deg, rgba(140, 60, 255, 0.12), rgba(255, 80, 180, 0.08)); } .mission-cta:hover { transform: translateY(-1px); opacity: 0.92; } /* ─── ルームゲームカード ─── */ .room-game-card { position: absolute; bottom: 16px; right: 16px; left: auto; z-index: 4; width: 200px; background: rgba(10, 2, 32, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 160, 200, 0.3); border-radius: 16px; padding: 12px 14px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: background 0.2s, border-color 0.2s; } .room-game-card:hover { background: rgba(20, 5, 50, 0.82); border-color: rgba(255, 160, 200, 0.55); } .room-game-badge { display: inline-block; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 8px; background: linear-gradient(135deg, #ff80c0, #c060ff); color: #fff; letter-spacing: 0.08em; align-self: flex-start; } .room-game-title { font-size: 14px; font-weight: 800; color: #f5e6ff; margin: 0; } .room-game-sub { font-size: 10px; color: rgba(240, 200, 255, 0.6); margin: 0; } .room-game-stats { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(240, 200, 255, 0.7); } .room-game-score strong { color: #ffe066; } .room-game-time { color: rgba(240, 200, 255, 0.5); } .room-game-btn { display: block; text-align: center; background: linear-gradient(135deg, #ff80c0, #c060ff); color: #fff; font-size: 13px; font-weight: 800; padding: 7px; border-radius: 10px; margin-top: 2px; } /* ─── ガチャミニパネル ─── */ .gacha-mini-panel { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(200, 140, 255, 0.2); border-radius: 20px; padding: 16px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .gacha-mini-machine-img { height: 130px; width: auto; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255, 180, 220, 0.85)) drop-shadow(0 0 24px rgba(220, 160, 40, 0.45)); animation: machineFloat 3.5s ease-in-out infinite; } .gacha-mini-btns { display: flex; flex-direction: column; gap: 6px; width: 100%; } .gacha-mini-btn { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-radius: 12px; text-decoration: none; font-size: 13px; font-weight: 700; color: #fff; transition: opacity 0.15s; } .gacha-mini-btn:hover { opacity: 0.88; } .gacha-mini-btn--single { background: linear-gradient(135deg, #a050e0, #7030c0); } .gacha-mini-btn--ten { background: linear-gradient(135deg, #e040a0, #b02080); } .gacha-mini-cost { font-size: 11px; color: #ffe066; font-weight: 800; } .gacha-mini-coins { font-size: 11px; color: rgba(240, 200, 255, 0.55); margin: 0; } .gacha-mini-link { font-size: 11px; color: rgba(200, 140, 255, 0.7); text-decoration: none; transition: color 0.15s; } .gacha-mini-link:hover { color: rgba(200, 140, 255, 1); } /* センターボトム 今週の記録 | タスク */ @media (min-width: 721px) { .center-bottom { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; align-items: stretch; } } /* ガチャモバイルバナー */ .gacha-mobile-banner { display: none; } @media (max-width: 720px) { .gacha-mini-panel { display: none; } .gacha-mobile-banner { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 20px 16px; background: linear-gradient(135deg, rgba(255,143,172,0.12), rgba(192,96,255,0.15)); border: 1px solid rgba(200, 140, 255, 0.3); border-radius: 18px; text-decoration: none; text-align: center; } .gacha-mobile-banner-title { font-size: 16px; font-weight: 800; color: #f5e6ff; margin: 0; } .gacha-mobile-banner-sub { font-size: 12px; color: rgba(240, 200, 255, 0.6); margin: 0; } .gacha-mobile-banner-btn { display: inline-block; background: linear-gradient(135deg, #ff80c0, #c060ff); color: #fff; font-size: 14px; font-weight: 800; padding: 10px 28px; border-radius: 999px; box-shadow: 0 4px 16px rgba(192, 96, 255, 0.4); } } /* ===================== チェックリスト（✓丸アイコン） ===================== */ .concept-list li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.9); font-size: 12px; text-align: left; justify-content: flex-start; } .concept-list .chk { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #ff8fab, #c96fff); color: #fff; font-size: 10px; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(255, 143, 171, 0.4); } /* ===================== カレンダーのドット / 凡例 ===================== */ .cal-dot { display: block; width: 6px; height: 6px; border-radius: 50%; margin: 3px auto 0; } .cal-dot.done { background: #c96fff; box-shadow: 0 0 6px rgba(201, 111, 255, 0.7); } .lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } .lg-dot.done { background: #c96fff; } .lg-dot.partial { background: #ffd060; } .lg-dot.none { background: rgba(200, 200, 220, 0.4); } .lg-star { color: #ff8fab; font-style: normal; margin-right: 4px; font-size: 10px; } /* ===================== コインアイコン（絵文字非依存） ===================== */ .header-coins { display: inline-flex; align-items: center; gap: 5px; } .coin-ico { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffe9a3, #f7c948 55%, #e0a200); border: 1px solid rgba(180, 130, 0, 0.7); box-shadow: 0 0 6px rgba(255, 200, 60, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.25); flex-shrink: 0; } .coin-img { object-fit: contain; flex-shrink: 0; transform: rotate(-18deg); animation: coin-glint 2.8s ease-in-out infinite; } .coin-img--sm { width: 25px; height: 25px; } .coin-img--md { width: 54px; height: 54px; } .coin-img--lg { width: 86px; height: 86px; } @keyframes coin-glint { 0%, 70%, 100% { filter: drop-shadow(0 2px 6px rgba(255,160,180,0.4)) brightness(1); transform: rotate(-18deg) scale(1); } 85% { filter: drop-shadow(0 0 18px rgba(255,200,220,0.95)) brightness(1.35) saturate(1.2); transform: rotate(-18deg) scale(1.06); } } /* ===================== 完成系イメージの囲い: はみ出し防止 ===================== */ .brand-panel, .concept-button, .side-menu, .concept-list { box-sizing: border-box; } .concept-button { width: 100%; max-width: 100%; } /* ===================== 部屋に配置した家具 ===================== */ .room-furniture { position: absolute; transform: translate(-50%, -50%); font-size: 34px; line-height: 1; z-index: 2; filter: drop-shadow(0 3px 8px rgba(40, 0, 60, 0.5)); pointer-events: none; animation: furniturePop 0.3s ease; } /* 画像家具（メインルーム） */ .room-furniture-img { height: 90px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 4px 12px rgba(40, 0, 60, 0.55)); } @keyframes furniturePop { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* 画像家具（サイドバーミニルーム） */ .sidebar-deco-room-item-img { height: 22px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } /* ===================== ショップ（デコレーション・グリッド） ===================== */ .deco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; } .deco-grid form { margin: 0; display: block; } .deco-item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.15); color: #f5e6ff; box-shadow: none; cursor: pointer; transition: 0.15s; } .deco-item:hover { background: rgba(255, 182, 213, 0.14); transform: translateY(-1px); } .deco-item.placed { background: rgba(255, 143, 171, 0.18); border-color: rgba(255, 143, 171, 0.5); box-shadow: 0 0 10px rgba(255, 143, 171, 0.3); } .deco-item .deco-ico { all: unset; font-size: 24px; line-height: 1; } .deco-name { font-size: 9px; color: rgba(240, 200, 255, 0.85); } .deco-tag { font-size: 9px; font-weight: bold; color: #ffd060; display: inline-flex; align-items: center; gap: 3px; } .deco-item.placed .deco-tag { color: #ffb3d9; } .deco-item.owned:not(.placed) .deco-tag { color: #8be8ff; } .deco-tag .coin-ico { width: 11px; height: 11px; } .deco-hint { font-size: 9px; color: rgba(240, 200, 255, 0.5); text-align: center; margin: 0; } /* ===================== ホーム: デコパネル（ショップリンク版） ===================== */ .deco-placed-preview { margin-bottom: 12px; min-height: 36px; } .deco-placed-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .deco-placed-ico { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(40, 0, 60, 0.4)); } .deco-placed-more { font-size: 12px; font-weight: bold; color: rgba(240, 200, 255, 0.6); } .deco-empty { font-size: 11px; color: rgba(240, 200, 255, 0.45); text-align: center; margin: 0; padding: 8px 0; } .deco-shop-link { display: block; text-align: center; font-size: 13px; font-weight: bold; color: white; padding: 10px; border-radius: 999px; background: linear-gradient(135deg, #ff8fab, #c96fff); box-shadow: 0 4px 14px rgba(200, 80, 255, 0.3); text-decoration: none; transition: 0.15s; } .deco-shop-link:hover { opacity: 0.85; transform: translateY(-1px); } /* ===================== ショップページ ===================== */ .shop-header-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 20px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .shop-header-left { flex: 1; } .shop-title { font-size: 20px; font-weight: bold; color: #f5c6ff; margin: 0 0 4px; } .shop-subtitle { font-size: 12px; color: rgba(240, 200, 255, 0.6); margin: 0; } .shop-coin-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 200, 60, 0.1); border: 1px solid rgba(255, 200, 60, 0.3); border-radius: 16px; padding: 10px 18px; flex-shrink: 0; } .shop-coin-label { font-size: 10px; color: rgba(255, 210, 100, 0.7); } .shop-coin-value { font-size: 22px; font-weight: bold; color: #ffd060; display: inline-flex; align-items: center; gap: 6px; text-shadow: 0 0 12px rgba(255, 210, 60, 0.4); } .shop-coin-ico { width: 18px; height: 18px; } .shop-grid-full { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; } @media (max-width: 900px) { .shop-grid-full { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .shop-grid-full { grid-template-columns: repeat(2, 1fr); } } .shop-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.15); box-shadow: 0 2px 12px rgba(60, 0, 80, 0.15); transition: 0.15s; } .shop-card:hover { background: rgba(255, 182, 213, 0.1); transform: translateY(-2px); } .shop-card--placed { background: rgba(255, 143, 171, 0.15); border-color: rgba(255, 143, 171, 0.45); box-shadow: 0 0 16px rgba(255, 143, 171, 0.25); } .shop-card--owned { background: rgba(80, 200, 230, 0.08); border-color: rgba(80, 200, 230, 0.3); } .shop-card--locked { opacity: 0.55; } .shop-card-ico { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(40, 0, 60, 0.4)); } /* 画像家具（ショップカード） */ .shop-card-img { height: 80px; width: auto; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 4px 10px rgba(40, 0, 60, 0.45)); } .shop-card-name { font-size: 13px; font-weight: bold; color: #f5e6ff; } .shop-card-status { font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: 999px; } .status--placed { background: rgba(255, 143, 171, 0.2); border: 1px solid rgba(255, 143, 171, 0.4); color: #ffb3d9; } .status--owned { background: rgba(80, 200, 230, 0.15); border: 1px solid rgba(80, 200, 230, 0.35); color: #8be8ff; } .shop-card-price { font-size: 13px; font-weight: bold; color: #ffd060; display: inline-flex; align-items: center; gap: 4px; } .shop-card-price .coin-ico { width: 13px; height: 13px; } .shop-action-btn { width: 100%; font-size: 11px; font-weight: bold; padding: 7px 4px; border-radius: 999px; border: none; cursor: pointer; transition: 0.15s; } .btn--buy { background: linear-gradient(135deg, #ff8fab, #c96fff); color: white; box-shadow: 0 3px 10px rgba(200, 80, 255, 0.3); } .btn--buy:hover { opacity: 0.85; transform: translateY(-1px); } .btn--place { background: rgba(80, 200, 230, 0.2); border: 1px solid rgba(80, 200, 230, 0.4); color: #8be8ff; } .btn--place:hover { background: rgba(80, 200, 230, 0.3); } .btn--unplace { background: rgba(255, 143, 171, 0.15); border: 1px solid rgba(255, 143, 171, 0.35); color: #ffb3d9; } .btn--unplace:hover { background: rgba(255, 143, 171, 0.25); } .btn--locked { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(240, 200, 255, 0.3); cursor: not-allowed; } .shop-hint { font-size: 10px; color: rgba(240, 200, 255, 0.45); text-align: center; margin: 0 0 8px; } /* ショップ右カラム: ミニルーム */ .shop-room-preview { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 16px; padding: 14px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .shop-mini-room { position: relative; width: 100%; height: 160px; border-radius: 12px; overflow: hidden; margin-bottom: 8px; } .shop-mini-room-bg { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-mini-chara { position: absolute; bottom: 0; right: 12%; height: 75%; display: flex; align-items: flex-end; } .shop-mini-chara-img { height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 200, 240, 0.6)); } .shop-mini-furniture { position: absolute; transform: translate(-50%, -50%); font-size: 18px; line-height: 1; z-index: 2; filter: drop-shadow(0 2px 4px rgba(40, 0, 60, 0.4)); pointer-events: none; } /* 画像家具（ショップミニルーム） */ .shop-mini-furniture-img { height: 32px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)); } .shop-room-count { font-size: 11px; color: rgba(240, 200, 255, 0.55); text-align: center; margin: 0; } .shop-room-hint-text { font-size: 11px; color: rgba(240, 200, 255, 0.55); text-align: center; margin: 8px 0 0; } /* ショップ右カラム: 所持一覧 */ .shop-owned-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 16px; padding: 14px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .shop-owned-empty { font-size: 11px; color: rgba(240, 200, 255, 0.45); text-align: center; padding: 12px 0; margin: 0; } .shop-owned-list { display: flex; flex-direction: column; gap: 6px; } .shop-owned-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 160, 200, 0.1); } .shop-owned-item.is-placed { background: rgba(255, 143, 171, 0.1); border-color: rgba(255, 143, 171, 0.25); } .shop-owned-ico { font-size: 18px; line-height: 1; } .shop-owned-img { height: 28px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); } .shop-owned-name { flex: 1; font-size: 12px; color: #f5e6ff; } .shop-owned-tag { font-size: 10px; font-weight: bold; color: rgba(240, 200, 255, 0.5); } .shop-owned-item.is-placed .shop-owned-tag { color: #ffb3d9; } /* ===================== サイドバー: 進化チェーン ===================== */ .sidebar-evo { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 24px; padding: 18px 16px; margin-bottom: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .sidebar-evo-title { font-size: 12px; font-weight: bold; color: rgba(240, 200, 255, 0.7); text-align: center; margin: 0 0 12px; letter-spacing: 0.5px; } /* ===== 現在ステージ（大きく） ===== */ .sidebar-evo-current { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 18px; background: rgba(255, 143, 171, 0.12); border: 1px solid rgba(255, 143, 171, 0.4); box-shadow: 0 0 20px rgba(255, 143, 171, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); margin-bottom: 10px; } .sidebar-evo-current-img-wrap { width: 90px; height: 90px; flex-shrink: 0; filter: drop-shadow(0 0 16px rgba(255, 160, 210, 0.6)); } .sidebar-evo-current-img { width: 100%; height: 100%; object-fit: contain; } .sidebar-evo-current-name { font-size: 14px; font-weight: bold; color: #ffb3d9; margin: 0; text-align: center; } .sidebar-evo-current-lv { font-size: 11px; color: rgba(240, 200, 255, 0.55); margin: 0 0 2px; } .sidebar-evo-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; margin-bottom: 2px; } .sidebar-evo-fill { height: 100%; background: linear-gradient(90deg, #ff8fab, #c96fff); border-radius: 999px; transition: width 0.5s ease; box-shadow: 0 0 6px rgba(200, 80, 255, 0.5); } .sidebar-evo-next { font-size: 11px; color: rgba(255, 180, 220, 0.75); margin: 0; text-align: center; } .sidebar-evo-next strong { color: #ffb3d9; } .sidebar-evo-max { font-size: 12px; font-weight: bold; color: #ffd060; margin: 0; text-align: center; text-shadow: 0 0 8px rgba(255, 210, 60, 0.5); } /* ===== その他ステージ（コンパクトリスト） ===== */ .sidebar-evo-list { display: flex; flex-direction: column; gap: 4px; } .sidebar-evo-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; } .sidebar-evo-item--unlocked { background: rgba(255, 255, 255, 0.04); opacity: 0.8; } .sidebar-evo-item--locked { opacity: 0.3; filter: grayscale(70%); } .sidebar-evo-item-img-wrap { position: relative; width: 32px; height: 32px; flex-shrink: 0; } .sidebar-evo-item-img { width: 100%; height: 100%; object-fit: contain; } .sidebar-evo-item-name { flex: 1; font-size: 11px; color: rgba(240, 200, 255, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-evo-item-lv { font-size: 10px; color: rgba(240, 200, 255, 0.4); flex-shrink: 0; } .sidebar-evo-item-lock { font-size: 10px; flex-shrink: 0; } /* stage_baby のゴールド背景をマスク */ .sidebar-evo-img--gold { mask-image: radial-gradient(ellipse 62% 68% at 50% 50%, black 40%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 62% 68% at 50% 50%, black 40%, transparent 70%); } .sidebar-evo-check { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #6edda0, #40c080); color: white; font-size: 8px; font-weight: bold; display: flex; align-items: center; justify-content: center; } /* ===================== 右カラム: 横並び進化チェーン ===================== */ .evo-chain-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 16px; padding: 16px 14px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } /* ===== 縦型進化チェーン ===== */ @keyframes evo-card-pulse { 0%, 100% { box-shadow: 0 0 16px rgba(255, 143, 171, 0.25), 0 0 40px rgba(200, 80, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.08); } 50% { box-shadow: 0 0 26px rgba(255, 143, 171, 0.45), 0 0 56px rgba(200, 80, 255, 0.20), inset 0 1px 0 rgba(255,255,255,0.10); } } .evo-vertical-chain { display: flex; flex-direction: column; align-items: stretch; } .evo-v-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid transparent; opacity: 0.30; transition: opacity 0.2s; } .evo-v-item--unlocked { opacity: 0.60; } .evo-v-item--current { opacity: 1; background: rgba(255, 143, 172, 0.10); border-color: rgba(255, 143, 171, 0.45); animation: evo-card-pulse 3s ease-in-out infinite; } .evo-v-img-wrap { position: relative; flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; } .evo-v-item--current .evo-v-img-wrap { width: 80px; height: 80px; } .evo-v-img { width: 100%; height: 100%; object-fit: contain; } .evo-v-item--current .evo-v-img { filter: drop-shadow(0 0 8px rgba(255, 160, 210, 0.45)); } .evo-v-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #ff8fac, #d06fff); color: white; font-size: 9px; font-weight: bold; padding: 2px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(200, 80, 255, 0.35); } .evo-v-check { position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, #6edda0, #40c080); color: white; font-size: 8px; font-weight: bold; display: flex; align-items: center; justify-content: center; } .evo-v-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .evo-v-name { font-size: 12px; font-weight: bold; color: rgba(240, 200, 255, 0.75); margin: 0; } .evo-v-item--current .evo-v-name { color: #ffb3d9; font-size: 14px; } .evo-v-lv { font-size: 10px; color: rgba(240, 200, 255, 0.45); margin: 0; } .evo-v-item--current .evo-v-lv { color: rgba(255, 179, 217, 0.70); } .evo-v-progress { height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; margin-top: 4px; } .evo-v-fill { height: 100%; background: linear-gradient(90deg, #ff8fac, #d06fff); border-radius: 2px; transition: width 0.5s ease; } .evo-v-progress-text { font-size: 10px; color: rgba(255, 179, 217, 0.80); margin: 0; } .evo-v-progress-text strong { color: #ffb3d9; } .evo-v-max { font-size: 11px; font-weight: bold; color: #ffd060; margin: 0; text-shadow: 0 0 6px rgba(255, 210, 60, 0.4); } .evo-v-arrow { text-align: center; color: rgba(255, 160, 200, 0.35); font-size: 13px; line-height: 1; padding: 2px 0; } /* ===================== サイドバー共通: 絵文字アイコン ===================== */ .menu-icon-emoji { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } /* ===================== デイリーBOX ===================== */ .daily-box-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.22); border-radius: 20px; padding: 8px 16px 10px; margin-bottom: 10px; text-align: center; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); position: relative; overflow: hidden; } .daily-box-panel::before { content: ""; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(255,143,171,0.06) 0%, rgba(200,80,255,0.04) 100%); pointer-events: none; } .daily-box-title { font-size: 11px; font-weight: bold; color: rgba(240, 200, 255, 0.75); margin: 0 0 6px; letter-spacing: 0.5px; } /* ===== 卵 ===== */ .daily-box-egg-wrap { cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; position: relative; user-select: none; } .daily-box-egg { width: 148px; height: 148px; object-fit: contain; border-radius: 16px; /* 二重drop-shadow(0.7+0.4)は左カラムで一点だけ強く光り、視線を持っていっていた。 金色の層を外し桃色1枚だけ薄く残す＝リボンBOXだと分かるアクセントは維持。 加えて素材自体が明るく、減光後もリボンやハイライトが白飛びして 周囲のカード（カレンダー/タスク）から浮いていたため brightness で落とす。 彩度は触らないのでピンクはそのまま残る。元画像は加工していない。 */ filter: brightness(0.8) drop-shadow(0 0 10px rgba(255, 170, 215, 0.28)); animation: egg-idle 2.4s ease-in-out infinite; } body[data-egg-color="purple"] .daily-box-egg, body[data-egg-color="yellow"] .daily-box-egg { filter: brightness(0.8) drop-shadow(0 0 10px rgba(176, 125, 255, 0.28)); } body[data-egg-color="blue"] .daily-box-egg { filter: brightness(0.8) drop-shadow(0 0 10px rgba(105, 181, 255, 0.28)); } .daily-box-egg--used { width: 100px; height: 100px; border-radius: 12px; filter: grayscale(90%) brightness(0.4); animation: none; } @keyframes egg-idle { 0%, 100% { transform: translateY(0) rotate(-3deg); } 25% { transform: translateY(-5px) rotate(2deg); } 75% { transform: translateY(-3px) rotate(-2deg); } } .daily-box-btn { margin-top: 4px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--accent-mid, rgba(255, 160, 210, 0.45)); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 12px; font-weight: bold; font-family: inherit; letter-spacing: 0.5px; cursor: pointer; box-shadow: 0 2px 12px var(--accent-mid, rgba(255, 143, 171, 0.25)), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: background 0.15s, box-shadow 0.15s, transform 0.1s; white-space: nowrap; } .daily-box-btn:hover { background: var(--accent-mid, rgba(255, 160, 210, 0.2)); box-shadow: 0 4px 20px var(--accent-glow, rgba(255, 143, 171, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .daily-box-btn:active { transform: scale(0.96); } /* ===== 卵アニメーション ===== */ .egg-shake { animation: egg-shake-anim 0.65s ease-in-out !important; } @keyframes egg-shake-anim { 0% { transform: rotate(0deg) scale(1); } 15% { transform: rotate(-10deg) scale(1.06); } 30% { transform: rotate(10deg) scale(1.10); } 45% { transform: rotate(-9deg) scale(1.07); } 60% { transform: rotate(9deg) scale(1.10); } 80% { transform: rotate(-4deg) scale(1.04); } 100% { transform: rotate(0deg) scale(1); } } .egg-glow { animation: egg-glow-anim 0.5s ease-out forwards !important; } @keyframes egg-glow-anim { 0% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(255,160,210,0.5)); } 60% { transform: scale(1.18); filter: drop-shadow(0 0 30px rgba(255,220,80,0.9)); } 100% { transform: scale(1.12); filter: drop-shadow(0 0 40px rgba(255,230,100,1.0)); } } .egg-burst { animation: egg-burst-anim 0.35s ease-in forwards !important; } @keyframes egg-burst-anim { 0% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } /* ===== パーティクル ===== */ .box-particle { position: absolute; border-radius: 50%; pointer-events: none; animation: particle-fly 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes particle-fly { 0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0); opacity: 0; } } /* ===== 景品リビール ===== */ .daily-box-result { margin-top: 4px; } .prize-reveal { animation: prize-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes prize-pop { 0% { transform: scale(0.4) translateY(10px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .daily-box-prize-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 14px; background: rgba(255, 200, 60, 0.08); border: 1px solid rgba(255, 200, 60, 0.3); box-shadow: 0 0 20px rgba(255, 200, 60, 0.15); } .daily-box-prize-ico { font-size: 38px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 200, 60, 0.6)); } .daily-box-prize-label { font-size: 15px; font-weight: bold; color: #ffd060; } .daily-box-rarity { font-size: 9px; font-weight: bold; padding: 2px 10px; border-radius: 999px; letter-spacing: 1.2px; } .daily-box-rarity[data-rarity="normal"] { background: rgba(160,160,180,0.18); color: rgba(200,195,220,0.65); } .daily-box-rarity[data-rarity="good"] { background: rgba(50,210,110,0.18); color: #4ee89a; border: 1px solid rgba(50,210,110,0.3); } .daily-box-rarity[data-rarity="rare"] { background: rgba(60,130,255,0.18); color: #7ab4ff; border: 1px solid rgba(60,130,255,0.3); } .daily-box-rarity[data-rarity="epic"] { background: rgba(180,60,255,0.18); color: #c97fff; border: 1px solid rgba(180,60,255,0.35); box-shadow: 0 0 10px rgba(180,60,255,0.3); } .daily-box-rarity[data-rarity="super"] { background: rgba(255, 195, 40, 0.18); color: #ffd060; border: 1px solid rgba(255,195,40,0.4); box-shadow: 0 0 14px rgba(255, 195, 40, 0.5); animation: rarity-pulse 1.2s ease-in-out infinite; } @keyframes rarity-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(255,200,60,0.5); } 50% { box-shadow: 0 0 22px rgba(255,200,60,0.9); } } /* ===== 開封済み ===== */ .daily-box-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 6px; } .daily-box-done-ico { font-size: 38px; line-height: 1; opacity: 0.35; filter: grayscale(100%); } .daily-box-done-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: bold; color: rgba(110, 220, 160, 0.9); background: rgba(80, 200, 130, 0.12); border: 1px solid rgba(80, 200, 130, 0.3); border-radius: 999px; padding: 5px 16px; letter-spacing: 0.5px; } .daily-box-done-sub { font-size: 10px; color: rgba(240, 200, 255, 0.3); margin: 0; letter-spacing: 1.5px; font-style: italic; } .daily-box-timer { font-size: 10px; font-weight: bold; color: rgba(240, 200, 255, 0.3); margin: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } /* ===== SUPER RARE フラッシュ ===== */ @keyframes super-flash { 0% { background: rgba(255, 220, 80, 0); } 20% { background: rgba(255, 220, 80, 0.18); } 60% { background: rgba(255, 200, 60, 0.1); } 100% { background: rgba(255, 220, 80, 0); } } body.flash-super::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; animation: super-flash 1.2s ease-out forwards; } /* ===================== サイドバー付きページ共通レイアウト ===================== */ /* ===================== 今日の獲得アイテム ===================== */ .today-prize-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 18px; padding: 12px 14px; margin-bottom: 14px; } .today-prize-title { font-size: 11px; font-weight: bold; color: rgba(240, 200, 255, 0.75); margin: 0 0 8px; letter-spacing: 0.4px; } .today-prize-content { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 200, 60, 0.08); border-radius: 12px; border: 1px solid rgba(255, 200, 60, 0.22); } .today-prize-new { position: absolute; top: -8px; right: -6px; background: linear-gradient(135deg, #ff4d7d, #ff8fac); color: white; font-size: 9px; font-weight: bold; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.8px; box-shadow: 0 2px 6px rgba(255, 80, 120, 0.4); animation: new-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes new-badge-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .today-prize-ico { font-size: 32px; line-height: 1; flex-shrink: 0; display: flex; align-items: center; } .today-prize-info { display: flex; flex-direction: column; gap: 3px; } .today-prize-label { font-size: 15px; font-weight: bold; color: #ffd060; } .today-prize-rarity { font-size: 9px; font-weight: bold; padding: 2px 8px; border-radius: 999px; letter-spacing: 1px; width: fit-content; } .today-prize-rarity[data-rarity="normal"] { background: rgba(160,160,180,0.18); color: rgba(200,195,220,0.65); } .today-prize-rarity[data-rarity="good"] { background: rgba(50,210,110,0.18); color: #4ee89a; border: 1px solid rgba(50,210,110,0.3); } .today-prize-rarity[data-rarity="rare"] { background: rgba(60,130,255,0.18); color: #7ab4ff; border: 1px solid rgba(60,130,255,0.3); } .today-prize-rarity[data-rarity="epic"] { background: rgba(180,60,255,0.18); color: #c97fff; border: 1px solid rgba(180,60,255,0.35); box-shadow: 0 0 8px rgba(180,60,255,0.25); } .today-prize-rarity[data-rarity="super"] { background: rgba(255,195,40,0.18); color: #ffd060; border: 1px solid rgba(255,195,40,0.4); box-shadow: 0 0 12px rgba(255,195,40,0.35); } .today-prize-mystery { display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(255, 255, 255, 0.04); border-radius: 12px; border: 1px dashed rgba(255, 160, 200, 0.2); } .today-prize-mystery-mark { font-size: 18px; font-weight: bold; color: rgba(240, 200, 255, 0.25); letter-spacing: 4px; } .today-prize-got { font-size: 10px; color: rgba(255, 200, 100, 0.8); font-weight: bold; letter-spacing: 0.5px; } /* ===================== 左カラム: デコレーションパネル ===================== */ .sidebar-deco-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 20px; padding: 14px 16px; margin-top: 14px; box-shadow: 0 4px 20px rgba(60, 0, 80, 0.2); } .sidebar-deco-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .sidebar-deco-title { font-size: 12px; font-weight: bold; color: rgba(240, 200, 255, 0.8); margin: 0; } .sidebar-deco-shop-btn { background: linear-gradient(90deg, #ff8fac, #c96fff); color: white; font-size: 10px; font-weight: bold; padding: 4px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(200, 80, 255, 0.3); transition: opacity 0.15s; } .sidebar-deco-shop-btn:hover { opacity: 0.85; } /* ミニルームサムネイル */ .sidebar-deco-room { display: block; position: relative; width: 100%; aspect-ratio: 5 / 3; border-radius: 12px; overflow: hidden; text-decoration: none; box-shadow: 0 4px 18px rgba(60, 0, 80, 0.45); border: 1px solid rgba(255, 160, 200, 0.22); transition: box-shadow 0.2s, transform 0.2s; } .sidebar-deco-room:hover { transform: scale(1.015); box-shadow: 0 8px 28px rgba(200, 80, 255, 0.35); } .sidebar-deco-room-bg { width: 100%; height: 100%; object-fit: cover; display: block; } .sidebar-deco-room-chara { position: absolute; bottom: 0; left: 50%; transform: translateX(-30%); height: 68%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)); } .sidebar-deco-room-item { position: absolute; font-size: 16px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } /* 家具ゼロ時のヒントオーバーレイ */ .sidebar-deco-room-hint { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: linear-gradient(to top, rgba(20, 5, 40, 0.60) 0%, transparent 55%); pointer-events: none; } .sidebar-deco-room-hint span { font-size: 10px; color: rgba(255, 210, 240, 0.85); font-weight: bold; letter-spacing: 0.3px; } /* ホバー時オーバーレイ */ .sidebar-deco-room-hover { position: absolute; inset: 0; background: rgba(20, 5, 40, 0.42); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s; pointer-events: none; } .sidebar-deco-room:hover .sidebar-deco-room-hover { opacity: 1; } .sidebar-deco-room-hover span { font-size: 12px; font-weight: bold; color: #fff; letter-spacing: 0.5px; text-shadow: 0 0 12px rgba(255, 143, 172, 0.8); } /* サイドバー リボンキャッチボタン */ .sidebar-game-btn { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 9px 12px; background: rgba(255, 143, 172, 0.1); border: 1px solid rgba(255, 143, 172, 0.25); border-radius: 12px; text-decoration: none; transition: background 0.18s; position: relative; } .sidebar-game-btn:hover { background: rgba(255, 143, 172, 0.2); } .sidebar-game-btn .room-game-badge { position: static; } .sidebar-game-btn-text { font-size: 12px; font-weight: 700; color: #f5e6ff; flex: 1; } .sidebar-game-btn-score { font-size: 10px; color: rgba(240, 200, 255, 0.55); } .sidebar-game-btn-play { font-size: 11px; font-weight: 700; color: #ff8fac; } /* モバイル ミニゲームカード */ .mobile-games-row { display: none; } .mobile-game-card { display: none; } @media (max-width: 720px) { .mobile-games-row { display: flex; gap: 10px; margin: 12px 12px 0; } .mobile-game-card { display: block; padding: 12px 14px; background: rgba(10, 2, 32, 0.72); border: 1px solid rgba(255, 160, 200, 0.3); border-radius: 16px; text-decoration: none; position: relative; flex: 1; } .mobile-game-card--half { flex: 1; } .mobile-game-card-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mobile-game-btn { flex-shrink: 0; padding: 8px 14px; font-size: 12px; margin-top: 0; border-radius: 10px; } } .page-sidebar-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; padding: 0 20px; align-items: start; } /* dashboard-layoutの grid-area: left を上書き */ .page-sidebar-layout > .col-left { grid-area: unset; grid-column: 1; grid-row: 1; } .sticky-col { position: sticky; top: 110px; } .col-main { min-width: 0; grid-column: 2; grid-row: 1; } .page-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .page-panel-title { font-size: 20px; font-weight: bold; color: #f5c6ff; margin: 0 0 4px; max-width: none; text-shadow: 0 0 16px rgba(200, 120, 255, 0.3); } .page-panel-sub { font-size: 12px; color: rgba(240, 200, 255, 0.55); margin: 0; } /* ===================== タスク一覧ページ ===================== */ .tl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; } .tl-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 16px; backdrop-filter: blur(12px); } .tl-stat--active { border-color: rgba(255, 160, 200, 0.4); background: rgba(255, 143, 171, 0.1); } .tl-stat--done { border-color: rgba(80, 220, 150, 0.35); background: rgba(80, 220, 130, 0.08); } .tl-stat--rate { border-color: rgba(200, 120, 255, 0.35); background: rgba(200, 120, 255, 0.08); } .tl-stat-val { font-size: 28px; font-weight: bold; color: #f5c6ff; line-height: 1; } .tl-stat-lbl { font-size: 11px; color: rgba(240, 200, 255, 0.6); } .tl-section { margin-bottom: 24px; } .tl-section-label { font-size: 13px; font-weight: bold; color: rgba(240, 200, 255, 0.75); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .tl-section-label--done { color: rgba(110, 221, 160, 0.75); } .tl-count { font-size: 11px; font-weight: bold; background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 1px 8px; } .tl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 160, 200, 0.2); border-radius: 16px; color: rgba(240, 200, 255, 0.55); font-size: 14px; } .tl-empty--full { margin-top: 16px; } .tl-empty-ico { font-size: 36px; } .tl-edit-link { font-size: 14px; text-decoration: none; padding: 2px 6px; border-radius: 8px; color: rgba(240, 200, 255, 0.7); transition: 0.15s; flex-shrink: 0; } .tl-edit-link:hover { color: #f5e6ff; background: rgba(255, 255, 255, 0.08); } /* ===================== 習慣ページ ===================== */ .habit-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; filter: blur(1px); opacity: 0.5; pointer-events: none; user-select: none; } .habit-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 18px; backdrop-filter: blur(12px); } .habit-card-ico { font-size: 28px; flex-shrink: 0; } .habit-card-info { flex: 1; } .habit-card-name { font-size: 15px; font-weight: bold; color: #f5e6ff; margin: 0 0 3px; } .habit-card-time { font-size: 11px; color: rgba(240, 200, 255, 0.6); margin: 0; } .habit-card-streak { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .habit-streak-val { font-size: 26px; font-weight: bold; color: #ffd060; line-height: 1; } .habit-streak-unit { font-size: 10px; color: rgba(255, 210, 100, 0.7); } .coming-soon-banner { position: relative; overflow: hidden; padding: 40px 32px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.25); border-radius: 24px; text-align: center; backdrop-filter: blur(20px); } .coming-soon-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background: radial-gradient(circle, rgba(200, 100, 255, 0.15) 0%, transparent 70%); pointer-events: none; } .coming-soon-tag { display: inline-block; font-size: 12px; font-weight: bold; letter-spacing: 1px; color: #ffd060; background: rgba(255, 200, 60, 0.12); border: 1px solid rgba(255, 200, 60, 0.35); border-radius: 999px; padding: 4px 14px; margin-bottom: 16px; } .coming-soon-title { font-size: 20px; font-weight: bold; color: #f5c6ff; margin: 0 0 10px; text-shadow: 0 0 16px rgba(200, 120, 255, 0.4); } .coming-soon-desc { font-size: 14px; color: rgba(240, 200, 255, 0.65); line-height: 1.8; margin: 0 0 20px; } .coming-soon-features { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .coming-soon-features span { font-size: 12px; font-weight: bold; color: rgba(240, 200, 255, 0.8); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 999px; padding: 5px 14px; } /* ===================== アチーブメントページ ===================== */ .ach-total-badge { display: flex; align-items: baseline; gap: 4px; padding: 10px 18px; background: rgba(255, 200, 60, 0.1); border: 1px solid rgba(255, 200, 60, 0.3); border-radius: 16px; flex-shrink: 0; } .ach-total-val { font-size: 28px; font-weight: bold; color: #ffd060; } .ach-total-sep { font-size: 18px; color: rgba(255, 210, 100, 0.4); } .ach-total-max { font-size: 18px; color: rgba(255, 210, 100, 0.6); } .ach-total-lbl { font-size: 11px; color: rgba(255, 210, 100, 0.65); margin-left: 4px; } .ach-progress-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .ach-progress-bar { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 999px; overflow: hidden; } .ach-progress-fill { height: 100%; background: linear-gradient(90deg, #ffd060, #ff8fab); border-radius: 999px; transition: width 0.5s ease; } .ach-progress-text { font-size: 12px; color: rgba(240, 200, 255, 0.6); white-space: nowrap; } .ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 800px) { .ach-grid { grid-template-columns: repeat(2, 1fr); } } .ach-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 160, 200, 0.1); border-radius: 20px; text-align: center; opacity: 0.4; filter: grayscale(60%); transition: 0.2s; } .ach-card--earned { opacity: 1; filter: none; background: rgba(255, 200, 60, 0.08); border-color: rgba(255, 200, 60, 0.35); box-shadow: 0 0 20px rgba(255, 200, 60, 0.15); } .ach-ico-wrap { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; } .ach-ico-glow { box-shadow: 0 0 20px rgba(255, 200, 60, 0.4); background: rgba(255, 200, 60, 0.12); } .ach-ico { font-size: 26px; line-height: 1; } .ach-name { font-size: 12px; font-weight: bold; color: #f5e6ff; margin: 0; } .ach-desc { font-size: 10px; color: rgba(240, 200, 255, 0.6); margin: 0; line-height: 1.4; } .ach-remaining-bar { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; } .ach-remaining-fill { height: 100%; background: linear-gradient(90deg, #ff8fab, #c96fff); border-radius: 999px; } .ach-status { font-size: 10px; font-weight: bold; padding: 2px 10px; border-radius: 999px; } .ach-status--earned { background: rgba(255, 200, 60, 0.15); border: 1px solid rgba(255, 200, 60, 0.4); color: #ffd060; } .ach-status--locked { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(240, 200, 255, 0.5); } .ach-status--mystery { background: rgba(200, 120, 255, 0.1); border: 1px solid rgba(200, 120, 255, 0.2); color: rgba(200, 140, 255, 0.7); } /* ===================== 設定ページ ===================== */ .settings-section { margin-bottom: 24px; padding: 20px 24px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 20px; backdrop-filter: blur(14px); } .settings-section-title { font-size: 13px; font-weight: bold; color: #e8b4ff; margin: 0 0 16px; } .settings-profile-card { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 14px 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 160, 200, 0.1); border-radius: 16px; } .settings-avatar { width: 52px; height: 52px; flex-shrink: 0; } .settings-avatar-img { width: 100%; height: 100%; object-fit: contain; } .settings-nickname { font-size: 18px; font-weight: bold; color: #f5c6ff; margin: 0 0 3px; } .settings-email { font-size: 12px; color: rgba(240, 200, 255, 0.5); margin: 0 0 8px; } .settings-profile-badges { display: flex; flex-wrap: wrap; gap: 6px; } .settings-badge-chip { font-size: 11px; font-weight: bold; color: rgba(240, 200, 255, 0.85); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 999px; padding: 2px 10px; } .settings-data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .settings-data-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 160, 200, 0.1); border-radius: 14px; } .settings-data-lbl { font-size: 11px; color: rgba(240, 200, 255, 0.55); } .settings-data-val { font-size: 18px; font-weight: bold; color: #f5c6ff; } .settings-logout-btn { display: block; text-align: center; padding: 12px; border-radius: 999px; font-size: 14px; font-weight: bold; color: #ff8fa3; background: rgba(255, 60, 90, 0.1); border: 1px solid rgba(255, 100, 130, 0.3); text-decoration: none; transition: 0.15s; } .settings-logout-btn:hover { background: rgba(255, 60, 90, 0.2); transform: translateY(-1px); } /* ===================== お手紙（inbox / detail） ===================== */ .letter-unread-chip { background: rgba(255, 77, 109, 0.2); border: 1px solid rgba(255, 77, 109, 0.4); color: #ff8fa3; font-size: 11px; font-weight: bold; padding: 4px 12px; border-radius: 999px; } .letter-back-link { display: inline-block; font-size: 13px; color: rgba(240, 200, 255, 0.5); text-decoration: none; margin-bottom: 16px; transition: color 0.15s; } .letter-back-link:hover { color: #ffb3d9; } .letter-inbox { display: flex; flex-direction: column; gap: 8px; } .letter-empty { text-align: center; color: rgba(240, 200, 255, 0.4); font-size: 14px; padding: 40px 0; } .letter-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.12); text-decoration: none; transition: all 0.15s; cursor: pointer; } .letter-item:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 160, 200, 0.28); transform: translateY(-1px); } .letter-item--unread { border-color: rgba(255, 143, 171, 0.3); background: rgba(255, 143, 171, 0.07); } .letter-item--read { opacity: 0.65; } .letter-item-icon { font-size: 24px; flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.07); border-radius: 12px; } .letter-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .letter-item-top { display: flex; align-items: center; gap: 8px; } .letter-item-from { font-size: 11px; color: rgba(240, 200, 255, 0.55); font-weight: bold; letter-spacing: 0.3px; } .letter-item-new { background: var(--accent-1, #ff8fab); color: white; font-size: 9px; font-weight: bold; padding: 1px 6px; border-radius: 999px; } .letter-item-subject { font-size: 14px; color: #f0e0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .letter-item--unread .letter-item-subject { font-weight: bold; color: #fff; } .letter-item-arrow { font-size: 18px; color: rgba(240, 200, 255, 0.3); flex-shrink: 0; } /* ===== 手紙詳細 ===== */ .letter-detail { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 20px; overflow: hidden; } .letter-detail-header { padding: 24px 28px 20px; border-bottom: 1px solid rgba(255, 160, 200, 0.12); background: rgba(255, 143, 171, 0.06); } .letter-detail-sender { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .letter-detail-icon { font-size: 32px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border-radius: 14px; flex-shrink: 0; } .letter-detail-from { font-size: 12px; color: rgba(240, 200, 255, 0.6); font-weight: bold; margin: 0; } .letter-detail-date { font-size: 11px; color: rgba(240, 200, 255, 0.35); margin: 3px 0 0; } .letter-detail-subject { font-size: 18px; font-weight: bold; color: #fff; margin: 0; } .letter-detail-body { padding: 28px; font-size: 15px; line-height: 1.9; color: rgba(240, 220, 255, 0.9); } .letter-detail-body p { margin: 0 0 1em; } .letter-detail-footer { padding: 20px 28px 24px; border-top: 1px solid rgba(255, 160, 200, 0.12); display: flex; align-items: center; gap: 16px; } .letter-detail-chara { flex-shrink: 0; } .letter-detail-chara-img { height: 64px; width: auto; } .letter-detail-sig { font-size: 13px; color: rgba(240, 200, 255, 0.5); font-style: italic; margin: 0; } /* ===================== 設定：パートナーカラー ===================== */ .settings-section-sub { font-size: 12px; color: rgba(240, 200, 255, 0.5); margin: -6px 0 16px; } .egg-color-setting { display: flex; gap: 12px; flex-wrap: wrap; } .egg-color-opt { flex: 1; min-width: 100px; background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 160, 200, 0.2); border-radius: 16px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s ease; font-family: inherit; color: rgba(240, 200, 255, 0.7); } .egg-color-opt:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 160, 200, 0.45); transform: translateY(-2px); } .egg-color-opt--active { background: rgba(255, 143, 171, 0.12); border-color: var(--accent-1, #ff8fab); box-shadow: 0 0 12px var(--accent-glow, rgba(255, 143, 171, 0.3)); color: #fff; } .egg-color-opt-img-wrap { position: relative; display: inline-flex; } .egg-color-opt-img { height: 64px; width: auto; display: block; } .egg-color-opt-check { position: absolute; bottom: -2px; right: -6px; background: var(--accent-1, #ff8fab); color: white; font-size: 10px; font-weight: bold; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .egg-color-opt-label { font-size: 11px; font-weight: bold; text-align: center; } .egg-color-opt-desc { font-size: 10px; color: rgba(240, 200, 255, 0.5); text-align: center; } .egg-color-opt-room { font-size: 9px; color: rgba(200, 180, 255, 0.38); text-align: center; margin-top: 1px; } /* ===================== タスク フォーム / 詳細ページ ===================== */ .tf-page { min-height: calc(100vh - 90px); display: flex; align-items: center; justify-content: center; padding: 32px 20px 60px; box-sizing: border-box; } .tf-card { width: 100%; max-width: 480px; padding: 36px 32px 32px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(32px) saturate(1.6); -webkit-backdrop-filter: blur(32px) saturate(1.6); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(200, 140, 255, 0.08); color: #f5e6ff; } .tf-card-header { text-align: center; margin-bottom: 28px; } .tf-chara-say { font-size: 12px; color: rgba(255, 200, 240, 0.65); margin: 0 0 8px; } .tf-title { font-size: 20px; font-weight: bold; color: #f5c6ff; margin: 0 0 6px; text-shadow: 0 0 16px rgba(200, 120, 255, 0.4); } .tf-task-name-preview { font-size: 13px; color: rgba(240, 200, 255, 0.5); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-errors { background: rgba(255, 80, 100, 0.12); border: 1px solid rgba(255, 100, 130, 0.3); border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; } .tf-errors p { margin: 0; font-size: 13px; color: #ff8fa3; } .tf-group { margin-bottom: 16px; } .tf-label { display: block; font-size: 12px; font-weight: bold; color: rgba(240, 200, 255, 0.75); margin-bottom: 6px; } .tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .tf-row .tf-group { margin-bottom: 0; } /* selectのドロップダウン矢印 */ .tf-select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,200,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px !important; } .tf-check { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 12px 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 12px; } .tf-checkbox { width: 18px; height: 18px; accent-color: #c96fff; cursor: pointer; flex-shrink: 0; } .tf-check-label { font-size: 14px; color: rgba(240, 200, 255, 0.8); cursor: pointer; margin: 0; font-weight: normal; } .tf-footer-link { text-align: center; margin-top: 20px; } .tf-back-link { font-size: 13px; color: rgba(200, 160, 255, 0.6); text-decoration: none; transition: color 0.2s; } .tf-back-link:hover { color: rgba(230, 190, 255, 0.9); } /* show ページ */ .tf-detail-body { margin-bottom: 28px; } .tf-detail-title { font-size: 22px; font-weight: bold; color: #f5e6ff; margin: 0 0 16px; line-height: 1.6; text-align: center; } .tf-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; } .tf-status-chip { display: inline-block; font-size: 12px; font-weight: bold; padding: 3px 12px; border-radius: 999px; } .tf-done-chip { background: rgba(80, 220, 130, 0.15); border: 1px solid rgba(80, 220, 150, 0.35); color: #6edda0; } .tf-notdone-chip { background: rgba(255, 200, 60, 0.1); border: 1px solid rgba(255, 200, 80, 0.3); color: #ffd060; } .tf-detail-date { text-align: center; font-size: 13px; color: rgba(240, 200, 255, 0.6); margin: 0; } .tf-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; } .tf-detail-actions form { margin: 0; display: block; } .tf-edit-btn { display: block; text-align: center; padding: 12px; border-radius: 999px; font-size: 14px; font-weight: bold; text-decoration: none; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 160, 200, 0.3); color: #f5e6ff; transition: 0.15s; box-shadow: none; } .tf-edit-btn:hover { background: rgba(255, 182, 213, 0.18); transform: translateY(-1px); } .tf-delete-btn { display: block; width: 100%; text-align: center; padding: 12px; border-radius: 999px; font-size: 14px; font-weight: bold; background: rgba(255, 60, 90, 0.1); border: 1px solid rgba(255, 100, 130, 0.3); color: #ff8fa3; cursor: pointer; box-shadow: none; transition: 0.15s; } .tf-delete-btn:hover { background: rgba(255, 60, 90, 0.22); transform: translateY(-1px); } /* ===================== LP (Landing Page) ===================== */ /* ── base ── */ .lp-body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; /* ③ aurora 背景（固定グラデーションでセクション跨ぎ） */ background: radial-gradient(ellipse 120% 55% at 8% 8%, rgba(201, 111, 255, 0.22) 0%, transparent 52%), radial-gradient(ellipse 80% 50% at 92% 32%, rgba(255, 143, 172, 0.14) 0%, transparent 50%), radial-gradient(ellipse 70% 60% at 50% 85%, rgba(90, 130, 255, 0.11) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 15% 65%, rgba(110, 221, 160, 0.07) 0%, transparent 50%), #0d0719; background-attachment: fixed; color: #f5e6ff; scroll-behavior: smooth; } .lp-section-inner { max-width: 960px; margin: 0 auto; padding: 0 24px; } .lp-section-title { text-align: center; font-size: 26px; font-weight: 800; margin: 0 0 40px; color: #fff; letter-spacing: 0.02em; } /* ── nav ── */ .lp-nav { position: sticky; top: 0; z-index: 100; background: rgba(13, 7, 25, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 160, 200, 0.12); } .lp-nav-inner { max-width: 960px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; } /* ⑩ ロゴを大きく */ .lp-nav-logo { height: 78px; width: auto; object-fit: contain; } /* ⑧ アンカーリンク */ .lp-nav-anchors { display: flex; align-items: center; gap: 4px; } .lp-nav-anchor { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; transition: color 0.15s, background 0.15s; } .lp-nav-anchor:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .lp-nav-links { display: flex; align-items: center; gap: 12px; } .lp-nav-login { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px; padding: 6px 14px; border-radius: 999px; transition: color 0.15s; } .lp-sub-br { display: none; } .lp-nav-login:hover { color: #fff; } .lp-nav-cta { background: linear-gradient(135deg, #ff8fac 0%, #c96fff 100%); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; padding: 8px 20px; border-radius: 999px; box-shadow: 0 4px 16px rgba(201, 111, 255, 0.4); transition: transform 0.15s, box-shadow 0.15s; } .lp-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(201, 111, 255, 0.55); } /* ── hero ── */ .lp-hero { padding: 72px 0 80px; background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(201, 111, 255, 0.12) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 20% 70%, rgba(255, 143, 172, 0.1) 0%, transparent 60%); } .lp-hero-inner { max-width: 960px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .lp-hero-eyebrow { font-size: 13px; color: #ff8fac; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 12px; text-transform: uppercase; } .lp-hero-title { font-size: 40px; font-weight: 900; line-height: 1.3; margin: 0 0 20px; color: #fff; } .lp-hero-accent { background: linear-gradient(135deg, #ff8fac, #c96fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-hero-sub { font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, 0.72); margin: 0 0 32px; } .lp-hero-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .lp-btn-primary { display: inline-block; background: linear-gradient(135deg, #ff8fac 0%, #c96fff 100%); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; padding: 14px 30px; border-radius: 999px; box-shadow: 0 6px 24px rgba(201, 111, 255, 0.45); transition: transform 0.15s, box-shadow 0.15s; } .lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(201, 111, 255, 0.6); color: #fff; } .lp-btn-primary.lp-btn-large { font-size: 18px; padding: 18px 44px; } .lp-btn-ghost { display: inline-block; color: rgba(255, 255, 255, 0.75); font-size: 14px; text-decoration: none; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); transition: all 0.15s; } .lp-btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); } .lp-hero-note { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin: 12px 0 0; } /* hero room mockup */ .lp-hero-visual { position: relative; } .lp-hero-room { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 160, 200, 0.2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 111, 255, 0.15); aspect-ratio: 4/3; background: #1a0d2e; } .lp-room-bg { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-room-chara { position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%); animation: lp-float 3s ease-in-out infinite; } @keyframes lp-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } .lp-room-chara-img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(201, 111, 255, 0.5)); } .lp-room-badge { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; animation: lp-pop 0.4s ease 0.8s both; } @keyframes lp-pop { from { opacity: 0; transform: scale(0.8) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── features ── */ .lp-features { padding: 48px 0; background: transparent; } .lp-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .lp-feature-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 20px; padding: 32px 24px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .lp-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(201, 111, 255, 0.2); border-color: rgba(201, 111, 255, 0.35); } .lp-feature-ico { display: block; font-size: 40px; margin-bottom: 16px; } .lp-feature-img-wrap { display: flex; justify-content: center; align-items: center; height: 150px; margin-bottom: 16px; } .lp-feature-mini-browser { width: 100%; max-width: 225px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .lp-feature-mini-shot { width: 100%; height: 110px; object-fit: cover; object-position: top center; display: block; } .lp-feature-evo-mini { display: flex; align-items: flex-end; gap: 6px; justify-content: center; } .lp-feature-evo-arrow { color: rgba(255, 143, 172, 0.6); font-size: 18px; line-height: 1; padding-bottom: 6px; } .lp-feature-evo-img { width: 52px; height: 66px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(255, 143, 172, 0.35)); } .lp-feature-evo-img--final { width: 72px; height: 92px; } .lp-feature-gacha-img { width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(201, 111, 255, 0.45)); } .lp-feature-title { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 10px; } .lp-feature-desc { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.65); margin: 0; } .lp-feature-bullets { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; } .lp-feature-bullets li { font-size: 13px; color: rgba(255, 220, 245, 0.85); font-weight: 600; display: flex; align-items: center; gap: 8px; } .lp-feature-bullets li::before { content: "✔"; flex-shrink: 0; color: rgba(255, 140, 220, 0.9); font-size: 12px; font-weight: 700; } /* ── how it works ── */ .lp-how { padding: 48px 0; background: transparent; } .lp-how-steps { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 56px; flex-wrap: wrap; } .lp-how-step { display: flex; align-items: flex-start; gap: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 18px; padding: 24px 20px; max-width: 230px; flex: 1; min-width: 180px; } .lp-how-num { font-size: 28px; font-weight: 900; background: linear-gradient(135deg, #ff8fac, #c96fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; flex-shrink: 0; } .lp-how-content h3 { font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 6px; } .lp-how-content p { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.6; } .lp-how-arrow { font-size: 24px; color: rgba(255, 160, 200, 0.4); flex-shrink: 0; align-self: center; } /* evolution strip */ .lp-evo-strip { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 160, 200, 0.12); border-radius: 20px; padding: 24px 20px; } .lp-evo-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .lp-evo-img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(201, 111, 255, 0.35)); } .lp-evo-name { font-size: 11px; color: rgba(255, 255, 255, 0.7); font-weight: 600; } .lp-evo-lv { font-size: 10px; color: #ff8fac; font-weight: 700; background: rgba(255, 143, 172, 0.12); padding: 2px 7px; border-radius: 999px; } .lp-evo-arrow { font-size: 20px; color: rgba(255, 160, 200, 0.35); } /* ── CTA ── */ .lp-cta { padding: 48px 0; background: transparent; } .lp-cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .lp-cta-chara { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(201, 111, 255, 0.5)); animation: lp-float 3s ease-in-out infinite; } .lp-cta-title { font-size: 28px; font-weight: 900; color: #fff; margin: 0; line-height: 1.4; } .lp-cta-sub { font-size: 14px; color: rgba(255, 255, 255, 0.55); margin: 0; } /* ⑦ CTA 感情コピー */ .lp-cta-quote { font-size: 15px; color: rgba(255, 255, 255, 0.5); font-style: italic; margin: -4px 0 4px; letter-spacing: 0.01em; } .lp-cta-closing { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; line-height: 1.7; color: rgba(255, 255, 255, 0.8); margin: 12px 0 24px; letter-spacing: 0.02em; } .lp-cta-trust { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin: -4px 0 0; } .lp-cta-trust span { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.5); } .lp-cta-micro { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin: -2px 0 4px; letter-spacing: 0.02em; } .lp-cta-note { font-size: 12px; color: rgba(255, 255, 255, 0.3); margin: -4px 0 0; } /* ⑤ 進化タイムライン（説明欄内）*/ .lp-evo-timeline { margin-top: 20px; display: flex; flex-direction: column; gap: 0; } .lp-evo-tl-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-left: 2px solid rgba(255, 160, 200, 0.2); margin-left: 20px; position: relative; transition: background 0.15s; } .lp-evo-tl-item::before { content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 160, 200, 0.3); border: 2px solid rgba(255, 160, 200, 0.5); } .lp-evo-tl-item--current { border-left-color: #ff8fac; background: rgba(255, 143, 172, 0.07); border-radius: 0 10px 10px 0; } .lp-evo-tl-item--current::before { background: #ff8fac; border-color: #ff8fac; box-shadow: 0 0 8px rgba(255, 143, 172, 0.6); } .lp-evo-tl-item--done::before { background: rgba(110, 221, 160, 0.5); border-color: #6edda0; } .lp-evo-tl-item--locked { opacity: 0.45; } .lp-evo-tl-img-wrap { flex-shrink: 0; } .lp-evo-tl-img { width: 36px; height: 36px; object-fit: contain; } .lp-evo-tl-item--locked .lp-evo-tl-img { opacity: 0.45; } .lp-evo-tl-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lp-evo-tl-name { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.85); } .lp-evo-tl-lv { font-size: 11px; color: #ff8fac; font-weight: 700; background: rgba(255, 143, 172, 0.1); padding: 1px 7px; border-radius: 999px; } .lp-evo-tl-now { font-size: 11px; font-weight: 800; color: #ff8fac; } /* ── tech stack ── */ .lp-tech { padding: 60px 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: transparent; } .lp-tech-divider { text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.1em; margin-bottom: 40px; } .lp-tech-title { text-align: center; font-size: 22px; font-weight: 800; color: rgba(255, 255, 255, 0.85); margin: 0 0 28px; } .lp-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 32px; } .lp-tech-item { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.1); border-radius: 12px; padding: 14px 16px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8); } .lp-tech-ico { font-size: 20px; } .lp-tech-features { text-align: center; margin-bottom: 32px; } .lp-tech-features-title { font-size: 13px; color: rgba(255, 255, 255, 0.4); margin: 0 0 12px; letter-spacing: 0.05em; } .lp-tech-feature-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .lp-tech-tag { background: rgba(201, 111, 255, 0.1); border: 1px solid rgba(201, 111, 255, 0.25); color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; } .lp-github-btn { display: flex; align-items: center; gap: 8px; margin: 0 auto; color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); padding: 12px 24px; border-radius: 999px; transition: all 0.15s; width: fit-content; } .lp-github-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } /* ── footer ── */ .lp-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 48px 24px 28px; background: rgba(0, 0, 0, 0.25); } .lp-footer-inner { max-width: 960px; margin: 0 auto; display: flex; gap: 48px; align-items: flex-start; margin-bottom: 36px; flex-wrap: wrap; } .lp-footer-brand { flex: 1; min-width: 220px; } .lp-footer-logo { height: 40px; width: auto; object-fit: contain; margin-bottom: 12px; display: block; } .lp-footer-links { display: flex; gap: 40px; flex-wrap: wrap; } .lp-footer-link-col { display: flex; flex-direction: column; gap: 8px; } .lp-footer-link-head { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; } .lp-footer-link { font-size: 13px; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.15s; } .lp-footer-link:hover { color: rgba(255, 255, 255, 0.9); } /* ── responsive ── */ @media (max-width: 720px) { .lp-hero-inner { grid-template-columns: 1fr; } .lp-hero-visual { order: -1; } .lp-hero-title { font-size: 28px; } .lp-features-grid { grid-template-columns: 1fr; } .lp-tech-grid { grid-template-columns: 1fr 1fr; } .lp-how-steps { flex-direction: column; align-items: stretch; } .lp-how-arrow { transform: rotate(90deg); align-self: center; } .lp-evo-strip { gap: 4px; padding: 16px 12px; } .lp-evo-img { width: 44px; height: 44px; } .lp-cta-title { font-size: 22px; } } /* ───────────────────────────────────── HERO 2カラムレイアウト ───────────────────────────────────── */ .lp-hero2-2col { position: relative; z-index: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 9fr 11fr; gap: 40px; align-items: center; } .lp-hero2-top { position: relative; z-index: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px 24px; } .lp-hero2-top-row { display: flex; align-items: center; gap: 28px; margin-top: 16px; } .lp-hero2-copy { display: flex; flex-direction: column; gap: 12px; } /* ── Hero 新レイアウト ── */ .lp-hero2-center { position: relative; z-index: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .lp-hero2-chara-wrap--sm { margin: 0; } .lp-hero2-chara--sm { width: 130px !important; height: 130px !important; } .lp-hero2-tagline--center { text-align: center; font-size: clamp(1.6rem, 3.5vw, 2.4rem); } .lp-hero2-sub--center { text-align: center; } .lp-hero2-btns--center { justify-content: center; } .lp-hero2-note--center { text-align: center; } .lp-hero2-browser-wrap { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: -8px auto 0; padding: 0 24px; } .lp-hero2-frame-shell--wide { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } .lp-hero2-frame--wide { width: 100%; border-radius: 10px; } .lp-slider-track--wide { height: 0 !important; padding-top: 56.25%; overflow: hidden; } .lp-hero2-left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .lp-hero2-right { position: relative; z-index: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .lp-hero2-frame { width: 100%; } /* 2カラムレイアウト内では右カラムとシェルを調整 */ .lp-hero2-2col .lp-hero2-right { padding: 0; align-items: stretch; gap: 3px; } .lp-hero2-2col .lp-hero2-frame-shell { width: 120%; margin-left: calc(-20% + 3px); margin-top: 4px; } /* スクリーンショットを縦6%拡大 */ .lp-hero2-2col .lp-slider-track { aspect-ratio: 2934 / 1772; } /* eyebrowをリボンちゃんの中心に揃える */ .lp-hero2-2col .lp-hero2-eyebrow { align-self: center; margin-left: 37px; } /* インジケーターをブラウザフレーム真下に揃える */ .lp-hero2-2col .lp-slider-dots { width: 100%; justify-content: center; margin-top: 8px; } .lp-hero2-frame-hint { font-size: 11px; color: rgba(255, 255, 255, 0.3); } .lp-hero2-proof { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 0; } .lp-hero2-proof-stars { color: #ffd166; font-size: 15px; letter-spacing: 3px; } .lp-hero2-proof-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; } .lp-hero2-proof-items span { font-size: 11px; color: rgba(255, 255, 255, 0.65); white-space: nowrap; } /* ───────────────────────────────────── スクリーン明度 +18%（③） ───────────────────────────────────── */ .lp-screen-room-bg { filter: brightness(1.18); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .lp-screen-room-bg--deco { filter: brightness(0.72); } /* ───────────────────────────────────── ④ GitHub stats 数字カード ───────────────────────────────────── */ .lp-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } .lp-stat-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 160, 200, 0.13); border-radius: 16px; padding: 18px 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; transition: transform 0.2s, border-color 0.2s; } .lp-stat-card:hover { transform: translateY(-3px); border-color: rgba(201, 111, 255, 0.3); } .lp-stat-num { font-size: 26px; font-weight: 900; background: linear-gradient(135deg, #ff8fac, #c96fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .lp-stat-label { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 600; } /* ───────────────────────────────────── 拡大ヒント (zoom hint) ───────────────────────────────────── */ .lp-frame-zoom-hint { position: absolute; bottom: 8px; right: 10px; font-size: 11px; color: rgba(255, 255, 255, 0.7); pointer-events: none; opacity: 0; transition: opacity 0.2s; } .lp-browser-frame:hover .lp-frame-zoom-hint, .lp-hero2-frame:hover .lp-frame-zoom-hint { opacity: 1; } /* ───────────────────────────────────── ライトボックス ───────────────────────────────────── */ .lp-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .lp-lightbox--open { opacity: 1; pointer-events: all; } .lp-lightbox-backdrop { position: absolute; inset: 0; background: rgba(5, 2, 15, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .lp-lightbox-content { position: relative; z-index: 1; width: 90vw; max-width: 900px; transform: scale(0.93) translateY(12px); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .lp-lightbox--open .lp-lightbox-content { transform: scale(1) translateY(0); } /* ライトボックス内スクリーン高さを拡大 */ .lp-lightbox-content .lp-browser-screen, .lp-lightbox-content .lp-screen--box, .lp-lightbox-content .lp-screen--deco, .lp-lightbox-content .lp-screen--evo, .lp-lightbox-content .lp-screen--dash2, .lp-lightbox-content .lp-screen--shot, .lp-lightbox-content .lp-screen--gacha, .lp-lightbox-content .lp-screen--tap { height: 480px !important; } .lp-lightbox-content .lp-screen-chara { height: 160px !important; } .lp-lightbox-content .lp-mockbox-img { width: 160px !important; height: 160px !important; } .lp-lightbox-content .lp-mockevo-img { width: 64px !important; height: 64px !important; } .lp-lightbox-close { position: fixed; top: 20px; right: 20px; z-index: 2; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 16px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .lp-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); } /* ───────────────────────────────────── ⑤ フッター・リボンちゃん ───────────────────────────────────── */ .lp-footer-chara-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 16px; } .lp-footer-chara { width: 52px; height: 52px; object-fit: contain; object-position: bottom; filter: brightness(1.05); } .lp-footer-chara-bubble { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 12px 12px 12px 4px; padding: 6px 12px; font-size: 12px; color: rgba(255, 255, 255, 0.6); font-weight: 600; white-space: nowrap; margin-bottom: 4px; } /* ───────────────────────────────────── screens 背景透明化 ───────────────────────────────────── */ .lp-screens { padding: 48px 0; background: transparent; } /* ───────────────────────────────────── HERO v2（超大キャラ・センター縦並び） ───────────────────────────────────── */ .lp-hero2 { position: relative; overflow: hidden; padding: 52px 0 0; display: flex; flex-direction: column; align-items: center; } /* 背景オーブ */ .lp-hero2-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .lp-hero2-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; } .lp-hero2-orb--1 { width: 520px; height: 520px; background: #c96fff; top: -100px; left: 50%; transform: translateX(-50%); } .lp-hero2-orb--2 { width: 300px; height: 300px; background: #ff8fac; top: 60px; right: -60px; } .lp-hero2-orb--3 { width: 200px; height: 200px; background: #6edda0; top: 200px; left: -40px; } /* ② eyebrow ラベル */ .lp-hero2-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; } .lp-hero2-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #ff8fac, #c96fff); display: inline-block; } /* ① ribbonchan キャラ */ .lp-hero2-chara-wrap { position: relative; margin-bottom: -18px; margin-top: 16px; align-self: center; margin-left: 52px; } .lp-hero2-chara { width: 240px; height: 240px; object-fit: contain; object-position: bottom; animation: lp-float 3.2s ease-in-out infinite; filter: brightness(1.08) contrast(1.06) drop-shadow(0 6px 16px rgba(255, 143, 172, 0.32)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.18)) drop-shadow(0 0 28px rgba(201, 111, 255, 0.14)); } .lp-hero2-chara-glow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 160px; height: 30px; background: radial-gradient(ellipse at center, rgba(201, 111, 255, 0.2) 0%, transparent 70%); filter: blur(10px); animation: lp-float 3.2s ease-in-out infinite; } /* テキスト（2カラム内では使わない、互換用） */ .lp-hero2-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 40px; } .lp-hero2-logo { height: 64px; width: auto; object-fit: contain; } .lp-hero2-tagline { font-size: 38px; font-weight: 900; line-height: 1.3; margin: 0; color: #fff; letter-spacing: -0.01em; } .lp-hero2-accent { background: linear-gradient(135deg, #ff8fac 0%, #c96fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lp-hero2-sub { font-size: 15px; color: rgba(255, 255, 255, 0.62); line-height: 1.7; margin: 0; max-width: 500px; } .lp-hero2-sub-2nd { display: block; margin-top: 0.5em; } .lp-hero2-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; } .lp-hero2-note { font-size: 12px; color: rgba(255, 255, 255, 0.35); margin: -4px 0 0; } /* ブラウザモックアップ（hero内） */ .lp-hero2-mockup-wrap { position: relative; z-index: 1; width: 100%; max-width: 820px; } /* スクロールヒント */ .lp-hero2-scroll { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.45); animation: lp-fadein 1s ease 1.2s both; } .lp-hero2-scroll-arrow { animation: lp-bounce 1.5s ease-in-out infinite; } @keyframes lp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @keyframes lp-fadein { from { opacity: 0; } to { opacity: 1; } } /* ───────────────────────────────────── ブラウザフレーム共通 ───────────────────────────────────── */ .lp-browser-frame { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 160, 200, 0.1); } .lp-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .lp-browser-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; } .lp-browser-dot:nth-child(1) { background: #ff6b6b; } .lp-browser-dot:nth-child(2) { background: #ffd060; } .lp-browser-dot:nth-child(3) { background: #6edda0; } .lp-browser-url { flex: 1; background: rgba(255, 255, 255, 0.07); border-radius: 6px; padding: 3px 10px; font-size: 11px; color: rgba(255, 255, 255, 0.35); font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 8px; } .lp-browser-frame--sm { flex: 1; min-width: 0; } /* ④ 大きいフレーム */ .lp-browser-frame--lg { flex: 1.1; min-width: 0; } .lp-browser-frame--lg .lp-browser-screen { height: 340px; } .lp-browser-frame--lg .lp-screen--box, .lp-browser-frame--lg .lp-screen--deco { height: 340px; } .lp-browser-frame--lg .lp-screen--evo { height: 340px; } /* ── ダッシュボードスクリーン（hero） ── */ .lp-browser-screen { position: relative; overflow: hidden; } .lp-screen--dashboard { height: 340px; } .lp-screen-room-bg { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.7; } .lp-screen-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 10px; gap: 8px; } .lp-screen-stat { width: 100%; display: flex; justify-content: center; gap: 12px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 700; color: #fff; } .lp-screen-chara-wrap { flex: 1; display: flex; align-items: center; justify-content: center; } .lp-screen-chara { height: 80px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(201, 111, 255, 0.5)); animation: lp-float 3s ease-in-out infinite; } .lp-screen-tasks { width: 100%; display: flex; flex-direction: column; gap: 4px; } .lp-screen-task { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 8px; padding: 6px 10px; font-size: 11px; color: rgba(255, 255, 255, 0.8); } .lp-screen-task--done { color: rgba(255, 255, 255, 0.45); text-decoration: line-through; } /* ───────────────────────────────────── スクリーンショットセクション（App Storeスタイル） ───────────────────────────────────── */ .lp-screens { padding: 48px 0; background: rgba(255, 255, 255, 0.015); } /* ── 旧 lp-screen-row（後方互換で残す） ── */ .lp-screen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 80px; } .lp-screen-row:last-child { margin-bottom: 0; } .lp-screen-row--rev .lp-screen-info { order: 2; } .lp-screen-row--rev .lp-browser-frame { order: 1; } /* ── 2×2 グリッド ── */ .lp-screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; margin-top: 40px; } .lp-screen-card { display: flex; flex-direction: column; gap: 14px; } .lp-screen-card-hd { display: flex; align-items: baseline; gap: 10px; } /* グリッド用 frame（ブラウザ枠の高さを統一） */ .lp-browser-frame--grid .lp-browser-screen, .lp-browser-frame--grid .lp-screen--box, .lp-browser-frame--grid .lp-screen--evo, .lp-browser-frame--grid .lp-screen--deco { height: 210px; } .lp-screen-num { font-size: 36px; font-weight: 900; background: linear-gradient(135deg, #ff8fac, #c96fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin: 0; flex-shrink: 0; } .lp-screen-info-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 12px; } .lp-screen-info-desc { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.62); margin: 0 0 16px; } .lp-screen-tags { display: flex; gap: 6px; flex-wrap: wrap; } .lp-screen-tags span { font-size: 11px; font-weight: 700; background: rgba(201, 111, 255, 0.12); border: 1px solid rgba(201, 111, 255, 0.25); color: rgba(201, 111, 255, 0.9); padding: 3px 10px; border-radius: 999px; } /* ───────────────────────────────────── 実スクリーンショット表示 ───────────────────────────────────── */ .lp-screen--shot { height: 340px; padding: 0; } .lp-shot-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .lp-browser-frame--grid .lp-screen--shot { height: 210px; } /* ── Hero Slider ── */ .lp-slider-track { position: relative; width: 100%; aspect-ratio: 2934 / 1672; height: auto; overflow: hidden; } .lp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; cursor: zoom-in; } .lp-slide--active { opacity: 1; } .lp-slide-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .lp-slide-label { position: absolute; bottom: 10px; left: 12px; background: rgba(20,10,40,0.72); color: rgba(255,210,255,0.95); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.05em; backdrop-filter: blur(6px); } .lp-slider-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; } .lp-slider-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,180,230,0.3); cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; } .lp-slider-dot--active { background: rgba(255,140,220,0.95); transform: scale(1.25); } /* ───────────────────────────────────── 05 ガチャモック ───────────────────────────────────── */ .lp-screen--gacha { height: 280px; background: linear-gradient(160deg, #1a0a2e 0%, #0d1a3a 100%); display: flex; align-items: center; justify-content: center; } .lp-mock-gacha-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; } .lp-mock-gacha-machine { height: 90px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(201, 111, 255, 0.6)); } .lp-mock-gacha-btns { display: flex; gap: 8px; } .lp-mock-gacha-btn { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px; } .lp-mock-gacha-btn--single { background: rgba(255, 143, 172, 0.2); border: 1px solid rgba(255, 143, 172, 0.5); color: #ffb3cb; } .lp-mock-gacha-btn--ten { background: linear-gradient(135deg, rgba(201, 111, 255, 0.3), rgba(255, 143, 172, 0.3)); border: 1px solid rgba(201, 111, 255, 0.6); color: #e8b3ff; } .lp-mock-gacha-coins { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin: 0; } /* ───────────────────────────────────── 06 リボンキャッチモック ───────────────────────────────────── */ .lp-screen--tap { height: 280px; background: linear-gradient(160deg, #0f0622 0%, #1a0d35 100%); } .lp-mock-tap-wrap { display: flex; flex-direction: column; height: 100%; padding: 10px 12px; gap: 8px; } .lp-mock-tap-header { display: flex; justify-content: space-between; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; } .lp-mock-tap-timer { color: #ff8fac; } .lp-mock-tap-score { color: #e8b3ff; } .lp-mock-tap-field { flex: 1; position: relative; } .lp-mock-tap-ribbon { position: absolute; font-size: 22px; cursor: pointer; animation: lp-tap-float 2.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(255, 143, 172, 0.7)); } .lp-mock-tap-ribbon:nth-child(2) { animation-delay: -0.6s; } .lp-mock-tap-ribbon:nth-child(3) { animation-delay: -1.2s; } .lp-mock-tap-ribbon:nth-child(4) { animation-delay: -1.8s; } @keyframes lp-tap-float { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-8px) rotate(8deg); } } .lp-mock-tap-hint { font-size: 11px; color: rgba(255, 255, 255, 0.45); text-align: center; margin: 0; } .lp-mock-games-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px 4px; } .lp-mock-game-chip { background: rgba(255,160,230,0.12); border: 1px solid rgba(255,160,220,0.28); border-radius: 20px; color: rgba(255,220,255,0.9); font-size: 11px; padding: 4px 10px; white-space: nowrap; } /* ───────────────────────────────────── 08 モバイルカード（2カラム span） ───────────────────────────────────── */ .lp-screen-card--wide { grid-column: span 2; } .lp-mobile-exp-wrap { display: flex; gap: 40px; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 160, 200, 0.12); border-radius: 20px; padding: 32px 36px; } .lp-mobile-exp-desc { flex: 1; } .lp-mobile-exp-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 10px; } .lp-mobile-exp-text { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.62); margin: 0 0 16px; } .lp-mobile-exp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .lp-mobile-exp-list li { font-size: 14px; color: rgba(255, 255, 255, 0.8); } .lp-phone-frame-wrap { flex-shrink: 0; display: flex; justify-content: center; } .lp-phone-frame { width: 160px; height: 280px; background: linear-gradient(160deg, #1a0a2e, #0d1a3a); border: 3px solid rgba(201, 111, 255, 0.4); border-radius: 28px; overflow: hidden; position: relative; box-shadow: 0 0 30px rgba(201, 111, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .lp-phone-notch { width: 50px; height: 10px; background: rgba(0, 0, 0, 0.6); border-radius: 999px; margin: 8px auto 0; } .lp-phone-content { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 8px; height: calc(100% - 26px); } .lp-phone-room { background: linear-gradient(135deg, rgba(255, 143, 172, 0.15), rgba(201, 111, 255, 0.15)); border-radius: 12px; padding: 8px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .lp-phone-chara { height: 40px; object-fit: contain; } .lp-phone-room-label { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.8); margin: 0; } .lp-phone-tasks { display: flex; flex-direction: column; gap: 5px; flex: 1; } .lp-phone-task { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.12); border-radius: 8px; padding: 5px 8px; font-size: 10px; color: rgba(255, 255, 255, 0.75); } .lp-phone-task--done { color: rgba(255, 255, 255, 0.35); text-decoration: line-through; } .lp-phone-gacha-banner { background: linear-gradient(135deg, rgba(201, 111, 255, 0.3), rgba(255, 143, 172, 0.3)); border: 1px solid rgba(201, 111, 255, 0.4); border-radius: 10px; padding: 7px 10px; font-size: 10px; font-weight: 700; color: #e8b3ff; text-align: center; flex-shrink: 0; } /* スクリーン内コンテンツ：ダッシュボード（小） */ .lp-screen--dash2 { height: 280px; } /* スクリーン内コンテンツ：BOX */ .lp-screen--box { height: 280px; background: linear-gradient(160deg, #1a0d2e 0%, #0d0719 100%); display: flex; align-items: center; justify-content: center; } .lp-mockbox-panel { width: 100%; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .lp-mockbox-title { font-size: 13px; font-weight: 700; color: #fff; margin: 0; } .lp-mockbox-img-wrap { display: flex; justify-content: center; } .lp-mockbox-img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(201, 111, 255, 0.5)); } .lp-mockbox-float { animation: lp-float 2.8s ease-in-out infinite; } .lp-mockbox-btn { background: linear-gradient(135deg, rgba(255, 143, 172, 0.25), rgba(201, 111, 255, 0.25)); border: 1px solid rgba(255, 143, 172, 0.4); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 18px; border-radius: 999px; cursor: pointer; } .lp-mockbox-result { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 10px; padding: 8px 14px; width: 100%; justify-content: center; } .lp-mockbox-ico { font-size: 18px; } .lp-mockbox-label { font-size: 13px; font-weight: 700; color: #fff; } .lp-mockbox-rarity { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; } .lp-mockbox-rarity[data-rarity="good"] { background: rgba(78, 232, 154, 0.2); color: #4ee89a; border: 1px solid rgba(78, 232, 154, 0.35); } .lp-mockbox-rarity[data-rarity="rare"] { background: rgba(122, 180, 255, 0.2); color: #7ab4ff; border: 1px solid rgba(122, 180, 255, 0.35); } .lp-mockbox-rarity[data-rarity="super"] { background: rgba(255, 208, 96, 0.2); color: #ffd060; border: 1px solid rgba(255, 208, 96, 0.35); } /* スクリーン内コンテンツ：進化 */ .lp-screen--evo { height: 280px; background: linear-gradient(160deg, #1a0d2e 0%, #0d0719 100%); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .lp-mockevo-title { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.7); margin: 0; text-align: center; } .lp-mockevo-chain { display: flex; align-items: center; justify-content: center; gap: 3px; flex: 1; flex-wrap: nowrap; } .lp-mockevo-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .lp-mockevo-img { width: 38px; height: 38px; object-fit: contain; } .lp-mockevo-item--current .lp-mockevo-img { filter: drop-shadow(0 0 8px rgba(255, 143, 172, 0.8)); } .lp-mockevo-item--done .lp-mockevo-img { opacity: 0.7; } .lp-mockevo-item--locked .lp-mockevo-img { opacity: 0.28; } .lp-mockevo-badge { font-size: 8px; font-weight: 800; background: linear-gradient(135deg, #ff8fac, #c96fff); color: #fff; padding: 1px 5px; border-radius: 999px; white-space: nowrap; } .lp-mockevo-name { font-size: 9px; color: rgba(255, 255, 255, 0.6); } .lp-mockevo-arrow { font-size: 14px; color: rgba(255, 160, 200, 0.35); flex-shrink: 0; } /* ───────────────────────────────────── GitHub カード（リニューアル） ───────────────────────────────────── */ /* ── ゲームラインナップ（特徴カード内） ── */ .lp-game-lineup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .lp-game-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(255,160,230,0.08); border: 1px solid rgba(255,160,220,0.22); border-radius: 12px; padding: 10px 8px; text-align: center; transition: background 0.2s; } .lp-game-chip:hover { background: rgba(255,160,230,0.15); } .lp-game-chip--soon { background: rgba(120,80,200,0.10); border-color: rgba(160,120,255,0.22); opacity: 0.72; } .lp-game-chip-ico { font-size: 1.3rem; } .lp-game-chip-name { font-size: 11px; font-weight: 700; color: rgba(255,220,255,0.95); } .lp-game-chip-sub { font-size: 10px; color: rgba(200,170,230,0.65); } /* ── GitHubカード・ロゴ ── */ .lp-github-logo-wrap { text-align: center; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px; } .lp-github-logo-big { width: 220px; max-width: 80%; filter: drop-shadow(0 0 20px rgba(200,100,255,0.35)); } .lp-github-logo-tagline { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.18em; color: rgba(200,170,255,0.55); text-transform: uppercase; } .lp-github-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; } .lp-github-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .lp-github-card-left { display: flex; align-items: center; gap: 16px; } .lp-github-ico { color: rgba(255, 255, 255, 0.75); flex-shrink: 0; } .lp-github-repo { font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 4px; font-family: monospace; } .lp-github-desc { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin: 0 0 8px; } .lp-github-roles { display: flex; gap: 10px; flex-wrap: wrap; } .lp-github-roles span { font-size: 12px; color: rgba(255, 255, 255, 0.55); font-weight: 600; } .lp-github-filecount { background: rgba(201, 111, 255, 0.14); border: 1px solid rgba(201, 111, 255, 0.3); color: #c96fff; font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 999px; white-space: nowrap; align-self: flex-start; } .lp-github-tech-row { display: flex; flex-wrap: wrap; gap: 8px; } .lp-github-tech-tag { font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px; border: 1px solid; } .lp-github-tech-tag--rails { background: rgba(220, 50, 50, 0.1); color: #ff8a8a; border-color: rgba(220, 50, 50, 0.25); } .lp-github-tech-tag--js { background: rgba(255, 208, 96, 0.1); color: #ffd060; border-color: rgba(255, 208, 96, 0.25); } .lp-github-tech-tag--db { background: rgba(78, 180, 255, 0.1); color: #7ab4ff; border-color: rgba(78, 180, 255, 0.25); } .lp-github-tech-tag--css { background: rgba(201, 111, 255, 0.1); color: #c96fff; border-color: rgba(201, 111, 255, 0.25); } .lp-github-tech-tag--char { background: rgba(255, 143, 172, 0.1); color: #ff8fac; border-color: rgba(255, 143, 172, 0.25); } .lp-github-tech-tag--gacha { background: rgba(110, 221, 160, 0.1); color: #6edda0; border-color: rgba(110, 221, 160, 0.25); } .lp-github-tech-tag--room { background: rgba(255, 208, 96, 0.08); color: #ffc850; border-color: rgba(255, 208, 96, 0.2); } .lp-github-tech-tag--auth { background: rgba(255, 255, 255, 0.06); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.12); } .lp-github-link-btn { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; background: linear-gradient(135deg, rgba(255, 143, 172, 0.15), rgba(201, 111, 255, 0.15)); border: 1px solid rgba(201, 111, 255, 0.35); padding: 12px 24px; border-radius: 999px; transition: all 0.15s; align-self: flex-start; } .lp-github-link-btn:hover { background: linear-gradient(135deg, rgba(255, 143, 172, 0.28), rgba(201, 111, 255, 0.28)); border-color: rgba(201, 111, 255, 0.55); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201, 111, 255, 0.25); color: #fff; } /* ───────────────────────────────────── 実際に触ってみる CTA（GitHub カード下） ───────────────────────────────────── */ .lp-try-cta { margin-top: 24px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 143, 172, 0.1), rgba(201, 111, 255, 0.1)); border: 1px solid rgba(201, 111, 255, 0.25); padding: 20px 28px; } .lp-try-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .lp-try-cta-left { display: flex; align-items: center; gap: 14px; } .lp-try-cta-chara { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(255, 143, 172, 0.4)); } .lp-try-cta-label { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 4px; } .lp-try-cta-sub { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin: 0; } .lp-try-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: linear-gradient(135deg, #ff8fac, #c96fff); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(201, 111, 255, 0.35); } .lp-try-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201, 111, 255, 0.5); } /* ───────────────────────────────────── 締めCTA（最終セクション） ───────────────────────────────────── */ .lp-final-cta { padding: 80px 24px; text-align: center; background: linear-gradient(180deg, transparent 0%, rgba(201, 111, 255, 0.06) 50%, transparent 100%); border-top: 1px solid rgba(255, 160, 200, 0.1); border-bottom: 1px solid rgba(255, 160, 200, 0.1); } .lp-final-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; } .lp-final-cta-copy { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; line-height: 1.5; color: #fff; margin: 0; letter-spacing: -0.01em; } .lp-final-cta-note { font-size: 13px; color: rgba(255, 255, 255, 0.4); margin: -12px 0 0; letter-spacing: 0.03em; } /* ───────────────────────────────────── フッター（リニューアル） ───────────────────────────────────── */ .lp-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 48px 24px 32px; text-align: center; } .lp-footer-message { margin-bottom: 28px; } .lp-footer-tagline { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 160, 200, 0.55); margin: -6px 0 10px; text-transform: uppercase; } .lp-footer-msg-main { font-size: 17px; line-height: 2; color: rgba(255, 255, 255, 0.6); font-weight: 500; margin: 0; } .lp-footer-copy { font-size: 12px; color: rgba(255, 255, 255, 0.25); margin: 0; } .lp-footer-br { display: none; } .lp-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 20px; margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .lp-footer-tech-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .lp-footer-tech-item { font-size: 12px; color: rgba(255, 255, 255, 0.45); } .lp-footer-tech-sep { color: rgba(255, 255, 255, 0.2); font-size: 12px; } .lp-footer-tech-link { color: rgba(201, 111, 255, 0.7); text-decoration: none; transition: color 0.2s; } .lp-footer-tech-link:hover { color: #c96fff; } /* ───────────────────────────────────── ① Hero social proof バッジ ───────────────────────────────────── */ .lp-hero2-social { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .lp-hero2-stars { color: #ffd166; font-size: 14px; letter-spacing: 2px; } .lp-hero2-social-text { font-size: 12px; color: rgba(255, 255, 255, 0.55); } /* ───────────────────────────────────── ② Hero右 ガラスカード・光・浮遊 ───────────────────────────────────── */ .lp-hero2-frame-shell { position: relative; animation: lp-float-shell 5s ease-in-out infinite; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45)); } @keyframes lp-float-shell { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-8px) rotate(0.3deg); } 66% { transform: translateY(-4px) rotate(-0.3deg); } } .lp-hero2-frame-glow { position: absolute; border-radius: 24px; pointer-events: none; z-index: 0; } .lp-hero2-frame-glow--1 { inset: -30px; background: radial-gradient(ellipse at 30% 50%, rgba(255, 143, 172, 0.25) 0%, transparent 65%); filter: blur(24px); } .lp-hero2-frame-glow--2 { inset: -20px; background: radial-gradient(ellipse at 80% 30%, rgba(201, 111, 255, 0.2) 0%, transparent 60%); filter: blur(20px); } .lp-hero2-frame-shell .lp-browser-frame { position: relative; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 1px rgba(201, 111, 255, 0.2), 0 8px 32px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.35), 0 30px 80px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 -2px 12px rgba(201, 111, 255, 0.12) inset; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .lp-hero2-frame-shell .lp-browser-frame:hover { transform: scale(1.025); box-shadow: 0 0 0 1px rgba(201, 111, 255, 0.35), 0 12px 40px rgba(0, 0, 0, 0.55), 0 32px 80px rgba(0, 0, 0, 0.4), 0 40px 100px rgba(0, 0, 0, 0.4), 0 2px 0 rgba(255, 255, 255, 0.08) inset, 0 -2px 20px rgba(201, 111, 255, 0.22) inset; } .lp-hero2-frame-deco { position: absolute; font-size: 22px; z-index: 2; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(255, 143, 172, 0.5)); } .lp-hero2-frame-deco--tl { top: -14px; left: -10px; animation: lp-deco-spin 6s linear infinite; } .lp-hero2-frame-deco--br { bottom: -10px; right: -6px; animation: lp-deco-spin 8s linear infinite reverse; } @keyframes lp-deco-spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } /* ───────────────────────────────────── Key Addition: ソーシャルプルーフバナー ───────────────────────────────────── */ .lp-proof { background: rgba(255, 255, 255, 0.03); border-top: 1px solid rgba(255, 160, 200, 0.1); border-bottom: 1px solid rgba(255, 160, 200, 0.1); padding: 28px 0; } .lp-proof-inner { max-width: 960px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; } .lp-proof-left { display: flex; flex-direction: column; align-items: center; gap: 4px; } .lp-proof-stars { color: #ffd166; font-size: 20px; letter-spacing: 3px; } .lp-proof-catch { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin: 0; white-space: nowrap; } .lp-proof-catch strong { color: rgba(255, 255, 255, 0.9); } .lp-proof-divider { width: 1px; height: 48px; background: rgba(255, 160, 200, 0.2); flex-shrink: 0; } .lp-proof-metrics { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; } .lp-proof-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .lp-proof-ico { font-size: 22px; } .lp-proof-label { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.65); white-space: nowrap; } /* ───────────────────────────────────── ① Hero: ゲームHUD & 3色チップ ───────────────────────────────────── */ .lp-hero-hud { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px 16px; backdrop-filter: blur(8px); width: fit-content; } .lp-hud-item { display: flex; align-items: center; gap: 5px; } .lp-hud-label { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.05em; } .lp-hud-val { font-size: 14px; font-weight: 900; color: #fff; font-family: monospace; } .lp-hud-exp { display: flex; align-items: center; gap: 6px; } .lp-hud-exp-label { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; } .lp-hud-bar { width: 60px; height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden; } .lp-hud-fill { height: 100%; background: linear-gradient(90deg, #ff8fab, #e879f9); border-radius: 999px; } .lp-hud-exp-num { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-family: monospace; } .lp-hero-colors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .lp-hero-color-label { font-size: 12px; color: rgba(255, 255, 255, 0.4); } .lp-hero-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); } .lp-hero-chip--pink { background: rgba(255, 143, 171, 0.15); color: #ffaec6; } .lp-hero-chip--purple { background: rgba(192, 100, 255, 0.15); color: #d0a0ff; } .lp-hero-chip--blue { background: rgba(100, 180, 255, 0.15); color: #93c5fd; } /* ───────────────────────────────────── ② キャラクターショーケース（3列カード） ───────────────────────────────────── */ .lp-chara-showcase { padding: 48px 24px 32px; background: linear-gradient(180deg, #0e0526 0%, #110a2a 50%, #0e0526 100%); overflow: hidden; position: relative; } .lp-chara-showcase::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 70% 60%, rgba(255, 100, 200, 0.08) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 30% 50%, rgba(150, 80, 255, 0.07) 0%, transparent 70%); pointer-events: none; } .lp-chara-showcase-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto 22px; max-width: 960px; } .lp-chara-showcase-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #e879f9; margin: 0 0 12px; } .lp-chara-showcase-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; line-height: 1.3; color: #fff; text-align: center; margin: 0 0 12px; } .lp-chara-showcase-sub { font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); text-align: center; margin: 0; } .lp-chara-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; } .lp-chara-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 20px 20px 18px; text-align: center; backdrop-filter: blur(8px); transition: transform 0.3s ease, border-color 0.3s ease; position: relative; overflow: hidden; } .lp-chara-card:hover { transform: translateY(-8px); } .lp-chara-card--pink:hover { box-shadow: 0 16px 48px rgba(255, 143, 171, 0.2), 0 0 0 1px rgba(255, 143, 171, 0.3); } .lp-chara-card--purple:hover { box-shadow: 0 16px 48px rgba(192, 100, 255, 0.2), 0 0 0 1px rgba(192, 100, 255, 0.3); } .lp-chara-card--blue:hover { box-shadow: 0 16px 48px rgba(100, 180, 255, 0.2), 0 0 0 1px rgba(100, 180, 255, 0.3); } .lp-chara-card--pink { border-color: rgba(255, 143, 171, 0.2); } .lp-chara-card--purple { border-color: rgba(192, 100, 255, 0.2); } .lp-chara-card--blue { border-color: rgba(100, 180, 255, 0.2); } .lp-chara-card--pink:hover { border-color: rgba(255, 143, 171, 0.5); } .lp-chara-card--purple:hover { border-color: rgba(192, 100, 255, 0.5); } .lp-chara-card--blue:hover { border-color: rgba(100, 180, 255, 0.5); } .lp-chara-card-badge { display: inline-block; padding: 6px 18px; border-radius: 999px; font-size: 16px; font-weight: 900; letter-spacing: 0.03em; margin-bottom: 16px; } .lp-chara-badge-en { font-size: 11px; font-weight: 600; opacity: 0.6; letter-spacing: 0.08em; margin-left: 4px; } .lp-chara-card--pink .lp-chara-card-badge { background: rgba(255, 143, 171, 0.2); color: #ffaec6; } .lp-chara-card--purple .lp-chara-card-badge { background: rgba(192, 100, 255, 0.2); color: #d0a0ff; } .lp-chara-card--blue .lp-chara-card-badge { background: rgba(100, 180, 255, 0.2); color: #93c5fd; } .lp-chara-card-img-wrap { height: 200px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px; } .lp-chara-card-img { max-height: 220px; width: auto; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)); transition: transform 0.4s ease; } .lp-chara-card:hover .lp-chara-card-img { transform: scale(1.05) translateY(-4px); } .lp-chara-card-name { font-size: 18px; font-weight: 900; color: #fff; margin: 0 0 8px; } .lp-chara-card-desc { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.55); margin: 0 0 14px; } .lp-chara-card-tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } .lp-chara-card-tags span { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.5); } @media (max-width: 700px) { .lp-chara-cards { grid-template-columns: 1fr; gap: 16px; } .lp-chara-card-img-wrap { height: 180px; } .lp-chara-card-img { max-height: 180px; } } /* ───────────────────────────────────── ⑤ CTA: 3人trio＋選択メッセージ ───────────────────────────────────── */ .lp-cta-trio-wrap { position: relative; max-width: 700px; margin: 0 auto 32px; text-align: center; } .lp-cta-trio-img { width: 100%; max-width: 660px; height: auto; filter: drop-shadow(0 16px 48px rgba(200, 80, 255, 0.3)); } .lp-cta-trio-bubbles { display: flex; justify-content: space-between; gap: 8px; margin-top: -20px; padding: 0 20px; } .lp-cta-trio-bubble { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); } .lp-cta-trio-bubble--pink { background: rgba(255, 143, 171, 0.2); color: #ffaec6; border: 1px solid rgba(255, 143, 171, 0.3); } .lp-cta-trio-bubble--purple { background: rgba(192, 100, 255, 0.2); color: #d0a0ff; border: 1px solid rgba(192, 100, 255, 0.3); } .lp-cta-trio-bubble--blue { background: rgba(100, 180, 255, 0.2); color: #93c5fd; border: 1px solid rgba(100, 180, 255, 0.3); } @media (max-width: 600px) { .lp-cta-trio-bubbles { flex-direction: column; align-items: center; margin-top: 8px; } .lp-cta-trio-bubble { width: fit-content; } } /* ───────────────────────────────────── ③ 特徴カード チェックリスト ───────────────────────────────────── */ .lp-feature-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 5px; } .lp-feature-list li { font-size: 13px; color: rgba(255, 255, 255, 0.65); padding-left: 2px; } /* ───────────────────────────────────── ④ スクリーンカード 説明文 ───────────────────────────────────── */ .lp-screen-card-desc { font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; margin: -4px 0 0; } .lp-screen-card-desc-wide { font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; margin: -4px 0 12px; } /* ───────────────────────────────────── 01 フィーチャードカード ───────────────────────────────────── */ .lp-screen-card--featured { grid-column: span 2; } .lp-screen-featured-body { display: flex; gap: 28px; align-items: flex-start; margin-top: 4px; } .lp-screen-featured-frame { flex: 3; min-width: 0; } .lp-screen--shot-lg { height: 355px; } .lp-browser-frame--grid .lp-screen--shot-lg { height: 355px; } .lp-screen-featured-side { flex: 2; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; } .lp-screen-featured-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: rgba(201, 111, 255, 0.7); text-transform: uppercase; margin: 0; } .lp-screen-featured-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .lp-screen-featured-list li { font-size: 14px; color: rgba(255, 255, 255, 0.75); line-height: 1.4; } /* ───────────────────────────────────── 07 モバイルカード（1カラム縦レイアウト） ───────────────────────────────────── */ .lp-screen-mobile-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 160, 200, 0.1); border-radius: 16px; padding: 20px 16px; margin-top: 4px; } .lp-screen-mobile-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; } .lp-screen-mobile-list li { font-size: 12px; color: rgba(255, 255, 255, 0.6); } /* ───────────────────────────────────── 07 モバイル 3列レイアウト 左：ホーム大1枚 ／ 中：テキスト ／ 右：2枚縦 ───────────────────────────────────── */ .lp-mobile3-wrap { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 28px; align-items: center; margin-top: 12px; } .lp-mobile3-main { display: flex; justify-content: center; } .lp-mobile3-desc { display: flex; flex-direction: column; gap: 16px; } /* 4カラムレイアウト（home大 ＋ テキスト ＋ task ＋ shop） */ .lp-mobile4-wrap { display: grid; grid-template-columns: 1.4fr 0.85fr 1fr 1fr; gap: 20px; align-items: flex-start; margin-top: 16px; } .lp-mobile4-home-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; } .lp-mobile4-home-card .lp-phone-mockup { display: flex; flex-direction: column; max-width: none; } .lp-mobile4-home-card .lp-phone-mockup-screen { height: 400px; } .lp-mobile4-desc { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .lp-mobile4-phone-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; align-self: flex-start; } .lp-mobile4-phone-card .lp-phone-mockup { display: flex; flex-direction: column; } .lp-mobile4-phone-card .lp-phone-mockup-screen { height: 355px; } .lp-mobile4-phone-hd { display: flex; align-items: flex-start; gap: 8px; } .lp-mobile4-phone-ico { font-size: 22px; flex-shrink: 0; line-height: 1; } .lp-mobile4-phone-title { font-size: 14px; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; } .lp-mobile4-phone-sub { font-size: 11px; color: rgba(255, 255, 255, 0.45); margin: 3px 0 0; line-height: 1.4; } /* 2カラムレイアウト（ホーム大＋右コンテンツ） */ .lp-mobile2-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; margin-top: 16px; } .lp-mobile2-main { display: flex; justify-content: flex-end; } .lp-mobile2-content { display: flex; flex-direction: column; padding-top: 24px; gap: 0; } /* 説明リストとタグラインをまとめるグループ */ .lp-mobile2-desc-group { display: flex; flex-direction: column; gap: 8px; } /* phonesは説明のすぐ下 */ .lp-mobile2-phones { display: flex; gap: 12px; margin-top: 20px; } .lp-mobile2-phone-item { flex: 1; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .lp-mobile2-phone-label { font-size: 11px; color: rgba(255, 255, 255, 0.45); margin: 0; text-align: center; } .lp-mobile3-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .lp-mobile3-list li { display: flex; align-items: flex-start; gap: 8px; } .lp-mobile3-ico { font-size: 18px; flex-shrink: 0; } .lp-mobile3-text { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); } .lp-mobile3-text strong { display: block; color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 1px; } /* 右：2枚縦並び */ .lp-mobile3-sub { display: flex; flex-direction: column; gap: 16px; align-items: center; } .lp-mobile3-sub-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 100%; } .lp-mobile3-sub-label { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.75); margin: 0; line-height: 1.4; } .lp-mobile3-sub-label small { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.4); } /* 実機スクショフレーム */ /* CSS スマホ型フレーム */ .lp-phone-mockup { position: relative; background: #14103a; border-radius: 42px; padding: 14px 10px 12px; border: 2px solid rgba(255, 143, 200, 0.25); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 143, 200, 0.25); width: 100%; } /* ダイナミックアイランド */ .lp-phone-mockup::before { content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 32%; height: 8px; background: #080516; border-radius: 4px; z-index: 2; } /* ホームインジケーター */ .lp-phone-mockup::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 38%; height: 4px; background: rgba(255, 255, 255, 0.28); border-radius: 2px; } .lp-phone-mockup--lg { max-width: 280px; } .lp-phone-mockup-screen { border-radius: 30px; overflow: hidden; background: #0d0718; /* flex: 1 は親の .lp-phone-mockup が flex column のときに有効 */ } .lp-phone-mockup-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .lp-phone-real { border-radius: 22px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 111, 255, 0.18); background: #0d0718; } .lp-phone-real--xl { width: 100%; max-width: 280px; } .lp-phone-real--lg { width: 100%; max-width: 240px; } .lp-phone-real--md { width: 100%; max-width: 200px; } .lp-phone-real--sm { width: 100%; } .lp-mobile3-single { display: flex; flex-direction: column; align-items: center; gap: 10px; } .lp-phone-real-img { width: 100%; height: auto; display: block; } .lp-mobile-tagline { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.5); margin: 0; font-style: italic; } @media (max-width: 700px) { .lp-mobile3-wrap { grid-template-columns: 1fr; gap: 24px; } .lp-mobile3-sub { flex-direction: row; justify-content: center; } .lp-mobile3-sub-item { flex: 1; max-width: 160px; } } /* ───────────────────────────────────── ⑤ フッターブランド強化 ───────────────────────────────────── */ .lp-footer-brand-catch { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; color: rgba(201, 111, 255, 0.6); text-transform: uppercase; margin: 0 0 6px; } /* ───────────────────────────────────── ⑤ モバイルカード スマホフレーム ───────────────────────────────────── */ .lp-phone-frame { width: 200px; height: 360px; } /* ───────────────────────────────────── ⑥ CTA 吹き出し ───────────────────────────────────── */ .lp-cta-chara-wrap { position: relative; display: inline-block; } .lp-cta-bubble { position: absolute; top: 16px; right: calc(100% + 14px); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255, 160, 200, 0.3); border-radius: 16px 16px 0 16px; padding: 10px 16px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .lp-cta-bubble::after { content: ''; position: absolute; bottom: -8px; right: -1px; width: 0; height: 0; border-left: 10px solid rgba(255, 160, 200, 0.3); border-bottom: 8px solid transparent; } /* ───────────────────────────────────── ⑦ GitHubボタン ホバー演出 ───────────────────────────────────── */ .lp-github-link-btn { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, background 0.22s ease; } .lp-github-link-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(201, 111, 255, 0.35); } .lp-github-arrow { display: inline-block; margin-left: 6px; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .lp-github-link-btn:hover .lp-github-arrow { transform: translateX(5px); } /* ───────────────────────────────────── スクロールアニメーション（reveal） ───────────────────────────────────── */ .lp-reveal { opacity: 0; transform: translateY(36px) scale(0.98); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .lp-reveal.lp-revealed { opacity: 1; transform: translateY(0) scale(1); } /* 左から */ .lp-reveal-left { opacity: 0; transform: translateX(-44px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .lp-reveal-left.lp-revealed { opacity: 1; transform: translateX(0); } /* 右から */ .lp-reveal-right { opacity: 0; transform: translateX(44px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .lp-reveal-right.lp-revealed { opacity: 1; transform: translateX(0); } /* ブラウザフレーム画像の拡大トランジション */ .lp-screen-room-bg { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* ───────────────────────────────────── 04 デコレーションスクリーン ───────────────────────────────────── */ .lp-screen--deco { height: 280px; position: relative; overflow: hidden; } .lp-screen-room-bg--deco { opacity: 0.45; } .lp-mockdeco-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; } /* 家具が部屋に浮かんでいる演出 */ .lp-mockdeco-floating-items { position: absolute; inset: 0; pointer-events: none; } .lp-mockdeco-fi { position: absolute; font-size: 28px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); } .lp-mockdeco-fi--1 { bottom: 42%; left: 14%; animation: lp-fi-float 3.2s 0.0s ease-in-out infinite; } .lp-mockdeco-fi--2 { bottom: 48%; left: 38%; animation: lp-fi-float 3.5s 0.4s ease-in-out infinite; } .lp-mockdeco-fi--3 { bottom: 44%; right: 18%; animation: lp-fi-float 3.0s 0.8s ease-in-out infinite; } .lp-mockdeco-fi--4 { bottom: 40%; right: 36%; animation: lp-fi-float 3.8s 0.2s ease-in-out infinite; } @keyframes lp-fi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ショップパネル */ .lp-mockdeco-shop-panel { background: rgba(13, 7, 25, 0.7); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 160, 200, 0.18); padding: 8px 10px; } .lp-mockdeco-shop-title { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.7); margin: 0 0 6px; } .lp-mockdeco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .lp-mockdeco-room-thumb { width: 100%; height: 38px; object-fit: cover; border-radius: 4px; display: block; } .lp-mockdeco-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.15); border-radius: 8px; padding: 5px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; } .lp-mockdeco-card--owned { border-color: rgba(110, 221, 160, 0.35); background: rgba(110, 221, 160, 0.08); } .lp-mockdeco-card-name { font-size: 8px; color: rgba(255, 255, 255, 0.65); font-weight: 600; text-align: center; line-height: 1.2; } .lp-mockdeco-card-price { font-size: 8px; color: #ffd060; font-weight: 700; } .lp-mockdeco-card-badge { font-size: 7px; background: rgba(110, 221, 160, 0.2); color: #6edda0; border-radius: 999px; padding: 1px 4px; font-weight: 700; } /* ── responsive v2 ── */ @media (max-width: 800px) { .lp-hero2-2col { grid-template-columns: 1fr; padding: 0 16px; gap: 28px; } .lp-hero2-left { align-items: center; text-align: center; } .lp-hero2-btns { justify-content: center; } .lp-stats-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .lp-hero2-eyebrow { font-size: 10px; } .lp-hero2-chara { width: 140px; height: 140px; } .lp-hero2-tagline { font-size: 24px; } .lp-hero2-logo { height: 44px; } .lp-nav-anchors { display: none; } .lp-sub-br { display: inline; } .lp-nav-logo { height: 48px; } .lp-nav-login { display: none; } .lp-nav-cta { padding: 8px 16px; font-size: 13px; white-space: nowrap; } .lp-mobile4-wrap { grid-template-columns: 1fr; } .lp-mobile4-home-card .lp-phone-mockup-screen { height: 260px; } .lp-mobile4-phone-card { display: none; } .lp-screen-row { grid-template-columns: 1fr; gap: 28px; } .lp-screen-row--rev .lp-screen-info { order: 1; } .lp-screen-row--rev .lp-browser-frame { order: 2; } .lp-screen--dashboard { height: 260px; } .lp-browser-frame--lg .lp-browser-screen, .lp-browser-frame--lg .lp-screen--box, .lp-browser-frame--lg .lp-screen--deco, .lp-browser-frame--lg .lp-screen--evo { height: 240px; } .lp-screens-grid { grid-template-columns: 1fr; gap: 28px; } .lp-screen-card--wide { grid-column: span 1; } .lp-screen-card--featured { grid-column: span 1; } .lp-screen-featured-body { flex-direction: column; } .lp-screen--shot-lg { height: 220px; } .lp-mobile-exp-wrap { flex-direction: column; padding: 20px; gap: 24px; } .lp-phone-frame-wrap { width: 100%; justify-content: center; } .lp-browser-frame--grid .lp-browser-screen, .lp-browser-frame--grid .lp-screen--box, .lp-browser-frame--grid .lp-screen--evo, .lp-browser-frame--grid .lp-screen--deco { height: 200px; } .lp-browser-frame--grid .lp-screen--shot { height: 200px; } .lp-stats-row { grid-template-columns: repeat(2, 1fr); } /* サイドバーレイアウトをモバイルで1カラムに */ .page-sidebar-layout { grid-template-columns: 1fr; padding: 0 12px; gap: 0; } .page-sidebar-layout > .col-left { display: none; } .col-main { grid-column: 1; } .sticky-col { position: static; } /* ダッシュボード：マイルームサムネイルとサイドナビは非表示（本体の部屋と重複・ボトムナビで代替） */ .sidebar-deco-panel { display: none; } .side-menu { display: none; } /* BOXと獲得アイテムを横並び（同じdataコントローラー配下なのでそこに当てる） */ [data-controller="daily-box"] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ダッシュボード モバイルレイアウト */ .dashboard-layout { display: flex; flex-direction: column; padding: 0; gap: 0; } /* col-centerを解体してroom→BOX→タスクの順に並べる */ .dashboard-layout .col-center { display: contents; } .col-left { order: 2; position: static; padding: 12px 12px 12px; } .col-right { display: none; } /* マイルームをフル幅・大きめに */ .my-room { order: 1; height: 320px; min-height: 280px; margin: 0 0 0; border-radius: 0 !important; width: 100%; } .room-title { display: none; } /* カレンダーとお部屋成長は非表示、タスクは表示 */ .center-bottom { display: block; padding: 0 12px; order: 3; } .calendar-panel { display: none; } .week-panel { display: none; } .room-growth-panel { display: none; } /* タスクパネルをモバイル向けに整える */ .tasks-panel { margin-top: 0; } /* ① Good job today! — 小さく・左上に */ .room-neon { top: 12px; right: auto; left: 14px; font-size: 16px; } /* ② セリフ吹き出し — コンパクトに */ .room-speech { display: none; } /* ③ フッターGitHubバッジを非表示（ボトムナビと重なる・UX的に不要） */ .site-footer { display: none; } /* タスク追加フォーム：縦中央→上寄せ */ .tf-page { align-items: flex-start; justify-content: flex-start; padding: 16px 12px 80px; min-height: auto; } .tf-card { padding: 24px 20px; } /* ① BOXカードの高さを少し抑える */ .daily-box-panel { padding: 6px 12px 8px; margin-bottom: 0; } /* ③ キャラ登場アニメーション */ .room-character { animation: charaEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .room-speech { animation: speechEnter 0.4s ease both; animation-delay: 0.9s; } @keyframes charaEnter { from { transform: translateX(-30%) translateY(24px); opacity: 0; } to { transform: translateX(-30%) translateY(0); opacity: 1; } } @keyframes speechEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .lp-github-card { padding: 20px; } .lp-github-card-top { flex-direction: column; } .lp-footer-inner { flex-direction: column; gap: 28px; } .lp-footer-msg-main { font-size: 14px; } .lp-evo-timeline { margin-top: 12px; } } /* ===================== 背景テーマショップ ===================== */ .bg-shop-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255, 160, 200, 0.15); } .bg-shop-title { font-size: 18px; font-weight: bold; color: #f5e6ff; margin: 0 0 4px; } .bg-shop-sub { font-size: 12px; color: rgba(240, 200, 255, 0.6); margin: 0 0 20px; } .bg-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .bg-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); border: 1px solid rgba(255, 160, 200, 0.18); border-radius: 18px; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; } .bg-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(200, 80, 255, 0.25); } .bg-card--active { border-color: rgba(255, 143, 172, 0.55); box-shadow: 0 0 0 2px rgba(255, 143, 172, 0.30), 0 8px 28px rgba(200, 80, 255, 0.20); } .bg-card--locked { opacity: 0.6; } .bg-card-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .bg-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } .bg-card:hover .bg-card-img { transform: scale(1.04); } .bg-card-badge { position: absolute; top: 10px; left: 10px; background: rgba(255, 143, 172, 0.92); color: #fff; font-size: 11px; font-weight: bold; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); } .bg-card-rarity { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: bold; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px; } .bg-rarity--free { background: rgba(140, 220, 160, 0.85); color: #1a3a20; } .bg-rarity--normal { background: rgba(200, 200, 200, 0.85); color: #222; } .bg-rarity--rare { background: rgba(130, 160, 255, 0.85); color: #fff; } .bg-rarity--super { background: linear-gradient(90deg, rgba(255,200,60,0.95), rgba(255,140,60,0.95)); color: #3a2800; } .bg-rarity--event { background: linear-gradient(90deg, rgba(255,100,180,0.95), rgba(160,80,255,0.95)); color: #fff; } /* イベント限定カード */ .bg-card--event { border-color: rgba(255, 100, 180, 0.45); } .bg-card-event-badge { position: absolute; bottom: 10px; left: 10px; background: linear-gradient(90deg, rgba(255,80,160,0.92), rgba(140,60,255,0.92)); color: #fff; font-size: 10px; font-weight: bold; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.5px; backdrop-filter: blur(6px); } .bg-card-img--dim { filter: brightness(0.5) saturate(0.4); } .bg-btn--event-locked { background: rgba(255, 100, 180, 0.12); color: rgba(255, 160, 220, 0.70); cursor: not-allowed; border: 1px dashed rgba(255, 100, 180, 0.35); } .bg-card-body { padding: 14px 16px 16px; } .bg-card-name { font-size: 14px; font-weight: bold; color: #f5e6ff; margin: 0 0 4px; } .bg-card-desc { font-size: 11px; color: rgba(240, 200, 255, 0.60); margin: 0 0 12px; line-height: 1.5; } .bg-action-btn { display: block; width: 100%; text-align: center; font-size: 13px; font-weight: bold; padding: 10px; border-radius: 10px; border: none; cursor: pointer; transition: opacity 0.15s, transform 0.15s; text-decoration: none; box-sizing: border-box; } .bg-btn--active { background: rgba(255, 143, 172, 0.20); color: rgba(255, 200, 220, 0.70); cursor: default; } .bg-btn--set { background: linear-gradient(135deg, #a78bfa, #c96fff); color: #fff; box-shadow: 0 4px 14px rgba(180, 80, 255, 0.35); } .bg-btn--set:hover { opacity: 0.88; transform: translateY(-1px); } .bg-btn--buy { background: linear-gradient(135deg, #ff8fab, #c96fff); color: #fff; box-shadow: 0 4px 14px rgba(200, 80, 255, 0.30); } .bg-btn--buy:hover { opacity: 0.88; transform: translateY(-1px); } .bg-btn--locked { background: rgba(255, 255, 255, 0.05); color: rgba(240, 200, 255, 0.40); cursor: not-allowed; } /* ══════════════════════════════════════ モバイルナビゲーション（≤720px） ══════════════════════════════════════ */ /* デスクトップヘッダーをモバイルで非表示 */ @media (max-width: 720px) { .header--desktop { display: none !important; } } /* ── スペーサー（固定ヘッダーの高さ分） ── */ .mobile-top-spacer { display: none; } @media (max-width: 720px) { .mobile-top-spacer { display: block; height: 64px; } } /* ── モバイルヘッダー ── */ .mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; height: 52px; background: rgba(15, 5, 40, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 160, 200, 0.15); align-items: center; justify-content: space-between; padding: 0 16px; z-index: 9998; } @media (max-width: 720px) { .mobile-header { display: flex; } } .mobile-header-left { display: flex; flex-direction: column; gap: 1px; } .mobile-header-logo { height: 24px; display: block; } .mobile-header-greeting { font-size: 10px; font-weight: 600; color: rgba(255, 200, 230, 0.7); letter-spacing: 0.03em; line-height: 1; } /* ── ハンバーガーボタン ── */ .mobile-hamburger { width: 36px; height: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 4px; } .mobile-hamburger span { display: block; width: 22px; height: 2px; background: rgba(255, 255, 255, 0.85); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .mobile-hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-hamburger--open span:nth-child(2) { opacity: 0; } .mobile-hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── バックドロップ ── */ .mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; transition: opacity 0.25s ease; } .mobile-backdrop--show { opacity: 1; } @media (max-width: 720px) { .mobile-backdrop { display: block; pointer-events: none; } .mobile-backdrop--show { pointer-events: auto; } } /* ── ドロワーパネル ── */ .mobile-drawer { display: none; position: fixed; top: 0; right: -280px; bottom: 0; width: 260px; background: rgba(18, 6, 38, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid rgba(255, 160, 200, 0.15); z-index: 9999; transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; padding-top: 52px; } .mobile-drawer--open { right: 0; } @media (min-width: 721px) { .mobile-drawer { display: none !important; } } .mobile-drawer-user { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255, 160, 200, 0.12); } .mobile-drawer-name { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; } .mobile-drawer-stats { display: flex; gap: 12px; font-size: 12px; color: rgba(255, 200, 230, 0.85); font-weight: 600; margin-bottom: 8px; } .mobile-drawer-exp-wrap { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-bottom: 6px; } .mobile-drawer-exp-fill { height: 100%; background: linear-gradient(90deg, #ff8fab, #c96fff); border-radius: 2px; transition: width 0.4s ease; } .mobile-drawer-stage { font-size: 11px; color: rgba(255, 160, 200, 0.6); margin: 0; font-weight: 600; } .mobile-drawer-nav { padding: 12px 12px; flex: 1; } .mobile-drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: background 0.15s; } .mobile-drawer-link:hover { background: rgba(255, 160, 200, 0.1); color: #fff; } .mobile-drawer-badge { background: rgba(255, 80, 130, 0.85); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; } .mobile-drawer-footer { padding: 16px 20px 24px; border-top: 1px solid rgba(255, 160, 200, 0.1); } .mobile-drawer-logout { display: block; text-align: center; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 120, 150, 0.8); text-decoration: none; background: rgba(255, 80, 130, 0.08); border: 1px solid rgba(255, 80, 130, 0.2); transition: background 0.15s; } .mobile-drawer-logout:hover { background: rgba(255, 80, 130, 0.15); } /* ── ボトムナビ ── */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: rgba(15, 5, 40, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 160, 200, 0.15); z-index: 9998; align-items: center; justify-content: space-around; } @media (max-width: 720px) { .mobile-bottom-nav { display: flex; } /* コンテンツが下のナビに隠れないように */ body { padding-bottom: 60px; } /* デスクトップ用の padding-top をリセット（スペーサーが代わりに使用） */ body { padding-top: 0 !important; } } .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; padding: 6px 0; text-decoration: none; color: rgba(255, 255, 255, 0.4); transition: color 0.15s; } .mobile-nav-item--active, .mobile-nav-item:hover { color: rgba(255, 160, 200, 0.9); } .mobile-nav-ico { font-size: 18px; line-height: 1; } .mobile-nav-label { font-size: 9px; font-weight: 600; letter-spacing: 0.02em; } /* ===================================================== ミニゲーム: リボンキャッチ ===================================================== */ /* ── ラッパー（フルスクリーン） ── */ .tg-wrap { position: fixed; inset: 0; z-index: 10000; background: #0a0220; background-image: radial-gradient(ellipse at 30% 20%, rgba(180, 60, 255, 0.25) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(60, 20, 180, 0.20) 0%, transparent 60%); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* ── 各画面共通 ── */ /* hidden 属性は UA スタイルが display:none にするが、display:flex が上書きしてしまうため明示的に打ち消す */ .tg-screen[hidden] { display: none !important; } .tg-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* ━━━ スタート画面 ━━━ */ .tg-screen--start { background-image: url(/assets/tap_game_bg.png); background-size: cover; background-position: center; } .tg-screen--start::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(10, 2, 32, 0.55) 0%, rgba(10, 2, 32, 0.72) 60%, rgba(10, 2, 32, 0.90) 100% ); } .tg-start-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 24px 48px; width: 100%; max-width: 420px; text-align: center; } .tg-label { font-size: 12px; letter-spacing: 0.12em; color: rgba(255, 160, 200, 0.6); margin: 0; } .tg-title { font-size: 32px; font-weight: 900; color: #f5e6ff; text-shadow: 0 0 40px rgba(255, 140, 200, 0.6); margin: 0; } .tg-desc { font-size: 14px; color: rgba(240, 200, 255, 0.7); line-height: 1.7; margin: 0; } .tg-score-board { display: flex; gap: 24px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 160, 200, 0.2); border-radius: 16px; padding: 16px 24px; width: 100%; } .tg-score-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; } .tg-score-label { font-size: 11px; color: rgba(240, 200, 255, 0.5); } .tg-score-value { font-size: 20px; font-weight: 800; color: #f5e6ff; } .tg-score-value--used { color: rgba(240, 200, 255, 0.35); font-size: 14px; } .tg-score-value--ready { color: #ffb3d4; } .tg-reward-table { display: flex; flex-direction: column; gap: 6px; width: 100%; } .tg-reward-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(255, 255, 255, 0.04); border-radius: 10px; font-size: 13px; color: rgba(240, 200, 255, 0.7); } .tg-reward-coin { font-weight: 700; color: #ffe066; } .tg-played-msg { font-size: 14px; color: rgba(255, 160, 200, 0.7); line-height: 1.7; margin: 0; } /* ── ボタン ── */ .tg-btn { display: inline-block; border: none; border-radius: 40px; font-size: 18px; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; padding: 16px 48px; letter-spacing: 0.04em; } .tg-btn:hover { transform: scale(1.04); } .tg-btn:active { transform: scale(0.97); } .tg-btn--start { background: linear-gradient(135deg, #ff80c0, #c96fff); color: #fff; box-shadow: 0 8px 32px rgba(200, 80, 220, 0.5); } .tg-btn--home { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 160, 200, 0.3); color: rgba(240, 200, 255, 0.8); font-size: 15px; padding: 12px 32px; } .tg-result-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; } .tg-btn--retry { background: linear-gradient(135deg, #ff80c0, #c96fff); color: #fff; box-shadow: 0 6px 24px rgba(200, 80, 220, 0.45); font-size: 17px; padding: 14px 40px; } /* ━━━ ゲーム画面 ━━━ */ .tg-screen--game { flex-direction: column; isolation: isolate; } .tg-screen--game::before { content: ''; position: absolute; inset: -5px; background-image: url(/assets/tap_game_bg.png); background-size: cover; background-position: center; filter: blur(2px); z-index: -2; pointer-events: none; } .tg-screen--game::after { content: ''; position: absolute; inset: 0; background: rgba(10,2,32,0.19); z-index: -1; pointer-events: none; } .tg-hud { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 24px; background: rgba(10,2,32,0.55); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,160,210,0.18); z-index: 10; } .tg-hud-score { font-size: 24px; font-weight: 900; color: #f5e6ff; display: flex; align-items: center; gap: 6px; } .tg-hud-score-num { display: inline-block; min-width: 2ch; transition: transform 0.1s; } .tg-hud-hearts { display: flex; gap: 8px; font-size: 22px; } .tg-hud-heart { display: inline-block; color: #ff6ea6; text-shadow: 0 0 8px rgba(255,100,160,0.70); transition: transform 0.15s; } .tg-hud-heart--pulse { animation: heart-pulse 0.35s ease-out; } @keyframes heart-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } } .tg-hud-timer-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 5px; } .tg-hud-timer-ico { font-size: 18px; opacity: 0.75; } .tg-hud-timer { font-size: 28px; font-weight: 900; color: #ffb3d4; min-width: 2ch; text-align: right; transition: color 0.3s; } /* コンボメッセージ */ .tg-combo-msg { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 36px; font-weight: 900; color: #fff; text-shadow: 0 0 24px rgba(255,120,200,0.90), 0 2px 8px rgba(0,0,0,0.60); pointer-events: none; z-index: 99999; white-space: nowrap; animation: combo-pop 0.9s ease-out forwards; } @keyframes combo-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); } 20% { opacity: 1; transform: translate(-50%,-60%) scale(1.15); } 60% { opacity: 1; transform: translate(-50%,-65%) scale(1.0); } 100% { opacity: 0; transform: translate(-50%,-80%) scale(0.9); } } /* リボン ぷにっ消滅アニメ */ @keyframes ribbon-pop { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.35) rotate(12deg); opacity: 0.9; } 100% { transform: scale(0) rotate(-8deg); opacity: 0; } } .game-ribbon--popping { animation: ribbon-pop 0.22s ease-out forwards !important; pointer-events: none !important; } .game-timer--danger { color: #ff4466 !important; animation: timerPulse 0.5s infinite alternate; } @keyframes timerPulse { from { transform: scale(1); } to { transform: scale(1.15); } } .tg-ribbon-container { position: absolute; inset: 60px 0 0 0; overflow: hidden; z-index: 5; } /* ── カウントダウン ── */ .tg-countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 900; color: #f5e6ff; text-shadow: 0 0 60px rgba(255, 140, 200, 0.8); z-index: 20; animation: cdPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; background: rgba(10, 2, 32, 0.5); } .tg-countdown--go { color: #ffb3d4; font-size: 72px; } @keyframes cdPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ── リボン（タップ対象） ── */ .game-ribbon { position: absolute; cursor: pointer; user-select: none; line-height: 1; animation: ribbonFly var(--dur, 2s) linear forwards; transform-origin: center; filter: drop-shadow(0 0 6px rgba(255,255,255,0.85)) drop-shadow(0 0 14px rgba(255,140,200,0.70)) drop-shadow(0 3px 6px rgba(0,0,0,0.55)); touch-action: none; will-change: transform; } /* 回転タイプ */ .game-ribbon--spin { animation: ribbonFlySpin var(--dur, 2s) linear forwards; } /* ジグザグタイプ */ .game-ribbon--zigzag { animation: ribbonFlyZigzag var(--dur, 2.5s) linear forwards; } /* 小さい高得点タイプ — 少し速い */ .game-ribbon--small { filter: drop-shadow(0 0 4px rgba(255,255,255,1.0)) drop-shadow(0 0 10px rgba(255,220,80,0.80)) drop-shadow(0 2px 4px rgba(0,0,0,0.55)); } /* 金リボン */ .game-ribbon--gold { filter: sepia(1) saturate(4) hue-rotate(10deg) brightness(1.15) drop-shadow(0 0 8px rgba(255,220,0,0.95)) drop-shadow(0 0 18px rgba(255,180,0,0.70)) drop-shadow(0 3px 6px rgba(0,0,0,0.55)); } /* 虹リボン */ .game-ribbon--rainbow { animation-name: ribbonFly, rainbowHue !important; animation-timing-function: linear, linear !important; animation-iteration-count: 1, infinite !important; filter: drop-shadow(0 0 10px rgba(255,100,200,0.90)) drop-shadow(0 0 20px rgba(100,200,255,0.70)) drop-shadow(0 3px 6px rgba(0,0,0,0.50)); } @keyframes rainbowHue { from { filter: hue-rotate(0deg) drop-shadow(0 0 12px rgba(255,255,255,0.8)); } to { filter: hue-rotate(360deg) drop-shadow(0 0 12px rgba(255,255,255,0.8)); } } /* ハート */ .game-ribbon--heart { filter: drop-shadow(0 0 8px rgba(255,80,120,0.90)) drop-shadow(0 0 18px rgba(255,160,180,0.65)) drop-shadow(0 3px 6px rgba(0,0,0,0.50)); animation: ribbonFly var(--dur,2s) ease-in-out forwards; } @keyframes ribbonFly { from { transform: translate(0,0) rotate(0deg); opacity: 1; } to { transform: translate(var(--tx,0), var(--ty,0)) rotate(120deg); opacity: 0.6; } } @keyframes ribbonFlySpin { from { transform: translate(0,0) rotate(0deg); opacity: 1; } to { transform: translate(var(--tx,0), var(--ty,0)) rotate(720deg); opacity: 0.6; } } @keyframes ribbonFlyZigzag { 0% { transform: translate(0,0); opacity: 1; } 20% { transform: translate(calc(var(--tx)*0.2 + var(--zx,40px)), calc(var(--ty)*0.2)); } 40% { transform: translate(calc(var(--tx)*0.4 - var(--zx,40px)), calc(var(--ty)*0.4)); } 60% { transform: translate(calc(var(--tx)*0.6 + var(--zx,40px)), calc(var(--ty)*0.6)); } 80% { transform: translate(calc(var(--tx)*0.8 - var(--zx,40px)), calc(var(--ty)*0.8)); } 100% { transform: translate(var(--tx,0), var(--ty,0)); opacity: 0.6; } } /* ── スパークルエフェクト ── */ .game-sparkle { position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); } .game-sparkle span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffb3e6; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: sparkleOut 0.55s ease-out forwards; animation-delay: calc(var(--angle) * 0.001ms); } .game-sparkle span:nth-child(even) { background: #ffe066; width: 5px; height: 5px; } .game-sparkle span:nth-child(3n) { background: #b3f0ff; } @keyframes sparkleOut { from { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(36px) scale(0); opacity: 0; } } /* ── フロートスコア（+1） ── */ .game-float-score { position: fixed; pointer-events: none; z-index: 9999; font-size: 20px; font-weight: 900; color: #ffe066; text-shadow: 0 2px 8px rgba(200, 120, 0, 0.5); transform: translate(-50%, -50%); animation: floatUp 0.65s ease-out forwards; display: flex; align-items: center; gap: 4px; } .game-float-heart { color: #ff6ea6; font-size: 16px; } .game-float-score--bonus { color: #ffd700; font-size: 24px; text-shadow: 0 0 12px rgba(255,200,0,0.80); } .game-float-score--gold { color: #ffe44d; font-size: 28px; font-weight: 900; text-shadow: 0 0 16px rgba(255,200,0,1.0), 0 2px 4px rgba(0,0,0,0.5); } .game-float-score--rainbow { font-size: 32px; font-weight: 900; background: linear-gradient(90deg, #ff6ec7, #ffcc55, #6effb4, #6ec6ff, #c46eff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 10px rgba(255,255,255,0.6)); } .game-float-score--heart { color: #ff4d80; font-size: 22px; text-shadow: 0 0 12px rgba(255,100,150,0.80); } @keyframes floatUp { from { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } to { transform: translate(-50%, -150%) scale(0.9); opacity: 0; } } /* ━━━ 結果画面 ━━━ */ .tg-result-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 24px 56px; text-align: center; animation: resultIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes resultIn { from { transform: translateY(32px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .tg-result-chara { height: 160px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 24px rgba(255, 140, 200, 0.5)); animation: charaResultBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.2s; } @keyframes charaResultBounce { from { transform: translateY(24px) scale(0.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .tg-result-msg { font-size: 18px; font-weight: 700; color: #f5e6ff; line-height: 1.6; margin: 0; } .tg-result-score-wrap { display: flex; align-items: baseline; gap: 6px; } .tg-result-score-label { font-size: 14px; color: rgba(240, 200, 255, 0.6); } .tg-result-score-num { font-size: 64px; font-weight: 900; color: #f5e6ff; text-shadow: 0 0 40px rgba(255, 140, 200, 0.5); line-height: 1; } .tg-result-score-unit { font-size: 20px; color: rgba(240, 200, 255, 0.7); } .tg-result-coins { font-size: 24px; font-weight: 800; color: #ffe066; text-shadow: 0 0 20px rgba(200, 160, 0, 0.5); background: rgba(255, 220, 80, 0.08); border: 1px solid rgba(255, 200, 60, 0.25); border-radius: 32px; padding: 10px 28px; } .tg-result-hs { font-size: 13px; color: rgba(240, 200, 255, 0.5); } .game-result-hs--new { color: #ffb3d4; font-weight: 700; font-size: 15px; animation: hsBounce 0.4s ease both; } @keyframes hsBounce { from { transform: scale(1.3); } to { transform: scale(1); } } /* ===================================================== ガチャ ===================================================== */ .gacha-scene-bg { position: fixed; inset: 0; z-index: -1; background-image: url(/assets/gacha_bg.png); background-size: cover; background-position: center top; } .gacha-scene-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10, 2, 32, 0.45) 0%, rgba(10, 2, 32, 0.70) 50%, rgba(10, 2, 32, 0.88) 100% ); } .gacha-page { max-width: 520px; margin: 0 auto; padding: 32px 16px 80px; position: relative; min-height: 80vh; } /* ── ヒーロー ── */ .gacha-label { font-size: 12px; letter-spacing: 0.12em; color: rgba(255, 160, 200, 0.6); text-align: center; margin: 0 0 8px; } .gacha-title { font-size: 36px; font-weight: 900; text-align: center; color: #f5e6ff; text-shadow: 0 0 40px rgba(255, 140, 200, 0.5); margin: 0 0 8px; } .gacha-sub { font-size: 13px; text-align: center; color: rgba(240, 200, 255, 0.6); margin: 0 0 24px; } /* ── ガチャ球ビジュアル ── */ .gacha-ball-display { display: flex; justify-content: center; margin-bottom: 24px; position: relative; } /* 金縁オーラ（背景リング） */ .gacha-ball-display::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(ellipse, rgba(220, 180, 40, 0.18) 0%, rgba(255, 160, 200, 0.10) 50%, transparent 72%); pointer-events: none; animation: auraGlow 2.5s ease-in-out infinite alternate; } @keyframes auraGlow { from { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } } .gacha-machine-img { height: 300px; width: auto; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 0 18px rgba(255, 180, 220, 0.9)) drop-shadow(0 0 40px rgba(220, 160, 40, 0.55)) drop-shadow(0 12px 48px rgba(200, 80, 200, 0.4)); animation: machineFloat 3.5s ease-in-out infinite; } @keyframes machineFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } } /* キラキラパーティクル */ .gacha-ball-display::after { content: "✦ ✦ ✦"; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: 14px; color: rgba(220, 180, 40, 0.7); letter-spacing: 12px; animation: sparkleRow 1.8s ease-in-out infinite alternate; pointer-events: none; } @keyframes sparkleRow { from { opacity: 0.3; letter-spacing: 10px; } to { opacity: 1; letter-spacing: 14px; } } @keyframes ballFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(5deg); } } /* ── コイン残高 ── */ .gacha-wallet { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 22px; font-weight: 800; margin-bottom: 16px; } .gacha-wallet-ico { font-size: 24px; } .gacha-wallet-num { color: #ffe066; text-shadow: 0 0 16px rgba(200, 160, 0, 0.5); } .gacha-wallet-label { font-size: 14px; color: rgba(240, 200, 255, 0.6); font-weight: normal; } /* ── 排出率バッジ ── */ .gacha-rates { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; } .gacha-rate-item { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid; } .gacha-rate-item--ssr { background: rgba(200, 160, 0, 0.15); border-color: rgba(200, 160, 0, 0.4); color: #ffe066; } .gacha-rate-item--sr { background: rgba(140, 40, 200, 0.15); border-color: rgba(180, 80, 255, 0.4); color: #d4a0ff; } .gacha-rate-item--r { background: rgba(40, 80, 200, 0.15); border-color: rgba(80, 140, 255, 0.4); color: #a0c0ff; } .gacha-rate-item--n { background: rgba(100, 100, 100, 0.15); border-color: rgba(150, 150, 150, 0.3); color: rgba(255,255,255,0.5); } /* ── 引くボタン ── */ .gacha-pull-btns { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .gacha-pull-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: none; border-radius: 20px; padding: 18px 24px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s; text-decoration: none; width: 100%; } .gacha-pull-btn:hover:not(:disabled) { transform: scale(1.03); } .gacha-pull-btn:active:not(:disabled) { transform: scale(0.97); } .gacha-pull-btn:disabled { opacity: 0.4; cursor: not-allowed; } .gacha-pull-btn-main { font-size: 18px; font-weight: 800; color: #fff; } .gacha-pull-btn-cost { font-size: 12px; color: rgba(255, 255, 255, 0.75); } .gacha-pull-btn-cost em { font-style: normal; color: #ffe066; } .gacha-pull-btn--single { background: linear-gradient(135deg, #c060ff, #8040e0); box-shadow: 0 6px 24px rgba(150, 60, 255, 0.45); } .gacha-pull-btn--ten { background: linear-gradient(135deg, #ff80c0, #c040e0); box-shadow: 0 6px 24px rgba(220, 60, 200, 0.5); } .gacha-pull-btn--again { background: linear-gradient(135deg, #40c0ff, #4060e0); box-shadow: 0 6px 24px rgba(60, 100, 255, 0.45); } .gacha-current-title { text-align: center; font-size: 13px; color: rgba(240, 200, 255, 0.6); margin: 0 0 16px; } .gacha-current-title strong { color: #ffe066; } .gacha-back-link { display: block; text-align: center; font-size: 13px; color: rgba(240, 200, 255, 0.45); text-decoration: none; margin-top: 12px; transition: color 0.15s; } .gacha-back-link:hover { color: rgba(240, 200, 255, 0.8); } /* ── カプセルアニメーション オーバーレイ ── */ .gacha-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(8, 2, 28, 0.92); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); } .gacha-overlay[hidden] { display: none !important; } .gacha-capsule-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; } /* カプセル本体 */ .gacha-capsule { width: 100px; height: 150px; position: relative; transform-origin: center; } .gacha-capsule-top, .gacha-capsule-bottom { position: absolute; left: 0; right: 0; height: 50%; border-radius: 50px 50px 0 0; } .gacha-capsule-top { top: 0; background: linear-gradient(160deg, #ff80c0, #c060ff); border-radius: 50px 50px 0 0; } .gacha-capsule-bottom { bottom: 0; background: linear-gradient(160deg, #8040d0, #4020a0); border-radius: 0 0 50px 50px; } .gacha-capsule-shine { position: absolute; top: 10%; left: 15%; width: 30%; height: 35%; background: rgba(255, 255, 255, 0.35); border-radius: 50%; filter: blur(4px); } /* スピンアニメーション */ .gacha-capsule--spin { animation: capsuleSpin 1.5s cubic-bezier(0.4, 0, 0.6, 1) forwards; } @keyframes capsuleSpin { 0% { transform: scale(0.3) rotate(0deg); opacity: 0; } 15% { transform: scale(1.1) rotate(120deg); opacity: 1; } 80% { transform: scale(1) rotate(680deg); } 100% { transform: scale(1.05) rotate(720deg); } } /* ポップアニメーション */ .gacha-capsule--pop { animation: capsulePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes capsulePop { 0% { transform: scale(1.05); opacity: 1; } 50% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .gacha-capsule-label { font-size: 20px; font-weight: 700; color: rgba(240, 200, 255, 0.8); animation: labelPulse 0.8s ease-in-out infinite alternate; } @keyframes labelPulse { from { opacity: 0.5; } to { opacity: 1; } } /* ── 結果画面 ── */ /* ── レア度カラーテーマ ── */ .gacha-result { --mc-c1: rgba(200,100,255,0.50); --mc-c2: rgba(255,120,200,0.40); --mc-glow: rgba(180,80,255,0.30); --p-color: rgba(220,160,255,0.85); } .gacha-result[data-rarity="n"] { --mc-c1: rgba(180,170,255,0.50); --mc-c2: rgba(200,190,255,0.38); --mc-glow: rgba(200,180,255,0.28); --p-color: rgba(210,200,255,0.85); } .gacha-result[data-rarity="r"] { --mc-c1: rgba(50,160,255,0.60); --mc-c2: rgba(100,200,255,0.45); --mc-glow: rgba(60,180,255,0.38); --p-color: rgba(120,200,255,0.90); } .gacha-result[data-rarity="sr"] { --mc-c1: rgba(255,70,180,0.60); --mc-c2: rgba(255,130,210,0.45); --mc-glow: rgba(255,90,190,0.38); --p-color: rgba(255,160,230,0.90); } .gacha-result[data-rarity="ssr"]{ --mc-c1: rgba(255,210,40,0.65); --mc-c2: rgba(255,230,110,0.50); --mc-glow: rgba(255,220,60,0.45); --p-color: rgba(255,230,100,0.95); } /* ── 魔法陣 ── */ .gacha-magic-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--mc-size, 320px); height: var(--mc-size, 320px); pointer-events: none; z-index: 0; animation: mc-flash-in 1.4s cubic-bezier(0.22,1,0.36,1) both; } @keyframes mc-flash-in { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); filter: brightness(4); } 25% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); filter: brightness(3); } 55% { transform: translate(-50%,-50%) scale(0.98); filter: brightness(1.5); } 100% { transform: translate(-50%,-50%) scale(1); filter: brightness(1); } } .gacha-mc-glow { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, var(--mc-glow) 0%, transparent 68%); animation: mc-pulse 3.5s ease-in-out infinite; } .gacha-mc-ring { position: absolute; border-radius: 50%; border: 1.5px solid var(--mc-c1); } .gacha-mc-ring--1 { inset: 0; border-style: dashed; animation: spin-cw 40s linear infinite; } .gacha-mc-ring--2 { inset: 24px; border-color: var(--mc-c2); animation: spin-ccw 55s linear infinite; } .gacha-mc-ring--3 { inset: 48px; border-style: dotted; animation: spin-cw 30s linear infinite; } .gacha-mc-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin-cw 90s linear infinite; } .gacha-mc-svg circle { stroke: var(--mc-c1); } .gacha-mc-svg polygon { stroke: var(--mc-c2); } .gacha-mc-svg circle[r="3"] { fill: var(--mc-c2); stroke: none; } @keyframes spin-cw { to { transform: rotate(360deg); } } @keyframes spin-ccw { to { transform: rotate(-360deg); } } @keyframes mc-pulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.10); } } /* ── 浮遊パーティクル ── */ .gacha-particle { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; animation: particle-rise linear infinite; } @keyframes particle-rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.5; } 100% { transform: translateY(-90vh) scale(0.3); opacity: 0; } } /* ── カード召喚アニメーション ── */ /* ── カード召喚 + フロート ── */ .gacha-card { animation: card-summon 0.55s cubic-bezier(0.34,1.56,0.64,1) both, card-float 2.4s 1.3s ease-in-out infinite; } @keyframes card-summon { 0% { opacity: 0; transform: translateY(44px) scale(0.75); } 65% { transform: translateY(-7px) scale(1.05); } 82% { transform: translateY(3px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes card-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.03); } } /* ── カードオーラ（レア度別） ── */ .gacha-card::before { content: ''; position: absolute; inset: -14px; border-radius: 18px; filter: blur(18px); z-index: -1; opacity: 0; transition: opacity 0.5s 0.6s; } .gacha-card--flipped::before { opacity: 1; } .gacha-card--n::before { background: rgba(180,170,255,0.30); } .gacha-card--r::before { background: rgba(60,160,255,0.50); } .gacha-card--sr::before { background: rgba(255,80,180,0.55); } .gacha-card--ssr::before { background: rgba(255,210,40,0.60); } /* ── SR/SSR フラッシュ ── */ .gacha-flash { position: absolute; inset: 0; pointer-events: none; z-index: 99; animation: gacha-flash-out 0.65s ease-out forwards; } .gacha-flash--sr { background: radial-gradient(ellipse at center, rgba(255,220,255,0.90) 0%, rgba(255,100,200,0.45) 45%, transparent 70%); } .gacha-flash--ssr { background: radial-gradient(ellipse at center, rgba(255,255,220,0.90) 0%, rgba(255,220,60,0.45) 45%, transparent 70%); } @keyframes gacha-flash-out { 0% { opacity: 1; } 100% { opacity: 0; } } /* ── 絵文字パーティクル（SR+） ── */ .gacha-emoji-particle { position: absolute; pointer-events: none; z-index: 1; animation: emoji-float linear forwards; opacity: 0; user-select: none; } @keyframes emoji-float { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.8; } 100% { transform: translateY(-85vh) rotate(330deg); opacity: 0; } } /* ── 背景の星 ── */ .gacha-result::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.75) 0%, transparent 100%), radial-gradient(1px 1px at 28% 55%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 45% 30%, rgba(255,255,255,0.65) 0%, transparent 100%), radial-gradient(1px 1px at 62% 72%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 78% 20%, rgba(255,255,255,0.70) 0%, transparent 100%), radial-gradient(1px 1px at 88% 60%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1px 1px at 20% 80%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 55% 88%, rgba(255,255,255,0.60) 0%, transparent 100%), radial-gradient(1px 1px at 35% 10%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,0.45) 0%, transparent 100%); animation: stars-twinkle 3.5s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } @keyframes stars-twinkle { 0% { opacity: 0.35; } 100% { opacity: 0.90; } } .gacha-result { position: fixed; inset: 0; z-index: 10000; background: linear-gradient(160deg, rgba(20,5,50,0.97) 0%, rgba(60,10,80,0.97) 100%); backdrop-filter: blur(12px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 32px; overflow-y: auto; animation: gacha-result-in 0.35s cubic-bezier(0.34,1.56,0.64,1) both; } .gacha-result[hidden] { display: none !important; } @keyframes gacha-result-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .gacha-result-heading { position: relative; z-index: 1; text-align: center; font-size: 24px; font-weight: 900; color: #f5e6ff; margin: 0 0 20px; } /* カードエリア（1枚: センタリング / 複数: グリッド） */ .gacha-cards-area { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; } /* ── ガチャカード ── */ .gacha-card { width: 90px; height: 126px; perspective: 600px; cursor: default; position: relative; } /* 1枚引きは大きく */ .gacha-cards-area:has(.gacha-card:only-child) .gacha-card { width: 160px; height: 220px; } .gacha-card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .gacha-card--flipped .gacha-card-inner { transform: rotateY(180deg); } .gacha-card-back, .gacha-card-front { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; } .gacha-card-back { background: linear-gradient(135deg, #1a0840, #0a0220); border: 1px solid rgba(255, 160, 200, 0.2); font-size: 32px; } .gacha-card-front { transform: rotateY(180deg); border: 2px solid; } /* レアリティ別カードスタイル */ .gacha-card--n .gacha-card-front { background: linear-gradient(135deg, #2a2a3a, #1a1a28); border-color: rgba(160, 160, 180, 0.4); } .gacha-card--r .gacha-card-front { background: linear-gradient(135deg, #0a1a50, #0a2060); border-color: rgba(80, 140, 255, 0.6); } .gacha-card--sr .gacha-card-front { background: linear-gradient(135deg, #280a50, #3a0a60); border-color: rgba(180, 80, 255, 0.7); box-shadow: 0 0 20px rgba(180, 80, 255, 0.3); } .gacha-card--ssr .gacha-card-front { background: linear-gradient(135deg, #3a2000, #5a3400); border-color: rgba(220, 180, 0, 0.8); box-shadow: 0 0 30px rgba(220, 180, 0, 0.4); } /* SSR きらきらシャイン */ .gacha-card--ssr.gacha-card--shine .gacha-card-front::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient( 105deg, transparent 30%, rgba(255, 220, 80, 0.35) 50%, transparent 70% ); background-size: 200% 100%; animation: cardShine 1.5s ease infinite; } @keyframes cardShine { from { background-position: 200% 0; } to { background-position: -200% 0; } } .gacha-card-rarity { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 6px; align-self: flex-end; } .gacha-card--n .gacha-card-rarity { background: rgba(150,150,170,0.3); color: #aaa; } .gacha-card--r .gacha-card-rarity { background: rgba(60,120,255,0.3); color: #80b0ff; } .gacha-card--sr .gacha-card-rarity { background: rgba(160,60,255,0.3); color: #c080ff; } .gacha-card--ssr .gacha-card-rarity { background: rgba(200,160,0,0.3); color: #ffe066; } .gacha-card-emoji { font-size: 28px; line-height: 1; } .gacha-card-label { font-size: 9px; font-weight: 700; color: rgba(240,200,255,0.9); text-align: center; line-height: 1.3; } .gacha-card-amount { font-size: 11px; font-weight: 800; color: #ffe066; } /* 1枚引き時の大きいカードの文字サイズ調整 */ .gacha-cards-area:has(.gacha-card:only-child) .gacha-card-emoji { font-size: 52px; } .gacha-cards-area:has(.gacha-card:only-child) .gacha-card-label { font-size: 14px; } .gacha-cards-area:has(.gacha-card:only-child) .gacha-card-amount { font-size: 18px; } .gacha-cards-area:has(.gacha-card:only-child) .gacha-card-rarity { font-size: 12px; } .gacha-cards-area:has(.gacha-card:only-child) .gacha-card-back { font-size: 60px; } /* ── サマリー ── */ .gacha-summary { text-align: center; margin-bottom: 20px; } .gacha-summary-msg { font-size: 18px; font-weight: 700; color: #f5e6ff; margin: 0 0 6px; } .gacha-summary-coins { font-size: 13px; color: rgba(240,200,255,0.55); margin: 0; } /* ── 結果アクション ── */ .gacha-result-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* ── モバイル調整 ── */ @media (max-width: 720px) { .gacha-page { padding-top: 16px; } .gacha-title { font-size: 28px; } .gacha-card { width: 72px; height: 100px; } .gacha-cards-area:has(.gacha-card:only-child) .gacha-card { width: 140px; height: 196px; } } /* ============================== 進化演出 EVOLUTION OVERLAY ============================== */ .evo-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s ease; } .evo-overlay.evo--phase-1 { opacity: 1; } .evo-overlay.evo--closing { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } /* シンプルトースト時はクリックをブロックしない */ .evo-overlay:not(:has(.evo-bg)) { pointer-events: none; } /* ── Background ── */ .evo-bg { position: absolute; inset: 0; background: rgba(10, 5, 30, 0.88); transition: background 1s ease; } .evo-overlay--princess .evo-bg { background: rgba(0, 0, 0, 0.95); } /* ── Rays ── */ .evo-rays { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; background: radial-gradient(ellipse 50% 70% at 50% 55%, rgba(220,180,255,0.18) 0%, transparent 65%); } .evo-overlay.evo--phase-2 .evo-rays { opacity: 1; } .evo-overlay--ribbon.evo--phase-2 .evo-rays { animation: raysRotate 5s linear infinite; background: conic-gradient( from 0deg at 50% 50%, transparent 0deg, rgba(220,180,255,0.13) 12deg, transparent 24deg, rgba(220,180,255,0.10) 42deg, transparent 60deg, rgba(220,180,255,0.13) 85deg, transparent 110deg, rgba(220,180,255,0.09) 140deg, transparent 170deg, rgba(220,180,255,0.13) 200deg, transparent 230deg, rgba(220,180,255,0.10) 265deg, transparent 300deg, rgba(220,180,255,0.13) 335deg, transparent 360deg ); } .evo-overlay--princess.evo--phase-2 .evo-rays { animation: raysRotate 3.5s linear infinite; background: conic-gradient( from 0deg at 50% 50%, transparent 0deg, rgba(255,215,0,0.18) 12deg, transparent 24deg, rgba(255,215,0,0.13) 50deg, transparent 80deg, rgba(255,215,0,0.18) 110deg, transparent 145deg, rgba(255,215,0,0.11) 185deg, transparent 225deg, rgba(255,215,0,0.18) 260deg, transparent 295deg, rgba(255,215,0,0.13) 330deg, transparent 360deg ); } @keyframes raysRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Flash burst ── */ .evo-flash { position: absolute; inset: 0; background: white; opacity: 0; pointer-events: none; } .evo-overlay.evo--phase-4 .evo-flash { animation: flashBurst 0.6s ease-out forwards; } @keyframes flashBurst { 0% { opacity: 0; } 20% { opacity: 0.85; } 100% { opacity: 0; } } /* ── Particles ── */ .evo-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .evo-particle { position: absolute; font-size: 18px; opacity: 0; left: calc(8% + var(--i, 0) * 6.5%); top: 55%; } .evo-overlay.evo--phase-2 .evo-particle { animation: particleFly 2.2s ease-out forwards; animation-delay: calc(var(--i, 0) * 0.11s); } .evo-overlay.evo--phase-3 .evo-particle { animation: particleFly 2.2s ease-out forwards; animation-delay: calc(var(--i, 0) * 0.08s + 0.2s); } @keyframes particleFly { 0% { opacity: 0; transform: translateY(0) scale(0.4) rotate(0deg); } 25% { opacity: 1; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-180px) scale(1.3) rotate(calc(var(--i, 0) * 35deg)); } } /* ── Card ── */ .evo-card { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 28px 28px; max-width: 360px; width: 92%; text-align: center; } /* ── Prev character ── */ /* ステージ別に新キャラと同じ高さを確保してラベルが被らないようにする */ .evo-prev-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 175px; height: 175px; /* Stage2 new-wrap と同じ */ flex-shrink: 0; transition: opacity 0.4s ease, transform 0.4s ease; } .evo-overlay--ribbon .evo-prev-wrap { width: 210px; height: 210px; } .evo-overlay--princess .evo-prev-wrap { width: 245px; height: 245px; } .evo-prev-img { width: 110px; /* 卵・前ステージは小さく表示 */ height: 110px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(200,150,255,0.4)); } .evo-overlay.evo--phase-2 .evo-prev-wrap { animation: eggFloat 1s ease-in-out infinite alternate; } .evo-overlay.evo--phase-4 .evo-prev-wrap { opacity: 0; transform: scale(0.5); pointer-events: none; } @keyframes eggFloat { from { transform: translateY(0); } to { transform: translateY(-14px); } } /* ── Mystery label (stage 3) ── */ .evo-mystery-label { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: rgba(200,160,255,0.75); letter-spacing: 0.18em; opacity: 0; transition: opacity 0.6s ease; white-space: nowrap; } .evo-overlay.evo--phase-3 .evo-mystery-label { opacity: 1; } /* ── New character ── */ .evo-new-wrap { position: absolute; top: 36px; left: 50%; transform: translateX(-50%) scale(0); width: 175px; /* Stage2 ベビー */ height: 175px; opacity: 0; pointer-events: none; /* transition なし → animation で制御 */ } .evo-overlay--ribbon .evo-new-wrap { width: 210px; height: 210px; } /* Stage3 リボンちゃん */ .evo-overlay--princess .evo-new-wrap { width: 245px; height: 245px; } /* Stage4 プリンセス */ .evo-new-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(220,160,255,0.6)); } .evo-overlay--princess .evo-new-img { filter: drop-shadow(0 0 18px rgba(255,215,0,0.55)); } /* ポンッ！登場アニメ */ @keyframes charaPop { 0% { transform: translateX(-50%) scale(0); opacity: 0; } 55% { transform: translateX(-50%) scale(1.18); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } } .evo-overlay.evo--phase-4 .evo-new-wrap { animation: charaPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: auto; } .evo-new-glow { position: absolute; inset: -24px; border-radius: 50%; background: radial-gradient(circle, rgba(220,160,255,0.3) 0%, transparent 70%); opacity: 0; transition: opacity 0.7s ease 0.35s; } .evo-overlay--princess .evo-new-glow { background: radial-gradient(circle, rgba(255,215,0,0.35) 0%, transparent 70%); } .evo-overlay.evo--phase-4 .evo-new-glow { opacity: 1; } /* ── Labels & text ── */ .evo-evolution-label { font-size: 11px; font-weight: 800; letter-spacing: 0.28em; color: rgba(220,180,255,0.9); opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; margin: 0; } .evo-overlay--princess .evo-evolution-label { font-size: 15px; color: #ffe066; text-shadow: 0 0 12px rgba(255,215,0,0.6); } .evo-overlay.evo--phase-5 .evo-evolution-label { opacity: 1; transform: translateY(0); } .evo-new-name { font-size: 21px; font-weight: 800; color: #fff; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.18s, transform 0.5s ease 0.18s; } .evo-overlay--princess .evo-new-name { font-size: 23px; background: linear-gradient(135deg, #ffe066, #ffd0f0, #ffe066); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .evo-overlay.evo--phase-5 .evo-new-name { opacity: 1; transform: translateY(0); } .evo-message { font-size: 14px; color: rgba(255,225,255,0.88); line-height: 1.7; white-space: pre-line; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s; } .evo-overlay.evo--phase-5 .evo-message { opacity: 1; transform: translateY(0); } /* ── OK button ── */ .evo-ok-btn { margin-top: 6px; padding: 11px 36px; border: none; border-radius: 28px; background: linear-gradient(135deg, #d946ef, #a855f7); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, box-shadow 0.2s; box-shadow: 0 4px 20px rgba(168,85,247,0.45); } .evo-overlay--princess .evo-ok-btn { background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 4px 20px rgba(245,158,11,0.45); } .evo-ok-btn:hover { box-shadow: 0 6px 30px rgba(168,85,247,0.65); transform: translateY(-2px) !important; } .evo-overlay--princess .evo-ok-btn:hover { box-shadow: 0 6px 30px rgba(245,158,11,0.65); } /* Show on phase-5 for stage 2, phase-6 for stage 3/4 */ .evo-overlay.evo--phase-5 .evo-ok-btn, .evo-overlay.evo--phase-6 .evo-ok-btn { opacity: 1; transform: translateY(0); } /* ── Simple repeat toast ── */ .evo-simple { position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%) translateY(16px); background: rgba(25, 12, 48, 0.92); border: 1px solid rgba(200,150,255,0.35); border-radius: 28px; padding: 13px 28px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #f0e0ff; opacity: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: opacity 0.4s ease, transform 0.4s ease; white-space: nowrap; z-index: 10; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .evo-overlay.evo--phase-1 .evo-simple { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Evolution tree glow ── */ .evo-v-item--just-evolved { animation: justEvolvedPulse 1.2s ease-in-out 4; animation-delay: 0.5s; } @keyframes justEvolvedPulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px rgba(255,210,80,0.85), 0 0 22px rgba(255,210,80,0.5); } } /* ── スマホ対応 ── */ @media (max-width: 480px) { .evo-card { padding: 28px 16px 20px; gap: 8px; width: 96%; } .evo-prev-wrap { width: 140px; height: 140px; } .evo-overlay--ribbon .evo-prev-wrap { width: 168px; height: 168px; } .evo-overlay--princess .evo-prev-wrap { width: 196px; height: 196px; } .evo-prev-img { width: 88px; height: 88px; } .evo-new-wrap { width: 140px; height: 140px; top: 28px; } .evo-overlay--ribbon .evo-new-wrap { width: 168px; height: 168px; } .evo-overlay--princess .evo-new-wrap { width: 196px; height: 196px; } .evo-evolution-label { font-size: 10px; letter-spacing: 0.18em; } .evo-new-name { font-size: 18px; } .evo-overlay--princess .evo-new-name { font-size: 20px; } .evo-message { font-size: 13px; } .evo-ok-btn { padding: 10px 28px; font-size: 14px; } .evo-simple { font-size: 14px; padding: 11px 20px; bottom: 24px; } } /* ================================================================ リボンパズル ================================================================ */ .pz-wrap { position: fixed; inset: 0; z-index: 10000; background: #0a0220; background-image: radial-gradient(ellipse at 30% 20%, rgba(180, 60, 255, 0.25) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(60, 20, 180, 0.20) 0%, transparent 60%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .pz-screen[hidden] { display: none !important; } .pz-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; } /* ━━━ スタート画面 ━━━ */ .pz-screen--start { background-image: url(/assets/puzzle_bg.png); background-size: cover; background-position: center; } .pz-screen--start::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(10, 2, 32, 0.50) 0%, rgba(10, 2, 32, 0.70) 60%, rgba(10, 2, 32, 0.92) 100% ); } .pz-start-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 24px 20px; max-height: 100dvh; overflow-y: auto; } .pz-label { font-size: 13px; color: rgba(240, 200, 255, 0.55); letter-spacing: 0.12em; text-transform: uppercase; margin: 0; } .pz-title { font-size: 32px; font-weight: 900; color: #fff; margin: 0; background: linear-gradient(135deg, #ff8fc8, #c97cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pz-desc { font-size: 14px; color: rgba(240, 200, 255, 0.7); line-height: 1.7; margin: 0; } .pz-preview-wrap { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 143, 200, 0.4); box-shadow: 0 0 24px rgba(255, 143, 200, 0.25); background: #0d0718; } .pz-preview-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .pz-score-board { display: flex; gap: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 14px 24px; } .pz-score-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pz-score-label { font-size: 11px; color: rgba(240, 200, 255, 0.45); } .pz-score-value { font-size: 15px; font-weight: 700; color: #fff; } .pz-score-value--used { color: rgba(240, 200, 255, 0.35); font-size: 14px; } .pz-score-value--ready { color: #ffb3d4; } .pz-played-msg { font-size: 14px; color: rgba(240, 200, 255, 0.55); line-height: 1.7; margin: 0; } /* ━━━ ボタン共通 ━━━ */ .pz-btn { padding: 13px 36px; border-radius: 50px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; display: inline-block; } .pz-btn:hover { transform: scale(1.04); } .pz-btn:active { transform: scale(0.97); } .pz-btn--start { background: linear-gradient(135deg, #ff8fc8, #c97cff); color: #fff; box-shadow: 0 8px 28px rgba(200, 80, 255, 0.4); } .pz-btn--home { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(240, 200, 255, 0.8); } .pz-game-btns { display: flex; gap: 10px; margin-top: 12px; } .pz-btn--shuffle { background: rgba(255, 143, 200, 0.12); border: 1px solid rgba(255, 143, 200, 0.25); color: #ffb3d4; padding: 9px 24px; font-size: 13px; } .pz-btn--giveup { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 200, 200, 0.55); padding: 9px 20px; font-size: 13px; } .pz-btn--giveup:hover { background: rgba(255, 80, 80, 0.12); border-color: rgba(255, 100, 100, 0.3); color: rgba(255, 160, 160, 0.85); } /* ギブアップ確認ダイアログ */ .pz-giveup-dialog { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 80; background: rgba(10, 2, 32, 0.72); backdrop-filter: blur(6px); } .pz-giveup-dialog[hidden] { display: none !important; } .pz-giveup-inner { background: rgba(30, 10, 60, 0.95); border: 1px solid rgba(255, 143, 200, 0.3); border-radius: 20px; padding: 28px 32px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 20px; } .pz-giveup-msg { font-size: 17px; font-weight: 700; color: #fff; margin: 0; line-height: 1.6; } .pz-giveup-msg span { font-size: 13px; font-weight: 400; color: rgba(240, 200, 255, 0.5); } .pz-giveup-btns { display: flex; gap: 10px; justify-content: center; } .pz-btn--giveup-yes { background: rgba(255, 80, 80, 0.18); border: 1px solid rgba(255, 100, 100, 0.35); color: rgba(255, 180, 180, 0.9); padding: 11px 28px; font-size: 14px; } .pz-btn--giveup-no { background: linear-gradient(135deg, #ff8fc8, #c97cff); color: #fff; box-shadow: 0 4px 16px rgba(200, 80, 255, 0.35); padding: 11px 28px; font-size: 14px; } .pz-btn--again { background: linear-gradient(135deg, #ff8fc8, #c97cff); color: #fff; box-shadow: 0 6px 20px rgba(200, 80, 255, 0.35); } /* ━━━ プレビュー画面 ━━━ */ .pz-screen--preview { background-image: url(/assets/puzzle_bg.png); background-size: cover; background-position: center; } .pz-screen--preview::before { content: ''; position: absolute; inset: 0; background: rgba(10, 2, 32, 0.60); pointer-events: none; } .pz-preview-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 1; } .pz-preview-label { font-size: 12px; color: rgba(240, 200, 255, 0.5); letter-spacing: 0.18em; text-transform: uppercase; margin: 0; } .pz-preview-img-wrap { width: 72vw; max-width: 260px; height: 72vw; max-height: 260px; border-radius: 20px; overflow: hidden; border: 2px solid rgba(255, 143, 200, 0.5); box-shadow: 0 0 60px rgba(255, 143, 200, 0.35), 0 20px 60px rgba(0, 0, 0, 0.5); } .pz-preview-full-img { width: 100%; height: 100%; object-fit: cover; } .pz-preview-sub { font-size: 15px; color: rgba(240, 200, 255, 0.65); margin: 0; } .pz-preview-countdown { font-size: 64px; font-weight: 900; color: #fff; text-shadow: 0 0 30px rgba(255, 143, 200, 0.9); transition: transform 0.2s, color 0.2s; line-height: 1; } .pz-preview-countdown--go { color: #ff8fc8; font-size: 48px; text-shadow: 0 0 40px rgba(255, 143, 200, 1); } /* ━━━ ゲーム画面 ━━━ */ .pz-screen--game { flex-direction: column; gap: 0; padding: 16px; isolation: isolate; } .pz-screen--game::before { content: ''; position: absolute; inset: -5px; background-image: url(/assets/puzzle_bg.png); background-size: cover; background-position: center; filter: blur(2px); z-index: -2; } .pz-screen--game::after { content: ''; position: absolute; inset: 0; background: rgba(10, 2, 32, 0.62); z-index: -1; } .pz-hud { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 360px; padding: 0 4px 12px; } .pz-hud-moves { font-size: 14px; color: rgba(240, 200, 255, 0.6); } .pz-hud-moves span { font-weight: 700; color: #ffb3d4; } .pz-hud-timer { font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .pz-btn-hint { background: rgba(255, 220, 80, 0.14); border: 1px solid rgba(255, 220, 80, 0.30); border-radius: 20px; color: #ffd060; font-size: 18px; padding: 4px 14px; cursor: pointer; transition: transform 0.15s, background 0.15s; line-height: 1; } .pz-btn-hint:hover { background: rgba(255, 220, 80, 0.25); transform: scale(1.08); } .pz-btn-hint:active { transform: scale(0.93); } .pz-hint-overlay { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; border-radius: 0; } .pz-hint-overlay[hidden] { display: none !important; } .pz-hint-overlay--in { opacity: 0.80; } .pz-hint-overlay--out { opacity: 0; } /* ━━━ パズルボード ━━━ */ .pz-board { --pz-size: 4; --pz-gap: 4px; --pz-tile-size: min(calc((100dvw - 48px) / var(--pz-size)), calc((320px - var(--pz-gap) * (var(--pz-size) - 1)) / var(--pz-size))); max-width: 332px; display: grid; grid-template-columns: repeat(var(--pz-size), var(--pz-tile-size)); grid-template-rows: repeat(var(--pz-size), var(--pz-tile-size)); gap: var(--pz-gap); border: 2px solid rgba(255, 143, 200, 0.25); border-radius: 14px; padding: 6px; background: rgba(255, 143, 200, 0.05); box-shadow: 0 0 32px rgba(255, 143, 200, 0.15); } .pz-tile { width: var(--pz-tile-size); height: var(--pz-tile-size); border-radius: 8px; cursor: pointer; transition: transform 0.12s; background-repeat: no-repeat; border: 1px solid rgba(255, 143, 200, 0.15); box-sizing: border-box; } .pz-tile:hover { transform: scale(1.04); border-color: rgba(255, 143, 200, 0.5); } .pz-tile--empty { background: rgba(255, 255, 255, 0.03) !important; border: 1px dashed rgba(255, 255, 255, 0.08) !important; cursor: default; } .pz-tile--empty:hover { transform: none; } /* ━━━ 結果画面 ━━━ */ .pz-result-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 24px 20px; } .pz-result-chara { width: 90vw; max-width: 320px; height: auto; border-radius: 16px; object-fit: cover; box-shadow: 0 8px 32px rgba(255, 143, 200, 0.35); animation: pz-chara-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes pz-chara-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .pz-result-msg { font-size: 24px; font-weight: 900; color: #fff; margin: 0; background: linear-gradient(135deg, #ff8fc8, #c97cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pz-result-stats { display: flex; gap: 24px; } .pz-result-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px 20px; } .pz-result-stat-label { font-size: 11px; color: rgba(240, 200, 255, 0.5); } .pz-result-stat-val { font-size: 20px; font-weight: 700; color: #fff; } .pz-result-coins { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pz-coins-got { font-size: 22px; font-weight: 900; color: #ffd700; text-shadow: 0 0 16px rgba(255, 215, 0, 0.5); } .pz-coins-total { font-size: 13px; color: rgba(240, 200, 255, 0.5); } .pz-coins-note { font-size: 13px; color: rgba(240, 200, 255, 0.5); } .pz-result-plays-left { font-size: 13px; color: rgba(240, 200, 255, 0.6); } .pz-result-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ━━━ パズルギャラリー ━━━ */ .pz-gallery { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 400px; } .pz-gallery-item { width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: default; position: relative; } .pz-gallery-item--owned { cursor: pointer; } .pz-gallery-item--owned:hover .pz-gallery-thumb { border-color: rgba(255, 143, 200, 0.8); transform: scale(1.05); } .pz-gallery-thumb { width: 68px; height: 68px; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.12); transition: border-color 0.15s, transform 0.15s; } .pz-gallery-item--selected .pz-gallery-thumb { border-color: #ff8fc8; box-shadow: 0 0 12px rgba(255, 143, 200, 0.5); } .pz-gallery-check { position: absolute; top: 4px; right: 4px; background: #ff8fc8; color: #fff; font-size: 10px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .pz-gallery-locked { width: 68px; height: 68px; border-radius: 10px; border: 2px dashed rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .pz-gallery-lock-ico { font-size: 20px; } .pz-gallery-lock-count { font-size: 9px; color: rgba(240, 200, 255, 0.4); margin: 0; white-space: nowrap; } .pz-gallery-name { font-size: 9px; color: rgba(240, 200, 255, 0.5); margin: 0; text-align: center; line-height: 1.3; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pz-gallery-item--selected .pz-gallery-name { color: #ffb3d4; } /* ━━━ 解放バナー ━━━ */ .pz-unlock-banner { background: linear-gradient(135deg, rgba(255, 143, 200, 0.2), rgba(200, 120, 255, 0.2)); border: 1px solid rgba(255, 143, 200, 0.5); border-radius: 12px; padding: 12px 20px; font-size: 14px; color: #fff; text-align: center; line-height: 1.6; animation: pz-unlock-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes pz-unlock-pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ━━━ タスク全完了 ━━━ */ .tasks-all-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px; } .tasks-all-done-img { width: 100%; max-width: 280px; border-radius: 16px; box-shadow: 0 4px 20px rgba(255, 143, 200, 0.25); animation: tasks-done-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes tasks-done-pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .tasks-all-done-msg { font-size: 15px; font-weight: 700; color: #ffb3d4; margin: 0; text-shadow: 0 0 12px rgba(255, 143, 200, 0.4); } /* ━━━ パズル難易度選択 ━━━ */ .pz-difficulty { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 360px; } .pz-difficulty-label { font-size: 11px; color: rgba(240, 200, 255, 0.5); letter-spacing: 0.1em; margin: 0; } .pz-difficulty-btns { display: flex; gap: 8px; width: 100%; } .pz-diff-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: all 0.15s; } .pz-diff-btn:hover { border-color: rgba(255, 143, 200, 0.4); background: rgba(255, 143, 200, 0.08); } .pz-diff-btn--active { border-color: rgba(255, 143, 200, 0.7) !important; background: rgba(255, 143, 200, 0.15) !important; box-shadow: 0 0 12px rgba(255, 143, 200, 0.2); } .pz-diff-name { font-size: 14px; font-weight: 700; color: #fff; } .pz-diff-info { font-size: 10px; color: rgba(240, 200, 255, 0.5); } .pz-diff-btn--easy .pz-diff-name { color: #a8e6cf; } .pz-diff-btn--normal .pz-diff-name { color: #ffb3d4; } .pz-diff-btn--hard .pz-diff-name { color: #c97cff; } .pz-diff-btn--easy.pz-diff-btn--active { border-color: rgba(168, 230, 207, 0.7) !important; } .pz-diff-btn--normal.pz-diff-btn--active { border-color: rgba(255, 143, 200, 0.7) !important; } .pz-diff-btn--hard.pz-diff-btn--active { border-color: rgba(201, 124, 255, 0.7) !important; } /* ===================================================================== リボンマッチ（マッチ3ゲーム） ===================================================================== */ /* ─── 背景：星 + ボケ + スパークル ─── */ .mg-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url(/assets/match_game_bg.png); background-size: cover; background-position: left bottom; opacity: 0.13; } .mg-wrap::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(110,50,160,0.18) 0%, transparent 50%, rgba(0,0,0,0.60) 100%); } .mg-wrap { min-height: calc(100vh - 68px); margin-top: 0; background: linear-gradient(#2b1247, #4a1a80 50%, #6b2a7a); display: grid; grid-template-columns: 280px 1fr 210px; gap: 12px; padding: 10px 16px 24px; box-sizing: border-box; align-items: stretch; position: relative; } /* ─── 各パネル ─── */ .mg-panel { color: #fff; position: relative; z-index: 1; } .mg-panel--info { background: rgba(53,24,84,0.55); border: 1px solid rgba(200,160,255,0.35); border-radius: 20px; padding: 18px 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 1px 0 rgba(200,160,255,0.25), inset 0 0 0 1px rgba(200,160,255,0.08), 0 4px 24px rgba(0,0,0,0.40); } .mg-panel--board { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; min-width: 0; position: relative; z-index: 1; } .mg-panel--result { background: rgba(53,24,84,0.55); border: 1px solid rgba(200,160,255,0.30); border-radius: 20px; padding: 20px 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; box-shadow: inset 0 1px 0 rgba(200,160,255,0.20), 0 4px 24px rgba(0,0,0,0.35); } /* モバイルは縦積み */ @media (max-width: 900px) { .mg-wrap { grid-template-columns: 1fr; } } /* ─── ボード上部の金の飾り ─── */ .mg-board-ornament { font-size: 16px; color: #ffd700; letter-spacing: 4px; text-shadow: 0 0 5px rgba(255,215,0,0.50), 0 0 12px rgba(255,180,0,0.22); text-align: center; margin-bottom: 4px; animation: mgOrnamentGlow 4s ease-in-out infinite; } @keyframes mgOrnamentGlow { 0%, 100% { opacity: 0.70; text-shadow: 0 0 5px rgba(255,215,0,0.50), 0 0 12px rgba(255,180,0,0.22); } 50% { opacity: 0.95; text-shadow: 0 0 8px rgba(255,215,0,0.75), 0 0 20px rgba(255,200,0,0.40); } } /* スタートヒントテキスト */ .mg-start-hint { font-size: 14px; font-weight: 700; color: rgba(255,220,255,0.75); letter-spacing: 2px; margin: 0; text-shadow: 0 0 10px rgba(255,150,220,0.5); animation: mgHintPulse 2s ease-in-out infinite; } @keyframes mgHintPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1.0; } } /* ─── ボードオーバーレイ ─── */ .mg-board-overlay { position: absolute; inset: 0; border-radius: 20px; z-index: 5; pointer-events: auto; background: rgba(20, 0, 50, 0.18); } .mg-countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 20px; z-index: 5; color: #fff; font-weight: 900; } .mg-overlay-hidden { display: none !important; } .mg-overlay-text { font-size: 24px; text-align: center; line-height: 1.4; text-shadow: 0 2px 10px rgba(255,100,200,0.8); margin: 0; } /* カウントダウン数字 */ .mg-countdown { font-size: 80px; text-shadow: 0 4px 20px rgba(255,100,200,0.8); } .mg-countdown--go { font-size: 56px; color: #ffe066; } .mg-label { font-size: 11px; letter-spacing: 2px; opacity: 0.7; margin: 0; } .mg-title { font-size: 30px; font-weight: 900; margin: 0; white-space: nowrap; text-shadow: 0 2px 12px rgba(255,100,200,0.7), 0 0 30px rgba(255,80,200,0.3); line-height: 1.1; } .mg-desc { font-size: 12px; line-height: 1.6; opacity: 0.85; margin: 0; } .mg-score-board { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; } .mg-score-item { background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); } .mg-score-label { font-size: 11px; opacity: 0.7; } .mg-score-value { font-size: 18px; font-weight: 700; } .mg-score-value--used { color: #aaa; } .mg-score-value--ready { color: #ffe066; } .mg-reward-table { background: linear-gradient(160deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.14) 100%); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 10px 14px; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } .mg-reward-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .mg-reward-row:last-child { border-bottom: none; } .mg-reward-coin { color: #ffe066; font-weight: 700; } .mg-how-to { background: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 10px 14px; font-size: 12px; line-height: 1.6; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); } .mg-how-title { font-weight: 700; margin: 0 0 8px; font-size: 13px; } .mg-how-steps { display: flex; flex-direction: column; gap: 6px; } .mg-how-step { display: flex; align-items: center; gap: 6px; padding: 4px 0; } .mg-how-num { font-size: 14px; font-weight: 900; color: #ff80c8; flex-shrink: 0; width: 20px; } .mg-how-text { flex: 1; font-size: 12px; } .mg-how-icon { font-size: 14px; flex-shrink: 0; } .mg-played-msg { font-size: 15px; opacity: 0.8; margin-bottom: 16px; } /* ─── ボタン ─── */ .mg-btn { display: inline-block; padding: 14px 40px; border-radius: 50px; font-size: 18px; font-weight: 700; cursor: pointer; border: none; text-decoration: none; color: #fff; background: linear-gradient(150deg, #5a2090 0%, #8840c8 100%); box-shadow: 0 4px 20px rgba(88, 32, 144, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.18); position: relative; overflow: hidden; transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease; } /* 光沢ライン */ .mg-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.14), transparent); pointer-events: none; } /* ホバー：紫→ピンク */ .mg-btn:hover { background: linear-gradient(150deg, #8840c8 0%, #e050c0 100%); box-shadow: 0 6px 28px rgba(200, 60, 180, 0.60), 0 0 40px rgba(220, 80, 200, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20); transform: scale(1.05); } /* クリック：キラッ */ .mg-btn:active { transform: scale(0.96); box-shadow: 0 0 0 3px rgba(255, 180, 240, 0.50), 0 0 50px rgba(220, 80, 200, 0.70); } .mg-btn::after { content: '✨'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; opacity: 0; pointer-events: none; } .mg-btn:active::after { animation: mgBtnKira 0.38s ease-out forwards; } @keyframes mgBtnKira { 0% { opacity: 1; transform: scale(0.6); } 50% { opacity: 0.9; transform: scale(1.4); } 100% { opacity: 0; transform: scale(2.0); } } .mg-btn--start { font-size: 20px; padding: 16px 48px; letter-spacing: 0.05em; } .mg-btn--start-img-btn { background: none; border: none; padding: 0; cursor: pointer; display: block; } .btn-start-img { width: 280px; height: auto; display: block; transition: transform 0.15s, filter 0.15s; } .mg-btn--start-img-btn:hover .btn-start-img { transform: scale(1.05); filter: brightness(1.12); } .mg-btn--start-img-btn:active .btn-start-img { transform: scale(0.96); filter: brightness(1.25); } .mg-btn--home { background: linear-gradient(150deg, #5a2090 0%, #8840c8 100%); color: #fff; border: none; font-size: 15px; padding: 11px 24px; width: 100%; max-width: 260px; text-align: center; display: block; margin: 0 auto; box-shadow: 0 4px 16px rgba(88, 32, 144, 0.50); } .mg-btn--home:hover { background: linear-gradient(150deg, #8840c8 0%, #e050c0 100%); box-shadow: 0 6px 24px rgba(200, 60, 180, 0.55); } /* ─── リボンちゃんのセリフ ─── */ .mg-ribbon-msg { margin-top: auto; width: 100%; } .mg-ribbon-msg-bubble { background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,200,240,0.10)); border: 1px solid rgba(255,255,255,0.24); border-radius: 14px; border-bottom-left-radius: 4px; padding: 10px 14px; font-size: 13px; color: rgba(255,235,255,0.95); line-height: 1.6; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); transition: opacity 0.4s ease; } .mg-ribbon-msg-bubble::after { content: ''; position: absolute; bottom: -8px; left: 16px; border-left: 8px solid transparent; border-right: 0px solid transparent; border-top: 8px solid rgba(255,255,255,0.24); } .mg-ribbon-msg-name { margin: 4px 0 0 4px; font-size: 11px; color: rgba(255,180,220,0.70); letter-spacing: 0.5px; } /* ─── ボード下スタートエリア ─── */ .mg-start-area { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; margin-top: -24px; width: 100%; } .mg-start-deco { font-size: 13px; color: rgba(255,200,240,0.5); letter-spacing: 4px; } .mg-start-area .mg-btn--start { font-size: 22px; padding: 9px 0; letter-spacing: 3px; width: 80%; max-width: 400px; text-align: center; } /* ─── ゲーム画面 ─── */ .mg-screen--game { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .mg-hud { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 510px; color: #fff; } .mg-hud-score-pill { background: linear-gradient(150deg, #5a2090, #8840c8); border-radius: 999px; padding: 8px 22px; font-size: 20px; font-weight: 800; color: rgba(220, 190, 255, 0.90); box-shadow: 0 0 16px rgba(88, 32, 144, 0.70), inset 0 1px 0 rgba(255,255,255,0.18); letter-spacing: 1px; white-space: nowrap; } /* 数字だけゴールド */ .mg-hud-score-pill span { color: #ffd700; text-shadow: 0 0 12px rgba(255, 215, 0, 0.70); } .mg-hud-center-ornament { font-size: 13px; color: #ffd700; letter-spacing: 3px; text-shadow: 0 0 8px rgba(255,215,0,0.9), 0 0 18px rgba(255,180,0,0.5); animation: mgOrnamentGlow 3s ease-in-out infinite; flex: 1; text-align: center; padding: 0 8px; } .mg-hud-score { font-size: 22px; font-weight: 700; text-shadow: 0 2px 8px rgba(255,100,200,0.6); } .mg-hud-score-num { font-size: 28px; } .mg-hud-timer { font-size: 34px; font-weight: 900; color: #ffe066; min-width: 52px; text-align: center; transition: color 0.3s; text-shadow: 0 0 14px rgba(255,220,0,0.5); } .mg-timer--danger { color: #ff3333 !important; animation: timerPulse 0.45s ease infinite alternate; } @keyframes timerPulse { from { transform: scale(1); text-shadow: 0 0 8px rgba(255,50,50,0.5); } to { transform: scale(1.22); text-shadow: 0 0 20px rgba(255,50,50,1.0), 0 0 40px rgba(255,80,80,0.6); } } /* ── ボード周囲のゆっくり光る星 ── */ .mg-board-star { position: fixed; pointer-events: none; z-index: 50; opacity: 0; animation: mgBoardStar 2.4s ease-in-out forwards; line-height: 1; } @keyframes mgBoardStar { 0% { opacity: 0; transform: scale(0.3) rotate(-20deg); } 22% { opacity: 1; transform: scale(1.25) rotate(5deg); filter: drop-shadow(0 0 5px currentColor); } 55% { opacity: 0.7; transform: scale(1.0) rotate(0deg); } 85% { opacity: 0.2; transform: scale(0.8) rotate(12deg); } 100% { opacity: 0; transform: scale(0.3) rotate(20deg); } } /* ── キラキラパーティクル ── */ .mg-sparkle { position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); animation: mgSparkleOut 0.6s ease-out forwards; } @keyframes mgSparkleOut { 0% { transform: translate(-50%, -50%) scale(1.3) rotate(0deg); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0) rotate(120deg); opacity: 0; } } /* ── コンボテキスト ── */ .mg-combo-text { position: fixed; top: 48%; left: 50%; transform: translate(-50%, -50%); font-size: 26px; font-weight: 900; color: #ffe066; text-shadow: 0 0 16px rgba(255,200,0,0.9), 0 0 40px rgba(255,160,0,0.5), 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; z-index: 9999; white-space: nowrap; animation: mgComboAnim 1.4s ease forwards; letter-spacing: 1px; } .mg-combo-text--big { font-size: 34px; color: #ff80d8; text-shadow: 0 0 20px rgba(255,100,200,1.0), 0 0 50px rgba(200,60,255,0.6), 0 2px 10px rgba(0,0,0,0.7); } @keyframes mgComboAnim { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 35% { transform: translate(-50%, -52%) scale(1.0); } 75% { opacity: 1; transform: translate(-50%, -58%) scale(1.0); } 100% { opacity: 0; transform: translate(-50%, -68%) scale(0.9); } } /* ── スコアバウンス ── */ .mg-score-bounce { animation: mgScoreBounce 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; display: inline-block; } @keyframes mgScoreBounce { 0% { transform: scale(1); } 28% { transform: scale(1.40); } 55% { transform: scale(0.92); } 78% { transform: scale(1.12); } 100% { transform: scale(1); } } .mg-board-wrap { position: relative; width: 100%; max-width: 510px; border-radius: 24px; box-shadow: 0 0 0 2px rgba(255,80,200,0.50), 0 0 18px rgba(255,80,200,0.40), 0 0 48px rgba(200,60,255,0.28), 0 0 80px rgba(255,60,160,0.18), 0 20px 60px rgba(0,0,0,0.55); transition: box-shadow 0.5s ease; } .mg-board-wrap--active { box-shadow: 0 0 0 2px rgba(255,80,200,0.30), 0 0 10px rgba(255,80,200,0.20), 0 0 25px rgba(200,60,255,0.12), 0 0 50px rgba(255,60,160,0.07); } /* ボード四隅の✦キラキラ */ .mg-board-wrap::before, .mg-board-wrap::after { content: '✦'; position: absolute; color: #ffd700; font-size: 22px; text-shadow: 0 0 5px rgba(255,215,0,0.65), 0 0 12px rgba(255,180,0,0.35); pointer-events: none; z-index: 6; animation: mgCornerSpark 3s ease-in-out infinite; } .mg-board-wrap::before { top: -16px; left: -16px; animation-delay: 0s; } .mg-board-wrap::after { top: -16px; right: -16px; animation-delay: 1.5s; } @keyframes mgCornerSpark { 0%, 100% { opacity: 0.15; transform: scale(0.70) rotate(-10deg); } 50% { opacity: 0.65; transform: scale(1.20) rotate(10deg); } } /* カウントダウン・オーバーレイは新CSS（mg-board-overlay）で管理 */ /* ─── ボード ─── */ .mg-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; background: linear-gradient(135deg, rgba(40,8,72,0.92), rgba(72,8,105,0.85)); border-radius: 22px; padding: 10px; border: none; touch-action: manipulation; width: 100%; box-sizing: border-box; box-shadow: inset 0 0 40px rgba(255,80,200,0.10), inset 0 2px 0 rgba(255,255,255,0.06); } .mg-tile { aspect-ratio: 1; border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; user-select: none; position: relative; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; border: 2px solid rgba(255,255,255,0.25); box-shadow: 0 6px 16px rgba(0,0,0,0.38), 0 3px 6px rgba(0,0,0,0.22), inset 0 5px 14px rgba(255,255,255,0.22), inset 3px 3px 10px rgba(255,255,255,0.10), inset 0 -5px 10px rgba(0,0,0,0.25), inset 0 0 20px rgba(255,255,255,0.04); } /* ── 内側リング ── */ .mg-tile::before { content: ''; position: absolute; inset: 4px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.18); pointer-events: none; z-index: 3; box-shadow: inset 0 2px 0 rgba(255,255,255,0.20), inset 0 -2px 0 rgba(0,0,0,0.12); } /* ── 上部の光沢（控えめに） ── */ .mg-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 175deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.00) 50% ); pointer-events: none; z-index: 4; } .mg-tile:active { transform: translateY(3px) scale(0.92); box-shadow: 0 2px 6px rgba(0,0,0,0.32), inset 0 3px 8px rgba(0,0,0,0.20), inset 0 -2px 4px rgba(255,255,255,0.25); } @media (hover: hover) { .mg-tile:hover { transform: translateY(-3px) scale(1.05); border-color: rgba(255,255,255,0.88); box-shadow: 0 8px 22px rgba(0,0,0,0.38), 0 3px 8px rgba(0,0,0,0.20), 0 0 14px rgba(255,200,240,0.28), inset 0 6px 16px rgba(255,255,255,0.72), inset 3px 3px 12px rgba(255,255,255,0.34), inset 0 -5px 10px rgba(0,0,0,0.20), inset 0 0 22px rgba(255,255,255,0.14); } } .mg-tile-img { position: relative; z-index: 1; pointer-events: none; } /* 画像タイル（全タイル共通ベース） */ .mg-tile--full .mg-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 13px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) saturate(1.08) brightness(1.03); } /* ① タイルごとの濃さ・彩度を個別調整 */ /* 0:リボン — 少し薄いので彩度+明度アップ */ .mg-tile[data-tile-type="0"] .mg-tile-img { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28)) saturate(1.30) brightness(1.10) contrast(1.06); } /* 1:王冠 — もともとはっきり。微調整のみ */ .mg-tile[data-tile-type="1"] .mg-tile-img { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28)) saturate(1.10) brightness(1.05); } /* 2:スティック — 青系、少し鮮明に */ .mg-tile[data-tile-type="2"] .mg-tile-img { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28)) saturate(1.18) brightness(1.07); } /* 3:虹 — ② 淡いので大きく + 明るく */ .mg-tile[data-tile-type="3"] .mg-tile-img { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.22)) saturate(1.35) brightness(1.18) contrast(1.08); transform: scale(1.10); transform-origin: center center; } /* 4:ティアラ — 少し薄いのでアップ */ .mg-tile[data-tile-type="4"] .mg-tile-img { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28)) saturate(1.28) brightness(1.10) contrast(1.05); } /* 5:ハート — もともと濃い。ほぼそのまま */ .mg-tile[data-tile-type="5"] .mg-tile-img { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28)) saturate(1.05) brightness(1.03); } /* 6:羽 — 薄い白系。明度と彩度アップ */ .mg-tile[data-tile-type="6"] .mg-tile-img { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.25)) saturate(1.20) brightness(1.10); } /* 7:ガラスの靴 — ほぼ適切。少しシャープに */ .mg-tile[data-tile-type="7"] .mg-tile-img { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28)) saturate(1.15) brightness(1.06); } /* キャラタイル（フォールバック） */ .mg-tile--char .mg-tile-img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); } .mg-tile--selected { transform: translateY(-4px) scale(1.12); border-color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,120,210,0.6), 0 10px 28px rgba(255,120,210,0.55), 0 0 30px rgba(255,80,200,0.35), inset 0 1px 0 rgba(255,255,255,0.95); z-index: 2; animation: mgTileSelect 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes mgTileSelect { from { transform: scale(1) translateY(0); } to { transform: translateY(-4px) scale(1.12); } } .mg-tile--match { animation: mgMatchFlash 0.4s ease forwards; } @keyframes mgMatchFlash { 0% { transform: scale(1); opacity: 1; filter: brightness(1); box-shadow: 0 0 0 2px rgba(255,80,200,0.45); } 35% { transform: scale(1.28); opacity: 1; filter: brightness(2.0); box-shadow: 0 0 28px rgba(255,80,200,0.90), 0 0 60px rgba(200,60,255,0.55); } 100% { transform: scale(0); opacity: 0; filter: brightness(2.8); box-shadow: 0 0 40px rgba(255,120,220,0.70); } } .mg-tile--shake { animation: mgShake 0.35s ease; } @keyframes mgShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* 新タイルが上から落ちてくるアニメーション */ .mg-tile--new { animation: mgFallIn 0.28s ease forwards; } @keyframes mgFallIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ─── 浮かぶスコア ─── */ .mg-float-score { position: fixed; pointer-events: none; font-size: 22px; font-weight: 900; color: #ffe066; text-shadow: 0 2px 8px rgba(0,0,0,0.5); animation: mgFloatUp 0.7s ease forwards; transform: translateX(-50%); z-index: 9999; } @keyframes mgFloatUp { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-50px); } } /* ─── 結果画面 ─── */ .mg-screen--result { display: flex; align-items: center; justify-content: center; } .mg-result-inner { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 24px; padding: 32px 28px; text-align: center; color: #fff; backdrop-filter: blur(8px); width: 100%; box-sizing: border-box; } .mg-result-chara { width: 162px; height: 162px; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(255,100,200,0.5)) drop-shadow(0 0 30px rgba(200,80,255,0.25)); } .mg-result-chara-name { font-size: 15px; font-weight: 800; color: #ffe8f8; text-shadow: 0 0 10px rgba(255,120,200,0.6); margin: 0; } .mg-result-stars { display: flex; gap: 2px; justify-content: center; } .mg-result-star { font-size: 16px; color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.7); } .mg-result-level { background: linear-gradient(135deg, #ff3d9a, #cc44ff); border-radius: 999px; padding: 3px 14px; font-size: 13px; font-weight: 800; color: #fff; letter-spacing: 0.5px; } .mg-result-msg { font-size: 13px; font-weight: 600; margin: 0; opacity: 0.85; text-shadow: 0 2px 8px rgba(255,100,200,0.5); } .mg-live-score { width: 100%; background: linear-gradient(150deg, rgba(60, 15, 100, 0.70), rgba(100, 40, 160, 0.55)); border: 1px solid rgba(150, 80, 220, 0.30); border-radius: 14px; padding: 8px 12px; text-align: center; } .mg-live-score-label { font-size: 11px; color: rgba(210, 170, 255, 0.70); display: block; } .mg-live-score-num { display: flex; align-items: baseline; justify-content: center; gap: 4px; } .mg-live-score-num span:first-child { font-size: 56px; font-weight: 900; color: #ffe066; line-height: 1; text-shadow: 0 0 16px rgba(255,220,0,0.6), 0 0 32px rgba(255,200,0,0.3); } .mg-live-score-unit { font-size: 16px; color: rgba(200, 160, 255, 0.80); } .mg-combo-wrap { display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255,120,0,0.12); border: 1px solid rgba(255,140,0,0.3); border-radius: 10px; padding: 5px 14px; width: 100%; } .mg-combo-label { font-size: 11px; opacity: 0.75; } .mg-combo-num { font-size: 20px; font-weight: 900; color: #ff9020; text-shadow: 0 0 10px rgba(255,140,0,0.5); } .mg-result-score-wrap { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 8px; } .mg-result-score-label { font-size: 14px; opacity: 0.7; } .mg-result-score-num { font-size: 52px; font-weight: 900; color: #ffe066; line-height: 1; } .mg-result-score-unit { font-size: 18px; opacity: 0.8; } .mg-result-coins { font-size: 20px; font-weight: 700; color: #ffe066; } .mg-result-hs { font-size: 12px; opacity: 0.65; } .mg-result-hs--new { color: #ffe066; opacity: 1; font-weight: 700; font-size: 13px; } /* ─── ホームボタン（右パネル用） ─── */ .mg-panel--result .mg-btn--home { background: linear-gradient(150deg, #5a2090 0%, #8840c8 100%); border: none; color: #fff; font-size: 14px; padding: 10px 16px; box-shadow: 0 4px 16px rgba(88, 32, 144, 0.50); width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; } .mg-panel--result .mg-btn--home:hover { background: linear-gradient(150deg, #8840c8 0%, #e050c0 100%); box-shadow: 0 6px 24px rgba(200, 60, 180, 0.55); transform: scale(1.03); } /* ━━━ 共通：ホームに戻るボタン画像 ━━━ */ .btn-home-link { display: inline-block; text-decoration: none; } .game-back-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: rgba(255, 200, 240, 0.6); text-decoration: none; transition: color 0.2s; } .game-back-link:hover { color: rgba(255, 160, 220, 0.95); } .btn-home-img { width: 240px; height: auto; display: block; transition: transform 0.15s ease, filter 0.15s ease; } .btn-home-link:hover .btn-home-img { transform: scale(1.05); filter: brightness(1.12); } .mg-panel--result .btn-home-img { width: 160px; } .btn-home-link:active .btn-home-img { transform: scale(0.96); filter: brightness(1.2); } /* ━━━ 共通：画像ボタン（ギブアップダイアログ等） ━━━ */ .pz-img-btn { background: none; border: none; padding: 0; cursor: pointer; display: block; mix-blend-mode: lighten; } .pz-img-btn-img { width: 200px; height: auto; display: block; transition: transform 0.15s, filter 0.15s; } .pz-img-btn:hover .pz-img-btn-img { transform: scale(1.05); filter: brightness(1.12); } .pz-img-btn:active .pz-img-btn-img { transform: scale(0.96); filter: brightness(1.25); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ リボンポーション ゲーム ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body:has(.pg-wrap) { background: #1a0535; padding-top: 68px; } .pg-wrap { min-height: calc(100vh - 68px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px 16px 40px; box-sizing: border-box; position: relative; } .pg-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url(/assets/potion_bg.png); background-size: cover; background-position: center center; opacity: 0.40; } .pg-wrap::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(30, 5, 60, 0.20) 0%, rgba(20, 5, 50, 0.30) 50%, rgba(0, 0, 0, 0.45) 100%); } .pg-wrap > * { position: relative; z-index: 1; } /* ─── 各画面 ─── */ .pg-screen { width: 100%; max-width: 540px; } /* ─── スタート画面 ─── */ .pg-start-inner { background: rgba(60, 20, 100, 0.55); border: 1px solid rgba(200, 150, 255, 0.30); border-radius: 24px; padding: 28px 24px; backdrop-filter: blur(16px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .pg-label { font-size: 13px; color: rgba(220, 180, 255, 0.7); font-weight: 600; letter-spacing: 1px; margin: 0; } .pg-title { font-size: 32px; font-weight: 900; color: #fff; margin: 0; text-shadow: 0 0 20px rgba(200, 100, 255, 0.7), 0 2px 8px rgba(0,0,0,0.4); letter-spacing: 2px; } .pg-desc { font-size: 14px; color: rgba(240, 210, 255, 0.85); line-height: 1.6; margin: 0; } .pg-score-board { display: flex; gap: 16px; width: 100%; } .pg-score-item { flex: 1; background: rgba(40, 10, 70, 0.5); border: 1px solid rgba(180, 120, 255, 0.20); border-radius: 12px; padding: 10px; text-align: center; } .pg-score-label { display: block; font-size: 11px; color: rgba(200, 160, 255, 0.7); margin-bottom: 4px; } .pg-score-value { font-size: 16px; font-weight: 700; color: #fff; } .pg-score-value strong { color: #ffd700; } .pg-score-value--used { color: rgba(200, 160, 255, 0.5); font-size: 13px; } .pg-score-value--ready { color: #ffd700; } .pg-difficulty-table { width: 100%; display: flex; flex-direction: column; gap: 6px; } .pg-diff-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; border: 1px solid; } .pg-diff-row--easy { background: rgba(60,200,120,0.10); border-color: rgba(60,200,120,0.30); } .pg-diff-row--normal { background: rgba(100,140,255,0.10); border-color: rgba(100,140,255,0.30); } .pg-diff-row--hard { background: rgba(255,80,160,0.10); border-color: rgba(255,80,160,0.30); } .pg-diff-row--oni { background: rgba(160,40,255,0.12); border-color: rgba(160,40,255,0.40); } .pg-diff-left { display: flex; align-items: center; gap: 8px; } .pg-diff-right { display: flex; align-items: center; gap: 10px; } .pg-diff-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 20px; letter-spacing: 0.02em; } .pg-diff-badge--easy { background: rgba(60,200,120,0.85); color: #fff; } .pg-diff-badge--normal { background: rgba(80,130,255,0.85); color: #fff; } .pg-diff-badge--hard { background: rgba(255,60,140,0.85); color: #fff; } .pg-diff-badge--oni { background: linear-gradient(135deg, #a028ff, #ff2080); color: #fff; } .pg-diff-stages { font-size: 13px; color: rgba(230,200,255,0.90); font-weight: 600; } .pg-diff-colors { font-size: 11px; color: rgba(200,170,255,0.70); } .pg-diff-coin { font-size: 13px; font-weight: 700; color: #ffd700; text-shadow: 0 0 8px rgba(255,210,60,0.6); } .pg-how-to { width: 100%; display: flex; flex-direction: column; gap: 6px; } .pg-how-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(230, 200, 255, 0.85); } .pg-how-num { width: 24px; height: 24px; background: linear-gradient(135deg, #c060ff, #ff60c0); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; } /* ─── ボタン ─── */ .pg-btn { display: inline-block; padding: 13px 36px; border-radius: 50px; font-size: 16px; font-weight: 700; cursor: pointer; border: none; color: #fff; background: linear-gradient(150deg, #6a20c0, #c040c0); box-shadow: 0 4px 20px rgba(100, 30, 180, 0.55), inset 0 1px 0 rgba(255,255,255,0.18); transition: transform 0.15s, box-shadow 0.15s, background 0.2s; } .pg-btn:hover { background: linear-gradient(150deg, #9040e0, #e050d0); transform: scale(1.04); box-shadow: 0 6px 28px rgba(180, 60, 220, 0.60); } .pg-btn:active { transform: scale(0.96); } .pg-btn--start { font-size: 18px; padding: 15px 48px; } .pg-btn--undo, .pg-btn--reset, .pg-btn--giveup { font-size: 13px; padding: 9px 18px; background: linear-gradient(150deg, #3a1060, #6a2090); box-shadow: 0 2px 12px rgba(60, 20, 120, 0.4); } /* ─── ゲーム画面 ─── */ .pg-game-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .pg-game-hud { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 480px; } .pg-stage-badge { background: linear-gradient(135deg, #c060ff, #ff60b0); border-radius: 999px; padding: 6px 20px; font-size: 15px; font-weight: 800; color: #fff; box-shadow: 0 0 14px rgba(200, 80, 255, 0.5); } .pg-move-count { font-size: 14px; color: rgba(220, 180, 255, 0.8); } /* ─── 棚 ─── */ .pg-shelf { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px; padding: 24px 20px 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 40px rgba(0, 0, 0, 0.35); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); width: 100%; max-width: 480px; box-sizing: border-box; } /* 棚の木目ライン */ .pg-shelf::before { content: ''; position: absolute; bottom: 30%; left: 10%; right: 10%; height: 3px; background: linear-gradient(90deg, transparent, rgba(180,120,255,0.2), transparent); border-radius: 2px; } /* ─── ボードレイアウト ─── */ .pg-board-row { display: flex; gap: 10px; justify-content: center; align-items: center; } .pg-board-row--top { margin-bottom: 8px; } .pg-board-row--middle { gap: 12px; align-items: center; } .pg-board-row--bottom { margin-top: 8px; } .pg-board-col { display: flex; flex-direction: column; gap: 10px; align-items: center; } /* ─── 星型ポーション（中央の大きい瓶） ─── */ /* ───────────────────────────────────────── 魔法陣 (Magic Circle) ───────────────────────────────────────── */ .pg-magic-vessel { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; } .pg-magic-circle { width: 200px; height: 200px; position: relative; display: flex; align-items: center; justify-content: center; transition: filter 0.8s ease; filter: drop-shadow(0 0 8px rgba(255,100,220,0.35)); } /* ── 回転リング ── */ .pg-magic-ring { position: absolute; border-radius: 50%; border: 1.5px solid; transition: border-color 0.9s, box-shadow 0.9s; pointer-events: none; } .pg-magic-ring--outer { width: 190px; height: 130px; /* 楕円 */ border-color: rgba(255,120,220,0.30); animation: pgMagicRotate 14s linear infinite; } .pg-magic-ring--mid { width: 140px; height: 95px; /* 楕円 */ border-style: dashed; border-color: rgba(255,120,220,0.25); animation: pgMagicRotate 8s linear infinite reverse; } .pg-magic-ring--inner { width: 80px; height: 80px; border-color: rgba(255,120,220,0.22); animation: pgMagicRotate 4s linear infinite; } @keyframes pgMagicRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── SVG模様 ── */ .pg-magic-svg { position: absolute; width: 200px; height: 200px; pointer-events: none; transition: opacity 0.9s; overflow: visible; } /* リング */ .pg-ms-ring { stroke: rgba(255,120,220,0.28); transition: stroke 0.9s, filter 0.9s; } /* 目盛り */ .pg-ms-tick { stroke: rgba(255,120,220,0.35); stroke-width: 1.5; transition: stroke 0.9s; } /* ペンタグラム線 */ .pg-ms-star { stroke: rgba(255,100,200,0.25); stroke-width: 0.9; transition: stroke 0.9s, opacity 0.9s; } /* 中心の星アウトライン */ .pg-ms-center-star { stroke: rgba(255,120,220,0.30); transition: stroke 0.9s, filter 0.9s; } /* 中央オーブ */ .pg-magic-core { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,100,220,0.18); border: 1.5px solid rgba(255,120,220,0.40); transition: background 0.9s, box-shadow 0.9s, border-color 0.9s; z-index: 2; pointer-events: none; } /* ── 進捗レベル (0〜5) ── */ /* Level 0: 休眠 */ .pg-magic-circle[data-level="0"] { filter: drop-shadow(0 0 6px rgba(255,100,220,0.20)); } /* Level 1: 25% ピンク点灯 */ .pg-magic-circle[data-level="1"] { filter: drop-shadow(0 0 10px rgba(255,100,220,0.45)); } .pg-magic-circle[data-level="1"] .pg-magic-ring { border-color: rgba(255,120,220,0.55); box-shadow: 0 0 8px rgba(255,100,220,0.35); } .pg-magic-circle[data-level="1"] .pg-ms-ring { stroke: rgba(255,120,220,0.50); } .pg-magic-circle[data-level="1"] .pg-ms-tick { stroke: rgba(255,120,220,0.60); } .pg-magic-circle[data-level="1"] .pg-ms-star { stroke: rgba(255,100,200,0.45); } .pg-magic-circle[data-level="1"] .pg-ms-center-star{ stroke: rgba(255,120,220,0.55); } .pg-magic-circle[data-level="1"] .pg-magic-core { box-shadow: 0 0 14px rgba(255,100,220,0.7); } /* Level 2: 50% ピンク→紫 */ .pg-magic-circle[data-level="2"] { filter: drop-shadow(0 0 16px rgba(200,100,255,0.55)); } .pg-magic-circle[data-level="2"] .pg-magic-ring { border-color: rgba(200,120,255,0.75); box-shadow: 0 0 14px rgba(200,100,255,0.50); } .pg-magic-circle[data-level="2"] .pg-ms-ring { stroke: rgba(200,130,255,0.70); } .pg-magic-circle[data-level="2"] .pg-ms-tick { stroke: rgba(200,130,255,0.80); } .pg-magic-circle[data-level="2"] .pg-ms-star { stroke: rgba(200,100,255,0.60); } .pg-magic-circle[data-level="2"] .pg-ms-center-star{ stroke: rgba(220,150,255,0.75); filter: drop-shadow(0 0 4px rgba(200,100,255,0.6)); } .pg-magic-circle[data-level="2"] .pg-magic-core { background: rgba(200,120,255,0.38); box-shadow: 0 0 22px rgba(200,100,255,0.80); } /* Level 3: 75% 紫→金 */ .pg-magic-circle[data-level="3"] { filter: drop-shadow(0 0 22px rgba(220,150,80,0.55)); } .pg-magic-circle[data-level="3"] .pg-magic-ring { border-color: rgba(255,200,80,0.80); box-shadow: 0 0 20px rgba(255,180,60,0.55); } .pg-magic-circle[data-level="3"] .pg-ms-ring { stroke: rgba(255,200,80,0.75); } .pg-magic-circle[data-level="3"] .pg-ms-tick { stroke: rgba(255,200,80,0.90); } .pg-magic-circle[data-level="3"] .pg-ms-star { stroke: rgba(255,180,60,0.65); } .pg-magic-circle[data-level="3"] .pg-ms-center-star{ stroke: rgba(255,220,100,0.90); filter: drop-shadow(0 0 6px rgba(255,200,60,0.75)); } .pg-magic-circle[data-level="3"] .pg-magic-core { background: rgba(255,200,80,0.50); border-color: rgba(255,200,60,0.7); box-shadow: 0 0 30px rgba(255,180,60,0.90), 0 0 60px rgba(255,150,200,0.40); animation: pgMagicCorePulse 0.7s ease-in-out infinite; } /* Level 4: 100% フルゴールド */ .pg-magic-circle[data-level="4"] { filter: drop-shadow(0 0 28px rgba(255,210,60,0.80)) drop-shadow(0 0 50px rgba(255,150,200,0.40)); } .pg-magic-circle[data-level="4"] .pg-magic-ring { border-color: rgba(255,230,100,1); box-shadow: 0 0 28px rgba(255,210,60,0.75), 0 0 50px rgba(255,180,60,0.40); } .pg-magic-circle[data-level="4"] .pg-ms-ring { stroke: rgba(255,230,100,1); } .pg-magic-circle[data-level="4"] .pg-ms-tick { stroke: rgba(255,230,100,1); } .pg-magic-circle[data-level="4"] .pg-ms-star { stroke: rgba(255,210,60,0.90); } .pg-magic-circle[data-level="4"] .pg-ms-center-star{ stroke: rgba(255,240,120,1); filter: drop-shadow(0 0 10px rgba(255,220,60,1)) drop-shadow(0 0 20px rgba(255,200,60,0.7)); } .pg-magic-circle[data-level="4"] .pg-magic-core { background: rgba(255,230,80,0.80); border-color: rgba(255,220,60,1); box-shadow: 0 0 40px rgba(255,210,60,1), 0 0 80px rgba(255,160,200,0.60); animation: pgMagicCorePulse 0.45s ease-in-out infinite; } /* Level 5: 錬成発動！ */ .pg-magic-circle[data-level="5"] { animation: pgMagicExplode 0.7s ease-out forwards; } .pg-magic-circle[data-level="5"] .pg-magic-ring { border-color: rgba(255,255,220,1); box-shadow: 0 0 50px rgba(255,255,180,1); } .pg-magic-circle[data-level="5"] .pg-ms-ring, .pg-magic-circle[data-level="5"] .pg-ms-tick, .pg-magic-circle[data-level="5"] .pg-ms-star, .pg-magic-circle[data-level="5"] .pg-ms-center-star { stroke: rgba(255,255,220,1); } .pg-magic-circle[data-level="5"] .pg-magic-core { background: #fff; box-shadow: 0 0 70px #fff, 0 0 120px rgba(255,230,100,0.90); } @keyframes pgMagicExplode { 0% { transform: scale(1); filter: drop-shadow(0 0 25px rgba(255,210,60,0.9)); } 40% { transform: scale(1.40); filter: drop-shadow(0 0 100px rgba(255,255,200,1)); } 100% { transform: scale(1.18); filter: drop-shadow(0 0 45px rgba(255,210,60,0.8)); } } @keyframes pgMagicCorePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } } /* ── 進捗ラベル ── */ .pg-magic-info { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 36px; } .pg-magic-pct { font-size: 22px; font-weight: 900; color: rgba(255,160,230,0.90); text-shadow: 0 0 10px rgba(255,100,220,0.7); line-height: 1; transition: color 0.7s, text-shadow 0.7s; } .pg-magic-circle[data-level="3"] ~ .pg-magic-info .pg-magic-pct, .pg-magic-circle[data-level="4"] ~ .pg-magic-info .pg-magic-pct, .pg-magic-circle[data-level="5"] ~ .pg-magic-info .pg-magic-pct { color: #ffd700; text-shadow: 0 0 12px rgba(255,210,60,0.9); } .pg-magic-msg { font-size: 11px; color: rgba(220, 180, 255, 0.85); font-weight: 600; } /* ── 星型ポーション誕生アニメーション ── */ .pg-star-potion { width: 70px; height: 70px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: linear-gradient(135deg, #ffd860, #ff9de0, #80d8ff, #ff60b0); background-size: 200% 200%; animation: pgPotionRainbow 2s linear infinite paused; position: absolute; opacity: 0; pointer-events: none; z-index: 10; } .pg-star-potion--born { animation: pgPotionBorn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, pgPotionRainbow 1.5s linear 0.3s infinite; } @keyframes pgPotionBorn { 0% { opacity: 0; transform: scale(0) translateY(0); } 20% { opacity: 1; } 55% { transform: scale(1.8) translateY(-70px); filter: drop-shadow(0 0 24px rgba(255,220,80,1)) drop-shadow(0 0 48px rgba(255,100,220,0.8)); } 75% { transform: scale(1.3) translateY(-80px); } 100% { opacity: 1; transform: scale(1.5) translateY(-85px); filter: drop-shadow(0 0 14px rgba(255,200,80,0.9)) drop-shadow(0 0 28px rgba(255,100,220,0.6)); } } @keyframes pgPotionRainbow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } } /* ── シェイク ── */ .pg-shake { animation: pgShake 0.4s ease !important; } @keyframes pgShake { 0% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } 100% { transform: translateX(0); } } /* ─── 小瓶 ─── */ .pg-vial { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s; position: relative; } .pg-vial:hover { transform: translateY(-4px); } .pg-vial--selected { transform: translateY(-12px) scale(1.05); } .pg-vial--selected .pg-vial-body { box-shadow: 0 0 0 2px #ff80ff, 0 0 16px rgba(255, 80, 255, 0.7), 0 0 32px rgba(200, 60, 255, 0.4); } /* ネック部分 */ .pg-vial-neck { width: 18px; height: 14px; background: linear-gradient(to bottom, rgba(180,140,255,0.4), rgba(120,80,200,0.6)); border-radius: 4px 4px 0 0; border: 1px solid rgba(200, 160, 255, 0.4); border-bottom: none; } /* 本体 */ .pg-vial-body { width: 52px; height: 160px; border-radius: 0 0 26px 26px; border: 1.5px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.07); overflow: hidden; display: flex; flex-direction: column; box-shadow: inset 3px 0 8px rgba(255,255,255,0.12), inset -2px 0 4px rgba(0,0,0,0.15), inset 0 -4px 8px rgba(0,0,0,0.20), 0 4px 20px rgba(0,0,0,0.30); transition: box-shadow 0.2s; } /* 液体レイヤー */ .pg-liquid { flex: 1; transition: background 0.3s; position: relative; } .pg-liquid:not(.pg-liquid--empty)::after { content: ''; position: absolute; top: 2px; left: 4px; right: 4px; height: 3px; background: rgba(255,255,255,0.25); border-radius: 2px; } .pg-liquid--empty { background: transparent; } /* 完成時 */ .pg-vial--done .pg-vial-body { border-color: rgba(255, 215, 0, 0.7); box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.5), 0 0 16px rgba(255, 215, 0, 0.35), inset 2px 0 4px rgba(255,255,255,0.06); } .pg-vial-done-mark { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.7); font-weight: 900; } /* ─── ゲームボタン群 ─── */ .pg-game-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* ─── クリア画面 ─── */ .pg-clear-inner { background: rgba(60, 20, 100, 0.7); border: 1px solid rgba(255, 215, 0, 0.4); border-radius: 24px; padding: 40px 28px; backdrop-filter: blur(16px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; box-shadow: 0 0 40px rgba(255, 215, 0, 0.15); } .pg-clear-potion-wrap { display: flex; align-items: center; justify-content: center; } .pg-clear-star-icon { font-size: 72px; animation: pgClearStarBorn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; filter: drop-shadow(0 0 16px rgba(255,215,0,0.9)) drop-shadow(0 0 32px rgba(255,150,200,0.6)); } @keyframes pgClearStarBorn { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.3) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } .pg-clear-title { font-size: 36px; font-weight: 900; color: #fff; text-shadow: 0 0 20px rgba(255, 180, 255, 0.8); margin: 0; } .pg-clear-stage { font-size: 18px; color: #ffd700; font-weight: 700; margin: 0; } .pg-clear-coins { font-size: 16px; } .pg-clear-coin { color: #ffd700; font-weight: 700; } .pg-clear-coin--used { color: rgba(220, 180, 255, 0.6); font-size: 13px; } .pg-clear-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; } .pg-btn--next { font-size: 17px; padding: 14px 40px; background: linear-gradient(150deg, #c060ff, #ff6090); box-shadow: 0 4px 20px rgba(200, 60, 180, 0.55); } /* ─── モバイル対応 ─── */ @media (max-width: 600px) { .pg-vial-body { width: 42px; height: 128px; } .pg-vial-neck { width: 14px; height: 11px; } .pg-vials-area { gap: 8px; } .pg-title { font-size: 26px; } }