@charset "utf-8";

/* 基本CSS */
html.hidden {
	overflow:hidden;
}
ul,
div,
img {
	margin: 0px;
	padding: 0px;
	list-style: none;
	font-weight: normal;
}
/*header*/
header {
	background:#FBFFEE;
	width:100%;
}
.header_box {
	width:100%;
}
/* チェックボックスを非表示 */
#navi input {
	display: none;
}
/* PCでは V を非表示 */
.m_parent .pd {
	display: none;
}
/* 上部メニューの最後の項目 */
.m_parent:last-child {
	margin-right: 0px;
	border-radius: 0 1em 1em 0;
}
#menunavi {
	display: none;
	cursor: pointer;
	cursor: hand;
}
/* ドロップダウンメニュー */
.m_parent {
	position: relative;
}
.m_parent .m_child {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	margin-left: -40px;
	width: auto;
	box-sizing: border-box;
	padding: 0px 20px;
	background-color: #FFF;
	border: 1px solid #000;
}
/*PC*/
.pc_m_child {
	visibility: hidden;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s, padding 0.3s;
}
.pc_m_child.active {
	visibility: visible;
	opacity: 1;
	max-height: initial;
	width:95%;
	background:#fff;
	margin:auto;
	border-radius: 0 0 1em 1em;
	padding:2em 2.5em 1em;
	position:relative;
}
.pc_m_child.active ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.pc_m_child.active ul li {
	width: 33%;
	padding-right:0.3em;
	margin-bottom:1em;
}


/* 子メニュー */
.m_child li {
	border-bottom: 1px solid #E6E2D4;
	background:#FFFBEB;
	padding-left: 40px;
}
/* 余分な最後の線を消去 */
.m_child li:last-child {
	border: none;
}
.m_child li.and_link.be.right a {
	padding-right:20px;
	line-height:1.7;
}
.m_child li i {
	margin-right: 3px;
}

/* ハンバーガー */
#navi #navibtn {
	display: none;
}


@media screen and (min-width: 769px) {
	/*PC*/
	header {
		padding-bottom:15px;
	}
	.header_box {
		padding:15px 15px 0 15px;
	}
	#navi {
		background-color: #FFF;
		position:relative;
		width: 100%;
		margin:auto;
		top: 0;
		left: 0;
		height: 90px;
		border-radius: 1em;
		filter: drop-shadow(1px 1px 3px rgba(12, 28, 32, 0.3));
		z-index:10;
	}
	
	.menu_box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	/* 左上ロゴ --------------------------------------------*/
	.menu_box .menu_left {
		width:300px;
		height:90px;
	}
	.menu_left a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		height: 90px;
	}
	.menu_left a span {
		display: grid;
		place-items:center;
		padding:15px;
		width:100%;
		max-width:278px;
	}
	.menu_right {
		width:calc(100% - 300px);
	}
	/* 上部メニュー --------------------------------------------*/
	ul.menu {
		width:100%;
		display: flex;
		flex-wrap: wrap;
		height:90px;
		margin-bottom:1px;
	}
	.m_parent {
		width:25%;
		border-left:solid 1px #EBE9DD;
	}
	.m_parent span {
		font-weight:bold;
	}
	.m_parent.pc-item-box span {
		height: 90px;
	}
	.m_parent > a, .m_parent.pc-item-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position:relative;
		height:90px;
		color:#551F07;
		text-decoration:none;
		cursor: pointer;
		transition: initial;
	}
	.m_parent.pc-item-box {
		padding-top:3px;
		padding-bottom:3px;
		
		background-image:url(../img/guest/under.svg);
		background-repeat:no-repeat;
		background-position:center 74px;
		background-size:13px auto;
	}
	.m_parent > a:hover, .m_parent.pc-item-box:hover {
		opacity:1.0;
	}
	.m_parent:hover, #current.m_parent {
		border-bottom:solid 3px #F27614;
	}
	.m_parent.pc-item-box:hover {
		padding-bottom:0;
	}
	.m_parent > a >span, span.pc-item {
		display: grid;
		place-items: center;
		padding:0.5em 0.2em;
	}
	.m_parent.pc-item-box label {
		display:none;
	}
	.close_btn {
		display:block;
		position:absolute;
		top:0.5em;
		right:0.5em;
		width:32px;
		height:32px;
	}
}
@media screen and (min-width: 1200px) { 
	/* 左上ロゴ --------------------------------------------*/
	.menu_box .menu_left {
		width:400px;
	}
	.menu_right {
		width:calc(100% - 400px);
	}
}
@media screen and (max-width: 768px) {
	/*SP*/
	header {
		padding-bottom:8px;
	}
	html.hidden header {
		height:76px;
	}
	.header_box {
		padding:0 0 8px;
	}
	#navi {
		background-color: #FFF;
		position:relative;
		width: calc(100% - 16px);
		margin:0 8px;
		top: 8px;
		left: 0;
		height: 60px;
		border-radius: 0.5em;
		filter: drop-shadow(1px 1px 3px rgba(12, 28, 32, 0.3));
		z-index:10;
		
	}
	/* SP V を表示 */
	.m_parent .pd {
		display: inline-block;
		width: 100%;
	}
	/* 左上ロゴ --------------------------------------------*/
	.menu_left {
		line-height: 60px;
		 height:60px;
		width:100%;
		max-width:220px;
	}
	.menu_left img {
		width:100%;
	}
	.menu_left a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		height: 60px;
	}
	.menu_left a span {
		display: grid;
		place-items:center;
		padding:15px;
		width:100%;
		max-width:212px;
	}
	/* ドロップダウンメニュー */
	.m_parent {
		height: auto;
		width: 100%;
		padding: 0px 20px;
		border-bottom: 1px solid #E6E2D4;
	}
	.m_parent.pc-item-box {
		padding: 0px;
	}
	.m_parent.pc-item-box label {
		padding: 0.65em 45px 0.65em 20px;
		font-weight:bold;
		display:inline-block;
		line-height:1.7;
		width:100%;
		position:relative;
	}
	.m_parent a span {
		font-weight:bold;
		padding:0.65em 0;
		display:inline-block;
	}
	.m_parent > a, .m_parent.pc-item-box label {
		color:#561F05;
	}
	.m_parent:first-child {
		border-top: 1px solid #E6E2D4;
	}
	.m_parent .pc-item {
		display:none;
	}
	.m_parent label span {
		display: inline-block;
		width: 30px;
		height: 27px;
		position: absolute;
		right: 20px;
		top: 50%;
  		transform: translateY(-50%);
	}
	.m_parent i {
		padding: 0px 6px;
		font-style: normal;
		display: inline-block;
		width: 30px;
		height: 27px;
	}
	/* メニューを移動させないため */
	#menunavi:checked ~ #navi {
		position: fixed;
		overflow-y: scroll;
		overflow-x: hidden;
		height: 97%;
		/*max-height: fit-content;*/
	}
	#menunavi:checked ~ .fade {
		visibility: visible;
		opacity: 0.2;
		transition-delay: 0.2s;
		z-index:9;
	}
	.pc_m_child {
		display:none;
	}
	.menu {
		max-height: 0;
		overflow: hidden;
	}
	/* ハンバーガーメニューがクリックされた時 */
	#menunavi:checked ~ * .menu {
		max-height: 100vh;
	}
	#menunavi:checked ~ * .m_parent {
    	max-height: inherit;
    	overflow-y: visible;
	}
	#menunavi:checked ~ * .m_child {
    	max-height: 0;
    	overflow-y: hidden;
    	visibility: hidden;
	}
	/* 子メニュー */
	.m_parent .m_child {
		border-top: 1px solid #E6E2D4;
		border-left: 1px solid #FFF;
		border-right: 1px solid #FFF;
		border-bottom: 1px solid #FFFBEB;
		position: relative;
		padding: 0;
		opacity: 1;
		top: 0;
		margin-left: auto;
		left: auto;
		width: 100%;
	}
	.m_parent > label:hover {
    	cursor: pointer;
    	cursor: hand;
	}
	/* 子メニューがクリックされた時 */
	#navi input[type="checkbox"]:checked ~ .m_child {
    	max-height: inherit;
    	overflow-y: visible;
		visibility: visible;
	}
	.angletoggle:before {
		content: "";
		display:inline-block;
		width:30px;
		height:27px;
		background-image:url(../img/guest/open_child.svg);
		background-repeat:no-repeat;
		background-size: contain;
	}
	#navi input[type="checkbox"]:checked ~ * .angletoggle:before {
		content: "";
		display:inline-block;
		width:30px;
		height:27px;
		background-image:url(../img/guest/close_child.svg);
		background-repeat:no-repeat;
		background-size: contain;
	}
	
	#navi #navibtn {
		display: block;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	#navibtn span {
		display: block;
		width: 40px;
		height: 40px;
		background-color: #fff;
	}
	#navibtn span span {
		display: block;
		overflow: hidden;
		width: 1px;
		height: 1px;
	}
	#navibtn span span::before,
	#navibtn span span::after,
	#navibtn span::after {
		position: absolute;
		left:5px;
		content:"";
		width: 30px;
		height: 2px;
		background-color: #561F05;
	}
	/* 上の棒 */
	#navibtn span span::before {
    	top:10px;
	}
	#menunavi:checked ~ #navi label#navibtn span span::before {
		top:19px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}
	/* 下の棒 */
	#navibtn span::after {
		bottom:10px;
	}
	#menunavi:checked ~ #navi label#navibtn > span::after {
		bottom:18px;
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}
	/* 中の棒 */
	#navibtn span span::after {
		top:18px;
	}
	#menunavi:checked ~ #navi label#navibtn span span::after {
		display: none;
	}
}



/*背景を暗くする部分*/
.fade {
	position: fixed;
	top:0px;
	left: 0;
	width:100%;
	height:100%;
	background-color:#000000;
	visibility: hidden;
	opacity: 0;
	transition: transform .2s;
}
.fade.open_delay{
	visibility: visible;
	opacity: 0.2;
	transition-delay: 0.2s;
	z-index:9;
}