@charset "UTF-8";

html,body,header,footer,div,ul,li,section,p,h1,h2,h3,h4 {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html {
	font-size:62.5%;
}
body {
	color:#212121;
	background-color:#fff;
	position:relative;
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

}
body img{
	vertical-align: bottom;
}

.fancybox-button--fullscreen{
  display:none !important;
}

/*-----------------------
	共通
-----------------------*/
#report a {
	color:#C2185B;
	transition:.2s;
	cursor:pointer;
}
#report a:hover {
	text-decoration:none;
}

#report ul,li,div {
	margin:0;
	padding:0;
	list-style:none;
}
#report img {
    display: block;
    max-width: 100%;
    vertical-align: bottom;
}

@media screen and (min-width: 769px) {
	.sponly{
		display:none!important;
	}
}
@media screen and (max-width: 768px) {
	html {
		
	}
	.pconly{
		display:none!important;
	}
	img{
		display: block;
    	width: 100%;
	}
}

#report .sidebg {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(../images/sidebg.png) center top no-repeat;
}

/*-----------------------
	メイン画像
-----------------------*/

#report .kv {
	background:url(../images/bg_main.jpg) center top no-repeat;
	background-size: cover;
}
#report .kv h1{
	width: 80%;
    margin: 0 auto;
    padding: 20px 0 60px 0;
}
#report .kv h1 img{
	margin: 0 auto;
}
#report .accepting{
    background: #00b9ef;
    color: #fff;
    padding: 35px 0;
}
#report .accepting img{
	display: block;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	#report .kv {
		background:none;
	}
	#report .kv h1{
	    width: 100%;
	    padding: 0;
	}
	#report .accepting{
	    background: #00b9ef;
	    color: #fff;
	    padding: 4% 0;
	}
	#report .accepting img{
	    width: 80%;
	}

}

/*-----------------------
	体験レポート
-----------------------*/
#report .bg_st{
    background: url(../images/bg_summary.png) center top no-repeat;
    background-size: cover;
}
.up {
    margin-top: -240px;
}

#report .imLeft{
    margin-right: auto;
}
#report .imRight{
    margin-left: auto;
}
#report .talkBox{
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 0 80px 0;
}
#report .talkBox img{
	max-width: 100%;
}
#report .movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 60px;
}
#report .movie iframe{
	position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
#report .bg_rep01{
	background:url(../images/bg_report01.png) center top no-repeat;
	background-size: cover;
}
#report  h2{
    width: 100%;
    height: 105px;
    position: relative;
}
#report .bg_rep01 h2{
    background: #fe1706;
}
#report .bg_rep01 h2 img{
    width: 100;
    display: block;
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#report .bg_rep02{
	background:url(../images/bg_report02.png) center top no-repeat;
	background-size: cover;
}
#report .bg_rep02 h2{
    background: #f39800;
}
#report .bg_rep02 h2 img{
    width: 100;
    display: block;
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#report .sns{
	position: relative;
}

#report .sns ul{
    position: absolute;
    bottom: 360px;
    right: 130px;
    width: 380px;
    display: flex;
    justify-content: space-between;

}
#report .sns a{
	display: block;
}
#report .sns a:hover{
	opacity: 0.6;
}

#report .bg_rep03{
	background:url(../images/bg_report03.png) center top no-repeat;
	background-size: cover;
}
#report .bg_rep03 h2{
    background: #abcd03;
}
#report .bg_rep03 h2 img{
    width: 100;
    display: block;
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
@media screen and (max-width: 768px) {
	#report .bg_st{
		padding-top: 5%;
	}
	.up{
		margin-top: -20%;
	}
	.small{
		width: 65%;
	}
	#report .sns ul{
		position: absolute;
		bottom: 45%;
		right: 9%;
		width: 45%;
	}
	#report .sns ul li{
		width: 45px;
	}
	#report .talkBox{
		width: 90%;
    	padding: 4% 0;
	}
	#report h2{
		height: 60px;
	}
	#report h2 img{
		width: 91%;
	}
	#report .bg_rep01 h2 img{
		top: -20%;
	}
	#report .bg_rep02 h2 img{
		top: -20%;
	}
	#report .bg_rep03 h2 img{
		top: -20%;
	}

}
/*-----------------------
	体験レポートまとめ
-----------------------*/
#report .bg_close{
    position: relative;
    background: url(../images/bg_side.png) center top no-repeat;
    background-size: cover;
    margin-top: -1px;
}
#report .bg_close h2{
	background: #00bcf4;
    margin-bottom: 60px;
    height: 120px;
   	padding: 25px 0;
}
#report .bg_close h2 img{
	display: block;
    margin: 0 auto;
}
#report .bg_close ul{
    max-width: 800px;
    margin: 0 auto;
    font-size: 2.6rem;
    line-height: 2;
    padding-left: 130px;
    padding-bottom: 60px;
    font-weight: bold;
}
#report .bg_close ul li{
	margin-bottom: 30px;
}
#report .close{
    background: #00b9ef;
    width: 100%;
    height: 420px;
    position: relative;
}
#report .close img{
	display: block;
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
@media screen and (max-width: 768px) {
	#report .bg_close h2{
	height: 65px;
    padding: 3% 0;
    margin-bottom: 5%;
	}
	#report .bg_close h2 img{
	width: 65%;
	}
	#report .bg_close ul{
		width: 86%;
    	margin: 0 auto;
    	padding: 0;
	}
	#report .bg_close ul li{
		margin-bottom: 3%;
	}
	#report .bg_close{
		margin-bottom: 10%;
	}
	#report .close{
		height: 200px;
	}
	#report .close img{
    width: 90%;
    top: -35%;
	}
}
/*-----------------------
	店舗一覧
-----------------------*/
#shopList{
	background:url(../images/bg_side.png) center top no-repeat;
	background-size: cover;
	background-color: #EFEEE8;
}
#shopList section{
	width: 860px;
    margin: 0 auto;
}
#shopList section article{
}
#shopList h2{
    padding-top: 80px;
    text-align: center;
    margin-bottom: 30px;
}
#shopList h3{
    background: #261816;
    color: #ffffff;
    font-size: 2.4rem;
    padding: 8px 0 8px 20px;
    font-weight: bold;
    margin-bottom: 30px;
}
#shopList h3 span{
    color: #00b9ef;
}
#shopList h2.cam{
	background: none;
    text-align: center;
    padding: 0;
}
#shopList ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#shopList ul li{
    margin-bottom: 40px;
}
#shopList ul li div{
	width: 400px;
    height: 300px;
}

#shopList ul li a{
	display: block;
	background: #00b9ef;
    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    text-decoration: none;
    padding: 10px 0;
    border-radius: 30px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 15px;
    font-weight: bold;
}
#shopList ul li a:hover{
    box-sizing: border-box;
    background: #c2f1ff;
    color: #00bcf5;
    transition: 0.2s;
}
#shopList ul li a.trial{
    background: #fff100;
    margin-bottom: 0;
    color: #231815;
}
#shopList ul li a.trial:hover{
    background: #fffbb3;
    color: #e0a900;
    transition: 0.2s;
}
#shopList .btn{
    padding-top: 120px;
}
#shopList ul.cam li a{
	padding: 0;
    margin: 0;
    background: none;
}
#shopList ul.cam li a:hover{
	opacity: 0.6;
	transition: 0.2s;
}
/*-----------------------
	店舗一覧  背景画像指定
-----------------------*/
#shopList .chu01{
    background: url(../images/store/st_chugoku01.png) center top no-repeat;
    background-size: contain;

}
#shopList .chu02{
	background: url(../images/store/st_chugoku02.png) center top no-repeat;
    background-size: contain;
}
#shopList .chu03{
	background: url(../images/store/st_chugoku03.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki01{
	background: url(../images/store/st_kinki01.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki02{
	background: url(../images/store/st_kinki02.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki03{
	background: url(../images/store/st_kinki03.png) center top no-repeat;
    background-size: contain;
}

#shopList .kinki04{
	background: url(../images/store/st_kinki04.png) center top no-repeat;
    background-size: contain;
}

#shopList .kinki05{
	background: url(../images/store/st_kinki05.png) center top no-repeat;
    background-size: contain;
}

#shopList .kinki06{
	background: url(../images/store/st_kinki06.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki07{
	background: url(../images/store/st_kinki07.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki08{
	background: url(../images/store/st_kinki08.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki09{
	background: url(../images/store/st_kinki09.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki10{
	background: url(../images/store/st_kinki10.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki11{
	background: url(../images/store/st_kinki11.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki12{
	background: url(../images/store/st_kinki12.png) center top no-repeat;
    background-size: contain;
}
#shopList .kinki_meimai{
	background: url(../images/store/st_kinki_meimai.png) center top no-repeat;
    background-size: contain;
}
#shopList .chubu01{
	background: url(../images/store/st_chubu01.png) center top no-repeat;
    background-size: contain;
}
#shopList .chubu02{
	background: url(../images/store/st_chubu02.png) center top no-repeat;
    background-size: contain;
}

#shopList .kanto01{
	background: url(../images/store/st_kanto01.png) center top no-repeat;
    background-size: contain;
}
#shopList .kanto02{
	background: url(../images/store/st_kanto02.png) center top no-repeat;
    background-size: contain;
}
@media screen and (max-width: 768px) {
	#shopList section{
	width: 100%;
	}
	#shopList h2{
	padding: 5% 0;
    margin: 0;
	}
	#shopList h2 img{
	width: 93%;
    margin: 0 auto;	
	}
	#shopList ul li {
	    margin-bottom: 5%;
	    width: 100%;
	}
	#shopList ul li div{
	    width: 90%;
	    margin: 0 auto;
	    height: 280px;
	}
	#shopList .btn{
    	position: relative;
        padding-top: 31%;
	}
	#shopList ul li a{
	    width: 100%;
	    font-size: 1.6rem;
	    margin-bottom: 3%;
	    padding: 3% 0;
	}
	#shopList ul.cam{
		margin-top: 5%;
	}
	#shopList ul.cam li{
	    width: 90%;
	    margin: 0 auto;
	    margin-bottom: 4%;
	}

}

/*-----------------------
	下部リンク
-----------------------*/
#linkArea{
	padding-bottom: 60px;
}
#linkArea section{
    width: 860px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
}
#linkArea .linkBtn1{
	font-size: 3rem;
    text-align: center;
    font-weight: bold;
    color: #1eb9ee;
}
#linkArea .linkBtn1 p{
    margin-bottom: 10px;
}
#linkArea .linkBtn1 a{
    display: block;
    color: #1eb9ee;
    text-decoration: none;
    border: #1eb9ee 3px solid;
    border-radius: 50px;
    padding: 7px 40px;
}
#linkArea .linkBtn1 a:hover{
    background: #00bcf4;
    color: #fff;
    transition: 0.2s;
}
#linkArea .linkBtn2{
	font-size: 3rem;
    text-align: center;
    font-weight: bold;
    color: #28b7bb;
}
#linkArea .linkBtn2 p{
    margin: 10px 0;
}
#linkArea .linkBtn2 a{
    display: block;
    color: #28b7bb;
    text-decoration: none;
    border: #28b7bb 3px solid;
    border-radius: 50px;
    padding: 7px 40px;
}
#linkArea .linkBtn2 a:hover{
	background: #00bbbe;
    color: #fff;
    transition: 0.2s;
}

@media screen and (max-width: 768px) {
	#linkArea section{
    width: 100%;
    display: block;
    padding-top: 7%;
	}
	#linkArea section img{
	width: 80%;
    margin: 0 auto;
	}
	#linkArea .linkBtn1 {
	    font-size: 1.8rem;
	    width: 86%;
    	margin: 0 auto;
	}
	#linkArea .linkBtn1 p{
		margin-top: 5%;
	    margin-bottom: 2%;
	}
	#linkArea .linkBtn2 {
	    font-size: 1.8rem;
	    width: 86%;
    	margin: 0 auto;
	}
	#linkArea .linkBtn2 p{
		margin-top: 5%;
	    margin-bottom: 2%;
	}
}