/*---------------------------------
  CSS初期化と全体ベース
----------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

.sp {
    display: none;
  }
  .pc {
    display: block;
  }
  .tab{
    display: none;
  }

  @media screen and (max-width: 1200px) {
    .tab{
      display: block;
    }
    .pc {
      display: none;
    }
    .sp{
      display: block;
    }
  }
  
  @media screen and (max-width: 768px) {
    .sp {
      display: block;
    }
    .pc {
      display: none;
    }
    .tab{
      display: none;
    }
  }


.sp2 {
  display: none;
}
.pc2 {
  display: block;
}
@media screen and (max-width: 768px) {
    .sp2 {
        display: block;
      }
    .pc2 {
        display: none;
      }
}


p, h2{
    margin: 0;
    padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.7;
  color: #333;
  background-color: #fff;
}

/*---------------------------------
  基本構造
----------------------------------*/
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/*---------------------------------
  レイアウト・中央寄せ
----------------------------------*/
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

/*---------------------------------
  カラー変数（CSSカスタムプロパティ）
----------------------------------*/
:root {
  --main-color: #eb6e8b;
  --accent-color: #4bb3d3;
  --font-color: #333;
  --bg-light: #f8f8f8;
  --bg-accent: #e7f6f9;
}

/* ヘッダーセクション */
.inner2 {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}
.inner3{
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}
/* ヘッダーセクション */
.inner1{
    max-width: 1300px;
    width: 100%;
    padding: 0 40px;
    margin: 0 auto;
  }
  .inner3{
      max-width: 1000px;
      width: 100%;
      padding: 0 20px;
      margin: 0 auto;
  }
  header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
  }
  .header_section {
      display: flex;
      justify-content: space-between;
      gap: clamp(8px, 2vw, 20px); 
      align-items: center;
      height: 80px;
      padding: 0 10px;
  }
  .header_left{
    max-width: 250px;
  }
  .header_right{
      display: flex;
      align-items: center;
      background: rgba(243, 245, 248, 0.8);
      box-shadow:
        inset 1px 1px 2px rgba(255,255,255,1),
        0 0 8px rgb(190, 189, 189);
      border-radius: 50px;
      padding: 5px 20px 5px 35px;
      margin-top: 20px;
      max-height: 66px;
  }
  @media screen and (max-width: 1200px) {
    .header_right{
      background-color: transparent;
      box-shadow: none;
      margin-top: 0;
      padding: 0;
    }
  }
  .tel_icon{
      max-width: 250px;
  }
  .contact_icon{
      max-width: 250px;
      margin-left: 20px;
      background-color: rgba(0, 81, 127, 0.9);
      box-shadow: 
      inset 1px 1px 1.5px rgba(255,255,255,1);
      border-radius: 50px;
      color: #fff;
      padding: 15px 30px;
  }
  .contact_icon2{
    max-width: 250px;
    margin-right: 20px;
    background-color: rgba(0, 81, 127, 0.9);
    box-shadow: 
    inset 1px 1px 1.5px rgba(255,255,255,1);
    border-radius: 50px;
    color: #fff;
    padding: 15px 30px;
  }
  .header_section img {
      display: block;
      max-width: 300px;
      width: 100%;
  }
  
  /* ▼ スマホ用ナビメニュー（アニメーション付き） */
  .sp_nav {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, opacity 0.3s ease;
      background-color: #fff;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 100%;
      right: 0;
      width: 100%;
      z-index: 99;
      text-align: center;
    }
    
    /* メニューが開いたとき */
    .sp_nav.active {
      max-height: 500px; /* ← メニューの高さに応じて調整 */
      opacity: 1;
    }
    
    /* ナビリスト全体 */
    .sp_nav ul {
      list-style: none;
      margin: 0;
      padding: 20px 0;
    }
    
    /* リストアイテム */
    .sp_nav li {
      border-bottom: 1px solid #eee;
    }
    
    /* リンクのスタイル */
    .sp_nav li a {
      display: block;
      padding: 16px;
      color: #333;
      font-size: 18px;
      text-decoration: none;
      font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
      transition: background-color 0.2s ease;
    }
    
    .sp_nav li a:hover {
      background-color: #f0f0f0;
    }
  
    .header_menu_list ul{
      display: flex;
      justify-content: space-between;
      gap: 40px;
      margin-block-start: 0;
      margin-block-end: 0;
      padding-inline-start: 0;
      padding: 15px 0;
    }
    .header_menu_list ul li{
      list-style: none;
      color: #333;
      font-size: 16px;
      font-weight: 450;
      font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    }
  
  
  /* 1) 行高を変数で固定（フォント差分対策） */
  .header_menu_list a.roll {
      --lh: 1.2;                      /* 行高(お好みで 1〜1.4) */
      position: relative;
      display: inline-block;
      overflow: hidden;               /* はみ出しを隠す：必須 */
      line-height: var(--lh);
      height: calc(var(--lh) * 1em);  /* 1行ぶんだけ見せる：必須 */
      text-decoration: none;
      color: inherit;
      padding: 0;                     /* ここにpaddingがあるとズレやすい */
    }
    
    /* 2) 2行を縦積み */
    .header_menu_list .roll__inner {
      display: inline-flex;
      flex-direction: column;
      transform: translateY(0);       /* 初期は上段を表示 */
      transition: transform .35s cubic-bezier(.2,.6,.2,1);
      will-change: transform;
    }
    
    /* 3) 各行を“1行＝固定高”に揃える */
    .header_menu_list .roll__text {
      display: block;
      height: calc(var(--lh) * 1em);
      line-height: var(--lh);
    }
    
    /* 4) ホバーでちょうど1行ぶんだけ上へ */
    .header_menu_list a.roll:hover .roll__inner,
    .header_menu_list a.roll:focus-visible .roll__inner {
      transform: translateY(calc(-1 * var(--lh) * 1em));
    }
    
    /* 5) キーボード操作の見やすさ（任意） */
    .header_menu_list a.roll:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }
  
  
  /* SP表示時（768px以下）にのみ表示されるハンバーガーメニュー */
  @media screen and (max-width: 768px) {
      .header_left {
        max-width: 200px;
      }
    
      .header_section {
        height: 70px;
      }
        }
    
  
  /* ハンバーガー */
  .hamburger{
    width: 50px; height: 50px;
    align-items:center; justify-content:center;
    border: 0; border-radius: 9999px; cursor: pointer;
    background: rgba(243, 245, 248, 0.9);
    box-shadow: 
    inset 2px 2px 2px rgba(255,255,255,1);
    box-shadow: inset 0 0 0 1px rgba(50,78,147,.08);
    transition: background .2s ease;
    position: relative;
  }
  .hamburger:hover{ background:#E9EEF6; }
  .hamburger:focus-visible{ outline: 2px solid #324E93; outline-offset: 2px; }
  
  .hamburger span{
    position: absolute; width: 18px; height: 2px; background:#324E93; transition: .25s;
    left: 33%;
    top: 48%;
  }
  .hamburger span:nth-child(1){ transform: translateY(-6px); }
  .hamburger span:nth-child(2){ opacity: 1; }
  .hamburger span:nth-child(3){ transform: translateY(6px); }
  
  /* 開いた状態のアニメ（×に変形） */
  .hamburger[aria-expanded="true"] span:nth-child(1){ transform: rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3){ transform: rotate(-45deg); }
    
  
  .tab_header_right{
    display: flex;
  }

  /* ボタンベース */
.btn-shine {
    color: #fff;
    position: relative;
    overflow: hidden; /* 光がはみ出さないように */
    transition: 0.3s;
  }
  
  /* hoverで少し暗く */
  .btn-shine:hover {
    background-color: rgba(0, 81, 127, 1);
  }
  
  /* 光の筋 */
  .btn-shine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(
      75deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    filter: blur(2px);
    pointer-events: none;
    opacity: 0;
  }
  
  /* hover時に走らせる */
  .btn-shine:hover::after {
    animation: shine-sweep 0.8s ease;
    opacity: 1;
  }
  
  @keyframes shine-sweep {
    0%   { left: -60%; }
    100% { left: 130%; }
  }



/* ヒーローセクション */
.mainvisual {
    width: 100%;
    background-image: url(../img/hv4_back.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.mv_inner{
    max-width: 1200px;
    width: 100%;
    padding: 150px 20px 0px;
    margin: 0 auto;
    display: flex;
    position: relative;
}
.mv_imgs{
    overflow: hidden;
    padding-top: 80px;
}

.plan_logo{
    max-width: 750px;
    width: 100%;
    display: inline-block;
    margin-left: -10%;
    margin-top: 15%;
}

.feature_box{
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 5%;
    right: 5%;
}
.feature_box img{
    max-width: 180px;
    width: 100%;
    margin-left: 20px;
}



@media screen and (max-width: 768px){
    .main_img{
        width:100%;
    }
    .mv_inner{
        display: block;
        padding-top: 80px;
    }
    .mainvisual {
        background-image: url(../img/hv4_back_sp1.png);

    }
    .mv_contents.sp{
        text-align: center;
        margin-top: -30px;
    }
    .plan_logo{
        margin: 0 auto;
        z-index: 1;
    }
    .feature_box{
        position:static;
        padding-bottom: 40px;
        gap: 10px;
    }
    .feature_box img{
        width: 33%;
        margin-left: 0;
    }
    .mv_imgs{
        padding-top: 40px;
    }
    .feature_box{
        justify-content: center;
        padding-top: 30px;
    }
    .mv_inner{
        text-align: center;
    }
    .mv_txt{
        font-size: 23px;
        margin: 0 auto;
        padding-top: 10px;
        font-family: "Kosugi Maru", sans-serif;
        font-weight: 600;
        text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
    }
}


/* お悩みセクション */
.worries{
    background-image: url('../img/worries_back.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 0; /* 🔽 背景は一番奥に */
    margin-top: 100px;
    position:relative;
}

.worries_icon{
    width: 120px;
    position: absolute;
    top: -60px; /* 飛び出す距離（必要に応じて調整） */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* 前面に出す */
}
.worries_contents{
    text-align: center;
    font-family: "Kosugi Maru", sans-serif;
    font-size: 40px;
    color: #fff;
    padding-top: 60px;
}
.worries_flex{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    gap: 80px;
}
.worries_flex img {
    width: 100%;
    max-width: 450px;
    height: auto;
    margin-bottom: -47px;
}
.worries_list{
    text-align: left;
    font-size: 25px;
    margin-top: 10px;
}
.worries_list p{
    position: relative;
}
.worries_list p::before{
    content: "";
    position: absolute;
    background: url(./img/check.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    top: 10px;
    left: -50px;
}
.worries::after {
    content: "";
    position: absolute;
    bottom: -19px;      /* 三角形の高さぶん */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #6dc7d5; /* 三角形の色＝背景色 */
    z-index: 1;
}

@media screen and (max-width: 768px){
    .worries_flex{
        display: block;
        text-align: center;
        padding-bottom: 60px;
    }
    .worries_flex img{
        margin: 0 auto;
    }
    .worries_list{
        margin: 0 auto;
        width: fit-content;
        padding-left: 50px;
        font-size: 20px;
    }
    .worries_list p::before {
        top: 6px;
    }
    .worries{
        background-image: url('../img/worries_back_sp.png');
        margin-top: 70px;
    }
    .worries_icon{
        width: 100px;
        top: -50px;
    }
    .worries_contents{
        font-size: 25px;
    }
}


/* プラン紹介 */
.plan_section{
    background-color: #E5F6F7;
    margin-top: -22px;
}
.plan_header{
    text-align: center;
    padding-top: 60px;
}
.plan_header p {
    font-size: 40px;
    font-family: "Kosugi Maru", sans-serif;
}
.hedaer_big{
    font-size: 50px;
    color: #D94545;
}
.plan_contents{
    display: flex;
    align-items: flex-start
    justify-content: center;
    margin-top: 100px;
    font-family: "Kosugi Maru", sans-serif;
}
.plan_txt_box{
    background-color: #fff;
    border-radius: 8px;
    max-width: 500px;
    padding: 20px 30px;
    box-shadow: 0 4px 8px gray;
    margin-bottom: 50px;
}
.plan_txt_header{
    text-align: center;
}
.plan_txt_header{
    font-size: 24px;
    border-bottom: 3px dotted rgb(107, 196, 212);
    display: inline-block;
}
.plan_txt_wrap{
    text-align: center;
}
.plan_txt{
    font-size: 18px;
    line-height: 1.8;
}
.text_big{
    font-size: 22px;
    color: #3075B7;
}
.plan_contents img{
    width: 50%;
    height: auto;
    flex-shrink: 0;
}

@media screen and (max-width: 768px){
    .plan_contents{
        display: block;
        margin-top: 50px;
    }
    .plan_contents img{
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
    }
    .plan_txt_box{
        margin: 0 auto;
    }
    .plan_header p {
        font-size: 21px;
    }
    .hedaer_big{
        font-size: 35px;
    }
    .plan_txt_header{
        font-size: 22px;
    }
    .plan_section{
        padding-bottom: 80px;
    }
}


/* 選ばれる理由セクション */
.choose_header{
    text-align: center;
    font-family: "Kosugi Maru", sans-serif;
    margin-top: 100px;
}
.choose_header p{
    font-size: 40px;
}
.text_blue{
    color: #0b8ab5;
}
.count_big{
    font-size: 60px;
}
.reason_box_left{
    display: flex;
    position: relative;
    width: 80%;
    background-color: #E5F6F7;
    box-sizing: border-box;
    border-image-slice: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: "Kosugi Maru", sans-serif;
    margin-top: 100px;
}
.reason_box_left img{
    max-width: 250px;
    background-color: #fff;
    margin: 20px;
    height: 300px;
}
.reason_left_txt{
    padding: 30px 30px 15px 15px;
    color: #009AA2;
    font-size: 22px;
}
.reason_box_right{
    display: flex;
    position: relative;
    width: 80%;
    background-color: #E5F6F7;
    box-sizing: border-box;
    border-image-slice: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: "Kosugi Maru", sans-serif;
    margin-top: 100px;
    margin-left: auto;
}
.reason_box_right img{
    max-width: 250px;
    background-color: #fff;
    margin: 20px;
    height: 300px;
}
.reason_right_txt{
    color: #009AA2;
    font-size: 22px;
    padding: 30px 15px 15px 30px;
}
.reason_left_txt p{
    font-size: 20px;
}
.reason_right_txt p{
    font-size: 19px;
}
.kome_txt{
    font-size: 12px !important;
}
.box_number_left {
    position: absolute;
    bottom: -100px;
    right: 50px;
    font-size: 100px;
    font-family: 'Pinyon Script', cursive;
    color: #000;
}
.box_number_right {
    position: absolute;
    bottom: -100px;
    left: 50px;
    font-size: 100px;
    font-family: 'Pinyon Script', cursive;
    color: #000;
}
.choose_section{
    margin-bottom: 200px;
}
.reason_header{
    margin: 0 auto;
}

@media screen and (max-width: 768px){
    .reason_box_left{
        display: block;
        padding-top: 20px;
        margin: 0 auto;
        width: 100%;
        margin-bottom: 100px;
    }
    .reason_box_left img{
        margin: 0 auto;
    }
    .reason_box_right{
        display: block;
        padding-top: 20px;
        margin: 0 auto;
        width: 100%;
        margin-bottom: 100px;
    }
    .reason_box_right img{
        margin: 0 auto;
    }
    .reason_header{
        text-align: center;
        font-size: 25px;
    }
    .reason_left_txt {
        padding: 30px 30px 50px;
    }
    .reason_right_txt h2{
        padding: 0;
        margin: 0 auto;
    }
    .reason_right_txt{
        padding: 30px 30px 50px;
    }
    .box_number_right{
        bottom: -100px;
    }
    .box_number_left{
        bottom: -100px;
    }
    .choose_header{
        line-height: 1.3;
        margin-bottom: 60px;
        margin-top: 80px;
    }
    .choose_header p{
        font-size: 28px;
    }
    .count_big{
        font-size: 50px;
    }
}


/* コース説明 */
.couse{
    background-color:#E5F6F7;
    font-family: "Kosugi Maru", sans-serif;
}
.couse_title{
    text-align: center;
    padding-top: 60px;
    color: #666666;
}
.sub_title{
    padding: 0;
    margin: 0 auto;
}
.couse_title h2{
    margin: -20px auto 0;
    font-size: 40px;
}
.couse_link{
    text-align: center;
}
.couse_link a{
    display: inline-block;
    background-color: #F02E57;
    color: #fff;
    padding: 15px 0;
    width: 50%;
    border-radius: 50px;
    border: 2px solid #F02E57;
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
    font-size: 20px;
    margin-bottom: 120px;
}
.couse_link a:hover{
    background: #fff;
    color: #F02E57;
}
.couse img {
    padding-top: 60px;
    padding-bottom: 100px;
}

@media screen and (max-width: 768px){
    .couse_link a{
        width: 100%;
    }
    .couse img{
        padding-top: 0;
        padding-bottom: 40px;
    }
    .couse_title h2{
        padding-bottom: 50px;
        font-size: 36px;
    }
    .couse_link a{
        margin-top: 40px;
    }
}



/* ご利用の流れ */
.flow{
    background-image: url(../img/worries_back.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 100px;
    margin-top: 100px;
}
.flow_top{
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-bottom: 100px;
}
.flow_bottom{
    display: flex;
    justify-content: center;
    gap: 100px;
}
.flow_one img {
    max-width: 300px;
    margin: 0 auto;
    z-index: 0;

}
.flow_one{
    text-align: center;
    position: relative;
}
.flow_txt{
    font-size: 28px;
}
.flow_number{
    font-size: 80px;
    position: absolute;
    top: -150px;
    left: 35%;
}
.flow_contents{
    margin-top: 140px;
}
.sub_flow{
    margin: 0 auto;
    padding-top: 60px;
    opacity: 0.7;
}
.worries_contents h2{
    margin: -10px auto 0;
}

@media screen and (max-width: 768px){
    .flow{
        background-image: url(../img/worries_back_sp.png);
    }
    .flow_top{
        display: block;
        margin-bottom: 0;
    }
    .flow_bottom{
        display: block;
    }
    .flow_number{
        position: static;
        margin: 0 auto;
        font-size: 60px;
    }
    .flow_head{
        align-items: center;
    }
    .flow_txt{
        margin: 0 auto;
        margin-top: -20px;
        margin-bottom: 20px;
    }
    .flow_one{
        margin-bottom: 40px;
    }
    .flow_contents{
        margin-top: 60px;
    }
    .sub_flow{
        padding-top: 20px;
    }
}


/*よくある質問*/
.faq_title{
    text-align: center;
    padding-bottom: 80px;
    padding-top: 60px;
}

.faq_item {
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    overflow: hidden;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fff;
}
.faq_title h2{
    font-size: 40px;
    color: #666666;
    margin: 0 auto;
}
.faq{
    background-color: #FFFBEF;
    font-family: "Kosugi Maru", sans-serif;
    padding-bottom: 100px;
}
.sub_faq{
    margin: 0 auto;
    font-size: 40px;
    color: #666666;
    opacity: 0.7;
}
  
  /* 質問エリア */
  .faq_question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 20px;
    cursor: pointer;
  }
  
  /* 左のQマーク */
  .faq_q_icon {
    font-weight: 600;
    color: #666;
    margin-right: 10px;
    font-size: 40px;
    font-family: "Kosugi Maru", sans-serif;
    padding-right: 40px;
  }
  
  /* 質問テキスト */
  .faq_q_text {
    flex: 1;
    font-size: 20px;
    color: #333;
    font-family: "Kosugi Maru", sans-serif;
  }
  
  /* プラスアイコン */
  .faq_toggle_icon {
    font-size: 20px;
    font-weight: bold;
    color: #888;
    transition: all 0.2s ease;
    display: inline-block;
    font-size: 24px;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
  }
 /* アコーディオンが開いた時に回転 */
.faq_item.open .faq_toggle_icon {
    transform: rotate(180deg); /* ＋ を時計回りに45度回転 → −風になる */
  }
  
  /* 回答（初期は非表示） */
  .faq_answer {
    background-color: #fafafa;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  /* 内側の余白をここで管理する */
.faq_answer_inner {
    padding: 16px 20px;
    background-color: #fafafa;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
  }

/* 開いたとき */
.faq_item.open .faq_answer {
    max-height: 300px; /* 内容に合わせて調整 */
  }


@media screen and (max-width: 768px){
    .faq_q_text{
        font-size: 16px;
    }
}


/* CTA */
.cta{
    text-align: center;
    margin: 80px auto 80px;
    font-family: "Kosugi Maru", sans-serif;
}
.cta h2{
    color: #666666;
    padding-bottom: 40px;
}
.cta a{
    display: inline-block;
    background-color: #F02E57;
    color: #fff;
    padding: 15px 0;
    width: 50%;
    border-radius: 50px;
    border: 2px solid #F02E57;
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
    font-size: 20px;
    margin-bottom: 120px;
}
.cta a:hover{
    background: #fff;
    color: #F02E57;
}
.cta img {
    padding-bottom: 70px;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px){
    .cta a{
        width: 100%;
        margin-bottom: 30px;
    }
    .cta h2{
        font-size:22px;
    }
}





/*会社情報*/
.company{
  background-color: #E5F6F7;
  padding: 40px 0 100px;
  color: #071847;
}
.company h2{
  padding-bottom: 20px;
  font-weight: normal;
  font-size: 18px;
}
.footer_logo{
  max-width: 250px;
  padding-bottom: 15px;
}
.company_info{
  line-height: 1.8;
}
.company_contents{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 60px;
}
/* 全体を2カラムに */
.bottom_menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 40px; /* 行間, 列間の余白 */
  max-width: 600px;
  padding: 40px 0;
}

/* 1つの項目（アイコン＋テキスト横並び） */
.menu_list {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* アイコン画像の調整 */
.menu_list img {
  width: 14px;
  height: auto;
}

/* リンク文字 */
.menu_list a {
  text-decoration: none;
  color: #1a2540;   /* ネイビー寄りの文字色 */
  font-size: 16px;
  line-height: 1.6;
  transition: color .3s;
}

.menu_list a:hover {
  color: #2256a4; /* ホバー時に青系に変化 */
  text-decoration: underline;
}

/* スマホ表示時は1カラムに */
@media (max-width: 640px) {
  .bottom_menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


footer{
  background-color: #85CFDD;
  text-align: center;
  color: #fff;
  padding: 10px 0;
}
.footer_tel{
  display: flex;
  vertical-align: middle;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 600;
  margin-top: 15px;
}
.footer_tel img{
  max-width: 25px;
}

@media screen and (max-width: 1070px){
  .company_contents{
    display: block;
  }
  .fotter_right{
    padding-top: 40px;
  }
  .business-hours {
    width: 100%;
  }
  .business-hours td {
    text-align: center;
    vertical-align: middle;
  }
  .note2{
    text-align: center;
  }
}
@media screen and (max-width: 768px){
  .note{
    font-size: 12px;
  }
  .info1{
    padding-top: 0;
  }
  .history h2{
    font-size: 24px;
    margin-top: -45px;
  }
  .history_txt{
    padding-top: 15px;
  }
  .mimiyori_text{
    margin-top: 0px;
  }
  footer{
    font-size: 12px;
  }
  .company{
    padding-bottom: 60px;
  }
  .menu_list a{
    font-size: 13px;
  }
}


/* --- フローティングボタン全体 --- */
.floating-btn{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(640px, 88vw);
  z-index: 9999;
  padding: 0;
}

/* 内側のフレックスボックス */
.ft-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 10px 18px;
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 7px;
  box-shadow: 0 1px 20px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.7);
}

/* 個別ボタン */
.ft-btn{
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  border-radius: 8px;
  justify-content: center;
}
.ft-btn img{
  max-width: 15px;
  margin-left: 10px;
}

.ft-ico{
  width: 22px;
  height: 22px;
}

.ft-label{
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(90deg, #1b79c7, #69b07a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 左側(MENU)の色味 */
.ft-menu .ft-ico{ color: #69b07a; }

/* 右側(お問合わせ)の矢印強調 */
.ft-contact .ft-ico{ color: #1b79c7; }

/* 区切り線 */
.ft-divider{
  width: 1px;
  align-self: stretch;
  margin: 0 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
}

/* タップ時 */
.ft-btn:active{ background: rgba(0,0,0,.05); }

/* ホバー時（PC確認用） */
@media (hover:hover){
  .ft-btn:hover{ background: rgba(0,0,0,.06); }
}

/* モーション制御 */
@media (prefers-reduced-motion: reduce){
  .floating-btn, .ft-flex, .ft-btn { transition: none !important; }
}

/* PCでは非表示 */
@media (min-width: 768px){
  .floating-btn.sp2{ display: none; }
}


/* ===== ハンバーガー（三本線→バツ） ===== */
.ft-burger{
  position: relative;
  width: 22px; height: 16px; display:inline-grid; gap:4px;
}
.ft-burger > span{
  display:block; height:2px; width:22px; background: currentColor;
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
  color:#69b07a;             /* 緑系（お好みで） */
}
.menu-open .ft-burger > span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-open .ft-burger > span:nth-child(2){ opacity:0; }
.menu-open .ft-burger > span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ===== ドロワー（全画面） ===== */
.ft-drawer{
  position: fixed; inset: 0; z-index: 10000;
  pointer-events: none;       /* 閉じている時は触れない */
}
.ft-drawer__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.3);
  opacity:0; transition: opacity .25s ease;
}
.ft-drawer__panel{
  position:absolute; left:0; right:0; bottom:0;
  height: min(100dvh, 100%);        /* iOS対策 */
  transform: translateY(100%);
  transition: transform .33s ease;
  background: linear-gradient(180deg, #5aa0cc, #6fb18b);
  display:flex; flex-direction:column;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  color:#fff;
}

/* ヘッダー */
.ft-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 20px 8px;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.ft-drawer__head h2{ margin:0; font-size: 20px; font-weight: 700; }
.ft-drawer__close{
  background: transparent; border:0; color:#fff; font-size: 28px; line-height:1; cursor:pointer;
}

/* ナビ */
.ft-drawer__nav{
  padding: 14px 20px;
  overflow:auto; flex: 1 1 auto;
}
.ft-drawer__nav a{
  display:block; padding: 16px 0; color:#fff; text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-size: 18px;
}
.ft-drawer__nav a:last-child{ border-bottom:none; }
.ft-lang{ padding-top: 12px; font-weight: 700; }

/* 下部アクションバー */
.ft-drawer__actionbar{
  margin: 14px auto 0; width: min(640px, 90vw);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content: space-between;
  padding: 12px 16px; gap: 10px; color:#1b79c7;
}
.ft-drawer__actionbar .ft-ico{ width:20px; height:20px; color:#1b79c7; }

.ft-ghost, .ft-primary{
  display:inline-flex; align-items:center; gap:8px;
  background: transparent; border:0; cursor:pointer; text-decoration:none;
  font-weight: 700; font-size: 16px;
}
.ft-ghost{ color:#69b07a; }
.ft-ico-close{ font-size:18px; }

/* ===== 開いた状態（body に .menu-open を付与） ===== */
.menu-open .ft-drawer{ pointer-events: auto; }
.menu-open .ft-drawer__backdrop{ opacity: 1; }
.menu-open .ft-drawer__panel{ transform: translateY(0); }

/* 背景スクロール抑止 */
.menu-open{ overflow: hidden; }

/* PCではドロワー非表示（必要なら） */
@media (min-width: 768px){
  .floating-btn.sp2{ display:none; }
  /* PCでメニューも使いたければこの非表示は外してください */
}

/* ===== ドロワーメニュー ===== */
.ft-drawer{
  position: fixed; inset: 0;
  z-index: 2000;
  pointer-events: none;
}
.ft-drawer__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity .3s;
}
.ft-drawer__panel{
  position:absolute; left:0; right:0; bottom:0;
  height: 100dvh;
  background: linear-gradient(180deg,#5aa0cc,#6fb18b);
  color:#fff;
  transform: translateY(100%);
  transition: transform .35s ease;
  display:flex; flex-direction:column;
}
.ft-drawer__head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 20px; border-bottom:1px solid rgba(255,255,255,.3);
}
.ft-drawer__head h2{ margin:0; font-size:20px; font-weight:700; }
.ft-drawer__close{
  background:transparent; border:0; color:#fff;
  font-size:28px; cursor:pointer;
}

.ft-drawer__nav{
  flex:1 1 auto; overflow:auto;
  padding: 20px;
}
.ft-drawer__nav a{
  display:block; padding:16px 0;
  color:#fff; font-size:18px; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.ft-drawer__nav a:last-child{ border-bottom:none; }

/* 開いたとき（bodyに.ft-openが付く） */
.ft-open .ft-drawer{ pointer-events:auto; }
.ft-open .ft-drawer__backdrop{ opacity:1; }
.ft-open .ft-drawer__panel{ transform:translateY(0); }

/* ハンバーガー三本線 → バツ */
.ft-open .ft-menu .ft-ico path{
  stroke:#fff;
}


/* 三本線アイコン */
.ft-burger {
  position: relative;
  width: 22px;
  height: 16px;
  display: inline-grid;
  gap: 4px;
}
.ft-burger span {
  display: block;
  height: 2px;
  width: 22px;
  background: #69b07a; /* 線の色 */
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* 開いたとき body に .ft-open が付く */
.ft-open .ft-burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.ft-open .ft-burger span:nth-child(2) {
  opacity: 0;
}
.ft-open .ft-burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* 念のため：メニュー表示中、ページ全体に触れさせない */
.ft-open #ftDrawer { pointer-events: auto; }

/* 初期状態：少し下&薄く */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
  }
  
  /* 表示状態 */
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* アニメ苦手な人への配慮 */
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      transition: none;
      opacity: 1;
      transform: none;
    }
  }


/* 共通 */
.compare_section {
    padding: clamp(32px, 5vw, 64px) 0;
    font-family: "Kosugi Maru", sans-serif;
}
.compare_title { 
  text-align: center; 
  font-size: clamp(20px, 3.4vw, 28px); 
  margin-bottom: 24px; 
  color: #666;
}

/* テーブル */
.compare_table.slim {
  margin: 0 auto;                /* 中央寄せ */
  width: 100%;
  max-width: 640px;              /* 細め */
  border-collapse: collapse;
  font-size: clamp(14px, 1.6vw, 16px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.compare_table thead th {
  font-weight: 700;
  padding: 14px 10px;
  text-align: center;
  border-bottom: 2px solid #e6eef2;
}
/* 項目ヘッダー */
.compare_table thead th:first-child {
  background: #f6fbfd;
  color: #333;
}
/* 購入ヘッダー */
.compare_table thead th:nth-child(2) {
  background: #f9f9f9;
  color: #555;
}
/* プランヘッダー */
.compare_table thead th:nth-child(3) {
  background: #0b8ab5;
  color: #fff;
  font-weight: 800;
}

.compare_table tbody th {
    background: #fafafa;
    font-weight: 600;
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    width: 22%;   /* 狭めに */
    white-space: nowrap;
}
/* 購入列 */
.compare_table td:nth-child(2) {
    color: #666;
    background: #fcfcfc;
}
/* プラン列 */
.compare_table td:nth-child(3) {
    background: #fff9e6;
    font-weight: 700;
    color: #0b8ab5;
    border-left: 2px solid #c5eaf3;
}

.compare_table td {
    text-align: center;
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    width: 39%;
}
.compare_table td strong.em { font-size: 1.05em; color: #0b8ab5; }
.compare_table td strong.good {
  display: inline-block;
  padding: .25em .6em;
  border-radius: 999px;
  background: #e8f7fb;
  color: #0b8ab5;
  font-weight: 700;
}

/* 注意書き */
.compare_note { 
  margin-top: 10px; 
  font-size: 13px; 
  color: #666; 
  text-align: center; 
}

   /* サブアクセス */
   .sub_clender{
    background:#f9eff2;
    place-items:center; 
    padding: 15px;
    margin-top: 20px;
  }
  .calendar-inner{
    background:#fff;
    padding: 10px 25px;
    box-sizing: border-box;
  }
  .business-hours{
    width:100%;
    max-width: 720px;
    margin: 0 auto;
    table-layout:fixed;
    border-collapse:collapse;
    border-radius:6px;
    overflow:hidden;
    font-size:clamp(14px, 1.5vw, 16px);
    color:#333;
  }
  thead{
    max-width: 100%;
  }
  .business-hours th,
  .business-hours td{
    padding:.8em 0em;
    text-align:center;
    vertical-align:middle;
    white-space:normal;         /* ← nowrapを外す */
    overflow-wrap:anywhere;     /* 長い語も折返し */
  }
  .business-hours thead th{
    border-bottom:1px solid #E5E8EE;
  }
.label,.time{
  border-right: 1px solid #E5E8EE;
  text-align: left!important;
}
.label{ width:7em; }
.time { width:7em; }
.note{
  text-align: center;
  padding-top: 10px;
  font-size: 15px;
}
.access_section{
background-color: #fff;
margin-bottom:40px;
padding-top: 6px;
}
.sub_access{
margin-top: 40px;
}

.sub_access_contents{
display:flex;
gap:24px;
width:min(1000px, 100%);  /* ← 親に上限を与える */
margin-top: 30px;
}
.access_map,
.access_info{
flex:1 1 0;   /* grow/shrink可 + 基準幅0 = 1:1で分割 */
min-width:0;  /* ← 重要：子が縮めない問題を防ぐ */
}
.access_info{
background-color: #F5F9FF;
padding: 20px 40px;
}
.google_map{
background-color: #2C4883;
color: #fff;
padding: 10px 30px;
display: inline-block;
margin-top: 40px;
}
.info1{
display: flex;
align-items: start;
gap: 10px;
padding-top: 30px;
}
.info1 img{
max-width: 15px;
}
.info1 p{
font-size: 17px;
}
.info2{
display: flex;
align-items: center;
padding-top: 30px;
gap: 10px;
}
.info2 img{
max-width: 15px;
}
.info2 p{
font-size: 17px;
}
.map_btn img{
max-width: 30px;
align-items: center;
margin-left: 20px;
}
@media (max-width: 768px){
.sub_access_contents{
    display: block;
}
.access_info{
    margin: 0 auto;
}
.sub_access_title{
  padding: 4px 20px;
  font-size: 14px;
}
.access_section{
  padding: 15px 0;
}
.sub_access_text{
  font-size: 14px;
  font-weight: 600;
}
.map_btn_section{
  text-align: center;
}
.google_map{
padding: 15px 30px;
font-size: 18px;
width: 100%;
text-align: center;
}
.info1,
.info2{
  font-size: 18px;
}
.info1 img{
  max-width:18px;
}
.info2 img{
  max-width:18px;
}
.calendar-inner{
  padding: 10px 15px;
}
.sub_clender{
  padding: 15px 10px;
}
.business-hours th,
.business-hours td{
  padding: .5em 0.5em;
}
.access_info{
  padding: 30px 18px;
}
.access_map{
width: 100%;
}
}