@charset "utf-8";
/*——————————————————————
base
——————————————————————*/
html{
  font-size: 10px;
}

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    font-family: 'Noto Sans JP', sans-serif;
    color: #3E3E3E;
    /*全体バックに画像を配した場合以下を記載*/
    background-image: url("../img/top/23728699_s.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    background-position:center center;
    background-size: 20% 20%;
    margin: auto;
    
  }
  *
  {
    margin: 0;
    padding: 0;
  }

  a,
  a:link,
  a:visited,
  a:active {
    text-decoration: none;
    color: #3E3E3E;
  }

  * {
  box-sizing: border-box;
  }

.body_wrapper{
  overflow: hidden;
}


/*——————————————————————
————————————————————————
全体設定
————————————————————————
——————————————————————*/


.display_flex,.display_flex-s,.display_flex-r{
  display: flex;
}

.display_flex.space-between{
  justify-content: space-between;
}


.space._00{
  height: 0.4rem;
}

.space._01{
  height: 1rem;
}

.space._02{
  height: 2rem;
}

.space._03{
  height: 3rem;
}

.space._04{
  height: 4rem;
}

.space._06{
  height: 6rem;
}

.space._08{
  height: 8rem;
}

.space._16{
  height: 16rem;
}


/*——————————————————————
hタグフォント指定講習
hタグは基本そのままで使うこと
hタグの前にclass名をつけない
——————————————————————*/

h1{
    font-size: 5rem;
    font-weight: bold;
}

h1 span{
  font-size: 2rem;
  font-weight: 400;
}

h2{
  font-size: 4rem;
  font-weight: bold;
  line-height: normal;
  color: rgba(58, 109, 173, 1);
}

h2 span{
  padding: 1rem;
  font-size: 1.8rem;
  font-weight: 400;
}

h2 p{
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 3rem;
  padding: 2rem 0;
}

h2 span.span-s{
  position: absolute;
}

h3{
  font-size: 1.8rem;
  
}

h3 span{
  line-height: 3rem;
}

h3 p{
  display: inline;
  font-size: 1.3rem;;
}

h4{
  font-size: 1.6rem;
}

h4 p{
  font-weight: 600;
}

/*——————————————————————
tableの基礎設定
——————————————————————*/
/*
.tables_item td{
  font-size: 1.8rem;
  font-weight: 300;
  padding: 1.6rem;
}

.tables_item._01 td,.tables_item._02 td{
  border-bottom: solid #B7B7B7 1px;
}
.tables_item._02 td:first-child{
  border-top: solid #B7B7B7 1px;
}
*/

/*——————————————————————
メインBOX指定
——————————————————————*/


/*-----------------------------
fieldはセンター配置指示のみ
field基本幅指定のみで使用する
幅等の支持は._00〜を付与し指定すること
-----------------------------*/

.field{
  margin: 0 auto;
}

.field._01{
  background: rgba(255, 255, 255, 1);
}

.field._01._a{
  position: relative;
  background: linear-gradient(180deg, rgba(223, 247, 255, 1) 64%, rgba(255, 255, 255, 1) 64%);
}

.field._01._b{
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 64%, rgba(223, 247, 255, 1) 64%);
}

.field._02{
  background-image: url("../img/top/corse-back.jpg");
  background-repeat: no-repeat;
  background-position:top center;
  background-size: 100%;
  margin: auto;
  width: 100%;
  /*height: 105rem;*/
  background-size: cover;
}

/*ここまで*/

.field._04{
  position: relative;
}

/*-------------------------------------------
.entry,.innerは.field._01等で指示した幅(高)に対し
色・写真等の配置、paddingの指定をする
-------------------------------------------*/


.entry._01{
  width: 104rem;
  margin: 0 auto;
}

.entry._01._a{
  padding: 1.6rem 1.6rem 10rem 1.6rem;
}

.entry._01._c{
  text-align: center;
}


.entry._02{
  width: 114rem;
  margin: 0 auto;
  background: none;
}

.inner._03{
  justify-content: space-between;
}


/*
.inner._04{
  padding: 6rem 4rem;
  background: #fff;
}

.inner._05{
  justify-content: space-between;
}

.inner._06{
  background: #fff;
}
*/

/*————————————————————————————————
border設定 ※基本的にmarginは入れない
————————————————————————————————*/

.border{
  /*height: 0.2rem;*/
  background: #E2E2E2;
}

.border._00{
  border-top: 2px dotted;
  content: "";
  width: 3.2rem;
  margin-left: 1rem;
}

.border._01{
  width: 4.8rem;
}

.border._01._a{
  background: #3E3E3E;
}


.border._02{
  width: 4.8rem;
  margin: 2.2rem 0;
}

.border._03{
  display: block;
  width: 100%;
  height: 1px;
  margin: 3rem 0;
  background: #E2E2E2;
  align-items: start;
}


/*———————————————————————————————————————
fadeInアクションの一例
translateの()内で縦軸・横軸の
移動量を指示する(.is-showのclass付与)でJQ発動
.inBoxはjQ発動前の位置
————————————————————————————————————————*/


.fadeIn_up{
  opacity: 0;
  transform: translate(0, 20%);
  transition: 1s;
}

.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.inBox {
  margin: 2.2rem 0;
}


/*——————————————————————
scroll_down 設定の一例
——————————————————————*/
.scroll_down{
    position: absolute;
    display: inline-block;
    width: 1px;
    height: 10rem;
    background-color: #3E3E3E;
    left: 50%;
    bottom: 0;
  }
  
  .scroll_down p{
    margin: 0 auto;
    margin-left: -18px;
    margin-top: -16px;
  }
  
  .scroll_down span {
    position: absolute;
    top: 8px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /*-webkit-animation: sdb 2s infinite;*/
    animation: sdb 2s infinite;
    border: 1px solid #3E3E3E;
  }
  
  
  @keyframes sdb {
    0% {
      transform: rotate(-45deg) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: rotate(-45deg) translate(-68px, 68px);
      opacity: 0;
    }
  }
  /*scroll_down一例 ここまで*/



/*——————————————————————
サブナビ(上部ナビ)メニュー
——————————————————————*/

.sab-navi{
  position: relative;
  width: 100%;
  height: 6rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.sab-navi img{
  width: 3rem;
  height: auto;
  margin-right: 0.6rem;
}

.sab-navi li{
  align-items: center;
}

.menu._03 a{
  font-size: 1.4rem;
  font-weight: bold;
  color: rgba(58, 109, 173, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.menu._03 .words a{
  font-size: 1.4rem;
  font-weight: bold;
  color: rgba(58, 109, 173, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.menu._03.iconb a{
  margin-right: 0rem;
}

.sab-navi li a:hover{
  color: rgba(62, 62, 62, 0.5);
}

.sab-navi  li a:hover:after{
  transform: scale(1);
}



.dli-chevron-down {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width:0.8rem;
  height: 0.8rem;
  border: solid rgba(189, 190, 191, 1)2px ;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  margin-left: 1rem;
}




/*——————————————————————
ナビメニュー
——————————————————————*/

.fs-logo{
  position: relative;
  width: 16rem;
  height: 18rem;
  background: rgba(255, 255, 255, 1.0);
  border-radius: 0 0 2rem 2rem;
  margin-left: 8rem;
  filter: drop-shadow(4px 4px 10px rgba(62,62,62,0.2));
  z-index: 2;
}

.logo{
  position: absolute;
  top: 0rem;
  padding: 4.6rem 2.6rem 0 2.6rem;
  transition: .4s;
}

.logo:hover{
  opacity: 0.4;
}

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


.header_inner{
  position: fixed;
  width: 100%;
  height: 12rem;
  background: rgba(255, 255, 255, 1.0);
  z-index: 2;
}

.navArea{
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom: 0;
  align-items: center;
  background: rgba(66, 189, 216, 1);
  height: 6rem;
  /*padding: 0rem 1.6rem;*/
}

.global_menu{
  position: absolute;
  min-width: 76%;
  right: 0rem;
  top: 0;
  bottom: 0;
}

.header_nav{ 
  align-items: center;
}

.menu{
  height: 6rem;
  width: 100%;
  padding: 0 0.4rem;
}

.menu._01{
  background: rgba(58, 109, 173, 1);
}

.menu._02{
  background: rgba(66, 189, 216, 1);
}

.menu._03{
  height: auto;
  width: auto;
}


.navArea,.header_nav{
  justify-content: space-between;
}

.header_nav ul li {
  height: 80px;
  text-align: center;
}

.header_nav li a{
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 1.6rem;
  font-weight:500;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(244, 244, 244, 1);
  transition: .4s;
  cursor: pointer;
}



.header_nav li a:after{
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
}


/*=============================
マウスオーバーで中央から波紋 の仕様
=============================*/
.btnripple{
  /*波紋の基点とするためrelativeを指定*/
position: relative;
  /*はみ出す波紋を隠す*/
overflow: hidden;
  /*ボタンの形状*/
}

.btnripple a:hover::after{
    content: "";
    /*絶対配置で波紋位置を決める*/
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*波紋の形状*/
    background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
    transform: scale(11, 11);
    /*はじめは透過0に*/
    opacity: 0;
    /*アニメーションの設定*/
    transition: transform 0.3s, opacity 0.4s;
}

/*クリックされたあとの形状の設定*/
.btnripple:active::after {
  transform: scale(0, 0);
  transition: 0s;
  opacity: 0.3;
}


/*——————————————————————
Mega Menu
——————————————————————*/
.child_menu {
  position: absolute;
  display: none;
  right: 14.8rem;
  width: 10rem;
  text-align: center;
  /*
  background: rgba(255, 255, 255, 1);
  border: solid rgba(255, 255, 255, 1)1px;
  */
  border-radius: 0.4rem;
  z-index: 1;
}

.child_menu li{
  background: rgba(255, 255, 255, 1);
  padding: 1rem;
}


/*
ul.child_menu{
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

li.menu:hover ul.child_menu{
  visibility: visible;
  opacity: 1;
}


li.menu ul.child_menu > li {
  display: block;
  padding: 0 2rem;
  border: none;
}
*/


/*——————————————————————
Side Menu
——————————————————————*/
.calendar-icon{
  position: fixed;
  z-index: 2;
  right: 0rem;
}

.calendar-icon{
  bottom: 0rem;
}

.calendar-icon_in{
  display: block;
  width: 8.8rem;
  height: 9rem;
}

.calendar-icon_in._a{
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  transition: .3s;
}

.calendar-icon_in._a img{
  width: 8.8rem;
  height: 9rem;
}


/*——————————————————————————————————
詳細はこちらbutton指示
——————————————————————————————————*/

/*—————————矢印ポジション指示————————*/
.san-button{
  position: absolute;
  width: 100%;
  height: 5.6rem;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
  transition: .4s;
}

/*—————————左揃え————————*/
.san-button.-a{
  left: 0;
}

/*—————————中央揃え————————*/
/*文字数によってwidthの数値変更必要
　arrouwにも変更必要箇所あり*/
.san-button.-b{
  position: relative;
  margin: 0 auto;
  width: 17rem;
}

/*—————————右揃え————————*/
.san-button.-c{
  right: 0;
}


/*———————サークル矢印——————*/

/*
.circles{
  position: absolute;
  right: 0;
  width: 5.6rem;
  height: 5.6rem;
  border:solid #3E3E3E 1px;
  border-radius: 2.8rem;
}

.arrow{
  position: absolute;
  display: flex;
  align-items: center;
  right: 4rem;
  transition: .4s;
  color: #3E3E3E;
}


.lines{
  position: relative;
  width: 5rem;
  height: 1px;
  background: #3E3E3E;
  transition: .4s;
}

.lines::after {
  position: absolute;
  content: '';
  width: 9px;
  height: 1px;
  transform: rotate(42deg);
  background: #3E3E3E;
  transition: .4s;
  bottom: 3px;
  right: 0;
}

button:hover .arrow{
  right: 3rem;
}
*/

.itemss {
  position: relative;
  margin: 0 auto;
  width: 32rem;
  height: 7.2rem;
  /* background: #FFF; */
  border: solid rgba(58, 109, 173, 1) 2px;
  border-radius: 4rem;
  transition: 0.4s;
}

.moji_hover p {
  font-weight: 600;
  letter-spacing: 4px;
  font-size: 2rem;
  color: rgba(58, 109, 173, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
}

.arrown{
  display: block;
  width: 1.2rem;
	height: 1.2rem;
	border-top: 0.2rem solid rgba(58, 109, 173, 1);
	border-right: 0.2rem solid rgba(58, 109, 173, 1);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
  transition: 0.4s;
}

.itemss:hover{
  background: rgba(58, 109, 173, 1);
}

.itemss:hover p{
  color: rgba(255, 255, 255, 1);
}

.itemss:hover .arrown{
  border-top: 0.2rem solid rgba(255, 255, 255, 1);
	border-right: 0.2rem solid rgba(255, 255, 255, 1);
}

/*——————————————ここまで—————————————*/


/*———————————————————————————
画面いっぱいfirst-view 設定の一例
———————————————————————————*/
/*——————————————————————
ファーストビュー タイトル
——————————————————————*/

.aquamarine-back{
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.aquamarine-back img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.aquamarine-moji{
  position: absolute;
  width: 90%;
  height: 100%;
}


.swiper-slide{
  display: flex;
  justify-content: center;
}


.h1_title,.osakana{
  position: absolute ;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}


.osakana img,.h1_title img{
  position: absolute;
}

.osakana{
  width: 100%;
  height: 100%;
}

.h1_title img{
  right: 0;
  z-index: 1;
}


.osakana._01 img{
  width: 70rem;
  height: 38rem;
  /*right: 0;*/
}

.h1_title._01 img{
  width: 62rem;
  height: auto;
}

.osakana._02 img{
  width: 84.6rem;
  height: 51.9rem;
}

.h1_title._02 img{
  width: 66rem;
  height: 30.7rem;
}

.osakana._03 img{
  width: 73.4rem;
  height: 69.6rem;
  right: 0;
}

.h1_title._03 img{
  width: 60.6rem;
  height: 33.77rem;
  left: 0;
}

.osakana._04 img{
  width: 72.3rem;
  height: 58.7rem;
}

.h1_title._04 img{
  width: 63.3rem;
  height: 33.4rem;
}




/*———————————————————————————
スクロールアイコン指示
———————————————————————————*/

.scroll_icon{
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: center;
  /*align-items: flex-end;*/
  z-index: 2;
}

.scroll_icon img{
  width: 27.6rem;
  height: auto;
}

.svg-s{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}


.arrowsss {
  position: absolute;
  width: 8rem;
  height: 8rem;
  bottom: 0;
}

.arrowsss path {
  stroke: rgba(227, 127, 42, 1);
  fill: transparent;
  stroke-width: 0.4rem;  
  animation: arrow 2s infinite;
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}


.arrowsss path.a1 {
  animation-delay:-1s;
  -webkit-animation-delay:-1s; 
}

.arrowsss path.a2 {
  animation-delay:-0.5s;
  -webkit-animation-delay:-0.5s;
}

.arrowsss path.a3 { 
  animation-delay:0s;
  -webkit-animation-delay:0s;
}


/*—————————————————————————————————
———————————————————————————————————
トップ イベントボックス エリア
———————————————————————————————————
—————————————————————————————————*/


.inner._01{
  width: 100%;
  height: auto;
  border: solid rgba(58, 109, 173 , 1) 0.5rem;
  border-radius: 1rem;
  padding: 1rem;
  z-index: 1;
}


.section-backgrounder{
  position: relative;
  background: rgba(223, 247, 255, 1);
}

/**/
.big_dotted{
  /*線の高さスペース*/
  height: 4rem;
  /*線の太さ*/
  background-size: 4rem 4rem;
  /*ドット線の色・間隔・丸み*/
  background-image : radial-gradient(rgba(255, 255 ,255, 1) 70%, transparent 50%);
  /*線の位置*/
  background-position: bottom; 
  margin-top: -2rem;
  /*親要素のpaddingを無効にする場合*/
  margin-left: -4rem;
  margin-right: -4rem;
}




.space_01{
  width: 30%;
  text-align: center;
}

.space_02{
  width: 29%;
  text-align: center;
}

.space_02._a{
  width: 36%;
  text-align: center;
  margin-left: auto;
}

.space_02._a span{
  display: inline-block;
  text-align: left;
}

.migi_line{
  border: solid rgba(58, 109, 173, 1) .5px;
  margin: 0 2.6rem;
}

.news-title{
  font-size: 2rem;
  font-weight: 600;
  color: rgba(58, 109, 173, 1);
  line-height: 3rem;
}

.busi-time{
  font-size: 4rem;
  font-weight: bold;
}

.busi-time-h{
  font-size: 1.6rem;
  font-weight: lighter;
}

.parking{
  justify-content: center;
  align-items: center;
  margin-top: 0.6rem;
}

.parking-s{
  font-size: 4rem;
  font-weight: 600;
  color: rgba(10, 182, 60, 1);
}

.parking-if{
  font-size: 2rem;
  font-weight: 600;
  color: rgba(62, 62, 62, 1);
  background: rgba(233, 238, 244, 1);
  padding: 0.6rem;
}


.parking-if span{
  font-size: 4rem;
  color: rgba(58, 109, 173, 1);
}

.event-s{
  font-size: 1.6rem;
  color: rgba(0, 151, 214, 1);
  text-align: left;
  line-height: 2.3rem;
}

.event-s span{
  color: rgba(58, 109, 173, 1);
}


.sab-ti{
  font-family: Montserrat;
  font-size: 3.2rem;
  color: rgba(58, 109, 173, 1);
  align-items: center;
}

.title-first .sab-ti img{
  width: 6.4rem;
  height: auto;
  margin-right: 1.6rem;
}

.title-first,.marine-events{
  justify-content: space-between;
}


.title-first img{
  width: 18rem;
  height: 8rem;
}


/*——————————ここまで———————————*/


/*——————————————————————————————————
————————————————————————————————————
現在開催中のイベント・企画展 エリア
————————————————————————————————————
——————————————————————————————————*/


.event-box{
  width: 32rem;
  height: 40rem;
  border-radius: 2rem;
  padding: 1.6rem;
  background: rgba(255, 255, 255, 1);
  filter: drop-shadow(4px 4px 20px rgba(62,62,62,0.1));
  transition: 0.4s;
}

.event-box img{
  width: 28.8rem;
  height: auto;
  transition: 0.4s;
}

.event-box:hover img{
  opacity: .5;
}

.event-dada{
  flex-flow: column;
  justify-content: space-between;
}


.event-icon span{
  font-size: 1.6rem;
  padding: 0rem 1rem;
  border-radius: 1.2rem;
  color: rgba(255, 255, 255, 1);
}

.event-icon._name01 span{
  background: rgba(58, 109, 173, 1);
}

.event-icon._name02 span{
  background: rgba(63, 193, 132, 1);
}

.event-ti{
  font-size: 2rem;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.period{
  font-size: 1.6rem;
  line-height: 2.2rem;
}



/*——————————————————————————————————
————————————————————————————————————
お知らせ エリア
————————————————————————————————————
——————————————————————————————————*/

.info-item{
  position: relative;
  height: 7.2rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 1);
}

.info-item.-a{
  background: rgba(236, 250, 255, 1);
}

.info-item-inner{
  position: absolute;
  justify-content: space-between;
  padding: 0 4rem;
  width: 100%;
  height: 100%;
  align-items: center;
}

.info-item-inner::before{
  opacity: 0;
  content: "";
  width: 100%;
  height: 7.2rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(45deg,rgba(0,147,233,0.3),rgba(128,208,199,0.3));
  z-index: 1;
  transition: .4s;
}

.info-item-inner-s::before{
  background: rgba(255, 255, 255, 1);
}

.info-item:hover .info-item-inner::before{
  opacity: 1;
}



/*—————————————————お知らせ 上下線設定—————————————————*/

.info-item:first-child{
  border-top: solid rgba(58, 109, 173, 1) 1.75px;
}

.info-item:last-child{
  border-bottom: solid rgba(58, 109, 173, 1) 1.75px;
}


/*—————————————————お知らせ テキスト設定—————————————————*/

.info_etc{
  width: 10rem;
  height: 3rem;
  margin: 0 1rem 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  background: #fff;
  border-radius: 1.5rem;
  color: rgba(255, 255, 255, 1);
}

.date,.info_texts{
  font-weight: 500;
}

.info_etc._a{
  background: rgba(63, 193, 132, 1);
}

.info_etc._b{
  background: rgba(255, 148, 153, 1);
}

.info_etc._c{
  background: rgba(255, 160, 90, 1);
}



.info_texts{
  width: 68rem;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}


.info.arrow01{
  width: 2.4rem;
}

.item-info:hover .info.arrow01{
  left: 1.6rem;
}

.arrow01{
  display: block;
  position: relative;
  width: 100%;
  height: 8rem;
  left: 0;
  margin-right: 8.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .4s;
}

.arrow01::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -5.6rem;
  margin: auto;
  width: 4.8rem;
  height: 1px;
  background: #3E3E3E;
  transition: .4s;
}

.arrow01::after {
  content: '';
  position: absolute;
  top: 3.6rem;
  right: -5.6rem;
  width: 0.9rem;
  height: 1px;
  transform: rotate(42deg);
  background: #3E3E3E;
  transition: .4s;
}
.btn_base a:hover .arrow01{
  left: 1.6rem;
}
.info-item:hover .arrow01{
  left: 1.6rem;
}



/*—————————————————————————————————
———————————————————————————————————
館内マップ エリア
———————————————————————————————————
—————————————————————————————————*/
.back-ami{
  background-image: url("../img/top/marine-back.jpg");
  background-repeat: no-repeat;
  background-position:center center;
  background-size: 100%;
  margin: auto;
  width: 100%;
  height: 64.4rem;
  background-size: cover;
}

.In-house-map{
  position: relative;
  width: 104rem;
  height: 32rem;
  background: rgba(255, 255, 255, 1);
}

.In-house-map img{
  position: absolute;
  width: 100%;
  height: auto;
  transition: .4s;
}

.In-house-map:hover img{
  opacity: 0.5;
}


/*—————————————————————————————————
———————————————————————————————————
図鑑・コース エリア
———————————————————————————————————
—————————————————————————————————*/
.side{
  width: 48%;
}

.ikimono{
  width: 90%;
  background: rgba(255, 255, 255, 1);
  border: solid rgba(58, 109, 173, 1) 3px;
  border-radius: 2rem;
  padding: 2rem 2rem 4rem 2rem;
  flex-flow: column;
  filter: drop-shadow(4px 4px 20px rgba(62, 62, 62, 0.3));
}

.animal-waku{
  margin: 0 auto;
  background: rgba(233, 238, 244, 1);
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animal-waku img{
  width: 92%;
  height: 92%;
}

.animal-name,.marine-sab-title{
  text-align: center;
  font-weight: 600;
}

.animal-name-01{
  font-size: 2rem;
  padding: 1rem 0;
}

.animal-info{
  font-size: 1.6rem;
  line-height: 2.8rem;
}

.marine-sab-title{
  font-size: 2rem;
  font-weight: 400;
  color: rgba(58, 109, 173, 1);
  padding: 1rem 0;
  border-top: solid rgba(58, 109, 173, 1) 1px;
  border-bottom: solid rgba(58, 109, 173, 1) 1px;
}

.course{
  height: 72rem;
  flex-flow: column;
  justify-content: space-between;
}

.course img{
  width: 100%;
  height: auto;
  transition: .4s;
}

.course._a:hover img{
  opacity: 0.5;
}

/*—————————————————————————————————
———————————————————————————————————
館内施設のご案内 エリア
———————————————————————————————————
—————————————————————————————————*/
.facility-banner{
  justify-content: space-between;
}

.facility-ba img{
  width: 48rem;
  height: auto;
  transition: .4s;
}

.facility-ba:hover img{
  opacity: 0.5;
}

.sea-kinds-line img{
  width: 5.6rem;
  height: auto;
}



/*——————————————————————————————————
————————————————————————————————————
footerベーシック
————————————————————————————————————
——————————————————————————————————*/
footer{
  position: relative;
}

.f_field{
  position: relative;
  background-repeat: repeat-x;
  background-image: url("../img/common/footer-back.png");
  background-position:top;
  height: 44rem;
  background-size: cover;
}

.f_info-logo{
  margin: 0 auto;
  width: 100%;
}

.f_info-logo img{
  width: 34.1rem;
  height: auto;
}


.f_inner{
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 1);
  top: 12rem;
}


.add p{
  line-height: 3.2rem;
}

.add p a{
  color: rgba(255, 255, 255, 1);
  border-bottom: solid rgba(255, 255, 255, 1) 0.5px;
}

.f_nav{
  justify-content: center;
}

.f_nav a{
  color: rgba(255, 255, 255, 1);
  /*padding: 2rem;*/
}

.tate_line {
  border: solid rgba(255, 255, 255, 1) .5px;
  margin: 0 2rem;
}



.copyright{
  position: absolute;
  width: 100%;
  bottom: 1.8rem;
}


/*——————————————————————————————————
page_topアイコン指示
——————————————————————————————————*/

.page_top{
  position: fixed;
  font-size: 1.6rem;
  color: #000;
  writing-mode: vertical-rl;
  letter-spacing: 0.1rem;
  bottom: 18rem;
  right: 1.4rem;
  z-index: 2;
  opacity: 1;
  cursor: pointer;

  /*filter: drop-shadow(0 0 6px rgba(80,80,80,0.9));
  transform: translateY(100px);*/
}


/*-----------矢印指定------------*/
.page_top.pc-only span::before{
  content: '';
    position: absolute;
    top: -14rem;
    bottom: 0;
    right: 1rem;
    margin: auto;
    width: 0.1rem;
    height: 4.8rem;
    background: #3E3E3E;
    transition: .4s;
}

.page_top.pc-only span::after{
  content: '';
    position: absolute;
    top: -5.6rem;
    right: 0.7rem;
    width: 1.2rem;
    height: 1px;
    transform: rotate(-65deg);
    background: #3E3E3E;
    transition: .4s;
}


/*-----------jQのclass付与指示------------*/
.change{
  color: #fff;
  background: #fff;;
}

.page_top.change{
  background: none;
}

.page_top.pc-only.change span::before,
.page_top.pc-only.change span::after {
  background: #fff;
}



/*——————————————————————
————————————————————————
ここから下層ページ
————————————————————————
——————————————————————*/

/*——————————————————————
————————————————————————
下層ファーストビュー エリア
————————————————————————
——————————————————————*/

#first-view_bg._under{
  position: relative;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-size: cover;
  height: 35.2rem;
  /*—————————————————————————————————————————
  以下を入れないと左右に不明な隙間が—できる場合がある
  —————————————————————————————————————————*/
  overflow: hidden;
}

.top_pic._01{
  height: 100%;
}


.h1_title._01 h1{
  font-size: 2.8rem;
  margin-top: 38%;
}

.h1_title._01 h1 span{
  font-size: 1.6rem;
}



.h2_title {
  width: fit-content;
  margin-bottom: 3.5rem;
}

/*——————————————————————
————————————————————————
カレンダー
————————————————————————
——————————————————————*/
.calendar{
  display: flex;
  justify-content: center;
}

.calendar img{
  width: 74rem;
  height: auto;
}
/*——————————————————————
————————————————————————
お問い合わせ エリア
————————————————————————
——————————————————————*/


.under_title{
  display: flex;
  justify-content: center;
}

.contact{
  text-align: center;
  font-weight: bold;
  line-height: 4rem;
}

.field._03 .stripe._b{
  top: 20rem;
}

.contact.-b{
  font-size: 2.4rem;
}

.contact.-s{
  font-size: 2rem;
}

.contact.-s.-a{
  font-weight: 500;
}

/*——————————————————————
————————————————————————
生き物紹介 エリア
————————————————————————
——————————————————————*/

.form-label{
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.03rem;
}

.form-require{
  padding: 0.1rem 1.6rem 0.3rem 1.6rem;
  background: rgba(224, 34, 15, 1);
  color: #fff;
  border-radius: 4px;
  margin-left: 1rem;
}

.form-input{
  width: 100%;
  border: solid rgba(47, 47, 47, 1)1px;
  margin: 2rem 0 4rem;
  font-size: 1.6rem;
}

.form-input input,.form-input{
  width: 100%;
  padding: 0.8rem;
}

.radio-label{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 2rem 0 4rem;
  font-size: 1.6rem;
  font-weight: 400;
}

.label_01{
  padding-right: 4rem;
}

.ha-check-button{
  display: block;
  text-align: center;
}

.form-label._check{
  display: flex;
  justify-content: center;
}

input#ha-buy-check{
  transform: scale(1.8);
  margin-right: 1.2em;
}

.div-ha-buy-button{
  position: relative;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 0.3rem;
  margin-top: 1.6rem;
  width: 100%;
  height: 5rem;
  transition: .4s;
}

.form-label a{
  color: rgba(0, 88, 166, 1);
  border-bottom: solid rgba(0, 88, 166, 1) 0.1rem;
}


.div-ha-buy-button{
  background: rgba(250, 185, 80, 1);
  /*border: 1px solid #fff;*/
}

.div-ha-buy-button::after{
  position: absolute;
  content: "";
  display: block;
  transition: .4s;
}


input[type="submit"] {
  font-size: 2rem;
  display: block;
  color: #fff;
  height: 100%;
  width: 100%;
  /*padding: 0 2rem 0 0;*/
}

input[type="submit"]:disabled {
  /*position: absolute;*/
  color: #fff;
  background: #eee;
  height: 100%;
}

.arrow._b{
  color: #fff;
  bottom: 2.2rem;

}


.lines._b{
  background: #fff;
}

.lines._b::after {
  background: #fff;
}


.div-ha-buy-button:hover{
  opacity: 0.5;
}

.div-ha-buy-button:hover .arrow._b{
  right: 4rem;
}

.iki-mono{
  justify-content: space-between;
}

/*——————————————————————
————————————————————————
カレンダーエリア wp
————————————————————————
——————————————————————*/

.monthly-calendar{
  width: 62rem;
}

.monthly-calendar caption{
  font-size: 2rem !important;
  font-weight: 600;
  margin-bottom: 2rem;
}

.monthly-prev,.monthly-next{
  font-size: 1.6rem !important;
  margin-top: 3rem;
}

.day-calendar{
  width: 28rem;
}

.day-calendar h3{
  font-size: 2.6rem !important;
  font-weight: 600;
}

.day-calendar p{
  font-size: 1.4rem !important;
}

.day-calendar th, .day-calendar td{
  font-size: 1.4rem !important;
}



/*—————例文内の文字の濃さ—————*/
::placeholder{
  opacity: 0.3;
}

/*—————ラジオボタンの設定—————*/
.radio-label input{
  vertical-align: -0.05em;
  margin-right: 0.6rem;
  margin-bottom: 1rem;
}

/*お問い合わせ内容の枠を広げられるアイコンを消す*/
textarea{
  resize: none;
}

.itemss._b{
  width: 10rem;
  height: 4.8rem;
  background: rgba(58, 109, 173, 1);
  border-radius: 0.8rem;
  transition: .4s;
}

.itemss._b p{
  font-size: 2rem;
  color: rgba(255, 255, 255, 1);
  transition: .4s;
}

.itemss._b:hover{
  background: rgba(255, 255, 255, 1);
}

.itemss._b:hover p{
  color: rgba(58, 109, 173, 1);
}


/*————————————————————————————————————————————————————————————
チェックボックス・ラジオボタンのチェック後の色変更
input typeにclass名をつけ(例：accented)以下のように
チエックボックスの罫線自体の色変更は不可能。
デフォルトを消して(input[type="submit"] {display:none})新たに作成が必要
souse:https://web-camp.io/magazine/archives/89385
————————————————————————————————————————————————————————————*/
.accented{
  accent-color: red;
}

/*——————————メール確認 設定————————————*/

.form_etc._a{
  justify-content: flex-start;
  align-items: center;
  border-bottom: solid rgba(47, 47, 47, 1)1px;
}

.form_etc._a:first-of-type{
  border-top: solid rgba(47, 47, 47, 1)1px;
}

.form-label._a{
  width: 25rem;
}

.form-input._a{
  border: none;
  padding: 0;
  margin: 2rem 0;
}

.label_aa{
  margin-right: 6rem;
  font-size: 1.6rem;
}

.div-ha-buy-button._01{
  background: rgba(230, 77, 14, 1);
  /*border: 1px solid #fff;*/
}

.div-ha-buy-button._02{
  border: solid rgba(47, 47, 47, 1)1px;
  background: none;
}

.div-ha-buy-button._02 input[type="submit"]{
  color: rgba(47, 47, 47, 1);
}

.div-ha-buy-button._02 .lines,
.div-ha-buy-button._02 .lines::after{
  background: rgba(47, 47, 47, 1);
}


/*——————————送信完了 設定————————————*/

.field._03 .stripe._d{
  top: 8rem;
}








/*——————————————————————
display: none
——————————————————————*/
/* 
<br class>などに対して
基本的に (max-width:767px)は sp-only
(max-width:767px)以下 sp-only_02で使用すること
*/
.abc_icon._02,.form3,.leads._02,.sp-only,.sp-only_01,.sp-only_02,.icon-e,.menu._03._a,.br-sp,.space._04._sp{
  display: none;
}