@charset "utf-8";
/* CSS Document */

/*===================================================
                                               共通
===================================================*/
#headerArea{background: #e94709;padding: 0.5em 3em;}
#headerArea .snsBox{display: flex;}
#headerArea .snsBox .sns{margin: 0 1em;line-height: 1;}

#footerSec{background: #e94709;padding: 2em 4em;}
#footerSec .txt{color: #fff;}

.section{padding: 2em 0;}
.section .sectionInner{max-width: 950px;width: 95%;margin:0 auto;}


/*===================================================
                                           mainView
===================================================*/
#mainView{padding-bottom: 0;}
#mainView .ttl{font-size: 46px; line-height: 1.4;}
#mainView .ttl span{font-size: 70%; color: #e94709;}
#mainView .lead{font-size: 18px; margin: 1em auto;}
#mainView .explanation{background-color: #f2f2f2; margin-top: 2em;}
#mainView .explanation img{width: 100%; height: auto;}


/*===================================================
                                            formSec
===================================================*/
/*----- 共通 -----*/
#formSec select, 
#formSec textarea, 
#formSec button, 
#formSec input{display: inline-block; font-size: 18px; font-weight: normal; padding: 10px 15px; width: 100%; max-width: 100%; border: 1px solid #aaa; box-shadow: none; color: #000; background: #fff; border-radius: 10px; line-height: 1.8em;}
#formSec label{display: inline-block; font-size: 20px; font-weight: 700; margin: 0;}

#formSec .formBox{margin: 2em auto; padding: 2em; box-shadow: #ccc 0 0 6px; border-radius: 10px;}
#formSec .formBox .formTtl{position: relative; display: flex; align-items: center; gap: 0.5em; font-size: 30px; text-align: left; line-height: 1; margin-bottom: 0.8em;}
#formSec .formBox .formTtl .num{display: inline-block; font-size: 75%; color: #fff; background-color: #e94709; border-radius: 5px; padding: 0.4em;}
#formSec .formBox.box01{margin-top: 0;}
#formSec .formBox.box01 .formTtl::after{content: ""; width: 1em; height: 1em; background: url(../images/icon_user.svg) no-repeat center /  contain; margin: 0.1em 0 0 -0.3em;}
#formSec .formBox.box02 .formTtl::after{content: ""; width: 1em; height: 0.9em; background: url(../images/icon_box.svg) no-repeat center /  contain; margin: 0.2em 0 0 -0.2em;}
#formSec .formBox.box03 .formTtl::after{content: ""; width: 1.1em; height: 1em; background: url(../images/icon_comment.svg) no-repeat center /  contain; margin: 0.1em 0 0 -0.2em;}


/*----- 01 基本情報 -----*/
#formSec .formList{display: flex; flex-wrap: wrap; gap: 1.5em;}
#formSec .formList .formItem{position: relative; display: flex; flex-direction: column; gap: 0.5em; width: 100%;}
#formSec .formList .formItem.half{width: 48%;}
#formSec .formList .formItem .required::after{content: "必須"; color: #fff; background-color: #e94709; border-radius: 5px; margin-left: 1em; font-size: 80%; font-weight: 500; padding: 0 0.5em;}
#formSec .formList .formItem .optional::after{content: "任意"; color: #666; background-color: #e1e1e1; border-radius: 5px; margin-left: 1em; font-size: 80%; font-weight: 500; padding: 0 0.5em;}

/* 住所 */
#formSec .formList .formItem .zipArea{display: flex; gap: 0.5em;}
#formSec .formList .formItem .zipArea input{width: 12em;}
#formSec .formList .formItem .zipArea .zipSearch{width: 8em; color: #fff; background-color: #00aeac; font-weight: 600; border: none; cursor: pointer;}
#formSec .formList .formItem .addressArea{display: flex; gap: 0.5em;}
#formSec .formList .formItem .addressArea #prefecture{width: 12em; height: 100%; -webkit-appearance: none; appearance: none;}
#formSec .formList .formItem .addressArea .select_wrapper{position: relative; width: auto;}
#formSec .formList .formItem .addressArea .select_wrapper::after {content: ""; position: absolute; top: 50%; right: 1em; width: 0.6em; height: 0.6em; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg) translate(-50%,-50%);}

/* 日時 */
#formSec #datepickerId_box{position:relative; display:inline-block;}
#formSec #datepickerId{position:absolute;  top:100%; left:0; display:none; z-index: 999;}
#formSec #datepickerId_output{cursor:pointer; color: #000; background: url(../images/icon_calendar.svg) no-repeat right 0.8em center / 1.4em;}
#formSec .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; */}
#formSec .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;}
#formSec .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;}
/* 日曜日のカラー設定 */
#formSec td.ui-datepicker-week-end:first-child a.ui-state-default{background-color:#ffecec;  color:#f00!important;}
/* 土曜日のカラー設定 */
#formSec td.ui-datepicker-week-end:last-child a.ui-state-default{background-color:#eaeaff; color:#00f!important;}
/* ホバー時の動作 */
#formSec td.ui-datepicker-week-end a.ui-state-hover{opacity:0.8;}
/* 当日を示す色はそのまま */
#formSec td.ui-datepicker-week-end a.ui-state-highlight{background-color:#fffa90!important;}
/* カーソルをポインターに変更 */
#formSec #datepickerId_box{position:relative;  display:inline-block;}
#formSec #datepickerId{position:absolute;  top:100%;  left:0;  display:none;z-index: 999;}
#formSec #datepickerId_output{color: #000;}
#formSec .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{cursor:pointer; top:calc(50% - 0.9em);}


/*----- 02 ご希望商品・仮数量 -----*/
#formSec .formBox:nth-of-type(2) .formTtl{margin-bottom: 0;}
/* 商品 */
#formSec .productArea .productItem{display: grid; grid-template-columns: 1fr 15em 4em; gap: 1em; padding: 1em 0.5em;}
#formSec .productArea .productItem:first-child{padding-top: 0;}
#formSec .productArea .productItem:not(:last-child){border-bottom: #aaa dashed 1px;}
#formSec .productArea .productItem .quantityBox{display: flex;}
#formSec .productArea .productItem .quantityBox .quantity{border-radius: 0; text-align: center;}
#formSec .productArea .productItem .quantityBox .quantity::-webkit-inner-spin-button,
#formSec .productArea .productItem .quantityBox .quantity::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0; -moz-appearance:textfield;}
#formSec .productArea .productItem .quantityBox .plus{width: 3em; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0;}
#formSec .productArea .productItem .quantityBox .minus{width: 3em; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;}
#formSec .productArea .productItem .remove{background: #fff0f1 url(../images/icon_trash.svg) no-repeat center / 1.2em; border-color: #e94709; line-height: 1;}
#formSec .productArea #addProduct{cursor: pointer; color: #fff; border: none; background-color:#00aeac; font-weight: 600;}

/* オプション */
#formSec .optionArea{margin-top: 1em;}
#formSec .optionArea .optionTtlBox{display: flex; justify-content: space-between; align-items: end;}
#formSec .optionArea .optionTtlBox .optionTtl{font-size: 24px; font-weight: 700;}
#formSec .optionArea .optionTableWrapper{border: 1px solid #aaa; border-radius: 10px;}
#formSec .optionArea .optionTable,
#formSec .optionArea .optionTable tr,
#formSec .optionArea .optionTable th,
#formSec .optionArea .optionTable td{border: none; margin: 0; padding: 0;}
#formSec .optionArea .optionTable{width: 100%;}
#formSec .optionArea .optionTable tr:not(:last-child){border-bottom: 1px solid #aaa;}
#formSec .optionArea .optionTable th{width: 50%; font-size: 20px; border-right: 1px solid #aaa;}
#formSec .optionArea .optionTable .optionBtnGroup{display: flex; gap: 0.5em; padding: 0.8em 1em;}
#formSec .optionArea .optionTable .optionBtnGroup .optionBtn{width: calc(100% / 2);}
#formSec .optionArea .optionTable .optionBtnGroup .optionBtn input[type="radio"]{display: none;}
#formSec .optionArea .optionTable .optionBtnGroup .optionBtn label{width: 100%; padding: 6px 15px; font-size: 18px; text-align: center; line-height: 1.8em; color: #aaa; background-color: #fff; border: 1px solid #aaa; border-radius: 6px; cursor: pointer;}
#formSec .optionArea .optionTable .optionBtnGroup .optionBtn input[type="radio"]:checked + label{background-color: #eaffff; color: #00aeac; border: 2px solid #00aeac;}

/*----- 申込ボタン -----*/
#formSec .btnBox .submit{color: #fff; background-color: #e94709; border: none; font-size: 28px; font-weight: 600;}

/*----- 注意事項 -----*/
#formSec .atention{background-color: #f2f2f2; border-radius: 10px; margin-top: 4em; padding: 1em;}
#formSec .atention .tel{font-size: 140%; font-weight: 600;}
#formSec .atention .tel a{color: #000; text-decoration: none;}


/*===================================================
                                         confirmSec
===================================================*/
#confirmSec #confirmBox{margin: 0 auto 2em; padding: 2em; box-shadow: #ccc 0 0 6px; border-radius: 10px;}
#confirmSec #confirmBox h2{font-size: 30px; line-height: 1; margin-bottom: 1em;}

#confirmSec .confirmList{width: 100%;}
#confirmSec .confirmList dl{display: flex; border-bottom: #aaa dashed 1px;}
#confirmSec .confirmList dl:first-child{border-top: #aaa dashed 1px;}
#confirmSec .confirmList dl dt{font-size: 18px; line-height: 1.4; width: 30%; padding: 1em; text-align: center; background-color: #f1f1f1; display: flex; align-items: center; justify-content: center;}
#confirmSec .confirmList dl dd{font-size: 18px; line-height: 1.4; width: 70%; padding: 1em;}

#confirmSec #confBtnBox{display: flex; gap: 2em; width: 80%; margin: 2em auto 0;}
#confirmSec #confBtnBox .btn{width: calc(100% / 2); padding: 0.8em; font-weight: 700; border: none; border-radius: 10px; font-size: 20px; cursor: pointer; color: #fff; background-color: #e94709;}
#confirmSec #confBtnBox .btn#prevBtn{color: #000; background-color: #ccc;}


/*===================================================
                                          thanksSec
===================================================*/
#thanksSec{margin-bottom: 18vh;}
#thanksSec h2{font-size: 30px; color: #e94709;}

/*===================================================
                                           errorSec
===================================================*/
#errorSec{margin-bottom: 14vh;}
#errorSec #errorBox{margin: 2em auto; padding: 2em;}
#errorSec #confBtnBox{display: flex; align-items: center; justify-content: center; margin: 2em auto;}
#errorSec #errorBox #prevBtn{width: 14em; padding: 0.8em; color: #000; background-color: #ccc; border: none; border-radius: 10px; font-size: 18px; cursor: pointer;}