@charset "UTF-8"; /*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) 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 */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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; appearance: revert; } /* reset default text opacity of input placeholder */ ::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; } * { --inner-percent: 4%; --inner-min-px: 15px; --header-height: 50px; --hover-opacity: .75; margin: 0; padding: 0; } *::before, *::after { pointer-events: none; } html { overflow: auto; font-size: 62.5%; } body { position: relative; overflow: hidden; min-width: 320px; line-height: 1.8; font-family: "Zen Maru Gothic", serif; color: #000; -webkit-text-size-adjust: 100%; font-size: clamp(1.4rem, 1.0655052265rem + 0.6968641115vw, 1.6rem); } body > h1, body h2, body h3, body h4, body p { word-break: keep-all; overflow-wrap: anywhere; } @supports not (font-size: clamp(14 * 0.1rem, 1.0655052265rem + 0.6968641115vw, 16 * 0.1rem)) { body { font-size: 1.4rem; } } @media (min-width: 768px) { body { font-size: 1.6rem; } } a { color: inherit; text-decoration: none; transition: all 0.3s ease-in; } @media (min-width: 768px) { @media not all and (pointer: coarse) { a:not([class]):hover { text-decoration: underline; } } } span { font-weight: inherit; } img { display: block; width: 100%; height: auto; } input, textarea, button { border: none; appearance: none; caret-color: #FF954D; cursor: pointer; } input:focus-visible, textarea:focus-visible, button:focus-visible { outline-color: #FF954D; } @media (max-width: 767.98px) { input, textarea, button { font-size: 1.6rem; } } /* SP/PC only*/ @media (max-width: 767.98px) { .u-sp { display: block; } } @media (min-width: 768px) { .u-sp { display: none !important; } } @media (max-width: 767.98px) { .u-pc { display: none !important; } } @media (min-width: 768px) { .u-pc { display: block; } } /* link */ .u-link { display: block; transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .u-link:hover { opacity: var(--hover-opacity); } } /* layout */ .u-inner { box-sizing: border-box; width: 100%; padding-left: min(var(--inner-percent), var(--inner-min-px)); padding-right: min(var(--inner-percent), var(--inner-min-px)); } @media (min-width: 768px) { .u-inner { max-width: 1200px; margin: auto; } } @media (min-width: 1200px) { .u-inner { padding-left: 0; padding-right: 0; } } /* font */ .u-uppercase { text-transform: uppercase; } .u-capitalize { text-transform: capitalize; } .u-en { font-family: "Oswald", serif; font-optical-sizing: auto; font-weight: var(--oswald-weight, 500); } .js-flip-card { position: relative; cursor: pointer; aspect-ratio: 223/332; } .js-flip-card img { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; transition: transform 0.4s ease-in-out; } @media not all and (pointer: coarse) { .js-flip-card img:hover { opacity: var(--hover-opacity); } } .js-flip-card img:last-child { transform: rotateY(180deg); } .js-flip-card.is-flipped img:first-child { transform: rotateY(180deg); } .js-flip-card.is-flipped img:last-child { transform: rotateY(0); } .js-side-scroll { animation: side-scroll 90s infinite linear 0.5s both; } @keyframes side-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .js-spinner { animation: text-spinner 90s infinite linear 0.5s both; } @keyframes text-spinner { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } /* keyframes */ @keyframes rotate-person01-sp { 0% { transform: rotate(-10deg); } 100% { transform: rotate(-20deg); } } @keyframes rotate-person01-pc { 0% { transform: rotate(0); } 100% { transform: rotate(-10deg); } } @keyframes rotate-person02 { 0% { transform: rotate(-5deg); } 100% { transform: rotate(4deg); } } @keyframes rotate-person03 { 0% { transform: rotate(5deg); } 100% { transform: rotate(-4deg); } } @keyframes rotate-left { 0% { transform: rotate(-9deg); } 100% { transform: rotate(9deg); } } @keyframes rotate-right { 0% { transform: rotate(12deg); } 100% { transform: rotate(-12deg); } } /* .l-header ================================================ */ .l-header { padding: 5vw 0; } .l-header__logo img { width: 15vw; margin: auto; } @media (min-width: 768px) { .l-header { padding: 25px 0; } .l-header__logo img { width: 90px; } } /* .l-footer ================================================ */ .l-footer { position: relative; padding-top: 20px; padding-bottom: 10px; background-color: #FF954D; } .l-footer::before { content: ""; display: inline-block; position: absolute; transform: rotate(-13deg); width: 90px; height: 44px; background: url(../img/home/txt_phrase01.png) no-repeat center/contain; } .l-footer-list__item a { text-decoration: none; } .l-footer__credit { font-size: 1rem; text-align: center; } @media (max-width: 767.98px) { .l-footer { display: grid; grid-template-columns: 50% 50%; } .l-footer::before { top: 27px; right: calc(50% + 8vw); } .l-footer-list { grid-column: 2; margin-bottom: 20px; font-size: clamp(1rem, -0.0034843206rem + 2.0905923345vw, 1.6rem); } @supports not (font-size: clamp(10 * 0.1rem, -0.0034843206rem + 2.0905923345vw, 16 * 0.1rem)) { .l-footer-list { font-size: 1rem; } } .l-footer__credit { grid-column: 1/3; } } @media (min-width: 768px) { .l-footer { padding-top: 40px; padding-bottom: 35px; text-align: center; } .l-footer::before { width: 250px; height: 122px; bottom: 90px; right: calc(50% + 21.2625vw); } .l-footer-list { display: flex; justify-content: center; } .l-footer-list__item a { padding: 0 2em; } .l-footer-list__item:not(:last-of-type) { position: relative; } .l-footer-list__item:not(:last-of-type)::after { content: ""; display: inline-block; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); width: 1px; height: 1em; background-color: #000; } .l-footer__credit { margin-top: 30px; } } @media (min-width: 768px) and (max-width: 1200px) { .l-footer::before { width: 200px; height: 90px; bottom: 85%; } } /* HOME */ .l-main-img__inner { aspect-ratio: 0.5622188906; } @supports not (aspect-ratio: 0.5622188906) { .l-main-img__inner { position: relative; padding-top: 177.8666666667%; } .l-main-img__inner > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .l-main-img__video { display: block; width: 100%; } @media (min-width: 768px) { .l-main-img { max-height: 1080px; } .l-main-img__inner { aspect-ratio: 1.7777777778; } @supports not (aspect-ratio: 1.7777777778) { .l-main-img__inner { position: relative; padding-top: 56.25%; } .l-main-img__inner > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } } .c-btn01 { --btn-margin-top: 0; --btn-margin-right: auto; --btn-margin-bottom: 0; --btn-margin-left: auto; --btn-width: 64vw; --btn-padding: 1.8vw; --btn-border-radius: 40px; --btn-background-color: #000; --btn-hover-color: #fff; position: relative; width: min(100%, var(--btn-width)); margin: var(--btn-margin-top) var(--btn-margin-right) var(--btn-margin-bottom) var(--btn-margin-left); text-align: center; } .c-btn01::before { content: ""; display: inline-block; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 100%; height: calc(100% + 2px); border-radius: var(--btn-border-radius); background-color: var(--btn-hover-color); transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-btn01:hover::before { background-color: var(--btn-background-color); } } .c-btn01__link { box-sizing: border-box; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; padding: var(--btn-padding); border-radius: var(--btn-border-radius); border: 2px solid var(--btn-border-color, #000); background-color: var(--btn-background-color); color: var(--btn-hover-color); cursor: pointer; transition: all 0.3s ease-in; } .c-btn01__link::after { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 4vw; height: 3vw; content: ""; display: inline-block; vertical-align: middle; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211.567%22%20height%3D%2215.154%22%20viewBox%3D%220%200%2011.567%2015.154%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M5.9%2C2.554a2%2C2%2C0%2C0%2C1%2C3.346%2C0l3.876%2C5.917a2%2C2%2C0%2C0%2C1-1.673%2C3.1H3.7a2%2C2%2C0%2C0%2C1-1.673-3.1Z%22%20transform%3D%22translate(11.567)%20rotate(90)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-btn01__link:hover { background-color: var(--btn-hover-color); color: var(--btn-background-color); } .c-btn01__link:hover::after { width: 4vw; height: 3vw; content: ""; display: inline-block; vertical-align: middle; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211.567%22%20height%3D%2215.154%22%20viewBox%3D%220%200%2011.567%2015.154%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M5.9%2C2.554a2%2C2%2C0%2C0%2C1%2C3.346%2C0l3.876%2C5.917a2%2C2%2C0%2C0%2C1-1.673%2C3.1H3.7a2%2C2%2C0%2C0%2C1-1.673-3.1Z%22%20transform%3D%22translate(11.567)%20rotate(90)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); transition: all 0.3s ease-in; } } @media (min-width: 768px) { .c-btn01 { --btn-width: 300px; --btn-padding: 12px; width: var(--btn-width); } .c-btn01__link { font-size: 2.4rem; } .c-btn01__link::after { right: 13px; width: 16px; height: 22px; } @media not all and (pointer: coarse) { .c-btn01__link:hover::after { width: 16px; height: 22px; } } } .c-btn02 { --btn-margin-top: 8vw; --btn-margin-right: auto; --btn-margin-bottom: 0; --btn-margin-left: auto; --btn-width: 81.674vw; --btn-padding: 1.8vw; --btn-border-radius: 40px; --btn-background-color: #fff; position: relative; width: min(100%, var(--btn-width)); margin: var(--btn-margin-top) var(--btn-margin-right) var(--btn-margin-bottom) var(--btn-margin-left); text-align: center; } .c-btn02::before { content: ""; display: inline-block; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 100%; height: calc(100% + 2px); border-radius: var(--btn-border-radius); background-color: #000; } .c-btn02__link { box-sizing: border-box; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; padding: var(--btn-padding); border-radius: var(--btn-border-radius); border: 2px solid var(--btn-border-color, #000); background-color: var(--btn-background-color); color: #000; transition: all 0.3s ease-in; } .c-btn02__link::after { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 4vw; height: 3vw; content: ""; display: inline-block; vertical-align: middle; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211.567%22%20height%3D%2215.154%22%20viewBox%3D%220%200%2011.567%2015.154%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M5.9%2C2.554a2%2C2%2C0%2C0%2C1%2C3.346%2C0l3.876%2C5.917a2%2C2%2C0%2C0%2C1-1.673%2C3.1H3.7a2%2C2%2C0%2C0%2C1-1.673-3.1Z%22%20transform%3D%22translate(11.567)%20rotate(90)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-btn02__link:hover { background-color: var(--btn-hover-color, #0074DE); color: #fff; } .c-btn02__link:hover::after { width: 4vw; height: 3vw; content: ""; display: inline-block; vertical-align: middle; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211.567%22%20height%3D%2215.154%22%20viewBox%3D%220%200%2011.567%2015.154%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M5.9%2C2.554a2%2C2%2C0%2C0%2C1%2C3.346%2C0l3.876%2C5.917a2%2C2%2C0%2C0%2C1-1.673%2C3.1H3.7a2%2C2%2C0%2C0%2C1-1.673-3.1Z%22%20transform%3D%22translate(11.567)%20rotate(90)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); transition: all 0.3s ease-in; } } .c-btn02--pink { --btn-hover-color: #FC027E; } @media (min-width: 768px) { .c-btn02 { --btn-width: 510px; --btn-padding: 12px; } .c-btn02__link { font-size: 2.4rem; } .c-btn02__link::after { right: 13px; width: 16px; height: 22px; } @media not all and (pointer: coarse) { .c-btn02__link:hover::after { width: 16px; height: 22px; } } } .c-counter01__display { display: flex; justify-content: center; align-items: center; gap: 8vw; margin-bottom: 10.6vw; } .c-counter01__number { box-sizing: border-box; display: flex; justify-content: center; align-items: center; border: 2px solid; border-radius: 10px; background-color: #fff; font-size: 10.6rem; width: 48vw; height: 48vw; } .c-counter01__btn { position: relative; border-radius: 50%; background-color: #000; width: 10.6vw; height: 10.6vw; transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-counter01__btn:hover { background-color: #fff; } } .c-counter01__btn span { box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; transform: translateY(-1.06vw); border: 2px solid; border-radius: 50%; background-color: #fff; font-size: 6vw; width: 10.6vw; height: 10.6vw; transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-counter01__btn span:hover { background-color: #000; color: #fff; } } .c-counter01__actions { display: grid; grid-gap: 3.2vw; margin-bottom: 5.3vw; } .c-counter01__reset { text-decoration: underline; transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-counter01__reset:hover { opacity: var(--hover-opacity); text-decoration: none; } } @media (min-width: 768px) { .c-counter01__display { gap: 60px; margin-bottom: 60px; } .c-counter01__number { width: 340px; height: 340px; border-width: 5px; font-size: 20rem; } .c-counter01__btn { width: 70px; height: 70px; } .c-counter01__btn span { width: 70px; height: 70px; transform: translateY(-6px); border-width: 3px; font-size: 3rem; } .c-counter01__actions { grid-template-columns: auto auto; place-content: center; grid-gap: 32px; margin-bottom: 60px; font-size: 2rem; } } .c-head01 { margin-bottom: 8vw; } .c-head01 span { display: block; } .c-head01__en { line-height: 1.1; font-size: 9.3vw; } .c-head01__ja { line-height: 1.1111111111; font-size: 4.8vw; } @media (min-width: 768px) { .c-head01 { margin-bottom: 66px; } .c-head01__en { font-size: clamp(9rem, 3.6666666667rem + 6.9444444444vw, 12rem); } @supports not (font-size: clamp(90 * 0.1rem, 3.6666666667rem + 6.9444444444vw, 120 * 0.1rem)) { .c-head01__en { font-size: 9rem; } } .c-head01__ja { font-size: clamp(3rem, 0.3240418118rem + 5.574912892vw, 4.6rem); } @supports not (font-size: clamp(30 * 0.1rem, 0.3240418118rem + 5.574912892vw, 46 * 0.1rem)) { .c-head01__ja { font-size: 3rem; } } .c-head01--small .c-head01__en { font-size: clamp(8rem, 5.1555555556rem + 3.7037037037vw, 9.6rem); } @supports not (font-size: clamp(80 * 0.1rem, 5.1555555556rem + 3.7037037037vw, 96 * 0.1rem)) { .c-head01--small .c-head01__en { font-size: 8rem; } } } .c-head02 { font-size: 1.5em; text-align: center; margin-bottom: 6.6vw; } @media (min-width: 768px) { .c-head02 { margin-bottom: 50px; } } .c-list01__item { position: relative; line-height: 1.5; padding-left: 1.2em; } .c-list01__item:not(:last-of-type) { margin-bottom: 1em; } .c-list01__item::before { content: ""; display: inline-block; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; border-radius: 50%; background-color: #FF954D; } @media (min-width: 768px) { .c-list01__item::before { top: 9px; width: 8px; height: 8px; } } .c-list02 { counter-reset: num; } .c-list02__item { position: relative; padding-left: 1em; } .c-list02__item::before { content: counter(num); counter-increment: num; display: inline-block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; } .c-list03__item { position: relative; padding-left: 1em; text-indent: -1em; } .c-list03__item::before { content: "※"; width: 1em; height: 1em; } .c-set01__inner { padding-top: 6.6vw; padding-bottom: 13.3vw; } .c-set01__privacy-mark { box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; grid-column-gap: 2em; border: 1px solid #ccc; margin: 2em 0; padding: 1.5em; } @media (min-width: 768px) { .c-set01__inner { max-width: 1000px; padding-top: 50px; padding-bottom: 100px; } } .c-set01__article + .c-set01__article { margin-top: 40px; } .c-set01__article h2, .c-set01__article h3, .c-set01__article h4, .c-set01__article h5, .c-set01__article > p, .c-set01__article > ul, .c-set01__article > ol { margin-top: 1em; margin-bottom: 1em; } .c-set01__article h2, .c-set01__article h3, .c-set01__article h4, .c-set01__article h5 { color: #ff6701; } .c-set01__article h2 { font-size: 2em; } .c-set01__article h3 { font-size: 1.5em; } .c-set01__article h4 { font-size: 1.25em; } .c-set01__article a { text-decoration: underline; } @media not all and (pointer: coarse) { .c-set01__article a:hover { text-decoration: none; } } .c-set01__article ul li:not(last-child), .c-set01__article ol li:not(last-child) { margin-bottom: 0.5em; } .c-set01__article ul li > ul, .c-set01__article ul li > ol, .c-set01__article ol li > ul, .c-set01__article ol li > ol { margin-top: 0.5em; padding-left: 1em; } .c-set01__article ul li > ul li, .c-set01__article ul li > ol li, .c-set01__article ol li > ul li, .c-set01__article ol li > ol li { list-style: disc inside; } .c-set01__article dl { display: grid; grid-template-columns: auto 1fr; grid-gap: 0.5em 2em; width: fit-content; } .c-set01__article > p:last-of-type { text-align: right; } @media (min-width: 768px) { .c-set01__article + .c-set01__article { margin-top: 80px; } } .c-table01 table { table-layout: fixed; width: 100%; margin: auto; } .c-table01 th, .c-table01 td { padding: 0.5em; border: 1px solid #ccc; vertical-align: middle; } .c-table01 th { width: 30%; background-color: #ffe1cd; word-break: keep-all; overflow-wrap: anywhere; } .c-table01 td dl { display: grid; grid-template-columns: auto 1fr; } body#counter { min-height: 100vh; overflow-y: auto; background: url(../img/counter/bg_counter01_sp.png) no-repeat center/cover; } body#counter main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } @media (min-width: 768px) { body#counter { background-image: url(../img/counter/bg_counter01_pc.png); } } .counter-content { text-align: center; } .counter-content__head { line-height: 1.2; margin-bottom: 5.3vw; font-size: clamp(4rem, -2.6898954704rem + 13.93728223vw, 8rem); } @supports not (font-size: clamp(40 * 0.1rem, -2.6898954704rem + 13.93728223vw, 80 * 0.1rem)) { .counter-content__head { font-size: 4rem; } } .counter-content__lead { margin-bottom: 8vw; } @media (min-width: 768px) { .counter-content__head { margin-bottom: 40px; } .counter-content__lead { margin-bottom: 40px; } } /* home-intro */ .home-intro { background-color: #FF954D; color: #fff; text-align: center; } .home-intro__inner { padding-top: 9.6vw; padding-bottom: 13.6vw; } .home-intro__lead { margin-bottom: 10.1vw; } .home-intro-manga { box-sizing: border-box; position: relative; margin-bottom: 13vw; padding-bottom: 15.9vw; } .home-intro-manga::before, .home-intro-manga::after { content: ""; display: inline-block; position: absolute; background: no-repeat top center/contain; } .home-intro-manga::before { top: 0; left: 50%; transform: translateX(-50%); background-image: url(../img/home/bg_manga01_sp.png); aspect-ratio: 768/1828; width: 102.4vw; } .home-intro-manga::after { z-index: 4; bottom: 0; transform: rotate(23deg); background-image: url(../img/home/img_card01.png); left: 76.9vw; width: 22vw; height: 32.9vw; } .home-intro-manga > * { position: relative; z-index: 2; } .home-intro-manga__head img { margin: auto; width: 75.7vw; } .home-intro-scroll { box-sizing: border-box; position: relative; margin: auto; padding: 3.73vw; background-color: #fff; width: 75.8vw; height: 162.4vw; } .home-intro-scroll::before, .home-intro-scroll::after { content: ""; display: inline-block; position: absolute; background: no-repeat center/contain; } .home-intro-scroll::before { transform: rotate(19deg); background-image: url(../img/home/img_card03.png); top: -5.7vw; right: 64.2vw; width: 15.6vw; height: 23.2vw; } .home-intro-scroll::after { background-image: url(../img/home/txt_phrase03.png); bottom: 44.2vw; right: 68.8vw; width: 12.5vw; height: 14.3vw; } .home-intro-scroll__img { overflow-y: scroll; height: 155vw; scrollbar-color: #FF954D #fff; } .home-intro-scroll__img::-webkit-scrollbar { width: 15px; height: 15px; } .home-intro-scroll__img::-webkit-scrollbar-track { background: #fff; } .home-intro-scroll__img::-webkit-scrollbar-thumb { background: #FF954D; } .home-intro-detail { box-sizing: border-box; position: relative; padding-top: 8.2vw; padding-bottom: 9.3vw; } .home-intro-detail::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 80px; background-color: #fff; } .home-intro-detail > * { position: relative; z-index: 2; } .home-intro-detail__head { margin-bottom: 4.2vw; } .home-intro-detail__head img { margin: auto; width: 44.3vw; } .home-intro-card { display: grid; grid-template-columns: repeat(4, 16.048vw); place-content: center; grid-gap: 2.8vw; } @media (min-width: 768px) { .home-intro__inner { padding: 100px 0 160px; } .home-intro__head { margin-bottom: 37px; } .home-intro__lead { font-size: clamp(2.4rem, 1.3333333333rem + 1.3888888889vw, 3rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.3333333333rem + 1.3888888889vw, 30 * 0.1rem)) { .home-intro__lead { font-size: 2.4rem; } } .home-intro-manga { margin-bottom: 140px; padding-bottom: 243px; } .home-intro-manga::before { width: 1370px; max-height: 2603px; background-image: url(../img/home/bg_manga01_pc.png); aspect-ratio: 1370/2603; } .home-intro-manga::after { left: 1025px; bottom: -64px; width: 328px; height: 487px; } .home-intro-manga__head img { width: 750px; } .home-intro-scroll { width: 750px; height: 1534px; padding: 40px; } .home-intro-scroll::before { top: -68px; right: 838px; width: 210px; height: 313px; transform: rotate(-12deg); } .home-intro-scroll::after { right: 678px; bottom: 618px; width: 188px; height: 216px; } .home-intro-scroll__img { height: 1454px; } .home-intro-detail { padding-top: 73px; padding-bottom: 109px; } .home-intro-detail::before { width: 1573px; height: 593px; border-radius: 297px; } .home-intro-detail::after { content: ""; display: inline-block; position: absolute; top: -79px; right: 984px; width: 250px; height: 122px; background: url(../img/home/txt_phrase01.png) no-repeat center/contain; transform: rotate(-13deg); } .home-intro-detail__head { margin-bottom: 45px; } .home-intro-detail__head img { width: min(70%, 840px); } .home-intro-card { grid-template-columns: repeat(4, minmax(auto, 210px)); grid-gap: 15px; } } @media (min-width: 768px) and (max-width: 1200px) { .home-intro-manga { padding-bottom: 50px; } .home-intro-manga::before { width: 98vw; } .home-intro-manga::after { display: none; } .home-intro-manga__head img { width: 62.5vw; } .home-intro-scroll { width: 75%; height: 100vw; } .home-intro-scroll::before, .home-intro-scroll::after { display: none; } .home-intro-scroll__img { height: 90vw; } .home-intro-detail::before { height: 500px; } .home-intro-detail::after { display: none; } } /* home-movie */ .home-movie { position: relative; overflow: hidden; text-align: center; } .home-movie__inner { position: relative; padding-top: 7.4vw; padding-bottom: 74.6vw; } .home-movie__head { line-height: 1.1; color: #FC027E; margin-bottom: 5.1vw; font-size: 9.3vw; } .home-movie-lead { margin-bottom: 8vw; } .home-movie-lead__pic { position: relative; margin: 0 auto 4.93vw; width: 37.6vw; } .home-movie-lead__pic img:first-child { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32vw; } .home-movie-lead__text { color: #FC027E; } .home-movie-video { position: relative; text-align: center; } .home-movie-video__head { color: #FC027E; margin-bottom: 5.3vw; font-size: clamp(1.8rem, -1.2rem + 6.25vw, 3.6rem); } @supports not (font-size: clamp(18 * 0.1rem, -1.2rem + 6.25vw, 36 * 0.1rem)) { .home-movie-video__head { font-size: 1.8rem; } } .home-movie-video__text { font-size: clamp(1.2rem, -0.1333333333rem + 2.7777777778vw, 2rem); } @supports not (font-size: clamp(12 * 0.1rem, -0.1333333333rem + 2.7777777778vw, 20 * 0.1rem)) { .home-movie-video__text { font-size: 1.2rem; } } .home-movie-video iframe { aspect-ratio: 560/315; height: 100%; width: 78.6vw; margin-bottom: 5.3vw; } .home-movie__pic { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 5.3vw; width: 94.3vw; height: 62.9vw; } .home-movie__pic::before, .home-movie__pic::after { content: ""; display: inline-block; position: absolute; background: url(../img/home/txt_phrase02.png) no-repeat center/contain; transform-origin: bottom; width: 7.7vw; height: 12.7vw; } .home-movie__pic::before { animation: rotate-left 0.5s infinite linear 0.3s alternate; top: 22vw; left: 9.1vw; } .home-movie__pic::after { animation: rotate-right 0.5s infinite linear alternate; top: 2.4vw; left: 73.5vw; } @media (max-width: 767.98px) { .home-movie-lead { position: relative; } .home-movie-lead::before { content: ""; display: inline-block; position: absolute; background: url(../img/home/pic_person01.png) no-repeat center/contain; transform: rotate(-10deg); transform-origin: bottom; animation: rotate-person01-sp 0.6s infinite linear alternate; top: 18.3vw; left: 6.4vw; width: 31vw; height: 46.4vw; } .home-movie-lead__text { margin-left: auto; margin-right: auto; width: 71vw; } .home-movie-video__text { position: relative; margin-left: auto; margin-right: auto; width: 57.6vw; } .home-movie-video__text::before, .home-movie-video__text::after { content: ""; display: inline-block; position: absolute; background: no-repeat center/contain; transform-origin: bottom; } .home-movie-video__text::before { top: 0; background-image: url(../img/home/pic_person03.png); transform: rotate(5deg); animation: rotate-person03 0.6s infinite linear 0.3s alternate; right: 52.2vw; width: 28.2vw; height: 42.2vw; } .home-movie-video__text::after { background-image: url(../img/home/pic_person02.png); animation: rotate-person02 0.6s infinite linear alternate; top: -2.2vw; left: 47.1vw; width: 29.7vw; height: 44.6vw; } } @media (min-width: 768px) { .home-movie__inner { padding-top: 160px; padding-bottom: 890px; } .home-movie__head { margin-bottom: 20px; font-size: clamp(9rem, 3.6666666667rem + 6.9444444444vw, 12rem); } @supports not (font-size: clamp(90 * 0.1rem, 3.6666666667rem + 6.9444444444vw, 120 * 0.1rem)) { .home-movie__head { font-size: 9rem; } } .home-movie-lead { display: grid; grid-template-columns: auto minmax(auto, 575px); place-content: center; place-items: center; grid-gap: 35px; margin-bottom: 180px; } .home-movie-lead__pic { width: 277px; margin: 0; } .home-movie-lead__pic img:first-child { width: 236px; } .home-movie-lead__text { text-align: left; font-size: clamp(2.4rem, 1.3333333333rem + 1.3888888889vw, 3rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.3333333333rem + 1.3888888889vw, 30 * 0.1rem)) { .home-movie-lead__text { font-size: 2.4rem; } } .home-movie-video { position: relative; } .home-movie-video::before { content: ""; display: inline-block; position: absolute; z-index: 3; top: -144px; right: 75%; width: 359px; height: 538px; background: url(../img/home/pic_person01.png) no-repeat center/contain; transform-origin: bottom; animation: rotate-person01-pc 0.6s infinite linear alternate; } .home-movie-video__head { position: relative; margin-bottom: 30px; } .home-movie-video__head::before, .home-movie-video__head::after { content: ""; display: inline-block; position: absolute; z-index: 3; background: no-repeat center/contain; transform-origin: bottom; } .home-movie-video__head::before { top: -33px; right: 962px; width: 354px; height: 529px; background-image: url(../img/home/pic_person03.png); transform: rotate(5deg); animation: rotate-person03 0.6s infinite linear 0.3s alternate; } .home-movie-video__head::after { top: -352px; left: 950px; width: 372px; height: 557px; background-image: url(../img/home/pic_person02.png); animation: rotate-person02 0.6s infinite linear 0.5s alternate; } .home-movie-video iframe { width: 704px; margin-bottom: 35px; } .home-movie__pic { bottom: 8.84vw; width: 926px; height: 618px; } .home-movie__pic::before, .home-movie__pic::after { width: 113px; height: 185px; } .home-movie__pic::before { top: 225px; left: -42px; } .home-movie__pic::after { top: -27px; left: 758px; } } @media (min-width: 768px) and (max-width: 1200px) { .home-movie__inner { max-width: calc(100% - 130px); padding-bottom: 700px; } .home-movie-lead { grid-template-columns: 100%; margin-bottom: 100px; } .home-movie-video::before { display: none; } .home-movie-video__head::before, .home-movie-video__head::after { display: none; } .home-movie-video iframe { width: 560px; } .home-movie__pic { bottom: 8vw; width: 695px; height: 464px; } .home-movie__pic::before, .home-movie__pic::after { width: 100px; height: 165px; } .home-movie__pic::before { left: -30px; } .home-movie__pic::after { left: 560px; } } @media (min-width: 768px) and (max-width: 1200px) and (min-width: 1600px) { .home-movie-video::before { right: min(85.83%, 1030px); } } .home-movie-side { position: absolute; top: -100px; display: flex; align-items: center; width: 100vh; height: 4vw; background-color: #FC027E; color: #fff; pointer-events: none; } .home-movie-side--left { left: 0; transform: rotate(90deg) translateY(-2vw); transform-origin: left; } .home-movie-side--right { right: 0; transform: rotate(-90deg) translateY(-2vw); transform-origin: right; } .home-movie-side__text { display: flex; line-height: 1.1; font-size: 2.6vw; } .home-movie-side__text p { white-space: nowrap; } @media (min-width: 768px) { .home-movie-side { height: 63px; } .home-movie-side--left { transform: rotate(90deg) translateY(-31px); } .home-movie-side--right { transform: rotate(-90deg) translateY(-31px); } .home-movie-side__txt { font-size: 4.8rem; } } /* home-scene */ .home-scene { position: relative; background-color: #02D7FF; text-align: center; } .home-scene::before { content: ""; display: inline-block; position: absolute; z-index: 10; bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%); width: calc(100% + 2px); background: no-repeat center bottom/100%; height: 10.6vw; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22375%22%20height%3D%2240%22%20viewBox%3D%220%200%20375%2040%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_1273%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%201273%22%20width%3D%22375%22%20height%3D%2240%22%20transform%3D%22translate(0%203544)%22%20fill%3D%22%23fff%22%20stroke%3D%22%23707070%22%20stroke-width%3D%221%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_15%22%20data-name%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2015%22%20transform%3D%22translate(0%20-3544)%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_239%22%20data-name%3D%22%E3%83%91%E3%82%B9%20239%22%20d%3D%22M375%2C396.362V36.874h-.01C331.191%2C14.407%2C263.486%2C0%2C187.5%2C0S43.809%2C14.407.01%2C36.874H0V396.362Z%22%20transform%3D%22translate(0%203543.687)%22%20fill%3D%22%2302d7ff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); } .home-scene__inner { padding-bottom: 13.3vw; } .home-scene-list { display: grid; grid-template-columns: repeat(3, auto); grid-gap: 3.8vw; } .home-scene-list img { margin-bottom: 1.7vw; } .home-scene-list p { font-size: clamp(1rem, 0.331010453rem + 1.393728223vw, 1.4rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.331010453rem + 1.393728223vw, 14 * 0.1rem)) { .home-scene-list p { font-size: 1rem; } } @media (min-width: 768px) { .home-scene::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221920%22%20height%3D%22202%22%20viewBox%3D%220%200%201920%20202%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_1274%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%201274%22%20width%3D%221920%22%20height%3D%22202%22%20transform%3D%22translate(0%207700)%22%20fill%3D%22%23fff%22%20stroke%3D%22%23707070%22%20stroke-width%3D%221%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_16%22%20data-name%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2016%22%20transform%3D%22translate(0%20-7700)%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_231%22%20data-name%3D%22%E3%83%91%E3%82%B9%20231%22%20d%3D%22M1920%2C1119.368V188.816h-.049C1695.7%2C73.785%2C1349.048%2C0%2C960%2C0S224.3%2C73.785.049%2C188.816H0v930.552Z%22%20transform%3D%22translate(1%207699.927)%22%20fill%3D%22%2302d7ff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); height: 10.5vw; } .home-scene__inner { padding-bottom: 148px; } .home-scene-list { grid-template-columns: repeat(3, minmax(auto, 284px)); place-content: center; grid-gap: min(3.83%, 46px); } .home-scene-list img { margin-bottom: 25px; } .home-scene-list p { font-size: 1.8rem; } } /* home-info */ .home-info { position: relative; } .home-info::before { content: ""; display: inline-block; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 100%; height: 10px; background: repeat-x center bottom/14px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2010%22%20width%3D%2214%22%20height%3D%2210%22%3E%3Cpath%20d%3D%22M%20-5.739999999999999%204%20Q%20-3.99%204%20-2.24%202%20Q%201.26%20-2%204.76%202%20Q%206.51%204%208.26%204%20Q%2010.01%204%2011.76%202%20Q%2015.26%20-2%2018.76%202%20Q%2020.51%204%2022.26%204%20L%2014%2010%20L%200%2010%20Z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); } .home-info__inner { padding-top: 13.3vw; padding-bottom: 12.9vw; } .home-info__head { text-align: center; margin-bottom: 6.6vw; font-size: clamp(1.8rem, 0.6292682927rem + 2.4390243902vw, 2.5rem); } @supports not (font-size: clamp(18 * 0.1rem, 0.6292682927rem + 2.4390243902vw, 25 * 0.1rem)) { .home-info__head { font-size: 1.8rem; } } .home-info__head small { display: block; font-size: clamp(1.2rem, 0.531010453rem + 1.393728223vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.531010453rem + 1.393728223vw, 16 * 0.1rem)) { .home-info__head small { font-size: 1.2rem; } } .home-info__pic { margin-bottom: 4vw; } .home-info__pic img { margin: auto; width: 78.3vw; } .home-info__list { display: grid; grid-template-columns: 5em auto; grid-gap: 1em; font-size: clamp(1.2rem, 0.531010453rem + 1.393728223vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.531010453rem + 1.393728223vw, 16 * 0.1rem)) { .home-info__list { font-size: 1.2rem; } } .home-info-sns h3 { text-align: center; margin-bottom: 2.6vw; font-size: clamp(1.4rem, 0.3965156794rem + 2.0905923345vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 0.3965156794rem + 2.0905923345vw, 20 * 0.1rem)) { .home-info-sns h3 { font-size: 1.4rem; } } .home-info-sns__list { display: grid; grid-template-columns: 37px 41px 44px; grid-column-gap: 18px; place-content: center; } .home-info-sns__list > li img { width: 100%; height: 100%; } .home-info-sns__list > li:last-of-type { transform: translateY(-2px); } @media (max-width: 767.98px) { .home-info__list { margin-left: auto; margin-right: auto; margin-bottom: 8vw; width: 82.3vw; } .home-info-sns { margin-bottom: 10vw; } } @media (min-width: 768px) { .home-info::before { height: 23px; background-size: 86px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2086%2023%22%20width%3D%2286%22%20height%3D%2223%22%3E%3Cpath%20d%3D%22M%20-35.26%2022%20Q%20-24.51%2022%20-13.76%2011%20Q%207.74%20-11%2029.24%2011%20Q%2039.99%2022%2050.74%2022%20Q%2061.49%2022%2072.24%2011%20Q%2093.74%20-11%20115.24%2011%20Q%20125.99%2022%20136.74%2022%20L%2086%2023%20L%200%2023%20Z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); } .home-info__inner { display: grid; grid-template-columns: 1fr 1fr; padding-top: 165px; padding-bottom: 96px; } .home-info__head { grid-column: 2; grid-row: 1; margin-bottom: 24px; text-align: left; } .home-info__pic { grid-column: 1; grid-row: 1/3; align-self: center; margin-bottom: 0; } .home-info__pic img { width: min(100%, 427px); } .home-info__list { grid-column: 2; grid-row: 2; } .home-info-sns { grid-column: 1/3; grid-row: 3; display: grid; margin-top: 60px; } .home-info-sns h3 { margin-bottom: 15px; } .home-info-sns__list { grid-column-gap: 30px; } .home-info__btn { grid-column: 1/3; grid-row: 4c; } }