@charset "utf-8";
/* CSS Document */
body{
	margin: 0;
}

.pc-box{
	display: none;
}

.wrapper{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	overflow: hidden;
}

.wrapper img{
	display: block;
	line-height: 0;
}

.main-bnr{
	margin: 0 auto;
}

.bnr{
	margin: 0 auto 5%;
}

.title{
	width: 90%;
	margin: 5% auto 1%;
}

.what{
	margin: 0 auto;
	background: linear-gradient(180deg, rgba(255,249,245,1) 0%, rgba(240,220,211,1)100%);
	box-sizing: border-box;
	padding: 3%;
}

.what h1, .review h1, .item h1{
	text-align: center;
	color: #4c4c51;
	font-size: 40px;
	line-height: 0.8;
	font-family: brandon-grotesque, sans-serif;
	margin: 3% auto;
}

.what h1 span, .review h1 span{
	font-size: 15px;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

.what-box{
	width: 95%;
	margin: 0 auto 15%;
}

.what-box h2{
	font-size: 20px;
	line-height: 1.6;
	margin: 5% 0;
}

.what-box h2 span{
	background: linear-gradient(transparent 0%, #feffb1 0%);
}

.what-box p{
	font-size: 13px;
	line-height: 1.8;
}

.what-box p span{
	font-size: 10px;
}

.review{
	margin: 8% auto;
}

.swiper-container {
	padding-bottom: 3%;
}

.swiper-button-next:after, .swiper-button-prev:after {
  color: #282828;
	font-size:  25px!important;
	font-weight: bold;
}

.item{
	background: linear-gradient(180deg, rgba(247,242,240,1) 0%, rgba(240,240,240,1)100%);
	box-sizing: border-box;
	padding: 2% 0;
}

.item-box{
	width: 90%;
	margin: 0 auto 15%;
}

.item-box img{
	width: 90%;
	margin: 0 auto;
}

.item-box h2{
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
	margin: 5% auto;
}

.item-box h2 span{
	font-size: 25px;
	background: linear-gradient(transparent 0%, #dfd3d1 0%);
	padding: 0 3%;
}

.item-box h2 .remon{
	font-size: 25px;
	background: linear-gradient(transparent 0%, #d4d4d4 0%);
	padding: 0 3%;
}

.item-box p{
	font-size: 13px;
	text-align: center;
	margin: 3% auto;
}

.item-box p span{
	font-size: 11px;
}

.item-box a{
	display: block;
	width: 50%;
	margin: 5% auto;
	text-align: center;
	text-decoration: none;
	border: solid 2px #4c4c51;
	color: #4c4c51;
	font-size: 18px;
	font-weight: 600;
	font-family: brandon-grotesque, sans-serif;
	padding: 2% 0;
}

.other{
	text-align: center;
	font-size: 13px;
	/*background-color: #EEECE1;*/
	padding: 2% 0;
	margin: 5% auto 0;
	line-height: 1.8;
}

.other span{
	font-size: 20px;
	background: linear-gradient(transparent 0%, #feffb1 0%);
	padding: 0 1%;
}

.movie{
	width: 90%;
	margin: 2% auto;
}

video{
	width: 100%;
}

.kyuchaku{
	width: 90%;
	margin: 13% auto;
}

.kyuchaku-lead{
	font-size: 13px;
	line-height: 1.8;
	margin: 2% auto;
}

.kyuchaku h2{
	font-size: 17px;
	text-align: center;
	letter-spacing: 1px;
	font-weight: normal;
	margin: 2% auto;
}

.kyuchaku h2 span{
	font-size: 20px;
	color: hotpink;
}

.kyuchaku h3{
	font-size: 15px;
	text-align: center;
	letter-spacing: 1px;
	font-weight: normal;
	margin: 2% auto;
}

.kyuchaku h3 span{
	font-size: 24px;
}

.kyuchaku p span{
	text-decoration: underline;
	font-size: 14px;
}

.kyuchaku img{
	box-sizing: border-box;
	border: solid 1px #ccc;
	padding: 2%;
}

.no-box{
	width: 90%;
	margin: 2% auto 8%;
	position: relative;
}

.no{
	position: absolute;
	bottom: 3%;
	right: 3%;
	width: 30%;
}



@media(min-width:750px){
	
	.sticky-contner{
		display: flex;
		background-color: #EAD8D8;
	}
	
	.pc-box{
		width: 33%;
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pc-box__img{
		display: block;
		width: 45vh;
	}
	
	.pc-box__logo a{
		display: flex;
        align-items: center;
        text-decoration: none;
        color: #333;font-family: "Times New Roman", Times, "serif";
        font-size: 30px;
	}
	
	.pc-box__logo a:before{
		content: "";
        display: block;
        width: 40px;
        height: 40px;
        margin-right: 13px;
        background-image: url(https://www.dot-st.com/static/docs/c/css/include/images/icon_sns_insta_color.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
	}
	
	.wrapper{
		width: 35%;
		background-color: #fff;
		padding: 0 0 2%;
	}
	
}