@charset "utf-8";
/*[bra set page]*/

.mainbox_wrap{
width: 100%;
/* background: url(../images/9363994_4148005.jpg) repeat center ;
	background-size:100% auto; */
	background-color: #d2b6dd;
}

.mainbox{
transform-origin: top center;
width: 100%;
max-width: 600px;
margin: 0 auto;
font-size: 12px;
font-family:'Noto Sans Japanese', '�q���M�m�p�S Pro W3', 'Hiragino Kaku Gothic Pro', 'Montserrat', '���C���I', Meiryo,	'�l�r �o�S�V�b�N', sans-serif;
background: #f57601;
font-weight: 400;
overflow-x: hidden;
}

.mini{
	font-size: 80%;
}

.link-btn{
	display: block;
	margin: 2em 0 0.5em;
	text-align: center;
}

.link-btn img,
.slick-slide .link-btn img{
	display: inline;
}

.mainbox img{
	max-width: 100%;
}

.btn_check{
	display: inline-block;
	margin: 4em 0;
}

.btn_check:hover{
	opacity: 0.8;
	background: #000;
}

.btn_check:hover img{
	-webkit-filter: invert(100%);
	-moz-filter: invert(100%);
	-o-filter: invert(100%);
	-ms-filter: invert(100%);
	filter: invert(100%);
	transition-duration:0.5s;
}

.box_top{
	position: relative;
	width: 100%;
	background: #fff;
}

	.box_top .main_title{
		background: #fff;
		margin-top: 0;
		margin-bottom: 0;
	}

.startbox{
	margin-top: -1px;
}

.read-box{
	color: #fff;
	text-align:center;
	line-height: 2em;
	padding: 1.5rem 0;
}

.box-menu-wrap{
	padding-bottom: 10em;
	background: url(../images/Clip-path-group.jpg) no-repeat center bottom;
	background-size: 100% auto;
}

.box-menu{
	position: relative;
}

@keyframes rotate_anime {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.circle-tit{
	width: 15%;
	position: absolute;
	top: -2.2em;
	left: calc(50% - 7.5%);
}

.circle-tit img {
	animation: rotate_anime 4s linear infinite;
}


.box-brd{
	border:solid 3px #fff;
	border-radius: 60px;
	width: calc(100% - 6em);
	margin: 5em 3em 2em;
	padding: 4em 0 2em;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
}

.box-brd li{
	width: 43%;
	text-align: center;
	color: #fff;
	font-size: 90%;
	
}

.box-brd li a{
	display: block;
	color: #fff;
	text-decoration: none;
	min-height: 18em;
	background: url(../images/Vector.png) no-repeat center 94%;
	background-size: 15% auto;
	margin-bottom: 1em;
}

.box-brd li a:hover,
.box-brd li a.active{
	-moz-transition: .25s;
	-webkit-transition: .25s;
	transition: .25s;
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.box-brd li p{
	line-height: 140%;
	margin-bottom:1em;
}

.art-box{
	width: 100%;
}


/*COODINATE #1*/
.box01{
	background:#fef9e3 url(../images/Clip-path-group-02.jpg) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 100px;
	margin-top: -1px; 
}

.box01 .art-box{
	position: relative;
	min-height: 40em;
}

.box01 .art-box .art{
	position: absolute;
	display: block;
}

.box01 .art-box .art01{
	top: 6.25%;
	left: 42.67%;
	width: 46.6%;
}

.box01 .art-box .art02{
	width: 50.40%;
	top: 14.58%;
	left: 34.67%;
}

.box01 .art-box .art03{
	width: 26.67%;
	top: 5.00%;
	left: 13.60%;
}

.box01 .art-box .art04{
	width: 32.27%;
	top: 29.17%;
	left: 4.00%;
}

.box01 .art-box .art05{
	width: 24.53%;
	top: 27.50%;
	left: 73.60%;
}

.box01 .art-box .art06{
	width: 33.33%;
	top: 58.33%;
	left: 7.47%;
}

.box01 .art-box .art07{
	width: 72.27%;
	top: 12.50%;
	left: 13.33%;
}

.box01 .art-box h3{
	margin: 0;
}

	.box01 .read-box{
		text-align: left;
		padding: 2em 2em 3em;
		color: #33251E;
		font-size: 84%;
		font-weight: 400;
	}

.itembox {
	background: #fff;
}

.itembox ul .slick-track{
	margin-left: 10%;
}

.itembox ul li{
	display: block;
	width: 100px;
	margin: 10px;
	padding: 3em 0 1em;
}

.itembox ul li.oshare{
	background:#fff url(../images/os-logo.png) no-repeat center 0.1em;
	background-size: 90% auto;
}

.itembox ul li.shirohato{
	background:#fff url(../images/hato-logo.jpg) no-repeat center 0.1em;
	background-size: 90% auto;
}

.fukiashibox{
	width: calc(100%);
	margin: 2em 0;
	position: relative;
	padding-top: 2em;
}
.fukiashibox:after{
	z-index: 0;
	content: "";
	position: absolute;
	right: 0;
	top: 5px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #ffffff transparent transparent transparent;
	border-width: 40px 30px 0 30px;
	transform: rotate(180deg);
}

.fukiashibox ul{
	z-index: 1;
	padding: 0;
	margin: 0;
}

.fukiashibox ul li{
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;;
	background: #fff;
	padding: 4em 0 2em;
}

.fukiashibox ul li.oshare{
	background:#fff url(../images/os-logo.png) no-repeat center 1em;
	background-size: 37% auto;
}

.fukiashibox ul li.shirohato{
	background:#fff url(../images/hato-logo.jpg) no-repeat center 1em;
	background-size: 37% auto;
}

.slick-initialized .slick-slide{
	display: flex !important;
	-webkit-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
}

.fukiashibox ul li .pict,
.fukiashibox ul li .setumei{
	width: calc(45% - 1em);
	margin: 1% 0.5em;
	font-size: 90%;
	font-weight: 300;
}

	.fukiashibox ul li .setumei{
		position: relative;
	}
		.fukiashibox ul li .setumei .specs{
			position:absolute;
			bottom: 0;
			left: 0;
		}

			.fukiashibox ul li .setumei .price{
				font-size: 140%;
				font-weight: bold;
			}

/*COODINATE #2*/
.box02{
	background:#91AEAE url(../images/Clip-path-group-03.jpg) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 100px;
	margin-top: -1px; 
}

.box02 .art-box{
	position: relative;
	min-height: 40em;
}

.box02 .art-box .art{
	position: absolute;
	display: block;
}


.box02 .art-box .art01{
	width: 59.73%;
	top: 6.25%;
	left: 7.47%;
}

.box02 .art-box .art02{
	width: 48.80%;
	top: 17.08%;
	left: 17.33%;
}

.box02 .art-box .art03{
	width: 26.93%;
	top: 5.00%;
	left: 68.00%;
}

.box02 .art-box .art04{
	width: 24.00%;
	top: 61.04%;
	left: 4.00%;
}

.box02 .art-box .art05{
	width: 32.27%;
	top: 30.63%;
	left: 62.40%;
}

.box02 .art-box .art06{
	width: 33.07%;
	top: 60.21%;
	left: 60.27%;
}

.box02 .art-box .art07{
	width: 72.27%;
	top: 12.50%;
	left: 13.33%;
}

.box02 .art-box h3{
	margin: 0;
}

	.box02 .read-box{
		text-align: left;
		padding: 2em 2em 3em;
		color: #33251E;
		font-size: 84%;
		font-weight: 400;
	}

/*COODINATE #3*/
.box03{
	background:#323159 url(../images/Clip-path-group-04.jpg) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 100px;
	margin-top: -1px; 
}

.box03 .art-box{
	position: relative;
	min-height: 40em;
}

.box03 .art-box .art{
	position: absolute;
	display: block;
}

.box03 .art-box .art01{
	width: 61.60%;
	top: 5.42%;
	left: 29.87%;
}

.box03 .art-box .art02{
	width: 51.20%;
	top: 14.58%;
	left: 27.73%;
}

.box03 .art-box .art03{
	width: 32.27%;
	top: 35.83%;
	left: 2.67%;
}

.box03 .art-box .art04{
	width: 26.93%;
	top: 11.67%;
	left: 6.13%;
}

.box03 .art-box .art05{
	width: 24.27%;
	top: 56.46%;
	left: 71.47%;
}

.box03 .art-box .art06{
	width: 29.60%;
	top: 62.92%;
	left: 7.47%;
}

.box03 .art-box .art07{
	width: 72.27%;
	top: 12.50%;
	left: 13.33%;
}

.box03 .art-box h3{
	margin: 0;
}

	.box03 .read-box{
		text-align: left;
		padding: 2em 2em 3em;
		color: #fff;
		font-size: 84%;
		font-weight: 400;
	}

/*COODINATE #4*/
.box04{
	background:#F5BBAE url(../images/Clip-path-group-05.jpg) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 100px;
	margin-top: -1px; 
}

.box04 .art-box{
	position: relative;
	min-height: 40em;
}

.box04 .art-box .art{
	position: absolute;
	display: block;
}

.box04 .art-box .art01{
	width: 25.33%;
	top: 6.25%;
	left: 17.87%;
}

.box04 .art-box .art02{
	width: 51.73%;
	top: 14.58%;
	left: 17.07%;
}

.box04 .art-box .art03{
	width: 32.00%;
	top: 33.75%;
	left: 63.47%;
}

.box04 .art-box .art04{
	width: 24.27%; 
	top: 44.38%;
	left: 4.00%;
}

.box04 .art-box .art05{
	width: 26.93%;
	top: 10.42%;
	left: 60.00%;
}

.box04 .art-box .art06{
	width: 33.07%;
	top: 61.67%;
	left: 60.00%;
}

.box04 .art-box .art07{
	width: 72.27%;
	top: 12.50%;
	left: 13.33%;
}

.box04 .art-box h3{
	margin: 0;
}

	.box04 .read-box{
		text-align: left;
		padding: 2em 2em 3em;
		color: #33251E;
		font-size: 84%;
		font-weight: 400;
	}

/**/
.boxlast{
	background: #fff;
	text-align: center;
	margin-top: -1px;
	padding-top: 1em;
}

.thx{
	padding: 6em 0;
}
.limg img{
	width: 90%;
}
.llgo{
	padding: 1.2em 0 1em;
}
.llgo img{
	width: 40%;
}
.ltxt{
	font-size: 90%;
	font-weight: 400;
}
.btbox{
	padding: 3em 0;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.btbox a{
	width: calc(50% - 2em);
	margin: 0 1em;
}

	.btbox a:hover,
	.btbox a:active{
		opacity: 0.9;
	}
	
	

/*coupon*/
.couponbox{
	width: calc(100% - 2em);
	padding: 2em 1em 2em;
	margin: 0.5em 1em;
	border: solid 1px #ccc;
	position: relative;
}

	.couponbox .ctit{
		position: absolute;
		top: -1.5em;
		left: 0em;
		width: 100%;
		color: #9a001b;
	}

	.couponbox .ctit span{
		display: inline-block;
		background: #fff;
	}

	.couponbox .cname{
		font-weight: 400;
		font-size: 110%;
		
	}
	
	.couponbox .cname span{
		font-weight: 600;
		font-size: 330%;
		line-height: 1.4em;
		color: #fbae18;
		
	}

	.couponbox .ccoupon{
		font-size: 110%;
	}
	.couponbox .ccoupon span{
		letter-spacing: 0.3em;
		font-size: 140%;
		font-weight: 500;
		
	}
	

	.couponbox .attention{
		color: #ff829d;
		font-size: 90%;
	}

	.couponbox .ed{
		line-height: 160%;
		font-size: 90%;
	}

	.couponbox .ccover,
	.couponbox .ocover{
		position: absolute;
		width: 100%;
		height: 100%;
		background: #9ce1fc;
		color: #000000;
		opacity: 0.8;
		top: 0px;
		left: 0px;
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: center;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size: 160%;
		z-index: 999;
	}

	.couponbox .ocover{
		opacity: 1;
	}
	
	.couponbox .ocover span,
	.couponbox .ccover span{
		color: #000000;
		font-weight: bold;
	}

	.ccoupon a{
		display: inline-block;
		background: #9857b4;
		color: #fff;
		font-size: 90%;
		margin-top: 1em; 
		padding: 0.2em 1.5em;
		border: solid 1px #ca6af3;
		text-decoration: none;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 1px;
	}
	.ccoupon a:hover,
	.ccoupon a:active{
		background: #df9df3;
	}


	.goshopping{
		font-size: 120%;
		padding: 1em;
		border-radius: 2em;
		display: block;
		width: calc(100% - 8em);
		margin: 2em auto;
		text-decoration: none;
		background: #f57601;
		color: #fff;
	}

	.goshopping:hover,
	.goshopping:active{
		background: #ffc525;
	}

	.goshopping.v2{
		width: 50%;
		margin: 3em 25% 3em;
		text-align:center;
		font-size: 80%;
		line-height: 100%;
		padding-top: 0.5em;
	}

	.goshopping.v2 .mini{
		font-size: 60%;
		line-height: 80%;
		display: inline-block;
	}


	.recommendbox{
	font-weight: 700;
	font-size: clamp(18px, 3vw, 25px);
	}
	
	
	.recimagebox{
		display: -webkit-box;
		display: flex;
		align-items: stretch;
		-webkit-box-pack: center;
		justify-content: center;
		flex-wrap: wrap;
		margin: 1em 0;
		padding: 0;
	}

.recimagebox li {
    width: calc(48% - 5px);
    margin: 2px;
    position: relative;
    background: #fff;

    display: flex;
    flex-direction: column;
}
		
.coupon_kotira {
    padding: 3em 0 0;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: #ff829d;
	}

	/*box_top01*/
		.braset_imgs li{
			float: left;
			margin: 10px;
			overflow: hidden;
		}

	/*box_more*/
	.box_more{
		position: relative;
		padding-top: 30%;
	}

		.box_more .more_link{
			position: absolute;
			right: 0;
			top: 25%;
			z-index: 10;
		}

		.box_more .more_link:hover{
			opacity: 0.8;
			background: #fff;
		}

	/*box_follow_me*/
	.box_forrow_me{
		padding: 30% 0;
		overflow: hidden;
	}
		.sns_imgs{
			 padding: 0 !important;
		}

		.sns_imgs.rakuten{
			width: 60%;
		}

		.sns_imgs li{
			float: left;
			width: 25%;
			text-align: center;
		}

		.sns_imgs.rakuten li{
			float: left;
			width: 33.33333%;
			text-align: center;
		}

		.sns_imgs li a:hover{
			opacity: 0.8;
		}

	.box_title{
		margin: 2em 0;
	}

.attentionbox{
	width: calc(100% - 1em);
	margin: 0.5em;
	padding: 1em;
	border: solid 1px #000;
	font-size: 80%;
	text-align: left;
}

footer{
	background: #000;
	color: #fff;
	font-size: 85%;
	padding: 1em 0;
	text-align: center;
}
.recimagebox li {
	text-align: center;
}

.recimagebox li img {
	display: block;
	width: 100%;
	height: auto;
}

.rec_text {
    margin: 12px 5px 14px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    text-align: center;
}

.rec_btn {
    display: block;
    width: 90%;
    margin: auto auto 25px; 
    padding: 12px 5px;
    background: #e98232;
    color: #fff !important;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity .3s;
}

.rec_btn:hover {
	opacity: .8;
}