@charset "utf-8";

:root {

    --white-100: #ffffff;
    --black-100: #000;
    --red-500: #fe0000; /* Emphasis / Alert */

    /* =========================
        GREEN (Light → Dark)
        ========================= */

    --green-50:  #eef7f2; /* 薄緑背景・LP背景 */
    --green-100: #deede6;
    --green-150: #dbeeea;
    --green-200: #cce4d7;
    --green-250: #aed5c0;

    --green-300: #9bbcab;
    --green-400: #5aaa83;
    --green-450: #5caa82;
    --green-500: #2e8b6e;
    --green-600: #325f5c;

    --green-700: #647676;
    --green-750: #647877;

    /* =========================
        NEUTRAL / BACKGROUND
        ========================= */

    --neutral-50:  #f3f0e9; /* Beige 背景 */
    --neutral-100: #f0f0f0; /* Gray 背景 */
    --neutral-200: #d4dcde;
    --neutral-150: #d4dddd;

    /* =========================
        Font size tokens
        breakpoint: 750px
        ========================= */

    /* exLarge */
    --fs-exLarge01: clamp(40px, 5.21vw, 70px);
    --fs-exLarge02: clamp(38px, 4.95vw, 68px);
    --fs-exLarge03: clamp(36px, 4.49vw, 60px);

    /* large */
    --fs-large01: clamp(34px, 4.43vw, 48px);
    --fs-large02: clamp(32px, 4.17vw, 45px);
    --fs-large03: clamp(30px, 3.91vw, 40px);
    --fs-large04: clamp(28px, 3.65vw, 36px);
    --fs-large05: clamp(26px, 3.39vw, 32px);
    --fs-large06: clamp(24px, 3.13vw, 30px);

    /* middle */
    --fs-middle01: clamp(22px, 2.86vw, 28px);
    --fs-middle02: clamp(18px, 2.34vw, 25px);
    --fs-middle03: clamp(16px, 2.08vw, 20px);
    --fs-middle04: clamp(15px, 1.95vw, 18px);

    /* body / small */
    --fs-body:  clamp(14px, 1.82vw, 16px);
    --fs-small: clamp(11px, 1.47vw, 13px);


    /* =========================
     Spacing
     ========================= */

    /* ▼setting */
    /* ===== PC ===== */
    --sp-pc-xxs: 4px;
    --sp-pc-xs: 8px;
    --sp-pc-sm: 12px;
    --sp-pc-md: 16px;
    --sp-pc-lg: 24px;
    --sp-pc-xl: 32px;
    --sp-pc-2xl: 36px;
    --sp-pc-3xl: 48px;
    --sp-pc-4xl: 64px;
    --sp-pc-5xl: 96px;
    --sp-pc-6xl: 128px;
    --sp-pc-7xl: 160px;
    --sp-pc-8xl: 180px;

    /* ===== SP ===== */
    --sp-sp-xxs: 4px;
    --sp-sp-xs: 6px;
    --sp-sp-sm: 10px;
    --sp-sp-md: 14px;
    --sp-sp-lg: 20px;
    --sp-sp-xl: 28px;
    --sp-sp-2xl: 32px;
    --sp-sp-3xl: 40px;
    --sp-sp-4xl: 56px;
    --sp-sp-5xl: 72px;
    --sp-sp-6xl: 80px;
    --sp-sp-7xl: 85px;
    --sp-sp-8xl: 90px;
    /* ▲setting */

    /* ▼▼Use this* */
    /* default = PC */
    --sp-xxs: var(--sp-pc-xxs);
    --sp-xs:  var(--sp-pc-xs);
    --sp-sm:  var(--sp-pc-sm);
    --sp-md:  var(--sp-pc-md);
    --sp-lg:  var(--sp-pc-lg);
    --sp-xl:  var(--sp-pc-xl);
    --sp-2xl: var(--sp-pc-2xl);
    --sp-3xl: var(--sp-pc-3xl);
    --sp-4xl: var(--sp-pc-4xl);
    --sp-5xl: var(--sp-pc-5xl);
    --sp-6xl: var(--sp-pc-6xl);
    --sp-7xl: var(--sp-pc-7xl);
    --sp-8xl: var(--sp-pc-8xl);
    
}

/* ▼ SP Spacing setting */
@media (max-width: 768px) {
  :root {
    --sp-xxs: var(--sp-sp-xxs);
    --sp-xs:  var(--sp-sp-xs);
    --sp-sm:  var(--sp-sp-sm);
    --sp-md:  var(--sp-sp-md);
    --sp-lg:  var(--sp-sp-lg);
    --sp-xl:  var(--sp-sp-xl);
    --sp-2xl: var(--sp-sp-2xl);
    --sp-3xl: var(--sp-sp-3xl);
    --sp-4xl: var(--sp-sp-4xl);
    --sp-5xl: var(--sp-sp-5xl);
    --sp-6xl: var(--sp-sp-6xl);
    --sp-7xl: var(--sp-sp-7xl);
    --sp-8xl: var(--sp-sp-8xl);
  }
}
/* ▲ SP Spacing setting */

*{ box-sizing: border-box;}

body{  position: relative;   font-family: "Noto Sans JP", Arial,
"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;  font-optical-sizing: auto; font-feature-settings: "palt"; font-weight: 400; font-style: normal; font-size: var(--fs-body); line-height: 1.5; color: var(--black-100); word-break: break-all; letter-spacing: 0.08em; }

main{ margin-top: 78px;  overflow: hidden;}

.txtCenter{ text-align: center;}
.txtUp{ text-transform: uppercase;}
.bold{ font-weight: 700;}
.mid{ font-weight: 500;}

h1{ margin: 1.56rem 0 0.88rem; width: 255px;  font-weight: normal; color: #0C3D8C; text-align: left;}
.bg_tit{ margin: 0 calc(50% - 50vw); padding: 0.4em; line-height: 1.2; background: var(--neutral-100); text-align: center; font-size: var(--fs-large06);}
.borderTit{ position: relative;display: flex; align-items: center; font-size: var(--fs-middle02); color: var(--green-500); margin-bottom: var(--sp-lg);}
.borderTit::after{ content: ""; display: block; margin-left: 1em; height: 1px; flex-grow: 1; background: var(--green-500); }
.borderTit::before{ content: ""; display: block; position: absolute;right: 0;bottom: 50%;}

a{  text-decoration: none; color: inherit;transition: all 0.3s;}
a:hover{ opacity: 0.5; }

img{ vertical-align: bottom; max-width: 100%; height: auto; text-align: center;}
figure{ position: relative;}
.caption {font-size: 12px;}
figcaption, .capAbs{ position: absolute; bottom: 0; right: 0; text-align: right; width: 100%;  color: #fff; padding: 8px; font-size: 12px; text-shadow: 0px 3px 8px rgb(0 0 0 / 1);}
figcaption > .bgcap{ display: inline-block; width: auto; background: rgb(0 0 0 / .6); padding: .5em 1em;} 
.capOut {top: 100%;bottom: unset;text-shadow: unset;color: var(--black-100);padding: var(--sp-xxs) 0 0;}
.capBlack {color: var(--black-100);text-shadow: unset;}
.capRight {text-align: right;}

.container{ max-width: 1100px; width: calc(100% - 40px); padding: var(--sp-6xl) 0 0; margin: 0 auto ; }
.container02{ max-width: 1400px; width: calc(100% - 40px); padding: var(--sp-6xl) 0 0; margin: 0 auto ; }
.l_flex{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.l_grid{ display: grid; }

.pt128{ padding-top: var(--sp-6xl);}
.pt180{ padding-top: var(--sp-8xl);}
.pt18 { padding-top: var(--sp-xs);}
.mt180{ margin-top: var(--sp-8xl);}

.sp_only{ display: none;}
.pc_only{ display: block;}


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

@media (max-width: 768px){
    h1{width: 160px; }
    img{ text-align: center; display: block; margin: 0 auto;}
    .sp_only{ display: block;}
    .pc_only{ display: none;}
    main{ margin-top: 0;}
    
    .sp_pt0 {padding-top: 0;}

    .bg_tit{ font-size: var(--fs-large06);}

    .borderTit{ padding-bottom: var(--sp-sm);text-align: center;display: block; margin-bottom: var(--sp-xs);}
    .borderTit::before { position: static;width: 40% !important; margin: 0 auto;}
    .borderTit::after {margin-left: 0;position: absolute; top: 100%; left: 0;width: 100%;}
}

/* header */
header{ max-height: 80px;}
.gnav{ position: fixed; width: 100%; top: 0; z-index: 100; background: #f0f0f0; }
.gnav__titBox{ padding: 0 2.3%; min-height: 57px;}
.gnav__menu{ background: #325f5a; padding: 1em 1em 1em; width: 100%; }

.gnav .contact__btn{ height: 1.467em;align-content: center; background: var(--green-600); color: var(--white-100); font-size: 15px; padding: 0 2em 0.25em 2em; vertical-align: 2px; line-height: 1; margin-right: min(4vw, 30px);text-decoration: none;}
.gnav__menuBtn{ width: 30px; height: 20px; position: relative; appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer;}
.gnav__border,
.gnav__border::after,
.gnav__border::before { position: absolute; display: block; content: ""; width: 100%; height: 2px; background-color: var(--green-600); transition: all 0.5s;}
.gnav__border::before { top: -7px;}
.gnav__border::after { bottom: -7px;}
.gnav__menuBox { width: clamp( 323px , 49vw , 380px); position: relative; margin: 0 2.3% 0 auto; z-index: 100;}
.gnav__menu { position: absolute; transform : translateX(100%); opacity: 0; transition: all 0.5s; height: auto;}

.gnav__menuBtn.open{ position: relative; z-index: 101; right: 30px; transition: all 1s ease;}

.gnav__menuBtn.open .gnav__border,
.gnav__menuBtn.open .gnav__border::after,
.gnav__menuBtn.open .gnav__border::before { background-color: var(--white-100); transition: all 0.5s;}
.gnav__menuBtn.open .gnav__border { position: relative; background-color: transparent; z-index: 3;}
.gnav__menuBtn.open .gnav__border::before { top: 0; transform: rotate(45deg);}
.gnav__menuBtn.open .gnav__border::after { bottom: 0; transform: rotate(-45deg);}

.gnav__menu.open { transform: translateX(0%) translateY(-78px); opacity: 1;  transition: 0.7s; z-index: 100; height: auto; padding: var(--sp-6xl) 0 var(--sp-3xl);}


.gnav__list{ padding: 0 15%;}
.gnav__listItem:not(:first-of-type){  margin-top: 1.5em; }
.gnav__listItem span{ font-size: 87%;}
.gnav__list.l_flex{ display: block; margin: 0 auto; text-align: left;}
.gnav__listItem:not(:first-of-type)::before { content: none;}

.gnav__link { color: #fff; font-size: 1em; vertical-align: text-top; letter-spacing: 0.05em;}
.gnav__link span { display: block; font-size: 12px;  }


/* footer */
footer{ margin: var(--sp-4xl) auto 0;}
footer .company{ width: calc(100% - 40px); margin: 0 auto var(--sp-4xl);}
footer p{ text-align: center; color: var(--white-100);}
footer img{ margin: 0 auto var(--sp-2xl); text-align: center;}
.footer__copyBox{ background: var(--green-700); padding: 20px 0 30px;}
.footer__copyright{ display: block; font-size: var(--fs-small); color: var(--white-100); text-align: center; color: var(--white-100);}

/* pagetop */
.pagetop{ position: fixed; right: 16px; bottom: 16px; width: 48px; height: 48px; border: 0; border-radius: 999px; cursor: pointer; background: var(--green-600); color: #fff; display: grid; place-items: center;
 opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 9999;
}
.pagetop.is-show{ opacity: 1; visibility: visible; transform: translateY(0);}

.pagetop:focus-visible{ outline: 3px solid #4d90fe; outline-offset: 2px;}
.pagetop:hover {opacity: 0.8;}
@media (max-width: 768px){
  .pagetop{ width: 40px; height: 40px; right: 12px; bottom: 12px;}
}

/* Animate */
@media screen{
    .inview{}
    .fade-in{opacity: 0; transition: 1.5s;}
    .fade-in.is-view{opacity: 1;}

    .fade-up{opacity: 0; transform: translateY(30px); transition: 1.5s;}
    .fade-up.is-view{opacity: 1; transform: translateY(0);}

    .fade-right{opacity: 0; transform: translateX(-30px); transition: 1.5s;}
    .fade-right.is-view{opacity: 1; transform: translateX(0);}

    .bounce{opacity: 0;}
    .bounce.is-view{animation: bounce .6s cubic-bezier(.33, 1, .68, 1) forwards 0.8s;}
        
    @keyframes bounce{
        0%{opacity: 0; transform: translateY(50%) scale(1.2, .8);}
        40%{opacity: 1; transform: translateY(-10%);}
        70%{opacity: 1; transform: translateY(5%) scale(1.2, .8);}
        100%{opacity: 1; transform: none;}
    }
}