@charset "utf-8";
@import url(common.css?p=20231026);


/*（ボタン・表示状態）*/
/* 緑 		：#03b208 */
/* オレンジ  ：#ff9600 */
/* 赤 		：#ff0066 */



/********************************************************************************************************************************************************************
（共通設定）
********************************************************************************************************************************************************************/
*{
}

body{}
#wrapper{}


nav#navi_top ul li a, h2.h2_style, h2.h2_left, .top_content h3, table.tbl_menu caption{ font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", 'Crimson Text', serif; }


/********************************************************************************************************************************************************************
（ボタン類定義）
********************************************************************************************************************************************************************/
.btn_S{}
.btn_M{}
.btn_L{}
.detail_link{ text-align: right; }
.detail_link a{ display: inline-block; padding: 3px 10px 3px 20px; background: var(--main_pnk); font-size: 12px; color: #fff; text-decoration: none; }
.detail_link a:hover{ background: var(--main_pnk70) }

/********************************************************************************************************************************************************************
（ヘッダー設定）
********************************************************************************************************************************************************************/
/*header{ padding: 0 20px 10px; background: #fff; }
#header_inner{ width: 100%; } 幅一杯 */

header{ padding: 0 0 10px; background: #fff; }
#header_inner{ max-width: 1000px; margin: 0 auto; }
	h1{ margin-bottom: 5px; font-size: 12px; font-weight: normal; }
	#logo{ width: 240px; float: left; }

	#header_r{ float: right; }
		.telephone{ display: inline-block; margin-bottom: 5px; padding-left: 34px; color: var(--main_pnk); line-height: 24px; font-size: 24px; font-weight: bold; text-decoration: none;
			background-image: url(/img/icon_tel.png);
			background-repeat: no-repeat;
			background-size: 24px;
		}
		.telephone:hover{ color: #ee4035; text-decoration: none; }

		.link_contact{ display: block; padding: 3px 0; border-radius: 15px; color: #fff; font-size: 14px; text-decoration: none; text-align: center;
			background-color: var(--main_pnk);
			/*background-image: url(/img/icon_mail.png);
			background-repeat: no-repeat;
			background-size: 16px;
			background-position: 15px center;*/
		}
		.link_contact:hover{ background-color: #ee4035; text-decoration: none; color: #fff; }

	
	#btn_spMenu.tcon{ display: none !important; }




/********************************************************************************************************************************************************************
（フッター設定）
********************************************************************************************************************************************************************/
footer{ padding: 10px 20px; background: var(--main_pnk); }
	#footer_inner *{ color: #fff; }

	/*#footer_inner{ width: 100%; } 幅一杯 */
	#footer_inner{ max-width: 1000px; margin: 0 auto; }

	#footer_inner ul{}
	#footer_inner ul li{ font-size: 13px; }	
	#footer_inner p#copy{ color: #ddd; text-align: center; font-size: 12px; }



/********************************************************************************************************************************************************************
（固定リンク）
********************************************************************************************************************************************************************/
#pc_fixed_ban_box{ width: 250px; position: fixed; right: 0; top: 30%; }
#pc_fixed_ban_box p{ margin-bottom: 10px; }

#sp_bottom_bar{ display: none; }


/********************************************************************************************************************************************************************
（ナビ設定）
********************************************************************************************************************************************************************/
/*nav#navi_top{}
nav#navi_top ul{ width: 100%; } 幅一杯 */

nav#navi_top{ border-top: 1px solid var(--main_pnk); border-bottom: 1px solid var(--main_pnk); }
nav#navi_top ul{ max-width: 1000px; margin: 0 auto; }

nav#navi_top ul li{ width: 16.666%; float: left; }
nav#navi_top ul li a{ display: block; padding: 10px 0; text-align: center; text-decoration: none; font-size: 20px; color: var(--main_pnk);
	-webkit-transition: 0.4s ;
	transition: 0.4s ;
}
nav#navi_top ul li a:hover, nav#navi_top ul li a.active{ background: var(--main_pnk); color: #fff; }

	p#close_menu{ display: none; }

#menu_ban_box{ display: none; }


/********************************************************************************************************************************************************************
（タイトル設定）
********************************************************************************************************************************************************************/
/*h2.h2_style{ margin-bottom: 10px; padding: 3px 20px; font-size: 18px; background: var(--main_pnk); color: #fff; font-weight: bold; }*/
h2.h2_styleTop, h2.h2_style{ margin-bottom: 20px; padding-left: 15px; border-left: 5px solid var(--main_pnk); font-size: 24px; }

h2.h2_left{ margin-bottom: 0; padding: 3px 0; font-size: 18px; background: var(--main_pnk); color: #fff; font-weight: normal; text-align: center; }

/*h3.h3_style{ margin-bottom: 20px; padding: 3px 20px; font-size: 18px; background: #333; color: #fff; font-weight: bold; }*/
h3.h3_style{ margin-bottom: 10px; border-bottom: 1px solid var(--main_pnk30); font-size: 24px; font-weight: normal; color: var(--main_pnk); }
h4.h4_style{}


/********************************************************************************************************************************************************************
（コンテンツ部設定）
********************************************************************************************************************************************************************/
/*main{ padding: 0px 0 50px 0; background: #f3f3f3; }*/
main{ padding: 10px 0 50px 0; background: #f3f3f3; }

/* 左右BOXの親 */
/*#main_inner{ width: 98%; margin: 20px auto 0; } 幅一杯 */
#main_inner{ max-width: 1000px; margin: 0 auto; }




/********************************************************************************************************************************************************************
（左カラム設定）
********************************************************************************************************************************************************************/
#left_box{ width: 24%; float: left; }

#left_box .box{ padding: 0 0 10px; }

	/* ログイン中表示 */
	/*#login_now{ padding: 8px 0; text-align: center; background: var(--main_blu); font-size: 13px; color: #fff; line-height: 1em; }*/
	#login_now{ padding: 8px 0; text-align: center; background: var(--main_pnk60); font-size: 12px; color: #fff; line-height: 1em; }

	/*　メニュー　*/
	#ul_left_menu{ padding: 10px 0; background: #fff; }
	#ul_left_menu li{}
	#ul_left_menu li:last-child{ margin-bottom: 0; }

	#ul_left_menu li a{ display: block; padding: 5px 0 5px 35px; color: #333; text-decoration: none; font-size: 16px;
		background-repeat: no-repeat;
		background-size: 16px;
		background-position: 10px center;
	}

	#ul_left_menu li a#side_entry{ background-image: url(/img/icon_man.png) }
	#ul_left_menu li a#side_login{ background-image: url(/img/icon_login.png) }

	#ul_left_menu li a#side_menu{ background-image: url(/img/icon_menu.png) }
	#ul_left_menu li a#side_salon{ background-image: url(/img/icon_shop.png) }
	#ul_left_menu li a#side_gallery{ background-image: url(/img/icon_gallery.png) }
	#ul_left_menu li a#side_pure{ background-image: url(/img/icon_cosme.png) }
	#ul_left_menu li a#side_contact{ background-image: url(/img/icon_mail2.png) }
	#ul_left_menu li a#side_privacy{ background-image: url(/img/icon_note.png) }
	#ul_left_menu li a#side_access{ background-image: url(/img/icon_train.png) }

	#ul_left_menu li a#side_mypage{ background-image: url(/img/icon_man.png) }
	#ul_left_menu li a#side_history{ background-image: url(/img/icon_history.png) }

	#ul_left_menu li a#side_logout{ background-image: url(/img/icon_logout.png) }

	#ul_left_menu li a:hover{ background-color: var(--main_pnk05); }

	#left_ban_box{}
	#left_ban_box p{ margin-bottom: 6px; }
	#left_ban_box p:last-child{ margin-bottom: 0; }

/********************************************************************************************************************************************************************
（右カラム設定）
********************************************************************************************************************************************************************/
#right_box{ width: 70%; padding: 2%; background: #fff; float: right; }

	.content_box{ margin-bottom: 50px; }
	.content_box:last-child{ margin-bottom: 0; }


	#pan{ text-align: right; font-size: 12px; }


/* 共通設定事項 */



/********************************************************************************************************************************************************************
（トップページ）
********************************************************************************************************************************************************************/
#slick_box{ background: #fff; }
	#slick{ max-width: 1000px; margin: 0 auto 20px; }

.top_info{ margin-bottom: 40px; padding: 10px 20px; border: 2px solid var(--main_pnk); background: var(--main_pnk05); }
.top_info h2{ margin-bottom: 10px; border-bottom: 1px solid var(--main_pnk); color: var(--main_pnk); font-size: 18px; }
.top_info p{ margin-bottom: 6px; }
.top_info p:last-child{ margin-bottom: 0; }

.top_main_text{ font-size: 18px; }

.top_content{ display: flex; }
.top_content:nth-child(2n-1){ background: #f7f7f7; }

.top_content h3{ margin-bottom: 10px; font-weight: bold; font-size: 24px; color: var(--main_pnk); }
.top_content .top_image{ width: 40%; }
.top_content .top_text{ width: 60%; padding: 10px 20px; font-size: 18px; }

.top_border_text{ padding: 10px 20px; border: 2px solid var(--main_pnk); font-size: 18px; }


/********************************************************************************************************************************************************************
（メニュー）
********************************************************************************************************************************************************************/
table.tbl_menu{ width: 100%; }
table.tbl_menu caption{ padding: 8px 0; background: var(--main_pnk); border: 1px solid #ccc; border-bottom: none; color: #fff; font-weight: normal; font-size: 16px; }
table.tbl_menu th, table.tbl_menu td{ padding: 8px 15px; border: 1px solid #ccc; vertical-align: middle; }
table.tbl_menu th{ background: var(--main_pnk20); color: #555; white-space: nowrap; }
table.tbl_menu td{ background: #fff; }
table.tbl_menu td.menu{ width: 73%; }
table.tbl_menu td.menu .desc{ margin-top: 5px; padding: 3px 8px; background: #f9f9f9; font-size: 10px; color: #777; }
table.tbl_menu td.time{ width: 12%; text-align: center; }
table.tbl_menu td.price{ width: 15%; text-align: right; }
table.tbl_menu td.price2{ width: 15%; text-align: right; color: var(--main_pnk); }
table.tbl_menu tr.option td{ color: var(--main_pnk); }

.menu_note{ font-size: 13px; color: var(--main_pnk); }

.menu_note_box{ margin-top: 10px; }
.menu_note_box p{ font-size: 10px; color: var(--main_pnk); }
.menu_note_box ul{}
.menu_note_box ul li{ font-size: 10px; color: var(--main_pnk); }

.h3_menu{ margin-bottom: 10px; padding: 8px 0; background: var(--main_pnk); border: 1px solid #ccc; border-bottom: none; color: #fff; font-weight: normal; font-size: 16px; text-align: center; }


/********************************************************************************************************************************************************************
（サロン情報）
********************************************************************************************************************************************************************/
table.tbl_info{ width: 100%; }
table.tbl_info th, table.tbl_info td{ padding: 8px 2%; border: 2px solid #fff; }
table.tbl_info th{ width: 30%; background: var(--main_pnk10); text-align: left; vertical-align: middle; font-weight: bold; }
table.tbl_info td{ background: #f9f9f9; }
table.tbl_info a{ color: #000; }

#google_map{ width: 100%; height: 500px; }



/********************************************************************************************************************************************************************
（ギャラリー）
********************************************************************************************************************************************************************/
#ul_gallery{}
#ul_gallery li{ width: 32%; margin: 0 2% 20px 0; float: left; }
#ul_gallery li:nth-child(3n){ margin-right: 0; }



/********************************************************************************************************************************************************************
（Pure）
********************************************************************************************************************************************************************/
#pure_img_box{ margin-bottom: 30px; }
	#pure_img_boxL{ width: 49%; float: left; }
	#pure_img_boxR{ width: 49%; float: right; }

.pnk_box{ margin-bottom: 10px; padding: 10px 20px; border-radius: 5px; background: var(--main_pnk05); }

.tbl_pure{}
.tbl_pure th, .tbl_pure td{ padding: 2px 10px; }
.tbl_pure th{ text-align: left; color: var(--main_pnk80); }



/********************************************************************************************************************************************************************
（お問い合わせ）
********************************************************************************************************************************************************************/
#contact_box{ padding: 30px 50px; background: var(--main_pnk05); border: 1px solid var(--main_pnk); }
#contact_box p{ margin-bottom: 20px; text-align: center; }
#contact_box p:last-child{ margin-bottom: 0; }

#contact_box p.text_big{ font-size: 20px; }
#contact_box p.text_small{ font-size: 12px; }

.telephone_big{ display: inline-block; padding-left: 40px; color: var(--main_pnk); line-height: 34px; font-size: 34px; font-weight: bold; text-decoration: none !important;
	background-image: url(/img/icon_tel.png);
	background-repeat: no-repeat;
	background-size: 34px;
}
.telephone_big:hover{ color: #ee4035; }



/********************************************************************************************************************************************************************
（各予約）
********************************************************************************************************************************************************************/
.h3_reserve{ margin-bottom: 5px; font-size: 18px; }
.h3_reserve:before{ content: '■'; margin-right: 5px; font-size: 28px; color: var(--main_pnk); }

.select_menu{ width: 100%; margin-bottom: 5px; }
.select_menu optgroup{ background: #fcc; color: #fff; }

/* メニュー詳細テーブル */
#tbl_menu_detail{ width: 100%; }
#tbl_menu_detail th, #tbl_menu_detail td{ padding: 3px 10px; border: 1px solid #ccc; }
#tbl_menu_detail th{ width: 30%; background: var(--main_pnk10); }

/* オプション */
#h4_option{ margin: 20px 0 10px; font-size: 16px; }
#ul_option{}
#ul_option li{ display: flex; justify-content: space-between; margin-bottom: 10px; }
#ul_option li:last-child{ margin-bottom: 0; }
#ul_option li p{ width: 5%; line-height: 100%; text-align: center; position: relative; }
#ul_option li p input{ position: absolute; top: 0; bottom: 0; margin: auto; }

#ul_option li .option_r{ width: 93%; }
	.tbl_option{ width: 100%; }
	.tbl_option th, .tbl_option td{ padding: 3px 10px; border: 1px solid #ccc; }
	.tbl_option th{ width: 30%; text-align: center; background: #f3f3f3; }


/* 予約状況「◯」「×」表 */
.p_scroll_ok{ background: #777; color: #fff; text-align: center; }
#tbl_daytime_wrap{ width: 100%; overflow-x: scroll; }
	.tbl_daytime{}
	.tbl_daytime th, .tbl_daytime td{ padding: 3px 5px; border: 1px solid #ccc; text-align: center; }
	.tbl_daytime th{ background: #f3f3f3; font-weight: normal; line-height: 1.3em; }
		.th_daytime_head{}	
		.th_daytime_head span{ font-size: 12px !important; }
		.bg_reserved{ background: var(--main_pnk20); }

	.tbl_daytime th.th_time{ position: sticky; left: 0; }



/********************************************************************************************************************************************************************
（プライバシーポリシー）
********************************************************************************************************************************************************************/
.dl_privacy{}
.dl_privacy dt{ margin-top: 20px; }
.dl_privacy dd{ margin-top: 5px; }



/********************************************************************************************************************************************************************
（ロケーションアクセス）
********************************************************************************************************************************************************************/
.img_text_box{ display: flex; justify-content: space-between; }
.img_text_box .text{ width: 50%; }
.img_text_box .img{ width: 48%; }