@charset "UTF-8"; :root { --col-primary: #6eddf0; --col-secondary: #50c3d7; --col-accent: #ffbb00; --col-cloud: #f0eee9; --sign-pink: #e2598a; --spacer: 0px; } @media screen and (width < 1200px) { :root { --spacer: 24px; } } @media screen and (width < 768px) { :root { --spacer: 24px; } } @media screen and (width < 480px) { :root { --spacer: 16px; } } /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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 { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-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; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { scroll-behavior: smooth; } body { font-family: "Roboto", "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; font-size: clamp(0px, 2.5cqw, 24px); color: #333; } @container (width < 480px) { body { font-size: 14px; } } * { box-sizing: border-box; } a:hover { opacity: 0.9; } img { max-width: 100%; height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 0.75rem; } strong { color: var(--col-secondary); font-weight: bold; } .btns { display: flex; justify-content: center; } .btns .btn { display: flex; justify-content: center; align-items: center; width: fit-content; padding: clamp(0px, 2.5cqw, 24px) clamp(0px, 5.8333333333cqw, 56px); border: clamp(0px, 0.8333333333cqw, 8px) solid white; border-radius: 100px; background-color: var(--col-accent); color: white; font-size: max(16px, clamp(0px, 3.3333333333cqw, 32px)); font-weight: bold; transition: transform 0.1s; box-shadow: 0 clamp(0px, 0.4166666667cqw, 4px) clamp(0px, 0.4166666667cqw, 4px) rgba(0, 0, 0, 0.15); } .btns .btn:hover { opacity: 1; transform: scale(1.05); } h2 { position: relative; margin-bottom: clamp(0px, 3.3333333333cqw, 32px); padding-bottom: clamp(0px, 0.8333333333cqw, 8px); border-bottom: clamp(0px, 0.8333333333cqw, 8px) solid var(--col-secondary); color: var(--col-secondary); font-size: max(24px, clamp(0px, 5cqw, 48px)); font-weight: bold; text-align: center; } h2::after { content: ""; position: absolute; bottom: 0; display: block; width: 100%; border-bottom: clamp(0px, 0.8333333333cqw, 8px) solid var(--col-cloud); } h3 { color: var(--col-secondary); font-size: max(16px, clamp(0px, 3.3333333333cqw, 32px)); font-weight: bold; } h4 { font-weight: 500; } br { display: inline; content: "\a"; white-space: pre; } html { container-name: root; container-type: inline-size; height: 100%; } html > * { box-sizing: border-box; } html body { min-height: 100dvh; height: fit-content; } html body > :where([class$=-container]) { container-type: inline-size; display: flex; flex-direction: column; } html body > :where([class$=-container]) > * { max-width: calc(1000px + clamp(0px, 3.3333333333cqw, 32px) * 2); margin: 0 auto; } html body header.header-container { z-index: 2; } html body nav.navigation-container { position: absolute; top: 0; right: 0; left: 0; z-index: 3; margin: auto; } .header-container { position: absolute; top: clamp(0px, 3.75cqw, 36px); width: 100%; } .header-container > a { width: clamp(0px, 52.7083333333cqw, 506px); } @container (width < 480px) { .header-container { top: 4.2253521127dvh; } .header-container > a { display: flex; justify-content: center; width: 26.4084507042dvh; } .header-container > a > img { content: url("/assets_adlanding03/images/logos_mobile.svg"); } } main.main-container { /* hero */ } main.main-container > section { width: 100%; /*-------------------- table scroll --------------------*/ /*-------------------- plan list --------------------*/ } main.main-container > section:not(.sec00) { padding: clamp(0px, 8.3333333333cqw, 80px) clamp(0px, 3.3333333333cqw, 32px); } main.main-container > section:not(.sec00) > p { margin-bottom: clamp(0px, 3.3333333333cqw, 32px); } main.main-container > section:not(.sec00) > p:last-child { margin-bottom: unset; } main.main-container > section .tablewrap { container-name: tablewrap; container-type: scroll-state; overflow-x: auto; display: flex; margin-right: auto; margin-left: auto; margin-bottom: clamp(0px, 1.6666666667cqw, 16px); /* table */ --continue-width: 32px; } main.main-container > section .tablewrap > table { table-layout: auto; width: 100%; } main.main-container > section .tablewrap > table tbody tr:last-child > td.v-sign { border-bottom: max(1px, clamp(0px, 0.4166666667cqw, 4px)) solid var(--col-secondary); } main.main-container > section .tablewrap > table tbody th.v-sign, main.main-container > section .tablewrap > table tbody td.v-sign { border-right: max(2px, clamp(0px, 0.4166666667cqw, 4px)) solid var(--col-secondary); border-left: max(2px, clamp(0px, 0.4166666667cqw, 4px)) solid var(--col-secondary); background-color: white; } main.main-container > section .tablewrap > table thead th.v-sign { border: max(2px, clamp(0px, 0.4166666667cqw, 4px)) solid var(--col-secondary); } main.main-container > section .tablewrap > table tfoot th, main.main-container > section .tablewrap > table tfoot td { border-top: max(3px, clamp(0px, 0.4166666667cqw, 4px)) solid #4a4a4a; border-right: unset; border-left: unset; border-bottom: unset; padding: clamp(0px, 1.6666666667cqw, 16px) clamp(0px, 0.8333333333cqw, 8px); } main.main-container > section .tablewrap > table tfoot th.v-sign, main.main-container > section .tablewrap > table tfoot td.v-sign { border-top: max(3px, clamp(0px, 0.4166666667cqw, 4px)) solid var(--col-secondary); color: var(--col-secondary); font-size: max(16px, clamp(0px, 2.5cqw, 24px)); } main.main-container > section .tablewrap > table tfoot td { font-size: max(14px, clamp(0px, 1.6666666667cqw, 16px)); } main.main-container > section .tablewrap > table th, main.main-container > section .tablewrap > table td { all: unset; display: table-cell; padding: clamp(0px, 1.6666666667cqw, 16px) clamp(0px, 0.4166666667cqw, 4px); background-color: #f6f6f9; border: 1px solid #4a4a4a; white-space: nowrap; color: #333; font-weight: bold; text-align: center; vertical-align: middle; } main.main-container > section .tablewrap > table th > .num, main.main-container > section .tablewrap > table td > .num { margin-right: clamp(0px, 0.4166666667cqw, 4px); font-size: 2em; font-weight: bold; } main.main-container > section .tablewrap > table th > .small, main.main-container > section .tablewrap > table td > .small { font-size: 0.8em; } main.main-container > section .tablewrap > table th { font-size: max(12px, clamp(0px, 1.4583333333cqw, 14px)); } main.main-container > section .tablewrap > table th.v-sign { background-color: var(--col-secondary); color: white; } main.main-container > section .tablewrap > table td { font-size: max(12px, clamp(0px, 1.4583333333cqw, 14px)); } main.main-container > section .tablewrap::before, main.main-container > section .tablewrap::after { flex-shrink: 0; align-self: stretch; display: block; position: sticky; top: 0; bottom: 0; width: var(--continue-width); } @container tablewrap scroll-state(scrollable:left) { main.main-container > section .tablewrap::before { content: ""; left: 0; margin-right: calc(-1 * var(--continue-width)); background: linear-gradient(to left, transparent, #fff 80%); } } @container tablewrap scroll-state(scrollable:right) { main.main-container > section .tablewrap::after { content: ""; right: 0; margin-left: calc(-1 * var(--continue-width)); background: linear-gradient(to right, transparent, #fff 80%); } } main.main-container > section .tablewrap + .note { margin-top: clamp(0px, 1.6666666667cqw, 16px); font-size: max(12px, clamp(0px, 1.6666666667cqw, 16px)); } main.main-container > section .planlist { display: flex; flex-direction: row; gap: clamp(0px, 2.0833333333cqw, 20px); } main.main-container > section .planlist:not(.-charge) { margin-bottom: clamp(0px, 3.3333333333cqw, 32px); } @container (width < 480px) { main.main-container > section .planlist { flex-direction: column; } } main.main-container > section .planlist.-charge .planitem .plancontainer { padding-top: 8cqw; padding-bottom: 8cqw; } main.main-container > section .planlist.-charge .planitem .plancontainer .planname { margin-bottom: 2cqw; padding: 2cqw 10cqw; border-radius: 2em; background-color: var(--col-secondary); color: #fff; font-weight: 700; font-size: 8cqw; } main.main-container > section .planlist .planitem { flex: 1; container-name: planlist; container-type: inline-size; } main.main-container > section .planlist .planitem * { line-height: 1.3; } main.main-container > section .planlist .planitem .plancontainer { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; line-height: 7cqw; gap: 3cqw; padding: 4cqw; border: 1.6cqw solid var(--col-secondary); background-color: white; } main.main-container > section .planlist .planitem .plancontainer .planname { margin-bottom: unset; color: var(--col-secondary); font-weight: 800; font-size: 11cqw; line-height: 1.8; } main.main-container > section .planlist .planitem .plancontainer .planname::after { all: unset; } main.main-container > section .planlist .planitem .plancontainer .plancourse { width: 60%; margin: 0 auto; padding: 0.5em; background-color: var(--col-secondary); border-radius: 2em; color: white; font-size: 4cqw; } main.main-container > section .planlist .planitem .plancontainer .plancourse:nth-of-type(2) { background-color: #ccc; color: black; font-weight: 600; } main.main-container > section .planlist .planitem .plancontainer .planprice { font-weight: 600; font-size: 5cqw; } main.main-container > section .planlist .planitem .plancontainer .planprice:nth-of-type(1) { margin-bottom: 5cqw; } main.main-container > section .planlist .planitem .plancontainer .plantarget { display: flex; gap: unset; margin: unset; } main.main-container > section .planlist .planitem .plancontainer .plantarget li { width: fit-content; font-size: 6cqw; font-weight: 600; line-height: unset; white-space: nowrap; color: var(--col-secondary); } main.main-container > section .planlist .planitem .plancontainer .plantarget li:not(:last-child)::after { content: "/"; margin: 0 1.5cqw; } main.main-container > section .planlist .planitem .plancontainer .sup { line-height: unset; font-weight: 600; font-size: 3.5cqw; } main.main-container > section .planlist .planitem .plancontainer .bonus { width: 100%; padding: 1cqw; border: 0.8cqw solid var(--sign-pink); color: var(--sign-pink); } main.main-container > section .planlist .planitem .plancontainer .bonus * { font-size: 4cqw; text-align: center; line-height: 1.3; } main.main-container > section .planlist .planitem .plancontainer .bonus h5 { font-weight: 600; } main.main-container > section .planlist .planitem .plancontainer .bonus p { font-size: 4cqw; } main.main-container > section .planlist .planitem .num { margin-right: 0.05em; font-size: 2em; } main.main-container > section .planlist .planitem .small { font-size: 0.8em; } main.main-container > section .planlist .planitem .small .num { font-size: 1.3em; } main.main-container > section .planlist .planitem .bold { font-weight: bold; } main.main-container > section.sec00 { width: 100%; max-width: unset; max-height: 700px; background-color: var(--col-primary); position: relative; } @container (width < 480px) { main.main-container > section.sec00 { max-height: unset; min-height: 584px; height: 100svh; } } main.main-container > section.sec00 > h1 { aspect-ratio: 960/700; max-height: 700px; margin: 0 auto; background: url(/assets_adlanding03/images/hero.webp) no-repeat center top/cover; font-size: 0px; color: rgba(255, 255, 255, 0); } @container (width < 480px) { main.main-container > section.sec00 > h1 { height: 100%; aspect-ratio: unset; max-height: unset; background: url(/assets_adlanding03/images/hero_mobile.webp) no-repeat center top/cover; } } main.main-container > section.sec00 > p { position: absolute; bottom: 0; width: 100%; height: clamp(0px, 5.4166666667cqw, 52px); background: url(/assets_adlanding03/images/kusarepeat.webp) repeat-x center bottom/contain; font-size: 0px; color: rgba(255, 255, 255, 0); } main.main-container > section.sec02 > p { font-size: clamp(0px, 4.1666666667cqw, 40px); font-weight: bold; text-align: center; } main.main-container > section.sec03 { display: flex; flex-direction: column; gap: clamp(0px, 2.5cqw, 24px); } main.main-container > section.sec03 > .item { display: flex; flex-direction: column; gap: clamp(0px, 2.5cqw, 24px); } main.main-container > section.sec03 > .item:not(:last-child) { margin-bottom: clamp(0px, 4.1666666667cqw, 40px); } main.main-container > section.sec03 > .item > h3 { font-size: max(16px, clamp(0px, 3.3333333333cqw, 32px)); } main.main-container > section.sec03 > .item > h3::before { content: "■"; } main.main-container > section.sec03 > .item > .group { display: flex; gap: clamp(0px, 2.5cqw, 24px); } main.main-container > section.sec03 > .item > .group > .chara { flex: 0 0 clamp(0px, 16.6666666667cqw, 160px); aspect-ratio: 80/179; } main.main-container > section.sec03 > .item > .group > .detail { display: flex; flex-direction: column; gap: clamp(0px, 2.5cqw, 24px); } main.main-container > section.sec03 > .item > .group > .detail > h4 { width: fit-content; padding: clamp(0px, 0.8333333333cqw, 8px) clamp(0px, 2.5cqw, 24px); border: clamp(0px, 0.4166666667cqw, 4px) solid var(--col-secondary); border-radius: clamp(0px, 1.6666666667cqw, 16px); font-weight: bold; } main.main-container > section.sec03 > .item > .group > .detail > p { margin-bottom: 1em; } main.main-container > section.sec04 > ol { padding-left: 1em; list-style: decimal; } main.main-container > section.sec04 > ol > li { margin-bottom: 1em; } .footer-container { padding: clamp(0px, 8.3333333333cqw, 80px) 0; background-color: var(--col-secondary); color: #fff; font-size: max(12px, clamp(0px, 2.5cqw, 24px)); } .navigation-container > .btns { position: relative; top: clamp(0px, 32.9166666667cqw, 316px); } @container (width < 480px) { .navigation-container > .btns { top: 68.0751173709svh; } }/*# sourceMappingURL=campaign.css.map */