
html {
  scroll-behavior: smooth;
}

/***********************************************************************
 * カスタムプロパティ
 ********************************************************************* */
.flContainer {
  --main-color: #222E55;
}
/***********************************************************************
 * .flContainer
 ********************************************************************* */

.flContainer {
 font-family: 'Noto Sans JP','FOT-筑紫ゴシック Pro B',sans-serif;
 font-weight: normal;
 color: #353535;
 margin: 0 auto;    
}

.flContainer p a {
 color: #004294;
 text-decoration: underline;
 font-weight: bold;
}


.flnav button , .flnav a {
 display: block;
 width: 100%;
 text-align: center;
 background-color: #C5C6C6;  
 border: none;
 cursor: pointer;
 outline: none;
 appearance: none;
 color: #FFFFFF;    
 line-height: 1;
 padding: .8em;
 box-sizing: border-box;
 transition : background-color 0.4s ease 0s;
 text-decoration: none;
}

.flnav button:hover , .flnav a:hover {
 background-color: var(--main-color);
}
.flnav button.is-active , .flnav a.is-active {
 pointer-events: none;
 background-color: var(--main-color);
}

@media screen and (min-width: 1024px){
 .flContainer { width: 1200px; max-width: 90%; }
 .fllead { margin-top: 30px; font-size:16px; line-height: 1.75; }
 .flnav { margin-top: 30px; display: flex; justify-content: flex-start; width: 100%; }
 .flnav > li { width: 28.8%; min-width: 8em; } 
 .flnav > li + li { margin-left: 8px; }
 .flnav button , .flnav a { font-size: 20px; }
 .flBox { scroll-margin-top: 180px; }    
}
@media screen and (max-width: 1023px){
 .flContainer { width: 82%; }
 .flPagetitle span span { display: inline-block; }      
 .fllead { margin-top: 25px; font-size:12px; line-height: 1.75; }
 .flnav { margin-top: 60px; }
 .flnav > li + li { margin-top: 25px; }    
 .flnav button , .flnav a { font-size: 18px; }
 .flBox { scroll-margin-top: 80px; }      
}


/***********************************************************************
 * 施設紹介
********************************************************************* */

.introBox {
 position: relative;
 border-top: solid 2px #999999;
}


.introBlock { position: relative; }

.introBlock .swiper-slide {
 overflow: hidden;
}
.introBlock .swiper-slide picture {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.introBlock .swiper-button-prev , .introBlock .swiper-button-next {
 border-radius : 50%;
 background-color: var(--main-color);
}

.introBlock .swiper-navigation-icon {
  display: none;  
}


.introBlock .swiper-button-prev:before {
 content: "";
 background-color: #FFF;
 width: 33.3%;
 aspect-ratio: 1 / 1.2;
clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
 transform:translateX(-15%);
}

.introBlock .swiper-button-next:before {
 content: "";
 background-color: #FFF;
 width: 33.3%;
 aspect-ratio: 1 / 1.2;
 clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
 transform:translateX(15%);
}


/* Pagination：親の85% ＆ グリッド表示 */
.introBlock .swiper-pagination.swiper-pagination-bullets {
  position: static !important; 
  display: grid !important;
}
.swiper-pagination-bullet {
position: relative; /* 疑似要素の基準にする */
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 5 / 4;
  background: none !important; /* デフォルトの背景を消す */
  opacity: 1 !important; /* 本体は不透明にしておく */
  overflow: hidden; /* はみ出し防止 */
  border-radius: 0;
  cursor: pointer;

}

.swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-pagination-bullet img {
  width: 100%;
  height: 100%;
    object-fit: cover;
  display: block;
  border-radius: 0;
  opacity: 1;
}

/* 上に乗せる黒いレイヤー（疑似要素） */
.swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* 重ねる色 */
  
  /* 乗算の設定 */
  mix-blend-mode: multiply;
  
  /* 通常時は少し暗く（例: 0.5）、アクティブ時に明るく（0）するなどの調整が可能 */
  opacity: 0.5; 
  transition: opacity 0.3s ease;
}

.swiper-pagination-bullet-active::after,
.swiper-pagination-bullet:hover::after {
  opacity: 0;
}


.introData h4 {
 display: table;
 color: #FFF;
 background-color: var(--main-color);
 font-weight: bold;
 line-height: 1em;
 padding: .5em .8em;
}

.introData ul li {
 position: relative;
 padding-left: 1em;
 line-height: 1.75;
}
.introData ul li:before {
 position: absolute;
 left: 0;
 top: 0;
 content: "?";
}

.introFile {
 display: flex;
 justify-content: center;
 align-items: center;
 background-color:rgba(53,53,53,0.1);
 text-decoration: none !important;
 color: #353535 !important;
}

.introFile > span {
 background-image: url(/introduction/filming_location/img/icon_pdf.png);
 background-repeat: no-repeat;
}

.introFile span span {
 display: block;
}

@media screen and (min-width: 1281px){
 .flWrapper { padding-top:85px; }
 .introBox { padding-top: 15px; padding-bottom:150px; }
 .introBlock .swiper { width: 58%; margin: 35px auto 0 0;  }
 .introBlock .swiper-button-prev ,.introBlock .swiper-button-next { width: 9.25%; height: auto; aspect-ratio: 1 / 1;}
 .introBlock .swiper-button-next { right: 0; }
 .introBlock .swiper-wrapper { padding-left: 14.5%; }
 .introBlock .swiper-pagination.swiper-pagination-bullets {
  width: 83.15% !important;
  margin: 40px auto 0 !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
 }
 .introData { position: absolute; right: 0; top: 0; width: 35%; }
 .introData h4 { font-size: 19px; }
 .introData ul { margin-top: 20px; font-size: 16px;}
 .introData ul.fs-is-small { font-size: clamp(8px,13px,1.1vw); }
 .introData ul li + li{ margin-top: 5px; }
 .introFile {
  margin-top: 40px;
  padding: 20px 6% 20px 6%;
  border-radius : 15px;
  font-size: 15px;
  box-sizing: border-box;
 } 
 .introFile > span  {
 display: block;
     width: 100%;
 padding:15px 0 15px 100px;
 background-position: left center;
 background-size: auto 84px;
 box-sizing: border-box;
 }
 .introFile > span span + span { margin-top: .75em; }
}
@media screen and (max-width: 1280px){
 .flWrapper { padding-top:130px; }
 .introBox { padding-top: 15px; padding-bottom:150px; }
 .introBlock { margin-top: 35px; }
 .introBlock .swiper { overflow-y: visible; padding-bottom: 70px; max-width: 500px; margin: 0 auto; }
 .introBlock .swiper-button-prev { top:inherit; bottom: 0; left: 50%; transform: translateX(-140%); }
 .introBlock .swiper-button-next { top:inherit; bottom: 0; right: 50%; transform: translateX(140%); }    
 .introBlock .swiper-pagination.swiper-pagination-bullets {
  width: 100% !important;
  margin: 30px auto 0 !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
 }    
 .introData { margin-top: 35px; }
 .introData ul { margin-top: 10px; font-size: 12px;}
 .introFile {
  margin-top: 20px;
  padding: 25px 3% 25px 3%;
  border-radius : 15px;
  font-size: 12px;
 } 
 .introFile > span  {
  display: table;
  padding:15px 0 15px 100px;
  background-position: left center;
  background-size: auto 72px;
 }    
    
 .introFile > span span + span { margin-top: .25em; }
}


/***********************************************************************
 * アクセス
********************************************************************* */

.accessBox h3 {
 border-bottom: solid 1px #222E55;
 line-height: 1;
}

.accessBox h3.icon-is-car { background: url("/introduction/filming_location/img/icon_car.svg") no-repeat left center; }
.accessBox h3.icon-is-train { background: url("/introduction/filming_location/img/icon_train.svg") no-repeat left center; }
.accessBox h3.icon-is-shinkansen { background: url("/introduction/filming_location/img/icon_shinkansen.svg") no-repeat left center; }
.accessBox h3.icon-is-airplane { background: url("/introduction/filming_location/img/icon_airplane.svg") no-repeat left center; }


.accessBox h4 {
 position: relative;
 color: var(--main-color);
 font-weight: 500;
}
.accessBox h4::before {
 position: absolute;
 left: 0;
 top: 0;
 content: "■";
}

.accessBox h5 {
 color: var(--main-color);
 font-weight: 500;
}


.accessBox > ul li ,.accessNote > ul li {
 display: flex; /* 横並びにする */
 align-items: flex-start; /* 2行目があっても上端で揃える */
 margin-top: .25em;
 font-size: 16px;
 line-height: 1.75;
}

.accessBox >  ul li:before , .accessNote >  ul li:before {
content: "●";
 flex-shrink: 0;      /* ●が潰れないように */
 width: 1.5em;        /* インデント幅 */
 display: inline-block;
 margin-top: 0.05em;   /* 上下の位置微調整 */
}


.accessBox > ul li strong { display: inline; line-height: 1;vertical-align: 0; }

.accessNote ul { margin-top: 1em; }

.accessMapTrain img , .accessMapAirplane img { max-width: 100%; height: auto; }

.airplaneData ul li {
 background-color: rgba(23,50,157,0.1);
 display: flex;
 justify-content:center;
 align-items: flex-end;
 box-sizing: border-box;
}

.airplaneData ul li > span:first-child { font-weight: 500; min-width:9em; line-height: 1; padding-bottom: .15em; }
.airplaneData ul li > span:last-child { color: var(--main-color); line-height: 1; }
.airplaneData ul li > span:last-child span:nth-child(1) { font-weight: 600; }
.airplaneData ul li > span:last-child span:nth-child(2) { font-weight: 900; }
.airplaneData ul li > span:last-child span:nth-child(3) { font-weight: 600; }


@media screen and (min-width: 769px){
 .accessLead { font-size:16px; line-height: 1.75; }
 .accessBox { margin-top: 50px; }
 .accessBox h3 { font-size: clamp(14px,22px,1.78vw); padding-top: .5em; padding-bottom: .75em; padding-left: 2.15em; }
 .accessBox h4 { font-size: clamp(14px,20px,1.78vw); margin-top: 50px; padding-left: 1.15em; }
 .accessBox > ul { margin-top: 15px; }
 .accessBox > ul li strong { font-size: 22px; }
 .accessNote { margin-top: 25px; }
 .accessBox h5 { font-size: clamp(14px,22px,1.78vw); } 
 .accessNote ul li { font-size: 13px; }
 .accessMapTrain { margin-top: 25px; }
 .accessRouteMap { margin-top: 25px; }
 .accessRouteMap img { max-width: 100%; height: auto; } 
 .airplaneData { margin-top: 25px; display: flex; justify-content: space-between; }
 .airplaneData img { max-width: 100%; height: auto; }
 .airplaneData > ul { width: calc(42% - 35px); }
 .airplaneData > div { width: 58%; }    
 .airplaneData ul li { padding: 20px 15px 30px; }
 .airplaneData ul li + li { margin-top: 25px; }
 .airplaneData ul li > span:first-child { font-size: clamp(16px,28px,2.1vw); }   
 .airplaneData ul li > span:last-child span:nth-child(1) { font-size: clamp(16px,28px,2.1vw); }
 .airplaneData ul li > span:last-child span:nth-child(2) { font-size: clamp(26px,51px,3.98vw); }    
 .airplaneData ul li > span:last-child span:nth-child(3) { font-size: clamp(16px,28px,2.1vw); }
}
@media screen and (max-width: 768px){
 .accessBox { margin-top: 60px; }    
 .accessBox h3 { font-size: 16px; padding-top: 1.5em; padding-bottom: 2em; padding-left: 2.55em; }
 .accessBox h4 { font-size: 14px; margin-top: 30px; padding-left: 1.15em; }  
 .accessBox > ul li { font-size: 12px; }    
 .accessBox > ul li strong { font-size: 14px; }
 .accessNote { margin-top: 25px; }
 .accessBox h5 { font-size: 14px; }
 .accessNote ul li { font-size: 12px; }    
 .accessMapTrain , .accessMapAirplane {
  margin-top: 25px;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: auto;
 }

 div.accessMapTrain img , .accessMapAirplane img  {
  max-width: none; 
  height: auto;
  display: block;
 }

 div.accessMapTrain img { width: 300%; }
 div.accessMapAirplane img { width: 200%; }          
    
 .accessRouteMap { margin-top: 15px; overflow-x: scroll; padding-bottom: 20px; }
 .accessRouteMap img { width: auto; height: 100px; max-width: none; }
    
 .airplaneData ul { margin-top: 25px; }
 .airplaneData ul li {
  margin-left: auto;
  margin-right: auto;
  width: 78%;
  padding: 20px 15px 30px;
 }    
 .airplaneData ul li + li { margin-top: 12px; }
 .airplaneData ul li > span:first-child { font-size: 14px; }   
 .airplaneData ul li > span:last-child span:nth-child(1) { font-size: 14px; }
 .airplaneData ul li > span:last-child span:nth-child(2) { font-size: 26px; }    
 .airplaneData ul li > span:last-child span:nth-child(3) { font-size: 14px; }    
 .airplaneData > div { margin-top: 25px; }
}