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

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    font-family: "Zen Maru Gothic", serif;
    color: rgba(26,19,17,1);
    /*全体バックに画像を配した場合以下を記載*/
   /* 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: rgba(26,19,17,1);
  }

  * {
  box-sizing: border-box;
  }

.body_wrapper{
  overflow: hidden;
}


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


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

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

.photo_ti{
  font-size: 1.6rem;
  font-weight: 500;
}

.photo_ti._01{
  width: 31rem;
  height: 4rem;
  text-align: center;
  font-size: 1.6rem;
  display: table-cell;
  vertical-align: middle;
}

.space._001{
  height: 0.1rem;
}

.space._005{
  height: 0.5rem;
}

.space._01{
  height: 1rem;
}

.space._02{
  height: 2rem;
}

.space._03{
  height: 3rem;
}

.space._04{
  height: 4rem;
}

.space._05{
  height: 5rem;
}

.space._06{
  height: 6rem;
}

.space._07{
  height: 7rem;
}

.space._08{
  height: 8rem;
}

.space._10{
  height: 10rem;
}

.space._16{
  height: 16rem;
}

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

h1{
    font-size: 6rem;
    font-weight: 900;
}

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

h2{
  font-size: 3.6rem;
  font-weight: bold;
}

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;
}
/*表組の一番上に線 (複数下線をborder-bottomで指定している場合 border-topの場合はすべて逆指示+last-childに)*/
.tables_item._02 td:first-child{
  border-top: solid #B7B7B7 1px;
}

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


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

.field{
  margin: 0 auto;
}

.field._01{
  position: relative;
}

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

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

.entry._01{
 /* width: 114rem;*/
  margin: 0 auto;
  background-color: rgba(255, 186, 0, 1);
  background-image:
   linear-gradient(-90deg, rgba(247, 177, 0, 1) 50%, transparent 50%);
  background-size: 16px 16px;
}

.entry._02{
  margin: 0 auto;
  background-color: rgba(161, 187, 137, 1);
  background-image:
  radial-gradient(rgba(151, 176, 129, 1) 20%, transparent 20%),
  radial-gradient(rgba(151, 176, 129, 1) 20%, transparent 20%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

.entry._07{
  background-color: rgba(237, 245, 236, 1);
}

.inner._01{
  margin: 0 auto;
  width: 80rem;
  background: rgba(255, 255, 255, 1);
}

.inner._02{
  width: 100rem;
  margin: 0 auto;
}

.inner._03{
  background: rgba(243, 202, 186,1);
}

.inner._04{
  max-width: 100.4rem;
  margin: 0 auto;
  background: rgba(255, 255, 255,1);
}

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

.inner._06{
  background: #fff;
}

.inner._07{
  width: 76.8rem;
  margin: 0 auto;
}


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

.border{
  height: 0.1rem;
  background: rgba(26, 19, 17,1);
}

.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: 6rem 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: fixed;
    z-index: 3;
    bottom: 3rem;
    right: 3rem;
  }
  
  .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一例 ここまで*/



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

.fs-logo{
  text-align: center;
  /*margin-left: 30%;*/
}

.logo{
  width: 100%;
  height: auto;
  text-align: center;
}

.logo img{
  width: 40rem;
  height: auto;
}

.header_inner{
  position: fixed;
  width: 100%;
  z-index: 999;
}

.navArea{
  justify-content: center;
  position: relative;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  height: 110px;
 /* filter: drop-shadow(4px 4px 8px rgba(62,62,62,0.25));*/
}

.global_menu{
  width: fit-content;
  position: absolute;
  right: 4%;
}

.header_nav{ 
  align-items: center;
}

.header_nav li {
  height: 80px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  transition: .4s;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.8rem;
}

/*GLナビ2*/

.gmenu_sub{
  background: rgba(212, 213, 213, 1);
}

.header_nav._02{
  justify-content: center;
}

.header_nav._02 li{
  position:relative;
}

.header_nav._02 li::after{
  content:"";
  display:inline-block;
  width:1px;
  height:15px;
  background-color:rgba(26, 19, 17, 1) ;
  position:absolute;
  top:4.5rem;
  right:-1rem;
}

.header_nav._02 li:last-of-type::after{
  display: none;
}

.menu{
  height: 8rem;
}

.menu_inner{
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-size: 1.8rem;
  transition: .4s;
}

.menu_inner._2{
  font-size: 1.7rem;
  filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 1) ) drop-shadow(0px 0px 2px rgba(255, 255, 255, 1) ) drop-shadow(0px 0px 4px rgba(255, 255, 255, 1));
}

.menu._02 a:hover{
  opacity: .3;
}

.footprints{
  transition: .4s;
  position:relative;
	top:0;
}

.none{
  opacity: 0;
}

.current:hover .icon_current{
  top:-10px;
}

.menu:hover .footprints{
  opacity: .6;
  top:-10px;
}

.current.hover .icon_current{
  opacity: 0;  
}

/*GLナビ3 snsアイコン*/
.header_nav._03,
.header_nav._04{
  justify-content: center;
}

.header_nav._03 li{
  height: 5rem;
}

.header_nav._03 li{
  margin: 0 1rem;
  align-items: flex-end;
}

.header_nav._04{
  margin-top: 1rem;
}

.header_nav._04 li{
  height: 1.6rem;
  padding: 0 1rem;
  margin: 0;
  border-right: 1px solid rgba(26,19,17,1);
}

.header_nav._04 li:last-of-type{
  border-right:none;
}

/*GLナビ4 八木山動物園とは〜*/

.menu._04 a:hover{
  color: rgba(193,193,193,1);
}

.menu._04 a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: rgba(26,19,17,1);
  bottom: -10px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
  opacity: 0;
  visibility: hidden;
  transition: .4s;
  }
  
.menu._04 a:hover::after {
  visibility: visible;
  bottom: -3px; /*アニメーションが止まる位置*/
  opacity: 1;
  }
    
/*========================
マウスオーバーでグレー半透明と
アンダーラインの仕様
==========================*/


/*——————————————————————
Mega Menu
——————————————————————*//*
li.menu ul.child_menu{
  position: absolute;
  display: none;
  /*left: 0;*//*
  right: 0;
  width: 100rem;
  /*padding: 0px 4%;*//*
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}

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: inline-block;
  padding: 0 2rem;
  border: none;
}
*/

/*——————————————————————
Side Menu
——————————————————————*/
.abc_icon{
  position: fixed;
  z-index: 999;
  right: 0rem;
}

.abc_icon.pc-only{
  bottom: 0rem;
}

.abc_icon_in{
  display: block;
  width: 8rem;
  height: 12rem;
  border-radius: 1rem 0 0 1rem;
}

.abc_icon_in._a{
  position: absolute;
  right: -4rem;
  background: rgba(255, 255, 255, 0.9);
  border: 0.1rem solid #3E3E3E;
  bottom: 14.4rem;
  transition: .3s;
}

.abc_icon_in._b{
  position: absolute;
  right: -4rem;
  background: rgba(255, 255, 255, 0.9);
  border: 0.1rem solid #3E3E3E;
  bottom: 2rem;
  transition: .3s;
}

.abc_icon_in._a:hover{
  right: -1rem;
}

.abc_icon_in._b:hover{
  right: -0.6rem;
}

.abc_icon a{
  writing-mode: vertical-rl ;
  font-size: 1.4rem;
  padding: 2.7rem 1.2rem;
  text-align: center;
  line-height: 2.4rem;
} 

/*——————————————————————————————————
詳細はこちら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: 3.7rem;
}

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


/*———————サークル矢印——————*/
.circles{
  position: absolute;
  right: 0;
  width: 2rem;
  height: 2rem;
  border:solid rgb(26, 19, 17,1) 1px;
  border-radius: 999rem;
}

.arrow{
  position: absolute;
  display: flex;
  align-items: center;
  /*中央揃えの際は以下の数値の変更も必要*/
  right: 0.5rem;
  transition: .4s;
  color: #3E3E3E;
}

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

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

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

button:hover .arrow{
  right: -1rem;
}

/*矢印・白パターン*/
.circles.white{
  border:solid rgba(255, 255, 255,1) 1px;
}

.arrow.white{
  color: rgba(255, 255, 255,1);
}

.lines.white{
  background:rgba(255, 255, 255,1);
}

.white::before,
.white::after{
  border:solid rgb(255, 255, 255,1) 1px;
}


/*ボタンパターン2-角丸の中に文字＋矢印*/
.btn_base_b{
  display: block;
  width: 34.8rem;
  height: 5.4rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 999rem;
  margin: 0 auto;
  transition: .4s;
  filter: drop-shadow(12px 14px 0px rgba(168, 121, 0, 1));
}

.btn_base_b.green{
  filter: drop-shadow(12px 14px 0px rgba(106, 132, 72, 1));
}

.btn_inner._b{
  width: 100%;
  justify-content: center;
  align-items: center;
}

.btn_text._b{
  font-size: 2.8rem;
  font-weight: 500;
  margin-right: 1rem;
  transition: .4s;
}

.btn_base_b:hover{
  filter: none;
  transform: translate(12px, 14px);
}

.btn_base_b:hover .btn_text._b{
  color: rgba(112, 112, 112, 1);
}

.btn_base_b:hover {
  color: rgba(112, 112, 112, 1);
}

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


/*———————————————————————————
画面いっぱいfirst-view 設定の一例
———————————————————————————*/

#first-view_bg{
  position: relative;
  width: 100%;
  height: 100vh;
  /*background-color: #B5B5B6;*/
}

/*FirstView背景に動画を配置する場合は以下*/
/*-------------------------------
画面全体に背景動画を流す
https://coco-factory.jp/ugokuweb/move01/6-3-1/
動画にドットフィルター処理
https://pulpxstyle.com/post-152/
--------------------------------*/
/*--------------------------------*/
.movie_pro{
  z-index: -999;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.77777778vh; 
    height: 56.25vw; 
    min-height: 100%;
    min-width: 100%;
}
/*FirstView背景に動画を配置する場合 ここまで*/

/*動画再生停止ボタン*/
.movie-button {
  display:flex;justify-content:center;align-items:center;/*#video-buttonの中央に配置*/
}
.movie-button span {
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:rgba(255, 255, 255, 1);font-size:1.2rem;
}
.movie-button span i {
  font-size:2.6vw;/*アイコンの大きさを指定*/
}
/*ここまで*/

/*FV動画以外の設定*/

.w_box{
  width: 100%;
  height: 10rem;
  position: absolute;
  z-index: 1;
  bottom: 0;
  background: rgba(255, 255, 255, 1);
}

.nav_box{
  width: 100%;
  height: 10rem;
  position: absolute;
  z-index: 2;
  bottom: 0;
}

.maincopy{
  position: absolute;
  z-index: 2;
  right: 13rem;
  bottom: 10rem;
}

.shida{
  position: absolute;
  z-index: 1;
  bottom: -28rem;
}

.shida{
  position: absolute;
  z-index: 1;
  bottom: -20rem;
}

.shida._r{
  right: 0;
}

/*——————————————————————
メインタイトル
——————————————————————*/

.top_pic{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
}

.top_pic._00{
  height: 100vh;
}

.top_pic._02{
  position: relative;
  height: 36rem;
  background-image: url(../img/annimals/un_bg_01.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: initial;
}


.top_pic._03{
  position: relative;
  height: 36rem;
  background-image: url(../img/reserve/un_bg_01.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: initial;
}

/*ファーストビュー に画面いっぱいの画像を配置する場合、以下を使用*/
/*
.top_pic._01{
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/assets/img/common/dammy_visual.jpg");
  z-index: -1;
}
*/
.h1_title{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: start;
  align-items: center;
}

.h1_title h1{
  font-family: "Noto Sans JP", sans-serif;
  line-height: 9rem;
  letter-spacing: 1.3rem;
  position: absolute;
  color: rgba(255, 255, 255,1);
  filter: drop-shadow(4px 4px 8px rgba(34, 34, 34, 0.6));
  margin-left: 4rem;
  z-index: 10;
}

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

.h1_title._02 h1{
  width: fit-content;
  font-size: 3rem;
  line-height: 3.5rem;
  letter-spacing: 0.1rem;
  border-radius: 0 999rem 999rem 0;
  filter: drop-shadow(7px 7px 0 rgba(47, 47, 47, 1));
  font-weight: bold;
  color: rgba(26, 19, 17,1);
  text-align: left;
  font-family: "Zen Maru Gothic", serif;
  background: rgb(255, 255, 255,1);
  padding: 1rem 3rem;
  margin: 0;
  bottom: 3.3rem;
  left: 0;
}

.h1_title._02 p{
  font-size: 1.3rem;
  line-height: 2.2rem;
  padding-right: 2rem;
}

/*——————————————————————
メイン項目エリア
——————————————————————*/

/*枠内パララックス指示*/
.pic._00{
  height: auto;
  overflow: hidden;
  width: 46%;
}

.img-fluid_a {
  width: 100%;
  height: auto;
}
/*ここまで*/


/*————————————————————————————————————————————————————————————————————
パララックスベーシック sauce  https://shu-naka-blog.com/css/parallax_css/
————————————————————————————————————————————————————————————————————*/

.parallax_window{
  height: 30rem;
  overflow-x: hidden;
  overflow-y: hidden;
 /* border: solid rgba(30,30,30,0.5) 0.2rem;*/
}

.parallax_content{
  min-height: 400px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding: 0 6rem;
  color: #fff;
}

.parallax_content.img_bg_01{
  background-image: url(../img/common/parallax_bg.png);
}


/*————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————
パララックエリアB sauce  
——————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————*/

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


.verticals{
  width: 100%;
  margin-left: 6rem;
}


/*————————2023-1106追記————————*/

.comment,.empty_box{
  width: 50%;
}

.comment p{
  /*width: 50rem;*/
  font-size: 1.3rem;
  line-height: 2.2rem;
}

.parallax_verticals{
  position: absolute;
  top: 19rem;
  right: 0;
  width: 48%;
}

.pic._03,.pic._04{
  position: absolute;
}


.pic._04{
  top: 36em;
  left: 20rem;
  filter: drop-shadow(4px 4px 8px rgba(62,62,62,0.25));
}

.pic._04 img{
  width: 68%;
}

/*
.aba{
  margin: 6rem 0rem;
  text-align: center;
}

.abb{
  margin: -10rem 0;
  filter: drop-shadow(4px 4px 8px rgba(62,62,62,0.25));
}

.abb img{
  height: 36rem;
}
.horizontal{
  margin-top: 0rem;
  margin-bottom: 70rem;
  border:none;
}
*/

/*——————————————————————————————————
————————————————————————————————————
DisplayFlexベーシック
————————————————————————————————————
——————————————————————————————————*/

.basic-box{
  position: relative;
}

.calc._01{
  justify-content: space-between;
  flex-wrap: wrap;
}

.calc._01 li{
  width: calc((100% - 13rem) / 3);
  /*以下3行は上下にspace-between(天地揃え)させたい場合に使用
  display: flex;
  flex-flow: column;
  justify-content: space-between;*/
  margin-bottom: 4rem;;
}

.calc._01::after{
  display: block;
  content: '';
  width: calc((100% - 13rem) / 3);
}

.displayFlex_p{
  font-size: 1.2rem;
  line-height: 2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*以下は制限する行数*/
  -webkit-line-clamp: 3;
}

/*——————————————————————————————————
————————————————————————————————————
  Accordion ベーシックエリア
————————————————————————————————————
——————————————————————————————————*/

.accordion{
  height: 30rem;
  padding: 3%;
  background: #FFFEEE;
  border-radius: 1rem;
  overflow-y: scroll;
}

/*Q&A全体を囲む場合ここも指示を入れる*/
.accordion .lead{
  margin-bottom: 4rem;
  border-bottom: dotted #000 1px;
}

.lead{
  position: relative;
}

.quest{
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  font-family: serif;
  font-weight: 400;
  transition: all .5s ease; 
}


.quest::before,.quest::after{
  position: absolute;
  content: '';
  width: 2rem;
  height: 2px;
  background-color: #000;
}

.quest::before{
  top: 2rem;
  width: 2rem;
  right: 1.5rem;
  transform: rotate(0deg);
  transition: 0.3s;
}

.quest::after{
 top: 2rem;
  right: 1.5rem;
  transform: rotate(90deg);
}


.quest.close::before{
  transform: rotate(180deg);
}

.quest.close::after{
  display: none;
}

.quest p{
  font-size: 2rem;
  font-family: serif;
  margin-bottom: 1rem;
}


/*以下の「maru」「p_1」は質問にナンバーをつける際に使う*/
.maru{
  position: relative;
  width: 4rem;
  height: 4rem;
  background: #8D8D8D;
  border-radius: 2rem;
}

.p_1{
  position: absolute;
  font-size: 2rem;
  color: #fff;
  line-height: 2.6rem;
  cursor: pointer;
  /*丸内文字の位置調整*/
  padding: 8px;
  left: -0.2rem;
}

.q_moji{
  margin-left: 1rem;
}
/*ここまで*/



/*——————————————————————————————————
————————————————————————————————————
footerベーシック
————————————————————————————————————
——————————————————————————————————*/

.f_field{
  background: rgba(255, 255, 255,1);
  margin: 0 auto;
}

.f_field._a{
  width: 74.8rem;
  justify-content: space-between;
}

.f_logo_l{
  margin-top: auto;
}

.tel{
  justify-content:left;
}

/*aタグはpadding-marginは無視されるため、効かせるには先にdisplay blockをかけること*/
.tel a{
  display: block;
}

.fax{
  padding-left: 1.6rem;
}

.f_text{
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 600;
}

.access_head{
  font-size: 2rem;
  font-weight: 700;
}

.access_text{
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
}

.f_field._b{
  width: 100rem;
  flex-direction: column;
  margin: 0 auto;
}

.attension{
  background: rgba(255, 186, 0,1);
  height: 4rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 600;
}

.attension_text{
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 500;
}

.f_field._c{
  background: rgba(47, 47, 47,1);
  margin: 0 auto;
}

.f_nav{
  margin: 0 auto;
  justify-content: center;
}

.f_nav_inner{
  line-height: 2;
}

.f_nav_inner li {
  position:relative;
}

.f_nav_inner li a{
  font-size: 1.4rem;
  color: rgba(255, 255, 255,1);
  transition: .4s;
  padding: 0 1rem;
}

.f_nav_inner li a:hover{
  opacity: .6;
}

.f_nav_inner li::after{
  content:"";
  display:inline-block;
  width:1px;
  height:10px;
  background-color:rgba(255,255,255,1) ;
  position:absolute;
  top:10px;
  right:0;
}

.f_nav_inner li:last-of-type::after{
  display: none;
}

.office_info{
  width: 96rem;
  margin: 0 auto;
  justify-content: space-between;
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-family: "Noto Sans JP", sans-serif;
  color: rgba(255, 255, 255,1);
}

.office_box._b{
  width: 38rem;
  flex-direction: column;
  justify-content: space-between;
}

.iken{
  margin-right: 1.5rem;
}

.off_text a{
  color: rgba(255, 255, 255,1);
}

.contact{
  width: 54rem;
  border: 1px solid rgba(255, 255, 255,1);
  transition: .4s;
}

.small{
  font-size: 1.2rem;
}

.call_time{
  font-size: 1.4rem;
  text-align: center;
}

.call_btn{
  height: 7rem;
  border: 1px solid rgba(255, 255, 255,1);
  transition: .4s;
}

.call_text{
  font-size: 1.8rem;
}

.call_number{
  font-size: 1.8rem;
  color: rgba(255, 255, 255,1)!important;
}

.call_sub,.floor{
  height: 4rem;
  border: 1px solid rgba(255, 255, 255,1);
  transition: .4s;
  width: 100%;
}

.san-button._02{
  height: 4rem;
  margin-right: 3rem;
}

.copy_right{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  background: rgba(255, 255, 255,1);
  font-size: 1.3rem;
  font-weight: 600;
}

.daihyou{
  transition: .4s;
}

.contact:hover,
.daihyou:hover,
.call_btn:hover,
.call_sub:hover,
.floor:hover{
  opacity: .6;
}

._migi{
  font-size: 1.8rem;
  width: 100%;
  text-align: center;
  margin-left: 3rem;
}

.f_address{
  transition: .4s;
}

.f_address:hover{
  opacity: .7;
}

.google_map iframe{
  width: 38rem;
  height: 34rem;
}

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

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


/*-----------矢印指定------------*/
.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付与指示------------*/
.pagetop01,
.pagetop02{
  transition: .4s;
}

.pagetop02{
  display: none;
}

.pagetop01.invert{
  display: none;
}

.pagetop02.invert{
  display: block;
}
/*
.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;
}
*/
/*——————————————————————————————————
footer_corporation
——————————————————————————————————*/

.f_info_wrap{
  margin: 0 auto;
}

.f_info{
  font-size: 1.8rem;
  line-height: 2.8rem;
}


/*——————————————————————
————————————————————————
動物最新ニュース
————————————————————————
——————————————————————*/
.news_box{
  position: relative;
  transition: .4s;
  background: rgba(255, 255, 255,1);
}

/*間にだけ線を引く*/
.news_list li + li{
  border-top: 1px solid rgba(26, 19, 17, 1);
}

.news_box::before {
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(212,212,213,1));
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all .4s ease-out;
  width: 100%;
  opacity: 0;
}

.news_inner{
  position: relative;
  align-items: center;
  padding: 1.8rem 2.4rem 1.8rem 1rem;
}

.news_box:hover::before {
  opacity: 1;
}

.news_content{
  width: 100%;
  margin-left: 4.4rem;
}

.news_head{
  font-size: 1.6rem;
  font-weight: bold;
}

.news_text{
  width: 50.6rem;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 2.2rem;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news_date{
  font-size: 1.3rem;
}

.news_box:hover .arrow{
  right: -1rem;
}

.news_btn{
  display: flex;
  justify-content: center;
  align-items: center;
}

/*——————————————————————
————————————————————————
最新イベント情報
————————————————————————
——————————————————————*/
.event{
  justify-content: space-between;
}
.ev_box{
  width: 23.2rem;
}

.ev_content{
  height: 39.4rem;
  padding: 1rem 1.6rem;
  background: rgba(255, 255, 255,1);
}

.ev_date{
  background: rgba(224,34,15,1);
  height: 3.6rem;
  padding-left: 2rem;
  font-size: 2.2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  color: rgba(255, 255, 255,1);
  align-items: center;
}

.ev_time,.ev_space{
  font-size: 1.4rem;
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
}

.ev_head{
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  padding:0 0 0 1.7rem;
  position:relative;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*アイコンとテキストの文頭揃え*/
.ev_head:before {
  content: '■';  
  position:absolute;
  top:0;  /*アイコンの位置(上)*/
  left:0; /*アイコンの位置(左)*/
}

.ev_column{
  height: 4rem;
  justify-content: center;
  flex-direction: column;
}

.ev_text{
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ev_img{
  transition: .4s;
}

.ev_box:hover img{
  opacity: .6;
}

/*——————————————————————
————————————————————————
どうぶつマップバナー
————————————————————————
——————————————————————*/

.map_copy{
  width: 74.7rem;
  font-size: 1.8rem;
  line-height: 3rem;
  margin: 0 auto;
}

.banner_inner{
  text-align: center;
  transition: .4s;
}

.map_banner{
  transition: .4s;
  filter: drop-shadow(10px 10px 0px rgba(213, 178, 165, 1));
}

.banner_inner:hover .map_banner{
  filter: none;
}

.map_banner img{
  transition: .4s;
  display: inline-block;
}

.banner_inner:hover .map_banner img{
  transform: translate(10px,10px);
  filter: none;
  /*opacity: .6;*/
}



/*——————————————————————————————————
————————————————————————————————————
INFORMATIONベーシック
————————————————————————————————————
——————————————————————————————————*/
.info{
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 3rem;
  column-gap: 3rem;
}

.info-item{
  background: rgba(255, 255, 255,1);
  flex-direction: column;
  width: 17.6rem;
  height: 17.6rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(26, 19, 17, 1);
  transition: .4s;
  filter: drop-shadow(10px 10px 0px rgba(47, 47, 47, .2));
}

.info-item a{
  width: 100%;
}

.info_icon{
  align-items: center;
}

.info_texts{
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 2rem;
  font-weight: 500;
}

.info-item:hover {
  transform: translate(10px,10px);
  filter: none;
}

.info-item:hover .info_icon,
.info-item:hover .info_texts{
  opacity: .6;
}


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

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

#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 {
  color: rgba(224, 34, 15, 1);
  text-align: center;
  line-height: 3rem;
}

.h2_title._03{
  text-align: left;
}

.black{
  color: rgba(26, 19, 17, 1);
}

/*++++++++++++++++++++++++++++++*/
/*++++++++++++++動物紹介+++++++++++++++*/

.ani_name{
  font-family: "Zen Maru Gothic", serif;
  font-size: 3.6rem;
  font-weight: bold;
  color: rgba(26, 19, 17, 1);
}

.ani_data{
  gap: 2.6rem;
}

.ani_head{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: rgba(26, 19, 17, 1);
}

.ani_table{
  width: 40.2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 4rem;
  color: rgba(26, 19, 17, 1);
}

.ani_comment{
  width: 44rem;
  height: 33rem;
  background: url(../img/annimals/fukidashi.png);
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size:1.5rem;
  line-height: 2.6rem;
  font-family: "Noto Sans JP", sans-serif;

}

.ani_text{
  padding: 3rem 8rem 5rem 5rem;
}

/*++++++++++++++++++++++++++++++*/
/*++++++++++++++チケット予約ページ+++++++++++++++*/

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

  .reserve_head{
    font-size: 2rem;
    font-family: "Noto Sans JP", sans-serif;
    color: rgba(0, 88, 166, 1);
    line-height: 4rem;
    font-weight: bold;
  }

  .special{
    font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif;
    color: rgba(50, 39, 17, 1);
    line-height: 3.2rem;
    font-weight: bold;
  }

  .orange{
    color: rgba(255, 186, 0, 1);
  }

  .b_under{
    color: rgba(0, 88, 166, 1);
    border-bottom: 1px solid rgba(0, 88, 166, 1);; 
  }

  .un_line{
    height: 1px;
    background: rgba(47, 47, 47, 1);
  }

  .quiz_head{
    font-size: 2.4rem;
    font-family: "Noto Sans JP", sans-serif;
    color: rgba(47, 47, 47, 1);
    line-height: 4rem;
    font-weight: bold;
    text-align: center;
  }

  .quiz_sub{
    text-align: center;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }

  .q_data{
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .answer{
    width: 15rem;
    height: 15rem;
    background: rgba(189, 190, 189, 1);
    border-radius: 1rem;
    transition: .4s;
  }

  .q_box{
    height: 15rem;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
  }

  .answer._a:hover {
    background: rgba(248, 176, 143, 1);
  }

  .answer._b:hover {
    background: rgba(173, 226, 161, 1);
  }

  .answer._c:hover {
    background: rgba(255, 239, 150, 1);
  }

  .answer._d:hover {
    background: rgba(165, 237, 250, 1);
  }
  
  .an_head{
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
  }

  .a_illust{
    margin-top: auto;
  }

  .zou{
    margin-left: 0.5rem;
  }

  .chinpan{
    margin-top: -2.5rem;
  }

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


/*——————————————————————
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,.sp-only_header{
  display: none;
}