@charset "utf-8";
/*
  CSS のみのメガドロップダウン＆ハンバーガーメニュー Ver.2
  Copyright Rectus Inc, 2020
  https://www.rectus.co.jp/
  Released under the MIT license
 */

.menuBox{ 
	position: relative; margin: 0 auto; width: 1190px; height: 40px; z-index: 100;
	border-top: 1px solid; border-bottom: 1px solid;border-image: linear-gradient(to right,  #000000 0%,#000000 82%,#ffffff 82%) 1;
}
#navi { height: 38px; width: 100%; }
/* チェックボックスを非表示 */
#navi input { display: none; }

.menu-left { display: none; }
.menu-eng{ display: none;}

/* 上部メニュー */
#menu {
	position: relative; list-style: none; margin: 0; padding: 0; width: 100%; height: 38px; font-size: 1.2em;
	display: flex; justify-content: space-between; align-items: flex-start;
}
#menu > li {
	float: left; margin: 0; width: 162px; line-height: 38px;text-align: center; font-weight: 700;
	border-right: 1px solid; border-image: linear-gradient(to bottom,  #ffffff 20%,#000000 20%,#000000 80%,#ffffff 80%) 1;
}
#menu > li:hover { background:#e1e1e1; }

#menu > li:nth-last-child(2) { border-right: none;}
#menu li a { width: 160px; height: 38px; display: flex; justify-content: center; text-decoration: none; color:#000; }

#menu > li.current{ background:#e1e1e1; }
#menu > li.menu-cart{
	width: 190px; height: 30px; margin: 4px 5px 0 auto;
	outline: 2px solid #0F325B; outline-offset: 3px; border: 1px solid #0F325B;
	display: flex; justify-content: center; align-items: center;
}
#menu > li.menu-cart a{ width: 190px; font-size: 1.07em; text-decoration: none; color:#0F325B;}
#menu > li.menu-cart:hover{ background: #0F325B; outline: 4px solid #0F325B; outline-offset: 1px; border: 1px solid #0F325B;}
#menu > li.menu-cart:hover a{ color: #fff;}

/* パソコンでは V を非表示 */
#menu > li .pd { display: none; }
#menu-navibtn { display: none; }

/* スマホ用 */
@media screen and (max-width: 640px) {
	.menuOuter{ position: absolute; top:0; left:0; padding: 0; height: 11.8vw; z-index: 1000;}
	.XCL .menuOuter,.order .menuOuter{ top:-15vw;}
	.p-top .menuOuter{ top:-11.8vw;}
	.menuBox{ margin: 0; width: 100vw; height: 11.8vw; border-top:none; border-bottom:1px solid #959595; border-image: none;}
	#navi { height: 11.8vw; transition: 0.2s;}
	.menu-left { padding-left: 4vw; width:85vw; height: 11.8vw; font-size: 3.7vw; font-weight: 700; color: #0F3288; display: flex; align-items: center;}
  
	/* 基本非表示 */
  	#menu { display: none; margin: 0; border-top: 1px solid #afafaf; }
  	#menu li {
		position: relative; margin: 0; padding: 0; width: 100vw; line-height: 13.3vw; font-size: 4.7vw;
		text-align: left; border: none; border-bottom: 1px solid #afafaf; white-space: nowrap;
	}
	
	/* V を表示 */
	#menu > li .pd { position: absolute; left:0; display: inline-block; width: 100vw; height:13.3vw;}
  	#menu li a { display: inline-block; margin-left: 4vw; width: 100%; height:13.3vw; }
	#menu > li.menu-cart{ width: 102vw; height: 13.57vw; margin: 1vw -1vw; padding-left: 3.5vw; outline-offset: 0.9vw; justify-content: flex-start; border: 0.55vw solid #0f325b;outline: none;}
	#menu > li.menu-cart a{ margin: 0; font-size: 4.5vw;}
	
	
  /* メニューを移動させないため */
  #menu-navibtn:checked ~ #navi { overflow-y: scroll; overflow-x: hidden; height: auto; background:#fff; border-bottom:1px solid #0F325B;}
}

/* 子メニュー */
#menu > li > ul li { font-size: 1.167em; }
#menu > li > ul li a{ color:#fff; }
/* ドロップダウンメニュー */
#menu > li > ul { display: none; position: absolute; padding: 25px 0; background-color: #596674; }
#menu > li > ul > li.second-link,#menu > li > ul > li.second-link2{
	margin: 0 20px 0 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
#menu > li > ul > li.second-link a,#menu > li > ul > li.second-link2 a{ 
	text-align: left; line-height: 30px; color:#fff; width: 100%; background: url("../img/arrowRW.svg") no-repeat center right; background-size: 9px 11px; display: flex; justify-content: flex-start;
	}
#menu > li > ul > li.second-link a{ padding: 5px 20px 5px 0; font-weight: 500;}
#menu > li > ul > li.second-link2 a{ padding: 5px 20px 5px 0; min-width: 140px; font-weight: 500; border-bottom:1px solid #999;}
#menu > li > ul > li.second-link2 a.lh60,#menu > li > ul > li.second-link2 a.lh2{ font-size: 1.15em; font-weight: 700; padding-left: 0 !important;}
#menu > li > ul > li.second-link p.lh60 { font-weight: 700; padding-left: 0 !important; color: #fff;}
.border-bottom { border-bottom: 1px solid #999;}
#menu > li > ul > li.second-link a.bbno{ border: none;}
#menu > li > ul li.hr { display: none; }
#menu > li > ul > li.second-link a:hover,#menu > li > ul > li.second-link2 a:hover{ opacity: .85; }

#menu > li > ul > li.second-link2 > .lh2{ height: 41px; width: 100%; border-bottom: 1px solid #afafaf;}
/* パソコン用 */
@media screen and (min-width: 641px) {
  #menu > li { position: static; }
  #menu > li > ul { margin-left: inherit; width: 100%; left: 0; }

#menu > li:hover > ul{ 
	  display: flex;
	  justify-content: center;
	  align-items:flex-start;}
	
#menu > li:focus-within > ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
	
  #menu > li > ul li { display: inline-block; padding: 0 14px; vertical-align: top;  }

  #menu > li > ul > li.second-link p.lh60 { font-size: 1.15em; border-bottom: 1px solid #999;}

}
/* スマホ用 */
@media screen and (max-width: 640px) {
/* ハンバーガーメニューがクリックされた時 */
	#navibtn{ z-index: 1000;}
	#menu-navibtn:checked ~ * #menu { display: block; width: 100%; margin-top: 0; }
  	#menu-navibtn:checked ~ * #menu > li { max-height: inherit; overflow-y: visible; }
  	#menu > li ul { line-height: 50px; }
  	#menu > li > ul { padding: 0; }
	
/* アコーディオン部分初期状態 */
  	#menu li ul li { display: none; }
  	#menu > li > label:hover { cursor: pointer; cursor: hand; }
  	#menu li ul { position: static; display: inline; }
 
/* 子メニュー */
  #menu > li > ul { margin-left: initial; }
  #menu ul li:last-child { border-bottom: none; }
  #menu > li > ul li { }
  #menu li ul li ul { top: inherit; left: 0; }
	
	#menu > li > ul li.second-link,#menu > li > ul li.second-link2{ display: none; }
	
	#menu > li > ul li.hr { padding: 1px 0 0 0 !important; height: 1px; background:#999; }

  /* 子メニューがクリックされた時 */
	#menu input[type="checkbox"]:checked ~ label ~ ul {
		max-height: calc(100vh - 158px); overflow-y: auto; display: block; background:#596674; border:none;
	}
	#menu input[type="checkbox"]:checked ~ label ~ ul > li {
	  margin: 0 auto; padding: 2vw 0; display: flex; flex-direction: column; 
	}
	#menu input[type="checkbox"]:checked ~ label ~ ul > li.second-link { width: 96vw; }
	#menu input[type="checkbox"]:checked ~ label ~ ul > li.second-link2 { width: 45vw; }
	#menu input[type="checkbox"]:checked ~ label ~ ul > li:last-child { border:none;}
	#menu input[type="checkbox"]:checked ~ label ~ ul > li a{
		margin: 0; padding: 1.3vw 2.56vw 1.3vw 0.2vw; font-size: 3.6vw; line-height: 1.2; height: 10vw; border: none; display: flex; align-items: center; justify-content: flex-start;
	}
	#menu input[type="checkbox"]:checked ~ label ~ ul > li.second-link a { width: 100%; height: 7vw; background-size: 2vw; }
	#menu input[type="checkbox"]:checked ~ label ~ ul > li.second-link2 a { width: 100%; background-size: 2vw;  }
	#menu input[type="checkbox"]:checked ~ label ~ ul > li a.lh60{ 
		margin: 0; font-size: 4vw; line-height: 1; background: none;
	}#menu input[type="checkbox"]:checked ~ label ~ ul > li p.lh60{ 
		margin: 0; font-size: 4vw; background: none;
	}
	#menu input[type="checkbox"]:checked ~ label ~ ul > li a.PConly{ display: none; }
	
	.angletoggle:before { 
		margin-left: 90vw; width: 4vw; height: 100%; background: url("../img/arrowDG.svg") no-repeat center center; background-size: contain; content:" "; display: flex; transition: 0.2s;
	}
	#navi input[type="checkbox"]:checked ~ label .pd .angletoggle:before { transform: rotate(180deg); transition: 0.2s; }
	#navi input[type="checkbox"]:checked ~ label .pd { background:#e1e1e1; mix-blend-mode: multiply;}
	#navi input[type="checkbox"]:checked ~ label .pd #menu > li.current{ background:#fff; }
	#menu > li > ul.menu-second { display: flex !important; flex-wrap: wrap;}
	#menu ul.menu-second li{ border:none;}
	ul.menu-second li a{ color:#fff;}
	#menu > li > ul > li.second-link2 > .lh2{ display: none;}
	
}

/* ハンバーガー */
#navi #navibtn { display: none; }
@media screen and (max-width: 640px) {
  #navi #navibtn { display: block; position: absolute; top: 0; right: 0; }
  #navibtn span { display: block; width: 15vw; height: 11.8vw; background:#0F325B; }
  #navibtn span span { display: block; overflow: hidden; padding-top: 1vw; width: 15vw; height: 11.5vw; text-align: center; color:#fff; font-weight: 700;}
  #navibtn span span::after {
    position: absolute; left:0; bottom: 1vw; content:"▼"; width: 15vw; height: 4.5vw; text-align: center; color: #fff; transition: 0.2s;
  }
  /* 下の棒 */
  #menu-navibtn:checked ~ #navi label#navibtn span span::after { bottom:1.5vw; transform: rotate(180deg); transition: 0.2s; }
}