/*
Theme Name: drop-child
Template: drop_tcd087
Version:2.10.1
*/

/* =========================================================
Drawer / Hamburger menu styles (migrated from responsive.css)
Range: メニューボタン ～ 検索フォーム
========================================================= */

/* --------------------------------
メニューボタン
-------------------------------- */
.global_menu_button {
	position:absolute;
	z-index:50;
	right:0px;
	bottom:0px;
	display:inline-block;
	font-size:11px;
	width:60px;
	height:60px;
	line-height:60px;
	text-decoration:none;
	text-align:center;
}

/* ★PCでも必ず表示させる（親テーマのdisplay:noneに勝つ） */
html.pc .global_menu_button,
.global_menu_button{
	display:block !important;
}

.global_menu_button span {
	width:22px;
	height:2px;
	background:#fff;
	display:block;
	position:absolute;
	-webkit-transition-property:background-color;
	-webkit-transition-duration:0.2s;
	-webkit-transition-timing-function:ease;
	transition-property:background-color;
	transition-duration:0.2s;
	transition-timing-function:ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.global_menu_button span:nth-child(1) { top:24px; left:20px; }
.global_menu_button span:nth-child(2) { top:30px; left:20px; }
.global_menu_button span:nth-child(3) { top:36px; left:20px; }
.global_menu_button:hover span { opacity:0.5; }

body.home .global_menu_button.animate {
	-webkit-animation: opacityAnimation 1.0s ease forwards 0s;
	animation: opacityAnimation 1.0s ease forwards 0s;
}
body.stop_index_slider_animation .global_menu_button { opacity:1; }

/* 親テーマ側に「非表示指定」がある場合はここで明示的に戻す */
body.hide_global_menu .global_menu_button {
	display:none !important;
}


/* --------------------------------
ドロワーメニュー
-------------------------------- */
#drawer_menu {
	display:block;
	position:fixed;
	top:0px;
	right:-400px;
	width:400px;
	height:100%;
	background:#333;
	overflow:auto;
	z-index:9999;
	-webkit-transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition:right 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-overflow-scrolling:touch;
}

/* ★open_menu で開く */
.open_menu #drawer_menu {
	right:0;
	box-shadow:-5px 0 20px 0 rgba(0,0,0,0.4);
}

@media screen and (max-width:500px) {
	#drawer_menu { right:-80%; width:80%; }
}

/* ドロワーメニュー展開時のオーバーレイ */
.open_menu #container:before {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:rgba(0,0,0,0.6);
	z-index:9999;
}

/* safariとedgeのみ背景をぼかす */
_::-webkit-full-page-media, _:future, :root .open_menu #container:before {
	background:rgba(0,0,0,0.6);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
}
@supports (-ms-ime-align: auto) {
	.open_menu #container:before {
		background:rgba(0,0,0,0.6);
		-webkit-backdrop-filter:blur(10px);
		backdrop-filter:blur(10px);
	}
}

/* ドロワーメニューのスクロールバー */
#drawer_menu .simplebar-scrollbar:before { background:#fff !important; }

/* admin bar利用時 */
body.admin-bar { padding-top:32px; }
body.admin-bar.header_fix_mobile #header { margin-top:32px; }
body.admin-bar #drawer_menu { padding-top:32px; }
.mobile body.admin-bar.header_fix_mobile { padding-top:102px; }

@media screen and (max-width:781px) {
	body.admin-bar { padding-top:46px; }
	body.admin-bar.header_fix_mobile #header { margin-top:46px; }
	body.admin-bar #drawer_menu { padding-top:46px; }
	body.admin-bar.fixed_find_menu #find_menu_wrap { top:46px; }
	body.admin-bar.fixed_find_menu { padding-top:106px; }
	.mobile body.admin-bar.header_fix_mobile { padding-top:126px; }
}


/* --------------------------------
ドロワーメニュー（閉じるボタン）
-------------------------------- */
#drawer_menu .close_button {
	display:block;
	width:100%;
	height:60px;
	position:relative;
	cursor:pointer;
	border-bottom:1px solid rgba(255,255,255,0.2);
}
#drawer_menu .close_button:before {
	font-family:'design_plus';
	color:#fff;
	font-size:18px;
	display:block;
	content:'\e91a';
	position:absolute;
	top:24px;
	right:17px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* --------------------------------
グローバルメニュー（mobile_menu）
-------------------------------- */
#header #global_menu { display:none; }

#mobile_menu, #drawer_extra_menu { width:100%; margin:0; }
#mobile_menu ul, #drawer_extra_menu ul { margin:0; }
#mobile_menu li ul, #drawer_extra_menu li ul { display:none; }

#mobile_menu a, #drawer_extra_menu a {
	position:relative;
	display:block;
	margin:0;
	padding:0 60px 0 20px;
	height:60px;
	line-height:60px;
	overflow:hidden;
	text-decoration:none;
	color:#fff;
	font-size:13px;
	border-bottom:1px solid #444444;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	visibility:visible;
}
#mobile_menu a:hover, #drawer_extra_menu a:hover {
	color:#fff!important;
	background: #444444;
}
#mobile_menu ul ul a, #drawer_extra_menu ul ul a { padding-left:32px; }
#mobile_menu ul ul ul a, #drawer_extra_menu ul ul ul a { padding-left:47px; }
#mobile_menu ul ul ul ul a, #drawer_extra_menu ul ul ul ul a { padding-left:60px; }

/* 子メニュー展開 */
#mobile_menu li, #drawer_extra_menu li { position:relative; }
#mobile_menu .child_menu_button, #drawer_extra_menu .child_menu_button {
	display:block;
	position:absolute;
	text-align:center;
	width:60px;
	height:60px;
	right:0px;
	top:-1px;
	z-index:9;
	cursor:pointer;
}
#mobile_menu .child_menu_button .icon:before, #drawer_extra_menu .child_menu_button .icon:before {
	font-family:'design_plus';
	content:'\e90e';
	color:#fff;
	text-align:center;
	display:block;
	font-size:12px;
	position:absolute;
	right:24px;
	top:29px;
}
#mobile_menu li.open > .child_menu_button .icon:before, #drawer_extra_menu li.open > .child_menu_button .icon:before { content:'\e911'; }
#mobile_menu .child_menu_button:hover, #drawer_extra_menu .child_menu_button:hover { background:rgba(0,0,0,0.2); }


/* --------------------------------
検索フォーム（フッター検索）
-------------------------------- */
#header_search { display:none; }
#footer_search {
	max-width:300px;
	height:45px;
	position:relative;
	overflow:hidden;
	background:rgba(255,255,255,0.2);
	margin:30px auto;
}
#footer_search .input_area input {
	width:calc(100% - 45px);
	color:#fff;
	height:45px;
	padding:0 10px;
	border:none;
	background:none;
	z-index:1;
	position:absolute;
	left:0px;
	top:0px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
#footer_search:hover .input_area input,
#footer_search.active .input_area input { left:0px; }
#footer_search .button input {
	background:none;
	width:45px;
	height:45px;
	border:none;
	position:absolute;
	right:0px;
	pointer-events:none;
	z-index:2;
}
#footer_search .button label {
	background:none;
	display:block;
	width:45px;
	height:45px;
	position:absolute;
	top:0px;
	right:0px;
	cursor:pointer;
	z-index:2;
}
#footer_search .button label:before {
	font-family:'design_plus';
	color:#fff;
	font-size:18px;
	content:'\e915';
	display:block;
	position:relative;
	top:16px;
	left:16px;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#footer_search .button label:hover:before { color:#0b8a97; }

@media screen and (max-width:450px) {
	#footer_search { margin:30px 20px; }
}