@charset "UTF-8";
/* CSS Document */

h2{width: 312px; margin: 60px auto 35px;}
h3 {
color : #AB7A28;
font-size: 3em;
font-weight: bold;
  position: relative;
  padding: 1.5rem;
  text-align: center;
  margin: 0 0 40px;
}

h3:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #AB7A28;

}


#hero{position: relative; z-index: 5;}
#lead{width: 900px; margin:  auto ; position: relative; text-align: center;}

#lead .item01{position: absolute; right: 0; top: -145px; width: 295px; z-index: 0; }
@media screen and (min-width:1400px) {
#lead .item01{position: absolute; right: 0; top: -155px; width: 295px; }
}

#lead .txt1{font-size : 23px; color: #fff; line-height: 40px; background: #ab7a28;  width: 600px; margin: 0 auto 20px; position: relative; z-index: 5;}
#lead .txt2{ font-size : 23px;  line-height : 1.2em;  color : #AB7A28;}
#lead .txt2 span{font-size: 0.8em; padding: 10px 0 15px; display: block;}
#lead .txt3{  font-weight : bold;  font-size : 18px;  line-height : 35px;  color : #333333;}

/*sns*/
#snsareas{padding: 60px 0 100px;}
#snsareas ul{display: flex; justify-content: space-between; width: 750px; margin: auto;}
#snsareas .icon{width: 37px; margin: 0 auto 15px;}
#snsareas .fb,
#snsareas .inst{width: 350px; height: 500px; overflow: auto;}

/**/
#content{}
#content #point1,
#content #point2,
#content #point3{display: flex; align-items:flex-end; width: 900px; margin: 0 auto 40px;}
#content section h4{display: flex; align-items: center; font-size: 25px; font-weight: bold; color: #ab7a28;}
#content section h4 span{width: 36px;}
#content .pict{width: 600px;}
#content .text{width: calc(100% - 630px);font-size : 16px; line-height : 26px; font-feature-settings: "palt"; margin-right: 30px;}

#content section#point2{flex-direction: row-reverse;}
#content section#point2 .text{margin-left: 30px; margin-right: 0px;}

#viewpoint{}
#viewpoint .midokoro{background: #fff;}
#viewpoint .midokoro p{width: 1200px; margin: auto;}


#lift{width: 900px; border: 1px solid #AB7A28; margin:75px auto 75px; padding: 55px 0;}

#lift h4{margin-bottom: 10px;}
#lift .box1{width: 700px; margin: 0 auto 35px; position: relative;}
#lift .box1 li.pict{width: 250px; position: absolute; top: 0; right: 0;}
#lift .box1 li.txt{width: 100%;}

#lift .box1 .note{margin: 20px 0 0;}
#lift .box1 .note li{font-size : 14px;  line-height : 22px;  color : #333333; padding-left: 1.2em;}
#lift .box1 .note li::before{content: '※'; margin-left: -1.2em; padding-right: 5px;}


#lift .box2{width: 700px; margin: auto; display: flex; justify-content: space-between;}




#lift .time{font-weight : bold;
  font-size : 20px;
  line-height : 24px;
  color : #AB7A28; margin-bottom: 10px;}
  
#lift .txt{font-size : 18px;
  line-height : 31px;
  color : #333333; margin-bottom: 10px;
  width: 420px;}

#lift .size {
  position: relative;
  padding: 5px 5px 5px 7px;
  background: #AB7A28;
  font-size: 18px;
  color: white;
  margin-bottom: 10px;
  line-height: 31px;
  z-index:-1;
  width: 420px;
}

#lift .size:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
  transform: scale(1, -1); 
}


#photo{background : #F2EBDF; padding: 0 0 105px;}

#photo div{width: 750px; margin: auto;}
#photo .slick-dots li{width: 10px; -webkit-text-size-adjust: 100%;}
#photo .slick-dots li button:before{content: '●'; color: #000; }
#photo .slick-dots li.slick-active button:before{color: #ab7a28;}
#photo .slick-next{border: solid #666; border-width: 0px 1px 1px 0px; transform:rotate(-45deg); }
#photo .slick-prev{border: solid #666; border-width: 0px 0px 1px 1px; transform:rotate(45deg); }
#photo .slick-prev:before, #photo .slick-next:before{content: '';}


/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){

#lead{width: 100%;}
#snsareas ul{width: 100%;}
#snsareas .fb, #snsareas .inst{width: 300px;}
#content #point1, #content #point2, #content #point3, #content #point4, #content #point5{width: 100%;}
#content .pict{width: 50%;}
#content .text{width: 50%;}

#photo{padding: 0 0 25px;}
#photo div{width: 100%;}
#photo > div{width: 80%;}
#lead .item01{width: 290px;}

#lift{width: 100%;}

}

/*スマホ縦*/
@media screen and (max-width: 480px){

h2{width: 55%; margin: 45px auto 20px;}
h3{font-size: 2.2em;}
#lead{width: 94%; text-align: center;}
#lead .txt1{width: 100%; font-size: 14px;}
#lead .txt2{font-size: 15px; line-height: 1.4em; margin: 15px 0 20px;}
#lead .txt3{font-size: 15px; line-height: 1.4em; margin: 0 0 45px;}
#lead .item01{width: 200px; top: -85px; right: -2.5%;}

#content #point1, #content #point2, #content #point3{width: 90%; display: block;}
#content .text,#content .pict{width: 100%;}

#content section h4{font-size: 21px;}
#content .pict{margin: 10px 0 0;}
#content .text{font-size: 14px; line-height: 22px;}

#viewpoint .midokoro{width: 100%; overflow: auto;}

#content section#point2 .text{margin-left: 0;}

#lift{width: 91%; padding: 20px 2%;}
#lift .size{width: 100%; font-size: 15px; padding: 0 0 0 5px;}
#lift .time{font-size: 17px;}
#lift .txt{width: 100%; font-size: 14px; line-height: 26px;}
#lift .box1{width: 100%;}
#lift .box1 li.pict{position: relative; width: 100%;}
#lift .box1 .note{font-size: 12px;}

#lift .box2{display: block; width: 100%;}

#photo{padding: 0 0 25px;}
#photo div{width: 100%;}
#photo > div{width: 80%;}


/*sns*/
#snsareas{padding: 30px 0 50px;}
#snsareas ul{display: block; justify-content: space-between; width: 95%; margin: auto;}
#snsareas .icon{width: 37px; margin: 0 auto 15px;}
#snsareas .fb{width: 100%; height: 370px; overflow: auto; margin-bottom: 20px}
#snsareas .inst{width: 100%; height: auto; overflow: auto; margin-bottom: 20px}


}

/*スマホ縦・小*/
@media screen and (max-width: 320px){}