@charset "uft-8";

:root{
    --main-gradient: ;
    --main-text:  #333;
    --submain-color: #7E7E7E;
    --sub-color: #E1E3E5;

  }
  
  html{
    font-size: 62.5%;
  }
  
  body{
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    line-height: 1;
    background-color: #FFF;
    margin: 0 auto
  }

  .btn {
    transition: all 0.3s ease;
  }
  
  .btn:hover {
    transform: translateY(-3px);
  }



.header {
  width: 100%;
}

.header_inner{
    padding-top: 40px ;

}

.header_flex{
    max-width: 1320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* 固定に変更 */
    margin: 0 auto;
    padding: 24px 40px 24px 90px; 
    border-radius: 100px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.header_logo{
    width: 224px;
    height: 52px;
}

.right{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

.header_list{
    display: flex;
    justify-content: center;
    gap: 48px;
    padding-top: 15px;
}

.header_item{
    font-size: 1.4rem;
    font-weight: 500;
    color: #333;
    padding-bottom: 9px;
    border-bottom: 1px solid #81FF39;
}

.telephone{
    font-size: 3rem;
    font-weight: 700;
    color: #333;
}

.reception{
    font-size: 1.4rem;
    font-weight: 400;
    color: #333;
    margin-top: 4px;
}

.header_cta{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 32px;
    background-color: #81FF39;
    font-size: 1.6rem;
    font-weight: 500;
    border-radius: 100px;
    color: #333;
}

.mail_logo{
    margin-right: 8px;
}

/* ===== ハンバーガー（PCは非表示） ===== */
.hamburger{
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
  }
  
  .hamburger span{
    display: block;
    width: 24px;
    height: 2px;
    background: #000;
    margin: 5px 0;
    transition: all 0.3s ease;
  }
  
  /* ===== 1200px ===== */
  @media (max-width: 1200px){

    .header_flex{
        max-width: 1320px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative; /* 固定に変更 */
        margin: 0 auto;
        padding: 18px 5%;
        border-radius: 100px;
        background-color: transparent;
        box-shadow: none;
    }
  
    /* ヘッダー枠を少し詰める（任意） */
  
    .hamburger{
      display: block;
      position: fixed;
      top: 60px;
      right: 3%;
      padding: 10px;
    }
  
    /* 右側の通常並びはSPでは“全画面メニュー”になる */
    .right{
      position: fixed;
      top: 0;
      left: 0;
  
      width: 100%;
      height: 100vh;
  
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 42px;
  
      background: rgba(255,255,255,.98);
      backdrop-filter: blur(10px);
  
      padding: 32px 24px;
      z-index: 1000;
  
      /* 初期：隠す */
      opacity: 0;
      visibility: hidden;
      transform: translateX(100%);
      transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
    }
  
    /* 開いた状態 */
    .right.is-open{
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }
  
    /* 中身（遅延で入れる：TGTの li アニメと同じ体験） */
    .right > *{
      opacity: 0;
      transform: translateX(80px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
  
    .right.is-open > *{
      opacity: 1;
      transform: translateX(0);
    }
  
    /* 遅延 */
    .right.is-open .header_nav{ transition-delay: 0.2s; }
    .right.is-open .numbox{     transition-delay: 0.4s; }
    .right.is-open .header_cta{ transition-delay: 0.6s; }
  
    /* ナビを縦並びに */
    .header_list{
      flex-direction: column;
      align-items: center;
      gap: 26px;
      padding-top: 0;
    }
  
    .header_item{
      font-size: 2.4rem;
      border-bottom: 1px solid #81FF39;
      padding-bottom: 6px;
    }
  
    /* 電話はSPで大きすぎるなら調整 */
    .telephone{
      font-size: 2.6rem;
      text-align: center;
    }
  
    .reception{
      text-align: center;
    }
  
    /* CTAは幅広で押しやすく */
    .header_cta{
      width: min(360px, 92vw);
      justify-content: center;
    }
  }
  
  /* ハンバーガーを×に（TGTと同じ） */
  .hamburger.is-open span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.is-open span:nth-child(2){
    opacity: 0;
  }
  .hamburger.is-open span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }
  
  @media (max-width: 580px){
    .hamburger{ top: 24px; }
  }


  
  .num_din{
    font-family: "ff-din-paneuropean", "noto sans jp", sans-serif;
  }
  
  img{
    max-width: 100%;
    height: auto;
  }

  .bar__box{
    position: relative;
    overflow: hidden;
    width: 3px;
    height: 40px;
    margin: 40px auto ;
  }
  
  .bar{
    position: absolute;
    top: -100%;  /* 開始は上の外に隠れる位置 */
    left: 0;
    width: 1px;
    height: 100%;
    background-color: #6DFF3B;
    animation: down 1.5s linear infinite ;
  }
  
  @keyframes down{
    0%{
      top:-100%;
    }
    100%{
      top:100%;
    }
  }




.subtitle{
  font-size: 2.4rem;
  color: #333;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-family: "ff-din-paneuropean" ;
}

.title{
  font-size: 4.4rem;
  color: #333;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 7rem;
}

.alliance-title{
  font-size: 5.6rem;
  font-family: "Noto Sans JP";
  font-weight: 700;
  color: var(--main-text);
  text-align: center;
  margin-bottom: 24px;
}

.alliance-sub_title{
  font-size: 2.4rem;
  font-family: "Noto Sans JP";
  font-weight: 500;
  color: var(--main-text);
  text-align: center;
  margin-bottom: 24px;
}


.header {
width: 100%;
}

.header_inner{
  padding-top: 40px ;

}

.header_flex{
  max-width: 1320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* 固定に変更 */
  margin: 0 auto;
  padding: 24px 40px 24px 90px; 
  border-radius: 100px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.header_logo{
  width: 224px;
  height: 52px;
}

.right{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 70px;
}

.header_list{
  display: flex;
  justify-content: center;
  gap: 48px;
  padding-top: 15px;
}

.header_item{
  font-size: 1.4rem;
  font-weight: 500;
  color: #333;
  padding-bottom: 9px;
  border-bottom: 1px solid #81FF39;
}

.telephone{
  font-size: 3rem;
  font-weight: 700;
  color: #333;
}

.reception{
  font-size: 1.4rem;
  font-weight: 400;
  color: #333;
  margin-top: 4px;
}

.header_cta{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 32px;
  background-color: #81FF39;
  font-size: 1.6rem;
  font-weight: 500;
  border-radius: 100px;
  color: #333;
}

.mail_logo{
  margin-right: 8px;
}

/* ===== ハンバーガー（PCは非表示） ===== */
.hamburger{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span{
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* ===== 1200px ===== */

@media (max-width: 1200px){

 

  .header_flex{
      max-width: 1320px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative; /* 固定に変更 */
      margin: 0 auto;
      padding: 18px 5%;
      border-radius: 100px;
      background-color: transparent;
      box-shadow: none;
  }

  /* ヘッダー枠を少し詰める（任意） */

  .hamburger{
    display: block;
    position: fixed;
    top: 60px;
    right: 3%;
    padding: 10px;
  }

  /* 右側の通常並びはSPでは“全画面メニュー”になる */
  .right{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 42px;

    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);

    padding: 32px 24px;
    z-index: 1000;

    /* 初期：隠す */
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
  }

  /* 開いた状態 */
  .right.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* 中身（遅延で入れる：TGTの li アニメと同じ体験） */
  .right > *{
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .right.is-open > *{
    opacity: 1;
    transform: translateX(0);
  }

  /* 遅延 */
  .right.is-open .header_nav{ transition-delay: 0.2s; }
  .right.is-open .numbox{     transition-delay: 0.4s; }
  .right.is-open .header_cta{ transition-delay: 0.6s; }

  /* ナビを縦並びに */
  .header_list{
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding-top: 0;
  }

  .header_item{
    font-size: 2.4rem;
    border-bottom: 1px solid #81FF39;
    padding-bottom: 6px;
  }

  /* 電話はSPで大きすぎるなら調整 */
  .telephone{
    font-size: 2.6rem;
    text-align: center;
  }

  .reception{
    text-align: center;
  }

  /* CTAは幅広で押しやすく */
  .header_cta{
    width: min(360px, 92vw);
    justify-content: center;
  }
}

/* ハンバーガーを×に（TGTと同じ） */
.hamburger.is-open span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2){
  opacity: 0;
}
.hamburger.is-open span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 580px){
  .hamburger{ top: 24px; }
}



  /* FOOTER */
  .footer_inner{
    margin-top: 164px;
  }

  .footer_box{
    text-align: center;
  }

  .privacy{
    text-align: center;
    font-size: 2rem;
    letter-spacing: 1.1px;
    font-weight: 700;
  }

  .footer_copyright{
    margin: 40px 0 24px;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 1.1px;
    font-weight: 700;
  }



  .home {
    display: block;
    padding: 0 27px 14px;
    border-bottom: #E1E3E5 1px solid;
    font-size: 1.6rem;
    font-weight: 600;
    width: 183px;
    margin: 120px auto 0px;
    text-align: center;
    color: #333;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .home::after {
    content: "";
    display: inline-block;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    width: 10px;
    height: 15px;
    background-color: #333;
    margin-left: 16px;
    margin-bottom: -2px;
  }
  
  /* ホバー時に下に沈む */
  .home:hover {
    transform: translateY(4px);
  }


  @media (max-width: 580px){
    .footer_inner{
      margin-top: 80px;
    }

    .privacy{
      text-align: center;
      font-size: 1.6rem;
    }

    .home {
      display: block;
      padding: 0 27px 14px;
      border-bottom: #E1E3E5 1px solid;
      font-size: 1.6rem;
      font-weight: 600;
      width: 183px;
      margin: 52px auto 0px;
      text-align: center;
      color: #333;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
  }

    /* ===============================
  OFFER
================================ */

.offer{
  padding: 120px 16px;
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("../img/offer_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 120px;
}

.offer__inner{
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
}

/* ===== タイトル周り ===== */
.offer__titleWrap{
  position: relative;
  display: inline-block;
}

/* 緑のバー */
.offer__bar{
  position: absolute;
  left: -60px;
  top: -80px;
  width: 60px;
  height: auto;
}

/* タイトルSVG */
.offer__title{
  width: min(720px, 100%);
  height: auto;
  display: block;
}

/* ===== サブコピー ===== */
.offer__lead{
  margin-top: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  color: #fff;
}

/* ===== 線 ===== */
.offer__line{
  width: min(680px, 90%);
  height: 2px;
  background: #6DFF3B;
  margin: 28px auto;
}

/* ===== 電話 ===== */
.offer__time{
  margin: 0 0 8px;
  color: #fff;
  font-weight: 600;
  font-size: 1.5rem;
}

.offer__number{
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
}

/* ===== CTAボタン ===== */
.offer__cta{
  margin-top: 48px;
}

.offer__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: min(720px, 100%);
  height: 92px;

  border-radius: 999px;
  background: #fff;
  border: 3px solid #2E8B0F;

  font-size: 28px;
  font-weight: 800;
  color: #2E8B0F;
  text-decoration: none;

  transition: transform .2s ease, box-shadow .2s ease;
}

.offer__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* ===== SP ===== */
/* offer */
@media (max-width: 768px){

  .about-title_box {
    border-left: 2px solid #81FF39;
}

.subtitle{
    font-size: 1.4rem;
    padding-bottom: 4px;
}

.title {
    font-size: 3.7rem;
    color: #333;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 5rem;
}

  .offer__title {
      width: 320px;
  }
  
  .offer__bar {
display: none;
  }
  
  .offer__lead {
      font-size: 1.6rem;
      font-weight: 400;
  }

}

@media (max-width: 520px){
  .offer{
    padding: 80px 16px;
  }

  .offer__bar{
    left: -36px;
    width: 40px;
  }

  .offer__lead{
    font-size: 15px;
  }

  .offer__number{
    font-size: 28px;
  }

  .offer__btn{
    height: 72px;
    font-size: 20px;
  }
}


/* ====== FOOTER ====== */
.footer{
  background: #2f7f00;          /* 緑 */
  color: #fff;
  padding: 60px 16px 40px;
  margin-top: 140px;
}

.footer__inner{
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
}

/* 上段 */
.footer__top{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}

.footer__logo{
  width:224px;
  height: auto;
  display: block;
}

/* 電話 */
.footer__tel{
  text-align: left;
}

.footer__telNum{
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.footer__telTime{
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 600;
  opacity: .95;
}

/* ナビ */
.footer__nav{
  margin-top: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.footer__link{
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 10px 6px;
  border-bottom: 2px solid rgba(255,255,255,.55);
}

.footer__link:hover{
  border-bottom-color: #fff;
}

/* お問い合わせボタン */
.footer__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;

  height: 44px;
  padding: 0 34px;
  border-radius: 999px;

  background: #fff;
  color: #2f7f00;
  text-decoration: none;
  font-weight: 500;
}

.footer__btn:hover{
  transform: translateY(-1px);
}

/* コピーライト */
.footer__copy{
  display: block;
  margin-top: 42px;
  font-size: 14px;
  opacity: .95;
}

/* 角丸（画像みたいに上だけ丸く） */
.footer{
  border-top-left-radius: 120px;
  border-top-right-radius: 120px;
}

/* SP */
@media (max-width: 600px){
  .footer{
    border-top-left-radius: 64px;
    border-top-right-radius: 64px;
    padding: 56px 16px 24px;
  }

  .footer__top{
    gap: 42px;
  }

  .footer__tel{
    text-align: center;
  }

  .footer__nav{
    gap: 22px;
  }
}

@media (max-width: 500px){

  .header_inner {
      padding-top: 0px;
  }

  .header_logo {
      width: 164px;
      height: 52px;
      margin-top: 10px;
  }

  .footer__telNum {
    font-size: 2.4rem;
    font-weight: 500;
}

.footer__telTime {
    font-size: 1.4rem;
    font-weight: 500;
}

.footer__copy {
    font-size: 1rem;
}
}