@charset "utf-8";
/* CSS Document */
body{
  background-color: #e9e4d4;
  background-image: url(../images/bg4.png);
  background-repeat: repeat;
}
header{
  background-color: rgba(157,137,108,0.7);
  width: 100%;
  position: fixed;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5% 15px 8%;
}
header h1 img{
  max-width: 280px;
  height: auto;
}
header h1 a:hover{
  opacity: 0.5;
}
      @media screen and (max-width:600px) {
        header{
          padding: 5px 15px;
        }
        header h1 img{
          max-width: 250px;
        }
      }

/*topImage*/
div#topimg{
	background-image:url("../images/topimg.jpg");
	background-position: center;
	background-size: cover;
	height: 100vh;
	background-repeat:no-repeat;
}
div#topimg h1 {
	background-color: rgba(255,255,255,0.30);
	padding: 5px 10px 5px 5px;
  border-radius: 50px;
	position: absolute;
	top: 50%;
  right:5%;
}
div#topimg h2 img{
  min-width: 300px;
}
div#topimg h2 {
	background-color: rgba(255,255,255,0.30);
	padding: 20px;
  border-radius: 10px;
	position: absolute;
	top: 70%;
  right:5%;
	width: 80%;
  max-width: 600px;
}
div#topimg h2 img{
  max-width: 600px;
}
      @media screen and (max-width:600px) {
        div#topimg{
          height: 100vh;
        }
        div#topimg h1{
          top:55%;
          width: 50%
        }
        div#topimg h2{
          top:70%;
          width: 90%;
        }
      }

div#wrap{
  background-color: #fff;
  width:98%;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 20px;
}
      @media screen and (max-width:600px) {
        div#wrap{
          width: 95%;
        }
      }
/*aisatsu*/
div#hello{
  width: 90%;
  max-width: 900px;
  margin: 100px auto 50px;
  padding: 80px 30px 60px;
}
div#hello div.hamana{
  display: flex;
  justify-content: space-between;  
}
div.hamana p.hamanaimg{
  margin-right: 20px;
}
div.hamana p.hamanaimg img{
  max-width: 600px;
}
div.hamana div.hamanap{
  line-height: 2.0em;
  text-align: left;
}
div.hamana div.hamanap p{
  margin-bottom: 6px;
  font-size: 17px;
}
      @media screen and (max-width:600px) {
        div#hello{
          padding: 60px 15px;
        }
        div#hello div.hamana{
          display: block;
        }
        div#hello div.hamana p.hamanaimg{
          margin-right: 0;
          margin-bottom: 40px;
        }
        div#hello div.hamana p.hamanaimg img{
          object-fit: cover;
          aspect-ratio: 4 / 3;
          object-position: top;
        }
        div#hello div.hamana p.hamanap{
          margin-top:15px;
          line-height: 1.8em;
        }
      }

/*imagebox*/
div.imgbox{
  width: 95%;
  max-width: 700px;
  margin: 0 auto 80px;
}
div.imgflex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  /*margin-bottom: 70px;*/
}
div.imgflex p{
  width: 30%;
  margin-bottom: 50px;
  text-align: center;
}
      @media screen and (max-width:600px) {
        div.imgbox{
          width: 88%;
        }
      }
div.imgbox div.imginfo p{
  font-size: 14.5px;
  text-align: justify;
}
/*section共通*/
section{
  padding-top: 100px;
  padding-bottom: 70px;
  margin: 30px 0;
}
section h1{
  font-size: 50px;
  color:#8A7D66;
  margin-bottom: 20px;
  line-height: 0.6em;
  text-align: center;
}
section p.h1under{
  font-size: 14px;
  margin-bottom: 50px;
  text-align: center;
  letter-spacing: 1.1em;
  padding-left: 1.1em;
}
      @media screen and (max-width:600px) {
        section h1{
          font-size: 46px;
        }
      }

div.secin900{
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}
      @media screen and (max-width:600px) {
        div.secin900{
          width: 85%;
        }
      }

/*#ABOUT*/
div.aboutin{
  margin-top: 60px;
  font-size: 16px;
  line-height: 1.8em;
  text-align: left;
}
div.aboutin h2{
  color: #fff;
  font-size: 24px;
  margin-bottom: 16px;
  padding: 10px;
  background-color: #8B7474;
}
div.aboutin div.aboutinin{
  padding: 0 20px;
}
div.aboutin div.aboutinin p{
  margin-bottom: 5px;
}
      @media screen and (max-width:600px) {
        div.aboutin h2{
          font-size: 20px;
        }
      }

/*#PRICE*/
section#price{
  text-align: center;
  max-width: 500px;
  width: 95%;
  margin: 30px auto;
}
div.base{
  background-color: #F2D3A0;
  padding: 15px 20px;
  font-size: 17px;
  line-height: 1.5em;
  text-align: left;
}
div.base p{
  margin-bottom: 5px;
}
div.pricemain h2{
  font-size: 25px;
  margin-top: 70px;
  margin-bottom: 30px;
  display: inline-block;
  border-bottom: solid 2px #393;
  padding-bottom: 0.15em;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
}
div.pricemain p{
  text-align: left;
  font-size: 15px;
  margin-top: 15px;
  margin-left: 20px;
}
div.pricemain table{
  width: 100%;
  margin: 10px auto 30px;
  padding: 20px;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.9em;
  text-align: left;
  border: 1px solid #8B7474;
}
table td.wid{
  width: 100px;
}
@media screen and (max-width:600px) {
  table td.wid{
    width: 70px;
  }  
}
div.pricemain table p.ss{
  font-size: 12px;
  line-height: 1.0em;
  margin-top: 0;
}

/*priceInfo*/
div.info{
  /*width: 85%;
  max-width: 700px;*/
  margin: 50px auto;
  line-height: 1.8em;
  text-align: left;
}
div.info ul{
  list-style-type: circle;
  list-style-position: inside;
  padding-left: 1em;
  line-height: 1.4em;
}
div.info ul li{
  text-indent: -1.4em;
  padding-left: 1em;
  margin-bottom: 8px;
}

/*初回*/
div.first{
  display: flex;
  justify-content: space-between;
  width: 450px;
  margin: 50px auto 80px;
}
div.first div.flexcenter{
  background-color: #66CB60;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
}
div.first div.flexcenter div.inner{
  align-content: center;
}
      @media screen and (max-width:600px) {
        div.first{
          display: block;
          width: 100%;
        }
        div.first div.flexcenter{
          margin: 0 auto 50px;
        }
      }

p.fa{
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  border-bottom: solid 1px #000;
  padding-bottom: 0.15em
}
p.fb{
  font-size: 16px;
  line-height: 1.6em;
  font-weight: bold;
}
p.fc{
  font-size: 17px;
  font-weight: bold;
  color: #F04447;
  margin-top: 10px;
}
p.fd{
  font-size: 15px;
  margin-top: 8px;
}

/*回数券*/
div.ticket{
  max-width: 500px;
  width: 90%;
  margin: 70px auto ;
  text-align: center;
} 
/*div.ticket div{
  margin: 0 auto;
}
*/div.ticket h2{
  background-color: #8AD386;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  border-radius: 15px;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  text-align: center;
  padding: 10px 10px 10px 18px;
}
div.ticket div.ticketinner{
  width: 90%;
  margin: 0 auto;
}
@media screen and (max-width:600px) {
  div.ticket div.ticketinner{
    width: 100%;
  }
}
div.ticket div.ticketinner h3{
  font-size: bold;
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 15px;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', yu-gothic-pr6n, '游ゴシック', YuGothic, 'Hiragino Sans', 'ＭＳ Ｐゴシック', sans-serif, system-ui;
  text-align: left;
}
div.ticket div.ticketinner h3:first-child{
  margin-top: 0;
}
div.ticket div.ticketinner dl{
  text-align: left;
}
div.ticket div.ticketinner dl dt{
  padding-left: 18px;
  line-height: 1.2em;
}
span.tprice{
  color:#F04447; 
}
span.tax{
  font-size: 12px;
}
div.ticket div.ticketinner dl dd{
  font-size: 12px;
  margin-bottom: 10px;
}

/*DETAIL*/
section#detail {
}
div.sinkyu{
  /*width: 90%;*/
  max-width: 900px;
  margin: 0 auto 80px;
  border:1px solid #8B7474;
  padding: 20px 10px 10px 10px;
}
div.sinkyu h2{
  font-size: 20px;
  margin-bottom: 15px;
  padding: 5px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
div.sinkyu p.atention{
  font-size: 14px;
  margin-top: 7px;
  margin-left: 13px;
  margin-bottom: 10px;
}
div.sinkyuin{
padding: 10px;
}
div.sinkyuin p{
  line-height: 1.7em;
  font-size: 16px;
  margin-bottom: 5px;
  text-align: justify;
}
      @media screen and (max-width:600px) {
        div.sinkyu{
          padding: 20px 5px 10px 5px;
        }
      }
div.detailin{
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 70px;
  border:1px solid #8B7474
}
.detail-flex{
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 10px 5px;
}
      @media screen and (max-width:600px) {
        .detail-flex{
          padding: 10px 5px 10px 5px;
        }
      }
div.type{
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', yu-gothic-pr6n, '游ゴシック', YuGothic, 'Hiragino Sans', 'ＭＳ Ｐゴシック', sans-serif, system-ui;
  text-align: center;
  color: #fff;
  flex: 2.5;
}
div.contents,
div.cont{
  flex: 7.5;
  padding-left: 20px;
}
      @media screen and (max-width:600px) {
        .detail-flex{
          display: block;
        }
        div.type{
          margin-bottom: 30px;
        }
        div.contents,
        div.cont{
          padding-left: 0;
        }
      }

/*.type*/
.type h4{
  font-size: 20px;
  margin-bottom: 9px;
  border-radius: 13px;
  border: 1px solid #704B27;
  padding: 6px 3px;
  font-weight: bold;
}
.type h5{
  font-size: 16px;
  margin-bottom: 10px;
}
.type h6{
  background-color: #66CB60;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 0 auto;color: #fff;
}
div.cont{
}
div.cont h3{
  font-size: 18px;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
  margin-top: 5px;
  margin-bottom: 10px;
}
div.cont p{
  color: #D5181B;
  font-size: 16px;
  line-height: 1.5;  
}
div.sub{background-color: honeydew;
  font-size: 14px;
  line-height: 1.4em;
  margin-top: 10px;
  margin-right: 10px;
  padding: 15px 15px;
}
div.sub p{
  font-size: 14px;
  color: #704B27;
}
div.contents{
}
div.contents p{
  color: #D5181B;
  font-size: 16px;
  line-height: 1.6em;
}
div.contents p.atention{
  font-size: 14px;
  margin-top: 7px;
}
div.contents,
div.recom,
div.worry{
  text-align: justify;
}

div.recom,
div.worry{
  padding: 20px;
}
      @media screen and (max-width:600px) {
        div.recom,
        div.worry{
          padding: 10px;
        }
      }
div.recom h3,
div.worry h3{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  border-bottom: 1px solid #000;
  padding-bottom: 3px;
}
div.recom ul,
div.worry div{
  margin-left: 1em;
}
div.recom ul li,
div.worry p{
  font-size: 15px;
  line-height: 1.6em
}
div.typesita{
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}
div.typesita p{
  line-height: 1.6em;
  font-size: 16px;
  margin-bottom: 10px;
  text-indent: -1em;
  margin-left: 1em;
}

/*flow*/
section#flow{
}
div.flowin{background-color: navajowhite;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 7px;
}
div.flowimg{background-color: #fff;
  flex: 2;
  text-align: center;
  padding: 5px;
}
div.flowimg img{
  max-width: 35px;
}
div.tatenaka{/*background-color: #B9DCF4;*/
  flex: 10;
  display: flex;
  align-items: center;
  padding: 10px;
}
div.tatenaka div.flowread{
}
div.tatenaka div.flowread p{
  line-height: 1.7em;
}
div.tatenaka p.readmain{/*background-color: #B368F5;*/
  font-size: 16px;
}
div.flowread p.readsub{/*background-color: #F2A6C3;*/
  font-size: 15px;
  line-height: 1.4em;
  margin-left: 15px;
  margin-top: 5px;
  color: #360;
}
        @media screen and (max-width:600px) {
          div.tatenaka{/*background-color: #B9DCF4;*/
            padding-right: 5px;
          }
        }

/*info2*/
div#info2{
  width: 90%;
  margin: 60px auto 70px;
}
div#info2 ul{
  list-style-type:disc;
  list-style-position: inside;
  text-align: justify;
}
div#info2 ul li{
  line-height: 1.6em;
  font-size: 16px;
  color: #360;
  text-indent: -1.4em;
  padding-left: 1.4em;
  margin-bottom: 3px;
}
      @media screen and (max-width:600px) {
        div#info2{
          width: 90%;
        }
      }

/*footer*/
footer{
  border:3px white solid;
  background-color: rgba(157,137,108,0.7);
  padding: 80px;
  max-width: 1000px;
  width: 98%;
  margin: 0 auto 100px;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
}
footer div.footflex{
  display: flex;
  justify-content: space-between;
}

footer div.footleft{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
footer div.footright{
}
footer div.footleft h1 img{
  min-width: 210px;
  margin-bottom: 10px;
}
footer div h2{
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 12px;
  font-weight: bold;
}
footer div p.acc{
  font-size: 17px;
  padding-left: 15px;
  line-height: 1.4em;
}
footer div p.acc span{
  font-size: 15px;
}
footer div p.time{
  font-size: 24px;
  margin-bottom: 16px;
  padding-left: 10px;
  color: #fff;
}
footer div p.time span{
  font-size: 18px;
}
footer div p.tel{
  font-size: 30px;
  margin-bottom: 16px;
  padding-left: 10px;
  color: #fff;
}
footer div p.ex{
  font-size: 15px;
  line-height: 1.5em;
  padding-left: 30px;
}
      @media screen and (max-width:600px) {
        footer{
          padding: 50px;
        }
        footer div.footflex{
          display: block;
          width: 100%;
        }
        footer div.footleft{
          margin-right: 0;
          text-align: center;
          margin-bottom: 40px;
        }
      }


/*共通*/
hr{
  border:0;
  margin-top: 10px;
  margin-bottom: 10px;
}