@charset "utf-8";

@import url('//fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:500');


/*	base font
------------------------------------------*/

@font-face{
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 500;
}
@font-face{
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}

html{ font-size: calc(13px + 3 * ( 100vh - 460px ) / 408 )}
@media screen and (min-height: 950px){ html{ font-size: 16px }}
@media screen and (max-height: 460px){ html{ font-size: 13px }}

body{
	color: rgb(0,0,0);
	font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
	font-size: 1rem;
	line-height:1.8;
	/*font-feature-settings : "palt" 1;*/
	-webkit-text-size-adjust: none;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



/*	link effects
------------------------------------------*/

a:link, a:visited					{color:rgb(0,0,0); text-decoration: none}
a:hover, a:active, a:focus			{color:rgb(0,0,0); text-decoration: none}

a.cl_link							{color:rgb(204,0,51)}




/*	structure
------------------------------------------*/

html{
	background:#fff;
	overflow:auto;
	overflow-x: hidden;
}
#page{
	position:relative;
	width:100%;
	height:100%;
	min-height:100vh;
	min-width:100%;
	overflow:hidden;
}
#container{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}



/*	loader
------------------------------------------*/

#loader{
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	height:100vh;
	background:#fff;
	opacity:1;
	z-index:10003;
}
#i_loader{
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	width:200px;
	height:200px;
	transform:translate(-50%,-50%);
	opacity:0;
	filter:blur(25px);
	transition:.7s;
}
#i_loader.logo_in{
	opacity:1;
	filter:blur(0);
}





/*	hd
------------------------------------------*/

.gm{
	writing-mode: vertical-rl;
}
	.gm li{
		position:relative;
		padding:0 1vw;
		font-family:'A1明朝';
		font-size:1rem;
		line-height:1;
	}
	.gm li:after{
		position:absolute;
		display:block;
		content:'';
		left:0;
		top:-1rem;
		width:0;
		height:1px;
		background:#999;
		transition:.5s;
		
		left:50%;
		transform:translateX(-50%);
	}
	_:-ms-lang(x), .gm li:after{
		background:rgba(255,255,255,0);
	}
	.gm li:hover:after{
		width:100%;
	}




/*	hbg
------------------------------------------*/

/* menu */
#hbg{
	display:block;
	position:fixed;
	left:0;
	top:-101%;
	width:100%;
	height:100%;
	height:100vh;
	padding:15px 0 0;
	text-align:center;
	background:rgba(255,255,255,.98);
	z-index:10000;
	opacity:0;
	filter:blur(25px);
	transition:1s ease;
}
	#hbg.active{
		display:block;
		opacity:1;
		filter:blur(0);
		top:0;
	}
	
	#hbg_logo{
		position:relative;
		width:112px;
		margin:0 auto 50px;
	}
	#hbg ul{
		position:relative;
		display:inline-block;
		margin:0 auto;
	}
	#hbg .gm li{
		max-height:15rem;
		padding:0 3.5vw;
		text-align:left;
		font-size:1.3rem;
		line-height:1;
		box-sizing:border-box;
	}
	#hbg_adrs{
		position:fixed;
		width:100%;
		bottom:3.5rem;
		text-align:center;
		font-family:'A1明朝';
		font-size:.9rem;
		letter-spacing:0.04rem;
	}
	#hbg_adrs a{
		display:block;
		font-size:1.1rem;
	}

/* btn */
.btn-trigger{
	opacity:1;
	position: fixed;
	right:16px;
	top:20px;
	width: 36px;
	height: 30px;
	cursor:pointer;
	z-index:10001;
}
	.btn-trigger span{
		position: absolute;
		left: 0;
		content:'';
		width: 100%;
		height: 2px;
		background-color: rgb(0,0,0);
	}
	.btn-trigger span{
		display: inline-block;
		transition: all .5s;
		box-sizing: border-box;
	}
	.btn-trigger span:nth-of-type(1){
		top: 0;
	}
	.btn-trigger span:nth-of-type(2){
		top: 14px;
	}
	.btn-trigger span:nth-of-type(3){
		bottom: 0;
	}
	
	.btn-trigger span:nth-of-type(1){
		animation: mv_bar1 .75s forwards;
	}
	@keyframes mv_bar1{
		0%{
			transform: translateY(14px) rotate(45deg);
		}
		50%{
			transform: translateY(14px) rotate(0);
		}
		100%{
			transform: translateY(0) rotate(0);
		}
	}
	.btn-trigger span:nth-of-type(2){
		transition: all .25s .25s;
		opacity: 1;
	}
	.btn-trigger span:nth-of-type(3){
		animation: mv_bar3 .75s forwards;
	}
	@keyframes mv_bar3{
		0%{
			transform: translateY(-14px) rotate(-45deg);
		}
		50%{
			transform: translateY(-14px) rotate(0);
		}
		100%{
			transform: translateY(0) rotate(0);
		}
	}
	.btn-trigger.active span:nth-of-type(1){
		animation: mv_bar1-on .75s forwards;
	}
	@keyframes mv_bar1-on{
		0%{
			transform: translateY(0) rotate(0);
		}
		50%{
			transform: translateY(14px) rotate(0);
		}
		100%{
			transform: translateY(14px) rotate(45deg);
		}
	}
	.btn-trigger.active span:nth-of-type(2){
		opacity: 0;
	}
	.btn-trigger.active span:nth-of-type(3){
		animation: mv_var3-on .75s forwards;
	}
	@keyframes mv_var3-on{
		0%{
			transform: translateY(0) rotate(0);
		}
		50%{
			transform: translateY(-14px) rotate(0);
		}
		100%{
			transform: translateY(-14px) rotate(-45deg);
		}
	}



/*	content
------------------------------------------*/

.main{
}

.inner{
	position:relative;
	width:1200px;
	margin:0 auto;
}
@media screen and (max-width: 1200px){
	.inner{
		width:92%;
	}
}

.layout_clm2{
	position:relative;
	display:flex;
	justify-content:space-between;
}
	.layout_clm2_s{
		width:20%;
		padding:4.375rem 0 0;
	}
	.layout_clm2_l{
		width:80%;
		padding:4.375rem 4.375rem 0 0;
	}
	
	.ab_item{
		position:relative;
		margin:0 0 10rem;
	}
	.ab_item .img{
		position:relative;
		margin:0 0 2.5rem;
	}
@media screen and (max-width: 970px){
	.layout_clm2_l{
		padding:4.375rem 0 0 0;
	}
}
@media screen and (max-width: 700px){
	.layout_clm2{
		display:block;
	}
	.layout_clm2_s{
		width:100%;
		padding:4.375rem 0 2rem;
	}
	.layout_clm2_l{
		width:100%;
		padding:0;
	}
}

.page_mainImg{
	position:relative;
	overflow:hidden;
	height:35vh;
}
	.page_mainImg img{
		transform-origin: center;
	}
@media screen and (max-width: 700px){
	.page_mainImg{
		overflow:inherit;
		height:auto;
	}
}



/*	footer
------------------------------------------*/
#ft{
	position:relative;
	padding:40px 0 35px;
	background:url(/img/bg_texture-washigrn.jpg) repeat left top;
}

	#ft .gm{
		position:absolute;
		right:2rem;
		top:40px;
		max-height:200px;
		color:#fff;
	}
	#ft .gm a{
		color:#fff;
	}
	#ft .gm li:after{
		background:rgba(255,255,255,.4);
	}
	_:-ms-lang(x), #ft .gm li:after{
		background:rgba(255,255,255,0);
	}
	
	.colophon_wrap{
		position:relative;
		max-height:200px;
		color:#fff;
		margin:0 0 100px 2rem;
	}
	.tagline{
		display:inline-block;
		font-size:.9rem;
	}
	.colophon{
		width:30%;
	}
		.colophon dt{
			padding:0 2rem;
		}
		.colophon dd{
			font-size:.8rem;
			text-orientation: upright;
		}

	.cw{
		text-align:center;
		color:#fff;
		font-size:.8rem;
	}

@media screen and (max-width: 768px){
	#ft .gm{
		display:none;
	}
	.colophon_wrap{
		margin:0 auto 100px;
	}
}

.pagetop{
	display:block;
	position:fixed;
	right:0;
	bottom:0;
	width:41px;
	height:41px;
	background:rgb(0,0,0,.8);
	z-index:100;
	cursor:pointer;
	transition: 0.3s;
}
	.pagetop a{
		display:block;
		width:100%;
		height:100%;
	}
	.pagetop:hover{
		background:rgb(0,0,0);
	}




/*	ajax
------------------------------------------*/
.modal{
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,.9);
	z-index:10010;
}
.overlay{
	display:block;
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0 auto 0;
	z-index:10011;
}
.btn_close{
	display:block;
	position:fixed;
	top:0;
	right:0;
	width:45px;
	height:45px;
	background:rgb(105,160,128);
	border-radius:1px;
	cursor:pointer;
	transition: .5s;
	z-index:10012;
}
	.btn_close img{
		position:absolute;
		display:block;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
	}
	.btn_close:hover{
		background:rgba(105,160,128,.7);
	}



/*	form
------------------------------------------*/

.er_msg_box{
	display:inline-block;
	padding:10px 16px;
	color:rgb(192,63,63);
	font-size:.9rem;
	line-height:1.4;
	background:mistyrose;
	border-radius:3px;
}
.er{
	display:inline-block;
	padding:7px 1em;
	color:rgb(192,63,63);
	font-size:.9rem;
	line-height:1;
	background:mistyrose;
	margin:.5rem 0;
	border-radius:3px;
}





/*	frame
------------------------------------------*/

.bg_notice{
	padding:.4rem 1rem .3rem;
	background:#fff;
	border-radius:4px;
}




/*	table
------------------------------------------*/

/* plain no-border */
.table_plain{
	width:100%;
	border-collapse: separate;
	border-spacing: 0;
	border-bottom:1px solid gainsboro;
}
	.table_plain th,
	.table_plain td{
		padding:.6rem;
		vertical-align:middle;
		text-align:left;
		border-top:1px solid gainsboro;
	}
	.table_plain th{
		white-space:nowrap;
	}

/* green */
.table_green{
	width:100%;
	border-collapse: separate;
	border-spacing: 1px;
	background:rgba(42,156,128,.5);
}
	.table_green th,
	.table_green td{
		padding:.7rem .7rem;
		vertical-align:middle;
	}
	.table_green th{
		white-space:nowrap;
		background:#dff0ec;
	}
	.table_green td{
		background:#fff;
	}



/*	title
------------------------------------------*/

.ttl_sandline{
	text-align:center;
	font-family: "A1明朝";
	font-size:2rem;
	line-height:1.5;
	letter-spacing:.1rem;
	margin:0 auto 2.5rem;
}
	.ttl_sandline span{
		display:block;
		font-size:12px;
		line-height:1;
	}
	.ttl_sandline span:after{
		positon:absolute;
		display:block;
		content:'';
		width:40%;
		height:1px;
		background:rgba(0,0,0,.4);
		margin:1.6rem auto 1.2rem;
	}
@media screen and (max-width: 414px){
	.ttl_sandline{
		font-size:1.5rem;
	}
}

.page_ttl{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-family:'A1明朝';
	font-size:2.75rem;
	line-height:1.2;
	letter-spacing:.1rem;
}
	.page_ttl span{
		display:block;
		padding:.4rem 1rem 0 0;
		font-size:.75rem;
	}
@media screen and (max-width: 700px){
	.page_ttl{
		-ms-writing-mode:lr-tb;
		writing-mode:horizontal-tb;
		text-align:center;
		font-size:2.2rem;
	}
	.page_ttl span{
		padding:.4rem 0 0 0;
	}
}

.ttl_plain{
	text-align:center;
	font-family:'A1明朝';
	font-size:1.8rem;
	line-height:1.5;
	margin:0 auto 2.5rem;
}




/*	btn
------------------------------------------*/


/*	font
------------------------------------------*/

/* font family */
.ff_min{font-family:"A1明朝"; letter-spacing:.05rem}
.ff_meiryo{font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W5", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif}
.ff_gothic{font-family: "Yu Gothic", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; font-weight: 500}


/* font size */
.fs_LLL	{font-size:2.0rem}
.fs_LL	{font-size:1.75rem}
.fs_L	{font-size:1.5rem}
.fs_ML	{font-size:1.2rem}
.fs_MML	{font-size:1.15rem}
.fs_M	{font-size:1rem}
.fs_MMS	{font-size:.9rem}
.fs_MS	{font-size:.75rem}
.fs_S	{font-size:.68rem}


/* font weight */
.fw_bold	{font-weight:bold !important}
.fw_normal	{font-size:normal !important}


/* writingmode */
.wm_v{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}


/* text-decoration */
.td_ul		{text-decoration:underline !important}



/*	other
------------------------------------------*/

/* color */
.cl_grey	{color:rgb(35,35,35)}
.cl_white	{color:rgb(255,255,255)}
.cl_green	{color:rgb(42,156,128)}
.cl_red		{color:rgb(192,63,63)}


/* display */
.dp_hide		{display:none}
.dp_block		{display:block}
.dp_inline		{display:inline}
.dp_in-block	{display:inline-block}


.dp_show1000,
.dp_show900,
.dp_show800,
.dp_show700,
.dp_show600,
.dp_show500,
.dp_show400{
	display:none;
}
@media screen and (max-width: 1000px){.dp_show1000{display:block}}
@media screen and (max-width: 900px){.dp_show900{display:block}}
@media screen and (max-width: 800px){.dp_show800{display:block}}
@media screen and (max-width: 700px){.dp_show700{display:block}}
@media screen and (max-width: 600px){.dp_show600{display:block}}
@media screen and (max-width: 500px){.dp_show500{display:block}}
@media screen and (max-width: 400px){.dp_show400{display:block}}


.dp_hide1000,
.dp_hide900,
.dp_hide800,
.dp_hide700,
.dp_hide600,
.dp_hide500,
.dp_hide400{
	display:block;
}
@media screen and (max-width: 1000px){.dp_hide1000{display:none}}
@media screen and (max-width: 900px){.dp_hide900{display:none}}
@media screen and (max-width: 800px){.dp_hide800{display:none}}
@media screen and (max-width: 700px){.dp_hide700{display:none}}
@media screen and (max-width: 600px){.dp_hide600{display:none}}
@media screen and (max-width: 500px){.dp_hide500{display:none}}
@media screen and (max-width: 400px){.dp_hide400{display:none}}


/* clear */
.clearfix:after{
	content: "";
	display: table;
	clear: both;
}


/* img */
.imgfit{
	display:block;
	width:100%;
	height:auto;
}


/* float */
.float_R{float:right}
.float_L{float:left}
.float_C{margin:0 auto 0}


/* align */
.align_R{text-align:right}
.align_L{text-align:left}
.align_C{text-align:center}


/* margin */
.mb_LLL	{margin-bottom: calc( 30px + 170 * ( 100vh - 460px ) / 408 ) !important}	/* 30-100 */
.mb_LL	{margin-bottom: calc( 26px + 44 * ( 100vh - 460px ) / 408 ) !important}	/* 26-70 */
.mb_L	{margin-bottom: calc( 24px + 30 * ( 100vh - 460px ) / 408 ) !important}	/* 24-54 */
.mb_MMM	{margin-bottom: calc( 20px + 25 * ( 100vh - 460px ) / 408 ) !important} 	/* 20-45 */
.mb_MM	{margin-bottom: calc( 18px + 20 * ( 100vh - 460px ) / 408 ) !important}	/* 18-38 */
.mb_M	{margin-bottom: calc( 15px + 10 * ( 100vh - 460px ) / 408 ) !important} 	/* 15-25 */
.mb_SSS	{margin-bottom: calc( 12px + 8 * ( 100vh - 460px ) / 408 ) !important}		/* 12-20 */
.mb_SS	{margin-bottom: calc( 10px + 5 * ( 100vh - 460px ) / 408 ) !important}		/* 10-15 */
.mb_S	{margin-bottom: calc( 5px + 5 * ( 100vh - 460px ) / 408 ) !important}		/* 5-10 */
.mb_Z	{margin-bottom:0 !important}

@media screen and (min-height: 868px){
	.mb_LLL	{margin-bottom: 100px !important}
	.mb_LL	{margin-bottom: 70px !important}
	.mb_L	{margin-bottom: 54px !important}
	.mb_MMM	{margin-bottom: 45px !important}
	.mb_MM	{margin-bottom: 38px !important}
	.mb_M	{margin-bottom: 25px !important}
	.mb_SSS	{margin-bottom: 20px !important}
	.mb_SS	{margin-bottom: 15px !important}
	.mb_S	{margin-bottom: 10px !important}
}
@media screen and (max-height: 460px){
	.mb_LLL	{margin-bottom: 30px !important}
	.mb_LL	{margin-bottom: 26px !important}
	.mb_L	{margin-bottom: 24px !important}
	.mb_MMM	{margin-bottom: 20px !important}
	.mb_MM	{margin-bottom: 18px !important}
	.mb_M	{margin-bottom: 15px !important}
	.mb_SSS	{margin-bottom: 12px !important}
	.mb_SS	{margin-bottom: 10px !important}
	.mb_S	{margin-bottom: 5px !important}
}


/* line-height */
.lh_100		{line-height:1rem}
.lh_110		{line-height:1.1rem}
.lh_120		{line-height:1.2rem}
.lh_130		{line-height:1.3rem}
.lh_140		{line-height:1.4rem}
.lh_150		{line-height:1.5rem}
.lh_170		{line-height:1.7rem}
.lh_200		{line-height:2rem}
.lh_240		{line-height:2.4rem}
.lh_300		{line-height:3rem}



/*	animation fx
------------------------------------------*/

.me{
	opacity:0;
	filter:blur(30px);
	transform:translateY(50px);
	transition:1s;
}
.me_in{
	opacity:1;
	filter:blur(0);
	transform:translateY(0);
}

.fx_jello:hover{
	animation-duration: .3s;
	animation-name: jello_s;
	transform-origin: center;
}
.fx_headshake:hover{
	animation-duration: .8s;
	animation-name: headShake;
	transform-origin: center;
}
.fx_pulse:hover{
	animation-duration: .3s;
	animation-name: pulse;
	transform-origin: center;
}

.fx_expand{
	transition:.5s;
}
	.fx_expand:hover{
		transition:.5s;
		animation-duration: .3s;
		transform-origin: center;
		transform: scale(1.05);
	}