@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 {
}


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

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

/*
ボタン クローズ
========================*/
.closeButton {
	display:block;
	position: relative;
	width:1.5em;
	height:1.5em;
}
.closeButton span,
.closeButton::before,
.closeButton::after {
	content:"";
	display:block;
	width:100%;
	height: 1px;
	background: #000;
	position: absolute;
	left:0;
	transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.closeButton::before {
	top:0;
}
.closeButton::after {
	top:100%;
}

.closeButton::before,
.closeButton::after {
	top:50%;
}
.closeButton::before {
	transform:rotate(45deg);
}
.closeButton::after {
	transform:rotate(-45deg);
}

/*
ボタン　ハンバーガー
========================*/
#menuButton {
	position: relative;
	
}
#menuButton span,
#menuButton::before,
#menuButton::after {
	content:"";
	display:block;
	width:100%;
	height: 2px;
	background: #000;
	position: absolute;
	left:0;
	transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
#menuButton span {
	top:50%;
}
#menuButton::before {
	top:0;
}
#menuButton::after {
	top:100%;
}

.menuopen #menuButton span {opacity:0;}
.menuopen #menuButton::before,
.menuopen #menuButton::after {
	top:50%;
}
.menuopen #menuButton::before {
	transform:rotate(45deg);
}
.menuopen #menuButton::after {
	transform:rotate(-45deg);
}
	
/*
テーブル
========================*/
.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;
	}
}

/*
flex
========================*/
.flex {
	display:flex;
	justify-content: space-between;
}

/*
カラム
========================*/
.col {
	display:flex;
	flex-wrap: wrap;
}
.col.justifyCenter {
	justify-content: center;
}

.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:45px;}
	.pc_col4 > * {
		width:25%;
	}
	.pc_col4.separate > * {
		width:23%;
		margin-right:2.6%;
	}
	.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;}
	.pc_col6 > * {
		width:16.6%;
	}
}
@media(max-width:768px) and (min-width:561px){
	.tb_col1 > * {
	width:100%;
	}
	.tb_col1.separate > *:nth-of-type(n+2) {margin-top:20px;}
	.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_col1 > * {
	width:100%;
	}
	.sp_col1.separate > *:nth-of-type(n+2) {margin-top:20px;}
	.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 {
	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 {
	transform:translateX(30px) scale(0.9);
	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 {
	transform:translateY(30px) scale(0.9);
	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;
	overflow: hidden;
	-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%;
	}