@charset "UTF-8";

/*-------------------------------------
 
 header

--------------------------------------*/
#header {height: 94px; padding: 25px 0 0 0;position: relative;}
#header h1 {padding: 0 0 0 30px;}
#header .ham {display: none;}
#header .hamnav {display: none;}

#header .bannerbox {position:absolute;top:18px;right:30px;}
#header .bannerbox ul,#header .bannerbox li {margin:0;padding:0;}
#header .bannerbox li {background: #231815;}
#header .bannerbox li a {display: table-cell; width: 250px; height: 40px; vertical-align: middle; text-align: center;}
#header .bannerbox li a:first-child {border-bottom: 1px solid #fff;}
#header .bannerbox li a i {margin-right: 5px;color:#fff!important;}
#header .bannerbox li a span {font-size: 14px;font-weight: bold;color:#fff!important;font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;font-weight:bold;}


/*-------------------------------------
 
 mainsec

--------------------------------------*/
#mainsec {background: #dfdfdf; position: relative; width: 100%; height: 600px; overflow: hidden;}
#mainsec .copyarea {/*width: 1220px; margin: 0 auto;*/position: absolute; top: 0; left: 0; z-index: 100!important;}
#mainsec .copyarea .inner {width: 1110px; padding-left: 110px; margin: 0 auto; padding-top: 100px;}
#mainsec .copyarea .btn {width: 250px; height: 56px; background: #fff; display: none; margin-top: 326px;}
#mainsec .copyarea .btn a {display: table-cell; width: 250px; height: 56px; vertical-align: middle; text-align: center;}
#mainsec .copyarea .btn a i {margin-right: 5px;}
#mainsec .copyarea .btn a span {font-size: 20px;}
#mainsec .copyarea .inner .btnbox {
	display: none;
}

#mainsec #copy {position: relative;}
#mainsec #copy .copyw {position: absolute; top: 0; left: 0; display: none;}
#mainsec #copy .copyb {position: absolute; top: 0; left: 0; display: none;}
#mainsec #copy .copy01 {width: 500px; height: 175px; margin-bottom: 40px;}
#mainsec #copy .copy02 {width: 546px; height: 71px; margin-bottom: 40px;}

#mainsec #viewer {background: #fff;}
#mainsec #viewer img {width: 100%; height: 600px; position: absolute; top: 0; left: z-index: 1; background-size: cover;}
#mainsec #viewer img.img01 {background-image: url(../image/index/main01.jpg);}
#mainsec #viewer img.img02 {background-image: url(../image/index/main02.jpg);}
#mainsec #viewer img.img03 {background-image: url(../image/index/main03.jpg);}
/*-------------------------------------
 
 nav

--------------------------------------*/
#nav {background: url(../image/index/bg_nav.gif) repeat-x; border-bottom: 1px solid #dfdfdf; margin-bottom: 40px;}
#nav ul {border-top: 5px solid #2b2b2b; width: 1220px; margin: 0 auto;}
#nav ul li {float: left; width: 20%;}
#nav ul li a {display: block;}
#nav ul li span.listinner {height: 75px; background: #fff; display: table-cell; vertical-align: middle; width: 9999px;}
#nav ul li span.listinner span {display: block; text-align: center;}
#nav ul li span.listinner span.en {font-size: 21px; font-family: BebasNeue Bold; letter-spacing: 0.1em; margin-bottom: 3px;}
#nav ul li span.listinner span.jp {color: #8c8c8c; font-size: 12px; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;font-weight:bold;}

#nav ul li.li01 span.listinner {border-left: 1px solid #dfdfdf;}
#nav ul li.li02 span.listinner {border-left: 1px solid #dfdfdf;}
#nav ul li.li03 span.listinner {border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; width: 9999px;}
#nav ul li.li04 span.listinner {border-right: 1px solid #dfdfdf;}
#nav ul li.li05 span.listinner {border-right: 1px solid #dfdfdf;}

#nav ul li.now span.listinner span.en {color: #8c8c8c;}

/*-------------------------------------
 
 contents

--------------------------------------*/
#contents {width: 1220px; margin: 0 auto 120px;}
#contents .sectit {font-size: 36px; margin-bottom: 15px; font-family: BebasNeue Bold; letter-spacing: 0.1em;}
/*-------------------------------------
 contents/nav02
--------------------------------------*/
#nav02 {margin-bottom: 60px;}
#nav02 ul {}
#nav02 ul li {float: left; width: 304px;}
#nav02 ul li a {display: block; height: 71px; background: #8e8e8e;}
#nav02 ul li a span {
	height: 71px; 
	display: table-cell; 
	vertical-align: middle; 
	width: 303px; 
	text-align: center; 
	color: #fff; 
	font-size: 20px;
	line-height: 130%;
	background: url(../image/index/nv02_arw.png) no-repeat right bottom;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;font-weight:bold;
	letter-spacing: 0.15em;
 }

#nav02 ul li.li02 a {}
#nav02 ul li.li03 a {border-left: 1px solid #e0dcdb; border-right: 1px solid #e0dcdb; width: 302px;}
#nav02 ul li.li04 a {border-right: 1px solid #e0dcdb;}
#nav02 ul li.li05 a {}
#nav02 ul li.li01 a span {font-size: 18px;}
#nav02 ul li.li02 a span {font-size: 18px;}
#nav02 ul li.li03 a span {font-size: 18px;}
#nav02 ul li.li04 a span {font-size: 18px;}
#nav02 ul li.li05 a span {font-size: 18px;}
#nav02 ul li span.txt {display: block; height: 170px; padding: 15px 20px; line-height: 180%; font-size: 14px; letter-spacing: -0.05em;}
#nav02 ul li.li02 span.txt {background: url("../image/index/nv02_bg02_wide.jpg") no-repeat;}
#nav02 ul li.li03 span.txt {background: url("../image/index/nv02_bg03_wide.jpg") no-repeat;}
#nav02 ul li.li04 span.txt {background: url("../image/index/nv02_bg04_wide.jpg") no-repeat;}
#nav02 ul li.li05 span.txt {background: url("../image/index/nv02_bg05_wide.jpg") no-repeat;border-right: 1px solid #e0dcdb;}
/*-------------------------------------
 contents/infosec
--------------------------------------*/
#infosec {width: 860px; float: left;}
#infosec .inner {height: 300px; position: relative; border-top: 1px solid #dfdfdf;}
#infosec .inner dl {overflow: hidden; _zoom: 1; border-bottom: 1px solid #dfdfdf;}
#infosec .inner dl dt {float: left; width: 140px; font-size: 16px; padding: 30px 0;}
#infosec .inner dl dd {overflow: hidden; _zoom: 1; font-size: 16px; padding: 30px 0;}
#infosec .inner dl dd a {text-decoration: underline; font-size: 16px;}
#infosec .inner .archive {position: absolute; right: 0; bottom: 0;}
#infosec .inner .archive i {margin-right: 5px;}
#infosec .inner .archive span {font-size: 24px; border-bottom: 1px solid #2b2b2b; padding: 0 0 5px 0;}
/*-------------------------------------
 contents/groupsec
--------------------------------------*/
#groupsec {width: 320px; float: right;}
#groupsec .inner {height: 300px; border-top: 1px solid #dfdfdf; background: #efefef; border-bottom: 1px solid #dfdfdf; background: #efefef;}
#groupsec .inner ul {padding-top: 19px; width: 280px; margin: 0 auto;}
#groupsec .inner ul li {text-align: center; margin-bottom: 10px; background: #fff;}
#groupsec .inner ul li img {vertical-align: bottom;}
/*-------------------------------------
 
 footer

--------------------------------------*/
#footer .inner {width: 1220px; margin: 0 auto;}
/*-------------------------------------
 footer/footer01
--------------------------------------*/
#footer .footer01 {background: #ddd;}
#footer .footer01 ul {float: left;}
#footer .footer01 ul li {float: left; height: 87px; line-height: 87px; margin-right: 35px;}
#footer .footer01 ul li a {font-size: 14px;}
#footer .footer01 .copyright {
	float: right; 
	height: 87px; 
	line-height: 87px; 
	font-size: 14px; 
	font-family: BebasNeue Bold; 
	letter-spacing: 0.1em;
	color: #8c8c8c;
}
/*-------------------------------------
 footer/footer02
--------------------------------------*/
#footer .footer02 {background: #2b2b2b; height: 300px;}
#footer .footer02 a {color: #fff;}
#footer .footer02 i {color: #fff; margin: 0 7px 0 0;}
#footer .footer02 .box {float: left; padding-top: 40px;}
#footer .footer02 .box.box01 {width: 225px;}
#footer .footer02 .box.box02 {width: 270px;}
#footer .footer02 p {margin-bottom: 10px; line-height: 100%;}
#footer .footer02 p span {color: #fff; font-size: 14px;}
#footer .footer02 li {margin-bottom: 10px; line-height: 100%; padding: 0 0 0 30px;}
#footer .footer02 li a {font-size: 14px;}
#footer .footer02 p.mb {margin-bottom: 20px;}
#footer .footer02 li.mb {margin-bottom: 20px;}
#footer .footer02  #pagetop {float: right; height: 300px; line-height: 300px; margin-bottom: 0;}
#footer .footer02  #pagetop img {vertical-align: middle;}

/*************************************

	mq

	※共通部分(header, nav, footer)はpage.cssをコピペしてくること
		修正した時に注意


***************************************/
@media screen and (max-width: 768px) {

	/*-------------------------------------
	
	header

	--------------------------------------*/	
	#header {
		height: 70px;
		padding: 0;
		position: relative;
		z-index: 999;
		background-color: #fff;
	}
	#header h1 {
		padding: 15px 20px 10px 10px;
	}
	#header h1 a {
		display: inline-block;
	}
	#header h1 img {
		height: 45px;
		width: auto;
		display: block;
	}
	#header .bannerbox {display: none;}
	#header .ham {
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 20px;
		width: 23px;
		height: 16px;
		cursor: pointer;
	}
	#header .ham .bar {
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;	
		border-radius: 2px;
		background-color: #2B2B2B;
		transition: 300ms;
	}
	#header .ham .bar01 {
		top: 0;
	}
	#header .ham .bar02 {
		top: 50%;
		transform: translateY(-50%);
	}
	#header .ham .bar03 {
		bottom: 0;
	}
	#header .ham.is-open .bar01 {
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}
	#header .ham.is-open .bar02 {
		opacity: 0;
	}
	#header .ham.is-open .bar03 {
		bottom: 50%;
		transform: translateY(50%) rotate(-45deg);
	}
	#header .hamnav {
		position: absolute;
		top: 70px;
		left: 0;
		width: 100%;
		min-height: 100vh;
		background-color: #2B2B2B;
		z-index: 10;
	}
	#header .hamnav .list {
		padding: 40px 30px;
	}
	#header .hamnav .list > .item {
		position: relative;
	}
	#header .hamnav .list > .item > .link {
		color: #fff;
		font-size: 15px;
		font-weight: bold;
		display: block;
	}
	#header .hamnav .list > .item:not(:first-of-type) {
		margin-top: 18px;
		border-top: 1px solid #fff;
		padding-top: 18px;
	}
	#header .hamnav .list > .item > ul {
		padding-left: 30px;
		display: none;
	}
	#header .hamnav .list > .item  > ul > li > a {
		color: #fff;
		font-size: 15px;
		margin-top: 15px;
		display: block;
	}
	#header .hamnav .list > .item.has-child {
		transition: opacity 300ms;
	}
	#header .hamnav .list > .item.has-child::before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 25px;
		right: 14px;
		width: 1px;
		height: 12px;
		background-color: #fff;
		transition: opacity 0.3s;
	}
	#header .hamnav .list > .item.has-child::after {
		content: '';
		display: inline-block;
		position: absolute;
		top: 31px;
		right: 8px;
		width: 12px;
		height: 1px;
		background-color: #fff;
	}
	#header .hamnav .list > .item.has-child.is-active::before {
		opacity: 0;
	}	
	#header .hamnav .list > .itembox {
		margin-top: 35px;
	}
	#header .hamnav .list > .itembox > .itemsm {
		margin-top: 15px;
	}
	#header .hamnav .list > .itembox > .itemsm > .linksm {
		color: #fff;
		font-size: 12px;
	}

	/*-------------------------------------
	
	nav

	--------------------------------------*/
	#nav {
		display: none;
	}
	/*-------------------------------------
 
	mainsec

	--------------------------------------*/
	#mainsec {
		/* height: 160px;
		height: 240px; */
		height: 64vw;
		background-color: #fff;
	}
	#mainsec .copyarea .inner {
		width: 100%;
		padding: 0;
	}	
	#mainsec #copy .copyw {
		width: 100%;
	}
	#mainsec #copy .copyb {
		width: 100%;
	}
	#mainsec #copy .copy01 {
		width: 100%;
		height: auto;
		margin-bottom: 0;
	}
	#mainsec #copy .copy01 img {
		width: 100%;
		padding: 30px 60px 30px 20px;
		box-sizing: border-box;
	}
	#mainsec #copy .copy02 {
		display: none;
	}
	#mainsec .copyarea .btn {		
		display: none !important;
	}
	#mainsec #viewer img {
		/* height: 160px; */
		height: 43vw;
	}
	#mainsec .copyarea .inner .btnbox {
		display: block;
		padding: 46.5vw 15px 15px 15px; /* 46.5vw = 175px */
	}
	#mainsec .btnbox .btnsp {
		width: 50%;
		float: left;
		box-sizing: border-box;
	}
	#mainsec .btnbox .btnsp:nth-of-type(1) {
		padding-right: 5px;
	}
	#mainsec .btnbox .btnsp:nth-of-type(2) {
		padding-left: 5px;
	}	
	#mainsec .btnbox .btnsp a {
		padding: 15px 0;
		display: block;
		background-color: #2B2B2B;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		color: #fff;
		letter-spacing: 0.05em;
	}
	#mainsec .btnbox .btnsp a i {
		color: #fff;
		margin-right: 2px;
	}

	/*-------------------------------------
	
	contents

	--------------------------------------*/		
	#contents {
		width: 100%;
		padding: 20px 15px 0;
		border-top: 1px solid #DFDFDF;
		box-sizing: border-box;
		margin-bottom: 60px;
	}
	#contents .sectit {
		font-size: 28px;
		margin-bottom: 10px;
	}
	/*-------------------------------------
	contents/nav02
	--------------------------------------*/	
	#nav02 {
		margin-bottom: 40px;
	}
	#nav02 ul li {
		width: 50%;
	}
	#nav02 ul li a {
		height: 54px;
	}
	#nav02 ul li a span {
		width: 9999px;/* = 100% */
		height: 54px;
	}
	#nav02 ul li.li03 a {
		width: 100%;
	}
	#nav02 ul li.li01 a span {
		font-size: 14px;
	}
	#nav02 ul li.li02 a span {
		font-size: 14px;
	}
	#nav02 ul li.li03 a span {
		font-size: 14px;
	}
	#nav02 ul li.li04 a span {
		font-size: 14px;
	}
	#nav02 ul li.li05 a span {
		font-size: 14px;
	} 
	#nav02 ul li.li01 span.txt {
		line-height: 150%;
    background: url(../image/index/nv02_bg01.jpg) no-repeat center center;
		background-size: 100% auto;	
	}
	#nav02 ul li.li02 span.txt {
		line-height: 150%;
    background: url(../image/index/nv02_bg02.jpg) no-repeat center center;
		background-size: 100% auto;	
	}
	#nav02 ul li.li03 span.txt {
		line-height: 150%;
    background: url(../image/index/nv02_bg03.jpg) no-repeat center center;
		background-size: 100% auto;	
	}
	#nav02 ul li.li04 span.txt {
		line-height: 150%;
    background: url(../image/index/nv02_bg04.jpg) no-repeat center center;
		background-size: 100% auto;	
	}
	#nav02 ul li.li05 span.txt {
		line-height: 150%;
    background: url(../image/index/nv02_bg05.jpg) no-repeat center center;
		background-size: 100% auto;	
	} 
	#nav02 ul li span.txt {
		padding: 10px;
		font-size: 11px;
		height: 154px;
		box-sizing: border-box;
	}
	/*-------------------------------------
	contents/infosec
	--------------------------------------*/	
	#infosec {
		width: 100%;
	}
	#infosec .inner {
		height: auto;
	}
	#infosec .inner dl dt {
		width: 100%;
		float: none;
		font-size: 11px;
		padding: 12px 0 7px;
	}
	#infosec .inner dl dd {
		width: 100%;
		float: none;
		padding: 0 0 12px 0;
	}
	#infosec .inner dl dd a {
		font-size: 13px;
		text-decoration: none;
		display: block;
	}
	#infosec .inner .archive {
		position: static;
		margin-top: 20px;
		text-align: right;
	}
	/*-------------------------------------
	contents/groupsec
	--------------------------------------*/	
	#groupsec {
		width: 100%;
		margin-top: 30px;
	}
	/*-------------------------------------
	
	footer

	--------------------------------------*/	
	#footer .inner {
		width: 100%;
	}
	#footer .inner::after {
		display: none;
	}
	#footer .footer01 ul {
		padding: 20px 15px 10px;
		background-color: #DDDDDD;
		width: 100%;
		box-sizing: border-box;
	}
	#footer .footer01 ul li {
		height: auto;
		line-height: inherit;
		margin: 0 20px 5px 0;
	}
	#footer .footer01 ul li a {
		font-size: 12px;
	}
	#footer .footer01 .copyright {
		height: auto;
		line-height: inherit;
		background-color: #2B2B2B;
		padding: 15px 0;
		text-align: center;
		font-size: 13px;
		color: #fff;
		width: 100%;
	}
	/*-------------------------------------
	
	footer

	--------------------------------------*/	
	#footer .inner {
		width: 100%;
	}
	#footer .inner::after {
		display: none;
	}
	#footer .footer01 ul {
		padding: 20px 15px 10px;
		background-color: #DDDDDD;
		width: 100%;
		box-sizing: border-box;
	}
	#footer .footer01 ul li {
		height: auto;
		line-height: inherit;
		margin: 0 20px 5px 0;
	}
	#footer .footer01 ul li a {
		font-size: 12px;
	}
	#footer .footer01 .copyright {
		height: auto;
		line-height: inherit;
		background-color: #2B2B2B;
		padding: 15px 0;
		text-align: center;
		font-size: 13px;
		color: #fff;
		width: 100%;
	}
	/*-------------------------------------
	footer/footer02
	--------------------------------------*/	
	#footer .footer02 {
		height: auto;
		position: relative;
	}
	#footer .footer02 .box {
		display: none;
	}
	#footer .footer02 #pagetop {
		height: auto;
		float: none;
		line-height: inherit;
	}	
	#footer .footer02 #pagetop .pc {
		display: none;
	}
	#footer .footer02 #pagetop .sp {
		display: inline;
		position: absolute;
		top: 20px;
		right: 20px;

	}
	/*-------------------------------------
	utility
	--------------------------------------*/	
	.only-pc {
		display: none;
	}
	.only-sp {
		display: block;
	}
}