/* figure img{
  transform: none;
  opacity: 1;
} */

 .under-container figure img:hover{
    transform: none;
    opacity: 1;
  }

.under-container{
    width: 100%;
    height: 100%;
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
    /* text-align: -webkit-center; */
}
.under-container p,h2,h3,th,td{
  letter-spacing: 0.06em;
  line-height: 2;
}

@media screen and (max-width: 1280px) {
    .under-container{
      max-width: 700px;
  }
}
 @media screen and (max-width: 768px) {
    .under-container {
      padding: 128px 10px 64px;
    }
 }

 

/* 動画 */
.video-container iframe{
  width: 100%; /*←サイズ指定したい場合ここの値を変えてください*/
  aspect-ratio: 16 / 9;
}

/*テキスト*/

 .heading-under-big{
  font-size: 2.8rem;
  color: #00267F;
  font-weight: bold;
  margin:64px 0 32px;
 }

 @media screen and (max-width: 768px) {
  .heading-under-big{
    font-size: 2rem;
   }
}

 .heading-under-small{
  font-size: 2.4rem;
  color: #00267F;
  font-weight: bold;
  margin: 32px 0 16px;
 }

 @media screen and (max-width: 768px) {
  .heading-under-small{
    font-size: 1.8rem;
   }
}

th{
  border:#000 solid; 
  border-width:1px;
  background: #F8F8F8;
  padding: 12px 24px;
  font-weight:bold;
}

@media screen and (max-width: 768px) {
  th{
    padding: 12px;
    width: 20%;
  }
}

td{
  border:#000 solid; 
  border-width:1px 1px 1px 0px;
  padding: 12px 24px;
}

@media screen and (max-width: 768px) {
  td{
    padding: 12px;
  }
}
table{
  border-collapse: collapse;
  width: 100%;
}

 .cg-container img{
  width: 360px;
  padding-right: 24px;
 }

 @media screen and (max-width: 768px) {
  .cg-container figure{
  text-align: center;
   }
}

 .cg-contents{
  display: flex;
  justify-content: space-between;
 }

 @media screen and (max-width: 768px) {
  .cg-contents{
    display: flex;
    flex-direction: column;
   }
}

 .cg-contents-text-container{
  width: 60%;
 }

 @media screen and (max-width: 768px) {
  .cg-contents-text-container{
    width: 100%;
   }
}
.cg-contents-text{
  margin-bottom: 24px;
}

@media screen and (max-width: 768px) {
  .cg-contents-text{
    margin: 24px 0;
  }
}
.cg-img{
  width: 200px !important;
}
.time-cg{
  display: inline-block;
  color: #fff;
  font-weight: bold;
  background-color: #00267F;
  border-radius: 5px;
  padding: 4px 8px;
}

.tag-text{
  color: #00267F;
  font-size: 1.4rem;
  padding: 4px 12px 4px 0;
}

@media screen and (max-width: 768px) {
  .tag-text{
    font-size: 1.2rem;
    padding: 4px 8px 4px 0;
  }
}

.tag-container{
  display: flex;
  flex-wrap: wrap;
}

.btn a {
  font-size: 14px;
  padding: 12px 48px 12px 36px;
}
/* アイコンのスタイル */
.btn-circle-right a::before {
  width: 18px;
  height: 18px;
  right: 21px;
}
.btn-circle-right a::after {
  width: 6px;
  height: 6px;
}


.btn-under a{
  margin-top: 24px;
}

@media screen and (max-width: 768px) {
  .btn-under{
    text-align: center;
  }
}


 /*アコーディオン全体*/
.accordion-area{
  list-style: none;
  margin:0 auto;
}

.accordion-area li{
  margin: 10px 0;
}


.accordion-area section {
border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.heading-cg {
  position: relative;/*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size:2.4rem;
  font-weight: bold;
  /* padding: 3% 3% 3% 50px; */
  margin-bottom: 16px;
  transition: all .8s ease;
  max-width: 90%;
}

@media screen and (max-width: 768px) {
  .heading-cg {
    font-size:1.6rem;
  }
}

/*アイコンの＋と×*/
.heading-cg::before,
.heading-cg::after{
  position: absolute;
  content:'';
  width: 18px;
  height: 2px;
  background-color: #000;
  
}
.heading-cg::before{
  top:48%;
  right: -6%;
  transform: rotate(0deg);
  
}
.heading-cg::after{    
  top:48%;
  right: -6%;
  transform: rotate(90deg);

}

/* @media screen and (max-width: 768px) {
  .heading-cg::before{
    right: -2%;   
  }
  .heading-cg::after{    
    right: -2%;
  }
} */
/*　closeというクラスがついたら形状変化　*/
.heading-cg.close::before{
transform: rotate(0deg);
}

.heading-cg.close::after{
transform: rotate(0deg);
}

/*アコーディオンで現れるエリア*/
.box {
  display: none;/*はじめは非表示*/
  padding: 0 0 24px;
}

.accordion-area hr{
  border: none;
  border-bottom: 1px solid #000;
  margin: 24px 0 48px;
}

/* drive */
/* .drive-map-textbox{
  display: block;
} */
.drive-map-title{
  display: flex;
  align-items: center;
}
.drive-map-title p{
  font-size: 2.6rem;
  font-weight: bold;
}
.drive-map-icon{
  width: 35px;
  height: 32px;
  margin-right: 12px;
}
.drive-map-subtitle{
  margin-left: 48px;
}
.drive-map-bg {
  position: relative;
  background-image: url(../drive/img/map_japan.webp);
  background-color: #D8EEF5;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  aspect-ratio: 2009 / 951;
  padding: 40px;
}

/* 全てのボタン共通 */
.map-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ボタンのスタイル */
  padding: 8px 16px;
  background: #0073d6;
  color: #fff;
  border-radius: 30px;
  font-size: 1.4rem;
  width: 220px;
}

.map-btn {
  --accent: #3BA9FF; 
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #000;
  border: 3px solid var(--accent);
  padding: 10px 16px;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;

  /* transition: background 0.2s, color 0.2s; */

}

/* 右端の丸 */
.map-btn .arrow-circle {
  position: absolute;
  top: 50%;       /* ボタン中央に縦揃え */
  right: 20px;    /* 右端から20px */
  transform: translateY(-50%); 

  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 矢印 */
.map-btn .arrow {
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg); /* 右向き */
}

.map-btn:hover {
  background: var(--accent);
  color: #fff;
  border: 3px solid #fff;
}
.map-btn:hover .arrow-circle {
  background: #fff;
}
.map-btn:hover .arrow {
  border-color: var(--accent);
}


/* 個別座標（%で指定） */
.map-01 {
  --accent: #2EA23A; 
  top: 20%;
  right: 3%;
}

.map-02 {
  --accent: #EED241; 
  top: 38%;
  right: 15%;
}

.map-03 {
  --accent: #2CBCEE; 
  top: 79%;
  left: 70%;
}

.map-04 {
  --accent: #E5802E; 
  top: 93%;
  left: 40%;
}

.map-05 {
  --accent: #EB9DC2; 
  top: 52%;
  left: 32%;
}

.map-06 {
  --accent: #425FDB; 
  top: 76%;
  left: 17%;
}
@media screen and (max-width: 1280px) {
  .drive-map-icon{
    width: 25px;
    height: 22px;
  }
  .drive-map-title p{
    font-size: 2rem;
  }
  .drive-map-subtitle{
    font-size: 1.2rem;
    margin-left: 36px;
  }
  .map-btn {
    width: 190px;
    padding: 6px 12px;
  }
  .drive-map-buttons a{
    font-size: 1.3rem;
  }
  .map-btn .arrow-circle {
    right: 10px;
  }
}
@media screen and (max-width: 768px) {
  .drive-map-bg {
    padding: 20px 10px;
    background-image: url(../drive/img/map_japan_sp.webp);
  }

  .drive-map-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    grid-template-rows: auto auto auto;   /* 3行 */
    gap: 16px;                             /* ボタン間の余白 */
    justify-items: center;                 /* 水平方向中央揃え */
    max-width: 400px;   
    margin: 0 auto;     /* 中央寄せ */

  }

  .drive-map-buttons a{
    font-size: 1.2rem;
  }

  .drive-map-flex{
    display: block;
  }

   .drive-map-textbox {
    position: static;
    margin-bottom: 24px; /* ボタンとの間に余白 */
  }

  .map-btn {
    position: relative; /* 絶対配置解除 */
    transform: none;    /* 中央基準transform解除 */
    width: 180px;       /* モバイルで少し小さめに調整 */
  }

  .map-01,
  .map-02,
  .map-03,
  .map-04,
  .map-05,
  .map-06 {
    top: auto;
    left: auto;
    right: auto;
  }

  /* .map-btn .arrow-circle {
    right: 10px;
  } */
}

@media (max-width: 480px) {

  .drive-map-buttons {
    gap: 16px;
    max-width: 350px;
   }
   .drive-map-buttons a{
    font-size: 1.1rem;
  }
   .map-btn {
    width: 160px;
  }
  .map-btn .arrow-circle {
    width: 20px;
    height: 20px;
    right: 8px;
  }
}