@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

@media (max-width: 767px) {
}


:root {
    --w-pc: 460px;
    --h-fix-pc: 90px;
    
    --w-sp: 100%;
    --h-fix-sp: 19vw;
    
    --color-black: #040000;
    --color-main: #007c55;

    --font-w-r: 400;
    --font-w-m: 500;
    --font-w-sb: 600;
    --font-w-b: 700;
    --font-w-eb: 800;
    --font-w-bl: 900;
}

a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {
    border: 0;
    font-family: inherit;
    font-size: 62.5%;
    font-weight: inherit;
    font-style: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

span {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

body,html,main {
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
}

html {
    margin-top: 0 !important;
}

html.scroll-prevent {
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
}

html * {
    box-sizing: border-box;
    font-feature-settings: "palt";
    word-break: break-word;
    line-break: strict;
}

body {
    font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
    font-size: 62.5%;
    font-weight: var(--font-w-m);
    letter-spacing: .05rem;
    line-height: 1.8;
    background-color: #fff;
    color: var(--color-black);
    -webkit-print-color-adjust: exact;
}

main {
    overflow: visible;
}

body a,
body button { 
    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; 
}

body img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    pointer-events: none;
}

body figure {
    margin: 0;
}

body #wrapper {
    display: flex;
    flex-direction: column;
}

section {
    position: relative;
}

.min {
    font-family: "Noto Serif JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.gothic {
    font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}

.maru_gothic {
    font-family: "Zen Maru Gothic","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}

.nopc { display: none; }

@media (max-width: 767px) {
    .nosp { display:none !important; }
    .nopc { display:block; }
}

.hover a,
a.hover {
    opacity: 1;
}

.hover a:hover,
a.hover:hover {
    opacity: 0.7;
}

.no-scroll {
    position: fixed;
    overflow: hidden;
    width: 100%;
}

.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media screen and (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}


/* ===============================================
   wrap
=============================================== */
#body_bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

#body_bg::after {
    content: "";
    width: 100%;
    height: 100svh;
    background: url("../img/bg.jpg") no-repeat center center / cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

#wrapper {
    width: var(--w-pc);
    padding-bottom: 0;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

@media (max-width: 1200px) {
    #wrapper {
        padding-bottom: var(--h-fix-pc);
    }
}

@media (max-width: 767px) {
    #wrapper {
        width: 100%;
        padding-bottom: var(--h-fix-sp);
    }
}


/* ===============================================
   loading
=============================================== */
#loading {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
    background-color: #fff;
	opacity: 1;
	transition: opacity .5s;
	transition-delay: .5s;
	z-index: 999;
}

#loading.loaded {
	opacity: 0;
	pointer-events: none;
}

#loading.transitionend {
	display: none;
}


/* ===============================================
   header
=============================================== */
#header {
    width: var(--w-pc);
    padding: 20px 0 0 15px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99;
    pointer-events: none;
    transition: background .3s ease;
}

#site_logo {
    width: 195px;
}

#site_logo a {
    display: block;
    height: 100%;
    transform: rotate(.1deg);
    pointer-events: painted;
}

@media (max-width: 767px) {
    #header {
        width: 100%;
        padding: 5svw 0 0 3.5svw;
    }

    #site_logo {
        width: 42svw;
    }
}


/* ===============================================
   footer
=============================================== */
#footer {
    background-color: #efeedf;
    margin-top: auto;
    position: relative;
}

.foot_inner {
    width: 90%;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.foot_inner .logo {
    width: 290px;
    margin-bottom: 10px;
}

.foot_shop_title {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.foot_shop_title::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--color-main);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.foot_shop_title span {
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-main);
    background-color: #efeedf;
    display: inline-block;
    padding: 0 0.5em;
    position: relative;
    z-index: 2;
}

#foot_shop_list {
    width: 100%;
    margin-bottom: 10px;
}

#foot_shop_list li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0;
}

#foot_shop_list li:not(:first-of-type) {
    border-top: 1px solid #231815;
}

#foot_shop_list .shop_name {
    width: 230px;
    aspect-ratio: 230 / 36;
    font-size: 21px;
    font-weight: bold;
    border-radius: 5px;
    line-height: 1;
    background-color: var(--color-main);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

#foot_shop_list .add {
    font-size: 16px;
    line-height: 1.5em;
}

#foot_shop_list .tel {
    font-size: 18px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.icon_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 7px;
    margin-bottom: 25px;
}

.icon_list .icon {
    width: 90px;
    aspect-ratio: 200 / 80;
    font-size: 21px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon_list .cat_pachi_02 { background-color: #00a8e3; }
.icon_list .cat_pachi_1 { background-color: #41a144; }
.icon_list .cat_pachi_4 { background-color: #e50012; }
.icon_list .cat_slo_2 { background-color: #7e308d; }
.icon_list .cat_slo_5 { background-color: #78512b; }
.icon_list .cat_slo_10 { background-color: #e6326e; }
.icon_list .cat_slo_20 { background-color: #ffd900; color: var(--color-main); }

.link_area {
    display: flex;
    justify-content: center;
    gap: 0 60px;
}

.link_area a {
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    position: relative;
    padding-right: 1.3em;
    display: inline-block;
}

.link_area a::after {
    content: "";
    width: 1em;
    height: 1em;
    background: url("../img/link_arrow_green.svg") no-repeat center center / contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: block;
}

/* リンク */
.corporate_site {
    width: 385px;
    aspect-ratio: 840 / 190;
    font-size: 17px;
    line-height: 1.5em;
    font-weight: 600;
    background-color: var(--color-main);
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.corporate_site:hover {
    background-color: #fff;
    color: var(--color-main);
}

.corporate_site img {
    width: 28px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6%;
    margin: auto;
}

/* コピーライト */
#copyright {
    text-align: center;
    border-top: 1px solid #231815;
}

#copyright small {
    font-size: 12px;
    line-height: 1;
    padding: 0.8em 1em;
    display: block;
}

@media (max-width: 767px) {
    .foot_inner {
        padding: 9svw 0;
    }

    .foot_inner .logo {
        width: 63svw;
        margin-bottom: 3svw;
    }

    .foot_shop_title {
        margin-bottom: 3svw;
    }

    .foot_shop_title::after {
        height: 0.4svw;
    }

    .foot_shop_title span {
        font-size: 5svw;
    }

    #foot_shop_list {
        margin-bottom: 3svw;
    }

    #foot_shop_list li {
        padding: 5svw 0;
    }

    #foot_shop_list .shop_name {
        width: 50svw;
        font-size: 4.5svw;
        border-radius: 1svw;
        margin-bottom: 3svw;
    }

    #foot_shop_list .add {
        font-size: 3.5svw;
    }

    #foot_shop_list .tel {
        font-size: 4svw;
        margin-bottom: 3svw;
    }

    .icon_list {
        gap: 0 1.5svw;
        margin-bottom: 5svw;
    }

    .icon_list .icon {
        width: 20svw;
        font-size: 4.5svw;
        border-radius: 1svw;
    }
    
    .link_area {
        gap: 0 13svw;
    }

    .link_area a {
        font-size: 6svw;
    }

    /* リンク */
    .corporate_site {
        width: 84svw;
        font-size: 3.8svw;
    }

    .corporate_site img {
        width: 6svw;
    }

    /* コピーライト */
    #copyright small {
        font-size: 2.7svw;
    }
}


/* ===============================================
   fix shop list
=============================================== */
#shop_fixd {
    width: var(--w-pc);
    height: var(--h-fix-pc);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1002;
}

#open_button {
    width: 100%;
    height: 100%;
    font-size: 23px;
    letter-spacing: 0.2em;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: var(--color-main);
    border: 3px solid var(--color-main);
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

/*#open_button:hover {
    color: var(--color-main);
    background: #fff;
}*/

#close_button {
    width: 100%;
    height: 100%;
    font-size: 23px;
    letter-spacing: 0.2em;
    font-weight: bold;
    text-align: center;
    color: var(--color-main);
    background: #fff;
    border: 3px solid var(--color-main);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}

#close_button.active {
    opacity: 1;
    pointer-events: auto;
}

.shop_title_pc {
    display: none;
}

.overlay {
    width: var(--w-pc);
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.butto_wrap img {
    width: 55px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6%;
    margin: auto;
}

.shop_info {
    width: var(--w-pc);
    background: var(--color-main);
    transition: bottom 0.3s ease;
    max-height: calc(100vh - var(--h-fix-pc));
    overflow-y: auto;
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

.shop_info.active {
    bottom: var(--h-fix-pc);
}

.shop_info li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(0px, 1.9vh, 18px) 0 clamp(0px, 2.3vh, 23px);
    color: #fff;
}

@media screen and (max-height: 800px) {
    .shop_info li {
        padding: clamp(0px, 1.4vh, 18px) 0 clamp(0px, 2vh, 23px);
    }
}

.shop_info li:not(:first-of-type) {
    border-top: 1px solid #fff;
}

.shop_info li .shop_name {
    font-size: clamp(0px, 2.7vh, 25px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.3em;
    text-align: center;
    margin-bottom: 0.6em;
}

.shop_info li:first-of-type .shop_name {
    letter-spacing: 0;
}

.shop_info .link_area a::after {
    background-image: url("../img/link_arrow.svg");
}

.shop_info .icon_list {
    gap: 0 clamp(0px, 0.8vh, 7px);
    margin-bottom: clamp(0px, 2vh, 20px);
}

.shop_info .icon_list .icon {
    width: clamp(0px, 9.7vh, 90px);
    font-size: clamp(0px, 2.3vh, 21px);
    border-radius: clamp(0px, 0.5vh, 5px);
}

.shop_info .link_area {
    gap: 0 clamp(0px, 6.5vh, 60px);
}

.shop_info .link_area a {
    font-size: clamp(0px, 3vh, 28px);
}

@media (min-width: 1201px) {
    #shop_fixd {
        width: calc((100vw - 460px) / 2);
        height: 100vh;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: inherit;
        margin: 0;
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .butto_wrap {
        display: none;
    }
    
    .shop_title_pc {
        width: 100%;
        max-height: 15vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .shop_title_pc img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .shop_info {
        width: clamp(0px, 37vh, 350px);
        position: relative;
        bottom: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(0px, 1.1vh, 20px) 0;
        background-color: transparent;
    }
    
    .shop_info li {
        width: 100%;
        aspect-ratio: 315 / 115;
        background-color: #fff;
        border: 2px solid var(--color-main);
        border-radius: clamp(0px, 1.1vh, 10px);
    }
    
    .shop_info li:not(:first-of-type) {
        border: 2px solid var(--color-main);
    }
    
    .shop_info li .shop_name {
        font-size: clamp(0px, 1.9vh, 18px);
        color: var(--color-main);
    }
    
    .shop_info .icon_list .icon {
        width: clamp(0px, 6.5vh, 60px);
        font-size: clamp(0px, 1.5vh, 14px);
    }
    
    .shop_info .link_area a {
        font-size: clamp(0px, 1.9vh, 18px);
        color: var(--color-main);
    }
    
    .shop_info .link_area a::after {
        background-image: url("../img/link_arrow_green.svg");
    }
}

@media (max-width: 767px) {
    #shop_fixd {
        width: 100%;
        height: var(--h-fix-sp);
    }

    #open_button,
    #close_button {
        font-size: 5svw;
        border-width: 0.3svw;
    }

    #close_button.active {
        opacity: 1;
        pointer-events: auto;
    }

    .butto_wrap img {
        width: 12svw;
    }
    
    .overlay {
        width: 100%;
    }

    .shop_info {
        width: 100%;
        max-height: calc(100svh - var(--h-fix-sp));
    }

    .shop_info.active {
        bottom: var(--h-fix-sp);
    }

    .shop_info li {
        padding: clamp(0px, 1.9svh, 4svw) 0 clamp(0px, 2.3svh, 4.5svw);
    }
    
    .shop_info li .shop_name {
        font-size: clamp(0px, 2.7svh, 5.5svw);
    }

    .shop_info .icon_list {
        gap: 0 clamp(0px, 0.8svh, 1.3svw);
        margin-bottom: clamp(0px, 1.8svh, 4.3svw);
    }

    .shop_info .icon_list .icon {
        width: clamp(0px, 9.7svh, 20svw);
        font-size: clamp(0px, 2.2svh, 4.5svw);
        border-radius: clamp(0px, 0.5svh, 0.9svw);
    }

    .shop_info .link_area {
        gap: 0 clamp(0px, 6.5svh, 13svw);
    }

    .shop_info .link_area a {
        font-size: clamp(0px, 3svh, 6svw);
    }
}


/* ===============================================
   page top
=============================================== */
#pagetop {
    width: 80px;
    aspect-ratio: 1 / 1;
    display: block;
    opacity: 0;
    transform: translateY(110px);
    transition: opacity 1s, transform 1s;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 1000;
}

#pagetop.show {
    opacity: 1;
    transform: translateY(0px);
}

#pagetop a {
    display: block;
    transition: opacity 0.3s;
}

#pagetop a:hover {
    opacity: .5;
}

@media (max-width: 767px) {
    #pagetop {
        width: 14svw;
        right: 1svw;
        bottom: 20svw;
    }
}


/* ===============================================
   animation
=============================================== */
/* フェードイン */
.js-fadeup {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1.5s, transform 1.5s;
}

.js-fadeup.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-fadein {
    opacity: 0;
    transition: opacity 1.5s;
}

.js-fadein.is-visible {
    opacity: 1;
}

.delay-0-3 { transition-delay: 0.3s; }
.delay-0-5 { transition-delay: 0.5s; }

@media (max-width: 767px) {
    .delay-0-3,
    .delay-0-5 {
        transition-delay: 0;
    }
}

.floating { animation: floating 1.5s ease-in infinite alternate; }
@keyframes floating {
    0% { transform: translate3d(0,0,0); }
    to { transform: translate3d(0,-20%,0); }
}


/* ===============================================
   mv
=============================================== */
#mv {
    width: 100%;
    aspect-ratio: 920 / 1660;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    width: 55px;
    aspect-ratio: 120 / 190;
    background-image: url("../img/slide_arrow.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    transition: opacity 0.4s;
    opacity: 1;
}

.swiper-button-prev {
    left: 0;
}

.swiper-button-next {
    right: 0;
    transform: translateY(-50%) scaleX(-1);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 0.7;
}

.swiper-pagination {
    position: absolute;
    bottom: 2.5%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0 20px;
}

.swiper-pagination-bullet {
    width: 27px;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    background: #fff;
    border: 1px solid var(--color-main);
    display: block;
    cursor: pointer;
}

.swiper-pagination-bullet-active {
  background: var(--color-main);
}

.mv_slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*@media (max-width: 1200px) {
    #mv {
        max-height: calc(100vh - 90px);
    }
}
*/
@media (max-width: 767px) {
    #mv {
        width: 100%;
/*        height: calc(100vh - var(--h-fix-sp));
        height: calc(100svh - var(--h-fix-sp));
        max-height: 100vh;
        max-height: 100svh;*/
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 12svw;
    }

    .swiper-pagination {
        gap: 0 4svw;
    }

    .swiper-pagination-bullet {
        width: 6svw;
    }
}


/* ===============================================
   mov
=============================================== */
.youtube_wrap {
    width: 100%;
}
.youtube_wrap iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
}


/* ===============================================
   banner
=============================================== */
.banner,
.banner img {
    width: 100%;
    line-height: 0;
}

.banner a {
    display: block;
}


/* ===============================================
   article
=============================================== */
#article {
    width: 90%;
    padding: 100px 0 80px;
    margin: 0 auto;
}

.post_title {
    font-size: 23px;
    font-weight: bold;
    line-height: 1.4em;
    margin-bottom: 1em;
    text-align: center;
}

.post_cont {
    display: flex;
    flex-direction: column;
    gap: 30px 0;
}

.post_img {
    width: 100%;
}

.post_img img {
    width: 100%;
}

.post_text p {
    font-size: 17px;
    line-height: 1.8em;
    font-weight: 400;
}

@media (max-width: 767px) {
    #article {
        padding: 20svw 0 18svw;
    }

    .post_title {
        font-size: 5svw;
    }

    .post_cont {
        gap: 8svw 0;
    }
    
    .post_text p {
        font-size: 3.7svw;
    }
}








/* ===============================================
   print
=============================================== */
@page {
    size: A4 portrait;
}

@media print {
    * {
        text-shadow: none !important;
        box-shadow: none !important;
    }
    
    html, body {
        width: 1100px;
        height: auto;
        -webkit-print-color-adjust: exact;
        size: A4 landscape;
        page-break-after: auto;
    }
    
    header {
        position: relative !important;
    }
    
    .nav {
        position: absolute;
    }
    
    .js-fadeup {
        opacity: 1;
        transform: translateY(0);
    }
    
    .js-fadein {
        opacity: 1;
    }
}