/*
channel code : qhtGN7wHcQse
for store
*/
@charset "UTF-8";

figure {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
figure {
	display:block;
}



.cf:before,
.cf:after {
    content: "";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,th,td,p{
    margin:0;padding:0;
	font-size: 100%;
}
li{list-style: none;}

html {
  font-size: 62.5%;
}
body{
	background: #F2F2F2;
	font-size: 1.6rem;
	line-height:1.6;
}

sup{
	font-size: 70%;
}


#wrap{
	width: 1200px;
	margin: 0 auto;
	color:#333;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	background: #FFF;
}


/* header------------------------------ */
#header_area{
	width: 1200px;
	margin: 0 auto;
	padding: 10px 0 5px;
	background: #181818;
}


#header_area .header-logo-cnt{
	width: 976px;
	margin: 0 auto 5px;
	position: relative;
	}
	.logo-store{
		position: relative;
		width: 240px
	}
	.logo-letsnote{
		position: absolute;
		right: 0;
		top: 8px;
		width: 187px
	}


#header_area .breadcrumb ul {
	box-sizing: border-box;
	width: 976px;
	margin: 0 auto;
	padding: 0 3px 0 9px;
	list-style: none;
	letter-spacing: -.4em;
	font-size: 1.2rem;
	color: #999;
	white-space: nowrap
}
#header_area .breadcrumb ul li {
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	margin-right: .5em
}
#header_area .breadcrumb ul li:before {
	content: ">";
	padding-right: .5em
}
#header_area .breadcrumb ul li:first-child:before {
	content: "";
	padding-right: 0
}
#header_area .breadcrumb ul li a {
	color: #999;
	text-decoration: none
}
#header_area .breadcrumb ul li a:hover {
	text-decoration: underline
}

#header_area .breadcrumb ul li h1 { font-size:100%; font-weight:normal; display:inline;}






/* ------------------------------------ */

#contents_area img{
	width: 100%;
}

#contents_area {
	margin: 0 auto;
	padding: 0 0 5em;
	background: url(../img/bg_01.png) repeat;
}


#contents_area {
	margin: 0 auto;
	padding: 0 0 5em;
	
}


	#title_area{
		position: relative;

		}
		#title_area #title_txt{
			width: 500px;
			position: absolute;
			top: 20px; left: 350px;
		}

	.main_lead{
		background: #E5E5E5;
		width: 800px;
		margin: 3em auto 8em;
		padding: 2.5em 0;
		border-radius: 12px;
		position: relative;
		}
		.main_lead::after{
			content: "";
			width: 46px; height: 46px;
			background: url(../img/arrow_01.png) no-repeat;
			background-size: 100% 100%;
			position: absolute; bottom:-45px; right:120px;
			z-index: 3;
			}
		.main_lead p{
			font-size: 1.8rem;
			font-weight: bold;
			width: 90%;
			margin: 0 0 0 10%;
			text-align: left;
			}
		.main_lead .concierge{
			width: 210px!important;
			position: absolute; bottom:-90px; right:-110px;
			}

/* ------------------------------------ */

	ul.anchor_area{
		width: 976px;
		margin: 0 auto 8em;
		letter-spacing: -0.4em;
		}
		ul.anchor_area li{
			width: 230px;
			display: inline-block;
			letter-spacing: normal;
			position: relative; top:0px;
			/* transition */ -webkit-transition: all 0.2s; transition: all 0.2s;	
			}
			ul.anchor_area li:hover { top:4px; }
			ul.anchor_area li:active { top:8px; }




/* ------------------------------------ */


	#case1 .case_header{ background: #D9E4EA; }
	#case2 .case_header{ background: #DBE9E5; }
	#case3 .case_header{ background: #F3E0E6; }
	#case4 .case_header{ background: #E3E1DE; }
	.case_header{
		margin: 0 0 200px;
		padding: 0 0 0;
		position: relative;
		}
		.case_header .icon{
			width: 200px;
			margin: 0 auto 1em;
			position: relative;
			}
			.case_header .icon img{ margin-top: -30px; }

		.case_header .arch{
			width: 340px;
			margin-left: -170px;
			position: absolute; bottom:-90px; left:50%;
			}


		.case_header .header_txt{
				width: 540px;
				margin: 0 auto 0;
				position: relative;
			}
		.case_header .header_img{
				width: 420px;
				height: 300px;
				margin: 0 auto 0;
				position: relative;
			}


/* ------------------------------------ */


	.case_wrap{
		width: 900px;
		margin: 0 auto 0;
		padding: 0 0 0;
		position: relative;
		}

	.case_before{
		padding: 0 0 80px;
		background: url(../img/border_01.png) no-repeat center bottom;
		background-size: 100% auto;
			
		background-color: #66C6CB;
		position: relative;
		}
			.case_before::before{
				content: "";
				width: 340px; height: 70px;
				margin-left: -170px;
				background: url(../img/arch_before.png) no-repeat;
				background-size: 100% 100%;
				position: absolute; top:-70px; left:50%;
				}
		.case_before_head{
			width: 350px;
			margin: 0 auto 1.5em;
			position: relative;
			}
			.case_before_head img{
				margin-top:-20px;
				}
			.case_before_img{
				width: 250px;
				margin: 0 auto 0;
				}
	/* ----------------- */

	.case_arrow{
		width: 100px;
		margin: -60px auto 20px;
		position: relative;
		}

	/* ----------------- */

	.case_after{
		padding: 0 0 50px;
		background: #FF9E57;
		}
		.case_after_head{
			width: 350px;
			margin: 0 auto 1.5em;
			position: relative;
			}
			.case_after_img{
				width: 300px;
				margin: 0 auto 30px;
				position: relative;
				}

				.case_after_img .effect01{
					width: 170%!important;
					position: absolute; top:20%; left:-35%;
					}


	/* ----------------- */

		.case_lead{
			font-size: 3.2rem;
			font-weight: bold;
			color: #FFF;
			text-align: center;
			text-shadow:2px 3px 0px rgba(0,0,0,0.3);
			}
			.case_lead span{
				font-size: 2.2rem;
				}


	/* ----------------- */

		.case_column{
			margin: 80px 50px 0;
			padding: 0 50px 2.6em;
			background: #FFF;
			border-radius: 6px;
			box-shadow: 6px 6px 0px rgba(0,0,0,0.1);
			position: relative;
			}
			.case_column::before{
				content: "";
				width: 340px; height: 70px;
				margin-left: -170px;
				background: url(../img/arch_column.png) no-repeat;
				background-size: 100% 100%;
				position: absolute; top:-70px; left:50%;
				}

			.case_column .clm_head{
				width: 180px;
				margin: 0 auto 2em;
				position: relative;
				}
				.case_column .clm_head img{
					margin-top: -20px;
					}

			.case_column .clm_lead{
				font-size: 2.8rem;
				font-weight: bold;
				border-top:1px solid #000;
				border-bottom:1px solid #000;
				text-align: center;
				margin: 0 auto 1em;
				padding: 0.4em 0;
				}
			.case_column .clm_body{
				font-size: 1.8rem;
				font-weight: bold;
				margin: 0 auto 1em;
				}
			.case_column .clm_notes{
				font-size: 1.4rem;
				margin: 0 auto 1em;
				color: #666;
				}

				/* ----------------- */
				.case_column .clm_concierge_left{
					margin: 2em auto 0;
					padding: 0 0 20px;
					position: relative;
					}
					.clm_concierge_left::before{
						content: "";
						width: 210px; height: 168px;
						background: url(../img/concierge02_left.png) no-repeat;
						background-size: 100% 100%;
						position: absolute; bottom:0px; left:0;
						z-index: 2;
						}
					.case_column .clm_concierge_left .comment{
						font-weight: bold;
						margin: 0 0 0 26%;
						padding: 30px;
						border-radius: 8px;
						background: #FFE0D8;
						position: relative;
						min-height: 120px;
						z-index: 3;
						}
						.clm_concierge_left .comment::after{
							content: "";
							width: 34px; height: 34px;
							background: url(../img/arrow_02.png) no-repeat;
							background-size: 100% 100%;
							position: absolute; bottom:50px; left:-32px;
							z-index: 3;
							}
				/* ----------------- */

				.case_column .clm_concierge_right{
					margin: 2em auto 0;
					padding: 0 0 20px;
					position: relative;
					}
					.clm_concierge_right::before{
						content: "";
						width: 210px; height: 168px;
						background: url(../img/concierge02_right.png) no-repeat;
						background-size: 100% 100%;
						position: absolute; bottom:0px; right:0;
						z-index: 2;
						}
					.case_column .clm_concierge_right .comment{
						font-weight: bold;
						margin: 0 26% 0 0;
						padding: 30px;
						border-radius: 8px;
						background: #FFE0D8;
						position: relative;
						min-height: 120px;
						z-index: 3;
						}
						.clm_concierge_right .comment::after{
							content: "";
							width: 34px; height: 34px;
							transform: scale(-1,1);
							background: url(../img/arrow_02.png) no-repeat;
							background-size: 100% 100%;
							position: absolute; bottom:50px; right:-32px;
							z-index: 3;
							}
				/* ----------------- */












/*
  fade_in
-------------------------*/

.fade_in {
  opacity: 0;
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  transform: translate(0, 20px);
  -webkit-transition: all 0.65s;
  -o-transition: all 0.65s;
	transition: all 0.65s;
}

.fade_list li {
  opacity: 0;
  -webkit-transform: translate(0, 30px);
  -ms-transform: translate(0, 30px);
  transform: translate(0, 30px);
  -webkit-transition: all 0.65s;
  -o-transition: all 0.65s;
	transition: all 0.65s;
}
.fade_list li.active {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
	transform: translate(0, 0);
}

.scroll_in {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
	transform: translate(0, 0);
}
.stopTransition {
  -webkit-transition: none !important;
	transition: none !important;
}

/*---------------------------------*/


.hov01,.hov02{
	position: relative; top:0px;
	text-decoration:none;
	/* transition */ -webkit-transition: all 0.2s; transition: all 0.2s;		
}
.hov01:hover {
	opacity: 0.7;
}
.hov02:hover { top:-4px; }
.hov02:active { top:2px; }



/* ページトップへ戻る-------------------------- */

.go_top {
	width: 967px;
	margin: 0 auto;
	margin-bottom: 0px;
}
#gotoPageTop {
	background-image: url(../img/gototop.gif);
	background-repeat: no-repeat;
	background-position: left 0.3em;
	padding-left: 15px;
	float: right;
	margin: 0;
	min-height: 12px;
	_height: 12px;
	display: block;
	font-size: 85% !important;
	text-decoration: none;
	line-height: 140%;
	color: #548A99
}

















section {
	padding-top: 30px;
}

section + section {
	margin-top: 8em;
}
.case_column .clm_body{
	font-weight: normal;
	}

.case_wrap + .case_wrap{
	margin-top: 7.7em;
	}

.case_column .flt_box .flt_l{
	float: left;
	width: 390px;
	}
	.case_column .flt_box .clm_body{
		font-size: 1.8rem;
		font-weight: normal;
		}
	.case_column .flt_box .flt_l + *{
		width: 300px;
		height: auto;
		margin-left: 400px;
		}

.case_column .comment{
	font-size: 2rem;
	font-weight: bold;
	}
.case_column .clm_btn{
	margin: 2em auto 0;
	width: 393px;
	}
	.case_column .clm_btn a{
		transition: 0.2s all;
		display: block;
		}
		.case_column .clm_btn a:hover{
			transform: translateY(-3px);
			}

.case_column .clm_concierge_left + .clm_lead,
.case_column .clm_concierge_right + .clm_lead{
	margin-top: 4.12em;
}

.case_column .clm_concierge_left{
	margin: 2em auto 0;
	padding: 0 0 20px;
	position: relative;
}

.case_column .clm_title{
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-align: center;
	color: #fff;
	background: #000;
	padding: 3px 10px;
	margin: 2em auto 1.8em;
}
.case_column .clm_border{
	padding: 30px 45px 50px;
	border: 1px solid #000;
	margin-top: 2em;
	}
	.case_column .clm_border h6{
		font-size: 2rem;
		text-align: center;
		letter-spacing: 0.08em;
		font-weight: bold;
		margin-bottom: 17px;
		}
	.case_column .clm_border ul{
        width: 300px;
        margin: 0 auto;
		/*display: flex;
        
		justify-content: space-between;*/
		}
	.case_column .clm_border ul li{
		width: 300px;
		text-align: center;
		}
	.case_column .clm_border ul li figure a{
		display: block;
		transition: 0.2s all;
		}
		.case_column .clm_border ul li figure a:hover{
			opacity: 0.7;
			}
	.case_column .clm_border ul li figcaption{
		margin-top: 8px;
		font-weight: 1.8rem;
		letter-spacing: 0.08em;
		}

.case_column .clm_note_list{
	margin-top: 2em;
	line-height: 1.5;
	}
	.case_column .clm_note_list li{
		font-size: 1.4rem;
		color: #666;
		}
		.case_column .clm_note_list li + li{
			margin-top: 7px;
			}
		
.case_column .clm_notes02{
	font-size: 1.6rem;
	margin-top: 2em;
	text-align: center;
	}	
		
.case_column .clm_bg{
	padding: 30px 38px;
	}
	.case_column .clm_bg:nth-child(odd){
		background: #FFE8C4;
		}
	.case_column .clm_bg:nth-child(even){
		background: #D3ECE9;
		}
	.case_column .clm_bg + .clm_bg{
		margin-top: 1.75em;
		}
		.case_column .clm_bg h6{
			font-size: 2.3rem;
			letter-spacing: 0.08em;
			margin-bottom: 20px;
			text-align: center;
			}
		.case_column .clm_bg .clm_illust{
			width: 300px;
			margin: 0 auto 20px;
			}
		.case_column .clm_bg .flt_box{
			margin-bottom: 1.6em;
			}
		.case_column .clm_bg .flt_box .clm_body{
			margin-bottom: 0;
			}	
		.case_column .clm_bg .flt_box .flt_l{
			width: 320px;
			}
		.case_column .clm_bg .flt_box .flt_l + p{
			width: 280px;
			margin-left: 344px;
			}
		.case_column .clm_bg .clm_btn{
			margin-top: 0;
			}

			
/* #case4------------- */
#case4 .case_column .clm_body + .clm_body{
	margin-top: 2em;
	}
#case4 .case_column .clm_img{
	margin-top: 50px;
	text-align: center;
	}
	#case4 .case_column .clm_img h6{
		font-size: 2rem;
		margin-bottom: 1em;	
		}
	#case4 .case_column .clm_img h6 + p{
		width: 568px;
		margin: 0 auto;
		}
#case4 .case_column .clm_title{
	font-size: 1.8rem;
	padding: 5px;
	margin-bottom:0;
	}
	#case4 .case_column .clm_bg02{
	background: #6CBCDB;
	padding: 30px 38px;
	margin-top: 57px;
	}
	#case4 .case_column .clm_bg02 h6{
		font-size: 2.8rem;
		letter-spacing: 0.08em;
		margin-bottom: 25px;
		text-align: center;
		color: #fff;
		}
	#case4 .case_column .clm_bg02 h6 span{
		font-size: 1.8rem;
		letter-spacing: 0.08em;
		display: block;
		margin-bottom: 5px;
		}	
	#case4 .case_column .clm_bg02 .flt_box .flt_l{
		width: 350px;
		}
	#case4 .case_column .clm_bg02 .flt_box .flt_l .clm_body + p{
			width: 343px;
			}	
	#case4 .case_column .clm_bg02 .flt_box .flt_l + p{
		width: 250px;
		margin-left: 374px;
		}
#case4 .case_column .mt_20{
	margin-top: 20px;
	}
#case4 .case_column .mt_50{
	margin-top: 50px;
	}
.clm_data_rescue{ width:100%; border:none;}
.clm_data_rescue th, .clm_data_rescue td{ font-size:14px; line-height:1.4; text-align:center; vertical-align:middle; padding:12px; border-bottom:1px solid #ccc; border-left:1px solid #ccc;}						
.clm_data_rescue th{ font-weight:700; background-color:#F90;  border-top:1px solid #ccc;border-left:none;}
.clm_data_rescue td:first-child{border-left:none;}
.clm_data_bold{font-weight:700;}
.remodal-close {
	left: inherit !important;
	top: inherit !important;
	right: 0;
	bottom: 100%;
	color: #fff !important;
}
.remodal-overlay {
  background-color: rgba(0,0,0,0.7)!important;
}
.remodal{
  background: none !important;
  padding: 0 !important;	
}
#modal-content {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
#modal-content iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}






/* LINE UP */

.lineup_area{
	background: #FFF;
	border-top: 1px solid #000;
	padding: 2em 0 4em;
	text-align: center;
	}
	.lineup_title{
		font-size: 2.2rem;
		letter-spacing: 0.2em;
		line-height: 2.2;
		margin: 0 0 2em;
		}
	.lineup_title img{
		width: 200px!important;
		}

	.lineup_area img{ width: 100%; }

/*
	ul.lineup_img{
		
		}
		ul.lineup_img li{
			display: inline-block;
			margin: 0 10px;
			}
*/

	ul.topi_order_list{
		letter-spacing: -0.4em;
		
		}
		ul.topi_order_list li{
			letter-spacing: normal;
			display: inline-block;
			margin: 0 5px;
			}
		ul.topi_order_list li a{
			display: block;
			padding: 10px 10px;
			box-sizing: border-box;
			border: 1px solid #FFF;
			/* transition */ -webkit-transition: all 0.3s; transition: all 0.3s;	
			}

		li.tab_order_fv a:hover{ border: 1px solid #379AD1; }
		li.tab_order_sc a:hover{ border: 1px solid #f6ac19; }
		li.tab_order_sv a:hover{ border: 1px solid #1C8541; }
		li.tab_order_qr a:hover{ border: 1px solid #00826f; }

		li.tab_order_fv a.current{ border: 1px solid #379AD1; }
		li.tab_order_sc a.current{ border: 1px solid #f6ac19; }
		li.tab_order_sv a.current{ border: 1px solid #1C8541; }
		li.tab_order_qr a.current{ border: 1px solid #00826f; }


	.lineup_link {
		width: 400px;
		margin: 35px auto 0;
		}
		.lineup_link a {
			display: block;
			border: 1px solid #323232;
			text-align: center;
			padding: 25px 15px;
			text-decoration: none;
			color: #333!important;
			transition: opacity 0.4s ease;
			-webkit-transition: opacity 0.4s ease;
			position: relative;
		}

		.lineup_link a:hover {
			opacity: 0.6;
		}

		.lineup_link a:before {
			display: inline-block;
		  width: 10px;
		  height: 10px;
		  border-top: solid 1px #333;
		  border-right: solid 1px #333;
		  -webkit-transform: rotate(45deg);
		  transform: rotate(45deg);
		  content: "";
			margin-right: 14px;
		}


/* ORDER */

.order_area{
	background: #FFF;
	padding: 0 0 6em;
	text-align: center;
	}
	.order_title{
		background: #000;
		font-size: 2.2rem;
		letter-spacing: 0.2em;
		line-height: 2.2;
		margin: 0 0 2.5em;
		padding: 25px 0;
		color: #FFF;
		}
	.order_title img{
		width: 200px!important;
		}

#product_cont .prsc19_order_table .prsc_19_od_syukka_link a {
    display: block;
    max-width: 195px;
    margin: 0 auto;
    padding: 5px 5px 5px 40px;
    font-size: 13px !important;
    color: #FFF !important;
    line-height: 1.1em;
    font-weight: normal;
    background: #333F50 url(../../../common_2017/img/icon_mail.png) no-repeat 5px center;
}	


/* FOOTER */
footer {
	background-color: #050c14;
	border-top: #8b8b8b 1px solid
}
footer .footer-cnt {
*zoom:1;
	font-size: 14px;
	font-size: 1.4rem;
	color: #fff
}
footer .footer-cnt:after {
	content: "";
	display: table;
	clear: both
}





#product_cont .topi_order_block .no_btoc,
#product_cont .topi_order_block .for_btob,
#product_cont .topi_order_block .for_biz,
#product_cont .topi_order_block .for_wlvp,
#wrapper #body #product_cont div.prsc19_order_box dl.info19_text.for_btob,
#wrapper #body #product_cont div.prsc19_order_box dl.info19_text.for_biz,
#wrapper #body #product_cont div.prsc19_order_box dl.info19_text.for_wlvp{ display:none;}
#product_cont .topi_order_block h3.prsc19_od_ttlimg img{ width:auto;}
.prsc19_order_table td .tx80 {font-size:13px !important; font-size:1.3rem !important;}
#product_cont .topi_order_block .bnr-order-premium-salon, #product_cont .topi_order_block .btn-more-drive-model{ display:none;}
#product_cont div.prsc19_order_area {
    width: 976px;
    margin: 0px auto;
    padding: 30px 0;
}
#sections .eccom-contents #product_cont .prsc19_order_box { width: auto !important;}
/* ---------------------------------------------------------------------- */
/* for_SP------------------------------------------------------------- */


@media only screen and (min-width: 641px){

.for_sp{ display:none !important;}
.for_spn{ display:none !important;}
	
		footer .footer-cnt {
			width: 967px;
			margin: 0 auto;
			padding: 25px 0
		}

		footer .footer-cnt #pagetop-link {
			float: right;
			width: 300px;
			text-align: right
		}

		footer .footer-cnt #pagetop-link a {
			text-decoration: none
		}
		footer .footer-cnt #pagetop-link a {
			color: #fff
		}
		footer .footer-cnt #pagetop-link a:after {
			content: '\0025b2'
		}
		footer .footer-cnt #pagetop-link a:hover {
			text-decoration: underline
		}


		footer .footer-cnt #copyright {
			float: left;
			width: 500px
		}

}


@media only screen and (max-width: 640px){
	
.for_pc{ display:none !important;}
.for_spn{ display:block !important;}

	
	
	
	

#wrap{
	width: 100%;
}

/* header------------------------------ */
#header_area{
	width: 100%;
	margin: 0 auto;
	padding: 10px 0 5px;
}
#header_area img{ width: 100%; height: auto;}

#header_area .header-logo-cnt{
	width: 90%;
	margin: 0 auto 5px;
	position: relative;
	}
	.logo-store{
		position: relative;
		width: 50%;
		height: auto;
	}
	.logo-letsnote{
		right: 0;
		top: 2vw;
		width: 45%;
		margin-left: 4%;
	}


#header_area .breadcrumb ul {
	display: none;
	}
	
	
/* ------------------------------------ */

#contents_area img{
	width: 100%;
}

#contents_area {
	padding: 0 0 5em;
}


#contents_area {
	padding: 0 0 5em;
	
}
	
	
	#title_area{
		position: relative;

		}
		#title_area #title_txt{
			width: 90%;
			position: absolute;
			top: 20px; left: 5%;
		}

	.main_lead{
		width: 90%;
		margin: 3em auto 8em;
		padding: 2em 0 20vw;
		border-radius: 16px;
		}
		.main_lead::after{
			right:58%;
			}
		.main_lead p{
			font-size: 1.8rem;
			font-weight: bold;
			width: 86%;
			margin: 0 auto;
			text-align: left;
			}
		.main_lead .concierge{
			width: 40%!important;
			position: absolute; bottom:0; right:10%;
			transform: translate(0,60%);
			}
	
/* ------------------------------------ */

	ul.anchor_area{
		width: 90%;
		margin: 0 auto 8em;
		letter-spacing: normal;
		}
		ul.anchor_area li{
			width: 100%;
			display: inline-block;
			letter-spacing: normal;
			}
			ul.anchor_area li:hover { top:0px; }
			ul.anchor_area li:active { top:4px; }


/* ------------------------------------ */

	#case1 .case_header{  }
	#case2 .case_header{  }
	#case3 .case_header{  }
	#case4 .case_header{  }
	.case_header{
		margin: 0 0 34vw;
		padding-bottom: -60px;
		}
		.case_header .icon{
			width: 40%;
			margin: 0 auto 1em;
			}
			.case_header .icon img{ margin-top: -6vw; }

		.case_header .arch{
			width: 60%;
			margin-left: -30%;
			position: absolute; bottom:0; left:50%;
			transform: translate(0,90%);
			}


		.case_header .header_txt{
				width: 60%;
			}
		.case_header .header_img{
				width: 90%;
				height: auto;
			}




/* ------------------------------------ */


	.case_wrap{
		width: 100%;
		}

	.case_before{
		padding: 0 0 20vw;
		background: url(../img/border_01.png) no-repeat center 101%;
		background-size: 200% auto;
		background-color: #66C6CB;
		}
			.case_before::before{
				content: "";
				width: 70vw; height: 15vw;
				margin-left: -35vw;
				position: absolute; top:-14vw; left:50%;
				}
		.case_before_head{
			width: 74vw;
			margin: 0 auto 1.5em;
			}
			.case_before_head img{
				margin-top:-20px;
				}
			.case_before_img{
				width: 62%;
				margin: 1em auto 0;
				}
	/* ----------------- */

	.case_arrow{
		width: 26vw;
		margin: -14vw auto 7vw;
		}

	/* ----------------- */

	.case_after{
		padding: 0 0 50px;
		background: #FF9E57;
		}
		.case_after_head{
			width: 74vw;
			margin: 0 auto 1.5em;
			}
			.case_after_img{
				width: 70%;
				margin: 1em auto 3em;
				}
				.case_after_img .effect01{
					width: 150%!important;
					position: absolute; top:30%; left:-25%;
					}

	

	/* ----------------- */

		.case_lead{
			font-size: 2.8rem;
			line-height: 1.5;
			}
			.case_lead span{
				font-size: 2.0rem;
				line-height: 1.8;
				}


	/* ----------------- */

		.case_column{
			margin: 20vw 6% 0;
			padding: 0 6% 2.6em;
			background: #FFF;
			border-radius: 6px;
			box-shadow: 6px 6px 0px rgba(0,0,0,0.1);
			position: relative;
			}
			.case_column::before{
				content: "";
				width: 70vw; height: 15vw;
				margin-left: -35vw;
				background: url(../img/arch_column.png) no-repeat;
				background-size: 100% 100%;
				position: absolute; top:-14vw; left:50%;
				}

			.case_column .clm_head{
				width: 40vw;
				margin: 0 auto 1.5em;
				}
				.case_column .clm_head img{
					margin-top: -2vw;
					}

			.case_column .clm_lead{
				font-size: 2.2rem;
				line-height: 1.5;
				text-align: center;
				margin: 0 auto 1em;
				padding: 0.4em 0;
				}
			.case_column .clm_body{
				font-size: 1.6rem;
				font-weight: bold;
				margin: 0 auto 1em;
				}
			.case_column .clm_notes{
				font-size: 1.4rem;
				margin: 0 auto 1em;
				}

				/* ----------------- */
				.case_column .clm_concierge_left{
					margin: 2em auto 0;
					padding: 0 0 11vw;
					}
					.clm_concierge_left::before{
						content: "";
						width: 30vw; height: 24vw;
						position: absolute; bottom:0px; left:0;
						}
					.case_column .clm_concierge_left .comment{
						margin: 0 0 0 26%;
						padding: 1em 1em;
						min-height: inherit;
						}
						.clm_concierge_left .comment::after{
							content: "";
							width: 26px; height: 26px;
							background: url(../img/arrow_03.png) no-repeat;
							background-size: 100% 100%;
							position: absolute; bottom:-25px; left:42px;
							}
				/* ----------------- */

				.case_column .clm_concierge_right{
					margin: 2em auto 0;
					padding: 0 0 11vw;
					}
					.clm_concierge_right::before{
						content: "";
						width: 30vw; height: 24vw;
						position: absolute; bottom:0px; right:0;
						}
					.case_column .clm_concierge_right .comment{
						margin: 0 26% 0 0;
						padding: 1em 1em;
						min-height: inherit;
						}
						.clm_concierge_right .comment::after{
							content: "";
							width: 26px; height: 26px;
							transform: scale(-1,1);
							background: url(../img/arrow_03.png) no-repeat;
							background-size: 100% 100%;
							position: absolute; bottom:-25px; right:42px;
							}
				/* ----------------- */	
	
	
.hov01,.hov02{
	position: relative; top:0px;
	text-decoration:none;
	/* transition */ -webkit-transition: all 0.2s; transition: all 0.2s;		
}
.hov01:hover {
	opacity: 0.7;
}
.hov02:hover { top:-4px; }
.hov02:active { top:2px; }

/*---------------------------------*/
/* アンカー位置調整 */

.anchor { position:relative;}
.anchor a { position:absolute; top:-150px; left:0;}



/* ページトップへ戻る-------------------------- */

.go_top {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 0px;
}
#gotoPageTop {
	background-image: url(../img/gototop.gif);
	background-repeat: no-repeat;
	background-position: left 0.3em;
	padding-left: 15px;
	float: right;
	margin: 0;
	min-height: 12px;
	_height: 12px;
	display: block;
	font-size: 85% !important;
	text-decoration: none;
	line-height: 140%;
	color: #548A99
}

	














.case_lead {
    margin-left: 4%;
    margin-right: 4%;
}

.case_column .comment{
	font-size: 1.8rem;
	}

.case_column .flt_box .flt_l{
	float: none;
	width: 100%;
	}
	.case_column .flt_box .clm_body {
		font-size: 1.6rem;
	}
	.case_column .flt_box .flt_l + *{
		width: 100%;
		margin-left: auto;
		}

.case_column .clm_btn{
	width: 100%;
	}
	.case_column .clm_btn a:hover{
		transform: none;
		}

.case_column .clm_title{
	font-size: 1.8rem;
	letter-spacing: 0em;
	padding: 6px 10px;
	margin: 10vw auto 5vw;
}
.case_column .clm_border{
	padding: 6%;
	margin-top: 6%;
	}
	.case_column .clm_border h6{
		font-size: 1.8rem;
		margin-bottom: 0.8em;
		letter-spacing: 0em;
		}
	.case_column .clm_border ul{
        width: 100%;
		display: block;
		}
	.case_column .clm_border ul li{
		width: 100%;
		}
		.case_column .clm_border ul li + li{
			margin-top: 1.5em;
			}
	
	.case_column .clm_border ul li figcaption{
		font-weight: 1.4rem;
		letter-spacing: 0em;
		}

	.case_column .clm_note_list li{
		font-size: 1.2rem;
		}
		.case_column .clm_note_list li + li{
			margin-top: 4px;
			}
		
.case_column .clm_notes02{
	font-size: 1.4rem;
	text-align: left;
}	
		
.case_column .clm_bg{
	padding: 6%;
	}
	.case_column .clm_bg h6{
		font-size: 1.8rem;
		margin-bottom: 1.2em;
		}
		.case_column .clm_bg .clm_illust{
			width: 100%;
			margin: 0 auto 1.2em;
			}
		.case_column .clm_bg .flt_box .flt_l{
			width: 100%;
			}
		.case_column .clm_bg .flt_box .flt_l + p{
			width: 100%;
			margin-left: 0;
			margin-top: 1em;
			}

			
/* #case4------------- */
#case4 .case_column .clm_body + .clm_body{
	margin-top: 6%;
	}
#case4 .case_column .clm_img{
	margin-top: 3em;
	}
	#case4 .case_column .clm_img h6{
		font-size: 1.8rem;
		}
	#case4 .case_column .clm_img h6 + p{
		width: 100%;
		}
#case4 .case_column .clm_title{
	font-size: 1.6rem;
	}
	#case4 .case_column .clm_bg02{
	padding: 6%;
	margin-top: 3em;
	}
	#case4 .case_column .clm_bg02 h6{
		font-size: 2.2rem;
		margin-bottom: 0.6em;
		line-height: 1.5;
		letter-spacing: normal;
		}
	#case4 .case_column .clm_bg02 h6 span{
		font-size: 1.6rem;
		}	
	#case4 .case_column .clm_bg02 .flt_box .flt_l{
		width: 100%;
		}
	#case4 .case_column .clm_bg02 .flt_box .flt_l .clm_body + p{
			width: 100%;
			}	
	#case4 .case_column .clm_bg02 .flt_box .flt_l + p{
		width: 70%;
		margin: 1.5em auto 0;
		}
#case4 .case_column .mt_20{
	margin-top: 1em;
	}
#case4 .case_column .mt_50{
	margin-top: 10vw;
	}
.clm_data_rescue th, .clm_data_rescue td{ font-size:12px;}					
.remodal-wrapper {
	padding: 5% !important;
}



/* LINE UP */

.lineup_area{
	padding: 0em 0 2em;
	}
	.lineup_title{
		font-size: 2.0rem;
		margin: 0 0 2em;
		}
	.lineup_title img{
		width: 40%!important;
		}

	ul.lineup_img{
		
		}
		ul.lineup_img li{
			width: 42%;
			display: inline-block;
			margin: 0 0 1em;
			}

	.lineup_link {
		width: 70%;
		margin: 35px auto 0;
		}
		.lineup_link a {
			padding: 1.5em 0;
		}

		.lineup_link a:hover {
		}

		.lineup_link a:before {

		}


/* ORDER */

.order_area{
	background: #FFF;
	padding: 0 0 6em;
	text-align: center;
	}
	.order_title{
		font-size: 2.0rem;
		padding: 1em 0 0.6em;
		color: #FFF;
		}
	.order_title img{
		width: 40%!important;
		}
#product_cont div.prsc19_order_area {
    width: auto;
    padding: 20px 0;
    margin: 0 2.5%;
    overflow-x: auto;
}
#product_cont .prsc19_order_box h4.prsc19_od_ttl {
    font-size: 13px;
    font-size: 1.2rem;
    text-align: center;
    color: #FFF;
    background: #000;
    padding: 10px 0;
    text-shadow: none;
}
#product_cont .prsc19_order_table_box {
    width: calc(100% - 10px);
    margin: 0 auto 15px;
    padding-right: 10px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
	/* FOOTER */

footer .footer-cnt {
	font-size: 12px;
	font-size: 1.2rem;
	padding: 15px 10px 45px;
	text-align: center
}
footer .footer-cnt #pagetop-link {
	display: none;
	float: none;
	width: auto;
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index:99;
}
footer .footer-cnt #pagetop-link a {
	color: #000;
	background-color: rgba(227,227,227,.8);
	display: block;
	padding: 8px 10px;
	border-radius: 4px
}

footer .footer-cnt #pagetop-link a:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin: 2px 5px 0 0;
	width: 5px;
	height: 5px;
	border-top: solid 2px #000;
	border-right: solid 2px #000;
	-webkit-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	transform: rotate(315deg)
}

/*  */
#wrapper #body #product_cont dd.prsc_19_spec_top_more { width:60% !important;}
	
}/* @media */




/*
  fade_in
-------------------------*/



			.fade.f_ttl.active{ 
				animation: fade_ttl 0.7s  1;
				animation-delay: 0.5s;
				}	

			.fade.f_01.active{
				animation: fade01 0.4s  1;
				animation-delay: 0.0s;
				transform-origin: center center;
				}

			.fade.f_02.active{ 
				animation: fade02 0.4s  1;
				animation-delay: 0.0s;
				transform-origin: bottom center;
				}	





				@keyframes fade_ttl {
					0% {transform: perspective(500px) rotateX(0deg) scale(1.0,1.0);}
					20% {transform: perspective(500px) rotateX(0deg) scale(0.8,0.8);}
					40% {transform: perspective(500px) rotateX(-15deg) scale(1.3,1.3)}
					70% {transform: perspective(500px) rotateX(15deg) scale(0.9,0.9);}
					100% {transform: perspective(500px) rotateX(0deg) scale(1.0,1.0);}
				}	

				@keyframes fade01 {
					0% {transform: perspective(500px) rotateX(0deg) scale(1.0,1.0);}
					50% {transform: perspective(500px) rotateX(-10deg) scale(1.3,1.4)}
					80% {transform: perspective(500px) rotateX(10deg) scale(0.9,0.9);}
					100% {transform: perspective(500px) rotateX(0deg) scale(1.0,1.0);}
				}	
				@keyframes fade02 {
					0% {transform: perspective(500px) rotateX(0deg) scale(1.0,1.0);}
					50% {transform: perspective(500px) rotateX(-10deg) scale(1.1,1.1)}
					80% {transform: perspective(500px) rotateX(10deg) scale(0.9,0.9);}
					100% {transform: perspective(500px) rotateX(0deg) scale(1.0,1.0);}
				}		

/*  */