@charset "UTF-8";

:root {
  --pri-color-rgb: 4 138 61;
  --pri-color: rgb(var(--pri-color-rgb));
  --content-width: min(1200px, 90%);
  --content-wide-width: min(1600px, 95%);
  --base-z-index: 100;
  --img-radius: 10px;
}

@media only screen and (max-width: 1080px) {
  :root {
    --content-width: 85%;
  }
}

html { font-size: clamp(15px, 3vw, 16px); font-family: "Noto Sans JP", sans-serif; color: #000; scroll-behavior: smooth;}
*,
*:before,
*:after { margin: 0px; padding: 0px; box-sizing: border-box;}
:where(ul, ol) { list-style: none;}
:where(picture, img) { display: block; max-width: 100%; height: auto;}
:where(a) { text-decoration: none; color: inherit;}
:where(a[href^="tel"]) { pointer-events: none;}
:where(address) { font-style: normal;}
main { position: relative; z-index: 0;}

@media only screen and (max-width:1080px) { 
    :where(a[href^="tel"]) { pointer-events: unset;}
}

.content_wrap { width: var(--content-width); margin-inline: auto;}
.content_wide_wrap { width: var(--content-wide-width); margin-inline: auto;}

.red { color: #F81818;}
.alC { text-align: center;}
.ml0 { margin: 0 auto;}

.margin-0-auto { margin: 0 auto;}
.border-radius-10 { border-radius: 10px;}
.border-radius-20 { border-radius: 20px;}
.line-height-40 { line-height: clamp(35px, 4vw, 40px); font-size: clamp(15px, 2vw, 17px);}


.pc { display: inherit;}
.sp { display: none;}
@media only screen and (max-width:1080px) { 
 .pc { display: none; }
 .sp { display: block; }
}


.btn { display: flex; align-items: center; justify-content: center; gap: 1.5em; padding: 1em 2.5em 1em 1.5em; width: fit-content; font-size: clamp(17px, 3vw, 18px); font-weight: bold; color: var(--pri-color); background-color: #fff; border: solid 1px currentColor; border-radius: 100vmax; min-width: 200px; position: relative;
 &:after { content: ""; display: block; position: absolute; right: 1em; width: auto; height: 1em; aspect-ratio: 11.88/16.39; background: url(../../img/icon_link.svg) no-repeat center / contain; }
 &.rev { color: #fff; background-color: var(--pri-color); border: none; }
 &.rev:after { background: currentColor; mask: url(../../img/icon_link.svg) no-repeat center / contain; -webkit-mask: url(../../img/icon_link.svg) no-repeat center / contain; }
}

@media only screen and (max-width:1080px) { 
    .btn { min-width: 150px;}
}

@media (any-hover:hover) { a:not(:has(img)):hover { opacity: 0.75; }
 a:has(img):hover { filter: brightness(0.9); }
}

@media (any-hover:none) { a:not(:has(img)):active { opacity: 0.75; }
 a:has(img):active { filter: brightness(0.9); }
}




/* ================================================== 
header
================================================== */
header { 
    position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 20px 2em; backdrop-filter: blur(4px); background-color: rgba(255, 255, 255, 0.75); z-index: calc(var(--base-z-index) + 9999);
        & h1 { width: 250px;}
        & nav ul { display: flex; align-items: center; gap: 1em 2em; white-space: nowrap; flex-wrap: wrap;}
        & .icon { display: flex; align-items: center; justify-content: center; gap: 0.25em;}
        & .icon:before { content: ""; display: block; width: auto; height: 1em; background: url() no-repeat center / contain; position: relative; top: 2px;}
        & .top:before { aspect-ratio: 16.42/16.88; background-image: url(../../img/icon_home.svg);}
        & .contact { padding: 1em 2em; border-radius: 100vmax; background-color: var(--pri-color); font-weight: bold; color: #fff;}
        & .contact:before { aspect-ratio: 20.34/15.04; background-image: url(../../img/icon_contact.svg);}
}

@media screen and (max-width: 1080px) {  
    header { 
        padding: 1em;
        & nav ul { flex-direction: column; gap: 2em; color: #fff; margin-bottom: 2em;}
        & .top::before { background-image: unset; -webkit-mask-image: url(../../img/icon_home.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; background-color: #fff;}
    }
}

/* ================================================== 
ハンバーガーメニュー
================================================== */
.menu { display: flex; gap: 2.5em;
    &  .tels { display: none;}
}
.menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; border: none; background: transparent; position: relative; outline: none; box-shadow: none; z-index: 10;
    /* &::before { content: ''; position: absolute; background-color: #048A3D; z-index: -1; border-radius: 120px; width: 55px; height: 55px; top: 16px; left: 49%; transform: translate(-50%, -50%);} */
    & .bar { width: 27px; min-height: 4px; height: 4px; background-color: #fff;  transition: transform 0.3s ease, opacity 0.3s ease;}
    &::after { content: "MENU"; font-size: 9px; color: #fff; position: absolute; top: 25px; letter-spacing: 0px;  text-align: center; display: block; transition: content 0.3s ease;}
}


@media screen and (max-width: 1080px) { 
    header {
        nav { background-color: #048A3D; width: 55px; height: 55px; border-radius: 55px; display: flex; justify-content: center; align-items: center; padding-bottom: 7px;}
    }
    .menu { display: none; flex-direction: column; gap: 1em;}
    .menu-toggle { display: flex;}
    .menu.active { display: flex; position: absolute; top: 0px; right: 0%; width: 75%; background: green; height: 100vh; justify-content: center; align-items: center; gap: 2em;
            & .scroll { overflow-y: auto; padding: 1em; scrollbar-width: none; -ms-overflow-style: none; width: 100%;
                &::-webkit-scrollbar { display: none;}
            }
            & .contact { background-color: unset; padding: unset; font-weight: unset;}
            & .tels { display: block; padding: 1.5em; background-color:#fff; border-radius: 30px; z-index:calc(var(--base-z-index) + 1); text-align: center; width: fit-content; margin: 0 auto;
            & p:nth-of-type(1) { color:var(--pri-color); font-size:14px; font-weight:bold;}
            & p:nth-of-type(2) { padding: 0.5em 0px; display:flex; align-items:center; gap:0.3em; font-size:33px; font-weight:bold; justify-content: space-between;}
            & p:nth-of-type(2):before { content:""; display:block; width:1em; height:auto; aspect-ratio:1; background-color:var(--pri-color); mask:url(../../img/icon_tel.svg) no-repeat center / contain; -webkit-mask:url(../../img/icon_tel.svg) no-repeat center / contain;}
            & p:nth-of-type(3) { font-size:14.5px; font-weight: 500; line-height: 2;}
        }
    }
}

@media screen and (max-width: 1080px) { 
     .menu.active {  width: 100%;}
}

.menu-toggle.open::after { content: "CLOSE";}
.menu-toggle.open .bar:nth-child(1) { transform: rotate(45deg) translate(7px, 6px);}
.menu-toggle.open .bar:nth-child(2) { opacity: 0;}
.menu-toggle.open .bar:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px);}



/* ================================================== 
footer
================================================== */
footer { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-left: calc((100% - var(--content-wide-width)) / 2); padding-bottom: 50px;
    & address { margin-top: 1lh; line-height: 1.8;}
    & nav { margin-top: 3lh;
        & ul { display: grid; grid-template-columns: repeat(3, auto); gap: 1em 1.75em; width: fit-content; margin: 0 auto;}
        & a { display: flex; align-items: center; gap: 0.25em; font-size: clamp(12px, 3vw, 16px);}
        & a:before { content: ""; width: 0.6875em; height: auto; aspect-ratio: 1; border-radius: 100%; background-color: var(--pri-color); top: 1px; position: relative;} 
    }
    & .privacy-wrap { display: block; margin-top: 10em; font-size: clamp( 10px, 3vw, 14px); color: #000000; }
    & .copy { margin-top: 1lh; font-size: clamp( 10px, 3vw, 12px);}
    & .r { width: 46%; opacity: 0.59; }
    & .r img { width: 100%; max-height: 500px; object-fit: cover; object-position: left;}
}

@media screen and (max-width: 1080px) { 
    footer { flex-direction: column; padding-left: unset;
        & nav {
            & ul { grid-template-columns: repeat(2, auto);}
        }
        & .privacy-wrap { margin-top: 2em; text-align: center;}
        & .logo { width: 215px; margin: 0 auto;}
        & address { text-align: center;}
        & .l { width: 100%;}
        & .r { width: 100%;}
    }
}





/* ================================================== 
contact
================================================== */
section.contact { margin-top: 190px; padding: 120px calc((100% - var(--content-wide-width)) / 2) 120px; background: url(../../img/contact_bg.png) no-repeat center / cover;
    & div { display: flex; flex-direction: column; align-items: center; width: min(750px, 95%); margin-inline: auto; padding: 42px 1rem 37px; border-radius: 30px; background-color: rgb(255 255 255 / 0.9); }
    & strong { color: var(--pri-color); font-size: clamp(25px, 3vw, 30px); font-weight: bold; }
    & .t1 { margin-top: 14px; font-size: clamp(15px, 3vw, 18px); }
    & .t2 { font-size: clamp(14px, 3vw, 15px); }
    & a[href^="tel"] { display: flex; align-items: center; gap: 0.3em; font-size: clamp(34px, 4vw, 65px); font-weight: bold;
    &:before { content: ""; display: block; width: auto; height: 0.75em; aspect-ratio: 48.76/49.89; background: url(../../img/icon_tel.svg) no-repeat center / contain; } }
    & .btn { margin-top: 33px; }
}

@media screen and (max-width: 1080px) { 
    section.contact { 
         padding: 30px calc((100% - var(--content-wide-width)) / 2) 30px;
        & div { text-align: center; gap: 12px;}
        & .t1 { margin-top: 0px;}
        & .btn { margin-top: 15px;}
    }
}




/* ================================================== 
instagram
================================================== */
section.insta { width: var(--content-width); margin-inline: auto; margin-bottom: clamp(50px, 10vw, 220px);
 & :is(div, p) { width: fit-content; margin-inline: auto; }
 & div { position: relative; margin-bottom: 1em; font-size: clamp(25px, 3vw, 40px); font-weight: 900; }
 & div:before { content: ""; position: absolute; display: block; width: 3.06125em; height: auto; aspect-ratio: 122.45/93.46; background: url(../../img/camera.png) no-repeat center / contain; rotate: 35deg; inset: 50% auto auto calc(100% + 1.4375em); translate: 0 -50%; }
 & p { margin-bottom: 3em; font-size: 15px; }
}



/* ================================================== 
pageTop
================================================== */
.pageTop {position: sticky; bottom: 0; z-index: calc(var(--base-z-index) + 100); opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  &.is-show {opacity: 1; pointer-events: auto;}
  & a {position: absolute; inset: auto 1rem 1rem auto; display: grid; place-items: center; width: 4rem; height: auto; aspect-ratio: 1; background-color: var(--pri-color); border-radius: 100%;}
  & a:before {content: ""; display: block; width: 50%; height: auto; aspect-ratio: 11.88/16.39; background-color: #fff; mask: url(../../img/icon_arrow.svg) no-repeat center / contain; -webkit-mask: url(../../img/icon_arrow.svg) no-repeat center / contain;}
}




/* ================================================== 
main-content
================================================== */
/* section-title */
.section-title { 
    font-weight: bold; width: fit-content; 
    & p { font-size: clamp( 20px, 3vw, 35px); }
    & h2 { font-size: clamp( 38px, 3vw, 60px);; border: 5px solid #048A3D; line-height: 1; padding: 0.3em; margin: clamp(0.3em, 4vw, 0.5em) 0px; width: fit-content;}
}

@media screen and (max-width: 1080px) { 
    .section-title { text-align: center; margin: 0 auto;}
}

/* .flex-box  */
.flex-box { 
    display: flex; justify-content: space-between; align-items: center; gap: clamp(30px, 4vw, 50px);
    & .left { flex: 1;}
    & .right { flex: 1;}
}

.flex-box-left { display: flex; justify-content: space-between; gap: clamp(30px, 4vw, 50px);
    & .left { width: 41%;}
    & .right { width: 50%;}
}

.flex-box-right { display: flex; justify-content: space-between; gap: clamp(30px, 4vw, 50px);
    & .left { width: 50%;}
    & .right { width: 41%;}
}

@media screen and (max-width: 1080px) { 
    .flex-box { flex-direction: column;}
    .flex-box-left { flex-direction: column;
        & .left { width: 100%;}
        & .right { width: 100%;}
    }
    .flex-box-right { flex-direction: column-reverse;
        & .left { width: 100%;}
        & .right { width: 100%;}
    }
}


/* green-area */
.green-area { 
    background-color: #D3EFDF; border-radius: 20px; display: flex; align-items: center; padding: 1.5em 1.8em; justify-content: space-between; gap: 2em; margin-top: 60px;
    & b { color: #048A3D; font-size: 1.375rem; white-space: nowrap; }
    & p { font-size: 1.125rem; }
}

@media screen and (max-width: 1080px) { 
    .green-area { flex-direction: column; gap: 0em; padding: 2em 1.5em}
}