@charset "utf-8";

@media screen and (max-width : 767px){

/************************************
	共通設定
************************************/

/* width 100% 指定 */
.w1000,
.w920,
.w750,
.w700,
table,
#main_content{
	width:100% !important;
	overflow:hidden;
}

/* box-sizing:border-box; 指定 */
.des_alertCookie,
.des_formMail,
.foot_s a,
p.title_01,
p.title_02,
table td,
.w920 div.title_01,
td.hyou,
td.hyow,
.tbl_box td.tc1,
.tbl_box td.tc2{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

/* ステップの非表示 */
img[src="/rsImg/mirror/rsRsvtejun2.gif"],
img[src="/rsImg/mirror/rsRsvtejun3.gif"],
img[src="/rsImg/mirror/rsRsvtejun4.gif"],
img[src="/rsImg/mirror/rsRsvtejun5.gif"]{
	display:none;
}

/* タイトル部分中央揃え */
.des_stepTtl,
.des_stepSubTtl{
	width:100%;
	height:50px;
	display:block;
	overflow:hidden;
	text-align:center;
	position:relative;
}

.des_stepTtl img,
.des_stepSubTtl img{
	display:block;
	margin:0 0 0 -307px !important;
	position:absolute;
	top:0;
	left:50%;
}

/* 余分な<br>非表示 */
.des_stepTtl ~ br{display:none;}

/* タイトルバーの設定 */
#main_content p.title_01,
#main_content p.title_02,
#main_content table,
.w920 div.title_01,
.w920 table{width:100% !important;}

/* display:none; 設定 */
.des_dlt,
.des_sd_dlt{
	display:none;
}

.des_rsvRestName {
	padding-bottom: 30px;
}

.des_rsvRestName a.des_rsvRestLink {
	top: unset;
	right: calc(50% - 56px);
	bottom: -10px;
}

#res_wrapper #header_middle .cg::before {display:none;}

/************************************
	グローバルヘッダフッタ設定
************************************/
#header,
#csm_footer,
#cts {
	width:100% !important;
	min-width:100% !important;
	overflow:hidden;
}

#res_wrapper #cts .contents_wrap {
	width: 96%;
	margin: 0 2%;
}

#res_wrapper #header_middle .md_left{
	margin-left:10px;
}

#header #header_middle .md_right{
	width:180px;
	margin-right:10px;
}

#header #header_top,
#header #header_middle .md_center,
#header #header_middle .md_right .member .point{
	display:none;
}

.fbox,
.footer_pv,
.footer_area{
	display:none;
}

#csm_footer .inner,
#csm_footer .ikyu_service{
	width:100% !important;
	min-width:100% !important;
	text-align: center !important;
}


#csm_footer .ikyu_service a{
	width:100%; !important;
	display:block;
	text-align:left;
	margin:0 0 0 0;
	position:relative;
	border-bottom:1px solid #ddd !important;
	padding:15px 10px !important;
	font-size:11px;
}

#csm_footer .ikyu_service a:after{
	content:">";
	position:absolute;
	right:25px;
	top:50%;
	margin:-7px 0 0 0;
	color:#ccc;
	-webkit-transform: scale(1.0,2.0);
}

p.cpr{
	width:100% !important;
	text-align: center !important;
}

#csm_footer .ikyu_service{
	margin-top:0;
}

#csm_footer .ikyu_service p{
	margin:0;
}

/************************************
	キャンセルポリシー
************************************/
.nyroModalDom table{
	width:100%; !important;
	display:block;
	text-align:left;
	margin:0 0 40 0 !important;
}

/************************************
	メール認証ページ　
************************************/
.des_alertCookie{
	width:100% !important;
	padding:0 10px;
}

form .guest_mail_fmbox{
	width:auto !important;
	margin:20px 10px;
	padding:10px 10px 20px;
}

form .guest_mail_fmbox dl,
form .guest_mail_fmbox input{
	width:100% !important;
}

/************************************
	予約情報入力ページ　rsMirror/rsMirrorRsvApply.asp
************************************/

.tbl_box td.tc1{
	width:30%;
	text-align:left;
}

.tbl_box td.tc2{
	width:70%;
}

.rsv_detail{
	height:auto !important;
}

span.must{
	display:block;
	width:2.5em;
	margin:5px 0 0;
	text-align:center;
}

.tbl_box .tc2 .inner .attention{
	width:100%;
	position:relative;
	display:inline-block;
	top:auto !important;
}

.tbl_box .rsv_detail .sc2 .clsv:nth-child(3n+1){
	clear:both;
}

.pl_menu p{
	padding:8px 50px 8px 8px;
	min-height:46px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display:inline-block;
	vertical-align:middle;
}

.rsv_name label{
	display:block;
}

td.tc2 .rsv_name{
	padding:0;
}

td.tc2 .rsv_name input{
	display:inline-block;
	width:100%;
	margin-left:0;
	margin-right:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

td.tc2 .cls label{
	margin-left:0;
	display:block;
	padding: 8px 0;
	margin: 0px 3px;
}

td.tc2 .inner .rsv_adress .clearfix label{
	margin-left:0;
	display:block;
	padding: 8px 0;
	margin: 0px 3px;
}

.qa_box .qa_t_box{
	width:100%;
}

.qa_cnk label{
	display:block;
}

.c_attention{
	width:100% !important;
}

.option_detail div img{
	display:none;
}

.option_detail div.clearfix{
	border-bottom:1px dotted #ccc;
	padding-bottom:5px;
	margin-bottom:5px;
}

.option_detail div.clearfix:last-child{
	border:none;
}

.precautions p.cont > *{
	width:100% !important;
}

.tbl_box .rsv_date .sd2,
.tbl_box .rsv_detail .sc2,
.tbl_box .rsv_adress #email{
	margin-bottom:10px;
}

.tbl_box select{
	font-size:20px;
}

.formError{
	left:112px !important;
}


/************************************
	予約情報確認ページ　rsMirror/rsMirrorRsvConfirm.asp
************************************/
.payment_at{
	width:100%;
	float:none;
	margin-bottom:10px;
}

.payment_confirmation{
	width:100%;
	float:none;
	margin:0;
}

.payment_confirmation .cs_line.clearfix.dot_line{display:none;}

.payment_confirmation .cs_line.clearfix .cs2to4{
	display:none;
}

.payment_confirmation .cs_line.clearfix .cs1{
	width:100%;
	height:auto;
	float:none;
	background:#efefef;
	padding:5px 0 3px 10px;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.payment_confirmation .des_DetailTotal .cs_line.clearfix .cs1,
.payment_confirmation .des_Total .cs_line.clearfix .cs1{
	background:none;
	width:50%;
	float:left;
}

.payment_confirmation .des_Total .cs_line.clearfix .cs2,
.payment_confirmation .des_Total .cs_line.clearfix .cs3{
	display:none;
}

.payment_confirmation .des_Total .cs_line.clearfix .cs4{
	width:50%;
	float:right;
	padding:0;
	margin-right:0;
}

.payment_confirmation .des_Total .cs_line.clearfix .cs4:after{
	width:0;
	height:0;
	content:"";
}

.payment_confirmation .des_DetailTotal .cs_line.clearfix .cs2to4{
	display:block;
	width:50%;
	float:right;
}

.payment_confirmation .cs_line_detail.clearfix .cs1_detail{
	width:100%;
	float:none;
}

.payment_confirmation .cs_line.clearfix .cs2,
.payment_confirmation .cs_line.clearfix .cs3,
.payment_confirmation .cs_line.clearfix .cs4,
.payment_confirmation .cs_line_detail.clearfix .cs2,
.payment_confirmation .cs_line_detail.clearfix .cs3,
.payment_confirmation .cs_line_detail.clearfix .cs4{
	position:relative;
	display:inline-block;
	float:none;
	width:auto;
	padding-left:40px;
	margin-right:10px;
}

.payment_confirmation .cs_line.clearfix .cs2:after,
.payment_confirmation .cs_line.clearfix .cs3:after,
.payment_confirmation .cs_line.clearfix .cs4:after,
.payment_confirmation .cs_line_detail.clearfix .cs2:after,
.payment_confirmation .cs_line_detail.clearfix .cs3:after,
.payment_confirmation .cs_line_detail.clearfix .cs4:after{
	display:block;
	width:40px;
	height:20px;
	position:absolute;
	top:0;
	text-align:left;
}

.payment_confirmation .cs_line.clearfix .cs2:after,
.payment_confirmation .cs_line_detail.clearfix .cs2:after{content:"単価："; left:0;}

.payment_confirmation .cs_line.clearfix .cs3:after,
.payment_confirmation .cs_line_detail.clearfix .cs3:after{content:"数量："; left:0px;}

.payment_confirmation .cs_line.clearfix .cs4:after,
.payment_confirmation .cs_line_detail.clearfix .cs4:after{content:"合計："; left:0px;}

.payment_confirmation .cs_line_detail{
	margin-left:0;
}

/************************************
	予約後ログインページ　rsMirror/rsMirrorYCnfAuth.asp
************************************/
form[name="frmAuth"] table{background:#fffaf2; border:1px solid #E8D9BA;}


/************************************
	予約詳細　rsMirror/rsMirrorYCnfDtl.asp
************************************/
.des_stepTtl_cnf_t1 img{
	width:500px;
	height:auto;
	margin:0 0 0 -255px !important;
}

table.des_YCnfDtl_rsvEditBtn{width:auto !important; margin-bottom:20px;}
table.des_YCnfDtl_inputMail{
	width:90% !important;
	margin:0 auto;
}
table.des_YCnfDtl_inputMail td:first-child{width:100%; display:block; text-align:left;}
table.des_YCnfDtl_inputMail td:nth-child(2){width:100%; display:block;}
table.des_YCnfDtl_inputMail td:nth-child(2) input{width:95%; height:30px; box-shadow:none;}
table.des_YCnfDtl_inputMail td:nth-child(3){display:block; text-align:center; margin-top:5px;}

td[background="/rsImg/rsRsvplanbg1.gif"]{
	background:#F7E7B9;
}

td.hyou,
td.hyow {
	width:auto !important;
	border: 0;
	text-align: left;
	display: block;
}

td.hyou br {display: none;}

td.des_price table td.hyow {
	width: 25% !important;
	float: left;
}

td.des_price table td.hyow:first-child {
	display: block;
}

table img[src="/rsImg/sen550.gif"]{width:100%; height:auto;}

form img[src="/rsImg/go_ymap.gif"]{margin-bottom:20px;}


/************************************
	予約変更_入力　rsMirror/rsMirrorYCnfChg.asp
************************************/
form .hyow select{
	font-size:20px;
	margin:5px 0 10px;
}

/************************************
	予約変更_確認　rsMirror/rsMirrorYCnfChgCfm.asp
************************************/
img[src="/rsImg/rsYcnfchg_j1.gif"]{
	width:100%;
	height:auto;
	visibility:hidden;
}

.des_YCnfChgCfm_alertCfm{
	position:relative;
	display:block;
}

.des_YCnfChgCfm_alertCfm:after{
	position:absolute;
	width:100%;
	height:45px;
	content:"以下に内容をご確認の上、最後に「予約を変更する」ボタンをクリック";
	top:0;
	left:0;
	background:#eee;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:5px 50px;
}

table tr td.hyow div.m[align="right"]{
	text-align:left;
}

/************************************
	メールアドレス変更_入力　rsMirror/rsMirrorYCnfMailChg.asp
************************************/
.des_MailChg_input{
	width:90%;
	margin:0 auto;
}

/************************************
	メールアドレス変更_確認　rsMirror//rsMirrorYCnfMailChgCfm.asp
************************************/
td.hyow b.m{
	font-size:18px;
	color:#dd0000;
}

/************************************
	通知再受信_確認	rsMirror/rsMirrorYCnfMailChgCfm.asp
************************************/
.w920 table tr td table tr td.m,
.w920 table tr td table tr td.l{
	display:block;
}

td.l img[src="/rsImg/space.gif"]{
	display:none;
}

td.l b{
	font-size:18px;
	color:#dd0000;
}

/************************************
	予約取消_入力　rsMirror/rsMirrorYCnfCan.asp
************************************/
.des_Can_table{
	width:100%;
}

td.m textarea[name="upTxt"]{
	width:90%;
}

/************************************
	認証コード問い合わせ_入力　rsMirror/rsMirrorInfoMail.asp
	認証コード問い合わせ_完了　rsMirror/rsMirrorInfoMailUp.asp
************************************/
div.des_infoMail_stepTtl{
	height:auto;
}

div.des_infoMail_stepTtl div{
	width:100% !important;
	margin:0 auto;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.des_infoMail_table td div{
	display:none;
}

/************************************
	利用規約　rsMirror/rsMirrorTerms.asp
************************************/
.des_terms_textarea{
	width:90% !important;
	margin:0 auto;
}

img[src="/rsImg/ymap_3.gif"]{
	width:100%;
}

.des_terms_table{
	width:100%;
}

.des_terms_table td{
	display:block;
	width:100%;
	text-align:center;
}

.des_terms_table td:last-child{
	margin:10px auto 20px;
}

/************************************
	地図　rsMirror/rsMirrorMapView.asp
************************************/
.des_mapView,
.des_mapView_info,
.des_mapView table,
.des_mapView .title,
#canvas-wrapper{
	width:100% !important;
	overflow:hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.des_mapView .title01 {
	background:url(/rsImg/cmn/spriteCmn_new.png) no-repeat 0px -54px;
}

.des_mapView .title font{
	color:inherit;
}

.des_mapView .des_mapView_print{
	display:none;
}

#canvas-wrapper #map_canvas{
	width:90%;
	overflow:hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.des_mapView img{
	width:100%;
}

#canvas-wrapper{
	max-width:inherit !important;
	min-width:inherit !important;
}

.des_mapView_footer td{
	display:block;
}

.des_mapView_footer td:first-child,
.des_mapView_footer td:last-child{display:none;}

/************************************
	ヘッダー
************************************/
.head-top-of-top-rsv,
.rsNavi_waku,
.rsNavi_waku #cts,
.rsNavi_waku .head-2nd-of-top{
	width:100% !important;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.head-top-of-top-rsv{
	display:none !important;
}

.rsNavi_waku .head-2nd-of-top{
	height:auto !important;
	padding:10px 10px 0;
}


/************************************
	フッター
************************************/
.bottom_02{
	width:100% !important;
	margin-top:0px !important;
}

#totally_footer_hr,
.foot_s{
	width:100% !important;
	text-align:center !important;
}

.foot_s a{
	width:100%;
	display:block;
	text-align:left;
	padding:10px;
	border-bottom:1px solid #EBD4B7;
	position:relative;
}

.foot_s a:after{
	content:">";
	position:absolute;
	right:10px;
	top:50%;
	margin:-10px 0 0;
	color:#ccc;
	-webkit-transform: scale(1.0,2.0);
}

.foot_s a:nth-of-type(3){
	margin-bottom:10px;
}

.foot_s br,
.foot_s span{
	display:none;
}

.rsv_footer {
	width:100%;
	min-width:100%;
}

.rsv_footer .inner{
	width:100%;
	min-width:100%;
}


/************************************
	ラジオボックス・チェックボックス
************************************/
input[type="radio"], input[type="checkbox"] {
	-webkit-appearance: none;
	position: relative;
	border-radius: 5px;
	border: 1px solid #cccccc;
	-webkit-box-sizing: border-box;
	width: 18px;
	height: 18px;
	background: -webkit-gradient(linear,
								 left top,
								 left bottom,
								 from(#ffffff),
								 to(#f0f0f0)
								);
	vertical-align: middle;
}
input[type="radio"]:checked, input[type="checkbox"]:checked {
	border: 1px solid #e6c485;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#c47f00),
		to(#ddaf5b)
	);
}
input[type="radio"]:checked:before, input[type="checkbox"]:checked:before {
	position: absolute;
	left: -1px;
	top: 12px;
	display: block;
	-webkit-box-shadow: 0 1px 1px rgba(160, 105, 4, 1);
	content: "";
	width: 10px;
	height: 4px;
	background: #FFFFFF;
	-webkit-transform: rotate(45deg);
	-webkit-transform-origin: right center;
}
input[type="radio"]:checked:after, input[type="checkbox"]:checked:after {
	position: absolute;
	left: 7px;
	top: 12px;
	content: "";
	-webkit-box-shadow: 0 1px 1px rgba(160, 105, 4, 1);
	width: 13px;
	height: 4px;
	background: #FFFFFF;
	-webkit-transform: rotate(-53deg);
	-webkit-transform-origin: left center;
}

/************************************
	ボタン
************************************/
#des_YCnfAuth_btn,
#des_RsvCommit_btn,
#des_toYCnfChg_btn,
#des_toYCnfCan_btn,
#des_toYCnfMailCfm_btn{
	-webkit-appearance: none;
}

/************************************
	rsGuestRsvDtl.asp
************************************/
.des_rsv_list {
	text-align: center;
    display: inline-block;
    line-height: 1.6;
    padding: 10px 50px 10px 10px;
    background: #f4f4f4;
	border-radius: 3px;
}

.des_rsv_list ul {
	text-align: left;
	list-style: none;
}

.des_rsv_text_emphasis {
	font-size: 16px;
	font-weight: 700;
	color: #f66;
	margin: 10px 0;
}

.des_rsv_text{
	font-size:12px;
	line-height:1.6;
	color:#666;
	text-align: left;
	padding: 5px;
}

/************************************
	new rsGuestRsvDtl.asp
************************************/
.des_new_logo {
	height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.des_new_bg  {
	background-attachment: fixed;
	background-image: url("https://restaurant.img-ikyu.com/rsImg/top/award.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 30px 0;
	min-height: 97vh;
	position: relative;
}

.des_new_thanks {
	display: inline-block;
	font-size: 20px;
	line-height:35px;
	color: #fff;
	font-weight: 600;
	display: block;
	margin-bottom: 10px;
}

.des_new_rsv_text_attention {
	font-size: 11px;
    color: #c0b28b;
	padding: 0 20px;
}

.des_new_rsv_text  {
	font-size: 11px;
    color: #888;
    border-top: 1px solid #EBEBEB;
	padding: 20px;
	margin: 0;
}

.des_new_rest {
	font-size: 16px;
	line-height:22px;
	color: #333;
	font-weight: 600;
	display: block;
	margin-bottom: 10px;
}

.des_new_normal_text {
	color: #333;
	font-size: 13px;
	display: block;
    line-height: 1.8;
}

.des_new_grpList {
	font-size: 13px;
	background: #fff;
	border-radius: 4px;
	margin: 0 25px;
	text-align: left;
}

.des_new_resInfbox {
    padding: 25px 20px 0;
}

.des_new_confirm_botton {
	color: #fff;
	font-size: 16px;
	background-image: linear-gradient(30deg,#af9b65,#c0b28b);
	padding: 10px;
    text-align: center;
	border-radius: 2px;
	margin: 0 20px 20px;
	border: none;
	width: calc(100% - 40px);
}

.des_new_rsv_text_request {
	font-size: 11px;
    color: #888;
	padding: 0 20px;
	line-height: 1.6;
}

.des_new_rsv_text_emphasis {
	font-size: 14px;
    line-height: 1.6em;
    font-weight: 700;
    color: #ff7171;
    text-align: center;
    display: block;
    margin-bottom: 10px;
    border-top: 1px solid #EBEBEB;
    padding-top: 20px;
}

.des_new_rsv_list_wrapper {
	text-align: center;
    display: block;
    padding: 10px 30px 10px;
    background: #f4f4f4;
    border-radius: 2px;
    margin: 0 20px 10px;
}

.des_new_rsv_list {
	list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.des_new_rsrv_limitText {
	font-size: 11px;
	color: #fff;
	text-align: left;
	padding: 10px 25px 0px 25px;
	text-shadow: 1px 1px 1px #000;
}

.des_new_footer {
	color: #fff;
	font-size: 10px;
    right: 0;
	left: 0;
	padding-top: 40px;
}

/* チェックマークのアニメーション */
.circle {
	position: relative;
	border-radius: 50%;
	width: 70px;
	height: 70px;
	box-shadow: inset 0 0 0 2px #fff;
	animation: filling 0.2s ease-in 0.8s forwards;
	margin: 0 auto;

}

  .cover1,
  .cover2 {
	position: absolute;
	overflow: hidden;
	width: 50%;
	height: 100%;
}

  .cover1 {
	left: 50%;
}

  .cover1:before,
  .cover2:before {
	position: absolute;
	content: "";

}

  .cover1:before {
	width: 100%;
	height: 200%;
	transform-origin: 0 25%;
	animation: draw 0.3s linear forwards;
}

  .cover2:before {
	left: -10%;
	width: 110%;
	height: 120%;
	transform-origin: 100% 40%;
	animation: draw 0.3s ease-out 0.3s forwards;
}

  .check {
	position: absolute;
	width: 100%;
	top: 8px;
	opacity: 0;
	animation: check 0.2s ease-in-out 0.9s forwards;
	right: 0;
    left: 0;
}

.checkIcon{
	width: 50px;
    height: 50px;
}

/* 円を描くアニメーション */
@keyframes draw {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(180deg);
	}
}

/* 塗りのアニメーション */
@keyframes filling {
	0% {
	  box-shadow: inset 0 0 0 9px rgba(255,255,255,0.9);
	}
	100% {
	  box-shadow: inset 0 0 0 50px rgba(255,255,255,0.9);
	}
}

/* チェックマークのアニメーション */
@keyframes check {
	0% {
	  transform: scale(0.5) rotate(30deg);
	  opacity: 0;
	}
	90% {
	  transform: scale(1.3) rotate(-15deg);
	  opacity: 1;
	}
	100% {
	  transform: scale(1) rotate(0deg);
	  opacity: 1;
	}
}