/* Reset style */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.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 */ @import url(https://use.typekit.net/fwk2akt.css); @import url(https://use.typekit.net/hjo8fbr.css); *: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; } /* 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; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-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; } .pc { display: block; } @media screen and (max-width: 768px) { .pc { display: none; } } .sp { display: none; } @media screen and (max-width: 768px) { .sp { display: block; } } /* br-sp */ .br-sp_1420 { display: none; } @media screen and (max-width: 1420px) { .br-sp_1420 { display: block; } } .br-sp_1380 { display: none; } @media screen and (max-width: 1380px) { .br-sp_1380 { display: block; } } .br-sp_1280 { display: none; } @media screen and (max-width: 1280px) { .br-sp_1280 { display: block; } } .br-sp_1180 { display: none; } @media screen and (max-width: 1180px) { .br-sp_1180 { display: block; } } .br-sp_820 { display: none; } @media screen and (max-width: 800px) { .br-sp_820 { display: block; } } .br-sp_480 { display: none; } @media screen and (max-width: 480px) { .br-sp_480 { display: block; } } /* br-sp_oo-oo */ /* br-pc */ /* br-pc_oo-oo */ html { font-size: 62.5%; scroll-behavior: smooth; } @media screen and (max-width: 768px) { html { font-size: 54.6%; } } body { max-width: 800px; width: 100%; margin: 0 auto; font-family: "Noto Sans JP", sans-serif; color: #3c3c3c; font-size: 1.6rem; overflow-x: hidden; } img { display: block; width: 100%; -o-object-fit: contain; object-fit: contain; } h2, h3, h4, p, li, a, div { letter-spacing: 0.1em; line-height: 1.8; font-weight: 500; } .market { font-family: "ff-market-web", sans-serif; } .barlow { font-family: barlow-condensed, sans-serif; } a { display: block; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; } a:hover { opacity: 0.8; } .no-link { pointer-events: none; } .inner { max-width: 1280px; width: 100%; margin-inline: auto; } @media screen and (max-width: 1320px) { .inner { padding-inline: 5%; } } @keyframes shine { 0% { left: -150%; } 50% { left: 100%; } 100% { left: 100%; } } .cta { position: relative; background: #df6a30; } .cta a { position: relative; width: 90%; bottom: 0%; margin: 0 auto; overflow: hidden; } .cta a::after { content: ""; display: block; position: absolute; width: 90%; height: 65%; top: 20%; left: -100%; background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%); transition: 0.5s; animation: shine 2s infinite; } .cta a::before { position: absolute; content: ""; display: inline-block; background-image: url("../img/woman.png"); background-repeat: no-repeat; background-size: contain; z-index: 10; width: 18%; aspect-ratio: 132/185; bottom: 15%; right: 0; } .campaign { position: relative; background: #df6a30; padding: 0 0 1rem; } .campaign img { width: 93%; height: auto; margin: 0 auto; } .mv { position: relative; } .mv .cta a { position: absolute; bottom: 1%; left: 0; right: 0; margin: auto; } .sec01 { background-color: #FCF1E3; padding: 10% 0 0%; } .sec01 .img01 { width: 90%; margin-inline: auto; margin-bottom: 2%; } .sec01 .img02 { width: 90%; margin: 8% auto 3%; } .sec01 .img03 { width: 100%; margin: 0 auto; } .sliderbox01, .sliderbox03 { overflow: hidden; } .sliderbox01 .slider01 img, .sliderbox01 .slider03 img, .sliderbox03 .slider01 img, .sliderbox03 .slider03 img { -o-object-fit: cover; object-fit: cover; } .sec02 { overflow-x: hidden; } .sec02 .img04 { width: 90%; margin: 3% auto; } .sec02 .box { overflow-x: scroll; padding-left: 5%; } .sec02 .box .inbox { min-width: 128%; padding-bottom: 5%; } .sec02 .img06 { width: 80%; margin: 10% auto; } .sec03 .img10 { width: 85%; margin: 5% auto; } .sec04 .img13 { width: 70%; margin: 3% auto; } .sec04 .tab-area { display: flex; gap: 3%; justify-content: center; cursor: pointer; width: 90%; margin-inline: auto; } .sec04 .tab .open { display: none; } .sec04 .tab .close { display: block; } .sec04 .tab.active .open { display: block; } .sec04 .tab.active .close { display: none; } .sec04 .panel { display: none; } .sec04 .panel.active { display: block; background-color: #000; padding: 8%; } .sec04 .img18, .sec04 .img22, .sec04 .img_26 { margin-top: -2%; } .sliderbox02 { margin-top: 30%; padding-inline: 5%; position: relative; background-color: #000; } .sliderbox02 .slider02 .slider_item { padding: 0.5% 1%; } .sliderbox02 .slider02 img { -o-object-fit: cover; object-fit: cover; } .sliderbox02 .thumb { display: flex; justify-content: center; gap: 3%; width: 85%; margin-inline: auto; position: absolute; top: 0; left: 50%; transform: translate(-50%, -99%); z-index: 10; } .sliderbox02 .thumb .slick-track { transform: unset !important; } .sliderbox02 .thumb .inthumb { position: relative; cursor: pointer; padding-inline: 1%; } .sliderbox02 .thumb .inthumb img { display: block; } .sliderbox02 .thumb .inthumb .open { display: none; } .sliderbox02 .thumb .inthumb .close { display: block; } .sliderbox02 .thumb .inthumb.slick-current .open { display: block; } .sliderbox02 .thumb .inthumb.slick-current .close { display: none; } .sliderbox02 .prev_icon { position: absolute; top: 50%; left: 0px; transform: translate(-50%, -50%); width: 30px; aspect-ratio: 1; z-index: 1; cursor: pointer; } .sliderbox02 .next_icon { position: absolute; top: 50%; right: 0px; transform: translate(50%, -50%); width: 30px; aspect-ratio: 1; z-index: 1; cursor: pointer; } .sec05 .box { background-color: #DE6A2F; padding: 8% 5%; } .sec05 .box .img_29 { width: 90%; margin-inline: auto; } .tabbox { background-color: #fff; } .tabbox .tab-area { display: flex; justify-content: center; cursor: pointer; margin-top: 8%; } .tabbox .tab-area .tab { text-align: center; } .tabbox .tab-area .tab .open { display: block; } .tabbox .tab-area .tab .close { display: none; } .tabbox .tab-area .tab.active .open { display: none; } .tabbox .tab-area .tab.active .close { display: block; } .tabbox .panel { display: none; padding: 5%; } .tabbox .panel img { margin-top: 5%; } .tabbox .panel img:first-child { margin-top: 0; } .tabbox .panel.active { display: block; } .gifbox { position: relative; } .gifbox .gifinbox { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: 90%; } .gif02 { width: 75%; margin-inline: auto; margin-bottom: 2%; } .sliderbox07 { padding-inline: 5%; position: relative; } .sliderbox07 .prev_icon { position: absolute; top: 50%; left: 0px; transform: translate(-50%, -50%); width: 30px; aspect-ratio: 1; z-index: 1; cursor: pointer; } .sliderbox07 .next_icon { position: absolute; top: 50%; right: 0px; transform: translate(50%, -50%); width: 30px; aspect-ratio: 1; z-index: 1; cursor: pointer; } .linkbox { display: flex; align-items: center; gap: 1%; max-width: 80%; margin-inline: auto; } .img24 { margin-top: 15%; } .accbox { background-color: #fcf1e3; padding: 5%; } .accbox .toggle_switch { position: relative; cursor: pointer; margin-top: 5%; } .accbox .toggle_switch:first-child { margin-top: 0; } .accbox .toggle_switch::after { content: ""; display: inline-block; width: 6%; height: 2px; background-color: #fff; transform: translateX(-50%) rotate(90deg); position: absolute; top: 50%; right: -1%; transition: all 0.3s; } .accbox .toggle_switch.open::after { transform: translateX(-50%) rotate(0deg); opacity: 0; } .accbox .toggle_contents { display: none; } .about { background-color: #DE6A2F; padding: 5%; } .about .ab01 { margin: 5% 0 0; } .about .map { background-color: #fff; padding-bottom: 3%; } .about .map .inmap { aspect-ratio: 1; width: 70%; margin-inline: auto 5%; } .about .ab02 { margin-top: -1%; } .privacy { margin: 5% auto; width: 30%; }/*# sourceMappingURL=style.css.map */ .redirect { text-align: center; padding: 20% 5%; } .redirect h2 { font-size: 2.4rem; margin-bottom: 2%; } .redirect p { font-size: 1.6rem; margin-bottom: 1%; } .redirect a{ display:inline; color: #0000FF; text-decoration: underline; }