@charset "utf-8";
/* CSS Document */




/* 全体 */
* {
	margin: 0px;
	padding: 0px;
	border: none;
	word-break: break-all;
	/* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; */
	/* letter-spacing: 0.08em; */
	font-style: normal;
	/* font-size: 15px; */
	list-style: none;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}




#pc_menu_ti {
	width: 370px;
	height: 80px;
	overflow: hidden;
	background-color: hsla(19,8%,45%,0.90);
	margin: 0;
}


#pc_menu_ti p {
	font-size: 1.6em;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	letter-spacing: 0.05em;
	color: #FFF;
	padding: 30px 5% 2%;
	text-align: left;
}


/* inputのデフォルトボーダーを非表示に */
#action_btn:focus {
	outline-offset: inherit;
	outline-color: hsla(0,0%,100%,0.00);
	outline: none;
}




/* IE不可のためhack */
#header_menu {display: none\0;}/* IE 8 or over */
#header_menu {display: none\9;}/* IE10 or less */



#header_menu {
	cursor: pointer;
	position: fixed;
	top: 70px;
	right: 40px;
	width: 50px;
	height: 70px;
	z-index: 2200000000 !important;
}

#header_menu.active {
  box-shadow: 1px 1px 6px rgba(105, 105, 105, 0.5);
}

#header_menu #header_menu_btn {
  width: 100%;
  height: 45px;
  /* background: #0685AE; */
  /* border-bottom: 0px solid #cccccc; */
}



/* ロード時　≪button内の「三」と「×」部分≫ */
#header_menu input#action_btn {
    width: 50px;
	height: 50px;
    cursor: pointer;
    margin: 0;
    padding: 0;
	position:absolute;
	transition: 0s;
	/* transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out; */
    background: url(pc_menu_op.svg) 0 0 no-repeat;
	background-color: #897d79;
    background-size: 50px 50px;
	background-position: center;
    -webkit-appearance: none;
    border: none;
    border-radius: 50px;
    z-index: 1000000000;
	box-shadow: 0 3px 2px hsla(0,0%,50%,0.30);
}


#header_menu input#action_btn:hover {
	top: 1px;
	box-shadow: 0 2px 2px hsla(0,0%,50%,0.50);
	transition: 0s;
}


/* クリック後　≪button内の「三」と「×」部分≫ */
#header_menu input#action_btn:checked {
	width: 50px;
	height: 50px;
	transition: 0s !important;
	/* transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out; */
	/* ボタンをイメージで置き換え */
	background: url(pc_menu_cl.svg) right 0px top 0px no-repeat;
	background-size: 50px 50px;
	background-position: center;
	margin:0;
	padding: 0;
	box-shadow: 0 0px 0px #999;
}


#header_menu input#action_btn:checked:hover {
	top: 0px;
	border: 1px solid #897d79;
	box-shadow: 0 0px 0px #999;
	transition: 0s !important;
}



.action_menubox {
	box-shadow: 0 3px 5px #666;
	margin-top: 56px;
	height: calc( 100% - 56px );
	box-sizing: border-box;
}

/* ≪メニューが戻る時≫ */
#header_menu input#action_btn~.action_menubox {
	width: 370px;
	/* height: 100%; */
	position:fixed;
	right: -375px;/* ドロップシャドー分 加算 */
	top: 0px;/* 56px */
	transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	/* background: hsla(0,0%,100%,0.80); */
}


/* ≪メニューが出る時≫ */
#header_menu input#action_btn:checked~.action_menubox {
	transition: 0.1s ease-in-out;
	left: 0px;
	left: auto;
	right: 0;
	top: 0; /* 56px */
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	overflow-x: hidden;
	z-index: 100000000;/* 2147483646 */
	/* background: hsla(0,0%,100%,0.80); */
}


#header_menu input#action_btn~.action_menubox iframe {
	width: 370px;
	height: calc( 100% - 80px );
	margin-top: 0;/* 楽天ヘッダー上部バナー高さ 56px */
	border:none;
	display:block;
	z-index: 100000000;
	/* background: hsla(0,0%,100%,0.90); */
	box-sizing: border-box;
	/* box-shadow: 0 3px 5px #666; */
}



/* PCページでウインドウ幅を狭めた場合にメニューを非表示 */
@media screen and (max-width: 700px) {

    #navi { display: none;}

}