@charset "UTF-8";

/*---------------------------------------------------------------
		基本設定
---------------------------------------------------------------*/
body{background-color:white;}
table { border-collapse: collapse; border-spacing: 0;}
table th{background-color:#FFFF99;}
.clear{clear:both;}
#reservePage p, #reservePage span{font-family: serif;}
/* style.cssの特殊設定をリセット */
form input[type="checkbox"]{margin: 0px 5px 0px 0px;vertical-align: middle;}
form select {-webkit-appearance: menulist;-moz-appearance: menulist;appearance: menulist;}
form input[type="text"] { width: 10.5rem;margin: 0 0.2rem;height: 2.5rem;border: solid 1px #DDD;border-radius: 3px;padding:0.2rem;font-size: 1rem;}
form input[name="Tel"] ,
form input[name="Mail"],
form input[name="Mail2"]{ width: 85%;}
form input[type="radio"]{vertical-align: middle; margin-right: 0.5em;}
form textarea{margin-bottom: 3%;width: 92%;border-radius: 3px;padding: 0.2rem;border: solid 1px #DDD;}
form{  box-shadow:none;  -webkit-box-shadow:none;}
a { -webkit-box-sizing: content-box;box-sizing: content-box;/* nivo対応 */}
form label{ padding: 0 5px 0 0;}
form .komeTxt{margin-left: 0.5rem;}
form .komeTxt02{color: red;}
@media only screen and (max-width: 950px) {
   form input[name="Tel"] ,
    form input[name="Mail"],
    form input[name="Mail2"]{ width: 96%;} 
    form textarea{width: 100%;max-width: 100%;}
}



/* 元に戻すここまで */

input.next{color:white;background-color:#e85017;width:65%;margin:20px auto 0 auto;font-size:14px;font-weight:bold; text-decoration:none;text-align:center;padding:10px 0 8px;border-radius:10px;}
input:hover.next,input:hover.login{background-color:white;color:#e95527;}
input:active.next,input:active.login{background-color:#CCC;color:#e95527;}
input.back{ background-color:#947f28; color:white; width:65%; margin:10px auto; font-size:14px; text-decoration:none; text-align:center; padding:10px 0 8px; border-radius:10px;}
input:hover.back{  background-color:white;  color:#947f28;}
input:active.back{ background-color:#CCC;}
#confBtnBox{ margin: 2rem 0 0;}
#confBtnBox .privacy_check{ text-align:center;}
#confBtnBox .privacy_check label{ padding: 0;}
#confBtnBox .privacy_check input[type="checkbox"] { vertical-align: middle;transform: scale(1.4);}
#confBtnBox .submit{ margin: 1rem 0 2rem;text-align:center;}
#confBtnBox .submit button{ margin: 0;background: none;border: none;width: auto;}
#confBtnBox .submit button:hover{opacity:  0.8;}

#contents{max-width: 1050px;width: 100%;}
.noto{font-family:'Noto Sans Japanese', Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
/*---------------------------------------------------------------
		(PC)
---------------------------------------------------------------*/
#reservePage .contentBox{margin: 0em auto;/*border-top: 1px solid #c4a76f;*/padding:5em 0 1em;}
#reservePage .contentBox.cake_select{padding:1em 0 1em }
#reservePage .contentBox:first-child{border: none;}
#reservePage h2{font-size:250%;color:#916135;font-weight: bold;margin-bottom: 0.5em;line-height: 1.2;padding: 0;}
#reservePage h2 span{font-size: 60%;display: block;}
#reservePage .explanation .aten{font-size: 100%;font-weight: bold;}
#reservePage .aten{font-size: 90%;color: #d5333f;font-weight: 500;line-height: 1.3;}

#reservePage .category_linkBox{margin-top: 2em;}
#reservePage .category_linkBox ul{display: flex;justify-content: center;align-items: center;gap:1em;}
#reservePage .category_linkBox ul li{width: 230px;text-align: center;font-size: 20px;font-weight: bold;color: #000;position: relative;}
#reservePage .category_linkBox ul li::after{content: "";display: block;color: #916135;width: 1em;height: 1em;border: 0.1em solid currentColor;border-left: 0;border-bottom: 0;box-sizing: border-box;transform: translateY(-25%) rotate(135deg);position: absolute;bottom: 0.8em;right: 0;left: 0;margin: auto;}
#reservePage .category_linkBox ul li span{display: block;}
#reservePage .category_linkBox ul li a{display:block;box-shadow:0px 0px 5px #c4a76f;padding: 0.5em 0.5em 2em;border:2px solid #c4a76f; border-radius: 10px; }
#reservePage .category_linkBox ul li a,
#reservePage .category_linkBox ul li a:visited{color: #000;}
#reservePage .category_linkBox ul li a:hover{text-decoration: none;box-shadow:none;}

#reservePage .cpn_bnr .bnr{margin-top:3em;}
#reservePage .cpn_bnr .cpn_atenBox{max-width: 600px;margin: auto;}
#reservePage .cpn_bnr .cpn_atenTtl{padding: 0;font-size: 110%;}
#reservePage .cpn_bnr .cpn_aten{font-size: 85%;line-height: 1.2;font-weight: 500;}
#reservePage .cpn_bnr .cpn_aten span{color: #8e0f07;}

#reservePage .snsBox{margin:1em auto 0;max-width:640px;width: 90%;background:#c6b7a3;padding: 0.5em;  }
#reservePage .snsBox .sns_inner{background:#fcf8eb;padding:1em 1.5em 0.5em; }
#reservePage .snsBox .sns_inner .snsTxt{font-size: 140%;color: #916135;font-weight: bold;border-bottom: 1px solid #916135;padding-bottom: 0;}
#reservePage .snsBox .sns_inner ul{display: flex;justify-content: center;align-items: flex-start;margin-top: 0.5em;}
#reservePage .snsBox .sns_inner ul li{padding: 0.5em;width: 45%;}
#reservePage .snsBox .sns_inner ul li .brown{color: #fff;font-weight: bold;background: #916135;font-size: 120%;padding: 0.5em 0 0.3em;line-height: 1;}
#reservePage .snsBox .sns_inner ul li .sns_name {padding:0.5em 1.5em 0;font-weight: bold;}
#reservePage .snsBox .sns_inner ul li .sns_name img{display: inline-block;margin-right: 0.2em;}

#reservePage .cake_select .selectBox{padding: 4em 0 0;margin-top: 1em;border-top: 1px solid #c4a76f;}
#reservePage .cake_select .selectBox.border-none{border-top:none;}
#reservePage .cake_select h3{padding: 1rem 0 1rem;font-size: 2rem;font-family: serif;background: #fff9f9;color: #957f29;border-left: 5px solid;border-right: 5px solid; margin-top: 2em;border-bottom: 1px solid;border-top: 1px solid;}
#reservePage .cake_select h4{margin-bottom: 1em;padding: 0;font-size:100%; }
#reservePage .cake_select h4 span{display: block;font-size: 100%;}
#reservePage .cake_select h5{font-size:25px;line-height: 1.3;}
#reservePage .cake_select h5 span.minfont{font-size:65%;display: block;}
#reservePage .cake_select .wholecakeBox{margin-top: 2em;}
#reservePage .cake_select .lineup{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items:stretch;max-width: 900px;margin: auto;}
#reservePage .cake_select .lineup .cake{padding: 1em;position: relative;width: calc(100% / 4);max-width: 224px;display: flex; flex-direction: column; justify-content: stretch;}
#reservePage .cake_select .lineup .cake .number{position: absolute;background: #d5333f;padding: 0.2em 0.5em;color: #fff;font-weight: bold;font-size: 20px;line-height: 1;z-index: 2;}
#reservePage .cake_select .lineup .cake .cake_name{padding: 0;font-weight: bold;border-bottom: 1px solid #c4a76f;line-height: 1.2;margin-bottom: 0.3em;}
#reservePage .cake_select .lineup .cake .cake_flavor{padding: 0;line-height: 1;}
#reservePage .cake_select .lineup .cake .cake_flavor span{font-weight: 600;color: #916135;}
#reservePage .cake_select .lineup .cake .cake_size{padding: 0;line-height: 1;}
#reservePage .cake_select .lineup .cake .cake_tax{text-align: end;font-size: 110%;padding: 0;margin-top: auto;}
#reservePage .cake_select .lineup .cake .cake_tax span{font-size: 80%;}
#reservePage .cake_select .lineup .cake .cake_photo a:hover{opacity: 0.9;z-index: -1;}
#reservePage .cake_select .lineup .cake .price{text-align: center;}

#reservePage .cake_select .wholecake{padding: 4em 0 0;margin: 2em auto 0;}
#reservePage .cake_select .wholecake .whole_ttl{text-align: center;font-weight: bold;font-size: 120%;line-height: 1.2;width: 100%;display: block;margin-top: 0.5em;}
#reservePage .cake_select .wholecake .whole_ttl span.under{border-bottom: 1px solid #c4a76f;margin-bottom: 0.3em;display: inline-block;padding: 0 2em;}
#reservePage .cake_select .wholecake .whole_ttl span.minfont{font-size: 100%;font-weight: normal;}
#reservePage .cake_select .wholecake .whole_ttl span.tax{font-size: 80%;}
#reservePage .cake_select .wholecake .whole_ttl.mt{margin-top: 2em;}
#reservePage .cake_select .wholecake .lineup{max-width: 650px;margin: auto;}
#reservePage .cake_select .wholecake .lineup .cake{width: calc(100% / 3);}
.form-button{position: fixed;right: 5%;bottom: 5%;}
.form-button a:hover{opacity: .8;}

#reservePage #formSec .cakekinds_dd .no-message span.sub_item,
#reservePage #formSec .cakekinds_dd .no-message label.cake_radio,
#reservePage #formSec .cakekinds_dd .no-message input.cake_message_text{display: none;}

#reservePage .cake_select .cookie.lineup{justify-content: center;}
#reservePage .cake_select .cookie.lineup .cake{width: calc(100% / 2);}

#reservePage .cake_select .selectBox.seasonal_cake{padding-top: 2em;}
#reservePage .cake_select .seasonal_cake{max-width: 650px;margin: auto;}
#reservePage .cake_select .seasonal_cake .cake{width: calc(100% / 3);}
#reservePage .cake_select .seasonal_cookie{justify-content: center;}
#reservePage .cake_select .seasonal_cookie .cake{width: calc(100% / 2);}

/*確認画面*/
#reservePage.confirmPage h2{font-size: 250%;color: #916135;font-weight: bold;}
#reservePage.confirmPage button{width: 35%;}
#reservePage.confirmPage #confirmArea{margin: 0 2em;}
#reservePage.confirmPage #confirmArea dt{width: 30%;font-size: 105%;}
#reservePage.confirmPage #confirmArea dt span{color: #916135;}
#reservePage.confirmPage #confirmArea dd{width: 69%;}
#reservePage.confirmPage #formSec{margin: 10em auto;}

/*完了画面*/
#reservePage.thanksPage .txtContact{margin-top: 2em;}
#reservePage.thanksPage #formSec{margin: 10em auto;}

/*---------------------------------------------------------------
		(SP)
---------------------------------------------------------------*/
@media only screen and (max-width: 950px) {
    #reservePage .contentBox{padding: 3em 0 1em;}
    #reservePage h2{font-size: 2rem;}
    #reservePage .aten{font-size: 75%;}
    
    #reservePage .category_linkBox ul{margin: 2em 2em 0;}
    #reservePage .category_linkBox ul li{width: calc(100% / 2);font-size: 1rem;}
    #reservePage .category_linkBox ul li span{width:60%;margin: auto;}
    #reservePage .category_linkBox ul li a{padding:0.5em 0.5em 1.5em; }
    #reservePage .category_linkBox ul li::after{bottom: 0.8em;}
    
    #reservePage .cpn_bnr .bnr{width: 90%;margin: 1em auto 0;}
    #reservePage .cpn_bnr .cpn_atenBox{width: 90%;margin: auto;}
    #reservePage .cpn_bnr .cpn_atenTtl{font-size: 3.3vw;line-height: 1.5;}
    #reservePage .cpn_bnr .cpn_aten{font-size:2.8vw;line-height: 1.2;font-weight: 700;}
    #reservePage .cpn_bnr .cpn_aten span{}
    
    #reservePage .snsBox .sns_inner{padding:1em 0.5em 0.5em; }
    #reservePage .snsBox .sns_inner .snsTxt{font-size: 100%;line-height: 1.2;padding-bottom: 0.3em;}
    #reservePage .snsBox .sns_inner ul li{width: 50%;padding: 0.2em;}
    #reservePage .snsBox .sns_inner ul li .brown{font-size:80%; }
    #reservePage .snsBox .sns_inner ul li .sns_name{padding:0.5em 0.5em 0 ;font-size: 75%;}
    #reservePage .snsBox .sns_inner ul li .sns_name img{display: none;}
    #reservePage .snsBox .sns_inner ul li .sns_iconsp{width: 35%;margin: auto;}
    #reservePage .snsBox .sns_inner ul li .sns_linksp a{border-bottom: 1px solid #572e1d;color:#572e1d ;font-size: 80%;font-weight: 500;margin-left: 0.5em;}
    #reservePage .cake_select .selectBox{margin-top: 1.5em;padding: 2em 0 0;}
    #reservePage .cake_select h3{margin: 1em 0.5em;font-size: 1.5rem;}
    #reservePage .cake_select h4{font-size: 100%;margin-bottom: 0;}
    #reservePage .cake_select h4 img{width: auto;height: 30px;}
    #reservePage .cake_select h5{font-size: 140%;}
    #reservePage .cake_select .lineup{margin: 0 1em;}
    #reservePage .cake_select .wholecake{padding: 3em 0 0;margin: 3em auto 0;}
    #reservePage .cake_select .lineup .cake,
    #reservePage .cake_select .wholecake .lineup .cake{width:calc(100% / 2); padding:0.5em 1em; }
    #reservePage .cake_select .lineup .cake .cake_name{font-size:90%;}
    #reservePage .cake_select .lineup .cake .cake_flavor{font-size:70%;}
    #reservePage .cake_select .lineup .cake .cake_tax{font-size: 90%;}
    #reservePage .cake_select .lineup .cake .cake_size{font-size: 80%;}
    #reservePage .cake_select .lineup .cake .number{font-size: 100%;}
    #reservePage .cake_select .lineup .cake .price{font-size: 90%;}
    #reservePage .cake_select .lineup .cake .price .tax{font-size: 80%;}
    .form-button{width: 35%;}
    #reservePage .cake_select .wholecake .whole_ttl{font-size:100%; }
    
    /*確認画面*/
    #reservePage.confirmPage h2{font-size: 150%;}
    #reservePage.confirmPage #confBtnBox .submit button{width: 60%;margin-bottom: 0.5em;}
    #reservePage.confirmPage #confirmArea{margin: 0 0em;}
    #reservePage.confirmPage #confirmArea dt{width: 100%;font-size: 90%;margin-bottom: 0;}
    #reservePage.confirmPage #confirmArea dd{width: 100%;}
    #reservePage.confirmPage #formSec{margin: 2em auto;}
    #reservePage.confirmPage #confirmArea dt span{color: #fff;}
    
    
    /*完了画面*/
    #reservePage.thanksPage h4{font-size: 150%;}
    #reservePage.thanksPage #formArea p{text-align: left;}
    #reservePage.thanksPage .txtContact{font-size: 75%;}
    #reservePage.thanksPage #formSec{margin: 2em auto;}
   
}

/*---------------------------------------------------------------
		フォーム部分
---------------------------------------------------------------*/
form dl:after {content:none;}
form dt{ width: 32%; background-color: white; color: #916135;padding: 1rem;font-size: 110%;display: inline-block;}
form dt span{font-family: serif;padding: 0.5rem;color:#FF0000; }
form dd{width: 67%;padding-top: 20px;padding-bottom: 20px;display: inline-block;padding: 1rem 0;}
form select{padding: 0.4rem 1rem 0.4rem 0.2rem;background: #FFF;border: 1px solid #939393;border-radius: 3px;height: 2.5rem;width: 78%;color: #000;font-size: 15px;}

#reservePage #formSec{background:#fff;max-width:850px;margin: 2em auto 0;box-shadow:0px 0px 5px #ccc;padding: 2em 3em;}
#reservePage #formSec fieldset{margin-top: 1em;display: flex;flex-wrap: wrap;}
#reservePage #formSec fieldset.mgt0{margin-top: 0;}
#reservePage #formSec fieldset .fieldsetBox{width: calc(100%/2);margin-bottom: 0.2em;}
#reservePage #formSec fieldset .fieldsetBox .cake-message{margin-bottom: 0.5em;}
#reservePage #formSec .cakekinds_dd label{display: block;font-size: 16px;margin-top: 0.3em;}
#reservePage #formSec .cakekinds_dd label:first-child{margin-top: 0;}
#reservePage #formSec .cakekinds_dd input[type="number"]{width: 10%;text-align: center;margin-left: 0.5em;}
#reservePage #formSec .cakekinds_dd input[type="text"]{width: 93%;margin-top: 0.5em;}

#reservePage #formSec .cakekinds_dd label.cake_radio{display: inline-block;}
#reservePage #formSec .cakekinds_dd span.sub_item{display: inline-block;margin-right: 0.5em;}


#reservePage #formSec .deliver_timeFlex{display: flex;}
#reservePage #formSec .deliver_timeFlex .timeBox{width: 45%;margin-left: 2%;}

#reservePage #formSec .total-price{border-top: 1px solid #916135;padding-top: 1em;}
#reservePage #formSec .total-price .price_txt{text-align: center;font-size: 22px;;}
#reservePage #formSec .total-price .aten{font-size: 90%;text-align: center;}

.submit button{margin: 0;}

#reservePage #formSec .deliver_info label{width: 100%;margin-bottom: 3%;display: inline-block;}
#reservePage #formSec .deliver_info span{width: 100%;display: inline-block;}
#reservePage #formSec .deliver_info input[type="text"]{width: 18rem;}
#reservePage #formSec .deliver_info label[for="deliver_Tel"]{margin-bottom: 0;}
#reservePage #formSec .deliver_info .deliver_aten{margin-left: 0%;}
#reservePage #formSec .deliver_info span.kotei{width: 17%;display: inline-block;padding-top: 0.2em;}


#formTb	.bgGray{background:#F2F2F2;}
#formTb .ui-widget.ui-widget-content{-webkit-box-shadow:1px 1px 4px 1px rgba(50, 50, 50, 0.4);box-shadow:1px 1px 4px 1px rgba(50, 50, 50, 0.4); /*transition:top 0.2s ease; */}
#formTb .ui-datepicker .ui-datepicker-title{line-height:1; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
#formTb .ui-datepicker select.ui-datepicker-month{font-size:100%; padding:0 0.2em; border-radius:5px; line-height:1; height:2em; border:#bbb solid 1px;}
/* 日曜日のカラー設定 */
#formTb td.ui-datepicker-week-end:first-child a.ui-state-default{background-color:#ffecec;  color:#f00!important;}
/* 土曜日のカラー設定 */
#formTb td.ui-datepicker-week-end:last-child a.ui-state-default{background-color:#eaeaff; color:#00f!important;}
/* ホバー時の動作 */
#formTb td.ui-datepicker-week-end a.ui-state-hover{opacity:0.8;}
/* 当日を示す色はそのまま */
#formTb td.ui-datepicker-week-end a.ui-state-highlight{background-color:#fffa90!important;}
/* カーソルをポインターに変更 */
#formTb #datepickerId_box{position:relative;  display:inline-block;  margin-right:1%;}
#formTb #datepickerId{position:absolute;  top:100%;  left:0;  display:none;z-index: 999;}
#formTb #datepickerId_output{cursor:pointer;margin-right: 5px;width: 100%;text-align: center;}
#formTb .hasDatepicker{}
#formTb .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{cursor:pointer; top:calc(50% - 0.9em);}


@media only screen and (max-width: 950px) {
    
    #reservePage #formSec{ width: 90%;padding:2em 1em; }
    #reservePage #formSec h2{ padding: 0; margin: 0 0 10% !important; width: auto !important;}
    form dt {width: 100%; background-color: #AD973D; color: white; }
    form dt,
    form dd {padding: 0.2em 0.5em;display: inline-block; margin-bottom: 8%;width: 100%;}
    form input[type="text"]{height: 2em;}
    form label[for="Name1_1A"],
    form label[for="Name1_1B"],
    form label[for="Name1_2A"],
    form label[for="Name1_2B"]{ width: 100%; margin-bottom: 3%;padding: 0;}
    form input[name="Name1_1A"],
    form input[name="Name1_1B"],
    form input[name="Name1_2A"],
    form input[name="Name1_2B"]{ width: 89%; margin-left: 3%;margin-bottom: 3%;}
    form select[name="Tel"],
    form select{height: auto;width: 85%;}
    form #mailInput .again{font-size: 80%;}
    
    
    #reservePage #formSec .deliver_info label{padding:0; }
    #reservePage #formSec .deliver_info input[type="text"]{width: 100%;}
    #reservePage #formSec .deliver_info input[name="deliver_address"]{width: 67%;margin-top: 0.5em;}
    #reservePage #formSec .deliver_info span.kotei{width: 30%;display: inline-block;}
    #reservePage #formSec fieldset .fieldsetBox{width: auto;min-width: 50%;}
    #reservePage #formSec fieldset .fieldsetBox.spw100{width: 100%;}
    #reservePage #formSec .cakekinds_dd label{font-size: 85%;}
    #reservePage #formSec .cakekinds_dd input[type="text"]{width: 96%;height: 2em;margin-bottom: 0.5em;}
    #reservePage #formSec .cakekinds_dd label.cake_radio{padding:0 5px 0 0; }
    #reservePage #formSec .cakekinds_dd span.sub_item{font-size:80%; }
    
    #reservePage #formSec .deliver_timeFlex{display: block;}
    #reservePage #formSec .deliver_timeFlex #datepickerId_box{width: 100%;}
    #reservePage #formSec .deliver_timeFlex .timeBox{margin: 0.5em 0;width: 100%;}
    #reservePage #formSec .deliver_timeFlex .timeBox #time{width: 100%;padding: 0.2rem 1rem 0.2rem 0.2rem;}
    
    .deliver_timeFlex{display: block;}
    .timeBox{width: 100%;margin: 2% 1% 0;}
    .deliver_info span{width: 100%;}
    .deliver_info .deliver_aten{margin-left: 0%;}
    #reservePage #formSec .total-price .aten{font-size: 78%;}
    form .komeTxt{font-size: 80%;}
    #confBtnBox .privacy_check label{font-size: 80%}
    #confBtnBox .submit button{width: 75%;}
    
}