@charset "utf-8";
/* nav.css */

/* lang
------------------------------------------------------------*/
.nav-area {
	transform: translateZ(0) translateX(100%)!important;
}
.js_humburgerOpen .nav-area {
	transform: translateZ(0) translateX(0)!important;
}
.header-lang .nav-area {
	padding-top:137px;
}
.nav-lang a {
	height:84px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.1rem;
	border-top:1px solid rgba(255,255,255,0.5);
}
.nav-lang:last-of-type a {
	border-bottom:1px solid rgba(255,255,255,0.5);
}

/* el_humburger
------------------------------------------------------------*/
.el_humburger {
	z-index: 101;
}
.ac-nav dd {
  display: none;
}
.ac-nav dt {
  padding: 0 45px 0 2em;
  line-height: 1.2em;
  cursor: pointer;
  position: relative;
  width: 100%;
	font-weight: normal;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.header-menu .nav-area {
	padding-right:43px;
	padding-left:43px;
	text-align: left;
}
.nav-area .nav:first-of-type,
.ac-btn {
	/* border-top:1px solid #a3a3a3;	N.Tsuda Edit */
}
.ac-btn:after {
	content:"";
	position: absolute;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:32px;
	height: 100%;
	background:url(../img/common/plus.svg)no-repeat right 0;
	background-size:contain;
}
.ac-btn.active:after {
	background:url(../img/common/minus.svg)no-repeat 0 0;
	background-size:100%;
}
.ac-btn.active {
	background-color: #cfd3da;
}
.js_humburgerOpen .nav-child {
	background-color: #e0e2e6;
}
.nav a {
	position: relative;
}
.child1 a:before,
.nav a:before,
.ac-btn:before {
	content:"";
	position: absolute;
    left: 1.3em;
	top:0;
	bottom:0;
	margin:auto;
	width:0.8em;
	height: 0.8em;
	background: url(../img/common/nav-r.svg)no-repeat 0 0;
	background-size:contain;
}
.child2 a:before {
	content: "-";
	position: absolute;
	left: 1em;
	top: -2px;
	bottom: inherit;
	margin: 0;
	width: 1em;
	height: 1em;
	background: none;
}
.nav-child .ac-nav {
	margin-top:1em;
}
.nav-child .ac-btn {
	margin:0 0 2rem 0;
}
.nav-child .ac-btn:before {
	height:1px;
	left:-5px;
	width:20px;
}
.nav-child .ac-btn:after {
	width:1px;
	left:5px;
	height:20px;
}
.nav-child .active.ac-btn:after {
	content:none;
	background: none;
}
.nav-link a {
	font-size: 2.1rem;
	font-family:'Noto Sans JP',sans-serif;
}
.nav-link {
	margin:2em 0 0 3em;
}
.nav-link li {
	margin-bottom:1.6em;
}
.nav-child2 {
	margin-left:1em;
}
header.nav-header {
	z-index: 3;
	position: relative;
    margin: auto;
    width: 95%;
}
@media screen and (min-width: 751px) {
	.ac-nav dt {
		padding: 0 45px 0 2em;
		line-height: 0em;
		cursor: pointer;
		position: relative;
		width: 100%;
		  font-weight: normal;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	  }
	  .ac-btn p {
		margin-top: .9em;
	  }
}
@media screen and (max-width: 750px) {
	.ac-nav dt {
		padding: 0 45px 0 2em;
		line-height: 0em;
		cursor: pointer;
		position: relative;
		width: 100%;
		  font-weight: normal;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	  }
	  .ac-btn p {
		margin-top: .9em;
		font-size: 1em;
	  }
}

/* toggle
------------------------------------------------------------*/
.toggle-nav {
  box-sizing: border-box;
  pointer-events: auto;
  text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
  z-index: 20;
}
.this-hm img {
	position: relative;
	z-index: 5;
}

@media screen and (min-width: 751px) {
	.el_humburger {
		position: fixed;
		top:50px;
		right: 40px;
	}
	.toggle-nav {
		position: fixed;
		top: 52px;
		right: 71px;
		width: 135px;
	}
	.toggle-nav > li {
		margin:0 -84px;

	}
	.toggle-nav .nav-en {
		width:71px;
		height:40px;
		font-size:13px;
		z-index: 5;
		position: relative;
		font-weight: bold;
		border:1px solid #191919;
		color:#191919;
		background-color: #fff;
		/* N.Tsuda メニューの色と合わすなら以下
		color:white;
		background-color: #223151;
		*/
		display: flex;
		justify-content: center;
		align-items: center;
		scale: 1.4;
	}
	.nav-icn {
		display: block;
		z-index: 1002;
		cursor: pointer;
		padding: 0px;
		width: 90px;
		height: 44px;
		background: url(../img/common/icn-menu.svg) no-repeat 0 0;
		background-size: contain;
		zoom: 1;
		text-indent: -99999px;
		position: relative;
		scale: 1.4;
	}
	.js_humburgerOpen .nav-icn {
		background: url(../img/common/icn-menu-close.svg) no-repeat 0 0;
		width: 90px;
		height: 44px;
		background-size: contain;

	}
	.nav-area .nav,
	.ac-btn,
	.child1 {
		height: 2em;
		display: flex;
		border-bottom:1px solid #a3a3a3;
	}
	.nav.nav-spb {
		/*border-top:1px solid #a3a3a3;		 N.Tsuda Edit */
		/*margin-bottom:2em; */
	}
	.ac-nav a,
	.nav-child .ac-btn {
		padding-left:2em;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		width:100%;
	}
	.ac-nav {
		/* margin-top:1em; N.Tsuda Edit */
		width:100%;
	}
	.nav-mb {
		/* margin-bottom:2em; N.Tsuda Edit */
	}
	.nav a {
		padding-left:2em;
		width:100%;
	}
	.nav a:before,
	.ac-btn:before {
		left: 1em;
	}
	.ac-nav .child1 {
		padding-left:2em;
	}
	.ac-nav .child1 a {
		padding-left: 2em;
		margin-top: -0.11em;
	}
	/*↓追加*/
	.ac-nav .child_stil {
		padding-left:3em;
		height: 2em;
		/* align-items: center; */
		border-bottom: 1px solid #a3a3a3;
		padding-top: 3px;
	}
	/* .ac-nav .child_stil li{
		align-items: center;
	} */
	.nav-area .nav.nav-small {
		border-bottom:none;
		/*margin-top:1em; N.Tsuda */
		line-height:2em;
	}
	.nav-small a {
		font-size:90%;
	}
	.nav-sns {
		margin:1em 0 0 1.7em;
	}
	.nav-fb {
		width:26px;
		margin-right:1.5em;
	}
	.nav-youtube {
		width:30px;
	}
	#header.scrolled {
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height: calc(110/1200*100vw);
		max-height: 110px;
		background-color:rgba(255,255,255,0.9);
	}
}


@media screen and (max-width: 750px) {
	.el_humburger {
		position: fixed;
		top: calc(39/640*100vw);
		right: calc(20/640*100vw);
	}
	.toggle-nav {
		position: fixed;
		top: calc(40/640*100vw);
		right: calc(49/640*100vw);
		width: calc(173/640*100vw);
		margin: 0;
	}
	.header-lang,
	.header-menu,
	.header-mail {
	display: block;
	}
	.header-lang {
		width: calc(100/640*100vw);
		margin: 0 calc(60/640*100vw*-1);
	}
	.nav-icn {
		width: calc(57/640*100vw);
	}
	.nav-en {
		width:calc(83/640*100vw);
		height:calc(57/640*100vw);
		font-size:calc(18/640*100vw);
		font-weight: bold;
		color:#191919;
		background-color: #fff;
		/* N.Tsuda メニューの色と合わすなら以下
		color:white;
		background-color: #223151;
		*/
		border:1px solid #191919;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 5;
	}
	.nav-icn {
		display: block;
		z-index: 1002;
		cursor: pointer;
		padding: 0px;
		width: calc(120/640*100vw);
		height: calc(65/640*100vw);
		background: url(../img/common/icn-menu.svg) no-repeat 0 0;
		background-size: contain;
		zoom: 1;
		text-indent: -99999px;
		position: relative;	
	}
	/**/
	#header.scrolled {
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height: calc(110/640*120vw);
		max-height: 280px;
		background-color:rgba(255,255,255,0.9);
	}
	.js_humburgerOpen .nav-icn {
		background: url(../img/common/icn-menu-close.svg) no-repeat 0 0;
		width: calc(120/640*100vw);
		height: calc(65/640*100vw);
		background-size: contain;
	}
	.nav-area .nav a,
	.ac-btn,
	.child1 {
		display: flex;
		align-items: center;
		border-bottom:1px solid #a3a3a3;
		font-size:calc(28/640*100vw);
		height:calc(58/640*100vw);
	}
	.nav-spb {
		/*border-top: 1px solid #a3a3a3; N.Tsuda */
		/* N.Tsuda Edit Start ****/
		border-bottom: 1px solid #a3a3a3;
		height: calc(58/640*100vw);
		/* N.Tsuda Edit End ****/
	}
	.ac-nav {
		/*margin-top: 1.2em; N.Tsuda */
	}
	.ac-nav a,
	.nav-child .ac-btn {
		padding-left:2em;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		width:100%;
	}	
	.nav-mb {
		/*margin-bottom: 1.8em; N.Tsuda */
	}
	.ac-nav .child1 {
		padding-left:2em;
	}
	.ac-nav .child1 a {
		padding-left: 2.2em;
	}
	/*↓追加*/
	.ac-nav .child_stil {
		padding-left:3em;
		height: 2em;
		/* align-items: center; */
		border-bottom: 1px solid #a3a3a3;
		padding-top: 3px;
	}
	.nav-area .nav.nav-small a {
		border-bottom:none;
		margin-top:1rem;
		font-size:calc(24/640*100vw);
	}
	.nav-sns {
		margin:1em 0 0 2.2em;
	}
	.nav-fb {
		width:calc(49/640*100vw);
		margin-right:1.5em;
	}
	.nav-youtube {
		width:calc(59/640*100vw);
	}
	.nav.nav-small a:before {
		left:1.35em;
	}

}


.el_humburgerButton.el_humburgerButton__close {
  top: 2%;
  right: 2%;
}
.navi * {
	color:#000;
}
.navi {
  position: fixed;
	top:0;
  right: 0;
  height: 100%;
  background-color: rgba(237, 239, 241, 0.9);
  width:500px;
  z-index: 3;
  padding-top: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  transform:translateZ(0) translateX(100%);
  overflow: auto;
}
.js_humburgerOpen .navi{
  transform:translateZ(0) translateX(0);
}
@media screen and (max-width: 750px) {
  .navi{
    padding: 100px 5% 0;
	}
  .js_humburgerOpen .navi{
    width: 100%;
	}
}

.navi_item {
  position:relative;
  margin-bottom: 28px;
  font-size: 20px;
  margin-left: 90px;
	padding-left:2em;
}
.navi_item.op_innerLink {
  cursor: pointer;
 }
@media screen and (max-width: 750px) {
  .navi_item {
    margin-left: 0;
    font-size: 18px;
	}
}

.nav_child{
  padding-top:20px;
}
.nav_child_item{
  position: relative;
  font-size:16px;
  padding-left:20px;
  margin-bottom:10px;
}
.nav_child_item > a{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
}
.nav_child_item:last-child{
  margin-bottom:0px;
}
.js_openSwitch {
  cursor: pointer; }

.js_openTarget {
  display: none; }

@media screen and (min-width: 751px) and (max-width:1100px) {
	.navi {
		width:440px;
	}

}

/* -----------------------------------------------------------
	pageTop
------------------------------------------------------------*/
/* scroll top */
#page-top {
	position: fixed;
	bottom: 15px;
	right: 20px;
	display: block;
	width: 68px;
	height: 68px;
	z-index: 2;
	margin:0;
}
#page-top a {
	text-decoration: none;
	display: block;
}
#page-top:hover {
	text-decoration: none;
	opacity: 0.8;
}
#header {
	z-index: 999;
}
.lower .nav-header {
	position: relative;
	background-color: #fff;
	width: 100%;
}
.logo-img {
	position: relative;
	z-index: 1;
}

@media screen and (min-width:751px) and (max-width:1100px) {
	.logo-img {
	  width:46vw;
	}
}

/* -----------------------------------------------------------
footer
------------------------------------------------------------*/
#footer {
	background: #191919;
}
.footer * {
	color:#fff;
}
.footer-top {
	max-width:85%;
}
.footer-bottom {
	max-width:840px;
}
.footer-top {
	display: flex;
	padding:5.5rem 0 4.5rem;
}
.f-en a {
	width:120px;
	height:50px;
	border:1px solid #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:1.4rem;
	font-weight:bold;
}
.f-en {
	margin-bottom:2.5rem;
}
.f-pri {
	margin-bottom:0.8rem;
}
.f-menu:nth-child(1) {
	width:37%;
	padding-left:5.5%;
}
.f-menu:nth-child(2) {
	width:32%;
	padding-left:1.5%;
}
.f-menu:nth-child(3) {
	width:auto;
	padding-left:5%;
}
.f-menu li,
.f-menu a,
.footer-sub a,
.f-parent,
.footer-sns a {
	font-size: 1.35rem;
}
.f-menu li {
	margin-bottom:1.4em;
}
.f-menu-child {
	margin:1em 0 0 0;
}
.f-menu-child li {
  margin-bottom:1em;
}
.f-menu-child_chld {
	line-height: .8;
	padding-left: 2em;
}
.footer-copyright {
	max-width:1000px;
	width:95%;
	margin:auto;
	text-align: center;
	padding:1.5rem 0;
}
.footer-copyright .copyright {
	font-size: 1.2rem;
	margin: 0;
}



/* -----------------------------------------------------------
PC MENU
------------------------------------------------------------*/
@media screen and (min-width:751px) {
	#header {
	position: relative;
	}
	.header-top {
		position: fixed;
		top: 33px;
		left: 40px;
		z-index: 1;
	}
	.tagline {
		margin:0;
		font-size:13px;
	}
	.top-logo {
		margin-top:5px;
		width: 150px;
		z-index: 1;
	}
	.footer-company {
		width:calc(100% - 175px);
		padding-left:5%;
	}
	.footer-company p {
		font-size:1.35rem;
		margin:0;
	}
	.footer-menu {
		width:165%;
		display: flex;
		border-right:1px solid #aeaeae;
		padding-left: 4%;
	}
	.footer-sns {
		width:30em;
		padding-left:3%;
	}
	.footer-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.f-fb {
		margin-bottom:2rem;
	}
	.footer-bottom-wrap {
		border-top:1px solid #aeaeae;
		border-bottom:1px solid #aeaeae;
		padding:2rem 0;
		align-items: center;
		height: 100px;
		display: flex;
		justify-content: space-between;
	}
	.footer-logo {
		width:175px;
	}
	.fsns-txt {
		font-size:14px;
		line-height: 1;
	}
	.footer-sns img {
		margin:0 1rem;
	}
	.f-en a {
		font-size:1.4rem;
	}
	.lower .nav-header {
		height:calc(110/1200*100vw);
		max-height: 110px;
	}


}

/*--- end PC */

/* 1200px以下
------------------------------------------------------------*/
@media screen and (min-width:751px)and (max-width:1200px) {
	.header-top {
		top:2vw;
	}
	.toggle-nav {
		top:3vw;
	}
	.el_humburger {
		top: 2.8vw;
	}
}


/* -----------------------------------------------------------
SP-MENU 750px
------------------------------------------------------------*/
@media screen and (max-width:750px) {
	/* header
	------------------------------------------------------------*/
	#header {
		position: relative;
	}
	.top-logo {
		max-width: calc(188/640*100vw);
		position: relative;
		top: calc(50/640*100vw);
		left: calc(10/640*100vw);
		z-index: 21;
	}

	main{
		margin-top: -42px;
	}

	.lower .nav-header {
		height: calc(136/640*100vw);
		max-height: 136px;
		border-bottom:1px solid #e5e5e5;
	}
	.ac-nav dt {
		font-size: calc(28/640*100vw);
		padding-left:calc(50/640*100vw);
	}
	.nav-link {
		margin-left:calc(50/640*100vw);
	}
	.nav-link a {
		font-size: calc(28/640*100vw);
		padding: 0;
	}
	.header-menu .nav-area {
		padding: calc(124/640*100vw) calc(25/640*100vw) 0;
	}
	.ac-btn:before {
		width:calc(33/640*100vw);
		left:0;
		top:0
	}
	.ac-btn:after {
		height: calc(33/640*100vw);
		right:0;
		top:0;
		width:calc(61/640*100vw);
		height:100%;
	}
	.nav-child {
		padding-left: 0;
	}
	.nav a,
	.ac-nav .ac-btn {
		padding-left: 2.2em;
	}
	.nav a:before,
	.ac-nav .ac-btn:before {
		left: 1.2em;
	}
	
	/* footer
	------------------------------------------------------------*/
	.footer-menu {
	display: none;
	}
	.footer-top {
		height:calc(142/640*100vw);
		padding:1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.footer-sns {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-sns li {
		margin:0 2.5rem;
	}
	.f-fb img {
		width:32px;
	}
	.f-youtube img {
		width:37px;
	}
	.footer-company p {
		margin-bottom:0;
	}
	.footer-copyright {
	margin:0 auto;
	text-align: center;
	padding-bottom:6vw;
	}
	.footer-copyright .copyright {
		font-size: 10px;
	}
	.f-menu {
		padding-left:0!important;
	}
	.footer-company,
	.footer-sub {
		display: none;
	}
	.footer-bottom-wrap {
		border-top:1px solid #aeaeae;
		border-bottom:1px solid #aeaeae;
		padding: 0;
		align-items: center;
		height: calc(200/640*100vw);
		display: flex;
		justify-content: space-between;
	}
	.footer-logo {
		width: 170px;
		margin: auto;
	}
}


/* footer-btn
------------------------------------------------------------*/
@media screen and (min-width: 751px) and (max-width:1200px) {
	#page-top {
	width: calc(68/1280*100vw);
    height: calc(68/1280*100vw);
	}
}

@media screen and (min-width: 751px) and (max-width: 1024px){
	.f-menu li, .f-menu a,
	.footer-copyright .copyright {
	    font-size: 10px;
	}
	.f-menu {
	width: 24%;
	}
	.f-menu li, .f-menu a {
	font-size: 10px;
	}
	.f-menu {
	margin: 0 1%;
	}
}

@media screen and (min-width: 751px) and (max-width: 890px){
	.f-menu:nth-child(1),
	.f-menu:nth-child(2) {
		padding-left:0;
	}
}

@media screen and (max-width: 750px) {
	#page-top {
		width: calc(70/750*100vw);
		height: calc(70/750*100vw);
		right:calc(20/640*100vw);
	}

}

/* breadcrumbs
------------------------------------------------------------*/
@media screen and (min-width: 751px) {
	#breadcrumb {
		vertical-align: middle;
		border-top: 1px solid #d1d1d1;
		height:38px;
	}
	.breadcrumbs {
		max-width:1000px;
		width:90%;
		margin:0 auto;
	}
	.breadcrumbs,
	#breadcrumb ul {
		margin: auto;
		padding: 0;
	}
	.breadcrumbs * {
		font-size: 12px;
		display: inline-block;
		color: #808080;
	}
	.breadcrumbs li:after {
		content: " ";
		color: transparent;
		display: inline-block;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		border: solid #808080;
		border-width: 0 1px 1px 0px;
		width: 6px;
		height: 6px;
		margin: 0 3px;
		position: relative;
	}
	.breadcrumbs li:last-of-type:after {
		content:none;
	}
	.breadcrumbs br {
		display: none;
	}
}
@media screen and (max-width: 750px) {
	.breadcrumbs {
		display: none;
	  }
}



/* MENU展開時の「English」ボタン非表示 */
.js_humburgeropen .header-lang{ 
	display:none;
}