#main img, body, html {
width: 100%;
max-width: 100%
}
#main a, #main a:active, #main a:hover, #main a:visited, #main button, a, a:active, a:hover, a:visited, body, html {
color: #222
}
#main, #main section, #main section ._container, body #main, footer, footer section, header {
position: relative
}
#main button, #main select:focus, button:focus:not(.focus-visible) {
outline: 0
}
#main ._block._search ._input-select:after, #main > section._car-search ._link-item ._item-title:after, #main > section._special a._btn._vm-link:after, p._icon {
speak: none;
font-style: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
@keyframes rotate {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
@keyframes rotate-reverse {
0% {
transform: rotate(0)
}
100% {
transform: rotate(-360deg)
}
}
@font-face {
font-family: suzuki-hatsuuri-icons;
src: url(../fonts/suzuki-hatsuuri-icons.woff2?6e9dc5566dd0c3966750d36faa7e669b) format("woff2");
font-weight: 400;
font-style: normal
}
p._icon {
font-family: suzuki-hatsuuri-icons !important;
font-weight: 400 !important;
line-height: 1
}
p._icon._angle-right:before {
content: "\e900"
}
p._icon._angle-left:before {
content: "\e901"
}
p._icon._angle-up:before {
content: "\e902"
}
p._icon._angle-down:before {
content: "\e903"
}
p._icon._angle-updown:before {
content: "\e90d"
}
p._icon._close:before {
content: "\e904"
}
p._icon._menu:before {
content: "\e905"
}
p._icon._twitter:before {
content: "\e930"
}
p._icon._facebook:before {
content: "\e931"
}
p._icon._line:before {
content: "\e932"
}
p._icon._youtube:before {
content: "\e933"
}
p._icon._instagram:before {
content: "\e934"
}
p._icon._arrow-right:before {
content: "\f101"
}
p._icon._arrowhead-right:before {
content: "\f102"
}
p._icon._geolocation:before {
content: "\f103"
}
p._icon._home:before {
content: "\f104"
}
p._icon._map-pin:before {
content: "\f105"
}
p._icon._play:before {
content: "\f106"
}
p._icon._search:before {
content: "\f107"
}
p._icon._triangle-right:before {
content: "\f108"
}
p._icon._triangle-updown:before {
content: "\f109"
}
p._icon._x-icon:before {
content: "\f10a"
}
p._icon._zoom:before {
content: "\f10b"
}
._scroll-in [data-duration="0"], ._scroll-in[data-duration="0"] {
transition-duration: 0s !important
}
._scroll-in [data-duration="0.1"], ._scroll-in[data-duration="0.1"] {
transition-duration: .1s !important
}
._scroll-in [data-duration="0.2"], ._scroll-in[data-duration="0.2"] {
transition-duration: .2s !important
}
._scroll-in [data-duration="0.3"], ._scroll-in[data-duration="0.3"] {
transition-duration: .3s !important
}
._scroll-in [data-duration="0.4"], ._scroll-in[data-duration="0.4"] {
transition-duration: .4s !important
}
._scroll-in [data-duration="0.5"], ._scroll-in[data-duration="0.5"] {
transition-duration: .5s !important
}
._scroll-in [data-duration="0.6"], ._scroll-in[data-duration="0.6"] {
transition-duration: .6s !important
}
._scroll-in [data-duration="0.7"], ._scroll-in[data-duration="0.7"] {
transition-duration: .7s !important
}
._scroll-in [data-duration="0.8"], ._scroll-in[data-duration="0.8"] {
transition-duration: .8s !important
}
._scroll-in [data-duration="0.9"], ._scroll-in[data-duration="0.9"] {
transition-duration: .9s !important
}
._scroll-in [data-duration="1"], ._scroll-in[data-duration="1"] {
transition-duration: 1s !important
}
._scroll-in [data-duration="1.1"], ._scroll-in[data-duration="1.1"] {
transition-duration: 1.1s !important
}
._scroll-in [data-duration="1.2"], ._scroll-in[data-duration="1.2"] {
transition-duration: 1.2s !important
}
._scroll-in [data-duration="1.3"], ._scroll-in[data-duration="1.3"] {
transition-duration: 1.3s !important
}
._scroll-in [data-duration="1.4"], ._scroll-in[data-duration="1.4"] {
transition-duration: 1.4s !important
}
._scroll-in [data-duration="1.5"], ._scroll-in[data-duration="1.5"] {
transition-duration: 1.5s !important
}
._scroll-in [data-duration="1.6"], ._scroll-in[data-duration="1.6"] {
transition-duration: 1.6s !important
}
._scroll-in [data-duration="1.7"], ._scroll-in[data-duration="1.7"] {
transition-duration: 1.7s !important
}
._scroll-in [data-duration="1.8"], ._scroll-in[data-duration="1.8"] {
transition-duration: 1.8s !important
}
._scroll-in [data-duration="1.9"], ._scroll-in[data-duration="1.9"] {
transition-duration: 1.9s !important
}
._scroll-in [data-duration="2"], ._scroll-in[data-duration="2"] {
transition-duration: 2s !important
}
@media (max-width:768px) {
._scroll-in [data-duration][data-duration2="0"], ._scroll-in[data-duration][data-duration2="0"] {
transition-delay: 0s !important
}
._scroll-in [data-duration][data-duration2="0.1"], ._scroll-in[data-duration][data-duration2="0.1"] {
transition-delay: .1s !important
}
._scroll-in [data-duration][data-duration2="0.2"], ._scroll-in[data-duration][data-duration2="0.2"] {
transition-delay: .2s !important
}
._scroll-in [data-duration][data-duration2="0.3"], ._scroll-in[data-duration][data-duration2="0.3"] {
transition-delay: .3s !important
}
._scroll-in [data-duration][data-duration2="0.4"], ._scroll-in[data-duration][data-duration2="0.4"] {
transition-delay: .4s !important
}
._scroll-in [data-duration][data-duration2="0.5"], ._scroll-in[data-duration][data-duration2="0.5"] {
transition-delay: .5s !important
}
._scroll-in [data-duration][data-duration2="0.6"], ._scroll-in[data-duration][data-duration2="0.6"] {
transition-delay: .6s !important
}
._scroll-in [data-duration][data-duration2="0.7"], ._scroll-in[data-duration][data-duration2="0.7"] {
transition-delay: .7s !important
}
._scroll-in [data-duration][data-duration2="0.8"], ._scroll-in[data-duration][data-duration2="0.8"] {
transition-delay: .8s !important
}
._scroll-in [data-duration][data-duration2="0.9"], ._scroll-in[data-duration][data-duration2="0.9"] {
transition-delay: .9s !important
}
._scroll-in [data-duration][data-duration2="1"], ._scroll-in[data-duration][data-duration2="1"] {
transition-delay: 1s !important
}
._scroll-in [data-duration][data-duration2="1.1"], ._scroll-in[data-duration][data-duration2="1.1"] {
transition-delay: 1.1s !important
}
._scroll-in [data-duration][data-duration2="1.2"], ._scroll-in[data-duration][data-duration2="1.2"] {
transition-delay: 1.2s !important
}
._scroll-in [data-duration][data-duration2="1.3"], ._scroll-in[data-duration][data-duration2="1.3"] {
transition-delay: 1.3s !important
}
._scroll-in [data-duration][data-duration2="1.4"], ._scroll-in[data-duration][data-duration2="1.4"] {
transition-delay: 1.4s !important
}
._scroll-in [data-duration][data-duration2="1.5"], ._scroll-in[data-duration][data-duration2="1.5"] {
transition-delay: 1.5s !important
}
._scroll-in [data-duration][data-duration2="1.6"], ._scroll-in[data-duration][data-duration2="1.6"] {
transition-delay: 1.6s !important
}
._scroll-in [data-duration][data-duration2="1.7"], ._scroll-in[data-duration][data-duration2="1.7"] {
transition-delay: 1.7s !important
}
._scroll-in [data-duration][data-duration2="1.8"], ._scroll-in[data-duration][data-duration2="1.8"] {
transition-delay: 1.8s !important
}
._scroll-in [data-duration][data-duration2="1.9"], ._scroll-in[data-duration][data-duration2="1.9"] {
transition-delay: 1.9s !important
}
._scroll-in [data-duration][data-duration2="2"], ._scroll-in[data-duration][data-duration2="2"] {
transition-delay: 2s !important
}
}
._scroll-in [data-delay="0"], ._scroll-in[data-delay="0"] {
transition-delay: 0s !important
}
._scroll-in [data-delay="0.1"], ._scroll-in[data-delay="0.1"] {
transition-delay: .1s !important
}
._scroll-in [data-delay="0.2"], ._scroll-in[data-delay="0.2"] {
transition-delay: .2s !important
}
._scroll-in [data-delay="0.3"], ._scroll-in[data-delay="0.3"] {
transition-delay: .3s !important
}
._scroll-in [data-delay="0.4"], ._scroll-in[data-delay="0.4"] {
transition-delay: .4s !important
}
._scroll-in [data-delay="0.5"], ._scroll-in[data-delay="0.5"] {
transition-delay: .5s !important
}
._scroll-in [data-delay="0.6"], ._scroll-in[data-delay="0.6"] {
transition-delay: .6s !important
}
._scroll-in [data-delay="0.7"], ._scroll-in[data-delay="0.7"] {
transition-delay: .7s !important
}
._scroll-in [data-delay="0.8"], ._scroll-in[data-delay="0.8"] {
transition-delay: .8s !important
}
._scroll-in [data-delay="0.9"], ._scroll-in[data-delay="0.9"] {
transition-delay: .9s !important
}
._scroll-in [data-delay="1"], ._scroll-in[data-delay="1"] {
transition-delay: 1s !important
}
._scroll-in [data-delay="1.1"], ._scroll-in[data-delay="1.1"] {
transition-delay: 1.1s !important
}
._scroll-in [data-delay="1.2"], ._scroll-in[data-delay="1.2"] {
transition-delay: 1.2s !important
}
._scroll-in [data-delay="1.3"], ._scroll-in[data-delay="1.3"] {
transition-delay: 1.3s !important
}
._scroll-in [data-delay="1.4"], ._scroll-in[data-delay="1.4"] {
transition-delay: 1.4s !important
}
._scroll-in [data-delay="1.5"], ._scroll-in[data-delay="1.5"] {
transition-delay: 1.5s !important
}
._scroll-in [data-delay="1.6"], ._scroll-in[data-delay="1.6"] {
transition-delay: 1.6s !important
}
._scroll-in [data-delay="1.7"], ._scroll-in[data-delay="1.7"] {
transition-delay: 1.7s !important
}
._scroll-in [data-delay="1.8"], ._scroll-in[data-delay="1.8"] {
transition-delay: 1.8s !important
}
._scroll-in [data-delay="1.9"], ._scroll-in[data-delay="1.9"] {
transition-delay: 1.9s !important
}
._scroll-in [data-delay="2"], ._scroll-in[data-delay="2"] {
transition-delay: 2s !important
}
@media (max-width:768px) {
._scroll-in [data-delay][data-delay2="0"], ._scroll-in[data-delay][data-delay2="0"] {
transition-delay: 0s !important
}
._scroll-in [data-delay][data-delay2="0.1"], ._scroll-in[data-delay][data-delay2="0.1"] {
transition-delay: .1s !important
}
._scroll-in [data-delay][data-delay2="0.2"], ._scroll-in[data-delay][data-delay2="0.2"] {
transition-delay: .2s !important
}
._scroll-in [data-delay][data-delay2="0.3"], ._scroll-in[data-delay][data-delay2="0.3"] {
transition-delay: .3s !important
}
._scroll-in [data-delay][data-delay2="0.4"], ._scroll-in[data-delay][data-delay2="0.4"] {
transition-delay: .4s !important
}
._scroll-in [data-delay][data-delay2="0.5"], ._scroll-in[data-delay][data-delay2="0.5"] {
transition-delay: .5s !important
}
._scroll-in [data-delay][data-delay2="0.6"], ._scroll-in[data-delay][data-delay2="0.6"] {
transition-delay: .6s !important
}
._scroll-in [data-delay][data-delay2="0.7"], ._scroll-in[data-delay][data-delay2="0.7"] {
transition-delay: .7s !important
}
._scroll-in [data-delay][data-delay2="0.8"], ._scroll-in[data-delay][data-delay2="0.8"] {
transition-delay: .8s !important
}
._scroll-in [data-delay][data-delay2="0.9"], ._scroll-in[data-delay][data-delay2="0.9"] {
transition-delay: .9s !important
}
._scroll-in [data-delay][data-delay2="1"], ._scroll-in[data-delay][data-delay2="1"] {
transition-delay: 1s !important
}
._scroll-in [data-delay][data-delay2="1.1"], ._scroll-in[data-delay][data-delay2="1.1"] {
transition-delay: 1.1s !important
}
._scroll-in [data-delay][data-delay2="1.2"], ._scroll-in[data-delay][data-delay2="1.2"] {
transition-delay: 1.2s !important
}
._scroll-in [data-delay][data-delay2="1.3"], ._scroll-in[data-delay][data-delay2="1.3"] {
transition-delay: 1.3s !important
}
._scroll-in [data-delay][data-delay2="1.4"], ._scroll-in[data-delay][data-delay2="1.4"] {
transition-delay: 1.4s !important
}
._scroll-in [data-delay][data-delay2="1.5"], ._scroll-in[data-delay][data-delay2="1.5"] {
transition-delay: 1.5s !important
}
._scroll-in [data-delay][data-delay2="1.6"], ._scroll-in[data-delay][data-delay2="1.6"] {
transition-delay: 1.6s !important
}
._scroll-in [data-delay][data-delay2="1.7"], ._scroll-in[data-delay][data-delay2="1.7"] {
transition-delay: 1.7s !important
}
._scroll-in [data-delay][data-delay2="1.8"], ._scroll-in[data-delay][data-delay2="1.8"] {
transition-delay: 1.8s !important
}
._scroll-in [data-delay][data-delay2="1.9"], ._scroll-in[data-delay][data-delay2="1.9"] {
transition-delay: 1.9s !important
}
._scroll-in [data-delay][data-delay2="2"], ._scroll-in[data-delay][data-delay2="2"] {
transition-delay: 2s !important
}
}
._scroll-in .scroll-in-up, ._scroll-in.in-up {
opacity: 0;
transform: translateY((50%));
transition: opacity linear, transform ease-out;
transition-duration: .5s
}
._scroll-in .scroll-in-up[data-y="5"], ._scroll-in.in-up[data-y="5"] {
transform: translateY((5%))
}
._scroll-in .scroll-in-up[data-y="10"], ._scroll-in.in-up[data-y="10"] {
transform: translateY((10%))
}
._scroll-in .scroll-in-up[data-y="15"], ._scroll-in.in-up[data-y="15"] {
transform: translateY((15%))
}
._scroll-in .scroll-in-up[data-y="20"], ._scroll-in.in-up[data-y="20"] {
transform: translateY((20%))
}
._scroll-in .scroll-in-up[data-y="25"], ._scroll-in.in-up[data-y="25"] {
transform: translateY((25%))
}
._scroll-in .scroll-in-up[data-y="30"], ._scroll-in.in-up[data-y="30"] {
transform: translateY((30%))
}
._scroll-in .scroll-in-up[data-y="35"], ._scroll-in.in-up[data-y="35"] {
transform: translateY((35%))
}
._scroll-in .scroll-in-up[data-y="40"], ._scroll-in.in-up[data-y="40"] {
transform: translateY((40%))
}
._scroll-in .scroll-in-up[data-y="45"], ._scroll-in.in-up[data-y="45"] {
transform: translateY((45%))
}
._scroll-in .scroll-in-up[data-y="50"], ._scroll-in.in-up[data-y="50"] {
transform: translateY((50%))
}
._scroll-in .scroll-in-up[data-y="55"], ._scroll-in.in-up[data-y="55"] {
transform: translateY((55%))
}
._scroll-in .scroll-in-up[data-y="60"], ._scroll-in.in-up[data-y="60"] {
transform: translateY((60%))
}
._scroll-in .scroll-in-up[data-y="65"], ._scroll-in.in-up[data-y="65"] {
transform: translateY((65%))
}
._scroll-in .scroll-in-up[data-y="70"], ._scroll-in.in-up[data-y="70"] {
transform: translateY((70%))
}
._scroll-in .scroll-in-up[data-y="75"], ._scroll-in.in-up[data-y="75"] {
transform: translateY((75%))
}
._scroll-in .scroll-in-up[data-y="80"], ._scroll-in.in-up[data-y="80"] {
transform: translateY((80%))
}
._scroll-in .scroll-in-up[data-y="85"], ._scroll-in.in-up[data-y="85"] {
transform: translateY((85%))
}
._scroll-in .scroll-in-up[data-y="90"], ._scroll-in.in-up[data-y="90"] {
transform: translateY((90%))
}
._scroll-in .scroll-in-up[data-y="95"], ._scroll-in.in-up[data-y="95"] {
transform: translateY((95%))
}
._scroll-in .scroll-in-up[data-y="100"], ._scroll-in.in-up[data-y="100"] {
transform: translateY((100%))
}
._scroll-in.is-in .scroll-in-up, ._scroll-in.is-in.in-up {
opacity: 1 !important;
transform: translateY((0)) !important
}
._scroll-in .scroll-in-down, ._scroll-in.in-down {
opacity: 0;
transform: translateY((-50%));
transition: opacity linear, transform ease-out;
transition-duration: .5s
}
._scroll-in .scroll-in-down[data-y="5"], ._scroll-in.in-down[data-y="5"] {
transform: translateY((-5%))
}
._scroll-in .scroll-in-down[data-y="10"], ._scroll-in.in-down[data-y="10"] {
transform: translateY((-10%))
}
._scroll-in .scroll-in-down[data-y="15"], ._scroll-in.in-down[data-y="15"] {
transform: translateY((-15%))
}
._scroll-in .scroll-in-down[data-y="20"], ._scroll-in.in-down[data-y="20"] {
transform: translateY((-20%))
}
._scroll-in .scroll-in-down[data-y="25"], ._scroll-in.in-down[data-y="25"] {
transform: translateY((-25%))
}
._scroll-in .scroll-in-down[data-y="30"], ._scroll-in.in-down[data-y="30"] {
transform: translateY((-30%))
}
._scroll-in .scroll-in-down[data-y="35"], ._scroll-in.in-down[data-y="35"] {
transform: translateY((-35%))
}
._scroll-in .scroll-in-down[data-y="40"], ._scroll-in.in-down[data-y="40"] {
transform: translateY((-40%))
}
._scroll-in .scroll-in-down[data-y="45"], ._scroll-in.in-down[data-y="45"] {
transform: translateY((-45%))
}
._scroll-in .scroll-in-down[data-y="50"], ._scroll-in.in-down[data-y="50"] {
transform: translateY((-50%))
}
._scroll-in .scroll-in-down[data-y="55"], ._scroll-in.in-down[data-y="55"] {
transform: translateY((-55%))
}
._scroll-in .scroll-in-down[data-y="60"], ._scroll-in.in-down[data-y="60"] {
transform: translateY((-60%))
}
._scroll-in .scroll-in-down[data-y="65"], ._scroll-in.in-down[data-y="65"] {
transform: translateY((-65%))
}
._scroll-in .scroll-in-down[data-y="70"], ._scroll-in.in-down[data-y="70"] {
transform: translateY((-70%))
}
._scroll-in .scroll-in-down[data-y="75"], ._scroll-in.in-down[data-y="75"] {
transform: translateY((-75%))
}
._scroll-in .scroll-in-down[data-y="80"], ._scroll-in.in-down[data-y="80"] {
transform: translateY((-80%))
}
._scroll-in .scroll-in-down[data-y="85"], ._scroll-in.in-down[data-y="85"] {
transform: translateY((-85%))
}
._scroll-in .scroll-in-down[data-y="90"], ._scroll-in.in-down[data-y="90"] {
transform: translateY((-90%))
}
._scroll-in .scroll-in-down[data-y="95"], ._scroll-in.in-down[data-y="95"] {
transform: translateY((-95%))
}
._scroll-in .scroll-in-down[data-y="100"], ._scroll-in.in-down[data-y="100"] {
transform: translateY((-100%))
}
._scroll-in.is-in .scroll-in-down, ._scroll-in.is-in.in-down {
opacity: 1 !important;
transform: translateY((0)) !important
}
._scroll-in .scroll-in-left, ._scroll-in.in-left {
opacity: 0;
transform: translateX((25%));
transition: opacity linear, transform ease-out;
transition-duration: .5s
}
._scroll-in .scroll-in-left[data-x="5"], ._scroll-in.in-left[data-x="5"] {
transform: translateX((5%))
}
._scroll-in .scroll-in-left[data-x="10"], ._scroll-in.in-left[data-x="10"] {
transform: translateX((10%))
}
._scroll-in .scroll-in-left[data-x="15"], ._scroll-in.in-left[data-x="15"] {
transform: translateX((15%))
}
._scroll-in .scroll-in-left[data-x="20"], ._scroll-in.in-left[data-x="20"] {
transform: translateX((20%))
}
._scroll-in .scroll-in-left[data-x="25"], ._scroll-in.in-left[data-x="25"] {
transform: translateX((25%))
}
._scroll-in .scroll-in-left[data-x="30"], ._scroll-in.in-left[data-x="30"] {
transform: translateX((30%))
}
._scroll-in .scroll-in-left[data-x="35"], ._scroll-in.in-left[data-x="35"] {
transform: translateX((35%))
}
._scroll-in .scroll-in-left[data-x="40"], ._scroll-in.in-left[data-x="40"] {
transform: translateX((40%))
}
._scroll-in .scroll-in-left[data-x="45"], ._scroll-in.in-left[data-x="45"] {
transform: translateX((45%))
}
._scroll-in .scroll-in-left[data-x="50"], ._scroll-in.in-left[data-x="50"] {
transform: translateX((50%))
}
._scroll-in .scroll-in-left[data-x="55"], ._scroll-in.in-left[data-x="55"] {
transform: translateX((55%))
}
._scroll-in .scroll-in-left[data-x="60"], ._scroll-in.in-left[data-x="60"] {
transform: translateX((60%))
}
._scroll-in .scroll-in-left[data-x="65"], ._scroll-in.in-left[data-x="65"] {
transform: translateX((65%))
}
._scroll-in .scroll-in-left[data-x="70"], ._scroll-in.in-left[data-x="70"] {
transform: translateX((70%))
}
._scroll-in .scroll-in-left[data-x="75"], ._scroll-in.in-left[data-x="75"] {
transform: translateX((75%))
}
._scroll-in .scroll-in-left[data-x="80"], ._scroll-in.in-left[data-x="80"] {
transform: translateX((80%))
}
._scroll-in .scroll-in-left[data-x="85"], ._scroll-in.in-left[data-x="85"] {
transform: translateX((85%))
}
._scroll-in .scroll-in-left[data-x="90"], ._scroll-in.in-left[data-x="90"] {
transform: translateX((90%))
}
._scroll-in .scroll-in-left[data-x="95"], ._scroll-in.in-left[data-x="95"] {
transform: translateX((95%))
}
._scroll-in .scroll-in-left[data-x="100"], ._scroll-in.in-left[data-x="100"] {
transform: translateX((100%))
}
._scroll-in.is-in .scroll-in-left, ._scroll-in.is-in.in-left {
opacity: 1 !important;
transform: translateX((0)) !important
}
._scroll-in .scroll-in-right, ._scroll-in.in-right {
opacity: 0;
transform: translateX((-25%));
transition: opacity linear, transform ease-out;
transition-duration: .5s
}
._scroll-in .scroll-in-right[data-x="5"], ._scroll-in.in-right[data-x="5"] {
transform: translateX((-5%))
}
._scroll-in .scroll-in-right[data-x="10"], ._scroll-in.in-right[data-x="10"] {
transform: translateX((-10%))
}
._scroll-in .scroll-in-right[data-x="15"], ._scroll-in.in-right[data-x="15"] {
transform: translateX((-15%))
}
._scroll-in .scroll-in-right[data-x="20"], ._scroll-in.in-right[data-x="20"] {
transform: translateX((-20%))
}
._scroll-in .scroll-in-right[data-x="25"], ._scroll-in.in-right[data-x="25"] {
transform: translateX((-25%))
}
._scroll-in .scroll-in-right[data-x="30"], ._scroll-in.in-right[data-x="30"] {
transform: translateX((-30%))
}
._scroll-in .scroll-in-right[data-x="35"], ._scroll-in.in-right[data-x="35"] {
transform: translateX((-35%))
}
._scroll-in .scroll-in-right[data-x="40"], ._scroll-in.in-right[data-x="40"] {
transform: translateX((-40%))
}
._scroll-in .scroll-in-right[data-x="45"], ._scroll-in.in-right[data-x="45"] {
transform: translateX((-45%))
}
._scroll-in .scroll-in-right[data-x="50"], ._scroll-in.in-right[data-x="50"] {
transform: translateX((-50%))
}
._scroll-in .scroll-in-right[data-x="55"], ._scroll-in.in-right[data-x="55"] {
transform: translateX((-55%))
}
._scroll-in .scroll-in-right[data-x="60"], ._scroll-in.in-right[data-x="60"] {
transform: translateX((-60%))
}
._scroll-in .scroll-in-right[data-x="65"], ._scroll-in.in-right[data-x="65"] {
transform: translateX((-65%))
}
._scroll-in .scroll-in-right[data-x="70"], ._scroll-in.in-right[data-x="70"] {
transform: translateX((-70%))
}
._scroll-in .scroll-in-right[data-x="75"], ._scroll-in.in-right[data-x="75"] {
transform: translateX((-75%))
}
._scroll-in .scroll-in-right[data-x="80"], ._scroll-in.in-right[data-x="80"] {
transform: translateX((-80%))
}
._scroll-in .scroll-in-right[data-x="85"], ._scroll-in.in-right[data-x="85"] {
transform: translateX((-85%))
}
._scroll-in .scroll-in-right[data-x="90"], ._scroll-in.in-right[data-x="90"] {
transform: translateX((-90%))
}
._scroll-in .scroll-in-right[data-x="95"], ._scroll-in.in-right[data-x="95"] {
transform: translateX((-95%))
}
._scroll-in .scroll-in-right[data-x="100"], ._scroll-in.in-right[data-x="100"] {
transform: translateX((-100%))
}
._scroll-in.is-in .scroll-in-right, ._scroll-in.is-in.in-right {
opacity: 1 !important;
transform: translateX((0)) !important
}
._scroll-in ._scroll-in-fade, ._scroll-in._fade {
opacity: 0;
transition: opacity linear;
transition-duration: .4s
}
._scroll-in._is-in ._scroll-in-fade, ._scroll-in._is-in._fade {
opacity: 1
}
._scroll-in ._scroll-in-text-push, ._scroll-in._text-push {
overflow: hidden
}
._scroll-container, html {
-webkit-overflow-scrolling: touch
}
._scroll-in ._scroll-in-text-push > ._text, ._scroll-in._text-push > ._text {
transform: translateY(100%);
transition: opacity linear, transform cubic-bezier(.23, .57, .515, 1);
transition-duration: .4s
}
._scroll-in._is-in ._scroll-in-text-push > ._text, ._scroll-in._text-push._is-in > ._text {
transform: translateY(0)
}
._scroll-in ._scroll-in-text-chars span.char, ._scroll-in._text-chars span.char {
opacity: 0;
transform: translateX(100%);
transition: opacity linear, transform cubic-bezier(.23, .57, .515, 1);
transition-duration: .3s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="1"], ._scroll-in._text-chars span.char[data-index="1"] {
transition-delay: 75ms
}
._scroll-in ._scroll-in-text-chars span.char[data-index="2"], ._scroll-in._text-chars span.char[data-index="2"] {
transition-delay: .15s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="3"], ._scroll-in._text-chars span.char[data-index="3"] {
transition-delay: 225ms
}
._scroll-in ._scroll-in-text-chars span.char[data-index="4"], ._scroll-in._text-chars span.char[data-index="4"] {
transition-delay: .3s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="5"], ._scroll-in._text-chars span.char[data-index="5"] {
transition-delay: 375ms
}
._scroll-in ._scroll-in-text-chars span.char[data-index="6"], ._scroll-in._text-chars span.char[data-index="6"] {
transition-delay: .45s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="7"], ._scroll-in._text-chars span.char[data-index="7"] {
transition-delay: 525ms
}
._scroll-in ._scroll-in-text-chars span.char[data-index="8"], ._scroll-in._text-chars span.char[data-index="8"] {
transition-delay: .6s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="9"], ._scroll-in._text-chars span.char[data-index="9"] {
transition-delay: 675ms
}
._scroll-in ._scroll-in-text-chars span.char[data-index="10"], ._scroll-in._text-chars span.char[data-index="10"] {
transition-delay: .75s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="11"], ._scroll-in._text-chars span.char[data-index="11"] {
transition-delay: 825ms
}
._scroll-in ._scroll-in-text-chars span.char[data-index="12"], ._scroll-in._text-chars span.char[data-index="12"] {
transition-delay: .9s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="13"], ._scroll-in._text-chars span.char[data-index="13"] {
transition-delay: 975ms
}
._scroll-in ._scroll-in-text-chars span.char[data-index="14"], ._scroll-in._text-chars span.char[data-index="14"] {
transition-delay: 1.05s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="15"], ._scroll-in._text-chars span.char[data-index="15"] {
transition-delay: 1.125s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="16"], ._scroll-in._text-chars span.char[data-index="16"] {
transition-delay: 1.2s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="17"], ._scroll-in._text-chars span.char[data-index="17"] {
transition-delay: 1.275s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="18"], ._scroll-in._text-chars span.char[data-index="18"] {
transition-delay: 1.35s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="19"], ._scroll-in._text-chars span.char[data-index="19"] {
transition-delay: 1.425s
}
._scroll-in ._scroll-in-text-chars span.char[data-index="20"], ._scroll-in._text-chars span.char[data-index="20"] {
transition-delay: 1.5s
}
._scroll-in._is-in ._scroll-in-text-chars span._char, ._scroll-in._text-chars._is-in span._char {
opacity: 1;
transform: translate(0, 0) scale(1)
}
._scroll-in ._scroll-in-text-lines span.line, ._scroll-in._text-lines span.line {
display: inline-block;
transition: transform cubic-bezier(.23, .57, .515, 1), opacity linear;
transition-duration: .7s;
opacity: 0;
transform: translateX(25%)
}
._scroll-in ._scroll-in-text-lines span.line[data-index="1"], ._scroll-in._text-lines span.line[data-index="1"] {
transition-delay: 0s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="2"], ._scroll-in._text-lines span.line[data-index="2"] {
transition-delay: .1s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="3"], ._scroll-in._text-lines span.line[data-index="3"] {
transition-delay: .2s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="4"], ._scroll-in._text-lines span.line[data-index="4"] {
transition-delay: .3s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="5"], ._scroll-in._text-lines span.line[data-index="5"] {
transition-delay: .4s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="6"], ._scroll-in._text-lines span.line[data-index="6"] {
transition-delay: .5s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="7"], ._scroll-in._text-lines span.line[data-index="7"] {
transition-delay: .6s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="8"], ._scroll-in._text-lines span.line[data-index="8"] {
transition-delay: .7s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="9"], ._scroll-in._text-lines span.line[data-index="9"] {
transition-delay: .8s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="10"], ._scroll-in._text-lines span.line[data-index="10"] {
transition-delay: .9s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="11"], ._scroll-in._text-lines span.line[data-index="11"] {
transition-delay: 1s
}
._scroll-in ._scroll-in-text-lines span.line[data-index="12"], ._scroll-in._text-lines span.line[data-index="12"] {
transition-delay: 1.1s
}
._scroll-in._is-in ._scroll-in-text-lines span.line, ._scroll-in._text-lines._is-in span.line {
opacity: 1;
transform: translate(0, 0) scale(1)
}
#main :after, #main :before, #main a, #main blockquote, #main button, #main code, #main dd, #main div, #main dl, #main dt, #main fieldset, #main figure, #main footer, #main form, #main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #main header, #main hr, #main input, #main label, #main legend, #main li, #main main, #main ol, #main p, #main picture, #main pre, #main section, #main td, #main textarea, #main th, #main ul {
margin: 0;
padding: 0;
box-sizing: border-box
}
#main li {
list-style: none
}
#main img {
image-rendering: auto;
height: auto;
vertical-align: top
}
#main table {
border-collapse: collapse;
border-spacing: 0
}
#main select {
border-radius: 0;
border: 0;
margin: 0;
padding: 0;
background: none;
vertical-align: middle;
font-size: inherit;
color: inherit;
box-sizing: content-box
}
#main button {
border: none;
cursor: pointer;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
#main h1, #main h1 span, #main h2, #main h2 span, #main h3 h3 span, #main h4 h4 span, #main h5, #main h5 span, #main h6, #main h6 span, #main p, #main span, #main strong {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-align: inherit;
padding: 0;
border: none
}
@media (min-width:751px) {
#main h1, #main h1 span, #main h2, #main h2 span, #main h3 h3 span, #main h4 h4 span, #main h5, #main h5 span, #main h6, #main h6 span, #main p, #main span, #main strong {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-align: inherit;
padding: 0;
border: none
}
}
@media (max-width:750px) {
#main h1, #main h1 span, #main h2, #main h2 span, #main h3 h3 span, #main h4 h4 span, #main h5, #main h5 span, #main h6, #main h6 span, #main p, #main span, #main strong {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-align: inherit;
padding: 0;
border: none
}
}
#main, #main a, a {
font-weight: 500
}
#main {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal
}
@media (min-width:769px) {
#main {
font-size: .9722222222vw
}
#main section {
padding-top: 5.5555555556vw;
padding-bottom: 5.5555555556vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main {
font-size: 18.67px
}
#main section {
padding-top: 106.67px;
padding-bottom: 106.67px
}
}
@media (max-width:768px) {
#main {
font-size: 3.2vw
}
header {
height: 50px
}
#main section {
padding-top: 10.6666666667vw;
padding-bottom: 10.6666666667vw
}
#main section.kv {
padding-top: 0
}
}
#main section.kv {
z-index: 2
}
#main._fixed {
z-index: 100
}
body, html {
margin: 0;
padding: 0;
background-color: #fff;
line-height: 1.6
}
html::-webkit-scrollbar-track {
background-color: rgba(208, 44, 37, .2)
}
html::-webkit-scrollbar-thumb {
background-color: rgba(208, 44, 37, .5);
-webkit-transition: background-color .3s linear;
transition: background-color .3s linear
}
html::-webkit-scrollbar-thumb:hover {
background-color: #D02C25
}
@media (min-width:769px) {
#main section.kv {
padding-top: 0;
padding-bottom: 0
}
html::-webkit-scrollbar {
width: .6944444444vw;
border-radius: .6944444444vw
}
body {
width: min-width
}
._pc-only {
display: inherit
}
._sp-only {
display: none !important
}
}
@media (min-width:769px) and (min-width:1920px) {
#main section.kv {
padding-top: 0;
padding-bottom: 0
}
html::-webkit-scrollbar {
width: 13.33px;
border-radius: 13.33px
}
body {
width: min-width
}
}
@media (max-width:768px) {
#main section.kv {
padding-bottom: 0
}
html::-webkit-scrollbar {
width: 2.6666666667vw;
border-radius: 2.6666666667vw
}
body {
width: 245.3333333333vw
}
}
body #main {
font-feature-settings: "palt"1
}
button {
border: none;
background-color: transparent;
cursor: pointer
}
@media (min-width:769px) {
.mt5 {
margin-top: .3472222222vw !important
}
.mb5 {
margin-bottom: .3472222222vw !important
}
.ml5 {
margin-left: .3472222222vw !important
}
.mr5 {
margin-right: .3472222222vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt5 {
margin-top: 6.67px !important
}
.mb5 {
margin-bottom: 6.67px !important
}
.ml5 {
margin-left: 6.67px !important
}
.mr5 {
margin-right: 6.67px !important
}
}
@media (max-width:768px) {
._pc-only {
display: none !important
}
._sp-only {
display: inherit
}
.mt5 {
margin-top: .88vw !important
}
.mb5 {
margin-bottom: .88vw !important
}
.ml5 {
margin-left: .88vw !important
}
.mr5 {
margin-right: .88vw !important
}
}
@media (min-width:769px) {
.mt10 {
margin-top: .6944444444vw !important
}
.mb10 {
margin-bottom: .6944444444vw !important
}
.ml10 {
margin-left: .6944444444vw !important
}
.mr10 {
margin-right: .6944444444vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt10 {
margin-top: 13.33px !important
}
.mb10 {
margin-bottom: 13.33px !important
}
.ml10 {
margin-left: 13.33px !important
}
.mr10 {
margin-right: 13.33px !important
}
}
@media (max-width:768px) {
.mt10 {
margin-top: 1.76vw !important
}
.mb10 {
margin-bottom: 1.76vw !important
}
.ml10 {
margin-left: 1.76vw !important
}
.mr10 {
margin-right: 1.76vw !important
}
}
@media (min-width:769px) {
.mt20 {
margin-top: 1.3888888889vw !important
}
.mb20 {
margin-bottom: 1.3888888889vw !important
}
.ml20 {
margin-left: 1.3888888889vw !important
}
.mr20 {
margin-right: 1.3888888889vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt20 {
margin-top: 26.67px !important
}
.mb20 {
margin-bottom: 26.67px !important
}
.ml20 {
margin-left: 26.67px !important
}
.mr20 {
margin-right: 26.67px !important
}
}
@media (max-width:768px) {
.mt20 {
margin-top: 3.52vw !important
}
.mb20 {
margin-bottom: 3.52vw !important
}
.ml20 {
margin-left: 3.52vw !important
}
.mr20 {
margin-right: 3.52vw !important
}
}
@media (min-width:769px) {
.mt30 {
margin-top: 2.0833333333vw !important
}
.mb30 {
margin-bottom: 2.0833333333vw !important
}
.ml30 {
margin-left: 2.0833333333vw !important
}
.mr30 {
margin-right: 2.0833333333vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt30 {
margin-top: 40px !important
}
.mb30 {
margin-bottom: 40px !important
}
.ml30 {
margin-left: 40px !important
}
.mr30 {
margin-right: 40px !important
}
}
@media (max-width:768px) {
.mt30 {
margin-top: 5.28vw !important
}
.mb30 {
margin-bottom: 5.28vw !important
}
.ml30 {
margin-left: 5.28vw !important
}
.mr30 {
margin-right: 5.28vw !important
}
}
@media (min-width:769px) {
.mt40 {
margin-top: 2.7777777778vw !important
}
.mb40 {
margin-bottom: 2.7777777778vw !important
}
.ml40 {
margin-left: 2.7777777778vw !important
}
.mr40 {
margin-right: 2.7777777778vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt40 {
margin-top: 53.33px !important
}
.mb40 {
margin-bottom: 53.33px !important
}
.ml40 {
margin-left: 53.33px !important
}
.mr40 {
margin-right: 53.33px !important
}
}
@media (max-width:768px) {
.mt40 {
margin-top: 7.04vw !important
}
.mb40 {
margin-bottom: 7.04vw !important
}
.ml40 {
margin-left: 7.04vw !important
}
.mr40 {
margin-right: 7.04vw !important
}
}
@media (min-width:769px) {
.mt50 {
margin-top: 3.4722222222vw !important
}
.mb50 {
margin-bottom: 3.4722222222vw !important
}
.ml50 {
margin-left: 3.4722222222vw !important
}
.mr50 {
margin-right: 3.4722222222vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt50 {
margin-top: 66.67px !important
}
.mb50 {
margin-bottom: 66.67px !important
}
.ml50 {
margin-left: 66.67px !important
}
.mr50 {
margin-right: 66.67px !important
}
}
@media (max-width:768px) {
.mt50 {
margin-top: 8.8vw !important
}
.mb50 {
margin-bottom: 8.8vw !important
}
.ml50 {
margin-left: 8.8vw !important
}
.mr50 {
margin-right: 8.8vw !important
}
}
@media (min-width:769px) {
.mt60 {
margin-top: 4.1666666667vw !important
}
.mb60 {
margin-bottom: 4.1666666667vw !important
}
.ml60 {
margin-left: 4.1666666667vw !important
}
.mr60 {
margin-right: 4.1666666667vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt60 {
margin-top: 80px !important
}
.mb60 {
margin-bottom: 80px !important
}
.ml60 {
margin-left: 80px !important
}
.mr60 {
margin-right: 80px !important
}
}
@media (max-width:768px) {
.mt60 {
margin-top: 10.56vw !important
}
.mb60 {
margin-bottom: 10.56vw !important
}
.ml60 {
margin-left: 10.56vw !important
}
.mr60 {
margin-right: 10.56vw !important
}
}
@media (min-width:769px) {
.mt70 {
margin-top: 4.8611111111vw !important
}
.mb70 {
margin-bottom: 4.8611111111vw !important
}
.ml70 {
margin-left: 4.8611111111vw !important
}
.mr70 {
margin-right: 4.8611111111vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt70 {
margin-top: 93.33px !important
}
.mb70 {
margin-bottom: 93.33px !important
}
.ml70 {
margin-left: 93.33px !important
}
.mr70 {
margin-right: 93.33px !important
}
}
@media (max-width:768px) {
.mt70 {
margin-top: 12.32vw !important
}
.mb70 {
margin-bottom: 12.32vw !important
}
.ml70 {
margin-left: 12.32vw !important
}
.mr70 {
margin-right: 12.32vw !important
}
}
@media (min-width:769px) {
.mt80 {
margin-top: 5.5555555556vw !important
}
.mb80 {
margin-bottom: 5.5555555556vw !important
}
.ml80 {
margin-left: 5.5555555556vw !important
}
.mr80 {
margin-right: 5.5555555556vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt80 {
margin-top: 106.67px !important
}
.mb80 {
margin-bottom: 106.67px !important
}
.ml80 {
margin-left: 106.67px !important
}
.mr80 {
margin-right: 106.67px !important
}
}
@media (max-width:768px) {
.mt80 {
margin-top: 14.08vw !important
}
.mb80 {
margin-bottom: 14.08vw !important
}
.ml80 {
margin-left: 14.08vw !important
}
.mr80 {
margin-right: 14.08vw !important
}
}
@media (min-width:769px) {
.mt90 {
margin-top: 6.25vw !important
}
.mb90 {
margin-bottom: 6.25vw !important
}
.ml90 {
margin-left: 6.25vw !important
}
.mr90 {
margin-right: 6.25vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt90 {
margin-top: 120px !important
}
.mb90 {
margin-bottom: 120px !important
}
.ml90 {
margin-left: 120px !important
}
.mr90 {
margin-right: 120px !important
}
}
@media (max-width:768px) {
.mt90 {
margin-top: 15.84vw !important
}
.mb90 {
margin-bottom: 15.84vw !important
}
.ml90 {
margin-left: 15.84vw !important
}
.mr90 {
margin-right: 15.84vw !important
}
}
@media (min-width:769px) {
.mt100 {
margin-top: 6.9444444444vw !important
}
.mb100 {
margin-bottom: 6.9444444444vw !important
}
.ml100 {
margin-left: 6.9444444444vw !important
}
.mr100 {
margin-right: 6.9444444444vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt100 {
margin-top: 133.33px !important
}
.mb100 {
margin-bottom: 133.33px !important
}
.ml100 {
margin-left: 133.33px !important
}
.mr100 {
margin-right: 133.33px !important
}
}
@media (max-width:768px) {
.mt100 {
margin-top: 17.6vw !important
}
.mb100 {
margin-bottom: 17.6vw !important
}
.ml100 {
margin-left: 17.6vw !important
}
.mr100 {
margin-right: 17.6vw !important
}
}
@media (min-width:769px) {
.mt110 {
margin-top: 7.6388888889vw !important
}
.mb110 {
margin-bottom: 7.6388888889vw !important
}
.ml110 {
margin-left: 7.6388888889vw !important
}
.mr110 {
margin-right: 7.6388888889vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt110 {
margin-top: 146.67px !important
}
.mb110 {
margin-bottom: 146.67px !important
}
.ml110 {
margin-left: 146.67px !important
}
.mr110 {
margin-right: 146.67px !important
}
}
@media (max-width:768px) {
.mt110 {
margin-top: 19.36vw !important
}
.mb110 {
margin-bottom: 19.36vw !important
}
.ml110 {
margin-left: 19.36vw !important
}
.mr110 {
margin-right: 19.36vw !important
}
}
@media (min-width:769px) {
.mt120 {
margin-top: 8.3333333333vw !important
}
.mb120 {
margin-bottom: 8.3333333333vw !important
}
.ml120 {
margin-left: 8.3333333333vw !important
}
.mr120 {
margin-right: 8.3333333333vw !important
}
}
@media (min-width:769px) and (min-width:1920px) {
.mt120 {
margin-top: 160px !important
}
.mb120 {
margin-bottom: 160px !important
}
.ml120 {
margin-left: 160px !important
}
.mr120 {
margin-right: 160px !important
}
}
@media (max-width:768px) {
.mt120 {
margin-top: 21.12vw !important
}
.mb120 {
margin-bottom: 21.12vw !important
}
.ml120 {
margin-left: 21.12vw !important
}
.mr120 {
margin-right: 21.12vw !important
}
}
@media (min-width:769px) and (min-width:769px) {
#main section ._container {
width: 63.8888888889vw
}
}
@media (min-width:769px) and (min-width:769px) and (min-width:1920px) {
#main section ._container {
width: 1226.67px
}
}
@media (min-width:769px) {
#main section ._container {
margin-left: auto;
margin-right: auto
}
#main section ._container._full {
margin-left: 0
}
}
@media (max-width:768px) {
#main section ._container {
width: auto
}
#main section ._container._full {
margin-left: 0
}
}
@media (max-width:768px) and (max-width:768px) {
#main section ._container {
padding-left: 5.3333333333vw;
padding-right: 5.3333333333vw
}
}
#main section ._container._full {
width: 100%
}
p._note, ul._notes {
font-size: .9rem;
line-height: 1.6;
margin-top: .3em
}
p._note.red, ul._notes.red {
color: #D02C25
}
ul._notes > li:nth-child(n+2) {
margin-top: .2em
}
a._btn, a._btn:hover {
text-decoration: none
}
._scroll-container {
overflow-y: auto;
-webkit-transform: translateZ(0);
-webkit-user-drag: none
}
@media (min-width:769px) {
#main section ._container._full {
margin-right: 0
}
._scroll-container::-webkit-scrollbar {
width: .6944444444vw;
border-radius: .6944444444vw
}
footer section._copyright {
height: 4.1666666667vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main section ._container._full {
margin-left: 0;
margin-right: 0
}
._scroll-container::-webkit-scrollbar {
width: 13.33px;
border-radius: 13.33px
}
}
@media (max-width:768px) {
#main section ._container._full {
margin-right: 0
}
._scroll-container::-webkit-scrollbar {
width: 2.6666666667vw;
border-radius: 2.6666666667vw
}
}
._scroll-container::-webkit-scrollbar-track {
background-color: rgba(0, 78, 162, .2)
}
._scroll-container::-webkit-scrollbar-thumb {
background-color: rgba(0, 78, 162, .5);
-webkit-transition: background-color .3s linear;
transition: background-color .3s linear
}
._scroll-container::-webkit-scrollbar-thumb:hover {
background-color: #004EA2
}
footer section._copyright {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
color: #fff
}
footer section._copyright ._txt {
color: #004EA2;
line-height: 1;
text-align: center
}
#back-to-top {
z-index: 999;
position: fixed;
width: 100%;
left: 0;
right: 0;
bottom: 0
}
#back-to-top > ._container {
position: relative;
margin-left: auto;
margin-right: auto
}
@media (min-width:769px) {
footer section._copyright ._txt {
font-size: .9722222222vw
}
#back-to-top > ._container {
width: 88.8888888889vw
}
}
@media (min-width:769px) and (min-width:1920px) {
footer section._copyright {
height: 80px
}
footer section._copyright ._txt {
font-size: 18.67px
}
#back-to-top > ._container {
width: 1706.67px
}
}
@media (max-width:768px) {
footer section._copyright {
height: 13.3333333333vw
}
footer section._copyright ._txt {
font-size: 3.2vw
}
#back-to-top > ._container {
width: 100%
}
}
#back-to-top ._btn {
position: absolute;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center
}
@media (min-width:769px) {
#back-to-top ._btn {
width: 5.5555555556vw;
height: 5.5555555556vw;
right: 0;
top: -6.9444444444vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#back-to-top ._btn {
width: 106.67px;
height: 106.67px;
right: 0;
top: -133.33px
}
}
@media (max-width:768px) {
#back-to-top ._btn {
width: 16vw;
height: 16vw;
right: 2.6666666667vw;
top: -18.6666666667vw
}
}
#back-to-top ._btn:hover ._base {
background-color: #004EA2
}
#back-to-top ._btn:hover p._icon {
color: #fff
}
#back-to-top ._btn ._base {
z-index: 0;
position: absolute;
left: 0;
top: 0;
background-color: #004EA2;
border: 1px solid rgba(255, 255, 255, .1);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
transform: translateZ(0)
}
#back-to-top ._btn p._icon {
z-index: 1;
position: relative;
color: #fff
}
@media (min-width:769px) {
#back-to-top ._btn ._base {
width: 5.5555555556vw;
height: 5.5555555556vw;
border-radius: 2.7777777778vw
}
#back-to-top ._btn p._icon {
font-size: 1.7361111111vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#back-to-top ._btn ._base {
width: 106.67px;
height: 106.67px;
border-radius: 53.33px
}
#back-to-top ._btn p._icon {
font-size: 33.33px
}
}
@media (max-width:768px) {
#back-to-top ._btn ._base {
width: 16vw;
height: 16vw;
border-radius: 8vw;
filter: drop-shadow(0 .4vw .8vw rgba(0, 0, 0, .3))
}
#back-to-top ._btn p._icon {
font-size: 6.6666666667vw
}
}
#back-to-top ._btn {
transform: translateY(100%);
opacity: 0;
transition: transform .3s ease-out, opacity .2s linear, background-color .1s linear
}
#back-to-top.active ._btn {
transform: translateY(0);
opacity: 1
}
._modal {
z-index: 2000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%
}
._modal ._modal-overlay {
z-index: 1;
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden
}
._modal ._modal-window {
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
._modal ._modal-window._scrollable {
min-height: 100%;
overflow-y: scroll
}
._modal ._modal-window._scrollable ._modal-scrollable-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100%
}
@keyframes mmFadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes mmFadeOut {
from {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes mmSlideIn {
from {
transform: translateY(15%)
}
to {
transform: translateY(0)
}
}
@keyframes mmSlideOut {
from {
transform: translateY(0)
}
to {
transform: translateY(-10%)
}
}
@keyframes mmScaleIn {
0% {
transform: scale(.9);
opacity: 0
}
20% {
transform: scale(.9);
opacity: 1
}
100% {
transform: scale(1);
opacity: 1
}
}
@keyframes mmScaleOut {
0% {
transform: scale(1)
}
100% {
transform: scale(.9)
}
}
@keyframes mmCloseSlideIn {
from {
transform: scale(.5)
}
to {
transform: scale(1)
}
}
@keyframes mmCloseSlideOut {
from {
transform: scale(1)
}
to {
transform: scale(.5)
}
}
._modal {
display: none
}
._modal.is-open {
display: block
}
._modal ._modal-overlay, ._modal ._modal-window {
will-change: transform
}
._modal[aria-hidden=false] ._modal-overlay > button._close {
animation-name: mmCloseSlideIn;
animation-duration: .2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: .1s
}
._modal[aria-hidden=false] ._modal-overlay {
animation-name: mmFadeIn;
animation-duration: .3s;
animation-timing-function: ease-out;
animation-fill-mode: forwards
}
._modal[aria-hidden=false] ._modal-window {
animation-name: mmScaleIn;
animation-duration: .4s;
animation-timing-function: ease-out;
animation-fill-mode: forwards
}
._modal[aria-hidden=true] ._modal-overlay > button._close {
animation-name: mmCloseSlideOut;
animation-duration: .2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards
}
._modal[aria-hidden=true] ._modal-overlay, ._modal[aria-hidden=true] ._modal-window {
animation-duration: .3s;
animation-timing-function: ease-out;
animation-fill-mode: forwards
}
._modal[aria-hidden=true] ._modal-overlay {
animation-name: mmFadeOut
}
._modal[aria-hidden=true] ._modal-window {
animation-name: mmScaleOut
}
#search-map {
position: relative;
display: flex;
justify-content: center;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
transform: translateZ(0)
}
#search-map .map {
position: relative;
display: flex;
flex-direction: row-reverse;
margin-left: auto;
margin-right: auto
}
#search-map .map *, #search-map .map div, #search-map .map li, #search-map .map p, #search-map .map ul {
min-width: auto;
max-width: none
}
@media (min-width:769px) {
._modal ._modal-window button._close {
right: -.5555555556vw;
top: -.5555555556vw
}
#search-map {
width: 68.0555555556vw;
height: 38.1944444444vw
}
#search-map .map div, #search-map .map li, #search-map .map p, #search-map .map ul {
font-size: .9722222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
._modal ._modal-window button._close {
right: -10.67px;
top: -10.67px
}
#search-map {
width: 1306.67px;
height: 733.33px
}
#search-map .map div, #search-map .map li, #search-map .map p, #search-map .map ul {
font-size: 18.67px
}
}
@media (max-width:768px) {
._modal ._modal-window button._close {
right: -1.6vw;
top: -1.6vw
}
._modal ._modal-window._scrollable {
-webkit-overflow-scrolling: touch
}
#search-map {
width: 181.3333333333vw;
height: 213.3333333333vw;
filter: drop-shadow(.2vw .2vw .2vw rgba(0, 0, 0, .5))
}
#search-map .map div, #search-map .map li, #search-map .map p, #search-map .map ul {
font-size: 3.2vw
}
}
#search-map .map ul.map-cols {
position: relative
}
@media (min-width:769px) {
#search-map .map ul.map-cols {
width: 4.6527777778vw
}
#search-map .map ul.map-cols li.prefecture-item {
height: 2.0833333333vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols {
width: 89.33px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols {
width: 10.72vw
}
}
#search-map .map ul.map-cols li.prefecture-item {
position: relative;
flex-shrink: 0;
width: 100%;
cursor: pointer
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item {
margin-top: .2083333333vw
}
#search-map .map ul.map-cols li.prefecture-item > .item-border {
left: -.4166666667vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item {
height: 40px;
margin-top: 4px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item {
height: 4.8vw;
margin-top: .48vw
}
}
#search-map .map ul.map-cols li.prefecture-item > .item-border, #search-map .map ul.map-cols li.prefecture-item > .item-inner {
width: 100%;
height: 100%
}
#search-map .map ul.map-cols li.prefecture-item > .item-inner {
z-index: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: background-color .2s linear
}
#search-map .map ul.map-cols li.prefecture-item > .item-border {
z-index: 0;
position: absolute;
background-color: #fff;
box-sizing: content-box;
border: solid #fff
}
#search-map .map ul.map-cols li.prefecture-item .item-label {
font-family: "Zen Old Mincho", serif;
font-weight: 900;
line-height: 1.2;
text-decoration: underline;
transition: color .1s linear
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item > .item-border {
top: -.4166666667vw;
border-width: .4166666667vw
}
#search-map .map ul.map-cols li.prefecture-item:hover > .item-inner {
color: #fff;
background-color: #D02C25 !important
}
#search-map .map ul.map-cols li.prefecture-item .item-label {
font-size: 1.1111111111vw
}
#search-map .map ul.map-cols li.prefecture-item.tl > .item-inner {
border-top-left-radius: .3472222222vw
}
}
#search-map .map ul.map-cols li.prefecture-item[data-area-id="1"] > .item-inner {
background-color: #DFD5E6
}
#search-map .map ul.map-cols li.prefecture-item[data-area-id="2"] > .item-inner {
background-color: #F4E6B7
}
#search-map .map ul.map-cols li.prefecture-item[data-area-id="3"] > .item-inner {
background-color: #C7D1E5
}
#search-map .map ul.map-cols li.prefecture-item[data-area-id="4"] > .item-inner {
background-color: #D2E1C5
}
#search-map .map ul.map-cols li.prefecture-item[data-area-id="5"] > .item-inner {
background-color: #EFD7C2
}
#search-map .map ul.map-cols li.prefecture-item[data-area-id="6"] > .item-inner {
background-color: #DFD5E6
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item > .item-border {
left: -8px;
top: -8px;
border-width: 8px
}
#search-map .map ul.map-cols li.prefecture-item .item-label {
font-size: 21.33px
}
#search-map .map ul.map-cols li.prefecture-item.tl > .item-inner {
border-top-left-radius: 6.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item .item-label {
font-size: 3.2vw;
display: none
}
#search-map .map ul.map-cols li.prefecture-item.tl > .item-inner {
border-top-left-radius: .8vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item.tl > .item-border {
border-top-left-radius: .5208333333vw
}
#search-map .map ul.map-cols li.prefecture-item.tr > .item-inner {
border-top-right-radius: .3472222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item.tl > .item-border {
border-top-left-radius: 10px
}
#search-map .map ul.map-cols li.prefecture-item.tr > .item-inner {
border-top-right-radius: 6.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item.tl > .item-border {
border-top-left-radius: 1.2vw
}
#search-map .map ul.map-cols li.prefecture-item.tr > .item-inner {
border-top-right-radius: .8vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item.tr > .item-border {
border-top-right-radius: .5208333333vw
}
#search-map .map ul.map-cols li.prefecture-item.bl > .item-inner {
border-bottom-left-radius: .3472222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item.tr > .item-border {
border-top-right-radius: 10px
}
#search-map .map ul.map-cols li.prefecture-item.bl > .item-inner {
border-bottom-left-radius: 6.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item.tr > .item-border {
border-top-right-radius: 1.2vw
}
#search-map .map ul.map-cols li.prefecture-item.bl > .item-inner {
border-bottom-left-radius: .8vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item.bl > .item-border {
border-bottom-left-radius: .5208333333vw
}
#search-map .map ul.map-cols li.prefecture-item.br > .item-inner {
border-bottom-right-radius: .3472222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item.bl > .item-border {
border-bottom-left-radius: 10px
}
#search-map .map ul.map-cols li.prefecture-item.br > .item-inner {
border-bottom-right-radius: 6.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item.bl > .item-border {
border-bottom-left-radius: 1.2vw
}
#search-map .map ul.map-cols li.prefecture-item.br > .item-inner {
border-bottom-right-radius: .8vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item.br > .item-border {
border-bottom-right-radius: .5208333333vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item.br > .item-border {
border-bottom-right-radius: 10px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item.br > .item-border {
border-bottom-right-radius: 1.2vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item.allr > .item-inner {
border-radius: .3472222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item.allr > .item-inner {
border-radius: 6.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item.allr > .item-inner {
border-radius: .8vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item.allr > .item-border {
border-radius: .5208333333vw
}
#search-map .map ul.map-cols li.prefecture-item[data-uw="1"] {
width: 2.2222222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item.allr > .item-border {
border-radius: 10px
}
#search-map .map ul.map-cols li.prefecture-item[data-uw="1"] {
width: 42.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item.allr > .item-border {
border-radius: 1.2vw
}
#search-map .map ul.map-cols li.prefecture-item[data-uw="1"] {
width: 5.12vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item[data-uw="2"] {
width: 4.6527777778vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item[data-uw="2"] {
width: 89.33px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item[data-uw="2"] {
width: 10.72vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item[data-uw="4"] {
width: 9.5138888889vw
}
#search-map .map ul.map-cols li.prefecture-item[data-uh="2"] {
height: 4.375vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item[data-uw="4"] {
width: 182.67px
}
#search-map .map ul.map-cols li.prefecture-item[data-uh="2"] {
height: 84px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item[data-uw="4"] {
width: 21.92vw
}
#search-map .map ul.map-cols li.prefecture-item[data-uh="2"] {
height: 10.08vw
}
}
#search-map .map ul.map-cols ul.map-col, #search-map .map ul.map-cols ul.map-row {
display: flex
}
@media (min-width:769px) {
#search-map .map ul.map-cols li.prefecture-item[data-en=hokkaido] {
width: 11.9444444444vw;
height: 6.6666666667vw;
margin-bottom: 1.5104166667vw
}
#search-map .map ul.map-cols li.prefecture-item[data-en=okinawa] {
margin-right: 2.4305555556vw;
margin-top: 2.6388888889vw
}
#search-map .map ul.map-cols ul.map-row:not(.area-wrap) > li:nth-child(n+2) {
margin-left: .1736111111vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols li.prefecture-item[data-en=hokkaido] {
width: 229.33px;
height: 128px;
margin-bottom: 29px
}
#search-map .map ul.map-cols li.prefecture-item[data-en=okinawa] {
margin-right: 46.67px;
margin-top: 50.67px
}
#search-map .map ul.map-cols ul.map-row:not(.area-wrap) > li:nth-child(n+2) {
margin-left: 3.33px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols li.prefecture-item[data-en=hokkaido] {
width: 27.52vw;
height: 15.36vw;
margin-bottom: 3.48vw
}
#search-map .map ul.map-cols li.prefecture-item[data-en=okinawa] {
margin-right: 5.6vw;
margin-top: 6.08vw
}
#search-map .map ul.map-cols ul.map-row:not(.area-wrap) > li:nth-child(n+2) {
margin-left: -.1066666667vw
}
}
#search-map .map ul.map-cols ul.map-row.area-wrap {
flex-wrap: wrap
}
@media (min-width:769px) {
#search-map .map ul.map-cols ul.map-row.area-wrap > li:nth-child(2n) {
margin-left: .1736111111vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols ul.map-row.area-wrap > li:nth-child(2n) {
margin-left: 3.33px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols ul.map-row.area-wrap > li:nth-child(2n) {
margin-left: -.1066666667vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols ul.map-row > ul.map-col:nth-child(n+2) {
margin-left: .1736111111vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols ul.map-row > ul.map-col:nth-child(n+2) {
margin-left: 3.33px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols ul.map-row > ul.map-col:nth-child(n+2) {
margin-left: -.1066666667vw
}
}
#search-map .map ul.map-cols ul.map-col {
flex-direction: column
}
#search-map .map ul.map-cols.end {
display: flex;
flex-direction: column;
align-items: flex-end
}
@media (min-width:769px) {
#search-map .map ul.map-cols ul.map-col:nth-child(n+2) {
margin-left: .1736111111vw
}
#search-map .map ul.map-cols.map-col-1 {
width: 12.2482638889vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols ul.map-col:nth-child(n+2) {
margin-left: 3.33px
}
#search-map .map ul.map-cols.map-col-1 {
width: 235.17px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols ul.map-col:nth-child(n+2) {
margin-left: -.1066666667vw
}
#search-map .map ul.map-cols.map-col-1 {
width: 28.22vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col > li, #search-map .map ul.map-cols.map-col-1 ul.map-row > li {
width: 4.6527777778vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col > li, #search-map .map ul.map-cols.map-col-1 ul.map-row > li {
width: 89.33px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col > li, #search-map .map ul.map-cols.map-col-1 ul.map-row > li {
width: 10.72vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col > li[data-uw="2"], #search-map .map ul.map-cols.map-col-1 ul.map-row > li[data-uw="2"] {
width: 9.5138888889vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col > li[data-uw="2"], #search-map .map ul.map-cols.map-col-1 ul.map-row > li[data-uw="2"] {
width: 182.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col > li[data-uw="2"], #search-map .map ul.map-cols.map-col-1 ul.map-row > li[data-uw="2"] {
width: 21.92vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-1 ul.map-row {
width: 9.5138888889vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-1 ul.map-row {
width: 182.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-1 ul.map-row {
width: 21.92vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col {
width: 4.6527777778vw
}
#search-map .map ul.map-cols.map-col-2 {
margin-top: 16.1197916667vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col {
width: 89.33px
}
#search-map .map ul.map-cols.map-col-2 {
margin-top: 309.5px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-1 ul.map-col {
width: 10.72vw
}
#search-map .map ul.map-cols.map-col-2 {
margin-top: 37.14vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-2 {
width: 9.5138888889vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-2 {
width: 182.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-2 {
width: 21.92vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-2 ul.map-col {
width: 4.6527777778vw
}
#search-map .map ul.map-cols.map-col-3 {
margin-top: 16.1197916667vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-2 ul.map-col {
width: 89.33px
}
#search-map .map ul.map-cols.map-col-3 {
margin-top: 309.5px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-2 ul.map-col {
width: 10.72vw
}
#search-map .map ul.map-cols.map-col-3 {
margin-top: 37.14vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-4 {
margin-top: 13.828125vw
}
#search-map .map ul.map-cols.map-col-4 ul.map-row.map-row-1 > li {
width: 2.2222222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-4 {
margin-top: 265.5px
}
#search-map .map ul.map-cols.map-col-4 ul.map-row.map-row-1 > li {
width: 42.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-4 {
margin-top: 31.86vw
}
#search-map .map ul.map-cols.map-col-4 ul.map-row.map-row-1 > li {
width: 5.12vw
}
}
#search-map .map ul.map-cols.map-col-5 {
display: flex
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-5 {
margin-top: 20.703125vw;
width: 7.0833333333vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-5 {
margin-top: 397.5px;
width: 136px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-5 {
margin-top: 47.7vw;
width: 16.32vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-5 ul.map-col.map-col-1 {
width: 2.2222222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-5 ul.map-col.map-col-1 {
width: 42.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-5 ul.map-col.map-col-1 {
width: 5.12vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-5 ul.map-col.map-col-2 {
width: 4.6527777778vw
}
#search-map .map ul.map-cols.map-col-6 {
margin-top: 20.703125vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-5 ul.map-col.map-col-2 {
width: 89.33px
}
#search-map .map ul.map-cols.map-col-6 {
margin-top: 397.5px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-5 ul.map-col.map-col-2 {
width: 10.72vw
}
#search-map .map ul.map-cols.map-col-6 {
margin-top: 47.7vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-6 {
width: 14.375vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-6 {
width: 276px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-6 {
width: 33.12vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-6 ul.map-row > li {
width: 4.6527777778vw
}
#search-map .map ul.map-cols.map-col-6 ul.map-row.map-row-3 {
margin-top: .9375vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-6 ul.map-row > li {
width: 89.33px
}
#search-map .map ul.map-cols.map-col-6 ul.map-row.map-row-3 {
margin-top: 18px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-6 ul.map-row > li {
width: 10.72vw
}
#search-map .map ul.map-cols.map-col-6 ul.map-row.map-row-3 {
margin-top: 2.16vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-6 ul.map-row.map-row-3 {
width: 9.5138888889vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-6 ul.map-row.map-row-3 {
width: 182.67px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-6 ul.map-row.map-row-3 {
width: 21.92vw
}
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-7 {
width: 9.6354166667vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-7 {
width: 185px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-7 {
width: 22.2vw
}
}
#search-map .map .kyushu {
display: flex;
flex-direction: row-reverse
}
#main ._block._search, #main > section._kv ._container {
display: flex;
flex-direction: column
}
@media (min-width:769px) {
#search-map .map ul.map-cols.map-col-8 {
width: 7.0833333333vw
}
#search-map .map ul.map-cols:nth-child(n+2) {
margin-right: .2083333333vw
}
#search-map .map .kyushu {
margin-top: 24.140625vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map ul.map-cols.map-col-8 {
width: 136px
}
#search-map .map ul.map-cols:nth-child(n+2) {
margin-right: 4px
}
#search-map .map .kyushu {
margin-top: 463.5px
}
}
@media (max-width:768px) {
#search-map .map ul.map-cols.map-col-8 {
width: 16.32vw
}
#search-map .map ul.map-cols:nth-child(n+2) {
margin-right: .48vw
}
#search-map .map .kyushu {
margin-top: 55.62vw
}
}
@media (min-width:769px) {
#search-map .map .kyushu {
margin-right: -3.8541666667vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#search-map .map .kyushu {
margin-right: -74px
}
}
#main select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
#main select:hover {
cursor: pointer
}
#main ._block._search ._input-row {
width: 100%
}
#main ._block._search ._input-row:nth-child(n+2) {
margin-top: .8rem;
padding-top: .8rem;
border-top: 1px solid #E4DCCB
}
#main ._block._search ._input-select, #main ._block._search button {
height: 2.4rem;
filter: drop-shadow(0 .2rem 0 rgba(0, 0, 0, .25));
transform: translateZ(0)
}
@media (max-width:768px) {
#search-map .map .kyushu {
margin-right: -8.88vw
}
#main ._block._search ._input-select, #main ._block._search button {
filter: drop-shadow(0 .15rem 0 rgba(0, 0, 0, .25))
}
}
#main ._block._search button {
width: 100%;
font-size: 1rem;
font-weight: 700;
line-height: 1;
border-radius: 2.4rem;
color: #fff;
background-color: #D02C25
}
#main ._block._search button ._label {
position: relative;
width: 57.5%;
display: flex;
justify-content: center;
align-items: center
}
#main ._block._search button ._label p._icon {
position: absolute;
font-size: 150%;
margin-right: .3rem;
left: 0
}
#main ._block._search ._input-select {
position: relative;
width: 100%;
padding: 0 .5rem 0 .8rem;
font-size: .9rem;
font-weight: 600;
line-height: 1;
border-radius: .4rem;
margin-bottom: .8rem
}
#main ._block._search ._input-select select {
position: relative;
width: calc(100% - .1rem);
height: 100%;
border-radius: .4rem
}
#main ._block._search ._input-select:after {
position: absolute;
font-family: suzuki-hatsuuri-icons !important;
font-weight: 400 !important;
line-height: 1;
content: "\e90d";
font-size: 1.4rem;
right: .3rem;
top: .45rem;
pointer-events: none
}
#main ._block._search ._input-select {
background-color: #fff;
border: 1px solid #222
}
#main ._block._search ._input-select select, body {
background-color: #fff
}
@media (min-width:769px) {
#main button, ._modal button {
font-size: .9722222222vw
}
#main > section {
padding-top: 5.5555555556vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main button, ._modal button {
font-size: 18.67px
}
}
@media (max-width:768px) {
#main button, ._modal button {
font-size: 3.2vw
}
}
#main button._plain, ._modal button._plain {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 14em;
height: 2.4em;
border-radius: 2.4em;
background-color: #fff;
border: 1px solid #222
}
#main button._plain ._label, ._modal button._plain ._label {
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
line-height: 1
}
#main button._plain ._label p._icon, ._modal button._plain ._label p._icon {
font-size: 150%;
margin-right: .3em
}
#main > section a._btn, #main > section button {
position: relative;
font-size: 1.4em;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer
}
#main > section a._btn > ._label, #main > section button > ._label {
position: relative;
display: flex;
justify-content: center;
align-items: center
}
@media (min-width:769px) {
#main > section {
padding-bottom: 6.9444444444vw
}
#main > section a._btn, #main > section button {
height: 3.6458333333vw;
transition: filter .2s linear
}
#main > section a._btn:hover, #main > section button:hover {
filter: brightness(1.25)
}
#main > section h2._section-title {
width: 42.2916666667vw;
margin-left: -2.5375vw;
margin-bottom: 3.4722222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section {
padding-top: 106.67px;
padding-bottom: 133.33px
}
#main > section h2._section-title {
width: 812px;
margin-left: -48.72px;
margin-bottom: 66.67px
}
}
@media (max-width:768px) {
#main > section {
padding-top: 10.6666666667vw;
padding-bottom: 13.3333333333vw
}
#main > section a._btn, #main > section button {
height: 12vw
}
#main > section h2._section-title {
width: 96vw;
margin-left: 0;
margin-bottom: 5.3333333333vw
}
}
#main > section._kv {
z-index: 1;
background-image: url(../img/hatsuuri_kv_pc.jpg);
background-size: cover;
background-position: 50% 50%
}
@media (min-width:769px) {
#main > section._kv {
height: 47.1875vw;
padding-top: 0;
padding-bottom: 0
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._kv {
padding-top: 0;
padding-bottom: 0
}
}
@media (max-width:768px) {
#main > section._kv {
height: 107.7333333333vw;
padding-top: 0;
padding-bottom: 0;
background-image: url(../img/hatsuuri_kv_sp.jpg)
}
#main > section._kv ._container {
width: 100%
}
}
#main > section._kv ._container {
justify-content: flex-end;
align-items: center;
height: 100%
}
@media (max-width:768px) and (max-width:768px) {
#main > section._kv ._container {
padding-left: 0;
padding-right: 0
}
}
#main > section._kv ._cp-title {
position: absolute
}
@media (min-width:769px) {
#main > section._kv ._container {
padding-bottom: 4.0625vw
}
#main > section._kv ._cp-title {
width: 32.8125vw;
left: -2.0833333333vw;
top: 2.6041666667vw
}
}
@media (max-width:768px) {
#main > section._kv ._cp-title {
width: 64vw;
left: -2.1333333333vw;
top: -2.1333333333vw
}
}
@media (min-width:769px) {
#main > section._kv ._btn._to-search {
width: 41.3194444444vw;
transition: transform .2s ease-out
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._kv ._btn._to-search {
width: 793.33px
}
}
#main > section._gl:before {
position: absolute;
display: block;
content: "";
width: 100%;
background: linear-gradient(90deg, #a77322 0, #d3af5d 8.75%, #eace7c 13.98%, #f8f7d2 25.81%, #eace7c 36.02%, #a77322 48.92%, #d3af5d 56.67%, #eace7c 61.29%, #f8f7d2 73.66%, #eace7c 83.87%, #a77322 100%);
left: 0;
right: 0;
z-index: 5;
top: 0
}
#main > section._shop-list {
background-image: url(../img/shoplist_bg_pc.jpg);
background-size: cover;
background-position: 50% 50%
}
@media (min-width:769px) {
#main > section._kv ._btn._to-search:hover {
filter: none;
transform: scale(1.025)
}
#main > section._gl:before {
height: .5555555556vw
}
#main > section._shop-list {
padding-bottom: 2.7777777778vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._gl:before {
height: 10.67px
}
#main > section._shop-list {
padding-bottom: 53.33px
}
}
#main > section._shop-list > ._container {
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
#main > section._shop-list > ._container ._block._how-to {
position: relative;
display: flex;
flex-direction: column-reverse
}
@media (max-width:768px) {
#main > section._kv ._btn._to-search {
width: 100%
}
#main > section._gl:before {
height: 1.0666666667vw
}
#main > section._shop-list {
background-image: url(../img/shoplist_bg_sp.jpg)
}
#main > section._shop-list > ._container h2._section-title {
margin-bottom: 1.3333333333vw
}
#main > section._shop-list > ._container ._block._how-to {
flex-direction: column
}
}
#main > section._shop-list > ._container ._block._how-to ._section-lead {
position: relative
}
@media (min-width:769px) {
#main > section._shop-list > ._container ._block._how-to ._section-lead {
width: 36.4583333333vw;
position: absolute;
left: -4.1666666667vw;
top: 8.3333333333vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._shop-list > ._container ._block._how-to ._section-lead {
width: 700px;
left: -80px;
top: 160px
}
}
@media (max-width:768px) {
#main > section._shop-list > ._container ._block._how-to ._section-lead {
width: 89.0666666667vw;
margin-bottom: 4vw
}
}
#main > section._shop-list > ._container ._block._how-to ._search-steps {
position: relative
}
@media (min-width:769px) {
#main > section._shop-list > ._container ._block._how-to ._search-steps {
width: 62.5625vw
}
#main > section._shop-list > ._container ._block._search-map {
margin-top: 3.4722222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._shop-list > ._container ._block._how-to ._search-steps {
width: 1201.2px
}
#main > section._shop-list > ._container ._block._search-map {
margin-top: 66.67px
}
}
#main > section._shop-list > ._container ._block._search {
width: 100%
}
#main > section._shop-list ._bg {
z-index: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%
}
#main > section._shop-list ._bg::after, #main > section._shop-list ._bg::before {
content: "";
display: block;
position: absolute;
width: 100%;
background-image: url(../img/bg_pattern_grid_g.png);
background-size: 101.9607843137vw 1.8055555556vw;
left: 0;
right: 0
}
@media (min-width:769px) {
#main > section._shop-list ._bg::after, #main > section._shop-list ._bg::before {
height: 1.8055555556vw
}
#main > section._shop-list ._bg::before {
top: .5555555556vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._shop-list ._bg::after, #main > section._shop-list ._bg::before {
height: 34.67px
}
#main > section._shop-list ._bg::before {
top: 10.67px
}
}
@media (max-width:768px) {
#main > section._shop-list > ._container ._block._how-to ._search-steps {
width: 100%
}
#main > section._shop-list > ._container ._block._search {
margin-top: 5.3333333333vw
}
#main > section._shop-list ._bg::after, #main > section._shop-list ._bg::before {
height: 3.7333333333vw;
background-size: 210.8235294118vw 3.7333333333vw
}
#main > section._shop-list ._bg::before {
top: 1.0666666667vw
}
}
#main > section._shop-list ._bg::after {
bottom: 0
}
#main > section._special {
background-image: url(../img/special_bg_pc.jpg);
background-size: cover;
background-position: 50% 50%
}
#main > section._special > ._container {
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
#main > section._special a._btn._vm-link {
position: relative;
line-height: 1
}
@media (min-width:769px) {
#main > section._special a._btn._vm-link {
width: 20.8333333333vw;
height: 4.8611111111vw
}
#main > section._special a._btn._vm-link ._label {
font-size: 1.6666666667vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._special a._btn._vm-link {
width: 400px;
height: 93.33px
}
}
@media (max-width:768px) {
#main > section._special {
background-image: url(../img/special_bg_sp.jpg)
}
#main > section._special a._btn._vm-link {
width: 69.3333333333vw;
height: 14.4vw
}
}
#main > section._special a._btn._vm-link ._btn-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(96.69deg, #d2b576 0, #eedda4 25.17%, #faf8de 50.05%, #efdda5 74.76%, #d2b576 100%);
border: 2px solid #fff;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
transform: translateZ(0)
}
#main > section._special a._btn._vm-link ._label {
font-family: "Zen Old Mincho", serif;
font-weight: 900;
letter-spacing: .1em;
margin-top: -.1em
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._special a._btn._vm-link ._label {
font-size: 32px
}
}
@media (max-width:768px) {
#main > section._special a._btn._vm-link ._btn-inner {
filter: drop-shadow(.2vw .2vw .2vw rgba(0, 0, 0, .5))
}
#main > section._special a._btn._vm-link ._label {
font-size: 5.12vw
}
}
#main > section._special a._btn._vm-link:after {
position: absolute;
font-family: suzuki-hatsuuri-icons !important;
font-weight: 400 !important;
line-height: 1;
content: "\f102";
color: #9C1B21;
right: .5rem
}
@media (min-width:769px) {
#main > section._special a._btn._vm-link:after {
font-size: 2.0833333333vw
}
#main > section._special ._special-item {
width: 29.4444444444vw
}
#main > section._special ._special-item ._item-title {
height: 9.7222222222vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._special a._btn._vm-link:after {
font-size: 40px
}
#main > section._special ._special-item {
width: 565.33px
}
}
@media (max-width:768px) {
#main > section._special a._btn._vm-link:after {
font-size: 6.4vw
}
#main > section._special ._special-item {
width: 89.3333333333vw
}
}
#main > section._special ._special-item ._item-title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%
}
#main > section._special ._special-item ._item-title ._title-new {
z-index: 2;
position: relative
}
#main > section._special ._special-item ._item-title ._title-text {
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
font-family: "Zen Old Mincho", serif;
font-weight: 900;
text-align: center;
white-space: nowrap;
line-height: 1.1;
color: #fff
}
@media (min-width:769px) {
#main > section._special ._special-item ._item-title {
margin-bottom: .6944444444vw
}
#main > section._special ._special-item ._item-title ._title-new {
width: 9.7222222222vw;
margin-right: 1.3888888889vw;
margin-left: -6.25vw;
margin-top: -.6944444444vw
}
#main > section._special ._special-item ._item-title ._title-text {
font-size: 2.5vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._special ._special-item ._item-title {
height: 186.67px;
margin-bottom: 13.33px
}
#main > section._special ._special-item ._item-title ._title-new {
width: 186.67px;
margin-right: 26.67px;
margin-left: -120px;
margin-top: -13.33px
}
#main > section._special ._special-item ._item-title ._title-text {
font-size: 48px
}
}
@media (max-width:768px) {
#main > section._special ._special-item ._item-title {
height: 29.3333333333vw;
margin-bottom: 2.6666666667vw
}
#main > section._special ._special-item ._item-title ._title-new {
width: 24.64vw;
margin-right: 3.52vw;
margin-left: -2.6666666667vw;
margin-top: -1.76vw
}
#main > section._special ._special-item ._item-title ._title-text {
font-size: 7.2vw
}
}
#main > section._special ._special-item ._item-title ._title-text p {
position: relative;
margin-bottom: .2em
}
#main > section._special ._special-item ._item-title ._title-text::after {
position: relative;
content: "";
width: 100%;
height: 100%;
background-image: url(../img/bg_pattern_grid_g_s.png);
background-size: 17.0833333333vw 1.3888888889vw
}
@media (min-width:769px) {
#main > section._special ._special-item ._item-title ._title-text::after {
width: 17.0833333333vw;
height: 1.3888888889vw
}
#main > section._special ._special-item ._item-image {
padding-top: .8333333333vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._special ._special-item ._item-title ._title-text::after {
width: 328px;
height: 26.67px
}
}
@media (max-width:768px) {
#main > section._special ._special-item ._item-title ._title-text::after {
background-size: 49.2vw 4vw;
width: 49.2vw;
height: 4vw
}
}
#main > section._special ._special-item ._item-image {
background: linear-gradient(90deg, #f3ef95 0, #f4d566 40.36%, #c48325 100%)
}
#main > section._special ._special-item ._item-image figure {
width: 100%
}
#main > section._special ._special-item ._item-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%
}
#main > section._special ._special-item ._item-content ._description {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
color: #fff
}
@media (min-width:769px) {
#main > section._special ._special-item ._item-image {
padding-bottom: .8333333333vw
}
#main > section._special ._special-item ._item-content {
margin-top: 2.0833333333vw
}
#main > section._special ._special-item ._item-content ._description {
height: 5.5555555556vw;
font-size: 1.5277777778vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._special ._special-item ._item-image {
padding-top: 16px;
padding-bottom: 16px
}
#main > section._special ._special-item ._item-content {
margin-top: 40px
}
#main > section._special ._special-item ._item-content ._description {
height: 106.67px;
font-size: 29.33px
}
}
@media (max-width:768px) {
#main > section._special ._special-item ._item-image {
padding-top: 2.6666666667vw;
padding-bottom: 2.6666666667vw
}
#main > section._special ._special-item ._item-content {
margin-top: 5.28vw
}
#main > section._special ._special-item ._item-content ._description {
height: 14.08vw;
font-size: 4.4vw
}
}
#main > section._special ._block._links {
display: grid;
grid-template-columns: repeat(2, 1fr)
}
@media (min-width:769px) {
#main > section._special ._special-item ._item-content a._btn._vm-link {
margin-top: 2.0833333333vw
}
#main > section._special ._block._links {
gap: 6.25vw
}
#main > section._car-search ._link-item {
/*height: 24.3055555556vw*/
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._special ._special-item ._item-content a._btn._vm-link {
margin-top: 40px
}
#main > section._special ._block._links {
gap: 120px
}
}
#main > section._car-search {
background-image: url(../img/search_bg_pc.jpg);
background-size: cover;
background-position: 50% 50%
}
@media (max-width:768px) {
#main > section._special ._special-item ._item-content a._btn._vm-link {
margin-top: 5.28vw
}
#main > section._special ._block._links {
gap: 10.6666666667vw;
grid-template-columns: 1fr
}
#main > section._car-search {
background-image: url(../img/search_bg_sp.jpg)
}
}
#main > section._car-search ._container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
#main > section._car-search ._link-item {
position: relative;
display: flex;
flex-direction: column;
color: #fff;
background: linear-gradient(0deg, #fff 0, #d9d9dc 100%);
text-decoration: none
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._car-search ._link-item {
/*height: 466.67px*/
}
}
@media (max-width:768px) {
#main > section._car-search ._link-item {
/*height: 72vw*/
}
}
#main > section._car-search ._link-item ._item-image {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center
}
#main > section._car-search ._link-item ._item-image figure {
width: 100%
}
#main > section._car-search ._link-item ._item-title {
flex-grow: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(100deg, #b22d2e 0, #d8493b 100%)
}
@media (min-width:769px) {
#main > section._car-search ._link-item ._item-image {
height: 17.3611111111vw
}
#main > section._car-search ._link-item ._item-title {
padding: 1.3888888889vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._car-search ._link-item ._item-image {
height: 333.33px
}
#main > section._car-search ._link-item ._item-title {
padding-right: 26.67px
}
}
@media (max-width:768px) {
#main > section._car-search ._link-item ._item-image {
height: 50.6666666667vw
}
#main > section._car-search ._link-item ._item-title {
/* padding-right: 2.6666666667vw */
padding: 4vw 10vw;
}
}
#main > section._car-search ._link-item ._item-title:before {
z-index: 1;
position: absolute;
display: block;
content: "";
width: 100%;
background: linear-gradient(90deg, #a77322 0, #d3af5d 8.75%, #eace7c 13.98%, #f8f7d2 25.81%, #eace7c 36.02%, #a77322 48.92%, #d3af5d 56.67%, #eace7c 61.29%, #f8f7d2 73.66%, #eace7c 83.87%, #a77322 100%);
top: 0;
left: 0;
right: 0;
bottom: 0
}
@media (min-width:769px) {
#main > section._car-search ._link-item ._item-title:before {
height: .5555555556vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._car-search ._link-item ._item-title:before {
height: 10.67px
}
}
@media (max-width:768px) {
#main > section._car-search ._link-item ._item-title:before {
height: 1.0666666667vw
}
}
#main > section._car-search ._link-item ._item-title ._title-text {
font-family: "Zen Old Mincho", serif;
font-weight: 900;
text-align: center;
line-height: 1.2
}
@media (min-width:769px) {
#main > section._car-search ._link-item ._item-title:before {
height: .2777777778vw
}
#main > section._car-search ._link-item ._item-title ._title-text {
font-size: 1.3194444444vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._car-search ._link-item ._item-title:before {
height: 5.33px
}
#main > section._car-search ._link-item ._item-title ._title-text {
font-size: 25.33px
}
}
@media (max-width:768px) {
#main > section._car-search ._link-item ._item-title:before {
height: .5333333333vw
}
#main > section._car-search ._link-item ._item-title ._title-text {
font-size: 4vw
}
}
#main > section._car-search ._link-item ._item-title:after {
position: absolute;
font-family: suzuki-hatsuuri-icons !important;
font-weight: 400 !important;
line-height: 1;
content: "\f102";
right: .5rem;
color: #fff
}
@media (min-width:769px) {
#main > section._car-search ._link-item ._item-title:after {
font-size: 2.0833333333vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._car-search ._link-item ._item-title:after {
font-size: 40px
}
}
@media (max-width:768px) {
#main > section._car-search ._link-item ._item-title:after {
font-size: 6.4vw
}
}
#main > section._car-search ._link-item:hover {
text-decoration: none;
opacity: .8;
transition: opacity .2s ease-out
}
#main > section._car-search ._block._link-items {
display: grid;
/*grid-template-columns: repeat(4, 1fr)*/
}
@media (min-width:769px) {
#main > section._car-search ._link-item ._item-title:after {
font-size: 1.6666666667vw
}
#main > section._car-search ._block._link-items {
gap: 1.3888888889vw;
width: 58.3333333333vw
}
}
@media (min-width:769px) and (min-width:1920px) {
#main > section._car-search ._link-item ._item-title:after {
font-size: 32px
}
#main > section._car-search ._block._link-items {
gap: 26.67px;
width: 1120px
}
}
@media (max-width:768px) {
#main > section._car-search ._link-item ._item-title:after {
font-size: 3.7333333333vw
}
#main > section._car-search ._block._link-items {
width: auto;
/*grid-template-columns: repeat(2, 1fr);
gap: 8vw 4vw*/
}
}
._modal._micromodal {
color: #222
}
._modal._micromodal button._close {
z-index: 10;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
filter: drop-shadow(.2em .2em 0 rgba(0, 0, 0, .25));
transform: translateZ(0)
}
@media (min-width:769px) {
._modal._micromodal {
font-size: .9722222222vw
}
._modal._micromodal button._close {
right: 1em;
top: 1em;
width: 2.8em;
height: 2.8em;
border-radius: 1.4em
}
}
@media (min-width:769px) and (min-width:1920px) {
._modal._micromodal {
font-size: 18.67px
}
._modal._micromodal button._close {
right: 1em;
top: 1em;
width: 2.8em;
height: 2.8em;
border-radius: 1.4em
}
}
@media (max-width:768px) {
._modal._micromodal {
font-size: 3.2vw
}
._modal._micromodal button._close {
right: .5em;
top: .5em;
width: 2.4em;
height: 2.4em;
border-radius: 1.2em;
filter: drop-shadow(.15em .15em 0 rgba(0, 0, 0, .25))
}
}
._modal._micromodal button._close p._icon {
color: #fff
}
._modal._micromodal ._modal-overlay {
background-color: rgba(34, 34, 34, .8)
}
._modal._micromodal ._modal-window {
background-color: #fff;
border-radius: 1em;
height: 100%;
max-height: calc(100svh - 2em)
}
@media (min-width:769px) {
._modal._micromodal button._close p._icon {
font-size: 1.8em
}
._modal._micromodal ._modal-window {
width: 75vw
}
}
@media (min-width:769px) and (min-width:1920px) {
._modal._micromodal button._close p._icon {
font-size: 1.8em
}
._modal._micromodal ._modal-window {
width: 1440px
}
}
@media (max-width:768px) {
._modal._micromodal button._close p._icon {
font-size: 1.6em
}
._modal._micromodal ._modal-window {
width: 89.3333333333vw;
max-height: calc(100svh - 2em)
}
}
._modal._micromodal ._modal-window ._modal-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
@media (min-width:769px) {
._modal._micromodal ._modal-window ._modal-container {
width: 63.8888888889vw;
padding-top: 4em;
padding-bottom: 4em
}
}
@media (min-width:769px) and (min-width:1920px) {
._modal._micromodal ._modal-window ._modal-container {
width: 1226.67px;
padding-top: 4em;
padding-bottom: 4em
}
}
@media (max-width:768px) {
._modal._micromodal ._modal-window ._modal-container {
width: 100%;
padding: 1.5em 5.3333333333vw
}
}
._modal._micromodal ._modal-window ._modal-container ._modal-lead, ._modal._micromodal ._modal-window ._modal-container ._modal-title, ._modal._micromodal ._modal-window ._modal-container button._geo-location {
flex-shrink: 0
}
._modal._micromodal ._modal-window ._modal-container ._modal-title {
font-size: 1.6em;
text-align: center;
font-weight: 700
}
._modal._micromodal ._modal-window ._modal-container ._modal-lead {
font-size: .95em;
margin-top: .8em
}
._modal._micromodal ._modal-window ._modal-container ._search-results {
width: 100%;
flex-grow: 1;
line-height: 1.6;
margin-top: 1.3em
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content {
width: 100%
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._labels, ._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-item {
width: 100%;
display: flex;
align-items: center;
gap: 0 .5em;
padding: .5em 0
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._labels ._item-col._shop, ._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-item ._item-col._shop {
flex-grow: 1
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._labels ._item-col._date, ._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-item ._item-col._date {
flex-shrink: 0
}
@media (min-width:769px) {
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._labels ._item-col._date, ._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-item ._item-col._date {
width: 30%
}
._modal._micromodal ._modal-window ._modal-container button._geo-location {
margin-top: 1.5em
}
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._labels ._item-col._closed, ._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-item ._item-col._closed {
display: none
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._labels {
font-weight: 700
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list {
width: 100%;
border-top: 1px solid rgba(34, 34, 34, .25)
}
@media (max-width:768px) {
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._labels, ._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-item {
padding: .6em 0
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._labels {
display: none
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list {
width: 100%
}
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list ._result-item {
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid rgba(34, 34, 34, .25)
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list ._result-item a {
text-decoration: underline
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list ._result-item ._item-col > ._label {
display: none;
font-weight: 700
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list ._result-item ._item-col > ._value ._separator {
display: block;
content: ""
}
@media (min-width:769px) and (min-width:1920px) {
._modal._micromodal ._modal-window ._modal-container button._geo-location {
margin-top: 1.5em
}
}
footer {
z-index: 50
}
@media (max-width:768px) {
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list ._result-item {
flex-direction: column;
align-items: flex-start;
gap: .5em 0
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list ._result-item ._item-col > ._label {
display: block
}
._modal._micromodal ._modal-window ._modal-container ._search-results ._scroll-content ._result-list ._result-item ._item-col > ._value ._separator {
display: inline
}
._modal._micromodal ._modal-window ._modal-container button._geo-location {
margin-top: 1.5em
}
footer {
margin-top: 0
}
}
/** 店舗検索モーダル内「販売店を見る」ドロップダウンがあるリストの場合 **/
html {
scroll-behavior: smooth;
font-size: 100%;
}
@media (min-width: 1350px) {
:target{
scroll-margin-top:116px;
}
body.header-fixed :target{
scroll-margin-top:58px;
}
}
@media (min-width: 961px) and (max-width: 1349px) {
:target{
scroll-margin-top:158px;
}
body.header-fixed :target{
scroll-margin-top:79px;
}
}
@media (max-width: 960px) {
:target{
scroll-margin-top:50px;
}
}
._modal._micromodal p{
color: #222;
margin-top: 0;
margin-bottom: 0;
font-size: inherit;
}
._modal._micromodal ._modal-window {
border: none;
}
._modal._micromodal button._close p._icon {
width: 100%;
text-align: center;
}
._modal-list {
display: flex;
flex-direction: column;
}
._modal-listitem {
position: relative;
padding: 0.6em 0;
border-bottom: 1px solid rgba(34, 34, 34, .25);
}
._modal-listitem-inner {
display: flex;
}
._modal-list-1stcell {
width: calc(287/1116*100%);
padding-right: min(calc(30/1440*100vw), 30px);
}
._modal-list-2ndcell {
width: calc(411/1116*100%);
padding-right: min(calc(30/1440*100vw), 30px);
}
._modal-list-3rdcell {
flex: 1;
padding-right: min(calc(150/1440*100vw), 150px);
}
._modal-list-itemtitle {
font-weight: 700;
line-height: 1.5;
letter-spacing: -.02em;
}
._modal-list-itemlink {
text-decoration: underline;
line-height: 1.5;
letter-spacing: -.02em;
}
._modal-list-itemtext {
line-height: 1.5;
letter-spacing: -.02em;
font-weight: 400;
}
._modal-list-toggle-2ndlist {
position: absolute;
top: 0.5em;
right: min(calc(34/1440*100vw), 15px);
display: flex;
align-items: center;
gap: min(calc(4/1440*100vw), 4px);
color: #333;
line-height: 1.5;
letter-spacing: -.02em;
&.js-hidden {
display: none;
}
&:after {
content: '';
width: min(calc(24/1440*100vw), 24px);
height: auto;
aspect-ratio: 1;
background: url(../img/icon-arrow-down.svg) no-repeat center center;
background-size: contain;
transition: .3s;
}
&.js-active:after {
transform: rotate(180deg);
}
}
._modal-2ndlist {
display: none;
margin-top: 0.6em;
border-radius: 16px;
padding: min(calc(16/1440*100vw), 16px) min(calc(24/1440*100vw), 24px);
background-color: #F2F2F2;
}
._modal-2ndlistitem {
position: relative;
padding: 0.5em 0;
&:not(:last-child) {
border-bottom: 1px solid #E0E0E0;
}
}
._modal-2ndlistitem-inner {
display: flex;
}
._modal-2ndlist-1stcell {
width: calc(263/1068*100%);
padding-right: min(calc(30/1440*100vw), 30px);
}
._modal-2ndlist-2ndcell {
width: calc(410/1068*100%);
padding-right: min(calc(30/1440*100vw), 30px);
}
._modal-2ndlist-3rdcell {
flex: 1;
}
._modal-2ndlist-itemtitle {
margin-bottom: calc(3/375*100vw);
font-weight: 700;
line-height: 1.5;
letter-spacing: -.02em;
}
._modal-2ndlist-itemlink {
line-height: 1.5;
letter-spacing: -.02em;
font-weight: 400;
}
._modal-2ndlist-itemtext {
line-height: 1.5;
letter-spacing: -.02em;
font-weight: 400;
}
@media (min-width:769px) {
._pc-only-block {
display: block;
}
}
@media (max-width: 768px) {
._pc-only-block {
display: none !important
}
._modal-list {
border-top: 1px solid rgba(34, 34, 34, .25);
}
._modal-listitem-inner {
flex-direction: column;
gap: 0.5em 0;
}
._modal-list-1stcell {
width: 100%;
padding-right: 0;
}
._modal-list-2ndcell {
width: 100%;
padding-right: 0;
}
._modal-list-3rdcell {
width: 100%;
padding-right: 0;
}
._modal-list-itemtitle {
margin-bottom: calc(3/375*100vw);
}
._modal-list-toggle-2ndlist {
position: initial;
right: initial;
justify-content: center;
margin: 0.5em auto 0;
&:after {
width: calc(24/375*100vw);
}
}
._modal-2ndlist {
margin-top: 0.5em;
padding: calc(16/375*100vw);
}
._modal-2ndlistitem-inner {
flex-direction: column;
gap: 0.5em 0;
}
._modal-2ndlist-1stcell {
width: 100%;
padding-right: 0;
}
._modal-2ndlist-2ndcell {
width: 100%;
padding-right: 0;
}
._modal-2ndlist-3rdcell {
width: 100%;
}
}