@charset "UTF-8";


/* hamburgerここから */

/* menu */


.navi_w ul {
	width: 100%;
	display: flex;
	justify-content: center;
	list-style-type: none;
	margin:0px;
    padding:0px;
	}

.navi_w li {
	/*width: calc(100% / 6);*/
	text-align: center;
	font-size:var(--font-12);
	font-weight:500;
	position: relative;/* 下矢印 */
	display: inline-block;/* 下矢印 */
	}

.navi_w li::before {/* 下矢印 */
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 1.5px  var(--dkgreen);
  border-right: solid 1.5px  var(--dkgreen);
  position: absolute;
	bottom:10px;
	right: 0;
  left: 0;
  margin: 0 auto;
	transform: rotate(135deg);
}

.navi_w li a{
	text-decoration: none;
	color: #333;
	display: block;
	padding:25px 20px 20px 20px ;
	box-sizing: border-box;
	width: 100%;
	}

.navi_w li a:hover,
.navi_w li a:focus-visible{
	background: #D1E8E7;
}

/* 矢印は li::before なので、li側にhover/focus-withinを当てる */
.navi_w li:hover::before,
.navi_w li:focus-within::before{
  transform: rotate(-45deg);
  bottom: 6px;
}



/* お問合せ */
/*.navi_contact{
	position: absolute;
	top:0;
	right:0;
}

.navi_contact a{
	text-decoration: none;
	color: #333;
}

.navi_contact a:hover{
	text-decoration:underline;
	color: #333;
	opacity: 0.7;
}
	*/


@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	
/* menu */
.navi_w ul {
		display: block;
	
	}

.navi_w li {
	width:100%;
	position: initial;/* 下矢印 */
	display:block;/* 下矢印 */
	}

.navi_w li::before {/* 下矢印 */
  content: none;
}	
	
.hamburger_menulist li {		
	text-align: left;
	border-top:var(--dkgreen) 1px solid;
	padding:15px 0px;	
	}
	
.hamburger_menulist li:last-child {
	border-bottom:var(--dkgreen) 1px solid;
	}	
	


	/* label */
.hamburger_switch{
	cursor: pointer;
	position: fixed;
	right: 1%;
	top:0.5%; /* ハンバーガーアイコンの位置（上から） */
	z-index: 9999;
	width: 4em; /* アイコン（クリック可能領域）の幅 */
	height: 4em; /* アイコン（クリック可能領域の）高さ */
	background: #FFFFFF;
	border: var(--dkgreen) 1px solid;
}
/* メニュー展開時にハンバーガーアイコンを固定 */
.hamburger_switch1[aria-expanded="true"]{
  position: fixed;
}
	
/* ハンバーガーアイコン */
.hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
	width: 25px;
	height: 3px;
	background: var(--dkgreen); /* ハンバーガーアイコンの色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s;
	content: "";
}
.hamburger-switch-line1{
		transform: translate(-50%, -50%);
}
.hamburger-switch-line1:before{
	transform: translate(-50%, -300%);
}
.hamburger-switch-line1:after{
	transform: translate(-50%, 200%);
}
	
/* ハンバーガーアイコン･アニメーション */
.hamburger_switch1[aria-expanded="true"] .hamburger-switch-line1{
  width: 0;
}
.hamburger_switch1[aria-expanded="true"] .hamburger-switch-line1:before{
  transform: rotate(45deg) translate(-40%, 325%);
}
.hamburger_switch1[aria-expanded="true"] .hamburger-switch-line1:after{
  transform: rotate(-45deg) translate(-40%, -325%);
}
	
/* メニューエリア */

  .hamburger_wrap{
    position: fixed;
    height: 100%;
    background: #fafafa;
    padding: 5em 3% 2em;
    z-index: 9998;
    top: 0;
    right: 0;
    width: 70%;

    /* ここがポイント：右へ退避 */
    transform: translateX(100%);
    transition: transform .3s ease;
    will-change: transform;
  }

  /* 開いているとき（JSで is-open を付与） */
  .hamburger_wrap.is-open{
    transform: translateX(0);
  }

  .hamburger_cover{
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(3,3,3,.5);

    opacity: 0;
    transition: opacity .2s ease;
    display: block; /* hiddenで消すので常時blockでOK */
  }
  .hamburger_cover.is-open{
    opacity: 1;
  }

	
	
/* メニューリスト */
.hamburger_menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合もあり */
	list-style: none;
}
.hamburger_menulist li a{
	text-decoration: none;
	color: #333; /* メニューリストの文字色 */
	display: block;
	padding: .5em 0;
}


	
/* お問合せ */
/*.navi_contact{
	position: initial;
	text-align:center;
	padding-top: 10px;
}*/	

}


/* =========================
   PC用レイアウト（769px以上）
========================= */
@media screen and (min-width: 769px) {

  /* PCではハンバーガーボタンとカバーは不要 */
  .hamburger_switch1 { display: none; }
  .hamburger_cover { display: none !important; }

  /* PCではメニュー常時表示（hiddenでも表示） */
  #global-menu,
  #global-menu[hidden] {
    display: block !important;
  }

  /* SP用スライド設定をPCで無効化 */
  .hamburger_wrap{
    position: static;
    height: auto;
    background: transparent;
    padding: 0;
    z-index: auto;
    transition: none;
    top: auto;
    left: auto;
    width: auto;
  }

}