@charset "utf-8";

/* 基本CSS */
ul,div {margin: 0px;padding: 0px;list-style: none;font-weight: normal;}

/* 本文をメニューの高さ分下げる */
#navi {position: relative;top: 0;left: 0;height: 60px;width: 100%;z-index: 99;}
#navi a {color:#999;font-weight:bold;font-family: 'Kosugi Maru', sans-serif;display: block;}
#navi a:hover {color: #333;}

/* チェックボックスを非表示 */
#navi input {display: none;}

/* 左上ロゴ */
.menu-left {float: left;line-height: 108px;margin-left: 5px;}
.menu-left img {vertical-align: middle;margin-left: 10px;}

/* 中心リンク */
.hdlinkbx {width: 20%;height: 48px;text-align: center;font-weight: bold;display: block;border-radius: 5px;float: left;position: relative;top: 5px;margin: 0px auto !important;background-color: #f791cf6b;color: #cb006f;}
.hdlinkbx:hover {background-color: #f791cf;color: #fff;}
#navi a#hdlink_a {width:100%;height:100%;display: flex;justify-content: center;align-items: center;}

/* 上部メニュー */
/*#menu {width: 74%;float: right;position: relative;top: 63px;display: flex;justify-content: space-between;}*/
#menu {width: 74%;float: right;position: relative;top: 13px;display: flex;justify-content: space-between;}
#menu li {position: relative;white-space: nowrap;}
#menu li a {display: block;text-align: center;}
#menu > li {min-width: 120px;width: fit-content;float: left;margin: 0px 5px;line-height: 30px;font-size: 17px;font-weight: bold;}

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

/* スマホ用 */
@media screen and (max-width: 1200px) {
	#hdlink_img {width: auto;height: 100%;}
	#hdlink_lng {display:none;}
	.companylogo {width: 150px;height: 52px;background-image: url(../../img/logo.png);background-size: cover;display: block;}
	#menu {display: none;}
	#menu li {height: auto;width: 100%;padding: 0px 20px;border-bottom: 1px solid #DDD;white-space: nowrap;}
	#menu > li {margin-right: -20px;}
	/* スマホの際に V を表示 */
	#menu > li .pd {display: inline-block;width: 100%;}
	#menu li a {display: inline-block;}
	#menu li:first-child {border-top: 1px solid #DDD;}
	#menu li i {padding: 0px 6px;}
	/* メニューを移動させないため */
	#menu-navibtn:checked ~ #navi {position: fixed;overflow-y: auto;overflow-x: hidden;height: 100%;}
}

/* ドロップダウンメニュー */
#menu li ul {position: relative;margin: 0 calc(50% - 120px);}
/* 子メニュー */
#menu > li > ul li {font-size: 14px;display: none;padding: 0px 20px;background-color: #FFF;border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #DDD;}
#menu li ul li:first-child {border-top: 1px solid #000;}
#menu li ul li:last-child {border-bottom: 1px solid #000;}
#menu li ul li ul {top: -1px;left: 100%;}
#menu li ul li ul li ul,
#menu li:nth-child(n+3) ul li ul {left: inherit;right: 100%;}
#menu > li > ul {margin-left: -40px;width: auto;}

/* パソコン用 */
@media screen and (min-width: 1201px) {
	.hdlinkbx {margin-bottom: 20px;}
	#hdlink_img {display:none;}
	#hdlink_lng {}
	.companylogo {width: 300px;height: 108px;background-image: url(../../img/logo.png);background-size: cover;display: block;}
	#menu li:hover {background: #EEE;}
	#menu > li:hover > ul > li,#menu li ul li:hover > ul > li {display: block;}
	/* 階層がある場合の誘導の印 */
	#menu li ul li ul:before,#menu li ul li ul li ul:before,#menu li:nth-child(n+3) ul li ul:before {position: absolute;top: 28px;content: "";border: 5px solid transparent;display: block;}
	/* 通常タイプ */
	#menu li ul li ul:before {left: -10px;border-left-color: #666;}
	/* 右側タイプ */
	#menu li ul li ul li ul:before,#menu li:nth-child(n+3) ul li ul:before {right: -10px;border-right-color: #666;}
}

/* スマホ用 */
@media screen and (max-width: 1200px) {
	/* ハンバーガーメニューがクリックされた時 */
	#menu-navibtn:checked ~ * #menu {display: block;width: 60%;background: #eee;top: 60px;}
	#menu-navibtn:checked ~ * #menu > li {max-height: inherit;overflow-y: visible;box-sizing: border-box;}
	#menu > li ul {line-height: 50px;}
	#menu > li > label:hover {cursor: pointer;cursor: hand;}
	#menu li ul {position: static;}
	/* 子メニュー */
	#menu > li > ul {margin-left: initial;position: relative;}
	#menu li ul li:first-child {border-top: 1px solid #DDD;}
	#menu ul li:last-child {border-bottom: none;}
	#menu > li > ul li {border-left: 1px solid #FFF;border-right: 1px solid #FFF;}
	#menu li ul li ul {top: inherit;left: 0;}
	#menu li ul li:last-child {border-bottom: none;}
  /* 子メニューがクリックされた時 */
	#navi input[type="checkbox"]:checked ~ label ~ ul > li {max-height: inherit;overflow-y: visible;display: block;}
	.angletoggle:before {content: "\f107";}
	#navi input[type="checkbox"]:checked ~ label .pd .angletoggle:before {content: "\f106";}
}

/* ハンバーガー */
#navi #navibtn {display: none;}
@media screen and (max-width: 1200px) {
	#navi #navibtn {display: block;position: absolute;top: 10px;right: 25px;}
	#navibtn div {display: block;width: 40px;height: 40px;background-color: #333;}
	#navibtn div span {display: block;overflow: hidden;width: 1px;height: 1px;}
	#navibtn div span#sp1,#navibtn div span#sp2,#navibtn div span#sp3 {position: absolute;left:10px;content:"";width: 20px;height: 3px;background-color: #FFF;}
	/* 上の棒 */
	#navibtn div span#sp1 {top:10px;}
	#menu-navibtn:checked ~ #navi label#navibtn div span#sp1 {top:19px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
	/* 中の棒 */
	#navibtn div span#sp2 {top:18px;}
	#menu-navibtn:checked ~ #navi label#navibtn div span#sp2 {display: none;}
	/* 下の棒 */
	#navibtn div span#sp3 {bottom:10px;}
	#menu-navibtn:checked ~ #navi label#navibtn > div span#sp3 {bottom:18px;transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}

	/* 上の棒 */
	/*#navibtn span span::before {top:10px;}
	#menu-navibtn:checked ~ #navi label#navibtn span span::before {top:19px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}*/
	/* 中の棒 */
	/*#navibtn span span::after {top:18px;}
	#menu-navibtn:checked ~ #navi label#navibtn span span::after {display: none;}*/
	/* 下の棒 */
	/*#navibtn span::after {bottom:10px;}
	#menu-navibtn:checked ~ #navi label#navibtn > span::after {bottom:18px;transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}*/
}