@charset "UTF-8";

/* 
==============================================================*/
.spMenu .drawer_button {
  position: fixed;
  top: 30px;
  right: 50px;
  z-index: 1001;
}

/* メニュー外のシャドウ部分 */
.spMenu .drawer_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background-color: rgba(51, 51, 51, 0.5);
  display: none;
  top: 0;
  left: 0;
}

@media screen and (max-width:768px) {
.spMenu .drawer_button {
  right: 20px;
}
}


/* MENU / CLOSE 部分
==============================================================*/

.drawer_button * {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  font: inherit;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: left;
  text-decoration: none;
  list-style: none;
}

.drawer_button {
  display: block;
  padding: 0;
  width: 42px;
  height: 26px;
  position: relative;
  background: none;
  border: none;
  text-align: center;
  letter-spacing: 0.1em;
  cursor: pointer;
  outline: none;
	/* テキスト「MENU / CLOSE」の色設定 */
	color: #5d4d41;
}

.drawer_button .drawer_bar {
  display: block;
  width: 42px;
  height: 2px;
  transition: all 0.2s;
  transform-origin: 0% 0%;
  transform: translateY(-50%);
  position: absolute;
  left: 0;
	/* ドロアボタン「三 / ×」の色設定 */
	background-color: #5d4d41;
}

.drawer_button .drawer_bar1 {
  top: 0;
}

.drawer_button .drawer_bar2 {
  top: 50%;
}

.drawer_button .drawer_bar3 {
  top: 100%;
}

.drawer_button.active .drawer_bar {
  width: 36.77px;
  left: 8px;
}

.drawer_button.active .drawer_bar1 {
  transform: rotate(0.7853981634rad) translateY(-50%);
  top: 0px;
}

.drawer_button.active .drawer_bar2 {
  opacity: 0;
}

.drawer_button.active .drawer_bar3 {
  transform: rotate(-0.7853981634rad) translateY(-50%);
  top: calc(100% - 0px);
}

.drawer_button.active .drawer_menu_text {
  display: none;
}

.drawer_button.active .drawer_close {
  display: block;
}

.drawer_text {
  width: 100%;
  position: absolute;
  bottom: -20px;
  left: 0;
  text-align: center;
  font-size: 10px;
}

.drawer_close {
  letter-spacing: 0.08em;
  display: none;
}



/* ナビゲーション部分
==============================================================*/

.spMenu .drawerNavWrapper {
  width: 320px;
  height: 100%;
  transition: all 0.2s;
  transform: translate(320px);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  /*background-color: #f4f2ed;*/
  background-color: #e0f1fa;
	padding-top: 90px;
	overflow: scroll;
}
.spMenu .drawerNavWrapper.open {
  transform: translate(0);
}
.spMenu.left .drawer_button {
  right: auto;
  left: 32px;
}
.spMenu.left .drawerNavWrapper {
  transform: translate(-320px);
  right: auto;
  left: 0;
}
.spMenu.left .drawerNavWrapper.open {
  transform: translate(0);
}

@media screen and (max-width:480px) {
.spMenu .drawerNavWrapper {
  width: 100%;
  transform: translate(100%);
}
}



/* ナビゲーション1階層目のスタイル
==============================================================*/

.spMenuList a {
  display: block;
  padding: 12px 12px 12px 20px;
	text-decoration: none;
	color :#fff;
  background :#006ea8;
  line-height: 1;
	border-bottom: 1px solid #fff;
	position: relative;
}

.spMenuList a:hover {
  background :#ffc041;
}


/* ナビゲーション・2階層目のスタイル
==============================================================*/

.drawerNavWrapper input {
	display: none;
}

.drawerNavWrapper label {
  display: block;
  margin: 0;
	padding: 12px 12px 12px 20px;
  line-height: 1;
	color :#fff;
	cursor :pointer;
}

.drawerNavWrapper label#label01 {
  background :#006ea8;
}

.acd-label{
    position: relative;
}

.spMenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background :#e4e0d4;
	border-bottom: 1px solid #fff;
}

.spMenu li {
  max-height: 0;
  overflow-y: hidden;
  -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li {
	max-height: 46px;
  opacity: 1;
	border-bottom: 1px solid #d8d2c1;
}

.spMenu ul li a {
  display: block;
  padding: 10px;
	text-decoration: none;
	color: #000;
  line-height: 1;
}

ul#links01 a {
	padding-left: 40px;
}

ul#links01 a:hover{
	background-color: #ffc041;
	color: #fff;
}


/* ナビゲーション下 企業名部分
==============================================================*/

.spMenuLogo {
	margin: 20px 20px 20px 20px;
}

.spMenu p.catchcopy {
	color: #5d4d41;
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.spMenu h1 {
	max-width: 300px;
  margin: 0 auto 10px;
}

.spMenu .btn-reserve-header {
	width: 220px;
	margin-bottom: 8px;
	margin-left: -3px;
}

.spMenu .tel-header	{
	max-width: 240px;
  margin: 0 auto;
}


.banner-spMenu {
	padding: 0 15px 30px;
}

.footer-banner-dogs,
.footer-banner-seitai {	
	margin-top: 20px;
}