@charset "UTF-8";
/* CSS Document */

/*
フォントサイズ
========================*/
.fs10 {font-size:10px;}
.fs11 {font-size:11px;}
.fs12 {font-size:12px;}
.fs13 {font-size:13px;}
.fs14 {font-size:14px;}
.fs15 {font-size:15px;}
.fs16 {font-size:16px;}
.fs17 {font-size:17px;}
.fs18 {font-size:18px;}
.fs19 {font-size:19px;}
.fs20 {font-size:20px;}
	
/*
フォントウェイト
========================*/
.bold { font-weight:bold; }
	

/*
align
========================*/
.alignL { text-align:left; }
.alignR { text-align:right; }
.alignC { text-align:center; }


/*
ホバー透過
========================*/
.hover {transition:opacity 0.1s linear;}
.hover:hover {opacity:0.7;}


/*
マージン
========================*/
.mt00 {margin-top: 0 !important;}
.mt05 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}
.mt70 {margin-top:70px !important;}
.mt80 {margin-top:80px !important;}
.mt90 {margin-top:90px !important;}
.mt100 {margin-top:100px !important;}
	

/*
float
========================*/
.fleft { float:left; }
.fright { float:right; }

/*
clearfix
========================*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
font-size:0.1em;
line-height:0;
}
	
/*
テーブル
========================*/
.tl{
	display:table;
	border-collapse:collapse;
	width:100%;
	table-layout:fixed;
	}
.tl > * {
	display:table-cell;
	vertical-align:top;
	}
@media(max-width:768px) {
	.tl.tbReset,
	.tl.tbReset > * {
		display:block;
		margin:30px 0 0 0 !important;
		width:100% !important;
	}
}
@media(max-width:560px) {
	.tl.spReset,
	.tl.spReset > * {
		display:block;
		margin:30px 0 0 0 !important;
		width:100% !important;
	}
}

/*
カラム
========================*/
.col > * {
	float:left;
	display:block;
}

.col2 > * {
	width:50%;
}
.col3 > * {
	width:33.3%;
}
.col4 > * {
	width:25%;
}

@media(min-width:769px){
	.pc_col2 > * {
	width:50%;
	}
	.pc_col2.separate > * {
		width:48%;
		margin-right:4%;
	}
	.pc_col2.separate > *:nth-of-type(2n){
		margin-right:0;
	}
	.pc_col2.separate > *:nth-of-type(n+3) {margin-top:20px;}
	.pc_col3 > * {
	width:33.3%;
	}
	.pc_col3.separate > * {
		width:31%;
		margin-right:3.5%;
	}
	.pc_col3.separate > *:nth-of-type(3n){
		margin-right:0;
	}
	.pc_col3.separate > *:nth-of-type(n+4) {margin-top:20px;}
	.pc_col4 > * {
		width:25%;
	}
	.pc_col4.separate > * {
		width:24%;
		margin-right:1.3%;
	}
	.pc_col4.separate > *:nth-of-type(4n){
		margin-right:0;
	}
	.pc_col4.separate > *:nth-of-type(n+5) {margin-top:20px;}
	.pc_col5 > * {
		width:20%;
	}
	.pc_col5.separate > * {
		width:18%;
		margin-right:2%;
	}
	.pc_col5.separate > *:nth-of-type(5n){
		margin-right:0;
	}
	.pc_col5.separate > *:nth-of-type(n+6) {margin-top:20px;}
}
@media(max-width:768px) and (min-width:561px){
	.tb_col2 > * {
	width:50%;
	}
	.tb_col2.separate > * {
		width:48%;
		margin-right:4%;
	}
	.tb_col2.separate > *:nth-of-type(2n){
		margin-right:0;
	}
	.tb_col2.separate > *:nth-of-type(n+3) {margin-top:20px;}
	.tb_col3 > * {
	width:33.3%;
	}
	.tb_col3.separate > * {
		width:31%;
		margin-right:3.5%;
	}
	.tb_col3.separate > *:nth-of-type(3n){
		margin-right:0;
	}
	.tb_col3.separate > *:nth-of-type(n+4) {margin-top:20px;}
	.tb_col4 > * {
		width:25%;
	}
	.tb_col4.separate > * {
		width:24%;
		margin-right:1.3%;
	}
	.tb_col4.separate > *:nth-of-type(4n){
		margin-right:0;
	}
	.tb_col4.separate > *:nth-of-type(n+5) {margin-top:20px;}
	.tb_col5 > * {
		width:20%;
	}
	.tb_col5.separate > * {
		width:18%;
		margin-right:2%;
	}
	.tb_col5.separate > *:nth-of-type(5n){
		margin-right:0;
	}
	.tb_col5.separate > *:nth-of-type(n+6) {margin-top:20px;}
}
@media(max-width:560px){
	.sp_col2 > * {
	width:50%;
	}
	.sp_col2.separate > * {
		width:48%;
		margin-right:4%;
	}
	.sp_col2.separate > *:nth-of-type(2n){
		margin-right:0;
	}
	.sp_col2.separate > *:nth-of-type(n+3) {margin-top:20px;}
	.sp_col3 > * {
	width:33.3%;
	}
	.sp_col3.separate > * {
		width:31%;
		margin-right:3.5%;
	}
	.sp_col3.separate > *:nth-of-type(3n){
		margin-right:0;
	}
	.sp_col3.separate > *:nth-of-type(n+4) {margin-top:20px;}
	.sp_col4 > * {
		width:25%;
	}
	.sp_col4.separate > * {
		width:24%;
		margin-right:1.3%;
	}
	.sp_col4.separate > *:nth-of-type(4n){
		margin-right:0;
	}
	.sp_col4.separate > *:nth-of-type(n+5) {margin-top:20px;}
	.sp_col5 > * {
		width:20%;
	}
	.sp_col5.separate > * {
		width:18%;
		margin-right:2%;
	}
	.sp_col5.separate > *:nth-of-type(5n){
		margin-right:0;
	}
	.sp_col5.separate > *:nth-of-type(n+6) {margin-top:20px;}
}

/*========================
アニメーション

・css easing
easeOutQuart
cubic-bezier(0.165, 0.84, 0.44, 1);

easeInOutQuart
cubic-bezier(0.77, 0, 0.175, 1);
========================*/

/*スライドイン 左から右*/
.slideRight {
	-webkit-transform:translateX(-30px);
	transform:translateX(-30px);
	opacity:0;
	-webkit-transition:
		-webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	}
.slideRight.on {
	-webkit-transform:translateX(0px);
	transform:translateX(0px);
	opacity:1;
	}

/*スライドイン 右から左*/
.slideLeft {
	-webkit-transform:translateX(30px);
	transform:translateX(30px);
	opacity:0;
	-webkit-transition:
		-webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	}
.slideLeft.on {
	-webkit-transform:translateX(0px);
	transform:translateX(0px);
	opacity:1;
	}
	
/*スライドイン 上から下*/
.slideDown {
	-webkit-transform:translateY(-30px);
	transform:translateY(-30px);
	opacity:0;
	-webkit-transition:
		-webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	z-index:1;
	}
.slideDown.on {
	-webkit-transform:translateY(0px);
	transform:translateY(0px);
	opacity:1;
	}
	
/*スライドイン 下から上*/
.slideUp {
	-webkit-transform:translateY(30px);
	transform:translateY(30px);
	opacity:0;
	-webkit-transition:
		-webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	transition:
		transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
		opacity 0.5s linear;
	z-index:1;
	}
.slideUp.on {
	-webkit-transform:translateY(0px);
	transform:translateY(0px);
	opacity:1;
	}

/*フェードイン*/
.fadeIn {opacity:0;-webkit-transition:opacity 0.5s linear;transition:opacity 0.5s linear;}
.fadeIn.on {opacity:1;}

/*フェードアウト*/
.fadeOut {opacity:1;-webkit-transition:opacity 0.5s linear;transition:opacity 0.5s linear;}
.fadeOut.on {opacity:0;}

/*スライド 幅*/
.slideWidth {
	width:0;
	-webkit-transition:width 1s cubic-bezier(0.77, 0, 0.175, 1);
	transition:width 1s cubic-bezier(0.77, 0, 0.175, 1);
	}
.slideWidth.on {
	width:100%;
	}


/*============================
カスタマイズ
============================*/
.trgArrow i {
	display:inline-block;
	border:0.25em solid #d39aa1;
	border-left-color:transparent;
	border-bottom-color:transparent;
	transform: rotate(45deg);
	width: auto !important;
	height: auto !important;
	margin-left:0.5em;
	margin-right:0.5em;
}

#gnav .products .dropdown .trgArrow {
	font-size:16px;
	text-decoration:underline;
}

.flex {
	display:flex;
	justify-content: space-between;
	align-items:center;
}

#gnav .products .dropdown .block .tit.flex span:last-child {
	font-size: 16px;
}
#gnav .products .dropdown .block .tit.flex span:last-child a {
	text-decoration: underline;
}

#featureList .tit.flex span:last-child {
	font-size: 16px;
}