/*
Theme Name: BigShine_server
Theme URI:
Author: BigShine / Studio Coba
Description: BigShineウェブサイトのテーマです。
Version: 1.0
*/
/* ==========================================================================




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

/* --------------------------------------------------------------------------

   Clearfix

   -------------------------------------------------------------------------- */

.clearfix:after {
   content: " ";
   display: block;
   clear: both;
}

/* --------------------------------------------------------------------------

   foundation

   -------------------------------------------------------------------------- */

html {
   font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
   font-size: 62.5%;
   /* フォントサイズ 10px をベースにして計算しやすくする */
   touch-action: manipulation;
   /* スマホのダブルタップ拡大を無効化 */
}

button {
   font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

body {
   font-size: 16px;
   /* for IE 8 */
   font-size: 1.6rem;
}

h1 {
   font-size: 32px;
   /* for IE 8 */
   font-size: 3.2rem;
}

input[type="date"] {
   color: #333;
   height: 30px;
   width: 150px;
   font-size: 18px;
   margin-right: 7px;
}

p {
   color: #333;
}

h1,
h2,
h3 {
   color: #333;
}

label,
button {
   color: #333;
}

hr {
   color: #333;
}

/* --------------------------------------------------------------------------

   layout

   -------------------------------------------------------------------------- */

html,
body {
   margin: 0;
   padding: 0;
}

.main-container {
   max-width: 1024px;
   margin-left: auto;
   margin-right: auto;
}

.u-mt10 {
   margin-top: 10px;
}

.u-mt20 {
   margin-top: 20px;
}

.u-mt30 {
   margin-top: 30px;
}

.u-mt50 {
   margin-top: 50px;
}

.u-pb50 {
   padding-bottom: 50px;
}

.under_bd {
   border-bottom: 1px solid #CCC;
}

/* PCのみ表示 */
.pc-ver {
   display: block;
}

/* スマホのみ表示 */
.sp-ver {
   display: none;
}

/* --------------------------------------------------------------------------

   objects

   -------------------------------------------------------------------------- */

/* ----------------- ヘッダー ----------------- */
/* 全体 */
.site-header{
   position: sticky;
   top: 0;
   background-color: #FFF;
   z-index: 99;
   transition: .5s;
}


/* 途中で透過させる時の色 */
.site-header.scroll-nav {
   background-color: rgba(255, 255, 255, 0.5);
}



/* 内側 */
.header-inner {
   height: 40px;
   padding: 15px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

/* ロゴ・日英切替ボタン */
.logo>img {
   display: block;
   height: 40px;
}

/* 駐車場リンク全体 */
.main-nav {
   display: flex;
   align-items: flex-end;
   align-items: center;
}

/* 駐車場リンク個々 */
.main-nav a {
   height: 22px;
   margin-left: 30px;
   text-decoration: none;
   color: #333;
   font-weight: 500;
}

/* ホバー時の下ケイ */
.main-nav a:hover {
   text-decoration: underline;
   text-underline-offset: 4px;
}

/* SPハンバーガーメニュー非表示 */
input#menu__toggle {
   display: none;
}

/* ヘッダー・モーダル展開時背景スクロールを無効 */
body:has(#menu__toggle:checked,.modal:target) {
   overflow: hidden;
}


/* ----------------- フッター ----------------- */
/* 戻るボタン */
#goto_top,
.goto_top {
   position: fixed;
   bottom: 50px;
   right: 50px;
   z-index: 90;
   cursor: pointer;
   transition: all 0.3s; 
}

#goto_top{
   width: 52px;
   height: 52px;
}

.goto_top:hover{
   opacity: 0.6;
}

/* イラスト部分 */
.footer_illust {
   width: 100%;
   height: 261px;
   background: url(images/footer_image.png) 100% 50% no-repeat;
}

/* 青地白抜きテキスト部分 */
.footer_txt {
   padding: 40px 20px;
   background-color: #0055B4
}

/* 1121大内: フッターロゴ画像 */
.footer_txt>img {
   height: 50px;
}

/* 文字色 */
.footer_txt>p,
.footer_txt>small {
   color: #FFF;
}

/* 住所〜ケイ部分 */
.footer_txt>p {
   padding: 15px 0 20px;
   margin: 0 0 10px;
   border-bottom: 2px solid #FFF;
}

/* ---------------- トップページ ---------------- */

/* 最初はすべて隠す（JS前） */
html.preload body {
   visibility: hidden;
}

/* ローディングだけは表示 */
html.preload .loading {
   visibility: visible;
   display: flex;
   animation: fadeOut 0.5s 1.3s forwards;
   /* 最初から表示
   opacity: 1; */
}

/* 追加で安定させるなら（任意）
html.preload {
   overflow: hidden;
}
*/

/* 全体 */
.top_container {
   display: flex;
   flex-flow: column nowrap;
   background-color: #D0F5F7;
   overflow: hidden;
}

/* 1126 */
/* ローディングアニメーション */
.loading {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: #fff;
   display: none;
   align-items: center;
   justify-content: center;
}

@keyframes fadeOut {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
      visibility: hidden;
   }
}


.loading__logo {
   opacity: 0;
   animation: logo_fade 0.9s 0.2s forwards;
   width: 200px;
}

@keyframes logo_fade {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }

   60%,100% {
      opacity: 1;
      transform: translateY(0);
   }
/*
   100% {
      opacity: 0;
   }*/
}


/* マップ全体 1126 */
.top_map {
   width: 100%;
   height: 700px;
   background-color: #FFF;
   position: relative;  
   }

.top_map::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url(images/SapporoCity_AreaMap_bg.jpg);
   background-position: 37.5% 40%;
   background-size: auto 1100px;
   background-repeat: no-repeat;
   animation: fade_in 0.5s ease 1.6s both;
}

@keyframes fade_in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.top_map.notFirst::before {
   animation-delay: 0.3s;
}

.build{
   width: 100%;
   height: 700px;
   background-position: 37.5% 40%;
   background-size: auto 1100px;
   background-repeat: no-repeat;
   position: absolute;
}

@keyframes slide_in {
   0% {
      background-position-y: 43%;
      opacity: 0;
   }

   100% {
      background-position-y: 40%;
      opacity: 1;
   }
}

.build.East{
   background-image: url(images/East_L_AreaMap.png);
   animation: slide_in 0.5s ease 2.2s both;
}

.build.East.notFirst {
   animation-delay: 1s;
}

.build.West {
   background-image: url(images/West_L_AreaMap.png);
   animation: slide_in 0.5s ease 1.9s both;
}

.build.West.notFirst {
   animation-delay: 0.7s;
}

.build.North {
   background-image: url(images/North_L_AreaMap.png);
   animation: slide_in 0.5s ease 2s both;
}

.build.North.notFirst {
   animation-delay: 0.8s;
}

.build.Center {
   background-image: url(images/Center_L_AreaMap.png);
   animation: slide_in 0.5s ease 2.1s both;
}

.build.Center.notFirst {
   animation-delay: 0.9s;
}

/* マップ上の配置物 */
/* 左上のテキスト全体 */
.top_map_txt {
   margin: 0;
   font-size: 3.6rem;
   font-weight: bold;
   text-shadow: 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF;
   line-height: 1.5;
   position: absolute;
   left: 30px;
}

/* 左上のテキスト1行目 */
.top_map_txt.ani_l1 {
   top: 30px;
   animation: MT_Start 1s cubic-bezier(0.25, 1, 0.5, 1) 1.8s both;
}

.top_map_txt.ani_l1.notFirst {
   animation-delay: 0.8s;
}

/* 左上のテキスト2行目 */
.top_map_txt.ani_l2 {
   top: 85px;
   animation: MT_Start 1s cubic-bezier(0.25, 1, 0.5, 1) 2.2s both;
}

.top_map_txt.ani_l2.notFirst {
   animation-delay: 1.2s;
}

/* テキスト登場アニメーション */
@keyframes MT_Start {
   0% {
      opacity: 0;
      transform: translateX(-30px);
   }

   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

/* 駐車場イラスト */
.top_map_park {
   width: 400px;
   position: absolute;
   bottom: -40px;
   right: 12%;
   animation: fade_in 1s ease 2s both;
}

.top_map_park.notFirst {
   animation-delay: 0.8s;
}

/* 24時間ピクト */
.top_map_24h {
   position: absolute;
   bottom: 50px;
   right: 5%;
   animation: fade_in 1s ease 2s both;
}

.top_map_24h.notFirst {
   animation-delay: 0.8s;
}

/* ピン: 共通設定 */
#MAP_N1,
#MAP_N4,
#MAP_N5,
#MAP_C {
   width: 87px;
   height: 67px;
   position: absolute;
   transform-style: preserve-3d;
   transition: .5s;
   z-index: 1;
}

/* ピン：北1条 */
#MAP_N1 {
   bottom: 150px;
   left: calc(607px + 37.5% - 960px);
   animation: P_Start 1s cubic-bezier(0.25, 1, 0.5, 1) 3.8s backwards;
}

#MAP_N1.notFirst {
   animation-delay: 2.5s;
}

/* ピン：北4条 */
#MAP_N4 {
   top: 180px;
   left: calc(1032px + 37.5% - 960px);
   animation: P_Start 1s cubic-bezier(0.25, 1, 0.5, 1) 3.9s backwards;
}

#MAP_N4.notFirst {
   animation-delay: 2.6s;
}

/* ピン：北5条 */
#MAP_N5 {
   top: 57px;
   right: calc(358px + 62.5% - 960px);
   animation: P_Start 1s cubic-bezier(0.25, 1, 0.5, 1) 4s backwards;
}

#MAP_N5.notFirst {
   animation-delay: 2.7s;
}

/* ピン：中央 */
#MAP_C {
   top: 130px;
   right: calc(363px + 62.5% - 960px);
   animation: P_Start 1s cubic-bezier(0.25, 1, 0.5, 1) 4.1s backwards;
}

#MAP_C.notFirst {
   animation-delay: 2.8s;
}

/* ピン登場アニメーション */
@keyframes P_Start {
   0% {
      transform: translateY(-30px);
      opacity: 0;
   }

   100% {
      transform: translateX(0);
   }

   40%,
   100% {
      opacity: 1;
   }
}

/* ピン: ホバー時アニメ */
#MAP_N1>img,
#MAP_N4>img,
#MAP_N5>img,
#MAP_C>img {
   backface-visibility: hidden;
}

#MAP_N1:hover,
#MAP_N4:hover,
#MAP_N5:hover,
#MAP_C:hover {
   transform: rotateY(180deg);
}

.map_pin2 {
   position: absolute;
   bottom: -8px;
   left: -20px;
   transform: rotateY(180deg);
}

/* 1112大内: ピン:モーダルウィンドウ ここから */
.modal-open-button {
   padding: 10px 20px;
   color: white;
   text-decoration: none;
   cursor: pointer;
   background-color: #007BFF;
   border: none;
   border-radius: 5px;
}

.modal {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   display: none;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   background-color: rgb(0 0 0 / 60%);
}

.modal:target {
   display: flex;
}

.close {
   position: sticky;
   top: 5px;
   left: calc(100% - 50px);
   font-size: 48px;
   color: #333;
   text-decoration: none;
   cursor: pointer;
   transform: translate(50%, -50%);
   z-index: 2;
}

.modal-wrapper {
   position: relative;
   width: 100%;
   height: 60%;
   padding: 20px;
   margin: auto auto 0;
   overflow-x: hidden;
   overflow-y: scroll;
   background-color: #D0F5F7;
   border-radius: 5px;
   animation: M_Up 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
   z-index: 100;
}

@keyframes M_Up {
   0% {
      opacity: 0;
      transform: translateY(100px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.modal-content h1 {
   margin: 0;
   font-size: 4rem;
   line-height: 1.2em;
   letter-spacing: -0.02em;
}

/* モーダル用個別調整 */
.modal-content .top_park {
   padding-top: 100px;
}
/* 1112大内: ピン:モーダルウィンドウ ここまで */

/* 1127 キッチンカー追加 */
#Flower{
   width: 310px;
   height: auto;
   position: absolute;
   top: 238px;
   left: calc(813px + 37.5% - 960px);
   animation: P_Start 0.85s ease 1.95s both;
   z-index: 1;
}

#Flower.notFirst {
   animation-delay: 0.75s;
}

/* 気球（花柄） */
#BALLOON_1 {
   position: absolute;
   top: 222px;
   left: calc(675px + 37.5% - 960px);
   animation: B_Start 2s cubic-bezier(0.25, 1, 0.5, 1) 2.8s both, B_loop 4s ease-in-out infinite;
   z-index: 1;
}

#BALLOON_1.notFirst {
   animation-delay: 1.5s;
}

/* 気球（横線） */
#BALLOON_2 {
   position: absolute;
   top: 285px;
   left: calc(745px + 37.5% - 960px);
   animation: B_Start 2s cubic-bezier(0.25, 1, 0.5, 1) 2.8s both, B_loop 4s ease-in-out 0.5s infinite;
   z-index: 1;
}

#BALLOON_2.notFirst {
   animation-delay: 1.8s;
}

/* 気球（波線） */
#BALLOON_3 {
   position: absolute;
   top: 278px;
   right: calc(250px + 62.5% - 960px);
   animation: B_Start 2s cubic-bezier(0.25, 1, 0.5, 1) 2.9s both, B_loop 4s ease-in-out 1s infinite;
   z-index: 1;
}

#BALLOON_3.notFirst {
   animation-delay: 2.2s;
}

/* 気球スタート時のアニメーション */
@keyframes B_Start {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

/* ループさせるアニメーション */
@keyframes B_loop {
   0% {
      transform: translateY(20px);
   }

   50% {
      transform: translateY(-20px);
   }

   100% {
      transform: translateY(20px);
   }
}

/* バイク */
#VEHICLE_1 {
   position: absolute;
   bottom: 100px;
   left: calc(536px + 37.5% - 960px);
   animation: V1 1s cubic-bezier(0.25, 1, 0.5, 1) 2.9s both;
}

#VEHICLE_1.notFirst {
   animation-delay: 1.6s;
}

@keyframes V1 {
   0% {
      transform: translateX(-100px);
      opacity: 0;
   }

   100% {
      transform: translateX(0);
   }

   40%,
   100% {
      opacity: 1;
   }
}

/* 車（黄） */
#VEHICLE_2 {
   position: absolute;
   bottom: 11px;
   left: calc(887px + 37.5% - 960px);
   animation: V2 1.2s cubic-bezier(0.25, 1, 0.5, 1) 3.1s both;
}

#VEHICLE_2.notFirst {
   animation-delay: 1.8s;
}

@keyframes V2 {
   0% {
      transform: translate(-100px, -15px);
      opacity: 0;
   }

   100% {
      transform: translate(0, 0);
   }

   40%,
   100% {
      opacity: 1;
   }
}

/* 車（水） */
#VEHICLE_3 {
   position: absolute;
   top: 310px;
   right: calc(325px + 62.5% - 960px);
   animation: V3 1.2s cubic-bezier(0.25, 1, 0.5, 1) 2.8s both;
}

#VEHICLE_3.notFirst {
   animation-delay: 1.5s;
}

@keyframes V3 {
   0% {
      transform: translate(100px, -80px);
      opacity: 0;
   }

   100% {
      transform: translate(0, 0);
   }

   40%,
   100% {
      opacity: 1;
   }
}

/* 走行車（銀） */
#DRIVE_1{
   position: absolute;
   top: 285px;
   left: calc(500px + 37.5% - 960px);
   animation: Drive1 16s ease-out 2.8s both;
   transform: translate(0px,0px) rotate(-13deg);
   opacity: 0;
}

#DRIVE_1.notFirst {
   animation-delay: 1.5s;
}

@keyframes Drive1 {
   0% {
      transform: translate(0px,0px) rotate(-13deg);
   }

   100% {
      transform: translate(520px,-100px) rotate(-13deg);
   }

   0%,100%{
      opacity: 0;
   }

   10%,
   90% {
      opacity: 1;
   }
}

/* 走行車（橙） */
#DRIVE_2 {
   position: absolute;
   top: 128px;
   right: calc(550px + 62.5% - 960px);
   animation: Drive2 5s cubic-bezier(0.5, 0.5, 0.5, 0.85) 3.1s both;
   transform: translate(0px,0px) rotate(-12deg);
   opacity: 0;
}

#DRIVE_2.notFirst {
   animation-delay: 1.8s;
}

@keyframes Drive2 {
   0% {
      transform: translate(0px,0px) rotate(-12deg);
   }

   100% {
      transform: translate(120px,-20px) rotate(-12deg);
   }

   0%,100%{
      opacity: 0;
   }

   10%,
   90% {
      opacity: 1;
   }
}

/* 走行車（灰） */
#DRIVE_3 {
   position: absolute;
   bottom: 302px;
   right: calc(620px + 62.5% - 960px);
   animation: Drive3 16s ease-in-out 2.9s both;
   transform: translate(0px, 0px) rotate(-13deg);
   opacity: 0;
}

#DRIVE_3.notFirst {
   animation-delay: 1.6s;
}

@keyframes Drive3 {
   0% {
      transform: translate(0px,0px) rotate(-13deg);
   }

   100% {
      transform: translate(-440px,80px) rotate(-13deg);
   }

   0%,100%{
      opacity: 0;
   }

   10%,
   90% {
      opacity: 1;
   }
}

/* 走行車（桃） */
#DRIVE_4 {
   position: absolute;
   top: 230px;
   right: calc(730px + 62.5% - 960px);
   animation: Drive4 12s ease-in-out 2.9s both;
   transform: translate(0px, 0px) rotate(-12deg);
   opacity: 0;
}

#DRIVE_4.notFirst {
   animation-delay: 1.6s;
}

@keyframes Drive4 {
   0% {
      transform: translate(0px,0px) rotate(-12deg);
   }

   100% {
      transform: translate(280px,-53px) rotate(-12deg);
   }

   0%,100%{
      opacity: 0;
   }

   10%,
   90% {
      opacity: 1;
   }
}

/* 走行車（空） */
#DRIVE_5 {
   position: absolute;
   bottom: 200px;
   right: calc(590px + 62.5% - 960px);
   animation: Drive5 17s ease-out 3s both;
   transform: translate(0px, 0px) rotate(-13deg);
   opacity: 0;
}

#DRIVE_5.notFirst {
   animation-delay: 1.7s;
}

@keyframes Drive5 {
   0% {
      transform: translate(0px,0px) rotate(-13deg);
   }

   100% {
      transform: translate(-595px,106px) rotate(-13deg);
   }

   0%,100%{
      opacity: 0;
   }

   10%,
   90% {
      opacity: 1;
   }
}

/* 走行車（黒） */
#DRIVE_6 {
   position: absolute;
   top: 296px;
   right: calc(480px + 62.5% - 960px);
   animation: Drive6 15s ease-in-out 3.1s both;
   transform: translate(0px, 0px) rotate(-9deg);
   opacity: 0;
}

#DRIVE_6.notFirst {
   animation-delay: 1.8s;
}

@keyframes Drive6 {
   0% {
      transform: translate(0px,0px) rotate(-9deg);
   }

   100% {
      transform: translate(250px,-46px) rotate(-9deg);
   }

   0%,100%{
      opacity: 0;
   }

   10%,
   90% {
      opacity: 1;
   }
}


/* 各駐車場情報セクション */
.top_park {
   max-width: 1280px;
   margin: -40px auto 0;
   padding: 200px 20px 50px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
}

/* 1114: アニメーション追加 ここから */
/* アニメーション用に初めから非表示に */
.top_park.divAnime {
   opacity: 0;
}

/* 右から左へフェードインさせるアニメーション */
.top_park.ani_L.is-animated {
   animation: FadeInRtoL 1s ease-out forwards;
}

@keyframes FadeInRtoL {
   0% {
      transform: translateX(100px);
   }

   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

/* 左から右へフェードインさせるアニメーション */
.top_park.ani_R.is-animated {
   opacity: 0;
   animation: FadeInLtoR 1s ease-out forwards;
}

@keyframes FadeInLtoR {
   0% {
      transform: translateX(-100px);
   }

   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

/* 1114: アニメーション追加 ここまで */

/* 駐車場名〜説明 */
.top_txt_container {
   width: 55%;
   position: relative;
}

/* 打ち文字用 */
.top_h3 {
   margin: 0;
   color: #0055B4;
   font-size: 2.4rem;
}

/* ロゴ用 */
.top_h3>img {
   height: 26px;
}

.top_h2 {
   margin: 0 0 12px;
   color: #333;
   font-size: 4.2rem;
   line-height: 1.2;
}

.top_h2 a{
   color: #333;
   text-decoration: none;
   position: relative;
   padding-bottom: 4px;
}

.top_h2 a::before{
   background: #333;
   content: '';
   width: 100%;
   height: 2px;
   position: absolute;
   left: 0;
   bottom: 0;
   transform-origin: right top;
   transform: scale(0, 1);
   transition: transform .3s;
}

.is-animated .top_h2 a::before{
   animation: line .8s ease 1.1s 1;
}

@keyframes line {
   0%{
      transform-origin: left top;
      transform: scale(0, 1);
   }
   30%{
      transform-origin: left top;
      transform: scale(1, 1);
   }
   70%{
      transform-origin: right top;
      transform: scale(1, 1);
   }
   100%{
      transform-origin: right top;
      transform: scale(0, 1);
   }
}

.top_h2 a:hover::before {
   transform-origin: left top;
   transform: scale(1, 1);
}

.top_news {
   margin: 0;
   position: absolute;
   top: 20px;
   right: 0;
   text-align: center;
}

.top_news_new {
   background-color: #F00;
   background: linear-gradient(125deg, rgba(255, 0, 0, 1) 60%, rgba(255, 220, 220, 1) 65%, rgba(255, 100, 100, 1) 70%, rgba(255, 0, 0, 1) 80%);
   /* アニメーション用に幅を広く */
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   font-weight: bold;
   letter-spacing: 0.2em;
   animation: flash 4s linear infinite;
}

@keyframes flash {
   0%{
      background-position: 200% center;
   }
   10% {
      background-position: 0% center;
   }
}

.news_no{
   margin-top: 16px;
}

/* 駐車場: 説明文 */
.top_txt {
   margin: 0 0 60px;
   font-size: 1.8rem;
   line-height: 2;
}

/* 駐車場: イラスト */
.top_illust_container {
   width: 45%;
   position: relative;
}

.top_illust_container>img {
   position: absolute;
   top: -100px;
   right: calc(-40px - ((100vw - 1320px) / 2));
}

#N1>.top_illust_container>img {
   left: calc(-80px - ((100vw - 1320px) / 2));
}

#C>.top_illust_container>img {
   top: 0;
   right: 0;
}

/* 駐車場: 特約 */
.top_partner_header {
   width: 100%;
   height: 34px;
   border-bottom: 3px solid #0055B4;
   margin-bottom: 30px;
   z-index: 1;
}

.top_partner_container {
   width: 100%;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   gap: 30px 2%;
   z-index: 1;
}

.top_partner {
   width: 23%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
}

.top_partner>img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
}

/* 1120 斜めホバー仕様変更 */
.top_partner>a {
   display: block;
   font-size: 2rem;
   text-align: center;
   --color: #0055b4;
   margin: 0;
   padding: 10px 0;
   border-bottom: 1px solid var(--color);
   border-right: none;
   border-radius: 0;
   background-image: linear-gradient(150deg, var(--color) 50%, transparent 50%);
   background-position: 100%;
   background-size: 300%;
   color: var(--color);
   text-decoration: none;
   transition: all 0.4s ease;
   position: relative;
   z-index: 1;
}

/* ホバー時の文字色変え */
.top_partner>a:hover {
   background-position: 0;
   color: #FFF;
}
/* 1120 斜めホバー仕様変更 END */

.top_detail_container {
   width: 100%;
   height: 40px;
   margin-top: 50px;
   text-align: center;
}

.top_detail_container>a {
   display: inline-block;
   height: 40px;
   position: relative;
}

.top_detail_hov {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
   opacity: 0;
   transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.top_detail_hov:hover {
   opacity: 1;
}

/* 1114大内追加: 北4条だけ調整 ここから */
#N4.top_park  {
   padding-top: 90px;
}

#N4.top_park.is-animated {
   padding-top: 180px;
}

#N4 .top_illust_container>img {
   top: -60px;
}

/* 1114大内追加: 北4条だけ調整 ここまで */

/* ----------------- 個別ページ ----------------- */
.headline-area {
   width: 100%;
   min-height: 150px;
   background-color: #fff;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
}

.headline-inner {
   width: 1160px;
   text-align: left;
   margin: 20px auto;
}

.headline-img {
   height: 140px;
}

.headline-text {
   margin-top: auto;
   margin-bottom: auto;
}

.bigshine_name {
   height: 20px;
   width: auto;
   margin-left: 3px;
}

.parking_name {
   font-size: 32px;
   font-weight: bold;
   margin: 3px 0;
}

/* 1120 斜めホバー仕様変更 */
.newslink {
   --color: #0055b4;
   cursor: pointer;
   padding: 2px 10px 1px;
   border: 1px solid var(--color);
   border-radius: 24px;
   background-image: linear-gradient(135deg, var(--color) 50%, transparent 50%);
   background-position: 99%;
   background-size: 240%;
   color: var(--color);
   text-decoration: none;
   transition: all 0.3s ease;
   position: relative;
   top: 10px;
   left: 20px;
   z-index: 1;
   line-height: 1.4;
}

.newslink:hover {
   background-position: 0;
   color: #fff;
}

.newslink_no {
   color: #727171;
   margin: 0;
   padding: 2px 10px 1px;
   border: 1px solid #727171;
   border-radius: 24px;
   color: #727171;
   text-decoration: none;
   transition: all 0.3s ease;
   position: relative;
   top: 10px;
   left: 20px;
   z-index: 1;
   line-height: 1.4;
}
/* 1120 斜めホバー仕様変更 END */

.parking_info {
   padding: 0;
   margin: 6px 0 0;
}

.flex {
   display: flex;
}

.comment::before {
   content: "■";
   position: relative;
   color: #0055b4;
   margin-right: 2px;
}

.comment {
   font-size: 16px;
   margin: 0 20px 0 0;
   list-style-type: none;
}

.page-area {
   background-color: #ebffff;
}

.media-area {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   background-color: #ebffff;
}

.media-inner {
   margin: 0 auto;
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
}

.media-photo {
   flex: 2;
   min-width: 200px;
   max-height: 270px;
   overflow: hidden;
}

.media-photo img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   border: 1px solid #ccc;
}

.media-map {
   flex: 3;
   min-width: 300px;
   height: 300px;
   border: 1px solid #ccc;
}

.media-map iframe {
   width: 100%;
   border: none;
}

.info-box {
   width: 100%;
}

.info-inner {
   max-width: 1028px;
   margin: 0 auto;
}

.title-box h2 {
   margin: 0;
   padding: 0 0 0 12px;
}

.title-box {
   background-color: #0055b4;
   padding: 8px;
   display: flex;
   align-items: center;
}

.info-title {
   color: #fff;
   font-size: 24px;
   font-weight: bold;
   letter-spacing: 0.15em;
   line-height: 28px;
}

.available-icon {
   height: 100%;
   margin-left: 10px;
}

/* 1205test */
.wp-block-image img{
   max-width: 100%;
   height: auto;
}

figure.available-icon {
   margin: 0 0 0 10px;
   height: 28px;
}

.info-list {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px solid #ccc;
}

.info-list li,
.info-list .setup {
   padding: 12px 20px;
   border-bottom: 1px solid #ccc;
   font-size: 16px;
   color: #333;
}

.info-list .setup {
   padding: 12px 0;
   align-items: center;
}

.info-list li:first-child,
.info-list .setup:first-child {
   border-top: none;
}

.setup dd {
   margin: 0;
   padding: 0 12px;
}

.label {
   color: #555;
   width: 100px;
   text-align: justify;
   text-align-last: justify;
   padding: 0 12px;
   flex-shrink: 0;
}

.label.addline {
   border-right: 1px solid #ccc;
}

.label span {
   letter-spacing: 0.05em;
}

_::-webkit-full-page-media,
_:future,
:root .label span {
   letter-spacing: 0;
}

.setup dd {
   border-left: 1px solid #ccc;
}

.setup dd.noline {
   border: none;
}

/*  料金シミュ  */
.price-sim {
   border: 1px solid #ccc;
   border-radius: 20px;
   margin-left: auto;
   margin-right: auto;
   background-color: #fff;
   padding-bottom: 20px;
}

.price-sim h3 {
   margin-left: 20px;
   margin-right: 20px;
   padding-left: 26px;
   padding-bottom: 4px;
   color: #0055b4;
   border-bottom: 2px solid #0055b4;
   position: relative;
}

.price-sim h3::before {
   content: 'P';
   background-color: #0055b4;
   color: #fff;
   font-size: 0.95em;
   position: absolute;
   top: 0px;
   left: 0;
   text-align: center;
   width: 18px;
   height: 16px;
   padding-left: 2px;
   padding-bottom: 4px;
}

.parking-form-container {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
   padding-left: 20px;
   padding-right: 20px;
   gap: 20px;
}

#parking-form {
   display: flex;
   align-items: center;
}

.parking-form-date {
   display: flex;
   flex-flow: column nowrap;
}

.parking-form-text {
   margin-left: 80px;
}

.arrow-shape {
   background-color: #0055b4;
   color: #fff;
   font-size: 14px;
   padding-top: 16px;
   padding-bottom: 16px;
   padding-left: 10px;
   padding-right: 24px;
   margin-right: 8px;
   border: none;
   cursor: pointer;
   clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
   /* transition: background 0.3s; */
   height: 54px;
}

/*
.arrow-shape:hover {
   background-color: #0055b4;
}
*/

.parking-duration {
   margin-top: 3px;
   padding-top: 4px;
   color: #333;
   border-top: 1px solid #0055b4;
   font-size: 0.95em;
}

.parking-fee {
   color: #333;
   font-weight: bold;
   font-size: 0.95em;
}

.parking-redmoji {
   font-weight: bold;
   color: red;
   font-size: 1.5em;
   text-align: right;
}

#result {
   width: 320px;
   height: 60px;
   border: 1px solid #0055b4;
   padding: 10px 16px;
   background-color: #fff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   line-height: 1;
}

/* 時分分割用レイアウト */
.parking-form-date label {
   display: inline-block;
   margin: 0 5px;
}

button {
   margin: 5px;
   padding: 5px;
   font-size: 1.5rem;
}

select {
   -webkit-appearance: none;   /* ベンダープレフィックス(Google Chrome、Safari用) */
   -moz-appearance: none;   /* ベンダープレフィックス(Firefox用) */
   appearance: none;   /* 標準のスタイルを無効にする */
   cursor: pointer;   /* マウスカーソルの形を指定する */
   height: 32px;   /* ボックスの高さを指定する */
   padding: 4px 8px;   /* ボックス内側の余白を指定する */
   border-radius: 0px;   /* 角丸を指定する */
   border-color: #333;
}

.select_wrapper {
   position: relative;
   display: flex;
   align-items: center;
}

.select_wrapper::after {
   content: "";
   position: absolute;
   top: 12px;
   right: 34px;
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   border-top: 8px solid #555;
   border-bottom: 0;
   pointer-events: none;
}

.icon-del {
   position: relative;
   -webkit-appearance: none;   /* ベンダープレフィックス(Google Chrome、Safari用) */
   -moz-appearance: none;   /* ベンダープレフィックス(Firefox用) */
   appearance: none;   /* 標準のスタイルを無効にする */
   border: 1px solid #333;
   padding: 0px 8px;   /* ボックス内側の余白を指定する */
   width: 200px;
}

.icon-del::-webkit-calendar-picker-indicator {
   position: absolute;
   opacity: 0;
   width: 100%;
   height: 100%;
}

#entry-hour,
#entry-minute,
#exit-hour,
#exit-minute {
   font-size: 1.12em;
   width: 110px;
   color: #333;
}

_::-webkit-full-page-media,
_:future,
:root #entry-hour,
#entry-minute,
#exit-hour,
#exit-minute {
   font-size: 1.1em !important;
}

.flex_ct {
   display: flex;
   align-items: center;
}

.note{
   margin: 3px 20px 0;
   font-size: 0.85em;
}

.note.first {
   margin-top: 16px;
}

.info-inner .note{
   margin: 10px 12px 0;
}

/*  アコーディオンメニュー  */
.accordion-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

/* idでジャンプした際のズレ修正 1125仕様変更  */
.info-list .accordion-item {
   display: block;
   padding: 0;
   scroll-margin-top: 70px;
}

.accordion-item:last-child {
   border-bottom: 1px solid #ccc !important;
}

.accordion-toggle {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 16px;
   margin: 0;
   padding: 12px 20px;
   background: none;
   border: none;
   cursor: pointer;
   box-sizing: border-box;
}

/*
.accordion-toggle:hover {
   background-color: #f0f0f0;
}
*/

.toggle-text {
   flex: 1;
   text-align: left;
}

.toggle-icon {
   color: #0055b4;
   font-weight: bold;
   font-size: 18px;
   margin-left: 10px;
   font-family: monospace;
}

.accordion-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
   padding: 0 12px;
   font-size: 16px;
}

.accordion-content p {
   padding: 0 50px;
   margin: 4px 0 12px 0;
   line-height: 1.3;
}

/* 展開時に付けるクラス */
.accordion-item.open .accordion-content {
   max-height: 80px;
}

/*  周辺情報エリア  */
/* ----------------- 1120追記 ----------------- */
.photo-track-wrapper {
   cursor: grab;
   /* 通常時は手のひら */
   scrollbar-width: none;
   /* Firefox用 */
   -ms-overflow-style: none;
   /* IE/Edge旧版用 */
}

.photo-track-wrapper.active {
   cursor: grabbing;
   /* ドラッグ中は握った手 */
}

.photo-track-wrapper::-webkit-scrollbar {
   display: none;
   /* Chrome/Safari用 */
}

.photo-scroll {
  user-select: none;       /* テキスト選択禁止 */
  -webkit-user-select: none; /* Safari対応 */
  -ms-user-select: none;     /* 古いIE対応 */
}
/* ----------------- 1120追記ここまで ----------------- */

.main-container.around {
   max-width: 1100px;
}

.around h2 {
   color: #0055b4;
   border-bottom: 2px solid #0055b4;
   padding-left: 20px;
   margin: 40px 0 20px;
}

.around h2 span{
   color: #F00;
   border: 1px solid #F00;
   border-radius: 6px;
   font-size: 17px;
   font-weight: normal;
   letter-spacing: 0;
   margin-left: 1em;
   padding: 2px 0px 2px 5px;
   position: relative;
   bottom: 3px;
}

.photo-scroll {
   position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
}

.photo-track-wrapper {
   overflow-x: auto;
   scroll-behavior: smooth;
   width: 100%;
}

.photo-track {
   display: flex;
   gap: 20px;
   padding: 10px 0;
}

.photo-item {
   flex: 0 0 auto;
   width: 240px;
}

.photo-wrapper {
   position: relative;
   width: 100%;
   height: 160px;
   overflow: hidden;
}

.photo-wrapper img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   /* トリミング */
   object-position: center 30%;
}

img.h_center{
   object-position: center;
}

img.h_top {
   object-position: center top;
}

img.h_5per {
   object-position: center 5%;
}

img.h_bottom {
   object-position: center 85%;
}

img.h_100per {
   object-position: center bottom;
}

.photo-item .credit{
   position: relative;
   top: 3px;
   right: 0px;
   margin: 0;
   padding-bottom: 5.51px;
   font-size: 0.7em;
   color: #333;
   text-align: right;
}

.caption-overlay {
   width: 100%;
   margin-top: 16px;
   color: #0055b4;
   font-size: 16px;
   font-weight: bold;
   text-align: center;
   box-sizing: border-box;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
}

.caption-bottom {
   margin-top: 14px;
   font-size: 14px;
   color: #333;
   line-height: 1.6;
   text-align: justify;
}

.caption-bottom span{
   word-break: break-all;
}

.scroll-btn {
   background-color: transparent;
   color: #333;
   border: none;
   margin: 0;
   padding: 8px 0;
   font-size: 30px;
   cursor: pointer;
   line-height: 1;
}

.scroll-btn:hover {
   color: #295aa1;
}

/* 
.js-scrollable {
   scroll-behavior: smooth;
}
*/

/* PC版 スクロールヒントが不要の際に使用する */
/*
@media screen and (min-width: 1141px) {
   .main-container.around .scroll-hint-icon{
      display: none;
   }
}
*/

.top-button-area {
   text-align: center;
   margin: 30px auto;
   max-width: 300px;
}

/* 1120 斜めホバー仕様変更 */
.top-button.slide {
   display: block;
   font-size: 18px;
   --color: #0055b4;
   cursor: pointer;
   padding: 15px 40px;
   border-bottom: 2px solid var(--color);
   border-right: none;
   border-radius: 0;
   background-image: linear-gradient(135deg, var(--color) 50%, transparent 50%);
   background-position: 100%;
   background-size: 230%;
   color: var(--color);
   text-decoration: none;
   transition: all 0.3s ease;
   position: relative;
   z-index: 1;
}

.top-button.slide::before {
   content: "＞";
   font-size: 20px;
   font-weight: 100;
   position: absolute;
   top: 12px;
   right: 24px;
}

.top-button.slide:hover {
   background-position: 0;
   color: #fff;
}
/* 1120 斜めホバー仕様変更 END */

/*************** お知らせ ***************/

.main-container.single {
   padding: 50px 0;
}

.newsarea {
   border: 1px solid #80aad9;
   background-color: #fff;
   border-radius: 20px;
   padding: 18px 20px;
}

.newstitle {
   border-bottom: 2px solid #0055b4;
   color: #0055b4;
   margin: 0;
   padding: 2px 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.newsarea p{
   line-height: 1.5;
   margin-bottom: 5px;
}

.newscomment {
   font-size: 1.1em;
   line-height: 1.2;
   padding: 0px 15px;
}


/* ---------------- 404 ---------------- */
.notFound{
   line-height: 1.5;
   margin: 1em;
}

.top-button-area.ver404{
   margin-top: 0;
}

/* PC版(左右マージン0) */
@media screen and (max-width: 1320px) {

   /* ---------------- トップページ ---------------- */
   .top_illust_container>img {
      right: -40px;
      max-width: 100%;
      max-height: 480px;
   }

   #N1>.top_illust_container>img {
      max-width: fit-content;
      width: calc(100% + 40px);
      left: -80px;
   }

   /* ----------------- 個別ページ ----------------- */
   .headline-inner {
      width: 90%;
   }
}

@media screen and (max-width: 1140px) {
   /* ---------------- トップページ ---------------- */


   /* ----------------- 個別ページ ----------------- */
   .main-container {
      max-width: 90%;
   }

   .media-map iframe {
      width: 100%;
      border: none;
   }

   .info-inner {
      max-width: 100%;
   }

   /*  料金シミュ  */
   #parking-form {
      width: 100%;
      justify-content: space-between;
   }

   .parking-form-container {
      gap: 1%;
   }

   .parking-form-date label {
      margin: 0;
   }

   .parking-form-date {
      width: 52%;
   }

   .parking-form-date .flex_ct {
      justify-content: space-between;
   }

   .parking-form-text {
      margin-left: 80px;
   }

   input[type="date"] {
      width: 30%;
      min-width: 120px;
      margin: 0 5px;
   }

   .arrow-shape {
      padding-left: 10px;
      padding-right: 20px;
      height: 54px;
      margin-right: 5px;
   }

   #result {
      width: 30%;
   }

   /* 時分分割用レイアウト */
   #entry-hour,
   #entry-minute,
   #exit-hour,
   #exit-minute {
      width: 100%;
      margin: 0 3px;
   }

   .select_wrapper {
      width: 24%;
      min-width: 57px;
   }

   .select_wrapper::after{
      right: 28px;
   }

   /*  アコーディオンメニュー  */
   .accordion-list {
      list-style: none;
      padding: 0;
      margin: 0;
   }

   /*  周辺情報エリア  */
   .main-container.around {
      max-width: 96%;
   }

   .photo-scroll {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 940px;
      margin: 30px auto 0;
   }

   .photo-track-wrapper {
      overflow-x: auto;
      scroll-behavior: smooth;
      width: 100%;
   }

   .photo-item {
      flex: 0 0 auto;
      width: 300px;
   }

   .caption-overlay {
      width: 100%;
      margin-top: 16px;
      color: #0055b4;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      box-sizing: border-box;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
   }


   .caption-bottom {
      margin-top: 14px;
      font-size: 14px;
      color: #333;
      line-height: 1.6;
   }

   .scroll-btn {
      display: none;
   }

   .scroll-btn:hover {
      color: #295aa1;
   }

   .top-button-area {
      text-align: center;
      margin: 30px auto;
      max-width: 300px;
   }
}

/* スマホ・タブレット版 */
@media screen and (max-width: 1000px) {

   /* ------------------- 全体 ------------------- */
   .pc-ver {
      display: none;
   }

   .sp-ver {
      display: block;
   }

   #goto_top,
   .goto_top {
      right: 5%;
   }
   /* ----------------- ヘッダー ----------------- */
   /* ハンバーガーメニュー */
   input#menu__toggle {
      display: block;
   }

   #menu__toggle {
      opacity: 0;
   }

   #menu__toggle:checked+.menu__btn>span {
      transform: rotate(45deg);
   }

   #menu__toggle:checked+.menu__btn>span::before {
      top: 0;
      transform: rotate(0deg);
   }

   #menu__toggle:checked+.menu__btn>span::after {
      top: 0;
      transform: rotate(90deg);
   }

   #menu__toggle:checked~.main-nav {
      right: 0 !important;
   }

   .menu__btn {
      position: fixed;
      top: 16px;
      right: 20px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      z-index: 100;
   }

   .menu__btn>span,
   .menu__btn>span::before,
   .menu__btn>span::after {
      display: block;
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #0055b4;
      transition-duration: .25s;
   }

   .menu__btn>span::before {
      content: '';
      top: -10px;
   }

   .menu__btn>span {
      content: '';
      top: 19px;
   }

   .menu__btn>span::after {
      content: '';
      top: 10px;
   }

   .main-nav {
      display: block;
      position: fixed;
      top: 0;
      right: -100%;
      width: 300px;
      height: 100%;
      margin: 0;
      padding: 80px 0;
      list-style: none;
      background-color: #ECEFF1;
      box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
      transition-duration: .25s;
      z-index: 99;
   }

   .hamburger-menu{
      background-color: transparent;
   }

   .hamburger-menu:has(#menu__toggle:checked~.main-nav){
      content: "";
      position: absolute;
      top: 0px;
      left: 0%;
      z-index: 98;
      display: block;
      width: 100%;
      height: 100vh;
      background-color: rgb(0 0 0 / 60%); 
      transition-duration: .25s;
   }

   .menu__item {
      display: block;
      padding: 12px 24px;
      color: #333;
      font-family: 'Roboto', sans-serif;
      font-size: 20px;
      font-weight: 600;
      text-decoration: none;
      transition-duration: .25s;
   }

   .menu__item:hover {
      background-color: #CFD8DC;
   }

   /* ---------------- トップページ ---------------- */
   /* マップ全体 */
   .top_map {
      height: 500px;
      overflow-x: scroll;
      overflow-y: hidden !important;
      /* 1202追記 スクロールバー非表示（IE・Edge）*/
      -ms-overflow-style: none;
      /*スクロールバー非表示（Firefox）*/
      scrollbar-width: none;
   }

   /* スマホ版マップ 1128 */
   .top_map::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 1000px;
      height: 100%;
      background-position: 40% 30%;
      background-size: 1100px;
      animation: fade_in 0.5s ease 1.4s both;
      overflow-x: scroll;
      overflow-y: hidden !important;
      /*スクロールバー非表示（IE・Edge）*/
      -ms-overflow-style: none;
      /*スクロールバー非表示（Firefox）*/
      scrollbar-width: none;
   }

   .draggable-scroll {
      cursor: grab;
      user-select: none;
      -webkit-overflow-scrolling: touch;
   }

   .scroll-track-horizontal {
      will-change: scroll-position;
   }

   /* scrollbar */
   /*
   .top_map::-webkit-scrollbar {
      width: 16px;
      height: 10px;
   }

   .top_map::-webkit-scrollbar-track {
      background-color: rgba(255, 255, 255, 0.3);
   }

   .top_map::-webkit-scrollbar-thumb {
      background: #0055B4;
      border-radius: 100px;
      width: 130px;
   }
   */

   /* スクロールバー非表示（Chrome・Safari）*/
   .top_map::-webkit-scrollbar,
   .top_map::before::-webkit-scrollbar {
      display: none;
   }

   
   

   .build{
      width: 1000px;
      height: 100%;
      background-position: 40% 30%;
      background-size: 1100px;
      background-repeat: no-repeat;
      position: absolute;
      top: 22px;
      overflow-x: scroll;
   }

   /* 左上のテキスト全体 */
   .top_map_txt {
      font-size: 3rem;
      position: sticky;
      left: 20px;
      width: 240px;
      line-height: 1.3;
      z-index: 10;
      pointer-events: none;
   }

   /* 左上のテキスト1行目 */
   .top_map_txt.ani_l1 {
      top: 10px;
   }

   /* 左上のテキスト2行目 */
   .top_map_txt.ani_l2 {
      top: 50px;
   }

   /* 駐車場イラスト&24時間ピクト(スマホ版) */
   .top_map_spil {
      width: calc(100% - 40px);
      height: calc(100vw * 0.54);
      position: relative;
      padding: 20px;
      z-index: 0;
   }

   .top_map_spil>.top_map_park {
      width: calc(100% - 40px);
      height: auto;
      top: 20px;
      bottom: auto;
      left: 0;
      right: 0;
      margin: 0 auto;
   }

   .top_map_spil>.top_map_24h {
      width: 100px;
      height: auto;
      top: -120px;
      bottom: auto;
      right: 20px;
   }

   /* ピン: 共通設定 */
   #MAP_N1,
   #MAP_N4,
   #MAP_N5,
   #MAP_C {
      width: 62px;
      height: 53px;
   }

   #MAP_N1>img:first-child,
   #MAP_N4>img:first-child,
   #MAP_N5>img:first-child,
   #MAP_C>img:first-child {
      width: 100%;
      height: auto;
   }

   .map_pin2 {
      width: 92px;
      bottom: -1px;
      left: -15px;
   }

   /* ピン：北1条 */
   #MAP_N1 {
      bottom: 98px;
      left: 140px;
   }

   /* ピン：北4条 */
   #MAP_N4 {
      top: 152px;
      left: 416px;
   }

   /* ピン：北5条 */
   #MAP_N5 {
      top: 73px;
      left: 712px;
   }

   /* ピン：中央 */
   #MAP_C {
      top: 118px;
      left: 704px;
   }

   /* 1127 キッチンカー追加 */
   #Flower{
      width: 210px;
      top: 190px;
      left: 276px;
   }

   /* バイク */
   #VEHICLE_1 {
      width: 59px;
      height: auto;
      bottom: 58px;
      left: 88px;
   }

   /* 車（黄） */
   #VEHICLE_2 {
      width: 150px;
      height: auto;
      bottom: 7px;
      left: 325px;
   }

   /* 車（水） */
   #VEHICLE_3 {
      width: 89px;
      height: auto;
      top: 252px;
      left: 703px;
   }

   /* 気球（花柄） */
   #BALLOON_1 {
      width: 59px;
      height: auto;
      top: 158px;
      left: 170px;
   }

   /* 気球（横線） */
   #BALLOON_2 {
      width: 41px;
      height: auto;
      top: 206px;
      left: 222px;
   }

   /* 気球（波線） */
   #BALLOON_3 {
      width: 41px;
      height: auto;
      top: 199px;
      left: 834px;
   }

   /* 走行車（銀） */
   #DRIVE_1,#DRIVE_2,#DRIVE_3,#DRIVE_4,#DRIVE_5,#DRIVE_6{
      height: auto;
   }

   #DRIVE_1{
      width: 37px;
      top: 229px;
      left: 50px;
      animation: Drive1 14s ease-out 2.6s both;
   }

   @keyframes Drive1 {
      0% {
         transform: translate(0px,0px) rotate(-13deg);
      }

      100% {
         transform: translate(345px,-66px) rotate(-13deg);
      }

      0%,100%{
         opacity: 0;
      }

      10%,
      90% {
         opacity: 1;
      }
   }

   /* 走行車（橙） */
   #DRIVE_2 {
      width: 32px;
      top: 118px;
      left: 622px;
      animation: Drive2 4s cubic-bezier(0.5, 0.5, 0.5, 0.85) 2.9s both;
   }

   @keyframes Drive2 {
      0% {
         transform: translate(0px,0px) rotate(-12deg);
      }

      100% {
         transform: translate(70px,-12px) rotate(-12deg);
      }

      0%,100%{
         opacity: 0;
      }

      10%,
      90% {
         opacity: 1;
      }
   }

   /* 走行車（灰） */
   #DRIVE_3 {
      width: 37px;
      bottom: 200px;
      left: 560px;
      animation: Drive3 13s ease-in-out 2.7s both;
   }

   @keyframes Drive3 {
      0% {
         transform: translate(0px,0px) rotate(-13deg);
      }

      100% {
         transform: translate(-280px,52px) rotate(-13deg);
      }

      0%,100%{
         opacity: 0;
      }

      10%,
      90% {
         opacity: 1;
      }
   }

   /* 走行車（桃） */
   #DRIVE_4 {
      width: 36px;
      position: absolute;
      top: 190px;
      left: 480px;
      animation: Drive4 10s ease-in-out 2.7s both;
   }

   @keyframes Drive4 {
      0% {
         transform: translate(0px,0px) rotate(-12deg);
      }

      100% {
         transform: translate(200px,-37px) rotate(-12deg);
      }

      0%,100%{
         opacity: 0;
      }

      10%,
      90% {
         opacity: 1;
      }
   }

   /* 走行車（空） */
   #DRIVE_5 {
      width: 32px;
      position: absolute;
      bottom: 133px;
      left: 590px;
      animation: Drive5 14s ease-out 2.8s both;
   }

   @keyframes Drive5 {
      0% {
         transform: translate(0px,0px) rotate(-13deg);
      }

      100% {
         transform: translate(-400px,73px) rotate(-13deg);
      }

      0%,100%{
         opacity: 0;
      }

      10%,
      90% {
         opacity: 1;
      }
   }

   /* 走行車（黒） */
   #DRIVE_6 {
      width: 37px;
      position: absolute;
      top: 232px;
      left: 665px;
      animation: Drive6 10s ease-in-out 2.9s both;
   }

   @keyframes Drive6 {
      0% {
         transform: translate(0px,0px) rotate(-9deg);
      }

      100% {
         transform: translate(170px,-32px) rotate(-9deg);
      }

      0%,100%{
         opacity: 0;
      }

      10%,
      90% {
         opacity: 1;
      }
   }

   .scroll-hint-icon-wrap{
      z-index: 2;
   }

   /* 駐車場名〜説明 */
   .top_park {
      padding-top: 40px;
      padding-bottom: 100px;
   }

   #N4.top_park,
   #N4.top_park.is-animated {
      padding-top: 40px;
   }

   .top_txt_container {
      width: 100%;
   }

   .top_h2 {
      font-size: 3.8rem;
      line-height: 1.5;
      margin-bottom: 5px;
   }

   .top_txt {
      text-align: justify;
      font-size: 1.6rem;
      margin-bottom: 20px;
   }

   /* 駐車場: 特約 */
   .top_partner_container {
      gap: 30px 4%;
   }

   .top_partner {
      width: 48%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
   }
   
   /* 駐車場: イラスト(スマホ版) */
   .top_illust_container.sp-ver {
      padding: 30px 0;
      width: 100%;
      height: fit-content;
      text-align: center;
      position: static;
   }

   #C>.top_illust_container {
      padding-top: 10px;
   }

   .top_illust_container>img{
      max-width: 100%;
      height: auto;
      position: static;
   }


   .top_detail_container {
      margin-top: 0;
   }

   /* モーダル用個別調整 */
   .modal-content .top_park {
      padding-top: 30px;
   }


   /* ----------------- 個別ページ ----------------- */
   /*  アコーディオンメニュー  */
   .accordion-content div.flex p {
      padding-right: 0px;
   }

   /*  周辺情報エリア  */
   .photo-scroll {
      gap: 10px;
      width: 94%;
      margin: 30px auto 0;
   }

   .photo-item {
      flex: 0 0 auto;
      width: calc(33% - 10px);
   }

}

@media screen and (max-width: 850px) {

   .modal-content .top_park {
      padding-left: 5px;
      padding-right: 5px;
   }

   .main-nav{
      width: 230px;
   }

   .main-nav a{
      margin-left: 10px;
   }

   /* ----------------- 個別ページ ----------------- */
   .flex_ct {
      justify-content: center;
   }

   .headline-inner .flex_ct {
      justify-content: flex-start;
   }

   .parking_info {
      margin: 0;
      flex-wrap: wrap;
   }

   .comment {
      margin: 6px 16px 0 0;
   }

   .label {
      width: 64px;
   }

   .label span {
      letter-spacing: 0.15em;
   }

   /*  料金シミュ  */
   .price-sim {
      border: 1px solid #ccc;
      border-radius: 20px;
      margin-left: auto;
      margin-right: auto;
      background-color: #fff;
      padding-bottom: 20px;
   }

   .price-sim h3 {
      margin-left: 20px;
      margin-right: 20px;
      padding-left: 26px;
      padding-bottom: 4px;
      color: #0055b4;
      border-bottom: 2px solid #0055b4;
      position: relative;
   }

   .price-sim h3::before {
      width: 20px;
      padding-left: 0px;
   }

   .parking-form-container {
      display: block;
      text-align: left;
      padding-left: 20px;
      padding-right: 20px;
      gap: 1%;
   }

   #parking-form {
      display: block;
      text-align: center;
      position: relative;
   }

   .parking-form-date {
      display: flex;
      width: 100%;
   }

   .parking-form-text {
      margin-left: 80px;
   }

   input[type="date"] {
      width: 33.5%;
   }


   .arrow-shape {
      font-size: 14px;
      /* sp-ver参考用メモ　下矢印クリッピング polygon(20% 0%, 80% 0%, 80% 60%, 100% 60%, 50% 100%, 0% 60%, 20% 60%)*/
      padding: 10px 50px;
      margin: 20px 0;
      border: none;
      cursor: pointer;
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
      height: 40px;
      /*position: absolute;
      top: 60%;
      right: 0;
      z-index: 2;*/
   }

   .parking-duration {
      margin-top: 3px;
      padding-top: 4px;
      color: #333;
      border-top: 1px solid #0055b4;
      font-size: 0.95em;
      text-align: left;
   }

   .parking-fee {
      color: #333;
      font-weight: bold;
      font-size: 0.95em;
      text-align: left;
   }

   .parking-redmoji {
      font-weight: bold;
      color: red;
      font-size: 1.5em;
      text-align: right;
   }

   #result {
      width: calc(96% - 34px);
      height: 60px;
      border: 1px solid #0055b4;
      padding: 10px 16px;
      margin: 0 auto;
      line-height: 1;
      /* 1121 注意文左揃え */
      text-align: left;
   }

   /* 時分分割用レイアウト */
   .parking-form-date label {
      text-align: left;
   }

   _::-webkit-full-page-media,
   _:future,
   :root #entry-hour,
   #entry-minute,
   #exit-hour,
   #exit-minute {
      font-size: 1.1em !important;
   }

   /*  アコーディオンメニュー  */
   .accordion-toggle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      margin: 0;
      padding: 12px 10px;
      background: none;
      border: none;
      cursor: pointer;
      box-sizing: border-box;
   }

   .accordion-content p {
      padding: 0 20px;
      margin: 4px 0 12px 0;
      line-height: 1.3;
   }

   .accordion-content div.flex {
      display: block;
   }

   .accordion-content div.flex p {
      margin-bottom: 16px;
      padding-right: 20px;
   }

   /* 展開時に付けるクラス */
   .accordion-item.open .accordion-content {
      max-height: 160px;
   }

   /*  周辺情報エリア  */
   .photo-scroll {
      gap: 10px;
      width: 94%;
      margin: 30px auto 0;
   }

   .photo-track-wrapper {
      overflow-x: auto;
      scroll-behavior: smooth;
      width: 100%;
   }

   .photo-item {
      width: calc(50% - 10px);
   }

   .photo-wrapper {
      height: 190px;
   }

   /***** お知らせ *****/
   

}

@media screen and (max-width: 579px) {

   /* ----------------- 個別ページ ----------------- */
   .media-inner {
      display: block;
   }

   .media-photo {
      width: 100%;
      height: 330px;
      overflow: hidden;
      border: 1px solid #ccc;
   }

   .media-photo img{
      border: none;
      height: 100%;
   }

   .media-map {
      min-width: 100%;
      height: 30vh;
      max-height: 300px;
      margin-top: 20px;
   }

   /*  周辺情報エリア  */
   .around h2 span{
      display: inline-block;
      right: 0;
      width: calc(100% - 150px);
      line-height: 1.2;
      padding: 2px 5px;
   }
}


@media screen and (max-width: 500px) {

   /* 駐車場: 特約 */
   .top_partner_header {
      width: 94%;
      margin: 0 auto 30px;
   }

   .top_partner_container {
      display: block;
      z-index: 1;
      width: 94%;
      margin: 0 auto;
   }

   .top_partner {
      width: 100%;
      margin-bottom: 30px;
   }

   .top_partner.last_place {
      margin-bottom: 0;
   }

   .top_partner>a::after {
      height: 150px;
   }

   .empty {
      display: none;
      margin: 0;
   }

   /* ----------------- 個別ページ ----------------- */
   .media-photo {
      height: 270px;
   }

   /*  料金シミュ  */
   .parking-form-date .flex_ct {
      position: relative;
      padding-top: 20px;
   }

   .parking-form-date label {
      position: absolute;
      top: -2px;
   }

   label[for="entry-hour"],
   label[for="exit-hour"],
   label[for="entry-minute"],
   label[for="exit-minute"]{
      top: -21px;
      left: 6%;
   }

   input[type="date"] {
      width: 45%;
      margin-left: 0;
   }

   .select_wrapper{
      margin-right: 0;
   }

   .select_wrapper::after {
      top: 13px;
      right: 10px;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      border-top: 7px solid #555;
   }


   /* 展開時に付けるクラス */
   .accordion-item.open .accordion-content {
      max-height: 210px;
   }

   /*  周辺情報エリア  */
   .photo-item {
      width: 100%;
   }

   .photo-wrapper {
      height: 220px;
   }


}

@media screen and (max-width: 374px) {
   .top_park{
      width: 90%;
      padding-left: 0;
      padding-right: 0;
   }

   .top_detail_container img{
      width: 100%;
      height: auto;
   }

   .top_news{
      position: relative;
      top: -8px;
      left: 30%;
   }

   /* ----------------- 個別ページ ----------------- */
   /*  周辺情報エリア  */
   .photo-wrapper {
      height: 200px;
   }
}