/*!
 * jquery-drawer v3.2.2
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
 */

/*!------------------------------------*\
		Navbar
\*!------------------------------------*/

*,
*::before,
*::after {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
        box-sizing: border-box;
	}
	
.drawer-menu{
	margin:0 auto;
	padding:20px;
	}
.drawer-menu ul{
	float:none;
	width:100%;
	padding-right:0;
	}
.drawer-menu li{
	display:block;
	border-top:1px solid #eee;
	}
.drawer-menu li:last-child {
	border-bottom:1px solid #eee;
	}
.drawer-menu li > a{
	padding:15px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:5px;
	text-align:left;
	text-decoration:none;
	color:#111;
	font-weight:700;
	}
.drawer-menu li > a i{
	color:#e71b4e;
	}
.drawer-menu li > a:hover i{
	color:#fff;
	}
.drawer-menu li > a:hover,
.drawer-menu li > a:active{
	background:#CB1543;
	color:#fff;
	}	


/*SPオンリー*/
.drawer-menu li.dispSP{ display:block;}

/*ロゴ*/
.drawer-menu li.logo {
	float:none;
	width:100%;
	max-width:100%;
	padding-right:50px;
	}
/**/
.drawer-menu li.dw-ttl{
	font-weight:bold;
	text-align:center;
	padding:17px 5px;
	}

.drawer-menu li a .dw-speech{
	display: inline-block;
	position:relative;
	/*background:#c80000;*/
	background:#ee006a;
	color:#fff;
	text-align:center;
	padding:10px 20px;
	font-size:0.76em;
	line-height:1.2em;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	margin-left:10px;
	}
.drawer-menu li a .dw-speech br{ display:none;}
.drawer-menu li a .dw-speech:before{ display:none;}


@media only screen and (min-width: 980px){
	.drawer-menu{ padding:0;}
	.drawer-menu:after {
		content: '';
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
		}
	.drawer-menu ul{
		max-width:960px;
		display:flex;
		align-items: stretch;
		justify-content: space-between;
		margin-left:auto;
		margin-right:auto;
		}
	.drawer-menu li{
		border:none;
		flex: auto;
		border-left:1px solid #eee;
		}
	.drawer-menu li:last-child {
		border-right:1px solid #eee;
		border-bottom:none;
		}
	.drawer-menu li a{
		padding:20px 5px;
		height:100%;
		justify-content:center;
		text-align:center;
		}
	
	/*SPオンリー*/
	.drawer-menu li.dispSP{ display:none;}
	/*ロゴ*/
	.drawer-menu li.logo{}

	.drawer-menu li a .dw-speech{
		display:block;
		position:absolute;
		bottom:-30px;
		margin-left:auto;
		}
	.drawer-menu li a .dw-speech br{ display:inline-block;}
	.drawer-menu li a .dw-speech:before{
		display:block;
		position:absolute;
		top:-10px;
		left:calc(50% - 10px);
		content:'';
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		/*border-bottom: 15px solid #c80000;*/
		border-bottom: 15px solid #ee006a;
	}
}


/*!------------------------------------*\
    Base
\*!------------------------------------*/

.drawer-open {
  overflow: hidden !important;
}
/*! overlay */

.drawer-overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
}

.drawer-open .drawer-overlay {
  display: block;
}
.drawer-open .drawer-nav{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/*ヘッダーの中にメニューを入れている場合は、オーバーレイより上にする*/
#header{z-index: 801;}

/*! メニューBOX */
.drawer-nav {
	position: fixed;
	z-index: 802;
	overflow: hidden;
	background-color:#fff;
	border:none;
}

@media only screen and (min-width: 980px){
	.drawer-nav {
		position:relative;
		overflow: initial;
		display:block !important;
		opacity:1 !important;
		top:0 !important;
		padding:0 !important;
		border-top:1px solid #eee;
		border-bottom:1px solid #eee;
		}
	.drawer-nav.drawer-nav--fixed {
		background-color: rgba(255,255,255,0.9);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		}
}

/*!------------------------------------*\
    Top
\*!------------------------------------*/

.drawer--top .drawer-nav {
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--top.drawer-open .drawer-nav {
  top: 0;
}




/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/
.drawer-hamburger {
  /* Flexboxで中身を整列させる設定 */
  display: flex;
  flex-direction: column; /* 縦並びにする */
  justify-content: center; /* 垂直方向の中央揃え */
  align-items: center;     /* 水平方向の中央揃え */
  position: relative;
  z-index: 99999;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #ffffff;
  cursor: pointer;
  border-radius: 3px;
  box-sizing: border-box;
	/* 背景の設定 */
  background: linear-gradient(135deg, #e271a8 0%, #f08f9e 33%, #f5af83 66%, #fedd5b 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  transition: transform 0.25s ease, background-position 0.5s ease;
}

.drawer-hamburger:hover {
  background-position: 100% 100%;
}

/* --- アイコン部分 (.drawer-hamburger-icon) --- */
.drawer-hamburger-icon {
  display: block;
  line-height: 1; /* 余計な隙間をなくす */
  
  /* 元々の margin-bottom は削除します */
  margin: 0; 
}

/* Font Awesome アイコン表示 (疑似要素) */
.drawer-hamburger-icon:before {
  font-family: var(--font-icon);
  font-weight: 900;
  content: "\f0c9"; /* fa-bars */
  font-size: 20px;  /* アイコンサイズ（バランスを見て微調整してください） */
  color: #fff;
  display: block;
  transition: transform 0.3s ease;
}

/* --- 文字部分 (.drawer-hamburger-text) --- */
.drawer-hamburger-text {
  /* absolute配置をやめて、自然な配置に戻します */
  position: static; 
  width: auto;
  line-height: 1;
  font-size: 10px; /* 文字サイズ */
  text-align: center;
  font-weight: 700;
  margin-top: 5px; 
}

/* --- 開いたとき (.drawer-open) --- */
.drawer-open .drawer-hamburger-icon:before {
  content: "\f00d"; /* fa-xmark */
}

/* 不要な要素の非表示 */
.drawer-hamburger-icon:after {
  display: none;
}

.drawer-toggle--fixed{
	position: fixed;
	top: 20px;
	right: 20px;
  z-index: 99999;
	}

@media only screen and (min-width: 980px){
  .drawer-hamburger {
    display: none;
  }
}


/*!------------------------------------*\
    accessibility
\*!------------------------------------*/

/*!
 * Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content
 */

.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/*!
 * Use in conjunction with .sr-only to only display content when it's focused.
 * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 * Credit: HTML5 Boilerplate
 */

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
}