@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=M+PLUS+Rounded+1c:wght@400;800&family=Noto+Sans+JP:wght@100..900&display=swap');
/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  font-weight: normal;
  text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: """";
}
b{ font-weight: 500;}

a img {
  border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  font-size: 62.5%;/*初期値16pxの62.5%でルートが10px*/
   scroll-behavior: smooth;
scroll-padding-top: 80px;
} 
body {
  line-height: 1.5;
  font-size: 90%;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
/*全てをクリア*/
.clear {
  clear: both;
}
/* new clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix {
  zoom: 1;
} /* IE6 */
*:first-child + html .clearfix {
  zoom: 1;
} /* IE7 */
/* リンク設定
------------------------------------------------------------*/
a, a:visited {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  color: #297ACC;
  transition: all 0.5s ease 0s;
  cursor: pointer;
}
a:hover, a:active {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  outline: none;
  color: #D3306A;
}

/**** Clearfix ****/
/* レイアウト
------------------------------------------------------------*/
.inner {
  margin: 0 auto;
  max-width: 1100px;
  width: 98%;
}
.inner2 {
  margin: 0 auto;
  padding: 30px 0; position: relative;
  max-width: 890px;
  width: 95%;
}
.inner3 {
  margin: 0 auto;position: relative;
  max-width: 840px;
  width: 95%;
}
#wrapper {
  margin: 0 auto 0px;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 0 0 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-extrabold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
}
/* 共通変更 フォントサイズ　*/
.font12 { font-size: clamp( 12px, 1.2vw, 12px); }/*  10px 最大　2px*/
.font14 { font-size: clamp( 14px, 1.4vw, 14px); }/*  12px 最大　14px*/
.font16 { font-size: clamp( 14px, 1.6vw, 16px); }/*  14px 最大　16px*/
.font17 { font-size: clamp( 14px, 1.8vw, 17px); }/*  14px 最大　17px*/
.font18 { font-size: clamp( 16px, 1.8vw, 18px); }/*  16px 最大　18px*/
.font20{ font-size: clamp( 16px, 2.0vw, 20px); }/*  16px 最大　20px*/
.font22 { font-size: clamp( 18px, 2.2vw, 22px ); }/*  18px 最大　22px*/
.font24{ font-size: clamp( 18px, 2.4vw, 24px); }/*  18px 最大　24px*/
.font26{ font-size: clamp( 18px, 2.6vw, 26px); }/*  20px 最大　26px*/
.font28 { font-size: clamp(20px, 2.8vw, 28px); }/*  20px 最大　28px*/
.font30{ font-size: clamp(24px, 3.0vw, 30px); }/*  24px 最大　30px*/
.font32{ font-size: clamp( 20px, 3.4vw, 32px); }/*  26px 最大　32x*/
.font36{ font-size: clamp( 28px, 3.6vw, 36px); }/*  28px 最大　36px*/
.font38{ font-size: clamp( 28px, 3.8vw, 38px); }/*  28px 最大　36px*/
.font40{ font-size: clamp(26px, 4.0vw, 40px ); }/*  30px 最大　40px*/
.font46 { font-size: clamp( 32px, 4.6vw, 46px );}/*  32px 最大　46px*/
.font48 { font-size: clamp( 32px, 4.6vw, 48px ); font-weight: 600;}/*  32px 最大　46px*/

.orange{ color: #ef8c2c;}
.yellow{ color:#f0c600;}
.backorange{ background: #ef8c2c;}
.borderorange{ border:1px solid #ef8c2c;}
.backpaleorange{ background: #fff2e8;}
.backpaleorange2{ background:  #ef8c2c;}
.red{ color: #e8464d;}
.backred{ background: #e8464d;}
.borderred{ border:1px solid #e8464d;}
.blue{ color: #005eab;}
.backblue{ background: #005eab;}
.borderblue{ border:1px solid #005eab;}
.green{ color: #44ae35;}
.backgreen{ background: #44ae35;}
.bordergreen{ border:1px solid #44ae35;}
.backwhite{ background: #fff;}

.backyellow{ background: #f0c600;}

.flex{ display:  flex;align-items: flex-start; }
.flex-wrap{flex-wrap: wrap; }
.right{flex-direction: row-reverse; }
.justify-content{justify-content: space-between; }
u{ text-decoration: none;}
u.yellow,u.orange{ display: inline-block; margin: 0 0.2em; text-decoration: none;  text-shadow: 1px 1px 0 #000; font-size: 110%; font-weight: 600;}

/* ヘッダー
----------------------------------*/
#glovalheader{  z-index: 100;   }

@media screen and (min-width: 1080px) {
#glovalheader_mob{ display: none;}
#glovalheader-pc{ padding:0px 0 10px; margin: 0 auto !important; position: fixed;  width:174px;/*← fixedで固定 */}
#glovalheader-pc nav{ width:174px; height: auto; position:relative; }
#glovalheader-pc img.navback{ width:174px; height: auto;}
#glovalheader-pc .menu{ position: absolute;  top:20px; left:50%; transform: translateX(-50%); text-align: center; width:calc(100% - 4px); }

 #glovalheader-pc .menu h1{  background-size: 6px 2px; width:90%; margin: 0 auto; }
#glovalheader-pc .menu ul{  margin: 0px 0px  0 ; padding: 0 0 10px;   }
 #glovalheader-pc .menu ul li{  margin: 0px 0 0 ; padding: 0;  text-align: left; line-height: 1.3;   }
 #glovalheader-pc .menu  span{display: block; width:80%;  margin:0 auto 0 ;
  background-size: 6px 2px; 
  background-image: linear-gradient(to right, #ef8c2c  2px, transparent 4px);
  background-repeat: repeat-x;
  background-position: center bottom;
  padding-bottom:2px;  }   
    #glovalheader-pc .menu h1 span{ margin:0.5em auto 0 ; width:90%; }
#glovalheader-pc .menu ul li h4{padding: 0.7em 1em 0;}
#glovalheader-pc .menu ul li a{  color: #000;
    transition: all 0.5s ease 0s; padding: 0.7em 1em; display: block;
  cursor: pointer;
}
#glovalheader-pc .menu ul li a:hover,#glovalheader-pc .menu ul li a:active {
  -webkit-transition: opacity 1s; background: #fff2e8;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  outline: none;
}
 #glovalheader-pc .menu ul  ul{  margin: 5px 0px 0.8em;; padding: 0; }
  #glovalheader-pc .menu ul  ul li{  margin: 0px 0 0 ;}
  #glovalheader-pc .menu ul ul a{ position: relative; padding: 0.2em 0 0.2em 2.5em; }
  #glovalheader-pc .menu ul ul a img{ position: absolute; width:10px; top:50%; transform: translateY(-50%); left:1.5em;}
  #glovalheader-pc nav p{ position: absolute; bottom:15px; transform: translateX(-50%); left:50%; text-align: center; line-height: 1.2;}
    
.smaller #glovalheader-pc nav{ width:154px; height: auto; position:relative; }
.smaller #glovalheader-pc img.navback{ width:154px; height: auto; }
.smaller   #glovalheader-pc .menu ul li a{  padding: 0.5em;}
.smaller  #glovalheader-pc .menu ul ul a{ position: relative; padding: 0.2em 0 0.2em 1.5em; }
.smaller  #glovalheader-pc .menu ul ul a img{left:0.5em;}
.smaller #glovalheader-pc nav p{line-height: 1;}
.smaller #glovalheader-pc .menu{  top:10px; left:50%; }
.smaller #glovalheader-pc .menu ul li h4{padding: 0.7em 0em 0 0.5em;}
    .smaller #glovalheader-pc .menu ul li br{ display: none;}

}
@media screen and (max-width:  1080px) {
#glovalheader-pc{ display: none;}
 #glovalheader_mob{ width:98%; margin: 5px auto; z-index: 1200; position: fixed;  }
 #glovalheader_mob img.navback{ height: 50px; width:auto; }
 #glovalheader_mob h1{ position: relative;  overflow: hidden;  z-index: 10; margin: 0 0 0 5px; width:100% !important }  
 #glovalheader_mob h1 a img{ display: block; position:absolute; left:10px; top:50%; transform: translateY( -50% ); height: auto; width:250px;}  
    
        
/* ナビ
----------------------------------*/
nav.head {
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    width: 60%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
      z-index: 15;
    opacity: 0; background: #fff;
  }
    #glovalheader #navArea{ padding: 0;}
.moblogo{ display: block; margin: 1em auto; max-width:350px; height: auto; width:80%;}
    
    
#menu { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 0;  width:100%;   
}
#menu-inner {width: 100% !important;}
#menu-btn {
  display: none;
}

#menu-content {
  margin: 0; padding:0.8em 0 0;
  list-style-type: none;  text-align: center;
}

#menu-content > li { margin: 0;
  position: relative; padding:0  20px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;text-align: center;
}

#menu-content > li > a {
  display: block;
  padding: 0 0 0;
  color: #000;
  text-decoration: none; 
position: relative;
  cursor: pointer;
    
}
 #navArea  nav .inner ul li a:hover,#menu-content > li >  a:hover  {
 -webkit-transition: opacity 1s;
    background: #fff2e8;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  outline: none; color: #000;
}

   

  .open nav {
    left: 0;
    opacity: 1;
  }
 #navArea  nav .inner {
    padding: 1.5em 0; margin: 0  ; 
width: 100% !important;}
 #navArea  nav .inner ul {
    list-style: none; 
    margin: 0;
    padding: 0;
  }
 #navArea  nav .inner ul li {
    position: relative;
    margin: 0;
  }
 
 #glovalheader_mob  .toggle_back{  background:url("/themes/bousaitourism-hyogo/img/common/btnback_mob2.svg") 100% 50% no-repeat; background-size: auto 50px; text-align: right;}  
    
  .toggle_btn {
    position:relative; 
    width: 50px;
    height:50px; 
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    z-index: 3; margin: 0 10px 0 auto;
  }
  .toggle_btn span {
    position: absolute;
    left: 4px;
    width:42px;
    height: 3px;
    background-color: #ef8c2c;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .toggle_btn span:nth-child(1) {
    top:12px;
  }
  .toggle_btn span:nth-child(2) {
    top: 24px;
  }
  .toggle_btn span:nth-child(3) {
    bottom: 11px;
  }
  .open .toggle_btn span {
      background-color: #ef8c2c;
  }
  .open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(12px) rotate(-315deg);
    transform: translateY(12px) rotate(-45deg); 
  }
  .open .toggle_btn span:nth-child(2) {
    opacity: 0;
  }
  .open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-12px) rotate(315deg);
    transform: translateY(-12px) rotate(45deg);
  }

    
  #mask {
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 2;
    cursor: pointer;
  }

  #menu-content > li > a {
    height: 100%;
    padding: 1em  0.5em;
    font-size: 100%;
    background: #fff; 
    text-align: left;
  }


 #navArea  nav .inner ul li a , #navArea  nav .inner ul li a:hover{
    display: block;
    color: #000 !important;
    text-decoration: none;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
  #navArea  nav .inner ul li{ text-align: left; }
  #navArea  nav .inner ul li h4{ margin: 0.5em  0.5em }
  #navArea  nav .inner ul ul{ margin:0 0 1em; text-align: left; }    
 #navArea  nav .inner ul ul a{ position: relative; padding: 0.2em 0 0.2em 2.5em; }
 #navArea  nav .inner ul ul a img{ position: absolute; width:10px; top:50%; transform: translateY(-50%); left:1.5em;}
    #navArea  nav .inner ul li span{display: block; width:100%;  margin:0 auto 0 ;
  background-size: 6px 2px; 
  background-image: linear-gradient(to right, #ef8c2c 4px, transparent 4px);
  background-repeat: repeat-x;
  background-position: center bottom;
  padding-bottom:2px; 
    }  
     
  #navArea  nav .inner p{ margin: 1em auto ; text-align: center; line-height: 1.2; } }
   
@media screen and (max-width:  530px) {
#glovalheader_mob  .toggle_back{  background:url("/themes/bousaitourism-hyogo/img/common/btnback_mob3.svg") 100% 50% no-repeat; background-size: auto 50px; text-align: right; } 
 #glovalheader_mob h1{ position: relative;  overflow: hidden;  z-index: 10; margin: 0 0 0 5px;    }  
 #glovalheader_mob h1 a img{ display: block; position:absolute; left:10px; top:50%; transform: translateY( -50% ); height: auto; width:90%; max-width: 250px;}  
    
        
}
    


/* フッター
----------------------------------*/

#footer { margin: 0em auto 0; padding: 0em 0 0; width:100%;
  overflow: hidden;
  text-align: center;
  position: relative;  color: #fff;
}
#footer picture {  display: block; width: 100%; overflow: hidden;}
#footer picture img {  display: block; width: 110%; height: auto;  margin: 0 0 0 -5%;}
#footer div{ text-align: left; padding: 0.5em 0.5em 1em; position: relative;}
#footer div a{  color: #fff; display: inline-block; margin-right: 1em;}
#footer div small{  display: block; position: absolute; right: 0; bottom: 2px;}

#footer article.backorange .pref{ position: absolute; right:10px; bottom:25px; display: block; margin: 20px 0 0 auto; width:110px; height: auto;}
#footer article.backorange a.archive{ position: absolute;  right:125px; bottom:25px; display: block; margin: 20px 0 0 auto; width:auto; border: 1px solid #fff; height: auto;}
#footer article.backorange a.archive::before {
  content: '\f061';
font-family:"Font Awesome 7 Free";
font-weight: 900;
  margin: 0 0.5em 0 ;
}
#footer article.backorange a.archive:hover{ background: #fff;color: #297ACC; }

#footer article.backorange div.inner{ position: relative;}



#page-top1 {
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: -0px;
  right: 20px;
  width: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  transition: .5s;
  font-size: 16px;
  font-size: 1.6rem;
  vertical-align: middle;
  background: #e8464d;
  border-radius: 50%;
}
a#page-top1 {
  color: #fff !important;
}
#page-top1 span {
  display: block;
  margin: 10px auto 0;
  font-size: 20px;
  font-size: 2.0rem;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.center {
  text-align: center;
}

/* 共通文字
----------------------------------*/

ol {
  list-style: none;
  counter-reset: number;
}
li {
  position: relative;
  padding-left: 1.5em;
}


/* ホーム
----------------------------------*/
.maingazo{width: 100%; top:0;   position: relative;
    height:700px; 
    background-position: top center;
    background-size: cover; 
    display: block;
    align-items: center;
    justify-content: center; transition: all 0.5s ease 0s;}

.maingazo .maingazo1 { margin: 0 auto; width:100%; max-width: 800px;  padding: 40px 0 0;position: relative;}
.maingazo .maingazo1 .hyogo { margin:0px auto; width:90%; max-width: 383px;  height: auto; display: block;}
.maingazo .maingazo1 .stamp {  position: absolute;  width:50%; max-width:450px ; height: auto; top:20px; right: -35%;}
.maingazo .maingazo1 h1 { margin: 0 auto; width:90%; max-width: 500px; position: absolute;  top:30px; left:50%; transform: translate(-50%);}
.maingazo .maingazo1 h1 img{ width:100%;  height: auto;}
.maingazo .maingazo1 h1 span{  display: block; margin: 0.5em auto; text-align: center;;}
.topgazo{ width: 100%; height: 700px; position: relative;}

.maingazo .kazarikei{ position: absolute;  width:100%;  height: auto;bottom:-2px; left:50%; transform: translate(-50%);}
.maingazo .hito{  width:30%; max-width:286px ; height: auto;position: absolute; bottom:0px; right:0%; }

.contents{ background: #fff url("../img/common/back.png") 50% 0 repeat-y; background-size:100% auto;}
.contents article { padding: 50px 0 30px 120px; }
.contents article h2,.contents article h3 {  margin: 0 0 0em; }
.contents article h2 span{  display: inline-block;vertical-align: middle; color: #000; margin: 0 0.5em;}
.contents article h4 {  margin: 1em 0; font-weight: 500; }
.contents article div{ margin-right: 1em; position: relative;}


.contents article div img{position: absolute; width:170px; height: auto; left:-190px; top:20px;}
.contents article.topimg h2{ width:90%; max-width: 550px;}
.contents article.topimg h2 img{ width:100%; height: auto;}

.contents article.topimg picture.topimg1{  max-width: 100%; height: auto;  display: block; max-width: 650px; height: auto; margin: 1.5em 0 1em;}
.contents article.topimg picture.topimg2{  max-width: 100%; height: auto;  display: block; height: auto; margin: 1em 0 0;}
.contents article.topimg picture.topimg2 img{ width:100%; height: auto;}
.contents article.topimg p {margin: 0 0 1em;  letter-spacing: -0.5px;
background-color: #fff;
background-image:
  linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
  linear-gradient(180deg, #ef8c2c 1px, transparent 1px);

background-size:
  8px 100%,
  100% 2em;

background-position:
  0 0,
  0 1.8em;   /* ← ここが重要！1行分下にずらす */

background-repeat:
  repeat,
  repeat-y;
line-height: 2em;
padding: 0 8px 1px;
    
    
}

.contents article img.boystop0{position: absolute; width:170px; height: auto; left:-70px; top:250px;}
h2.topfaci{  margin:10px 0 10px 80px !important;}


/* PCレイアウト（基本） */
.contents .movie { background: url("../img/index/orangeback.png") 50% 100% no-repeat;   background-size: 100% auto; padding: 0 0 80px; z-index: 150;}
.contents .movie article .flex {
  display: flex; padding: 20px 0 0;
  align-items: stretch;
}


/* 共通 */
.video {
  position: relative;
  flex: 1; box-shadow: 0 2px 5px rgba(0,0,0,0.75);
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0; z-index: 300;
}

/* 横長動画 */
.video.wide {
  flex: 2.5;
  aspect-ratio: 16 / 9;
}

/* 縦長動画 */
.video.tall {
  aspect-ratio: 9 / 13;
}

/*📱スマホ：縦並び */
@media (max-width: 768px) {
.contents .movie article .flex {
  display: block;
  flex-wrap: wrap; width:100%; max-width: 400px; margin: 0 auto;
  justify-content: center;
}

  .video.wide {
    flex: none;
    width: 100%;
  }
.video.tall {   width: 47%;  display: inline-block; margin: 10px 1%;
}
}


/*兵庫県マップ*/
.mapback {
  margin: -300px auto 0 !important; padding:300px 0 0 ;
 background: url("../img/index/back.jpg") 0 300px repeat-x;
}
.map-container {
  position: relative; 
  max-width: 685px;
  margin: -150px auto 0 !important; padding: 150px 0 0 ;
}

svg {
  width: 100%;
  height: auto; padding: 0px 0 0 100px ;
}

.region {
  stroke: #fff;
  fill: rgba(0,0,0,0);
  cursor: pointer;
  pointer-events: all;
  transition: .2s;
}

.region:hover {
  fill:rgba( 255,255,255,0.8);
}

.map-container {
  position: relative;
}



.popup {
  position: absolute;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  width: 240px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: .25s;
}

.popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/*  吹き出しの三角 */
.popup::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%; transform: translateX(-50%);
  border-width: 12px 12px 0 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.1));
}


.popup a {
  display: block;
  margin-top: 8px;
  color: #4f7fe6; text-align: right;
  text-decoration: none; margin: 0 0 0 auto; width:7em;
}
.popup a::before {
  content: '\f061';
font-family:"Font Awesome 7 Free";
font-weight: 900;
  font-size: 16px;
  margin: 0 0.5em 0 -1.3em;
}

.popup.bottom::after {
  top: -12px;
  bottom: auto;
  border-width: 0 12px 12px 12px;
  border-color: transparent transparent #fff transparent;
}
ul.topchizu.mob{display: none;}
ul.topchizu{ position: absolute; left:0;top:220px;  z-index: 1100;}
ul.topchizu li { margin: 0.5em 0 0; padding: 0;}
ul.topchizu li a{ display: block;  border-radius: 20px; color: #000;  background: #fff; padding:2px 8px 0  30px; position: relative;}
ul.topchizu li a img{ width:20px; height: auto; position: absolute; left:5px; top:50%; transform:  translateY(-50%);}
ul.topchizu li a.borderorange:hover{ background: #ffd3ab;}
ul.topchizu li a.borderred:hover{ background: #ffc5c9;}
ul.topchizu li a.borderblue:hover{ background: #acdaf9;}
ul.topchizu li a.bordergreen:hover{ background: #eeffd2;}

.backpaleorange .slider{ padding: 20px 0;}
.backpaleorange .slider img {
  width: 95%; height: auto; border-radius: 10px; display: block; margin: 0 auto;
}

.pickup{ margin: 1em 0 1em auto;width:95%; max-width: 650px;}
.pickup span,.pickup2 span{ display: block;}
.pickup b,.pickup2 b{  font-weight: 600;}
.pickup a{ color: #fff; display: block; position: relative; margin: 0.5em 0 0 auto; width:200px; text-align: center; padding:0.3em 0.8em; border-radius: 20px; transition: all 0.5s ease 0s;}
.pickup a.backred:hover{ background: #ef8c2c; transition: all 0.5s ease 0s;}
.pickup a img{  width:20px; height: auto; position: absolute; left:10px; top:50%; transform: translateY( -50%); }
.pickup2{ margin: 0em 0 1em 80px;}

/* サブページ
----------------------------------*/

.breadcrumb {
  padding: 0 .5rem; 
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 8px 0 0 60px;
  padding: 0;
}
.breadcrumb li { margin: 0; padding: 0 0.5em;}
.breadcrumb li a{color: #666;}
.breadcrumb li:not(:last-child)::after {
  display: inline-block;
font-family:"Font Awesome 7 Free";  margin: 0 0 0 1.2em;
font-weight: 900;
  font-size:10px; color: #999;
  content: "\f105";
}

.sub .maingazo{width: 100%; top:0;   position: relative;
    background-position: top center;
    background-size: cover; 
    display: block;
    align-items: center; overflow: hidden;
    justify-content: center; transition: all 0.5s ease 0s;}

.course .maingazo{    height:478px; }
.sub .maingazo img{width: 100%;  height: auto;}
.sub .maingazo .hito{  width:25%; max-width:176px ; height: auto;}


/*コース*/
.sub .course_nav{z-index: 100; }
.course_nav ul{ padding: 8px  0 8px 125px; }
.course_nav ul li{  margin: 0 2px; width:calc(25% - 4px ); padding: 0;}
.course_nav ul a{ color: #000; font-weight: 500; display: block; padding: 5px 55px 5px 15px; position: relative; border-radius: 20px;z-index: 2000; text-align: center;}
.course_nav ul img{width:30px; height: auto; position: absolute; right:15px; top:50%; transform: translateY(-50%);}
.course .kobehanshin a{ background: #ffcace; border: 1px solid #ffcace;}
.course .awaji a{ background: #fff3e9; border: 1px solid #fff3e9;}
.course .kitaharima a{ background: #acdaf9; border: 1px solid #acdaf9;}
.course .tajima a{ background: #eeffd2; border: 1px solid #eeffd2;}
.course_nav ul a:hover img{ transition: transform 1s; top:40%;   transform: rotate(90deg); }
.kobehanshin a:hover,.awaji a:hover,.kitaharima a:hover,.tajima a:hover{ border: 1px solid #fff;}
.hanshin .course_nav ul li.kobehanshin a img,.awaji .course_nav ul li.awaji a img,.kitaharima .course_nav ul li.kitaharima a img,.tajima .course_nav ul li.tajima a img{ transition: transform 1s; top:40%; 
  transform: rotate(90deg); }
.hanshin .course_nav ul li.kobehanshin a,.awaji .course_nav ul li.awaji a,.kitaharima .course_nav ul li.kitaharima a ,.tajima .course_nav ul li.tajima a{ border: 1px solid #fff;}
.course  .contents article h3 {margin:0; padding: 0; }
.course .contents article img.img01{position: absolute;   height: auto; filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.5));}
.course .contents article img.img01{ width:420px;right:-50px; }
.awaji .contents article img.img01{ width:265px; right:50px;}


.course .contents article.course { padding:25px 0 50px 120px; }
.course .contents article div img.hito{width:140px; height: auto; left:-160px; top:50px; }
.kitaharima.course .contents article div img.hito,.tajima.course .contents article div img.hito{width:250px; left:-245px; }
.courselist h4{ color: #fff;   padding: 0.1em 0.5em; display: inline-block;transform: rotate(-5deg); position: absolute; left:-20px; }
.courselist  ol{
  counter-reset: num;
  list-style: none;
  padding-left: 0;
  margin: 3.5em 0 0 0;
}
.kitaharima .courselist  ol{
  margin: 3.5em 0 ;
}

.courselist  ol li {
  counter-increment: num;
  position: relative;
  padding: 0 0 14px 1.2em;
  margin-bottom: 14px;
  border-bottom: 3px dotted #000; /* ← 太ライン */
}
.courselist  ol li::before {
  content: counter(num);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1em;
  height: 1em;
  line-height: 1em;
  border-radius: 50%;
  border:1px solid #000;
  text-align: center;
}
.courselist  ol li img{ left:40%; top:calc(100% - 10px);  width:20px !important; height: auto;  transform: translateX(-40%);}
.courselist2 {  margin: -5em auto 0;}
.courselist2 h4{ color: #fff; border-radius: 20px; padding: 2px 1em; margin: 0 0;}

.courselist2  ol{
  counter-reset: num;
  list-style: none;
  padding-left: 0;
  margin: 3.5em 0 0 0;
}
.courselist2 ol li {background: #f5ffe9;border:1px solid #44ae35;border-radius: 20px; padding:1.5em; margin: 0 0 2em; text-align: center; position: relative;}
.courselist2 ol li img.arrow { position: absolute; left:50%; transform: translateX(-50%); bottom: -2em; width:50px; height: auto;}

.courselist2 ol li div h5 {
  counter-increment: num;
  position: relative;
  padding: 0 0 14px 1.2em;
}
.courselist2 ol li div h5::before {
  content: counter(num);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1em;
  height: 1em;
  line-height: 0.9em;
  border-radius: 50%;
  border:1px solid ;
  text-align: center;
}

.courselist2  ol li div{ display:  inline-block; vertical-align: top;}
.courselist2  ol li div.txt{ width:48%; text-align: left; margin: 1em 1% 0 0; }
.courselist2  ol li div.courseimage{ width:48%; height: auto; margin: 1em 0 0 1% ;  }
.courselist2  ol li div.courseimage img{  width:100%; height: auto; position: static; }


.courselist2  ol li h5{text-align: left; }
.courselist2  ol li h6{margin-bottom: 1.5em;}
.courselist2  ol li p{ display: block; }
.courselist2  ol li p.backwhite{  background: #fff; text-align: left;  padding: 8px 1.5em;}
.courselist2  ol li dl{  background: #fff;  margin: 1em 0 0;line-height: 1.3;}

.courselist2  ol li dt{  width:75px; position: relative;padding: 0.3em 0 0.3em 23px;}
.courselist2  ol li dt img{  width:15px; left:5px; top:6px; position: absolute; }
.courselist2  ol li dd{  width: calc(100% - 105px); padding: 0.3em 5px 0.3em 0; }

.courselist2  ol li div.courseimage  a.more{color: #fff;  display: block; position: relative;  padding: 0.2em 1em; width:210px; margin: 0.5em 0 0 auto; border-radius:30px; transition: all 0.5s ease 0s;}
.courselist2  ol li div.courseimage  a.more:hover{border-radius:5px; transition: all 0.5s ease 0s;}
.courselist2  ol li div.courseimage  a.more img{  width:20px; left:auto; right:10px; top:50%; transform: translateY( -50%) ; position: absolute !important;}
.courselist2 .shoyojikan{ display: block; text-align: right;  margin: 0; padding: 0;}

.spotlist h3{ margin: 2em 0 1em;}
.spotlist h3 span { display: inline-block; color: #fff; border-radius: 50%; width:1.5em; height: 1.5em; text-align: center;}
.spotlist ul { margin:2em 0  ;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
}
.spotlist ul.bosai { margin:2em 0 4em ;}
.spotlist ul li {
  display: flex;
  flex-direction: column;
padding: 0; position: relative; }
.spotlist ul li img { width: 100%; height: auto; margin: 0; padding: 0; border-radius: 10px; }
.spotlist ul  a{color: #000; overflow:hidden; border-radius: 10px;}
.spotlist ul li h4{ margin: 0; padding: 0;}
.spotlist ul li h4  span{ display: block;}
.spotlist ul li h5{ position: absolute; top:10px; left:10px; right: auto; background: rgba( 255,255,255,0.8); border-radius: 10px; padding: 0em 10px; width:6em; text-align: center;}
.spotlist ul li h6{ position: absolute; top:-1.5em; right:10px; border-radius: 50%; text-align: center; color: #fff; line-height: 1; padding:5px; width:2.5em; height:2.5em;}
.spotlist ul li h6 span{ display: block;}
.spotlist ul li span.more{ position: absolute; top:120px; right:8px;  background:#fff; border-radius:50%;  padding:10px; width:1em; height: 1em; text-align: center;}
.spotlist ul li span.more img{ width:25px; height: auto; margin: -5px 0px 0 -5px; padding: 0;}
.spotlist ul li a:hover  img{
	transform:scale(1.3);
	transition:0.3s;
}
.spotlist img.listhito1{ position: absolute; width:126px; height: auto; top:80px;left:-80px;}
.spotlist img.listhito2{position: absolute; width:146px; height: auto; bottom:20px; left:auto; right:-80px;}
#awaji .spotlist img.listhito2{ bottom:-60px; left:auto; right:-120px;}
#tajima .spotlist img.listhito2{ bottom:-60px; left:auto; right:-150px;}
.spotlist img.listhito1.smaller{  display: none;}


.shop-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
}

.shop-list img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .shop-list {
    grid-template-columns: repeat(2, 1fr);
  }
}


/*コース地図*/
div.inner2.mapdata{ padding: 50px 0 50px 65px; text-align: center; }
/* 地図全体 */
div.inner2.mapdata .map-container { 
  position: relative;
  display:block;
  width: 100%;
  max-width: 1000px; /* 元画像と同じ幅 */
}

/* 地図画像 */
#map {
  width: 100%;
  height: auto;
  display: block;
}

.awaji #map {
  max-width:420px; display: block; margin: 0 auto;
}

/* マーカーのコンテナ */
.map-container {
  position: relative;
}

.marker {
  position: absolute;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.marker-small {
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 16px;
font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.marker-large {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 30px;font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tooltip {
  position: absolute;
  transform: translateX(-50%);
  display: none;
  z-index: 100; background-color: #fff;
  padding: 5px;  font-size: 12px;
  border: 2px solid #44af35; text-align: left; line-height: 1.3;
}
.marker:hover {
  background-color: #e13d3d;
}

/* 吹き出しの下三角 */
.tooltip-arrow {
  position: absolute;
  bottom: -10px;
  left: 50%; transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #44af35;
}

/* 吹き出し内の画像 */
.tooltip-content img {
  max-width: 100%;
  height: auto;
  margin-top: 5px;
}
#markers-container{
position:absolute;
top:1%;
left:0;
width:100%;
height:100
}

/*施設*/

.facility .maingazo{    height:300px;  }

.facility .maingazo img.stamp{ position: absolute;  width:30%; max-width:400px ; height: auto; top:0; right:-30px;}
.facility .maingazo .headerdata{ position: absolute;  width:100%;  background: rgba( 255,255,255,0.8); bottom: 0; padding-bottom: 5px; }
.facility .maingazo article{padding: 10px 0 25px 160px;}
.facility .maingazo article span{ display: block;}
.facility .maingazo article h1,.facility .maingazo article h2{ display: inline-block; vertical-align: middle;}
.facility .maingazo article h2 b{ display: block;}
.facility .faci_nav { margin: -57px auto 0; }
.facility .faci_nav ul {  margin: 0 0 0 70px; background: #fff; padding: 0.5em;border-top: 1px dotted #ef8c2c; padding: 0;}
.facility .faci_nav ul li{  margin: 0 0 ; padding:2px 0;}
.facility .faci_nav ul li a{ display: block; padding: 0.1em 1em; color: #000; margin: 0;  line-height: 1;}
.facility .faci_nav ul li a:hover{ border: none; background: #fff2e8; }
.facility .faci_nav ul li:not(:last-child) a {
    border-right: solid 1px #000;
}
.facility.facilitykobe .faci_nav ul li.kobehanshin a,.facility.facilityawaji .faci_nav ul li.awaji a,.facility.facilitykitaharima .faci_nav ul li.kitaharima a,.facility.facilitytajima .faci_nav ul li.tajima a{ color:#ef8c2c;}


.facility .contents article.facidata { padding: 0px 0 50px 180px; }
img.mainfaciimage{ display: block; width:100%; height: auto; margin-bottom: 1em;}
.facility article.facidata h2{ font-weight: 500; margin: 0 0 0.8em; padding:0;}
.facility article.facidata h3{ font-weight: 500; margin: 1em 0 0; padding:0;}
.facility article.facidata p,.facility article.facidata img.subimage {display: inline-block ; vertical-align: top;}
.facility article.facidata p{width:50%; margin: 2em 0 0 ;}
.facility article.facidata p.nophoto{width:100%; display: block;}
.facility article.facidata img.subimage{ width:48%; height: auto; margin: 2em 0 0 1.5%;}
.facility article.facidata p span.chui{ display: block; position: relative; padding-left: 1em;}
.facility article.facidata p span.chui:before{content:"※"; position: absolute; left:0;}
.facility article.facidata span.photo{ margin: 20px auto;}
.facility article.facidata span.photo img,.facility article.facidata span.photo u{ width:48%; height: auto;}
.facility article.facidata span.photo u img{ width:100%; height: auto; display: block; margin-bottom: 0.5em}

.facility article.facidata ul{ margin: 0 0 1em 1em; width: 95%;}
.facility article.facidata ul li{ position: relative;padding: 0.3em 0 0em 23px;}
.facility article.facidata ul li:before{  position: absolute; 
font-family:"Font Awesome 7 Free"; left:1em; top:1em;
font-weight: 900;
  font-size:10px;
  content: "\f0c8"; }

.facility  .facidata  dl{ margin: 0 0; line-height: 1.3; padding: 1.5em 0 0; border-bottom: 1px solid #ef8c2c;}
.facility  .facidata  dt{  width:100px; position: relative;padding: 0.8em 0 0.8em 23px; border-top: 1px solid #ef8c2c;}
.facility   .facidata dt img{  width:15px; left:5px; top:0.8em; position: absolute; }
.facility  .facidata  dd{  width: calc(100% - 123px); padding: 0.8em 0;  border-top: 1px solid #ef8c2c; }
.facility  .facidata  dd h6{ position: relative;padding: 0.3em 0 0.3em 23px;}
.facility  .facidata  dd h6 img{  width:15px; left:5px; top:6px; position: absolute; }
.facility  .facidata  dd ul{ margin: 0 0 1em 1em; width: 95%;}
.facility  .facidata  dd ul li{ position: relative;padding: 0.3em 0 0.3em 23px;}
.facility  .facidata  dd ul li:before{  position: absolute; 
font-family:"Font Awesome 7 Free"; left:1em; top:0.75em;
font-weight: 900;
  font-size:10px;
  content: "\f0c8"; }
.facility  .facidata  dd a{ display: inline-block; margin-right: 1.5em; word-break: break-all;}
.facility  .facidata img.hito{position: absolute; width:146px; height: auto; top:20px; left:auto; right:-80px;}
.facility  iframe{ display: block;  width:100%; height: 250px; }

.facispotlist h3{ text-align: center !important; margin: 0em auto 1em}
.facispotlist img.listhito1{ position: absolute; width:86px; height: auto; top:300px;left:-80px;}
.facispotlist img.listhito2{position: absolute; width:146px; height: auto; bottom:20px; left:auto; right:-80px;}
.facispotlist img.listhito3{ position: absolute; width:125px; height: auto; top:80px;left:-80px;}
.facispotlist img.listhito4{position: absolute; width:100px; height: auto; bottom:0px; left:auto; right:-80px;}


.facispotlist ul.shop-list {
  display: grid; margin-left: 90px;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px 0;
  list-style: none;
  padding: 0;
}

.facispotlist .shop-list li{
  position: relative; border-radius: 10px; padding: 0; margin: 0 5px 1.5em;}

.facispotlist ul.shop-list li a {
  display: block; color: #000; text-align: center;
}

.facispotlist .shop-list li img.faciimg {
  width: 100% !important; padding: 0;
  height: auto;
  display: block;border-radius: 10px;
}
.facispotlist .shop-list li h4 {
  margin: 5px 0;display: block !important; line-height: 1.2; text-align: left;
}
.facispotlist .shop-list li h4  span{ display: block;}
.facispotlist .shop-list li h5{ position: absolute; top:10px; left:10px; right: auto; background: rgba( 255,255,255,0.8); border-radius: 10px; padding: 0em 10px; width:6em; text-align: center;}
.facispotlist .shop-list li span.more{ position: absolute; top:120px; right:8px;  background:#fff; border-radius:50%;  padding:10px; width:1em; height: 1em; text-align: center;}
.facispotlist .shop-list li span.more img{ width:25px; height: auto; margin: -5px 0px 0 -5px; padding: 0;}
.facispotlist .shop-list li a:hover  img{
	transform:scale(1.2);
	transition:0.3s;
}



/* スマホ */
@media (max-width: 768px) {
  .shop-list {
    grid-template-columns: repeat(2, 1fr);
  }
}


/*プライバシ*/
.privacy dt {
  margin: 1em auto 0;
  border-left: 5px solid #70a847;
  padding: 0 0 0 8px;
}
.privacy dd ul {
  margin: 0.5em;
}
.privacy dd ul li {
  margin: 0.5em 0 0.5em 1.4em;
}
.privacy dd ul li::before {
  content: '\f00c';
font-family:"Font Awesome 7 Free";
font-weight: 900;
  font-size: 16px;
  content: "\f14a"; 
  margin: 0 0.5em 0 -1.3em;
}
.privacy dd {
  margin: 0.5em 0 2em 15px;
}
.privacy .shomei {
  margin: 0 0 0 auto;
  max-width: 20em;
  width: 90%;
}
.privacy .shomei h3 {
  font-size: 18px;
  font-size: 1.8rem;
}
div.chuijiko {
  margin: 2em auto
}
div.chuijiko b {
  display: block;
  margin: 0 0 0 1.2em;
  padding: 0;
  font-weight: normal;
}
div.chuijiko b:before {
  content: "※";
  margin: 0 0.2em 0 -1em
}



/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:1250px) {.sub .maingazo img{height: 100%; width: auto; }
.facility .maingazo picture img{height: 100%; width: auto; overflow: hidden;}} 
@media only screen and (max-width:1100px) {
.contents .movie {padding: 0 0 80px 30px;}
}



@media only screen and (max-width:1080px) {
.contents article { padding: 50px 0 30px; }
.course .contents article.course { padding:25px 0 50px; }
.contents article img.boystop0{ width:170px; height: auto; left:auto; top:auto; right:-50px; bottom: -20px;}
h2.topfaci{  margin:10px 0 10px 0px !important;}
.pickup2{ margin: 0em 0 1em 0px;}
.maingazo .maingazo1 {   padding:90px 0 0;}
.maingazo .maingazo1 .stamp {  position: absolute;  width:50%; height: auto; top:90px; right:-10%;}
.maingazo .maingazo1 h1 { top:100px; left:50%; transform: translate(-50%);}    

.breadcrumb ul {
  margin: 8px 0 0 0px;
} 
.facility .maingazo article{padding: 10px 0 25px 0px;}
.facility .maingazo img.stamp{  top:50px; min-width: 250px; right:-30px;}
.facility .faci_nav ul {  margin: 0 0 0 0px; }
.facispotlist ul.shop-list { margin-left: 0px;}
.facility .contents article.facidata { padding: 0px 0 50px 0px; }
.course_nav ul{ padding: 8px 0 ; }
.course .contents article img.img01{ width:420px;right:0px; }
.awaji .contents article img.img01{ width:265px; right:50px;}
    
div.inner2.mapdata{ padding: 50px 0 ; }


#footer article.backorange a.archive{ position:static;   display: block; margin: 20px 0 0; width:26em;}
#footer article.backorange a.archive:hover{ background: #fff;color: #297ACC; }

}

@media only screen and (max-width:1078px) {
.contents .movie {padding: 0 0 80px 0px;}
}




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

svg {
  width: 100%;
  height: auto; padding: 0px 0 0 1px ;
}

.course_nav ul a{  line-height: 1.3; z-index: 0; padding: 5px 30px 5px 8px;}
.course_nav ul img{width:25px;  right:8px;}
}



@media only screen and (max-width:810px) {
    .maingazo .hito{   min-width: 165px; height: auto;position: absolute; bottom:0px; right:5%; }
    .mapback { padding:300px 20px 0 ;}
    .sub .maingazo .hito{   bottom:0px; right:-5%; }
.facispotlist ul.shop-list {
  grid-template-columns: repeat(3, 1fr);
}
.facility article.facidata p,.facility article.facidata img.subimage {display: block ; }
.facility article.facidata p{width:95%; margin: 2em auto 0 ;}
.facility article.facidata img.subimage{width:95%; height: auto; margin: 2em auto 0 ; max-width: 400px;}
.facility  .facidata img.hito{position: absolute; width:106px; height: auto; top:20px; left:auto; right:0px;}
.facility  .facidata  dd{  width: calc(100% - 223px); padding: 0.8em 100px 0.8em 0;   }
.sub .maingazo img{width: 100%;  height: auto;}
    .course_nav ul{ flex-wrap: wrap;}
.course_nav ul li{  margin: 2px; width:calc(50% - 4px); padding: 0;}
    .course .contents article img.img01{ width:45%; height: auto; right:0px; }
.awaji .contents article img.img01{ width:265px; right:50px;}
.course .contents article div img.hito{display: none;}

.courselist2  ol li div{ display:  block;  margin: 0 auto;}
.courselist2  ol li div.txt{ width:95%; text-align: left; margin: 1em auto 0; }
.courselist2  ol li div.courseimage{  width:95%; text-align: left; margin: 1em auto 0; }
   .courselist2  ol li div.courseimage  a.more{width:7em; margin: 0.5em auto; text-align: center;} 
.kitaharima .courselist  ol{
  margin: 3.5em 0 0;
}

.spotlist ul { margin:2em 0  ;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;

}
#markers-container{
top:6%;
}    
  .awaji #markers-container{
top:1%;
left:-8%;
}  
#page-top1 {
  bottom: 100px !important;

}
}
@media only screen and (min-width: 700px) {
.map-container_mob {display: none !important;}


}
@media only screen and (max-width: 700px) {
.sub .map-container {display: none !important;}
.map-container_mob {display: block !important; padding: 15px 0 0 0;}
.map-container_mob img { width: 100%; height: auto;}


}

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

  ul.topchizu.mob{display:block;} ul.topchizu.pc{display:none;}
ul.topchizu{ position: static;  margin: 1em auto; }
ul.topchizu li a{ display: block;  border-radius: 20px; color: #000;  background: #fff; padding:8px 8px 8px 30px; position: relative;}
ul.topchizu li a img{ width:20px; height: auto; position: absolute; left:5px; top:50%; transform:  translateY(-50%);}
ul.topchizu li a.borderorange:hover{ background: #ffd3ab;}
ul.topchizu li a.borderred:hover{ background: #ffc5c9;}
ul.topchizu li a.borderblue:hover{ background: #acdaf9;}
ul.topchizu li a.bordergreen:hover{ background: #eeffd2;}
.pickup{ margin: 1em auto 1em ;}
    


.facility  .facidata  dl{ margin: 0 0; line-height: 1.3; padding: 1.5em 0 0; border-bottom: 1px solid #ef8c2c;}
.facility  .facidata  dt{  width:100%; position: relative;padding: 0.8em 0 0em 23px;  }
.facility  .facidata img.hito{ top:-60px; left:auto; right:-10px;}
.facility  .facidata  dd{  width:100%;padding: 0.8em 0px 0.8em 23px; border:none; }
.flex.course{  display: block; margin: 1em auto;
     width:90%; max-width: 500px;}
    .course .contents article img.img01{ position: static; display: block;  width:90%; height: auto;  margin: 1em auto 0; max-width: 400px; }
.awaji .contents article img.img01{ width:265px;}
   #markers-container{
top:10%;
} 

.facility article.facidata span.photo u{ width:100%; max-width: 95%; margin: 1em auto; }
.facility article.facidata span.photo u img{ width:100%; height: auto; display: block; margin-bottom: 0.5em}

#footer article.backorange .pref{ position: static; margin: 10px 0 10px auto; }
    



}

@media only screen and (max-width: 560px) {
    .facility .maingazo{    height:200px;  }
.facility .maingazo .headerdata{ position: absolute;  width:100%;  background: rgba( 255,255,255,0.8); bottom: 0; padding-bottom: 5px; }
   .facility .faci_nav ul { border-bottom: 1px dotted #ef8c2c; padding: 0; flex-wrap: wrap;}
    .facility .faci_nav { margin: -20px auto 0; }
    .facility .faci_nav ul li{   width:50%;}
    .facility .maingazo h1.font48{ font-size: 26px;}
    .facility .maingazo h2 { font-size: 14px;  line-height: 1.3;}
    .facility .maingazo article h2 b{ display: inline-block !important;}
    .facility .maingazo article{padding: 0px;}
    .facility .faci_nav ul li:nth-child(2) a { border: none;
}.marker-small {
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-size: 12px;
font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.marker-large {
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 20px;
}
      
}
@media only screen and (max-width: 520px) {.maingazo{   height:650px;}
#footer div a{ display: block;}
.sub .maingazo{
  height:478px;
  overflow:hidden;
  display:flex; width: 100%;
  justify-content:center;
  align-items:center;
}

.sub .maingazo img{
  height:478px;
  width:auto;
}
      #markers-container{
top:18%;
} 
}
@media only screen and (max-width: 440px) {
  .contents article img.boystop0{width:120px; right:0; }
.facispotlist ul.shop-list {
  grid-template-columns: repeat(2, 1fr);
}

.spotlist ul { margin:2em 0  ;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;

} 
}


@media print {
   .slider{ display: none !important }
      #wrapper {
    font-size: 14px;
    font-size: 1.4rem;
  }
  /* 共通変更 フォントサイズ　*/
  .font12 {
    font-size: 10px;
    font-size: 1.0rem;
  }
  .font14 {
    font-size: 12px;
    font-size: 1.2rem;
  }
  .font16 {
    font-size: 14px;
    font-size: 1.4rem;
  }
  .font18 {
    font-size: 16px;
    font-size: 1.6rem;
  }
  .font20 {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .font22 {
    font-size: 20px;
    font-size: 2.0rem;
  }
  .font24 {
    font-size: 22px;
    font-size: 2.2rem;
  }
  .font26 {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .font28 {
    font-size: 26px;
    font-size: 2.6rem;
  }
     .font30 {
    font-size: 28px;
    font-size: 2.8rem;
  }
  .font32 {
    font-size: 30px;
    font-size: 3.0rem;
  }
  .font34 {
    font-size: 32px;
    font-size: 3.2rem;
  }
    .font36 {
    font-size: 34px;
    font-size: 3.4rem;
  }
    .font38 {
    font-size: 34px;
    font-size: 3.4rem;
  }
  .font40 {
    font-size: 38px;
    font-size: 3.8rem;
  }
.font86 {
  font-size: 70px;
  font-size: 7.0rem;
  font-weight: 600;
}
  .close {
      top: 5%; /* 上から10pxの位置 */
      left: 5%; /* 右から25pxの位置 */
  }
}
/*@print
A4用紙に特化したメディアクエリ*/
@page {
    size: A4;
    margin: 0;
}