@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');


.entry__content{
    font-family:'M PLUS Rounded 1c', sans-serif;
}

.pc{
  display: inline-block;
}

.sp{
  display:none;
}


/*=============
section1
=============*/
.section01{
    position: relative;
    width:100%;
    margin-top:90px !important;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/top-bg.jpg);
    background-position: center top;
    background-repeat: repeat-x;
    background-size: 1296px 1700px;
    padding:80px 0 50px;
    text-align: center;
}

.top-comment{
    display: block;
    width:300px;
    margin:0 auto;
 }

.section01 h2{
  width:750px;
  margin:0 auto;
}

.section01 h3{
    position: relative;
    width:600px;
    margin:40px auto 20px;
  }

.section01 h3::after{
    content:'';
    display: block;
    position: absolute;
    right:-70px;
    top:120px;
    width:115px;
    height:110px;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/cat.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.sub-ttl{
 position: relative;
 width:fit-content;
 margin:0 auto;
 font-size:2.4em;
 font-weight: bold;
 color:#e82633;
 text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
 z-index:1;
}

.sub-ttl::after{
    position: absolute;
    top:12px;
    left:0;
    width:100%;
    height:23px;
    content: '';
    background-color: rgba(255, 242, 13, 0.9);
    z-index:-1;
  }

  .section01 ol{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    list-style: none;
    margin:200px auto 80px;
    text-align: left;
    padding:0;
  }

  .section01 li{
  position: relative;
  width:315px;
  margin:30px 40px;
  color:#fff;
  }
  .section01 li h4{
    margin-top:20px;
    font-size:1.1em;
  }

  .point1::before{
    content:'';
    display: block;
    position: absolute;
    left:-19px;
    top:-160px;
    width:275px;
    height:222px;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/point1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .point1::after{
    content:'';
    display: block;
    position: absolute;
    right:-140px;
    top:30px;
    width:150px;
    height:65px;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/arrow1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }


  .point2{
    top:220px;
  }

  .point2::before{
    content:'';
    display: block;
    position: absolute;
    left:0px;
    top:-160px;
    width:275px;
    height:222px;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/point2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .point2::after{
    content:'';
    display: block;
    position: absolute;
    right:-110px;
    top:170px;
    width:174px;
    height:99px;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/arrow2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }


  .point3{
    top:140px;
  }

  .point3::before{
    content:'';
    display: block;
    position: absolute;
    left:0px;
    top:-160px;
    width:275px;
    height:222px;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/point3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }



/*=============
section2
=============*/
.section02{
  width:100%;
  background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/pass-bg.gif);
  background-position: center top;
  background-repeat: repeat;
  padding:110px 0 100px;
  text-align: center;
}

.section02 h3{
  width:750px;
  margin:0 auto 20px;
 }
 
 .pass-subttl{
  color:#ffa300;
  margin:0 auto;
  font-weight: bold;
  font-size: 2.3em;
  padding:5px 0;
  text-align: center;
  text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
}

.section02 ul{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  list-style: none;
  margin:50px auto 80px;
  text-align: center;
  padding:0;
}

.section02 li{
  position: relative;
  width:285px;
  margin:50px 20px 0;
  padding:0 0 30px 0;
  color:#000;
  border-radius: 20px;
  }

  .section02 li h4{
   width:90%;
   margin:20px auto 60px;
  
  }

.sub-text{
    position: absolute;
    top:110px;
    left:50%;
    width:310px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
.pass-images{
  width:80%;
  height:auto;
  margin:0 auto;
}

.pass-txt{
  display: block;
  width:90%;
  height:220px;
  background-color: #fff;
  border-radius: 20px;
  padding:20px;
  margin:5% auto;
  font-size: 0.8em;
  text-align: left;
}

.price{
  width:85%;
  margin:0 auto;
  color:#fff;
}

.price h5{
  font-size: 1.5em;
  font-weight: normal;
  border-bottom:2px dashed #fff;
  padding:0 0 10px 0;
}

.price p{
  font-size: 1.5em;
  font-weight: bold;
}

.tb-box{
  background-color: #ef65ad;
}


.tb-box::before{
  content:'';
  display: block;
  position: absolute;
  left:-40px;
  top:-83px;
  width:143px;
  height:112px;
  background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/tb-com.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wp-box{
  background-color: #ffa80f;
}


.wp-box::before{
  content:'';
  display: block;
  position: absolute;
  left:-40px;
  top:-83px;
  width:143px;
  height:112px;
  background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/wp-com.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.m-box{
  background-color: #889d23;
}

.list-atraction{
  width:935px;
  margin:0 auto;
  border-collapse: collapse;
  border:1px solid #fff;
  text-align: center;
}

.list-atraction th{
  color:#fff;
  text-align: center;
  padding:15px;
  border:1px solid #fff;
}

.list-atraction td{
  color:#333;
  padding:7px 10px;
  border:1px solid #fff;
  background-color: #ccddf6;
}

.at-ttl{
  text-align: left;
}

.area-ttl{
  background-color: #05367f;
}

.c-pass{
  background-color: #ef65ad;
}

.w-pass{
  background-color: #ffa80f;
}

.c-pass-content{
  color:#ef65ad !important;
  background-color: #f1d1e2 !important;
}

.w-pass-content{
  color:#ffa80f !important;
  background-color: #f2e5ce !important;
}

/*=============
section3
=============*/

.section03{
 position: relative;
 width:100%;
 background: linear-gradient(#e3f7ff 0%, #e3f7ff 60%, #ffaeae 100%);
 text-align:center;

}

.list-attraction{
    width:100%;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/att-bg.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    padding:130px 0 0;

}

.section03 h3{
 width:750px;
 margin:0 auto 20px;
}

.at-subttl{
    color:#1c3591;
    display:block;
    width:600px;
    margin:0 auto;
    font-weight: bold;
    font-size: 2.5em;
    padding:30px 0;
    text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/atraction-txt-bg.png);
    background-position: center top;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

.wpass{
    background-color: #ffe9c3;
    border:8px solid #ffa80f;
}

.Tpass{
    background-color: #f4d3e4;
    border:8px solid #ef65ad;   
}

.at-box{
 width:1100px;
 margin:70px auto;
 padding:50px 0;
 border-radius: 20px;
}

.at-box h4{
 width:70%;
 margin:0 auto 30px;
}

.at-box h5{
    width:70%;
    margin:0 auto 50px;
}

.at-box ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin:0 auto 30px;
    padding:0;
  }
.at-box li{
 width:400px;
 text-align:left;
 margin:15px 40px;
}

.at-box li h6{
 font-size: 1.2em;
}

.at-box li a{
 color:#000;
 text-decoration: none;
}

/*=============
detail Button
=============*/

.ct-box {
    position: relative;
    padding: 70px 0;
    text-align: center;
  }
  
  .ct-box p {
    font-size: 0.9em;
  }
  
  .arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.0em;
  }
  
  .arrow::before,
  .arrow::after {
    position: absolute;
    top: 2px;
    bottom: 0;
    left: 155px;
    margin: auto;
    content: "";
    vertical-align: middle;
  }
  
  .ico-ct::before {
    width: 20px;
    height: 20px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
  }
  
  .ico-ct::after {
    left: 160px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #ff0000;
    border-right: 1px solid #ff0000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  .ctbtn {
    width: 190px;
    /*影の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.1em;
    background: transparent;
    outline: none;
    /*アニメーションの指定*/
    transition: all 0.2s ease;
  }
  
  /*hoverをした後のボタンの形状*/
  .ctbtn:hover {
    border-color: transparent;
    text-decoration: none;
  }
  
  /*ボタンの中のテキスト*/
  .ctbtn span {
    position: relative;
    z-index: 2;
    /*z-indexの数値をあげて文字を背景よりも手前に表示*/
    /*テキストの形状*/
    display: block;
    padding: 13px 30px 10px;
    background: #ffa80f;
    color: #fff;
    /*アニメーションの指定*/
    transition: all 0.3s ease;
  }
  
  /*== 右下に押し込まれる（立体が平面に） */
  
  /*影の設定*/
  .pushright:before {
    content: "";
    /*絶対配置で影の位置を決める*/
    position: absolute;
    z-index: 0;
    top: 3px;
    left: 3px;
    /*影の形状*/
    width: 100%;
    height: 100%;
    background-color: rgb(164, 164, 164);
  }
  
  .pushright:hover span {
    transform: translate(3px, 3px);
  }


/*=============
guidebox 
=============*/

.guide-equip{
    position: relative;
    width:1050px;
    margin:200px auto 70px;
    padding:80px 0 20px;
    background-color: #fff;
    border:8px dotted #ff4800;
    border-radius: 30px;
}

.guide-equip h4{
 width:750px;
 position: absolute;
 top:-15px;
 left:50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}

.guide-equip ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    list-style: none;
    margin:0 auto;
    padding:0;
}

.guide-equip li{
  width:300px;
  margin:10px;
}

.guide-equip p{
 margin:10px auto;
 color:#ff4800;
 font-size: 1.2em;
 font-weight: 600;

}

/*=============
recommend
=============*/

.recommend{
    position: relative;
    width:85%;
    min-width:950px;
    margin:100px auto;
    padding:200px 0 0;
}

.recommend h4{
    width:750px;
    position: absolute;
    top:100px;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 2;
}

.recommend ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin:0 auto;
    padding:0;
    z-index: 1;
}

.recommend li{
  position: relative;
  width:300px;
  margin:10px;
  border-radius: 20px;
  padding:30px 10px
}

.recommend li::before{
 content:'';
 position: absolute;
 top:4%;
 left:4%;
 width:92%;
 height:92%;
 margin:0 auto;
 border:2px solid #fff;
 border-radius: 20px;
}

.recommend li img{
 height:130px;
 width:auto;
 margin:0 0 20px;
}


.tb-re{
 background-color: #ef65ad;
}

.wp-re{
    background-color: #ffa80f;
}
.m-re{
    background-color: #889d23;
}

/*=============
detail Button
=============*/

.ct-box2 {
    position: relative;
    padding: 70px 0;
    text-align: center;
  }
  
  .ct-box2 p {
    font-size: 0.9em;
  }
  
  .arrow2 {
    position: relative;
    display: inline-block;
    padding:0 0 0 20px;
    vertical-align: middle;
    text-decoration: none;
  }
  
  .arrow2::before{
    position: absolute;
    top: 2px;
    bottom: 0;
    left: 23px;
    width:26px;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/cart.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    content: "";
    vertical-align: middle;
  }
  

  
  .ctbtn2 {
    width: 190px;
    /*影の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.1em;
    background: transparent;
    outline: none;
    /*アニメーションの指定*/
    transition: all 0.2s ease;
  }
  
  /*hoverをした後のボタンの形状*/
  .ctbtn2:hover {
    border-color: transparent;
    text-decoration: none;
  }
  
  /*ボタンの中のテキスト*/
  .ctbtn2 span {
    position: relative;
    z-index: 2;
    /*z-indexの数値をあげて文字を背景よりも手前に表示*/
    /*テキストの形状*/
    display: block;
    padding: 13px 10px 10px 30px;
    background: #e70010;
    color: #fff;
    /*アニメーションの指定*/
    transition: all 0.3s ease;
  }
  
  /*== 右下に押し込まれる（立体が平面に） */
  
  /*影の設定*/
  .pushright2:before {
    content: "";
    /*絶対配置で影の位置を決める*/
    position: absolute;
    z-index: 0;
    top: 3px;
    left: 3px;
    /*影の形状*/
    width: 100%;
    height: 100%;
    background-color: rgb(164, 164, 164);
  }
  
  .pushright2:hover span {
    transform: translate(3px, 3px);
  }

footer{
    width:100%;
    background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/footer-guide.png);
    background-position: center top;
    background-repeat: repeat-x;
    background-size: 100%;
    padding:17% 0 30px 0;

}

footer p{
    font-size:0.8em;
    color:#fff;
    margin:0;
}

/*SmartPhone*/
@media screen and (max-width: 520px) {

  .pc{
    display: none;
  }
  
  .sp{
    display:inline-block;
  }

/*=============
section1
=============*/
.section01{
    margin-top:50px !important;
    background-repeat: no-repeat;
    background-color: #629517;
    background-size: 150%;
    padding:5% 0 45%;
}

.top-comment{
    width:150px;
    margin:0 auto;
 }
 .section01 h2{
  width:90%;
  margin:0 auto;
}

.section01 h3{
    width:80%;
    margin:5% auto 3%;
  }

.section01 h3::after{
    content:'';
    display: block;
    position: absolute;
    right:-20px;
    top:100px;
    width:67px;
    height:55px;
}

.sub-ttl{
 font-size:1.4em;
}

.sub-ttl::after{
    top:12px;
    height:17px;
  } 
   .section01 ol{
    flex-wrap: wrap;
    margin:50% auto 3%;
  }

  .section01 li{
    width:65%;
    margin:0 5% 0 30%;
}

.point1::before{
  left:70px;
  top:-130px;
  width:210px;
  height:170px;
  transform: translateX(-50%);
  -webkit-transform:  translateX(-50%);
  -ms-transform:  translateX(-50%);
}

.point1::after{
  right:-20px;
  top:105%;
  width:135px;
  height:60px;
  transform:rotate(100deg);

}

.point2{
  top:120px;
  margin:5% 30% 0 5% !important;
}
.point2::before{
  left:-20px;
  top:-140px;
  width:210px;
  height:170px;
}

.point2::after{
  right:50%;
  top:100%;
  width:174px;
  height:99px;
  transform:rotate(90deg);

}

.point3{
  top:160px;
}

.point3::before{
  left:35%;
  top:-80px;
  width:210px;
  height:170px;
}

/*=============
section2
=============*/
.section02{
  padding:10% 0;
}

.section02 h3{
  width:90%;
  margin:0 auto 0;
 }

 .pass-subttl{
  font-size: 1.4em;
  padding:5px 0;
}

.section02 ul{

  margin:30px auto 15px;
  text-align: center;
  padding:0 0 30px;
}

.section02 li{
  position: relative;
  width:300px !important;
  padding:0 0 0 0;
  border-radius: 20px;
  height: 780px !important;
  }

  .sub-text{
    position: absolute;
    top:110px;
    left:50%;
    width:290px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  .tb-box, .wp-box, .m-box{
    height: 186vw !important;
  }
  
  .tb-box::before{
    left:-18px;
    top:-49px;
    width:90px;
    height:67px;
  }

  .wp-box::before{
    left:-18px;
    top:-49px;
    width:90px;
    height:67px;
  }
  

  .list-atraction{
    width:95%;
    height:auto;
    margin:0 auto;
  }
  
  
  .swiper{
    width:340px !important;
  }

/*=============
section3
=============*/
 
 .list-attraction{
     padding:10% 0 0;
 
 }
 
 .section03 h3{
  width:90%;
  margin:0 auto;
 }
 .at-subttl{
  width:90%;
  font-size: 1.4em;
  padding:27px 0;
  background-image: url(/wp-content/themes/habakiri-child/kids_pass/img/atraction-txt-bg.png);
  background-position: center;
  background-size: auto 50%;
}

.at-box{
  width:94%;
  margin:5% auto;
  padding:5% 0;
 }

 .at-box h4{
  width:80%;
  margin:0 auto 5%;
 }
 
 .at-box h5{
     width:80%;
     margin:0 auto 5%;
 }

 .at-box ul{
  margin:0 auto 5%;
}

.at-box li{
  width:85%;
  text-align:center;
  margin:5% auto;
 }

 .at-box li h6{
  text-align: left;
 }

 .at-box li p{
text-align: left;
 }

 /*=============
guidebox 
=============*/

.guide-equip{
  width:94%;
  margin:15% auto 5%;
  padding:10% 0 20px;
  border:6px dotted #ff4800;
}

.guide-equip h4{
  width:95%;
  top:-13px;
  left:50%;
 }

 .guide-equip ul{
  flex-wrap: wrap;
}
 
.guide-equip li{
  width:85%;
  margin:10px auto;
}

/*=============
recommend
=============*/

.recommend{
  width:94%;
  min-width:85%;
  margin:5% auto;
  padding:40% 0 0;
}

.recommend h4{
  width:100%;
  top:100px;
  left:50%;
}

.recommend li{
  width:85%;
  margin:10px auto;
}

footer{
  padding:20% 0 0;

}

footer p{
  display: block;
  line-height: 1.7;
  background: linear-gradient(rgba(166,192,75,0.1) 0%, #5d6f1c 30%, #5d6f1c 100%);
  margin:0;
  padding:0 5% 8%;
}

}