@charset "UTF-8";

/*===========================================

HEADER

===========================================*/

@media screen and (min-width: 641px) { 
/* PC */
	main{
		display:block;
		margin-top:105px;
	}
	main:after {  
		content: ".";   
		display: block;   
		height: 0;   
		clear: both;   
		visibility: hidden;  
	}


	.menufr{
		width:100%;
		position:fixed;
		height:105px;
		overflow:hidden;
		padding:0;
		margin:0;
		border-bottom:solid 1px #a0a0a0;
		background-color:#fff;
		z-index:8000;
	}
	
	.menufr .menu{
		max-width:980px;
		width:100%;
		margin:0 auto;	
		position:relative;
		height:105px;
		overflow:hidden;
	}
	
	.drawer-nav,.drawer-nav-inner{
		height:105px;
		overflow:hidden;
	}
	
	.menuborder{
		width:0%;
		height:2px;
		position:absolute;
		bottom:30px;
		left:0;
		right:0;
		margin:auto;
		background-color:#000;
	}
	
	.menu h1{
		margin:0;
		padding:0;
		width:165px;
		height:40px;
		float:left;
	}
	
	.menu h1 a{
		display:block;
		position:absolute;
		margin:0;
		padding:0;
		width:165px;
		height:40px;
		text-indent:-9999px;
		background: url(/common/images/logo.svg) no-repeat 0 0;
		top:33px;
		left:0;
	}
	
	.menu ul.menuul{
		width:auto;
		height:105px;
		position:absolute;
		right:0;
		margin:0;
		padding:0;
		overflow:hidden;
	}
	
	.menu ul.menuul > li{
		float:left;
		text-align:center;
		position:relative;
		overflow:inherit;
	}
	
	.menu ul.menuul > li h2{
		margin:0;
		padding:0;
	}
	
	.menu ul.menuul > li > h2 > a{
		display:block;
		height:105px;
		line-height: 105px;
		background-color:#fff;
		overflow:hidden;
		padding:0 8px;
		font-weight:600;
		letter-spacing:0.1em;
		color:#000;
		background-position:bottom center;
	}
	
	.menu ul.menuul > li > h2 > a.activepc{
		background: url(/common/images/submenubg.png) no-repeat bottom center;
	}
	
	li.etc{
		margin:30px 0 0 0;
		border-left:solid 1px #d2d2d2;
		padding:11px 0 11px 0;
	}
	
	li.etc2{
		float:right!important;
	}
	
	.fb{
		display:block;
		width:23px;
		height:23px;
		float:left;
		margin:0 0 0 10px;
		background: url(/common/images/fb.png) no-repeat 0 0;
		text-indent:-99999px;
		background-color:#000;
	}
	
	.yt{
		display:block;
		width:23px;
		height:23px;
		float:left;
		margin:0 10px 0 10px;
		background: url(/common/images/yt.png) no-repeat 0 0;
		text-indent:-99999px;
		background-color:#000;
	}
	
	.etc1 a{
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		border-radius:13px;
		-moz-border-radius:13px;
		-webkit-border-radius:13px;
	}
	
	.notouch .etc1 a:hover{
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		border-radius:0px;
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
	}
	
	.touch .etc1 a.touchhover{
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		border-radius:0px;
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
	}
	
	.en{
		display:block;
		width:70px;
		height:23px;
		float:left;
		margin:0 0 0 10px;
		background: url(/common/images/en.png) no-repeat 0 0;
		text-indent:-99999px;
		background-color:#000;
	}
	
	.en .iconetc{
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}
	
	.submenufr{
		width:100%;
		top:104px;
		position:fixed;
		z-index:9000;
		display:none;
	}
	
	.submenufr a{
		font-weight:100;
	}
	
	.submenumain{
		width:100%;
		background-color:#000;
		opacity:0.88;
		padding:45px 0;
	}
	
	.submenu{
		width:980px;
		margin:0 auto 0 auto;
		border-right:solid 1px #fff;
		overflow:hidden;
	}
	
	.submenu-col1{
		width:143px;
		float:left;
	}
	
	.submenu-col1 .submenu-col1-title{
		margin:5px 0 0 0;
		padding:0;
	}
	
	.submenu-col2fr{
		width:836px;
		overflow:hidden;
		float:left;
		border-left:solid 1px #fff;
	}
	
	.submenu-col2{
		width:836px;
		padding:0;
		margin:20px 0 0 0;
	}
	.submenu-col2:first-child{
		margin:0;
	}
	
	.submenu-col2 .submenu-col2-title{
		width:273px;
		margin:10px 0 10px 0;
		padding:0 0 0 45px;
		float:left;
		background: url(/common/images/submenuar.png) no-repeat 30px 11px;
	}
	
	.submenu-col3{
		width:562px;
		float:left;
		border-left:solid 1px #fff;
		margin:0;
	}
	
	.submenu-col3-ul{
		margin:0;
		padding:10px 0 0 0;
		list-style:none;
	}
	
	.submenu-col3-ul li{
		padding:0 10px 0 45px;
		margin:0 0 10px 0;
		float:left;
		display:inline-block;
		background: url(/common/images/submenuar.png) no-repeat 30px 6x;
	}
	
	.submenu-col2-title,.submenu-col3-title{
		margin:0;
		padding:0;
	}
	
	.submenuclose{
		width:100%;
		height:40px;
		background-color:#666;
		position:relative;
		text-align:center;
	}
	
	.submenuclose a{
		width:100%;
		height:40px;
		overflow:hidden;
		display:block;
	}
	.submenuclosebutton,
	.submenuclosebutton span {
		display: inline-block;
		position:relative;
		width:30px;
		height:20px;
	}
	
	.submenuclosebutton span {
		position:absolute;
		width: 14px;
		height: 3px;
		top:16px;
		left:9px;
		color:#fff;
		background-color:#fff;
	}
	
	.submenuclosebutton span:nth-of-type(1) {
		-webkit-transform: translateX(-4px) translateY(-0px) rotate(-45deg);
		transform: translateX(-4px) translateY(-0px) rotate(-45deg);
		-webkit-transition: all .1s ease;
		-ms-transition: all .1s ease;
		-moz-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
	}
	
	.submenuclosebutton span:nth-of-type(2) {
		-webkit-transform: translateX(4px) translateY(-0px) rotate(45deg);
		transform: translateX(4px) translateY(-0px) rotate(45deg);
		-webkit-transition: all .1s ease;
		-ms-transition: all .1s ease;
		-moz-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
	}
}

@media screen and (max-width: 640px) {
/* SP */
	.menufr{
		width:100%;
		height:105px;
		position:fixed;
		text-align:left;
		clear:both;
		z-index:9000;
		background-color:#fff;
		border-bottom:solid 1px #a0a0a0;
	}
	
	.menufr .menu{
		width:100%;
	}
	
	.menu h1{
		margin:0;
		padding:0;
		width:165px;
		height:40px;
		float:left;
	}
	
	.menu h1 a{
		display:block;
		position:absolute;
		margin:0;
		padding:0;
		width:165px;
		height:40px;
		text-indent:-9999px;
		background: url(/common/images/logo.svg) no-repeat 0 0;
		top:33px;
		left:5vw;
	}
	
	.menu ul.menuul{
		width:100%;
		height:auto;
		margin:0 0 0 0;
		padding:0 0 150px 0;
		-webkit-overflow-scrolling:touch;
	}
	
	.menu ul.menuul > li{
		text-align:left;
		padding:0;
		position:relative;
		overflow:inherit;
		opacity:1;
	}
	
	.menu ul.menuul > li:first-child{
		border-top:none;
	}
	
	.menu ul.menuul > li h2{
		margin:0;
		padding:0;
	}
	
	.menu ul.menuul > li > h2 > a{
		display:block;
		overflow:hidden;
		letter-spacing:0.1em;
		padding:22px 0 22px 12vw;
		font-size:3.5vw!important;
	}
	
	.menu ul.menuul > li > h2 > a{
		background-color:#000;
		color:#fff;
		border-top:solid 3px #fff;
	}
	
	.menu ul.menuul > li > h2 > a.active{
		background-color:#fff;
		color:#000;
		border-top:none;
	}
	
	.menu ul.menuul > li.etc2 > a > span{
		font-size:3.5vw!important;
	}
	
	li.etc{
		font-size:4vw;
	}
	
	.menu ul.menuul > li.etc1{
		text-align:left;
		margin:0;
		padding:30px 0 0 9vw;
		border-top:solid 3px #fff;
	}
	
	.menu ul.menuul > li.etc2{
		border-top:none;
		padding:15px 0 0 9vw;
	}
	
	.menu ul.menuul > li.etc1 a{
		display:inline-block;
		font-size:3.5vw!important;
	}
	
	.notouch .etc1 a:hover{
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		border-radius:0px;
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
	}
	
	.touch .etc1 a.touchhover{
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		border-radius:0px;
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
	}
	
	.fb{
		display:block;
		width:40px;
		height:40px;
		margin:0 0 0 10px;
		background: url(/common/images/fb_b.png) no-repeat 0 0;
		text-indent:-99999px;
		background-color:#fff;
		border-radius:20px;
		-moz-border-radius:20px;
		-webkit-border-radius:20px;
		background-size:cover;
	}
	
	.yt{
		display:block;
		width:40px;
		height:40px;
		margin:0 10px 0 10px;
		background: url(/common/images/yt_b.png) no-repeat 0 0;
		text-indent:-99999px;
		background-color:#fff;
		border-radius:20px;
		-moz-border-radius:20px;
		-webkit-border-radius:20px;
		background-size:cover;
	}
	
	.en{
		display:block;
		width:100px;
		height:33px;
		float:left;
		margin:10px 0 0 10px;
		background: url(/common/images/en_b.png) no-repeat 0 0;
		text-indent:-99999px;
		background-color:#fff;
		background-size:cover;
	}
	
	.splogo{
		width:100%;
		height:105px;
		text-indent:-99999px;
		margin:0!important;
	}
	
	.splogo a{
		width:100%;
		height:105px;
		display:block;
		letter-spacing:0.1em;
		margin:0 auto!important;
		padding:0!important;
	}

	.splogo a span{
		display:block;
		width:165px;
		height:40px;
		margin:0 auto 0 auto!important;
		padding:0!important;
		background: url(/common/images/logo_w.svg) no-repeat 0 0;
		background-size: 165px 40px;
		position:absolute;
		top:33px;
		left:5vw;
	}
	
	.menu-triggerfr{
		width:39px;
		height:39px;
		position:fixed;
		right:25px;
		top:31px;
		padding:20px;
		z-index:9500;
		background-color:#fff;
	}
	
	.menu-triggerfr:hover{
		cursor:pointer;
	}

	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	
	.menu-trigger {
		position:absolute;
		top:9px;
		left:0;
		right:0;
		width: 28px;
		margin:auto;
		height: 23px;
		z-index:9000;
		display:block;
	}
	
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #000;
	}
	
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	
	.menu-trigger span:nth-of-type(2) {
		top: 0;
		bottom:0;
		margin:auto;
	}
	
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	
	.menu-triggerfr.active .menu-trigger span{
		background-color:#000;	
	}
	
	.menu-triggerfr.active .menu-trigger span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(-315deg);
		transform: translateY(10px) rotate(-315deg);
	}
	
	.menu-triggerfr.active .menu-trigger span:nth-of-type(2) {
		opacity: 0;
	}
	
	.menu-triggerfr.active .menu-trigger span:nth-of-type(3) {
		-webkit-transform: translateY(-10px) rotate(315deg);
		transform: translateY(-10px) rotate(315deg);
	}
	
	.menu-triggerfr.load .menu-trigger span:nth-of-type(1) {
		-webkit-transform: translateY(0) rotate(0deg);
		transform: translateY(0) rotate(0deg);
		-webkit-transition: all .0s ease;
		-ms-transition: all 0s ease;
		-moz-transition: all 0s ease;
		-o-transition: all 0s ease;
		transition: all 0s ease;
	}
	
	.menu-triggerfr.load .menu-trigger span:nth-of-type(2) {
		opacity: 1;
		-webkit-transition: all .0s ease;
		-ms-transition: all 0s ease;
		-moz-transition: all 0s ease;
		-o-transition: all 0s ease;
		transition: all 0s ease;
	}
	
	.menu-triggerfr.load .menu-trigger span:nth-of-type(3) {
		-webkit-transform: translateY(0) rotate(0deg);
		transform: translateY(0) rotate(0deg);
		-webkit-transition: all .0s ease;
		-ms-transition: all 0s ease;
		-moz-transition: all 0s ease;
		-o-transition: all 0s ease;
		transition: all 0s ease;
	}
	
	/***************
	
	ドロワーメニュー動作
	
	****************/
	.drawer-nav{
		position:fixed;
		z-index: 500;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-transition: all .1s ease;
		-ms-transition: all .1s ease;
		-moz-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
/*		-webkit-overflow-scrolling:none;*/
	}
	
	.drawer-nav.active{
		position:fixed;
		z-index: 500;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-transition: all .1s ease;
		-ms-transition: all .1s ease;
		-moz-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
/*		-webkit-overflow-scrolling: touch;*/
	}
	
	.drawer-nav.load{
		top: -100%;
		-webkit-transition: all .0s ease;
		-ms-transition: all 0s ease;
		-moz-transition: all 0s ease;
		-o-transition: all 0s ease;
		transition: all 0s ease;
/*		-webkit-overflow-scrolling: touch;*/
	}
	
	.drawer-nav a{
		opacity:1;
	}
	
	.drawer-open .drawer-overlay {
		display:block;
	}
	
	.drawer-nav-inner{
		margin:0;
		padding:0;
		position:relative;
		z-index:8100!important;
		height: 100%;
		overflow:hidden;
/*		-webkit-overflow-scrolling:touch;*/
	}
	
	.drawer-overlay {
		position: fixed;
		z-index: 8000;
		top: 0;
		left: 0;
		display: none;
		width: 100%;
		height: 100%;
	}
	
	.drawer-open .drawer-overlay {
		display:block;
	}
	
	.drawer-bg{
		width:100%;
		height:100%;
		overflow:hidden;
		position:absolute;
		z-index:1000!important;
		opacity:1;
		background-color:#000;
		background-size:cover cover;
	}
	
	.drawer-dropdown{
		display:none;
	}
	
	.drawer-dropdown-menu{
		width: 100%;
		margin:0 0 50px 0;
		padding:0;
		display:none;
	}
	
	.drawer-dropdown-menu li{
		position:relative;
	}
	
	.drawer-dropdown-menu li a{
		display:block;
		width: 100%;
		margin:0;
		padding:0;
		color:#fff;
		padding:5px 0 5px 12vw;
	}
	
	.submenu-trigger,
	.submenu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	
	.submenu-trigger {
		display:block;
		position:absolute;
		top:0;
		right: 0;
		width:70px;
		height:100%;
	}
	
	.submenu-trigger span {
		position:absolute;
		width: 14px;
		height: 3px;
		top:41px;
		left:20px;
		color:#fff;
		background-color: #fff;
	}
	
	.submenu-trigger.active span{
		background-color:#000;	
	}
	
	.submenu-trigger span:nth-of-type(1) {
		-webkit-transform: translateX(-4px) translateY(-0px) rotate(45deg);
		transform: translateX(-4px) translateY(-0px) rotate(45deg);
		-webkit-transition: all .1s ease;
		-ms-transition: all .1s ease;
		-moz-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
	}
	
	.submenu-trigger span:nth-of-type(2) {
		-webkit-transform: translateX(4px) translateY(-0px) rotate(-45deg);
		transform: translateX(4px) translateY(-0px) rotate(-45deg);
		-webkit-transition: all .1s ease;
		-ms-transition: all .1s ease;
		-moz-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
	}
	
	.submenu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateX(-4px) translateY(-0px) rotate(-45deg);
		transform: translateX(-4px) translateY(-0px) rotate(-45deg);
		-webkit-transition: all .1s ease;
		-ms-transition: all .1s ease;
		-moz-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
	}
	
	.submenu-trigger.active span:nth-of-type(2) {
		-webkit-transform: translateX(4px) translateY(-0px) rotate(45deg);
		transform: translateX(4px) translateY(-0px) rotate(45deg);
		-webkit-transition: all .1s ease;
		-ms-transition: all .1s ease;
		-moz-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
	}
	
	.drawer-dropdown-menu h4 span{
		display:block;
		width:85%;
		height:1px;
		margin:0 auto;
		background-color:#fff;
	}
	
	.drawer-dropdown-menu-other > li{
		padding:0 0 20px 0;
	}
	
	.drawer-dropdown-submenu > li a{
		padding-left:19vw;
		background: url(/common/images/menuar.png) no-repeat 15vw center;
	}
}

@media screen and (min-width: 641px) and  (max-width:870px){
	.etc1,.etc2{
		display:none;
	}
}