@charset "utf-8";
/* CSS Document */
/* â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â–  */
/* ■■■■■■■■■■■■■■■■   　デフォルト   　■■■■■■■■■■■■■■■■■ */
/* â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â–  */

html, body, div, span, iframe,article,figure,
p, a, img, small, dl, dt, dd, ol, ul, li,
h1, h2, h3, h4, h5,h6{
	border: 0;
	margin: 0;
	padding: 0;
	font-size:14px;
	letter-spacing:0.1em;
  font-feature-settings : "palt";
  -webkit-text-size-adjust: 100%;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
  color: #442E0D;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* ローディング画面 */
#loading {
  background: #FFF;
  width: 100vw;
  height: 100vh;
  transition: all 2s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition-delay:1s;
}
.loaded {
  opacity: 0;
  visibility: hidden;
}

.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.7s infinite ease-in-out;
  animation: load7 1.7s infinite ease-in-out;
}
.spinner {
  color: #F993A5;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0) translateY(-50%);
  -ms-transform: translateZ(0) translateY(-50%);
  transform: translateZ(0) translateY(-50%);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.spinner:before,
.spinner:after {
  content: '';
  position: absolute;
  top: 0;
}
.spinner:before {
  left: -2em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner:after {
  left: 2em;
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

body{
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値では非表示 */
}
 
body.fadeout::before {
  opacity: 1;
}



::selection {
    background: #4B423B;
    color: #FFF;
}

::-moz-selection {
    background: #4B423B;
    color: #FFF;
}


h1, h2, h3, h4, h5,h6{
  font-weight: normal;
}

html,body {
	line-height: 1;
	width: 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body{
  position: relative;
}

ol, ul {
	list-style: none;
}
a{
	outline:none;
	text-decoration:none;
	cursor: pointer;
	}
a img {
	border: none;
	border-style:none;
}

img{
  width: 100%;
  height: auto;
  vertical-align: top;
  line-height: 1.0em;
}

.bold{
  font-weight: bold;
}

li{
	list-style:none;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

br.sp_br,#nav_sp,.sp_text{
  display: none;
}

.switch {
  visibility: hidden;
}

.wpcf7-spinner,
.wpcf7 .ajax-loader{
  display: none;
}



/*■■■■■■■■　common　■■■■■■■■*/

.mv .btn{
  width: 45%;
  margin: 0 auto;
  transform: translateY(-50%);
}

.mv .btn a{
  display: block;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bound 0.9s infinite ease-in-out;
  animation: bound 0.9s infinite ease-in-out;
}


@keyframes bound {
  0%{
    transform: scale(1);
  }
  50% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

.sec01{
  width:65%;
  margin:0 auto 60px;
  background:#B68F57;
  border: 30px solid #B68F57;
}
.sec01 .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.sec01 .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.sec12{
  width:65%;
  margin:60px auto 0;
  background:#81b1ba;
  border: 30px solid #81b1ba;
border-radius:40px;
}
.sec12 .youtube {
  position: relative;
  width: 100%;
}


.sec12 .youtube h3{
	font-size:26px;
	line-height:45px;
	font-weight:bold;
	text-align:center;
	color:#FFF;
}


.sec02 .comment{
  width:80%;
  margin: 0 auto;
  transform: translateY(-3%);
  padding-bottom: 30px;
}
.sec02 .btn{
  width: 56%;
  margin: 0 auto 60px;
}
.sec02 .btn a{
  display: block;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bound 0.9s infinite ease-in-out;
  animation: bound 0.9s infinite ease-in-out;
}

.sec03{
  padding-bottom: 10px;
}

.sec03 .btn{
  width: 56%;
  margin: 0 auto 50px;
}
.sec03 .btn a{
  display: block;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bound 0.9s infinite ease-in-out;
  animation: bound 0.9s infinite ease-in-out;
}
.sec04 h2{
  width: 70%;
  margin: 0 auto;
  padding:50px 0;
}

.sec04 .btn{
  width: 56%;
  margin: 0 auto 100px;
}
.sec04 .btn a{
  display: block;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bound 0.9s infinite ease-in-out;
  animation: bound 0.9s infinite ease-in-out;
}


.sec05 figure{
  width: 68%;
  margin: 0 auto;
  padding:0 0 100px;
}
.sec05 ul{
  width:70%;
  max-width: 1100px;
  margin: 0 auto 80px;
}
.sec05 ul li{
  padding-bottom: 50px;
}
.sec05 ul li:last-child{
  padding-bottom: 0;
}

.sec05 ul li dl dt{
  margin-bottom:30px;
  display: table;
}
.sec05 ul li dl dt span{
  display: table-cell;
  width: 100px;
  height: 100px;
  vertical-align: middle;
  padding-right: 30px;
}
.sec05 ul li dl dt strong{
  display: table-cell;
  font-size: 20px;
  line-height: 32px;
  font-weight: bold;
  vertical-align: middle;
}
.sec05 ul li dl dd{
  background: #EFEDEA;
  padding: 30px 130px 30px 50px ;
  position: relative;
  box-sizing: border-box;
  border-radius: 20px;
  font-size: 18px;
  line-height: 32px;
}
.sec05 ul li dl dd span{
  width: 120px;
  position: absolute;
  top: -30px;
  right: -30px;
}

.sec06{
  margin-bottom: 80px;
}
.sec07{
  margin: 0 auto 80px;
}
.sec07 .wrap{
  width: 82%;
  margin: 0 auto;
  padding-bottom:20px;
}

.sec07 .btn{
  width: 56%;
  margin: 0 auto 0;
}
.sec07 .btn a{
  display: block;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bound 0.9s infinite ease-in-out;
  animation: bound 0.9s infinite ease-in-out;
}
.sec08{
  background: #F1F0F7;
  padding: 80px 0;
}
.sec08 .wrap{
  width:1000px;
  margin: 0 auto;
 }
.sec09 .wrap{
  width: 850px;
  border: #E87089 4px solid;
  margin:0 auto 80px;
  border-radius: 20px;
}
.sec09 .wrap figure{
  width: 656px;
  margin: 0 auto 5px;
  transform: translateY(-45px);

}
.sec09 .btn{
  width: 656px;
  margin: 0 auto 50px;
}
.sec09 .btn a{
  display: block;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bound 0.9s infinite ease-in-out;
  animation: bound 0.9s infinite ease-in-out;
}

.sec10{
  background: #F1F0F7;
  padding: 60px 0 80px;
}
.sec10 h4{
  width: 394px;
  margin: 0 auto 50px;

}
.sec10 ul{
  background: #FFF;
  border: #E87089 4px solid;
  width:1000px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
}
.sec10 ul li{
  border-bottom: 4px solid #E87089;
}
.sec10 ul li:last-child{
  border:none;

}
.sec10 ul li dl dt{
  width: 100%;
  padding:30px;
  font-size: 20px;
  line-height:36px;
  font-weight: bold;
  cursor: pointer;
  display: block;
  background: url(../images/sec10_arrow.png) no-repeat center right 30px;
  background-size: 27px;
  box-sizing: border-box;
}
.sec10 ul li dl dt span{
  width: 32px;
  display: inline-block;
  padding-right: 15px;
  transform: translateY(3px);
}
.sec10 ul li dl dt.open{
  background: url(../images/sec10_arrow_off.png) no-repeat center right 30px;
  background-size: 27px;
}
.sec10 ul li dl dd{
  border-top: 4px solid #E87089;
  width: 100%;
  padding:30px;
  font-size:18px;
  line-height:36px;
  background: #F9E8ED;
  box-sizing: border-box;
  display: none;
}

.sec11{
  padding: 80px 0;
  position: relative;
}

.sec11 .message{
  width: 900px;
  margin:0 auto 40px ;
}

.sec11 .tel{
  width: 470px;
  margin:0 auto 20px ;
}

.sec11 .tel_cap{
  width:360px;
  margin:0 auto 30px ;
}

.sec11 .btn{
  width: 408px;
  margin: 0 auto 15px;
}
.sec11 .btn a{
  display: block;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bound 0.9s infinite ease-in-out;
  animation: bound 0.9s infinite ease-in-out;
}

.sec11 .btn_cap{
  width:236px;
  margin:0 auto ;
}


.sec11 figure.left{
  width: 150px;
  position:absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-430px);
}

.sec11 figure.right{
  width: 200px;
  position:absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(220px);
}



footer{
  width: 100%;
  padding:50px 0;
  background: #F993A5;
}

footer .wrap{
  width: 1160px;
  margin: 0 auto;
}


footer .wrap h3 a{
  font-size:26px;
  font-weight: bold;
  color: #FFF;
  margin-bottom: 30px;
  letter-spacing: 0;
	display:inline-block;
}

footer .wrap ul{
  font-size: 0;
  text-align: left;
  padding-bottom: 20px;
}

footer .wrap ul li{
  width: 45%;
  display: inline-block; 
  color: #FFF;
  vertical-align: top;
}
footer .wrap ul li:first-child{
  margin-right: 10%;
}
footer .wrap ul li dl dt{
  font-size:18px;
  font-weight: bold;
  color: #FFF;
  padding-bottom:15px;
}

footer .wrap ul li dl dd{
  font-size:14px;
  line-height: 24px;
  color: #FFF;
}

footer .wrap small{
  font-size:12px;
  color: #FFF;
  display: block;
  text-align: right;
}