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

.mainbox_wrap{
	width: 100%;
	background: #FEE3D8;
}

.mainbox{
	transform-origin: top center;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	font-size: 12px;
	font-family:'Noto Sans Japanese', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Montserrat', 'メイリオ', Meiryo,	'ＭＳ Ｐゴシック', sans-serif;
	background: #FF829C;
	font-weight: 200;
	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:#DEC8A7 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: #E60016;
		}

		.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: #ff829c
			
		}

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

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

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

		.couponbox .ccover,
		.couponbox .ocover{
			position: absolute;
			width: 100%;
			height: 100%;
			background: #000;
			color: #fff;
			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: #fff;
		}

		.ccoupon a{
			display: inline-block;
			background: #FF829C;
			color: #fff;
			font-size: 90%;
			margin-top: 1em; 
			padding: 0.2em 1.5em;
			border: solid 1px #FF829C;
			text-decoration: none;
			box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 1px;
		}
		
		.goshopping{
			font-size: 120%;
			padding: 1em;
			border-radius: 2em;
			display: block;
			width: calc(100% - 8em);
			margin: 2em auto;
			text-decoration: none;
			background: #FF829C;
			color: #fff;
		}

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

		.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: 300;
		}
		
		
		.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;
			border: solid 1px #ccc;
			position: relative;
			background: #fff;
		}
		
.coupon_kotira {
    padding: 3em 0 0;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: #C84E4E;
	}

	/*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;
}