@charset "utf-8";

/*--------------------------------------
このbase_formatはmax-width:885pxメインと
なっているがレスポンシブは基本は下記サイズから
@media screen and (max-width:767px)
---------------------------------------*/
/*ヘッダーロゴ調整*/


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

   /*ページトップかぶり回避*/
   .pagetop02.invert{
    animation: UpAnime 1s forwards;
  }
  
  @keyframes UpAnime{
    from {
    transform: translateY(0);
    }
    to {
    transform: translateY(-20rem);
    }
  }
}

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

  /*header調整*/

  .logo {
  width: 34rem;
  margin-left: 0;
  }

  .logo img {
    width: 30rem;
    margin-left: 4.5rem;
  }

  .fs-logo {
    width: calc(100% - 80px);
    margin-left: 0;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  
  }

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

  .only_1000{
    display: block;
  }

  /*「ご来園のかたへお願い」エリアの調整*/
  .f_field._b {
    width: 100%;
  }

  .attension{
    width:74.7rem;
    margin: 0 auto;
  }

  .attension_text{
    width: 73rem;
    margin: 0 auto;
  }

  .office_info{
    width: 100%;
    display: block;
  }

  .office_box._a{
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .office_box._b {
    margin: 0 auto;
    width: 72.2rem;
    flex-direction: initial;
  }

  .call_btn,.call_sub,.floor{
    width: 35.6rem;
  }

  .call_btn{
    height: 9rem;
  }

  .info{
    padding: 0 4rem;
  }

  .info::after {
    content: "";
    display: block;
    width:17.6rem;
  }
  

}

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

  ヘッダー切り替え調整

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

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

    .langage{
      z-index: 1;
    }
  
    .lang_text {
      width: 84px;
      height: 33px;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      padding-top: 5px;
      color: rgba(0, 88, 166, 1);
      cursor: pointer;
      display: block;
      border-radius: 4px;
      position: absolute;
      top: 38px;
      left: 20px;
      border: 1px solid rgba(0, 88, 166, 1);
      background: rgba(255, 255, 255, 1);
      transition: 0.4s;
    }
  
    .lan_list{
      width: 84px;
      display: none;
      position: absolute;
      font-size: 10px;
      z-index: 1;
      top: 67px;
      left: 18px;
    }
  
    .lang{
      width: 100%;
      font-size: 12px;
      padding: 4px 0;
      text-align: center;
    }
  
    .lang_text.close {
      height: 156px;
  }

  .lan_list.close {
    display: block;
  }

  
    /*————————————————————————————————
    ナビゲーション設定
    —————————————————————————————————*/
    
      
    /*navタブにopen classがついた時の動作*/
    .header_inner.open{
      overflow-y: auto;
      height: 100%;
    }
  
    .navArea.display_flex{
      align-items: initial;
    }
  
    /*————————————————————————————————
    2023.1010 修正
    —————————————————————————————————*/
  
    .header_inner.open .global_menu{
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      top: 12rem;
      position: absolute;
      right: 0;
    }
    /*————————————ここまで————————————*/
  
    .global_menu{
      min-width: 100%;
      margin-left: 0;
    }
    
    .header_nav li a:after{
      background: none;
    }
  
    .navArea{
    /*height: 70px;
    padding: 1rem;
    justify-content: center;*/
    }
  
    .mask {
      display: none;
      position: fixed;
      /*transition: all 0.3s ease-in-out;
      z-index: 999;*/
    }
  
    .open .mask {
      margin: 0 auto;
      display: block;
      top: 0;
      width: 100%;
      height: 100vh;
      background: rgba(255, 233, 169, 1);
      z-index: -1;
    }
  
    .header_inner.open .navArea{
      background: none;
      justify-content: flex-end;
    }
  
    /*snsアイコン*/
    .sns_sp{
      margin: auto;
    }
  
    .menu._02{
      margin-bottom: 3.25rem;
    }
  
    .menu._06{
      margin: 0 1rem;
    }
  
    /*リスト項目*/
    .footprints,.triangle{
      margin-right: 1rem;
      margin-bottom: 0.5rem;
    }
  
    /*ハンバーガー内チケットボタン　SPのみ*/
  
    .sp_ticket,.sp_ticket_2{
      width: 32rem;
      height: 5.4rem;
      background: rgba(224, 34, 15, 1);
      filter: none;
    }
  
    .sp_ticket_2{
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(26, 19, 17, 1);;
      margin-bottom: 6rem;
    }
  
    .sp_ticket:hover,
    .sp_ticket_2:hover{
      transform: none;
      opacity: .7;
    }
  
    .ticket_text{
      font-size: 2rem!important;
      color: rgba(255, 255, 255, 1);
    }
  
    .ticket_text_2{
      font-size: 2rem!important;
  
    }
  
    .sp_ticket:hover .ticket_text{
      color: rgba(255, 255, 255, 1)!important;
    }
  
    /*——————————————————————
    ハンバーガー トグル形状とアクション
    ——————————————————————*/
    .toggle_btn {
      position: relative;
      width: 80px;
      height: 100%;/*高さ必ず指定してタップ領域確保*/
      display: block;
      top: 0;
      right: 0;
      transition: .3s;
      z-index: 9999;
      background-color: transparent;
      border: none;
      cursor: pointer;
      outline: none;
      background: rgba(47, 47, 47, 1);
    }
  
    .btn01{
    width: 100%;
    padding: 0;
    display:initial;
    flex-flow: column;
    position: absolute;
    left: 19px;
  }
  
    .toggle_btn span {
      display: block;
      position: absolute;
      top: -5px;
      left: 0;
      width: 45px;
      height: 2px;
      background-color: rgba(255, 255, 255, 1);
      transition: .4s;
      cursor: pointer;
      z-index: 9999;
    }
  
    .toggle_btn.open span {
      background-color: rgba(255, 255, 255, 1);
    }
  
    .toggle_btn span:nth-child(2) {
      top: 8px;
    }
  
    .toggle_btn span:nth-child(3) {
      top: 22px;
    }
  
    /*————————————————————————————————
    2023.1010 修正
    —————————————————————————————————*/
    .toggle_btn.open span:nth-child(1) {
      -webkit-transform: translateY(10px) rotate(30deg);
      transform: translateY(10px) rotate(30deg);
    }
    .toggle_btn.open span:nth-child(2) {
      opacity: 0;
    }
    .toggle_btn.open span:nth-child(3) {
      -webkit-transform: translateY(-17px) rotate(-30deg);
      transform: translateY(-17px) rotate(-30deg);
    }
    /*————————————ここまで————————————*/
  
    /*----------------------------
    ナビゲーション上下のボーダー設定
    ナビゲーション文字 天地左右スペース設定
    -----------------------------*/
  
    .header_nav li{
      height: auto;
    }
  
    .header_nav li a,.child_text,.menu_inner{
      font-size: 2.25rem;
      display: block;
      text-align: left;
    }
  
    .child_text{
      display: inline-block;
    }
  
    .header_nav li .link_li::after{
      margin-left: 2.4rem;
    }
  
    li.menu a{
      text-align: center;
    }
  
    li.menu a.close{
      padding-bottom: 4%;
    }
  
    li.menu.aco_moji a{
      padding: 0 4%;
    }
  
    li.menu ul.child_menu{
      width: 100%;
      padding: 0;
      position: initial;
      background: none;
      display: none;
      visibility: visible;
      opacity: 1;    
      text-align: center;
    }
  
    li.menu ul.child_menu > li{
      display: table;
      cursor: pointer;
      width: 100%;
    }
  
    li.menu ul.child_menu > li:last-child{
      border-bottom: 0;
      padding-bottom: 0;
    }
  
    .child_list a:hover{
      opacity: .6!important;
    }
    
    .child_menu{
      opacity: 1;
      visibility: visible;
      border: none;
      display: none;
    }
  
    .dropdown{
     flex-direction: column;
    }
  
    .link_link{
      margin-bottom: 3rem;
      cursor: pointer;
    }
  
    .link_link.close .triangle{
      transform: rotate(90deg);
      transition: .4s;
    }
  
    /*ハンバーガーメニューopen時に後ろの要素をスクロールさせない*/
    .noscroll{
      overflow: hidden;
    }


    /*display関連*/

    .sp-only_header{
      display: block;
    }
  
    .global_menu,.header_inner.open .fs-logo{
      display: none;
    }
  
    .pc-only_header{
      display: none !important;
    }
  
  }

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

/*——————————————————————
display: block;
——————————————————————*/

.display_flex,.sp-only_01{
  display: block;
}

.field._01,.inner._01,.inner._07{
  width: 100%;
}

.entry._01,.entry._02,
.f_field._a{
  width: 100%;
}

.entry._06{
  padding: 0 2rem;
}

.left-01{
  padding: 3%;
}

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

/*———————————————————————————
詳細ボタン---BeProHPで使用した物
———————————————————————————*/
/*.btn_base{
  width: 24.4%;
}*/
/*——————————————————————
メイン項目エリア
——————————————————————*/
.pic._00{
  overflow: hidden;
  width: 100%;
  height: auto;
}

.h1_title._02 p{
  padding-right: 0;
}


/*————————2023-1107追記————————*/

.field._01._b,.entry._02._a{
  width: 100%;
}

.pic._03{
  display: none;
}

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


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

.calc._01 li{
  width: calc((100% - 8%) / 2);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin-bottom: 4rem;;
}

/*TOPページ FV〜調整*/

.shida {
  bottom: -12.5rem;
}

.shida._l img,
.shida._r img{
  width: 200px;
  height: auto;
}

.shida._l img{
  width: 160px;
}

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

.h1_title h1 {
  font-size: 5.3rem;
  line-height: 7rem;
  letter-spacing: 0.5rem;
  position: static;
  margin-left: 0;
  margin-top:19rem;
  /* bottom: 65%;
  right: 23%;*/
}

.top_pic {
  justify-content: center;
}

.maincopy {
  left: 0;
  bottom: 0;
  margin-left: 6.4rem;
}

.maincopy img{
  width: 100%;
  min-width: 300px;
  height: auto;
}

/*最新イベント情報*/

.inner._02{
  padding: 2rem 0;
  width: 100%;
  flex-wrap: wrap;
}

.event{
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: 1.5rem;
}

.ev_box:nth-child(n+3){
  display: none;
}

.ev_img{
  width: 100%;
  height: auto;
}

.info {
  flex-wrap: wrap;
  justify-content: center;
}

/*バナー*/
.banner_img{
  padding: 0 3rem;
  width: 100%;
  height: auto;
}

/*——————————————————————
footer_SP
——————————————————————*/
.f_nav_inner li{
  text-align: center;
  position: static;
}

.f_nav_inner li::after{
  content: none;
}

.contact {
  width: 35.6rem;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.9rem;
}

.iken{
  width: 100%;
}

.office_box._b {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.attension{
  width:100%;
}

.attension_text{
  width: 100%;
}

.f_field._b{
  padding: 0 2rem;
}

.access,.f_logo_l{
  text-align: center;
}

.f_text{
  justify-content:center;
}

.facility_img{
  text-align: center;
}

.f_field._a{
  display: flex;
  flex-direction: column;
}

.f_logo_l{
  order: 2;
}

.facility_img{
  order: 1;
}

.access{
  order: 2;
}

.map_copy{
  width: 100%;
  padding: 0 2rem;
}

.google_map iframe{
  width: 100%;
  padding: 0 2rem;
}

/*TOP-最新ニュース*/

.inner._01.news_container{
  width: 56rem;
}

.news_flame{
  padding: 0 2rem;
}

.thumb{
  width: 100%;
  height: auto;
  overflow: hidden;
  object-fit: cover;
  margin: 0 auto;
}

.time_table{
  width: 100%;
  height: auto;
 /*margin-top: -2.5rem;*/
}

.news_content {
  margin-left: 0;
}

.news_inner {
  padding: 2rem;
}

.news_text {
  width: 100%;
  margin-right: 4rem;
}

.foot_logo{
  width: 100%;
  height: auto;
  padding: 0 5rem;
}

/*ページトップかぶり回避解除*/
.pagetop02.invert{
  animation: none;
}



/*--------------------------
  下層ページ
---------------------------*/
/*動物紹介*/

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

  .erea_name{
    width: 80%;
    height: auto;
  }

  .ani_table{
    width: 100%;
  }

  .ani_table td{
    text-align: left;
    margin-left: 2.4rem;
  }

  .ani_comment{
    width: 100%;
    height: auto;
    background: url(../img/annimals/fukidashi_sp.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .ani_text{
    width: 100%;
    font-size: 1.9rem;
    line-height: 3.2rem;
    padding: 10rem;
  }

  /*チケット予約*/
  .left_box{
    text-align: center;
  }

  .right_box{
    text-align: center;
  }

  .un_line {
    margin: 0 2rem;
  } 

  .q_data{
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 12rem;
    gap:4rem;
  }

  .q_data:after {
    content: "";
    display: block;
    width: calc((100% - 4rem) / 3);
    height: 0;
  }

  .right_box{
    padding: 0 4rem;
  }

  .calender{
    width: 100%;
    height: auto;
  }


/*--------------------------
display:none
---------------------------*/

  .global_menu,.abc_icon.pc-only,.sp-only_02,
  .mail_form,.header_inner.open .fs-logo,
  .pick_up_article,.tower,.footprints{
    display: none;
  }

  .pc-only{
    display: none!important;
  }

}

  

  @media screen and (max-width:635px){
    .sp-only_02{
      display: block;
    }

    .space._06._2rem{
      height: 4rem;
    }

  }
  /*——————————————————————————————————————————————————————
  ————————————————————————————————————————————————————————
  以下の文言で幅600以下で一定の条件を満たしたアイテムすべて半分になる
  ————————————————————————————————————————————————————————
  ———————————————————————————————————————————————————————*/
  
  @media screen and (max-width:690px){
    .q_data {
      justify-content: center;
    }

    .q_data:after {
      display: none;
    }
  }
  
  @media only screen and (max-width: 600px) {
    html {
      font-size: 50%;
    }

    .q_data:after {
      content: "";
      display: block;
      width: calc((100% - 4rem) / 3);
      height: 0;
    }

    .a_illust{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .fs-logo {
      width: calc(100% - 50px);
    }

    .toggle_btn {
      width: 50px;
    }

    .navArea {
      height: 70px;
    }

    .lang_text {
      top: 18px;
      left: 10px;
    }

    .btn01 {
      left: 11px;
    }

    .toggle_btn span {
      width: 30px;
      top: -4px;
    }

    .toggle_btn span:nth-child(2) {
      top: 5px;
    }

    .toggle_btn span:nth-child(3) {
      top: 14px;
    }

    .toggle_btn.open span:nth-child(1) {
      -webkit-transform: translateY(8px) rotate(30deg);
      transform: translateY(8px) rotate(30deg);
    }

    .toggle_btn.open span:nth-child(3) {
      -webkit-transform: translateY(-10px) rotate(-30deg);
      transform: translateY(-10px) rotate(-30deg);
  }

    .logo img {
      width: 200px;
      margin-left: 7rem;
    }

    .lan_list {
      width: 60px;
      top: 48px;
      z-index: 1;
      left: 22px;
    }

  }

  @media screen and (max-width:551px){
    .q_data {
      justify-content: center;
    }
    .q_data:after{
      display: none;
    }
  }


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

    h2{
      font-size: 2.8rem;
    }

    h2 span{
      font-size: 1.6rem;
    }

    .tab_area li a{
      font-size: 1rem;
    }

    .ceiter-h3{
      margin-top: 2rem;
      font-size: 1.8rem;
    }

    .sorter li a{
     font-size: 1.4rem;
    }

    .inner._01.news_container{
      width: 42rem;
    }
    
    .banner._01{
      display: none;
    }
    
  }

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

    /*——————————————————————
    display: block;
    —————————————————————*/

    .sp-only_02{
      display: block;
    }

    .count-up{
      font-size: 12rem;
    }

    .count{
      font-size: 2.6rem;
      top: 38%;
      height: 14rem;
    }

    .newline{
      line-height: 3.2rem;
    }

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

    .calc._01 li{
      width: calc(100%);
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      margin-bottom: 4rem;;
    }

    .inner._02{
      padding: 0;
    }

    /*——————————————————————
    ————————————————————————
    お問い合わせ エリア
    ————————————————————————
    ——————————————————————*/

    .contact.-b{
      font-size: 2rem;
      line-height: 3.2rem;
    }

    .contact.-s{
      font-size: 1.6rem;
      line-height: 2.8rem;
    }

    .form-label,.radio-label{
      font-size: 1.4rem;
    }

  }

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

    .ani_text{
      padding: 6rem;
    }
  /*
    .lang_text {
      width: 60px;
      height: 28px;
      font-size: 12px;
      top: 20px;
      left: 10px;
    }
  */
    .lang{
      padding: 4px 0;
    }
   
  }

  @media screen and (max-width:420px){
    .ani_text{
     padding: 5rem;
    }
  }

  @media screen and (max-width:375px){
    html {
        font-size: 40%;
      }
      input#ha-buy-check{
        transform: scale(1.2);
      }

      .ani_text{
        padding: 10rem 5rem;
      }

      .logo img {
        width: 138px;
        margin-left: 64px;
      }

    }