/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } body { color: #000; font-size: 16px; line-height: 1.5; background-color: #fdf4a7; display: none; } @media screen and (max-width: 768px) { body { font-size: 14px; } } a { color: inherit; text-decoration: none; } img { vertical-align: middle; } @font-face { font-family: Poppins; src: url("../assets/fonts/Poppins-Regular.ttf"); } @font-face { font-family: "Poppins Bold"; src: url("../assets/fonts/Poppins-SemiBold.ttf"); } @font-face { font-family: "Noto Sans JP"; src: url("../assets/fonts/NotoSansJP-Regular.ttf"); } @font-face { font-family: "Noto Sans JP Bold"; src: url("../assets/fonts/NotoSansJP-SemiBold.ttf"); } @font-face { font-family: Odin; src: url("../assets/fonts/Odin Rounded - Bold.otf"); } body { font-family: Poppins, "Noto Sans JP", sans-serif; } .l-container { padding: 50px 0 90px 0; } @media screen and (max-width: 768px) { .l-container { padding: 10px 0 35px 0; } } .p-firstView { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px; } @media screen and (max-width: 768px) { .p-firstView { gap: 20px; } } .p-firstView__heading { width: 90%; max-width: 1500px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; } @media screen and (max-width: 768px) { .p-firstView__heading { width: 96%; gap: 10px; } } .p-firstView__logoBox { position: relative; } .p-firstView__decoration { width: 16%; min-width: 170px; aspect-ratio: 1/1; position: absolute; top: -10px; left: -10px; } @media screen and (max-width: 768px) { .p-firstView__decoration { width: 28%; min-width: inherit; } } .p-firstView__main { width: 24%; min-width: 250px; margin: 0 auto; } @media screen and (max-width: 768px) { .p-firstView__main { width: 50%; max-width: 300px; min-width: inherit; } } .p-firstView__main > img { width: 100%; } .p-firstView__textBox { font-family: "Noto Sans JP Bold"; text-align: center; } .p-firstView__theme { font-size: 22px; } @media screen and (max-width: 768px) { .p-firstView__theme { font-size: 16px; } } .p-firstView__slideContainer { width: 70%; max-width: 1300px; min-width: 700px; margin: 0 auto; position: relative; } @media screen and (max-width: 768px) { .p-firstView__slideContainer { width: 80%; max-width: 500px; min-width: inherit; } } .p-firstView__slider { border: 2px solid #000; position: relative; } .p-firstView__slider img { width: 100%; } .p-firstView__popup--left { width: 15%; position: absolute; top: -8%; left: -4%; z-index: 100; -webkit-transition: 1.5s; transition: 1.5s; } @media screen and (max-width: 768px) { .p-firstView__popup--left { width: 28%; top: -4%; left: -7%; } } .p-firstView__popup--left .is-fadeIn { -webkit-transform: scale(2); transform: scale(2); } .p-firstView__popup--left img { width: 100%; } .p-firstView__popup--right { width: 20%; position: absolute; top: 90%; right: -4%; z-index: 100; } @media screen and (max-width: 768px) { .p-firstView__popup--right { width: 37%; top: 94%; right: -8%; } } .p-firstView__popup--right img { width: 100%; } .p-firstView__count { margin: 30px auto 0 auto; font-size: 14px; } @media screen and (max-width: 768px) { .p-firstView__count { margin-top: 10px; font-size: 10px; } } .p-firstView__countBox { text-align: center; } .p-index { width: 57%; max-width: 1020px; min-width: 600px; margin: 100px auto 0 auto; border-top: 1px solid #000; border-bottom: 1px solid #000; } @media screen and (max-width: 768px) { .p-index { width: 100%; min-width: initial; margin-top: 15%; } } .p-index__heading { padding: 16px; font-size: 14px; font-family: Poppins; text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; background-color: #fff; } @media screen and (max-width: 768px) { .p-index__heading { font-size: 12px; padding: 10px; } } .p-index__strong { font-family: "Poppins Bold"; } .p-index__slider { overflow: hidden; } .p-index__sliderWrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .p-index__sliderWrapper .is-new { z-index: 100; } .p-index__item { display: block; border: 1px solid #000; position: relative; } .p-index__item img { width: 100%; } .p-index__new { width: 40% !important; position: absolute; top: 2%; right: 2%; z-index: 100; } .p-monthly { width: 70%; max-width: 1300px; min-width: 700px; margin: 60px auto 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 95px; } @media screen and (max-width: 768px) { .p-monthly { width: 90%; max-width: 550px; min-width: inherit; margin: 35px auto 0 auto; gap: 60px; } } .p-monthly__heading { width: 34%; margin: 0 auto; } @media screen and (max-width: 768px) { .p-monthly__heading { width: 60%; max-width: 300px; } } .p-monthly__heading > img { width: 100%; } .p-monthly__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 100px; } @media screen and (max-width: 768px) { .p-monthly__list { row-gap: 64px; } } .p-monthly__list > li { width: 30%; } @media screen and (max-width: 768px) { .p-monthly__list > li { width: 48%; } } .p-monthly__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media screen and (max-width: 768px) { .p-monthly__item { gap: 10px; } } .p-monthly__imageBox { position: relative; } .p-monthly__imageTitle { height: 16%; position: absolute; top: -10%; left: 0; } .p-monthly__image { width: 100%; border: 2px solid #000; } @media screen and (max-width: 768px) { .p-monthly__image { border-width: 1px; } } .p-monthly__textBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } @media screen and (max-width: 768px) { .p-monthly__textBox { gap: 5px; } } .p-monthly__title { font-size: 18px; font-family: "Noto Sans JP Bold"; } @media screen and (max-width: 768px) { .p-monthly__title { font-size: 12px; word-break: break-all; } } .p-monthly__info { font-size: 18px; font-family: Poppins; } @media screen and (max-width: 768px) { .p-monthly__info { font-size: 12px; } } .p-monthly__category { font-family: "Poppins Bold"; } .p-footer { padding: 80px 0 100px 0; background-color: #fff; } .p-footer__inner { width: 300px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; } .p-footer__inner a { width: 60%; margin: auto; } @media screen and (max-width: 768px) { .p-footer__inner { width: 60%; max-width: 300px; } } .p-footer__copy { font-size: 10px; text-align: center; } @media screen and (min-width: 769px) { .u-hidden-pc { display: none !important; } } @media screen and (max-width: 768px) { .u-hidden-sp { display: none !important; } } .color-wh { color: #fff; } .color-gr { color: #000; } .font-en-bold { font-family: "Poppins Bold"; } .font-ja-bold { font-family: "Noto Sans JP Bold"; } .comingsoon { border-color: #000; }/*# sourceMappingURL=app.css.map */