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





/************SP************/@media (max-width: 767px) {
	
/*****************************************************

  全ページ　共通

*****************************************************/
	
.pc {
	display: none;
}

.sp {
	display: block;
}	
	
	

.titol {
	text-align: center;
	margin: 10px;
}

.titol img{
	margin: -10px 0 1%;
}




.titol h3{
	font-size: 6vw;
	font-weight:100;
}



img {
    width: 100%;
    
    margin: 0;
    padding: 0;
	vertical-align:bottom;
}

.fadein {
    opacity : 0;
    transform : translate(0, 70px);
    transition : all 1300ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}



/*****************************************************

	header

*****************************************************/



header {
	
	z-index: 20;
}
header h1 {
	width: 46%;
	margin: 0 ;
}


.gotop{
	position: fixed;
	right: 0;
	width: 40%;
	top:0;
}




.head-space{
	height: 63px;
}

.head-sp .logo{
	width: 80%;
	text-align: center;
	margin-top: 5px;
	margin: 5px auto 0;
}

.head-sp .logo img{
	width: 240px;
	margin: 0 auto;
	height: auto;
}



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

              nav

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



/*============
#mask
=============*/
#mask {
  display: none;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
  transition: all .5s;
}



/*****************************************************

  footer

*****************************************************/

footer {
	
	background-repeat: repeat;
	padding: 0px 0 0px;
	color: #999;
	width: 100%;
	margin-top: 0px;
	
}
footer .inner {
	width: 100%;
	margin: 0 auto 10%;
	
}

footer .inner .logo{
	width: 0%;
	margin: 0 auto 20px;
}


footer .inner .sns{
	display: flex;
	justify-content: space-between;
	width: 150px;
	margin: 0 auto 30px;
}

footer .inner .sns li{
		width: 37px;
	
}


footer .inner .nav{
	display: block;
	justify-content: space-between;
	width: 100%;
	text-align: center;
	margin: 0 auto 8%;
	font-size:3.6vw;
}

footer .inner .nav li{
	margin-bottom: 2.5%;
}


.copy {
	width: 100%;
	text-align: center;
	background-color: #fff;
	
	color: #000;
	padding: 10% 0;
	font-size: 3.5vw;

}


/*****************************************************

  ページ共通

*****************************************************/

.page-title{
	width: 100%;
	text-align: center;
	margin: 20px 0 20px;
}


.page-title h2{
	font-size: 6vw;
	font-weight: 100;
	margin-bottom: 10px;
}

.page-title p{
	font-size: 4vw;
}





/*****************************************************

  トップページ	

*****************************************************/

.background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	margin: 0 auto;
    height: auto;
    overflow: hidden;
    z-index: -3;
	
}

.background-video video {
    width: 96%;
	margin: 3% auto 0;
    height: auto;
}


.top_main {
	position: relative;
	z-index: 2;
	margin: -19% 0 0;
	width: 100%;
}
.top_main .logo {
	position: absolute;
	top: 45%;
	left: 25%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 380px;
}
.top_main video {
	width: 90%;
	height: auto;
	z-index: 2;
	margin: 0 auto;
}

.top-page {
	font-weight: 100;
}
.top-page .sect1 {
	width: 100%;
	margin: 30px auto 50px;
}
.top-page .sect1 .box {
	width: 100%;
	font-size: 20px;
	margin: 0 auto 30px;
	font-weight: 100;
	
	
}


/*********パララックス*************/

.contents{
		padding-top: 130%;
	}
	
.contents2{
		padding-top: 0%;
	}
section {
  position: relative;
  width: 100%;
  height: auto;
	padding-top: 0;
}
section .sectionInner {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
	padding-top: 100%;
  height: 500px;
  clip: rect(auto, auto, auto, auto); /* これで背景を切り抜く */
}
section .imageBg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 500px;
  padding-top: 100%;
  background-size: cover;
  background-position: center;
}

	section #imageBg0 {
  background-image: url("../img/tab_bg1.jpg");
		background-size: 150%;
}
section #imageBg0 {
  background-image: url("../img/tab_bg1.jpg");
	background-size: 150%;
}
section #imageBg0 {
  background-image: url("../img/tab_bg1.jpg");
	background-size: 150%;
}
	
	.height1{
		height: 500px;
	}

	
	section div.cntFrame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 0% 0; 
  margin-top: 0;
  background: rgba(255,255,255,.8);
  color: #111;
}


/*****************************************************

       ppページ	

*****************************************************/

.pp{
	width: 90%;
	margin: 0 5% 10%;
}

.pp p{
	font-size: 4.1vw;
}


.pp h4{
	font-size: 4.5vw;
	margin-bottom: 10px;
}

.pp ul li{
	font-size: 4.1vw;
	margin-bottom: 7px;
}

.pp ul{
	
	margin-bottom: 20px;




}
	
	
	
/*****************************************************

  運営会社

*****************************************************/


.mein{
	
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
	

.mein h1{
	
	width: 65%;
	margin: 0;
	padding: 0;
	text-align: center;
}


.company .greeting{
	width: 100%;
	margin: 0;
	text-align: center;
	padding: 0;
}



.company .greeting p{
	font-size: 3.5vw;
	width: 92%;
	margin: 0 3%;
}


.company dl{
	width: 98%;
	margin: 2% 4%;
    position: relative;
    left: 0;
    font-size: 3.5vw;
}

.company dt {
	width: 20%;
    position: absolute;
    left: 0;
    padding-top: 5%;
}

.company dd {
	width: 68%;
    padding-left: 25%;;
	padding-top: 5%;
    border-bottom: solid 3px #222;
}

	
	
/*****************************************************

  プライバシーポリシー

*****************************************************/


.mein h1{
	
	width: 100%;
	margin: 0 auto;
	
}

.mein h1 img{
	
	width: 67%;
	
}

.ppSect{
	width: 90%;
	margin: 7% 5% 8%;
}

.ppSect h3{
	line-height: 160%;
	margin: 10px;
	font-size: 3.5vw;
}

.ppSect p{
	line-height: 160%;
	font-size: 3.2vw;
}

/*****************************************************

  特商法に基づく記載

*****************************************************/
.notice {
	width: 90%;
	margin: 7% 5% 8%;
	padding: 4% 0;
}

.notice h1{
	
	width: 100%;
	margin: 0 auto;
	font-size: 4.2vw;
}


.notice .sect{
	width: 90%;
	margin: 7% 5% 8%;
	padding: 4% 0;
}

.notice .sect h3{
	line-height: 160%;
	margin: 10px;
	font-size: 3.5vw;
}

.notice .sect p{
	line-height: 160%;
	font-size: 3.2vw;
}


	.sect{
	margin: 0 auto;
	width: 100%;
}
	
/************************

       ▼▼▼コンテンツ▼▼▼

************************/
	
.sect1-0{
	position: relative;
	margin: 0 auto;
	width: 100%;
	
}
	

.sect1-1{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect1_1_bg_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height: auto;
	padding-top: 160%;
}

.sect1-1 .img{
	width: 100%;
	position: absolute;
	top: 58%;
    left: 0;
}


.sect1-2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect1_2_bg_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height: auto;
	padding-top: 192%;
}

.sect1-2 .img{
	width: 100%;
	position: absolute;
    top: 57%;
    left: 0;
	
}

.sect1-3{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect1_3_bg_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height: auto;
	padding-top: 134%;
}

.sect1-3 .img{
	width: 100%;
	position: absolute;
    top: 47%;
    left: 0;
}

.sect1-4{
	margin: 0 auto;
	width: 100%;
}

.sect1-5{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect1_5_bg_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height: auto;
	padding-top: 40%;
}

.sect2-1{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect2_1_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height: auto;
	padding-top: 155%;
}

.sect2-2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect2_2_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height: auto;
	padding-top: 48%;
}	

.sect2-3{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect2_3_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height: auto;
	padding-top: 45%;
}	

	
.sect2{
	position: relative;
	width: 100%;
	margin: 0 auto;
	height:auto;
}	
.sect3{
	position: relative;
	width: 100%;
	margin: 0 auto;
	height:auto;
}
	
	
.sect4{
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect4_bg_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	
}

.sect4 .list img{
	width: 100%;
}
	
.sect4 .list{
	position: relative;
	width: 100%;
	margin: 0 auto;
	height:auto;
	padding-top: 358%;
}
	


.sect4 .list .img1{
	position: absolute;
    top: 22%;
    left: 5%;
	width: 45%;
}

.sect4 .list .img2{
	position: absolute;
    top: 20%;
    left: 51%;
	width: 44%;
}

.sect4 .list .img3{
	position: absolute;
    top: 35%;
    left: 3%;
	width: 44%;
}

.sect4 .list .img4{
	position: absolute;
    top: 32.5%;
    left: 52%;
	width: 44%;
}

.sect4 .list .img5{
	position: absolute;
    top: 48%;
    left: 5%;
	width: 44%;
}

.sect4 .list .img6{
	position: absolute;
    top: 45%;
    left: 52%;
	width: 44%;
}

.sect4 .list .img7{
	width: 90%;
	position: absolute;
    top: 83.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
	
.offer1{
	position: relative;
	width: 100%;
	background-image: url("../img/offer_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height:auto;
	padding-top: 125%
}

.offer1 a{
	position: absolute;
    top: 74%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 78%;
}

.offer1 a img{
	width: 200%;
	
  
}

.offer2{
	position: relative;
	width: 100%;
	background-image: url("../img/offer2_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height:auto;
	padding-top: 132%
	
}

.offer2 a{
	position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 78%;
}

.offer2 a img{
	width: 470px;
}


.offer3{
	position: relative;
	width: 100%;
	background-image: url("../img/offer3_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	height:auto;
	padding-top: 132%
	
}

.offer3 a{
	position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 78%;
}

.offer3 a img{
	width: 470px;
}

.sect{
	margin: 0 auto;
	width: 650px;
}

.sectBTM{
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/sect_btm_sp.png");
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 220%;
}

	
	.magin{
		margin: -5% 0 ;
		
	}
	
	
	
	
	
	
	
	
	
	
#Bt_Fixd {
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 5px 2% 8px;
  box-sizing: border-box;
  z-index: 101
}
#Bt_Fixd .txt img {
  width: 92%;
  margin: 0% 4%;
}
#Bt_Fixd ul {
  display: flex;
  justify-content: space-around;
}
#Bt_Fixd ul li {
  margin-left: 0%
}
#Bt_Fixd p {
  text-align: center;
  color: #fff;
  font-size: 11px;
  margin-top: 5px;
}
#Bt_Fixd a {
  display: block;
}

#Bt {
  background: rgba(255, 255, 255, 0.6);
  bottom: 0;
  width: 96%;
  padding: 2% 2% 0;
  box-sizing: border-box;
  z-index: 101
}
#Bt .txt img {
  width: 92%;
  margin: 0% 4%;
}
#Bt ul {
  display: flex;
  justify-content: space-around;
}
#Bt ul li {
  width: 0;
}
#Bt p {
  text-align: center;
  color: #fff;
  font-size: 11px;
  margin-top: 5px;
}
#Bt a {
  display: block;
}

/*******ボタン*********/
.btn-cv1 {
  overflow: hidden;
  position: relative;
  /*background: url(../img/pc/btn_bg_1.png?) repeat-x;
	background-size: 2.8%;*/
}
.btn-cv1 a {
  display: block;
}
.btn-cv2 {
  overflow: hidden;
  position: relative;
  /*background: url(../img/pc/btn_bg_1.png?) repeat-x;
	background-size: 2.8%;*/
}
.btn-cv2 a {
  display: block;
}
.btn-cv1:hover {}
.btn-cv a {
  border-radius: 18px;
  border: solid #fff 3px;
  display: block;
  padding: 16px 40px;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  vertical-align: middle;
}
.btn-cv1 a img {
  vertical-align: middle;
}
.btn-cv1 a:after {
  content: ' ' !important;
}
.cv_btn {
  top: 0;
  margin: auto;
  left: 0;
}
.btn-cv1 .pc {
  display: block;
}
.btn-cv1 .sp {
  display: none;
}
/* ボタンの光沢 */
.is-reflection a {
  overflow: hidden;
}
.is-reflection a:after {
  -moz-animation: is-reflection 2s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: is-reflection 2s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: is-reflection 2s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: is-reflection 2s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: is-reflection 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
/* アニメーションを遅延させる */
.is-reflection + .is-reflection a:after {
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}
@keyframes is-reflection {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
@-webkit-keyframes is-reflection {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
@-webkit-keyframes is-trembling {
  0% {
    -webkit-transform: translate(-3px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
/* 点滅 */
.blinking {
  -webkit-animation: blink 0.8s ease-in-out infinite alternate;
  -moz-animation: blink 0.8s ease-in-out infinite alternate;
  animation: blink 0.8s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**/
	
	
}	
/************************

       ▲▲▲  SP　　▲▲▲

************************/