@charset "UTF-8";
/* CSS Document */
.HM_wrap {
	position: sticky;
	top: 0;
	left:0;
    z-index: 1000;
}

/* ロゴと三本ラインの設定 */
div.HM_menu {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ボタン外側 */

.openbtn {
/* ボタン内側の起点となるためrelativeを指定 */
	position: relative;
	width: 50px;
	height: 50px;
	border: none;
	background: transparent;
	appearance: none;
	padding: 0;
	cursor: pointer;
}

/* ボタン内側 */
.openbtn span {
	display: inline-block;
	transition: .4s; /* アニメーションの設定 */
	position: absolute;
	height: 2px;
	border-radius: 2px;
	background: #242424;
	width: 44%;
	left: 50%;
	transform: translateX(-50%);
}

.openbtn span:nth-of-type(1) {
	top: 16px;
}

.openbtn span:nth-of-type(2) {
	top:24px;
}

.openbtn span:nth-of-type(3) {
	top: 32px;
}

.openbtn.active span {
	top: 50%;
}

.openbtn.active span:nth-of-type(1) {
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.openbtn.active span:nth-of-type(2) {
	display: none;
}

.openbtn.active span:nth-of-type(3) {
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.navigation{
	display: none;
	background: var(--main-color);
	position: absolute;
	top: 50px;
	width: 100%;
	z-index: 999;
}

.navilist {
	text-align: center;
	list-style: none;
	padding:0;
	margin:0;
}

.navilist li {
	border-bottom: solid 1px #fff;
}

@media (hover: hover) and (pointer: fine) {
	.navilink:hover {
		background: var(--a-hover);
		color: #fff;
	}
}

.title2,
.title3{
	position: relative;/* +マークの位置基準とするためrelative指定 */
	display: inline-block;
	width: 100%;
	font-size: 1.1em;
	font-weight: 500;
	color: #fff;
	padding: 1em;
	text-align: left;
}

/* ここから + アイコンの設定 */

/*アイコンの＋*/
.title2::before,
.title2::after{
    position: absolute;
    content:'';
    width: 0.8em;
    height: 0.14em;
    background-color: #fff;
	transition: transform 0.4s;

}
.title2::before{
    top:48%;
    right: 1em;
    transform: rotate(0deg);

}
.title2::after{
    top:48%;
    right: 1em;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.title2.close::before{
transform: rotate(180deg);
}

.title2.close::after{
transform: rotate(180deg);
}

/* ここまで + アイコンの設定 */
/*アイコンの＋*/
/*.title3::before,*/
.title3::after{
	content: "";
  position: absolute;
  top: 40%;
	right: 1.2em;
  width: 0.4em;
  height: 0.4em;
  transform: rotate(45deg);
  border-top: solid 0.2em #fff;
  border-right: solid 0.2em #fff;
  transition: transform 0.4s;

}

/* ここから > アイコンの設定 */

/* ここまで > アイコンの設定 */

.box2 {
	display:none;
	background-color: #fff;
	margin: 0;
	padding: 0;
}

.box2 ul {
	margin: 0;
	padding: 0;
	
	height: 100%;
  	overflow: auto;
}

.box2 li {
	text-align: left;
}

.box2 li:not(:last-child) {
	border-bottom: solid 1px #ccc;
}

.box2 a {
	display: inline-block;
	width: 100%;
	padding: 1em;
}

	/* メニューが開いている時のスタイル */
.navigation.is-open{
   
    width: 100%;
    height: 100vh;     /* 高さを画面いっぱいに固定 */
    overflow-y: auto;  /* 中身が長い場合にスクロールを出す */

    padding-bottom: 130px; /* 一番下の項目が隠れないように余白 */
    -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかに */
}
	
	/* 本文固定 */
	body.no-scroll {
		overflow: hidden;
	}