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

/*===================================================
                                               共通
===================================================*/
#headerArea{padding: 0.5em 1em;}
#headerArea #headerAreaInner{justify-content: space-between;}
#headerArea #headerAreaInner .logoBox{width: 45%;}

.contentsBox h2{font-size: 250%;}
.contentsBox h2 span{width: 10%; margin: 0 auto;}

.section .sectionInner{width: 90%;}


/*===================================================
                                           mainView
===================================================*/
#mainView .ttl{font-size: 8vw; line-height: 1.3;}
#mainView .ttl span{font-size: 60%;}


/*===================================================
                                            formSec
===================================================*/
/*----- 共通 -----*/
#formSec select, 
#formSec textarea, 
#formSec button, 
#formSec input,
#formSec label{font-size: 16px;}

#formSec .formBox{margin: 2em auto; padding: 1.5em;}
#formSec .formBox .formTtl{font-size: 6.5vw;}

/*----- 01 基本情報 -----*/
#formSec .formList .formItem.half{width: 100%;}

/* 住所 */
#formSec .formList .formItem .addressArea{flex-direction: column;}
#formSec .formList .formItem .zipArea input{width: 8em;}
#formSec .formList .formItem .addressArea #prefecture{width: 100%;}


/*----- 02 ご希望商品・仮数量 -----*/
#formSec .sptal{text-align: left; margin-top: 0.5em;}
/* 商品 */
#formSec .productArea .productItem{grid-template-columns: auto;}
#formSec .productArea .productItem .itemName{grid-column: 1/3;}
#formSec .productArea .productItem .remove{width: 4em;}

/* オプション */
#formSec .optionArea{margin-top: 2em;}
#formSec .optionArea .optionTtlBox{display: block;}
#formSec .optionArea .optionTtlBox .optionTtl{font-size: 20px; line-height: 1;}
#formSec .optionArea .optionTable tr{display: flex; flex-direction: column;}
#formSec .optionArea .optionTable th{width: 100%; padding: 0.2em; font-size: 16px; border-right: 0; border-bottom: 1px dashed #aaa;}
#formSec .optionArea .optionTable .optionBtnGroup .optionBtn label{font-size: 16px;}


/*===================================================
                                         confirmSec
===================================================*/
#confirmSec #confirmBox{padding: 2em 1em;}
#confirmSec #confirmBox h2{font-size: 6.5vw;}

#confirmSec .confirmList dl{flex-direction: column; border-bottom: none; margin-bottom: 1em;}
#confirmSec .confirmList dl:first-child{border: none;}
#confirmSec .confirmList dl dt{width: 100%; padding: 0.5em 1em; justify-content: left; border-top: #aaa solid 1px; border-bottom: #aaa solid 1px;}
#confirmSec .confirmList dl dd{width: 100%; padding: 0.5em 1em;}

#confirmSec #confBtnBox{flex-direction: column-reverse;}
#confirmSec #confBtnBox .btn{width: 100%;}


/*===================================================
                                          thanksSec
===================================================*/
#thanksSec{margin-bottom: 22vh;}
#thanksSec h2{font-size: 6.5vw;}
#thanksSec .txt{text-align: left;}