@charset "utf-8";
html,body {background-color: #FFF; text-align: left; font-size: 16px; color:#111; line-height:100%;}
html,body {font-family: '游明朝', YuMincho , '游明朝体' , 'Yu Mincho' , 'Noto Serif JP', serif;}
/*html,body {font-family: 'Noto Serif JP', serif;}*/
/*html,body {font-feature-settings: 'palt'; letter-spacing: 0.2px;}*/
html,body {height: 100%;}

a {color:#000;}

@media screen and (min-width : 1000px ){
	.sp {display: none;}
}

@media screen and (max-width : 999px ){
  .pc {display: none;}
	body {-webkit-text-size-adjust: 100%;}
}

/*フォームのエラーの色*/
.msg {color:#FF3D00}

/*-------------------------------
onmouse
-------------------------------*/
.rollover:hover {opacity: 0.7; transition: all 0.4s; cursor: pointer}

#wrapper {height:100%}

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

header {position: fixed; width: 100%; height: 80px; background-color: #FFFFFF; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); z-index: 1100; top:0; left:0;}

h1 {position: fixed; left: 24px; top: 25px;}
h1 img{height: 32px}

@media screen and (max-width : 1279px ){
	header {height: 60px;}
	h1 {left: 50%; top: 14px;}
	h1 img{transform: translateX(-50%); height: 36px}
}

/*-------------------------------
menu
-------------------------------*/
.fixed {position: fixed; width: 100%; height: 100%;}

nav {position: fixed; width: 100%; z-index: 1200;}

nav #drawer {display: flex; justify-content: flex-end;}

nav #drawer .list {display: flex; font-size: 14px;}
nav #drawer .list > li {display: block; margin:0 10px; height: 80px; line-height: 80px}
nav #drawer .list > li a {text-decoration: none; display:inline-block; height: 80px;}
nav #drawer .list li a:hover {color: #FF3D00; transition: all 0.4s;}
nav #drawer .list .current {border-bottom: solid 4px #FF3D00; box-sizing:border-box;}

nav #drawer .lang {font-family: 'Roboto', sans-serif; display: flex; align-items: center; height: 80px; padding: 0 16px; background-color: #F0F0F0;}
nav #drawer .lang .select {color: #FF3D00;}
nav #drawer .lang span {display: block; margin:0 6px; height: 80px; line-height: 80px}
nav #drawer .lang .line {height: 16px; width: 1px; background-color: #000;}
nav #drawer .lang span a {text-decoration:none; display:inline-block; height: 80px;}
nav #drawer .lang a:hover {color: #FF3D00; transition: all 0.4s;}

nav #drawer #sns ul {display: flex; align-items: center; height: 80px; margin:0 20px;}
nav #drawer #sns ul li a {display: block; width: 28px; margin: 0 20px 0 0;}

@media screen and (max-width : 1279px ){
	
	nav {z-index: 1000;}
	
	nav #drawer {width: 100%; background-color: #FFF; position: fixed; height: 100%; top: 0; left: 0; overflow-y: scroll; display: none; flex-flow: column; }
	
	
	nav #drawer .list {flex-flow: column; text-align: center; font-size: 16px; padding-top: 100px}
	nav #drawer .list > li {margin:0 0 24px; height: auto; line-height: 1em;}
	nav #drawer .list li a {height: auto; padding-bottom: 8px;}
	nav #drawer .list .current {border-bottom: solid 2px #FF3D00;}
	
	nav #drawer .lang {background-color: #FFF; padding-bottom: 20px; justify-content: center; font-size: 20px;}
	nav #drawer .lang span {margin:0 8px;}
	nav #drawer .lang .line {height: 20px;}
	
	nav #drawer #sns ul {justify-content: space-between; width: 100px; margin: 0 auto; height: 60px; }
	nav #drawer #sns ul li a {width: 36px; margin:0;}
	nav #drawer #sns ul li a img {width: auto; height:36px;}
	
	header .menu {height: 60px; width: 60px; display: block; position: fixed; top: 0; right: 0;}
	header .menu:hover {cursor: pointer;}
	header .menu .menuInner span{width: 24px; height: 2px; display: block; position: relative; margin:28px 18px 0 ; background-color: #FF3D00; transition: transform 0.4s;}
	header .menu .menuInner span:before, header .menu .menuInner span:after {content: ''; display: block; position: absolute; height: 2px; width: 24px; background-color: #FF3D00; transition: transform 0.4s;}
	
	header .menu .menuInner span:before {transform: translateY(-7px);}
	header .menu .menuInner span:after {transform: translateY(7px);}
	header .menu.active .menuInner span {background-color: #FFF}
	header .menu.active .menuInner span:before {transform: rotate(45deg)}
	header .menu.active .menuInner span:after {transform: rotate(-45deg)}
	

}


/*-------------------------------
Banner
-------------------------------*/
#BannerArea {padding: 80px 0;}
#BannerArea .BannerInn {display: flex; justify-content: center; width: 960px; margin: 0 auto;}

@media screen and (max-width : 999px ){
	#BannerArea {padding: 48px 0;}
	#BannerArea .BannerInn {flex-flow:column;  width: 90%;}
	#BannerArea .BannerInn img {width: 100%; height: auto}
}

/*-------------------------------
Footer
-------------------------------*/
footer {font-size: 14px; color: #FFF; text-align: center; width: 100%; height: 48px; line-height: 48px; background-color: #FF3D00;}

@media screen and (max-width : 999px ){
	
	footer {font-size: 12px;}
}