/* @use 'variables' as *;*/ /*---------------------------------------- top page ------------------------------------------*/ .h_outer {margin-bottom: clamp(20px, 4vw, 60px);} .h_outer .sec_h {color: var(--c_theme_color);text-align: center;position: relative;font-size: 26px;line-height: 1.2em;padding-bottom: 26px;font-weight: 500;} .h_outer .sec_h:after {position: absolute;content: attr(data-heading) "";font-size: 0.45em;line-height: 1em;color: #000;left: 50%;transform: translateX(-50%);bottom: 0;} @media screen and (max-width: 835px) { .h_outer .sec_h:after {bottom: 4px;} } .section_wrap:not(:last-of-type) {margin-bottom: clamp(60px, 8vw, 140px);} /* fv ------------------------------------------*/ #fv {position: relative;padding: 9vw 0 14vw; background-color: #fff; overflow: hidden;} #fv .fv_inner {display: flex;width: 84vw;margin: 0 auto;justify-content: center;gap: 8vw;align-items: center;position: relative;z-index: 3;} #fv .fv_inner .logo {width: 33vw;} #fv .fv_inner .logo img {width: 100%;} #fv .fv_inner .text_block {width: 39vw;position: relative;padding-top: 6vw;} #fv .fv_inner .text_block .text img {width: 100%;} #fv .fv_inner .text_block .block_ob {position: absolute;} #fv .fv_inner .text_block .block_ob img {width: 100%;} #fv .fv_inner .text_block .block_ob.ob01 {top: -8vw;left: -16%;width: 22%;} #fv .fv_inner .text_block .block_ob.ob02 {right: -24%;bottom: -45%;width: 50%;} #fv .ob {position: absolute;} #fv .ob img {width: 100%;} #fv .ob.ob01 {bottom: 6.5vw;right: 0%;width: 14%;} #fv .ob.ob02 {right: 0%;top: 5vw;width: 11%;} @media screen and (max-width: 835px) { #fv {padding: 20vw 0 33vw;} #fv .ob.ob01 {width: 30%; padding-bottom: 4vw;} #fv .ob.ob02 {top: 55px;width: 19%;} #fv .fv_inner {flex-wrap: wrap;} #fv .fv_inner .logo {width: 80%;margin-right: 11%;} #fv .fv_inner .text_block {width: 100%;} #fv .fv_inner .text_block .block_ob.ob01{ top: -15vw;} #fv .fv_inner .text_block .block_ob.ob02{ bottom: -50%;} } #news .news_wrap ul {margin-bottom: 2em;} #news .cmn_btn_outer {text-align: right;} #news .single_wrap .cmn_btn_outer {text-align: center;} #about {position: relative; margin-bottom: 0; padding-bottom: 140px;} #about .ob {position: absolute;} #about .ob img {width: 100%;} #about .ob.ob01 {top: -40px;left: 0;width: min(16%, 210px);} #about .ob.ob02 {right: 0;bottom: -100px;width: min(24%, 280px);} #about .about_wrap {display: flex;gap: clamp(20px, 2vw, 40px);align-items: flex-start;position: relative;z-index: 3;} #about .about_wrap .about_block {width: 60%;} #about .about_wrap .map {width: 40%; aspect-ratio: 1/1; line-height: 0;} #about .about_wrap .map .gmap{ position: relative; width: 100%; padding-top:75%; height: 0;} #about .about_wrap .map .gmap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #about .about_block {border: 1px solid #000;padding: 4% ;font-weight: 500;} #about .about_block dl {display: flex;font-size: 18px;line-height: 1.5em;gap: clamp(10px, 3vw, 30px); margin-bottom: 1.25em; padding-bottom: 1.25em; border-bottom: 1px solid #aaa;} #about .about_block dl:last-of-type {margin-bottom: 0em; padding-bottom: 0; border-bottom: none;} #about .about_block dl dt {color: var(--c_theme_color);width:5em;} #about .about_block dl dd {width: calc(100% - 6em);} @media screen and (max-width: 835px) { #news{ margin-bottom: 5em;} #news .news_wrap ul{ margin-bottom: 1em;} #about { padding-bottom: 60px;} #about .about_wrap {flex-wrap: wrap;} #about .about_wrap .about_block {width: 100%;} #about .about_wrap .map {width: 100%; aspect-ratio:inherit; margin-bottom: 20px;} #about .about_block {padding: 24px 16px;} #about .about_block dl {flex-wrap: wrap;gap: 5px;margin-bottom: 1em; padding-bottom: 1em;} #about .about_block dl dt {width: 100%;} #about .about_block dl dd {width: 100%;} #about .ob.ob02{ bottom: -30px;} } #shop { background-image: url("../images/bg/shop_bg.webp"); background-attachment: fixed; background-size: 50%; padding: clamp(50px, 5vw, 100px) 0; position: relative; overflow: hidden;} /*#shop:before{ display: block; content: ""; background: url(../images/bg/shop_bg.webp) no-repeat center;background-size: cover; position: fixed; height: 100%; width: 100%; top: 0; left: 0;} */ #shop .shop {margin-bottom: 5%;} .shop a{ color: var(--c_font_color); transition: 0.3s;} .shop a:hover{ opacity: 0.8;} .shop {text-align: center;display: grid;grid-template-columns: 100%;grid-template-rows: -webkit-max-content;grid-template-rows: max-content;} .shop .img {aspect-ratio: 1/1;background: #fff;margin-bottom: 3%;} .shop .img img {width: 100%;height: 100%;-o-object-fit: contain;object-fit: cover;} .shop .infoblock{margin-bottom: 0.75em;} .shop .name {font-size: 18px;line-height: 1.5em;margin-bottom: 0.5em;color: var(--c_theme_color);font-weight: bold;} .shop .area {font-size: 14px;line-height: 1.5em;margin-bottom: 0;} .shop .text {font-size: 18px;line-height: 1.5em;} .shop .link_btn {border: 1px solid #000;padding: clamp(10px, 2vw, 16px) 16px;text-align: center;position: relative;display: block;font-size:16px;line-height: 1.5em;align-self: end;justify-self: end;width: 100%; color: var(--c_link_color);} .shop .link_btn:before {position: absolute;content: "";background: var(--c_theme_color);width: 6px;height: 12px;top: 53%;transform: translateY(-50%);right: clamp(14px, 2vw, 20px);-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);clip-path: polygon(0 0, 0% 100%, 100% 50%);} .official_btn {background: #000;color: #fff;position: relative;display: block;border-radius: 100vmax;padding: 24px;font-size: clamp(18px, 2vw, 26px);text-align: center;line-height: 1.3em;max-width: 640px;width: 90%;margin: 0 auto;} .official_btn .icon {position: absolute;top: 50%;left: 40px;transform: translateY(-50%);width: 60px;} #in_shop {padding-top: 160px;margin-bottom: 100px;} #in_shop .main_block {display: flex;gap: 40px;margin-bottom: 50px;} #in_shop .main_block .img {background: #fff;aspect-ratio: 1/1;width: calc(50% - 40px); border: 1px solid #ccc;} #in_shop .main_block .img img {width: 100%;height: 100%;-o-object-fit: contain;object-fit: cover;} #in_shop .main_block .text_block {width: 50%;} #in_shop .main_block .text_block .shop_name {font-size: clamp(24px, 4vw, 38px);line-height: 1.3em;color: var(--c_theme_color);font-weight: 600;margin-bottom: 20px;} #in_shop .main_block .text_block .lead { margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 20px;} #in_shop .main_block .text_block .lead .area{} #in_shop .main_block .text_block .lead .due{} #in_shop .menu_block .menu .img {background: #f5f5f5;aspect-ratio: 1/1;margin-bottom: 10px;} #in_shop .menu_block .menu .img img {width: 100%;height: 100%;-o-object-fit: contain;object-fit: contain;} #in_shop .menu_block .menu .name {font-size: 20px;line-height: 1.4em;color: var(--c_theme_color);font-weight: 600;margin-bottom: 10px;} #in_shop .text_block h2{ color: var(--c_theme_color); font-weight: bold; font-size:18px; line-height: 1.7em; margin-bottom: 0.5em;} #in_shop .text_block .url ul{ display: flex; padding-top: 2em;} #in_shop .text_block .url li{ width: 50px; margin-right: 0.5em;} #in_shop .text_block .url a{display: block; width: 50px; aspect-ratio: 1 / 1;} #in_shop .text_block .url a.icon_web { background: url(../images/icon_web.png) no-repeat center; background-size: contain;} #in_shop .text_block .url a.icon_x { background: url(../images/icon_x.png) no-repeat center; background-size: contain;} #in_shop .text_block .url a.icon_insta { background: url(../images/icon_instagram.png) no-repeat center;background-size: contain; } .backbtn a{ display: block;background-color: #000; padding: 1em; color: #fff;width: min(90%,320px); margin: 3em auto 0; text-align: center;} @media screen and (max-width: 835px) { #shop{ padding: 50px 0 20px;} #shop .wrap_1800px{ width: 75%;} .shop .img{ margin-bottom: 10px;} .shop .name{font-size: 20px;} #in_shop {padding-top: 80px;} #in_shop .main_block {flex-direction: column;margin-bottom: 60px;} #in_shop .main_block .img {width: 100%;} #in_shop .main_block .text_block {width: 100%;} #shop .shop{ margin-bottom: 50px; display: block;} } /*# sourceMappingURL=pages.css.map */