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

body {
	color:#222222;
	font-size:14px;
	line-height:26px;
    letter-spacing: 0.05em;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}

.sec .ttl{
	max-width: 1100px;
	margin: 0 auto 75px;
	position: relative;
}

.sec .ttl::after {
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	top: 50%;
	background-color: #15294a;
	z-index: -1;
}

h4 {
	font-size: 20px;
    font-weight: bold;
    color: #15294a;
    display: table;
    margin: 0 auto;
    padding: 0px 13px;
    background: url(../../img/common/icon_ss2.png) no-repeat right, url(../../img/common/icon_ss.png) no-repeat left;
}

h4 span{
    background: #fff;
	padding: 0 15px;
}

@media all and (-ms-high-contrast:none) {

	body {
		font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}

	loader-bg #loader > img {
		display: block;
		position: absolute;
		top: 47%;
		left: 48%;
	}
}

.pc { display:block;}
.tb { display:none;}
.sp { display:none;}


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

.tb { display:block;}

}

@media screen and (max-width: 750px) {

	.pc { display:none!important;}
	.tb { display:none;}
	.sp { display:block;}
	img.sp { width: 100%;}

	.sec .ttl{margin: 0 auto 30px;}

}

body #wrap {
	overflow:hidden;
	margin:0 auto;
}

a {
    color: #000;
    text-decoration: none;
}
a:hover { opacity:0.6;}

body #wrap q{ display:none;}


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

	body #wrap .sp,
	.sp_menu { display:none!important;}
	body #wrap .pc { display:block; margin:0 auto;}

}

@media screen and (max-width: 1000px) {

	body #wrap div.main { margin-top:75px;}

}

@media screen and (max-width: 750px) {

	body {
		font-size:14px;
		line-height:25px;
	}

	body #wrap div.main { margin-top:50px;}

}

/*======================================================
						header
======================================================*/

#wrap header a:hover { opacity:0.6; }

#wrap header {
    height: 90px;
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 10;
	transition: 0.5s;
}

body .in_wrap header {
	position: fixed;
	top:0;
	z-index: 11;
	background: #000;
}


#wrap header h1{
	max-width: 432px;
	width: 50%;
    position: absolute;
	left: 0px;
	top: 30px;
}

#wrap header h1 img{width: 100%;}

#wrap header h1 a {
	display: block;
    float: right;
}


#wrap header div.inner_left span{
    float:right;
	line-height: 70px;
    font-family: sans-serif;
	font-weight: bold;
}

#wrap header div.inner_left {
	float:left;
	color: #495256;
}

.button {
	position: relative;
	padding: 5px 15px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: .3s;
}

ul.menu li:last-child a.button{ padding-right: 0 ;}

/* .button:hover { color: #fff;}

.button::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #4a4c4e;
	transform-origin: left top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.button:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
	transition: 0.5s;
} */

@media screen and (max-width: 900px) {

	.button { padding: 5px 10px; }

}

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

	#wrap .hd_in {
		max-width: 1400px;
		width: calc(100% - 40px);
		margin: 0 auto;
		position: relative;
		height: 90px;
	}

}

@media screen and (max-width: 750px) {

	#wrap header {
		height: 60px;
		padding:0;
		position: fixed;
		top: 0;
		z-index: 100;
	}

	#wrap header h1 {
		width: 71%;
		position: absolute;
		left: 20px;
		top: 50%;
		margin-top: -2.5%;
	}

	#wrap header h1 a {
		display: block;
	}


	#wrap header div.inner_left { width: 100%;}
	#wrap header div.inner_left h1 {
		padding: 10px 0 0 10px;
		max-width: 125px;
		width: 34%;
		float: left;
	}

	#wrap header div.inner_left span{
		float:left;
		padding: 7px 0 0 10px;
		letter-spacing: 0;
	}


}

/*=====================================================================================
	ul.menu
=====================================================================================*/

ul.menu {
	overflow: hidden;
    /* padding-left: 30px; */
    position: absolute;
    top: 0;
    right: 0;
}

ul.menu li {
	float: left;
	line-height: 90px;
	font-size: 14px;
	/*padding: 0 15px;*/
}

ul.menu li:nth-child(-n+4) a { padding-bottom: 3px;}

ul.menu li a:hover {
	/*border-bottom: solid 1px;*/
	opacity: 1;
}

ul.menu li.entry {
	font-size: 20px;
	padding: 0 0 0 15px;
}

ul.menu li.entry a{
	display: block;
	color: #fff;
	background: #f00;
	padding: 0 25px;
	font-weight: bold;
	font-family: sans-serif;
}

@media screen and (max-width: 850px) and (min-width: 751px) {

	/* #wrap header h1 { right: 15px;}
	ul.menu { padding-left: 0;} */

}


/*=====================================================================================
	div#global
=====================================================================================*/

div#global{
	position: fixed;
	cursor: pointer;
	z-index: 101;
}

div#global > a {
	cursor: pointer;
	display: inline-block;
	position: relative;
	margin:0 auto;
}

div#global > a:hover{ opacity: 1;}

div#global > a > span {
	display: block;
	position: absolute;
	top: 44%;
	left: 50%;
	width: 27px;
	height: 2px;
	margin: 1px 0 0 -13px;
	background: #fff;
	transition: .2s;
}

div#global > a > span:nth-child(2) {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	transition: .2s;
}

div#global > a > span:before,
div#global > a > span:after {
	display: block;
	content: "";
	position: absolute;
	background: #fff;
	transition: .5s;
}

div#global > a > span.close {
	background: transparent;
	top: 50%;
}
div#global > a > span.close:before,
div#global > a > span.close:after { margin-top: -2px; background:#fff; }
div#global > a > span.close:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); height:115%; }
div#global > a > span.close:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); height:115%; }


/*====================================================================================
	div#panel
=====================================================================================*/

div#panel {
	width: 100%;
	height: 0;
	margin:0px auto;
	position: fixed !important;
	display: none;
	top:0;
	z-index: 100;
	background-color: rgba( 0,0,0,1);
}

div#panel > div > ul,
div#panel > div > menu,
div#panel > div > ol {
	font-size:150%;
	line-height:100%;
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha( opacity=0 );
}

div#panel > div > ul {
	width: 73px;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

div#panel > div > ul > li {
	width: 73px;
	height: 63px;
	display: block;
	overflow: hidden;
}

div#panel > menu {
	max-width: 600px;
	width: 100%;
	height:100%;
	position: absolute;
	overflow: hidden;
	top: 80px;
	left: 0;
	right: 0;
}

div#panel > menu > li { text-align: center; }

div#panel > menu a {
	position: relative;
	display:block;
	color: #fff;
	width: 90%;
	margin: 0 auto;
	text-align: right;
	padding: 13px 0;
	font-size:18px;
}

div#panel > menu a span {
	display: block;
	font-size:10px;
	line-height: 14px;
}

	div#panel > div li:last-child a { overflow: hidden;}


@media screen and (max-width: 750px){

	div#global {
		width: 60px;
		height: 60px;
		top: 0px;
		right: 0px;
	}

	div#panel > menu > li { font-size: 0.6em;	}

	div#global > a {
	    top: 0px;
    	right: 0px;
		width: 60px;
		height: 60px;
	}

	div#global > a > span {
		top: 50%;
		left: 45%;
		width: 30px;
		height:2px;
		margin: 0px 0px 0 -11px;
	}

	div#global > a > span:before, div#global > a > span:after {
		width: 30px;
		height:2px;
		top: 100%;
		left: 50%;
		margin-left: -49.5%;
	}

	div#global > a > span:before { margin-top: -12px;}
	div#global > a > span:after {margin-top: 8px;}

	div#panel > div a {
		padding: 9px 0;
	}

	div#panel > div a > img{
		padding: 0 10px 0;
	}

}


/*---------------------------------------------------------------------
						sec00
----------------------------------------------------------------------*/

.sec .inner {
    overflow: hidden;
    max-width: 1600px;
    margin: 0 auto;
}

.sec00 {
	margin-top: 90px;
	/* height: 301px; */
	margin-bottom: 80px;
}

#wrap .sec00 .inner{
	max-width: 100%;
	width: 100%;
	height: 301px;
	margin-bottom: 30px;
}

.sec00 .inner .ttl {
	text-align: center;
	color: #fff;
	padding-top: 100px;
}
/*
.sec00 h2,
.sec00 .ttl span{
    padding: 3px 20px;
} */

.sec00 h2{
	font-size: 40px;
	line-height: 120%;
	margin-bottom: 8px;
	font-weight: bold;
	letter-spacing: 5px;
}

.sec00 .ttl span{
	display: inline-block;
    font-size: 20px;
	letter-spacing: 1px;
}

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



}

@media screen and (max-width: 750px) {

	.sec00 { margin: 60px auto 0px;}

	#wrap .sec00 .inner{
		margin-bottom: 10px;
		height: auto;
		position: relative;
	}

	.sec00 .inner .ttl {
		margin-top: -8%;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		padding-top: 0;
	}

	.sec00 h2 {
		font-size: 7vw;
		line-height: 120%;
		margin-bottom: 3px;
	}

	#wrap .sec00 .ttl span{
		font-size: 5vw;
		letter-spacing: 1.8px;
	}

}


/*====================================================================================
	#pan
=====================================================================================*/

#wrap #pan {
	max-width:1400px;
	width: calc(100% - 40px);
	margin:0 auto;
}

#wrap #pan span{ padding:0 10px;}

@media screen and (max-width: 750px) {

	#wrap #pan { font-size: 12px;}

	#wrap #pan span{ padding:0 5px;}

}

/*====================================================================================
	main
=====================================================================================*/

main div.ttl {
	width: 25%;
	float: left;
}

main div.ttl h3{ margin: 147px 15% 0; }


main div.main_view {
	width: 75%;
	height: 100%;
	float: right;
}

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

	main {
		position: relative;
		display: block;
	}

}

@media screen and (max-width: 750px){


}

/*====================================================================================
	section
=====================================================================================*/

.sec {
	overflow: hidden;
	position: relative;
}

/* .in_wrap .sec01 { margin-top: -200px; } */


@media screen and (max-width: 750px) {


}


/*====================================================================================
	#pageTop
=====================================================================================*/

#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}


@media screen and (max-width: 640px) {


}

/*====================================================================================
	footer
=====================================================================================*/

footer {
	background-color:#000;
	color: #fff;
}

footer .inner {
	padding: 80px 0px;
	max-width: 1400px;
	margin: 0 auto;
	width: calc(100% - 40px);
	overflow: hidden;
}

footer .inner .info{
	float: left;
}

footer .info img {
	margin-bottom: 30px;
}

footer h3::before {
	content: "";
	width:41px;
	height: 32px;
	background-image: url("../../img/common/ft_logo.jpg");
	display: block;
	margin: 0 auto 5px;
}

footer .inner ul{
	overflow: hidden;
	float: right;
	margin: 0 auto;
}

footer .inner ul li{ float: left; }
footer .inner ul li:not(:last-child){ margin-right: 40px; }

footer .inner ul li a,
footer .info a{
	display: block;
	color: #fff;
}

footer small {
	font-size: 13px;
	padding: 0 0 20px;
	display: block;
	text-align: center;
}


@media screen and (max-width: 750px) {


	footer .info img {
		width: 100%;
		margin-bottom: 18px;
	}

	footer h3::before {
		width:39px;
		height: 31px;
		background-image: url("../../img/common/ft_logo_sp.jpg");
		background-size: contain;
		margin: 0 auto 10px;
	}
	footer .inner {
		padding: 55px 0 40px;
		display: table;
		width: auto;
	}

	footer .inner {
		width: calc(100% - 29%);
		margin: 0 auto;
	}
	footer small {
		font-size: 12px;
		line-height: 15px;
		border: none;
	}

}