/* =====================================
   Common Styles
   Header / Footer / Button / Base
===================================== */

/* =====================================
   Header
===================================== */
:root{
  --font-sans: "Noto Sans JP", "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --container: 1000px;
  --gutter: 20px;

  --color-text: #111;
  --color-bg: #fff;
  --color-brand: #22BA4F;
  --color-dark: #000;
}

body{
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background: var(--color-bg);
}
html, body{
  overflow-x: hidden;
}

.l-container{
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

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

/* ===== Header ===== */
.site-header{
  background: var(--color-bg);
}

.site-header__inner{
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__logoLink{
  font-size: 26px;
  line-height: 1.2;
  font-weight: var(--fw-black);
  color: var(--color-dark);
  text-decoration: none;
}

/* nav lists: remove default bullets */
.g-nav__list,
.f-nav__list,
.sp-menu__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* PC nav */
.g-nav{
  display: none; /* mobile-first */
}
.g-nav__list{
  display: flex;
  align-items: center;
  gap: 32px;
}

/* CTA */
.site-header__cta{
  display: none; /* mobile-first */
}

/* ===== Nav link underline animation (共通) ===== */
.c-navLink{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;

  color: inherit;
  text-decoration: none;
  font-weight: var(--fw-bold);
  transition: opacity .3s;
  white-space: nowrap;
}

.c-navLink::after{
  content: "";
  position: absolute;
  left: 10%;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: currentColor;
  transition: width .3s;
}


.c-navLink:hover::after{
  width: 80%;
}

/* ===== Button (CTA) ===== */
.c-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}
.c-btn:hover{
  background: #0c5526;
}

.c-btn--cta{
  height: 50px;
  padding: 0 40px 0 30px;
  border-radius: 25px;
  background: var(--color-dark);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 16px;
  position: relative;
}

@media (max-width:499px){
  .c-btn--cta{
    width:100%;
    font-size:16px;
  }
  .site-header__logoLink{
  font-size: 21px;
}
}

.c-btn__icon{
  width: 18px;
  height: 18px;
  border-radius: 25px;
  background: var(--color-brand);
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .3s ease;
}

/* 矢印 */
.c-btn__icon::before {
    content: "";
    width: 4px;
    height: 4px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    inset: 0;
    margin: auto;
    right: 2px;
}
.c-btn__icon--external{
  background: url("images/icon-another.png") no-repeat center/contain;
  border-radius: 0;
}
.c-btn__icon--external::before{
  content: none;
}

/* large button icon tweak */
.c-btn--lg .c-btn__icon{
  width: 17px;
  height: 17px;
  right: 23px;
}
.c-btn--lg .c-btn__icon::before{
  width: 5px;
  height: 5px;
}

.c-btn:hover .c-btn__icon{
  transform: translateY(-50%) translateX(3px);
}


/* block btn (SPメニュー内) */
.c-btn--block{
  width: 100%;
}

/* ===== Hamburger ===== */
.c-hamburger{
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.c-hamburger:hover{
  opacity: .6;
}

.c-hamburger__line{
  height: 2px;
  width: 24px;
  background: var(--color-dark);
  display: block;
  margin-inline: auto;
}

/* ===== SP menu ===== */
.sp-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
.c-menuClose{
  position: absolute;
  top: 18px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.c-menuClose:hover{
  opacity: .6;
}
.c-menuClose__line{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: var(--color-dark);
  display: block;
}
.c-menuClose__line:first-child{
  transform: translate(-50%, -50%) rotate(45deg);
}
.c-menuClose__line:last-child{
  transform: translate(-50%, -50%) rotate(-45deg);
}
.sp-menu__list{
  padding: 70px 20px 20px;
  display: grid;
  gap: 30px;
}
.sp-menu__link{
  display: block;
  padding: 12px 8px;
  text-decoration: none;
  color: var(--color-dark);
  font-weight: var(--fw-bold);
}
.sp-menu__link:hover{
  opacity: .6;
}
.sp-menu__item--cta{
  margin-top: 8px;
}

/* hidden state (off-canvas) */
.sp-menu[hidden]{
  display: block;
  visibility: hidden;
  pointer-events: none;
}

/* open state */
.sp-menu:not([hidden]){
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/* menu panel */
.sp-menu__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform .3s ease;
}
 
.sp-menu:not([hidden]) .sp-menu__panel{
  transform: translateX(0);
}

@media (max-width:899px){
  .sp-menu__panel{
    width: 50vw;
  }
}
@media (max-width:700px){
  .sp-menu__panel{
    width: 70vw;
  }
}
@media (max-width:499px){
  .sp-menu__panel{
    width: 85vw;
  }
}


/* ===== PC表示に切り替え ===== */
@media (min-width: 900px){
  .g-nav{
  display: block;
}
  .site-header__cta{
  display: block;
}
  .c-hamburger{
  display: none;
}
  .sp-menu{
  display: none;
}
}


/* ===== Footer ===== */
.site-footer{
  background: #12983A;
  color: #fff;
  padding: 30px 0 20px;
}

.site-footer__inner{
  display: grid;
  gap: 30px;
}

.site-footer__top{
  display: flex;
  flex-direction: row;
  gap: 80px;
  align-items: flex-start;
  text-align: center;
  width:100%;
  max-width:1000px;
  margin:0 auto;
}

.site-footer__logoLink{
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* footer nav */
.f-nav__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 20px;
}
p.site-footer__logo {
    margin-top: 0px;
}

@media (max-width: 767px){
  .f-nav__list{
    max-width: 320px;
    margin: 0 auto;
    gap: 12px 0;
    justify-content: center;
  }
  .f-nav__item{
    width: 100%;
    text-align: center;
  }
  .site-footer__top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
    align-items: center;
}
}

@media (max-width: 499px){
.site-footer {
    padding: 20px 0 20px;
}
}
/* copyright */
.site-footer__copyright{
  font-size: 12px;
  font-weight: var(--fw-medium);
  text-align: center;
}




/* =========================
   COMMON BASE
========================= */
:root{
  --c-green:#12983A;
  --c-green2:#22BA4F;
  --c-yellow:#EDF3A2;
  --c-orange:#FF9500;
  --c-black:#111;
  --c-gray:#f4f4f4;
  --radius:20px;
  --container:1200px;
}

*{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  color:var(--c-black);
  font-family:"YakuHanJPs", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.6;
}
img{
  max-width:100%;
  height:auto;
  vertical-align:middle;
}
a{
  color:inherit;
  text-decoration:none;
}

/* layout */
.l-container{
  width:min(100% - 40px, var(--container));
  margin-inline:auto;
}


.u-text-green{
  color:var(--c-green);
}
.u-br-sp{
  display:none;
}

.u-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;
}

/* =========================
   SECTION HEAD
========================= */
.c-sectionHead{
  text-align:center;
  margin:0 0 40px;
}
.c-sectionHead__eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    font-size: 25px;
    font-weight: 900;
    color: var(--c-green);
    letter-spacing: .06em;
}
.c-sectionHead__title{
  margin:0;
  font-size:32px;
  font-weight:900;
  line-height:1.4;
}

@media (max-width:499px){
  .c-sectionHead__title{
  font-size:24px;
}
.c-sectionHead__eyebrow {
    font-size: 20px;
}
.c-sectionHead{
  margin:0 0 20px;
}
}

/* =========================
   HEADER (GLOBAL)
========================= */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
body{
  padding-top: 64px;
}
.site-header__inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.site-header__logo{
  font-weight:900;
  font-size:20px;
  white-space:nowrap;
}
.site-header__toggle{
  display:inline-flex;
  width:44px;height:44px;
  border:0;
  background:transparent;
  align-items:center;
  justify-content:center;
}
.site-header__toggleLines{
  width:22px;height:2px;
  background:#111;
  position:relative;
}
.site-header__toggleLines::before,
.site-header__toggleLines::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;height:2px;
  background:#111;
}
.site-header__toggleLines::before{
  top:-7px;
}
.site-header__toggleLines::after{
  top:7px;
}

.site-header__nav{
  display:none;
  position:absolute;
  left:0; right:0;
  top:74px;
  background:#fff;
  padding:16px 20px 20px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header.is-open .site-header__nav{
  display:block;
}

.site-header__navList{
  list-style:none;
  padding:0;margin:0 0 14px;
  display:grid;
  gap:10px;
}
.site-header__navLink{
  display:block;
  padding:10px 0;
  font-weight:700;
}
.site-header__cta{
  width:100%;
}

a.c-btn--cta.c-btn.c-btn--dark.c-btn--lg {
    width: 424px;
    min-height: 86px;
    padding: 0 60px 0 50px;
    border-radius: 212px;
    font-size: 22px;
}

@media (max-width:899px){
  a.c-btn--cta.c-btn.c-btn--dark.c-btn--lg {
    font-size: 18px;
    min-height: 76px;
  }
}

@media (max-width:499px){
  a.c-btn--cta.c-btn.c-btn--dark.c-btn--lg {
    max-width: 310px;
    min-height: 66px;
    width:100%;
    font-size: 16px;
    padding: 0 0px;
  }
}

.site-header__navGroup{
  display:flex;
  align-items:center;
  gap:32px;
}

@media (min-width:900px){
  .site-header__toggle{
  display:none;
}
  .site-header__nav{
    display:flex !important;
    position:static;
    padding:0;
    border:0;
    align-items:center;
    gap:24px;
  }
  .site-header__navList{
    display:flex;
    gap:32px;
    margin:0;
  }
  .site-header__cta{
  width:auto;
}
}

/* =========================
   FOOTER (GLOBAL)
.site-footer{
  background:var(--c-green);
  color:#fff;
  padding:34px 0 20px;
}
.site-footer__inner{
  display:grid;
  gap:18px;
  justify-items:center;
  text-align:center;
}
.site-footer__logo{
  font-weight:900;
  font-size:22px;
}
.site-footer__nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px 26px;
  justify-content:center;
  font-weight:700;
}
.site-footer__copy{
  margin:0;
  font-size:12px;
  opacity:.9;
}

  ========================= */

/* PCだけ表示 */
.pc-only{
  display:block;
}

/* スマホだけ非表示 */
.sp-only{
  display:none;
}

/* スマホサイズ */
@media (max-width: 768px){

  /* PCだけ非表示 */
  .pc-only{
    display:none;
  }

  /* スマホだけ表示 */
  .sp-only{
    display:block;
  }
}
/* 文字/インライン用 */
.pc-only-inline{ display:inline; }
.sp-only-inline{ display:none; }

@media (max-width:899px){
  .pc-only-inline{ display:none; }
  .sp-only-inline{ display:inline; }
}