@charset "UTF-8"; :root { --color-black: rgba(0, 0, 0, 1); --color-white: #ffffff; } :root { --fs-11-11: 2.93vw; --fs-17-17: 4.53vw; } @media all and (min-width: 864px) { :root { --fs-11-11: 0.86vw; --fs-17-17: 1.33vw; } } :root { --innerW: 89.33%; --btn-height: 13.33vw; --img-medium-width: 85.33%; --img-small-width: 74.66%; --ease: linear(0, 0.0002, 0.001, 0.0022, 0.0039, 0.0062, 0.0089, 0.012, 0.0157, 0.0199, 0.0245, 0.0296, 0.0351, 0.0411, 0.0476, 0.0545, 0.0618, 0.0696, 0.0778, 0.0865, 0.0955, 0.1049, 0.1147, 0.1249, 0.1355, 0.1464, 0.1577, 0.1693, 0.1813, 0.1935, 0.2061, 0.219, 0.2321, 0.2455, 0.2591, 0.273, 0.2871, 0.3014, 0.3159, 0.3306, 0.3455, 0.3605, 0.3757, 0.3909, 0.4063, 0.4218, 0.4373, 0.4529, 0.4686, 0.4843, 0.5, 0.5157, 0.5314, 0.5471, 0.5627, 0.5782, 0.5937, 0.6091, 0.6243, 0.6395, 0.6545, 0.6694, 0.6841, 0.6986, 0.7129, 0.727, 0.7409, 0.7545, 0.7679, 0.781, 0.7939, 0.8065, 0.8187, 0.8307, 0.8423, 0.8536, 0.8645, 0.8751, 0.8853, 0.8951, 0.9045, 0.9135, 0.9222, 0.9304, 0.9382, 0.9455, 0.9524, 0.9589, 0.9649, 0.9704, 0.9755, 0.9801, 0.9843, 0.988, 0.9911, 0.9938, 0.9961, 0.9978, 0.999, 0.9998, 1); } @media all and (min-width: 864px) { :root { --btn-height: 3.91vw; --img-m-width: 39%; --img-s-width: 23.43%; } } /*** 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 { 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; } /* 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 { font-size: 100%; } :root { --vh: 100vh; } body { overflow-x: hidden; overflow-y: visible; } body { color: #000; font-family: "Roboto", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; font-weight: 500; } img { width: 100%; height: auto; vertical-align: top; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } .textbox { text-box: trim-both cap alphabetic; } span.c-icon { position: relative; display: block; } span.c-icon svg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } footer { width: 100%; --links-l-width: 21.87vw; } footer .footer_inner { width: var(--innerW); margin-inline: auto; padding-bottom: 13.33vw; } footer p.logo { width: 89.25%; margin-bottom: 12.8vw; } footer .c-external_links { display: flex; align-items: center; margin-bottom: 13.33vw; } footer .c-external_links .c-links_l { width: var(--links-l-width); position: relative; } footer .c-external_links .c-links_l:after { content: ""; width: 2px; height: 100%; position: absolute; right: 0px; top: 0px; background: var(--color-black); } footer .c-external_links .c-links_l p { width: 36.58%; } footer .c-external_links .c-links_l p a { width: 100%; display: block; } footer .c-external_links .c-links_r { width: calc(100% - var(--links-l-width)); padding-left: 13.33vw; } footer .c-external_links .c-list_sns ul { display: flex; align-items: center; column-gap: 5.33vw; } footer .c-external_links .c-list_sns ul li a { display: block; } footer .c-external_links .c-list_sns ul li svg { fill: var(--color-black); } footer .c-external_links .c-list_sns ul li.u-link_line span.c-icon { width: 6.83vw; height: 6.11vw; } footer .c-external_links .c-list_sns ul li.u-link_fb span.c-icon { width: 5.87vw; height: 5.87vw; } footer .c-external_links .c-list_sns ul li.u-link_x span.c-icon { width: 5.07vw; height: 5.33vw; } footer .c-external_links .c-list_sns ul li.u-link_insta span.c-icon { width: 6.4vw; height: 5.87vw; } footer .c-credit dl { display: flex; } footer .c-credit dl dt { width: 44.77%; } footer .c-credit dl dd { width: 55.23%; } footer .c-credit dl dt, footer .c-credit dl dd { font-size: var(--fs-11-11); font-weight: 400; line-height: 1.818; } footer .copy { padding-top: 8vw; } footer .copy p { font-size: var(--fs-11-11); font-weight: 400; } @media all and (min-width: 864px) { footer { width: 31.25vw; position: absolute; left: calc(54.84vw - var(--scrollbar)); --links-l-width: 6.41vw; } footer .footer_inner { width: 100%; padding-bottom: 7.81vw; } footer p.logo { width: 100%; margin-bottom: 3.59vw; } footer .c-external_links { margin-bottom: 3.91vw; } footer .c-external_links .c-links_l p { width: 36.58%; } footer .c-external_links .c-links_r { padding-left: 3.91vw; } footer .c-external_links .c-list_sns ul { display: flex; align-items: center; column-gap: 1.56vw; } footer .c-external_links .c-list_sns ul li a { display: block; } footer .c-external_links .c-list_sns ul li svg { fill: var(--color-blue); } footer .c-external_links .c-list_sns ul li.u-link_line span.c-icon { width: 2vw; height: 1.79vw; } footer .c-external_links .c-list_sns ul li.u-link_fb span.c-icon { width: 1.72vw; height: 1.72vw; } footer .c-external_links .c-list_sns ul li.u-link_x span.c-icon { width: 1.48vw; height: 1.56vw; } footer .c-external_links .c-list_sns ul li.u-link_insta span.c-icon { width: 1.88vw; height: 1.72vw; } footer .c-credit dl { display: flex; } footer .c-credit dl dt { width: 37.5%; } footer .c-credit dl dd { width: 62.5%; } footer .copy { padding-top: 2.34vw; } } a.c-btn { display: block; height: var(--btn-height); background: var(--color-black); border-radius: 1.33vw; overflow: hidden; border: 1px solid var(--color-black); } a.c-btn .inr { width: 100%; height: 100%; height: calc(var(--btn-height) - 2px); display: flex; align-items: center; justify-content: center; } a.c-btn span { color: var(--color-white); font-size: var(--fs-17-17); letter-spacing: 0.1rem; } @media all and (min-width: 864px) { a.c-btn { border-radius: 0.39vw; } } @media (any-hover: hover) { a.c-btn:hover { background: var(--color-white); } a.c-btn:hover span { color: var(--color-black); } }