@charset "UTF-8";:root{--bg-primary: #0d0d0d;--bg-secondary: #1f1f1f;--black-line: #383838;--black-weak: #494a3a;--gray: #656565;--text-secondary: #838383;--yellow-dark: #cac200;--yellow-normal: #fff73e;--yellow-light: #fff73e80;--yellow-weak: #fff73e1a;--green-dark: #2e8510;--green-normal: #68ff4f;--green-light: #3eff5d;--bage-dark: #7f7f5d;--bage-normal: #bebe92;--red-dark: #b73e42;--red: #ff575c;--red-weak: #d77d86;--blue: #6ad4f6;--blue-dark: rgba(56, 144, 170, 1);--orange-gradient: linear-gradient(135deg, #ff6b6b, #ffa500);--txt-color: #fff;--link-color: var(--blue);--main-gradient: linear-gradient( 180deg, #ffea4f 0%, #fff73e 33.33%, #68ff4f 75%, #00e517 100% );--font: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-logo: "Righteous", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;--z-gnav: 10000001;--z-play-queue: 10000002;--z-volume: 10000003;--z-play-area: 100000000;--z-over-wrap: 1000000000000;--root_dir: "../img";--radius-full: calc(infinity * 1px)}.deck-index .decks{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.deck-index .decks .deck-new-button,.deck-index .decks .deck{display:flex;flex-direction:column;align-self:flex-start;width:calc((100% - 2rem) / 3);aspect-ratio:16/9;padding:1rem;border:.2rem solid var(--black-line);border-radius:.5rem;opacity:0;transition:.2s;animation:fadeInAndSlideUp .3s ease-in-out forwards}@media screen and (max-width: 1024px){.deck-index .decks .deck-new-button,.deck-index .decks .deck{width:100%}}.deck-index .decks .deck-new-button{justify-content:center}.deck-index .decks .deck-new-button:hover{border-color:var(--yellow-normal)}.deck-index .decks .deck-new-button:hover .plus,.deck-index .decks .deck-new-button:hover .txt{color:var(--yellow-normal);opacity:1}.deck-index .decks .deck-new-button .plus{font-size:5rem;text-align:center;opacity:.6;transition:.2s}.deck-index .decks .deck-new-button .spacer{width:100%}.deck-index .decks .deck-new-button .txt{font-size:1.5rem;font-weight:700;font-feature-settings:"palt";color:var(--txt-color);text-align:center;opacity:.6;transition:.2s}.deck-index .decks .deck{position:relative}.deck-index .decks .deck:before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:var(--bg-secondary);border-radius:.5rem;border:.2rem solid transparent;z-index:-1}.deck-index .decks .deck:after{position:absolute;top:-1rem;left:1rem;content:"選択中";font-size:1rem;font-weight:700;background:var(--orange-gradient);padding:.2rem 1.5rem;border-radius:var(--radius-full);color:var(--txt-color);text-shadow:0 0 .1rem rgba(0,0,0,.5);box-shadow:0 0 .2rem #00000080;animation:pulse-scale 3s infinite;display:none;transition:.2s;opacity:0;visibility:hidden}.deck-index .decks .deck.selected{border-color:var(--yellow-normal)}.deck-index .decks .deck.selected:before{animation:growSelected 1.5s ease-in-out infinite alternate;box-shadow:0 0 .2rem var(--yellow-normal),0 0 .7rem var(--yellow-normal),0 0 1rem var(--txt-color)}@keyframes growSelected{0%{box-shadow:0 0 .1rem var(--yellow-normal)}to{box-shadow:0 0 .2rem var(--yellow-normal),0 0 .2rem var(--yellow-normal),0 0 .5rem var(--yellow-normal),0 0 .7rem var(--yellow-normal),0 0 1rem var(--txt-color),0 0 1.2rem var(--txt-color)}}.deck-index .decks .deck.selected:after{opacity:1;visibility:visible;display:block}.deck-index .decks .deck .deck-header{position:absolute;z-index:0;width:100%;aspect-ratio:5/2;margin:-1rem;clip-path:polygon(0 0,100% 0,100% 68%,0% 100%)}.deck-index .decks .deck .cards{position:relative;top:0;z-index:1;display:flex;gap:.5rem;overflow-x:auto}.deck-index .decks .deck .cards .card{flex-shrink:0;width:calc((100% - 2rem)/5);filter:drop-shadow(0 0 .1rem rgba(0,0,0,.5))}.deck-index .decks .deck .deck-name-area{position:relative;z-index:1;display:flex;gap:.5rem;align-items:center;width:100%;padding:.3rem 1rem;margin:.5rem auto;font-weight:700;font-feature-settings:"palt";background:#fff;border:.1rem solid #fff;border-radius:var(--radius-full);box-shadow:0 0 .3rem #0003;transition:.2s}.deck-index .decks .deck .deck-name-area:has(.edit-button:hover){background:var(--bg-secondary);border-color:#fff}.deck-index .decks .deck .deck-name-area:has(.edit-button:hover) .name{color:#fff}.deck-index .decks .deck .deck-name-area .name{width:100%;overflow:hidden;font-size:.8rem;font-weight:700;color:var(--bg-primary);text-align:center;text-overflow:ellipsis;white-space:nowrap}.deck-index .decks .deck .deck-name-area .edit-button{position:absolute;top:50%;right:1rem;flex-shrink:0;width:1rem;aspect-ratio:1/1;margin-left:auto;background:url(/images/shared/icon/penBlack.svg) no-repeat center/contain;transition:.2s;transform:translateY(-50%)}.deck-index .decks .deck .deck-name-area .edit-button:hover{background-image:url(/images/shared/icon/penYellow.svg);filter:drop-shadow(0 0 .1rem rgba(0,0,0,.5))}.deck-index .decks .deck .actions{position:relative;z-index:1;display:flex;gap:.5rem;align-items:center;justify-content:center;width:100%;margin-top:auto}.deck-index .decks .deck .actions .default-button{width:calc((100% - .5rem)/2);padding:.3rem .5rem}.deck-index .default-modal .modal-body{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;width:90%;max-width:767px;min-height:40dvh;max-height:90dvh;overflow:hidden;background:var(--bg-primary);border-radius:.3rem;box-shadow:0 0 .5rem #ffffff80;transition:.2s;transform:translate(-50%,-50%)}@media screen and (max-width: 767px){.deck-index .default-modal .modal-body{top:unset;bottom:0;left:0;width:100%;min-height:auto;border-radius:0;border-top-left-radius:2rem;border-top-right-radius:2rem;transform:unset}.deck-index .default-modal .modal-body:before{align-self:center;width:10%;height:.3rem;margin-top:1rem;content:"";background:#d9d9d9;border-radius:var(--radius-full)}}.deck-index .default-modal .modal-body .head{display:flex;gap:1rem;align-items:center;width:100%;padding:1.4rem 2rem;border-bottom:.1rem solid var(--black-line)}@media screen and (max-width: 767px){.deck-index .default-modal .modal-body .head{padding-top:2rem;border-bottom:none}}.deck-index .default-modal .modal-body .head .modal-ttl{font-size:1.4rem;font-weight:700;font-feature-settings:"palt";color:#fff;text-align:center}@media screen and (max-width: 767px){.deck-index .default-modal .modal-body .head .modal-ttl{font-size:1.2rem}}.deck-index .default-modal .modal-body .head .back{width:1.2rem}@media screen and (max-width: 767px){.deck-index .default-modal .modal-body .head .back{display:block}}.deck-index .default-modal .modal-body .head .close-button{width:1.4rem;margin-left:auto}@media screen and (max-width: 767px){.deck-index .default-modal .modal-body .head .close-button{display:none}}.deck-index .default-modal .modal-body .head .back,.deck-index .default-modal .modal-body .head .close-button{aspect-ratio:1/1;transition:.2s}.deck-index .default-modal .modal-body .head .back>img,.deck-index .default-modal .modal-body .head .close-button>img{width:100%;height:100%;-webkit-user-select:none;user-select:none;object-fit:contain}.deck-index .default-modal .modal-body .head .back:hover,.deck-index .default-modal .modal-body .head .close-button:hover{opacity:.8}.deck-index .default-modal .modal-body .bottom{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;width:100%;padding:2rem}.deck-index .default-modal .modal-body .bottom .deck-name-input{width:100%;padding:.5rem 1rem;text-align:center;border-radius:var(--radius-full)}.deck-index .default-modal .modal-body .bottom .actions{display:flex;gap:1rem;align-items:center;justify-content:center;width:100%;margin-top:auto}.deck-index .default-modal .modal-body .bottom .actions .default-button{width:calc((100% - .5rem)/2);padding:.3rem .5rem}
