/* ******************************************************************************** * title * ******************************************************************************** */ .x.title {} .x.title .y {} .x.title .y .z {} .x.title .y .z .w {} .x.title .y .z .w .i {} .x.title .y .z .w .i .d1 {} .x.title .y .z .w .i .d1-1 {} .x.title .y .z .w .i .d1-1-1 {} .x.title .y .z .w .i .d1-1-1 .head { text-align:center; color: #0071B4; } .x.title .y .z .w .i .d1-1-1 .head .en {} .x.title .y .z .w .i .d1-1-1 .head .jp { display: inline-block; } .x.title .y .z .w .i .d1-1-1 .head img {} @media (min-width: 960px) { /* for pc [960, inf] */ .x.title .y {} .x.title .y .z .w .i .d1-1-1 { margin-top: 40px; } .x.title .y .z .w .i .d1-1-1 .head {} .x.title .y .z .w .i .d1-1-1 .head div { font-size: 1.8rem; font-weight: bold; letter-spacing: 0.5px; } .x.title .y .z .w .i .d1-1-1 .head div.small1 { font-size: 1.32rem; letter-spacing: 0; } } @media (min-width: 481px) and (max-width: 959px) { /* for tab [481, 959] */ .x.title .y {} .x.title .y .z .w .i .d1-1-1 { margin-top: 40px; } .x.title .y .z .w .i .d1-1-1 .head {} .x.title .y .z .w .i .d1-1-1 .head div { font-size: 1.8rem; font-weight: bold; letter-spacing: 0.5px; } .x.title .y .z .w .i .d1-1-1 .head div.small1 { font-size: 1.32rem; letter-spacing: 0; } } @media (max-width: 480px) { /* for sp [0, 480] */ .x.title .y {} .x.title .y .z .w .i .d1-1-1 { margin-top: 40px; } .x.title .y .z .w .i .d1-1-1 .head {} .x.title .y .z .w .i .d1-1-1 .head div { font-size: 1.8rem; font-weight: bold; letter-spacing: 0.5px; } .x.title .y .z .w .i .d1-1-1 .head div.small1 { font-size: 1.32rem; letter-spacing: 0; } } /* form parts normalizer (essential param) */ .form input[type=checkbox], .form input[type=radio] { position:relative; top:-0.125rem; } .form select, .form input[type=text], .form input[type=tel], .form textarea { -o-appearance:none; -ms-appearance:none; -moz-appearance:none; -webkit-appearance:none; appearance:none; box-sizing:border-box; color:inherit; display:inline-block; font-family:inherit; font-size:inherit; letter-spacing:inherit; line-height:normal; margin:0; max-width:100%; text-transform:none; -o-transition:box-shadow 0.45s, border-color 0.45s ease-in-out; -ms-transition:box-shadow 0.45s, border-color 0.45s ease-in-out; -moz-transition:box-shadow 0.45s, border-color 0.45s ease-in-out; -webkit-transition:box-shadow 0.45s, border-color 0.45s ease-in-out; transition:box-shadow 0.45s, border-color 0.45s ease-in-out; vertical-align:middle; } .form select { background-repeat:no-repeat; background-position-x:97%; background-position-y:center; background-position:97% center; background-size:contain; background-image:url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg=="); } .form option { display:block; white-space:pre; padding:0px 2px 1px; } .form textarea { overflow:auto; } @media all and (-ms-high-contrast:none) { .form input[type=checkbox], .form input[type=radio] { margin-top:-0.25rem; } .form select { background-image:none; } *::-ms-backdrop, .form input[type=checkbox], .form input[type=radio] { margin-top:-0.25rem; } *::-ms-backdrop, .form select { background-image:none; } } @supports (-ms-accelerator:true) { .form input[type=checkbox], .form input[type=radio] { margin-top:-0.25rem; } } /* ******************************************************************************** * .x.BL-C1-C100-R-000 (form) * ******************************************************************************** */ .x.BL-C1-C100-R-000 {} .x.BL-C1-C100-R-000 .y { background-color:transparent; padding: 50px 0; } .x.BL-C1-C100-R-000 .y .z { background-color:transparent; } .x.BL-C1-C100-R-000 .y .z .w { padding:0 20px; } .x.BL-C1-C100-R-000 .y .z .w .i { background-color:transparent; color:#333333; } .x.BL-C1-C100-R-000 .y .z .w .i .d1 {} .x.BL-C1-C100-R-000 .y .z .w .i .d1-1 {} .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1 { padding:12px 4px; border-top:1px #bdbdbd solid; border-bottom:1px #bdbdbd solid; margin-top:-1px; }/* form-item wrapper */ .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 {} .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1 { border-collapse:collapse; width:100%; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1 {} .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1 { width:17rem; padding-right:1rem; }/* 項目名エリア */ .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1-1 {} .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1-1 .has-marker { position:relative; padding-left:1rem; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1-1 .has-marker .marker { /*position:absolute;*/ left:0; top:0; width:1rem; text-align:center; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1-1 .has-marker .marker::before { content:''; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1-1 .has-marker .marker.required::before { content:'※'; color:#C03; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1-1 .has-marker .marker.optional::before { content:'　'; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1-1 .has-marker .marker.optional::before { content:'　'; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2 {}/* 入力欄エリア */ .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2-1 {} .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2-1 label span { vertical-align:text-bottom; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-2 {} .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-2-1 {} .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-2-1-1 {} /* form parts normalizer (custom param) */ .x.BL-C1-C100-R-000 .form select, .x.BL-C1-C100-R-000 .form input[type=text], .x.BL-C1-C100-R-000 .form input[type=tel], .x.BL-C1-C100-R-000 .form textarea { background-color:#EBEBEB; border:1px solid #EBEBEB/*#5d924c*/; border-radius:3px; font-size:1rem; padding:0.5rem 14px;/*「.fomr select」と「ie fixパート」のpadding-rightと連動して調整しなければならない。左右のpaddingはhtml要素に指定している master となる font-size。*/ } .x.BL-C1-C100-R-000 .form select { background-color:#ffffff; background-position-x:100%; background-position:100% center; background-image:none; /*width:100%;/*幅100%ととするか、padding-rightを設定する。*/ padding-right:2rem;/*「.fomr select」のpadding-rightと画像幅の和を設定する、*/ line-height: 1.4; } .x.BL-C1-C100-R-000 .form .select-wrap { position: relative; display: inline-block; } .x.BL-C1-C100-R-000 .form .select-wrap:before { content:'▼'; display: block; position:absolute; top:50%; right:0.75rem; margin-top: -11px; text-align:center; font-size:inherit; line-height:inherit; letter-spacing:inherit; font-family:inherit; color:inherit; pointer-events: none; } .x.BL-C1-C100-R-000 .form option {} .x.BL-C1-C100-R-000 .form input[type=text] { width:100%; } .x.BL-C1-C100-R-000 .form input[type=tel] { width:100%; } .x.BL-C1-C100-R-000 .form textarea { width:100%; min-height:8rem; } /* error message */ .x.BL-C1-C100-R-000 .form .d1-1-1.error { background-color:#fcecf2; } .x.BL-C1-C100-R-000 .form .d1-1-1.error select, .x.BL-C1-C100-R-000 .form .d1-1-1.error input[type=text], .x.BL-C1-C100-R-000 .form .d1-1-1.error input[type=tel], .x.BL-C1-C100-R-000 .form .d1-1-1.error textarea { border-color:#C03; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1 > tbody > tr.d1-1-1-1-2 { display:none; color:#C03; } /* ie fix */ @media all and (-ms-high-contrast:none) { .x.BL-C1-C100-R-000 .form input[type=checkbox], .x.BL-C1-C100-R-000 .form input[type=radio] { position:relative; top:2px; } .x.BL-C1-C100-R-000 .form select { background-image:none; padding-right:14px;/*「.fomr select」のpadding-rightと同じ値を設定する。*/ } *::-ms-backdrop, .x.BL-C1-C100-R-000 .form input[type=checkbox], .x.BL-C1-C100-R-000 .form input[type=radio] { position:relative; top:2px; } *::-ms-backdrop, .x.BL-C1-C100-R-000 .form select { background-image:none; padding-right:14px;/*「.fomr select」のpadding-rightと同じ値を設定する。*/ } } @supports (-ms-accelerator:true) { .x.BL-C1-C100-R-000 .form input[type=checkbox], .x.BL-C1-C100-R-000 .form input[type=radio] { top:2px; } } @media (min-width: 960px) { /* for pc [960, inf] */ .x.BL-C1-C100-R-000 .form input[type=text] { width:90%; } .x.BL-C1-C100-R-000 .form input[type=tel] { width:90%; } .x.BL-C1-C100-R-000 .form textarea { width:90%; min-height:8rem; } .x.BL-C1-C100-R-000 .form .select-wrap { width: 90%; } .x.BL-C1-C100-R-000 .form select { width:100%; } .x.BL-C1-C100-R-000 .form .sw {} .x.BL-C1-C100-R-000 .form .sw:nth-child(n+2) { margin-top: 10px; } .x.BL-C1-C100-R-000 .form .sw span { display: inline-block; width: 140px; } .x.BL-C1-C100-R-000 .form .sw .select-wrap { width: 12%; } .x.BL-C1-C100-R-000 .form .datepicker { width: 18% !important; } .x.BL-C1-C100-R-000 .form .timepicker { width: 12% !important; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1 { height:39px;/*It works min-height.*/ } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2-1 .s { display:inline-block; width:1rem; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2-1 .note { margin-top: 3px; font-size: 0.95rem; letter-spacing: 0; line-height: 1.8; color: #828282; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1.error .d1-1-1-1 .t1 > tbody > tr.d1-1-1-1-2 { display:table-row; } } @media (min-width: 481px) and (max-width: 959px) { /* for tab [481, 959] */ .x.BL-C1-C100-R-000 .form input[type=text] { width:90%; } .x.BL-C1-C100-R-000 .form input[type=tel] { width:90%; } .x.BL-C1-C100-R-000 .form textarea { width:90%; min-height:8rem; } .x.BL-C1-C100-R-000 .form .select-wrap { width: 90%; } .x.BL-C1-C100-R-000 .form select { width:100%; } .x.BL-C1-C100-R-000 .form .sw {} .x.BL-C1-C100-R-000 .form .sw:nth-child(n+2) { margin-top: 10px; } .x.BL-C1-C100-R-000 .form .sw span { display: inline-block; width: 140px; } .x.BL-C1-C100-R-000 .form .sw .select-wrap { width: 12%; } .x.BL-C1-C100-R-000 .form .datepicker { width: 18% !important; } .x.BL-C1-C100-R-000 .form .timepicker { width: 12% !important; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1 { height:39px;/*It works min-height.*/ } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2-1 .s { display:block; width:1rem; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2-1 .note { margin-top: 3px; font-size: 0.95rem; letter-spacing: 0; line-height: 1.8; color: #828282; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1.error .d1-1-1-1 .t1 > tbody > tr.d1-1-1-1-2 { display:table-row; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1.va-t { vertical-align:top; } } @media (max-width: 480px) { /* for sp [0, 480] */ .x.BL-C1-C100-R-000 .form .select-wrap { width: 90%; } .x.BL-C1-C100-R-000 .form select { width:100%; } .x.BL-C1-C100-R-000 .form .sw {} .x.BL-C1-C100-R-000 .form .sw:nth-child(n+2) { margin-top: 10px; } .x.BL-C1-C100-R-000 .form .sw span { display: inline-block; width: 140px; } .x.BL-C1-C100-R-000 .form .sw .select-wrap { width: 30%; } .x.BL-C1-C100-R-000 .form .datepicker { width: 45% !important; } .x.BL-C1-C100-R-000 .form .timepicker { width: 30% !important; } .x.BL-C1-C100-R-000 .y .z .w .i { padding:10px 0 0; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1, .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2 { width:auto; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1 { height:auto; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1, .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1 > tbody, .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1 > tbody > tr, .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1 .t1 > tbody > tr > td { display:block; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1-1 .has-marker { padding-left:0; padding-bottom:1rem; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2-1 .s { display:block; width:1rem; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-2-1 .note { margin-top: 3px; font-size: 0.95rem; letter-spacing: 0; line-height: 1.8; color: #828282; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1.error .d1-1-1-1 .t1 > tbody > tr.d1-1-1-1-2 { display:block; } .x.BL-C1-C100-R-000 .y .z .w .i .d1-1-1-1-1-1.va-t { vertical-align:top; } } .x.BL-C1-C100-R-000 .marker { background:none; } :placeholder-shown { color:#ccc; } ::-webkit-input-placeholder { color:#ccc; } :-moz-placeholder { color:#ccc; opacity:1; } ::-moz-placeholder { color:#ccc; opacity:1; } :-ms-input-placeholder { color:#ccc; } /* for IE10 only */ :-ms-input-placeholder { color:#ccc !important; } /* for IE10-11 */ ::-ms-input-placeholder { color:#ccc; } /* Edge */ ::placeholder { color:#ccc;} /* CSS Working Draft */ .x.BL-C1-C100-R-000 .form .d1-1-2 { text-align:center; } .x.BL-C1-C100-R-000 .form .d1-1-2-1 { display:inline-block; text-align:left; /*max-width:640px;*/ padding:40px 14px; } .x.BL-C1-C100-R-000 .form .d1-1-2-1 .required { color:#C03; } .x.BL-C1-C100-R-000 .form .d1-1-2-1 a { text-decoration:underline; /*color:#333333;*/ } .x.BL-C1-C100-R-000 .form .d1-1-2-2 a { text-decoration:none; display:inline-block; background-color:#25B5AB; color:#ffffff; margin:10px; border-radius: 12px; box-sizing: border-box; } .x.BL-C1-C100-R-000 .form .d1-1-2-2 a.back { background-color:#b0b0b0; } @media (min-width: 960px) { /* for pc [960, inf] */ .x.BL-C1-C100-R-000 .form .d1-1-2-2 a { width:360px; line-height:1.2; font-size:1.45rem; letter-spacing: 2px; padding: 20px 0; } } @media (min-width: 481px) and (max-width: 959px) { /* for tab [481, 959] */ .x.BL-C1-C100-R-000 .form .d1-1-2-1 { padding:40px 0; } .x.BL-C1-C100-R-000 .form .d1-1-2-2 a { width:360px; line-height:1.2; font-size:1.45rem; letter-spacing: 2px; padding: 20px 0; } } @media (max-width: 480px) { /* for sp [0, 480] */ .x.BL-C1-C100-R-000 .form .d1-1-2-1 { padding:40px 0; } .x.BL-C1-C100-R-000 .form .d1-1-2-2 a { width:100%; line-height:1.2; font-size:1.32rem; letter-spacing: 2px; margin: 0; padding: 16px 0; } .x.BL-C1-C100-R-000 .form .d1-1-2-2 a:nth-child(n+2) { margin-top: 25px; } } /* ******************************************************************************** * reservation * ******************************************************************************** */ #reservation .x.aaa {} #reservation .x.aaa .y {} #reservation .x.aaa .y .z { max-width: none; } #reservation .x.aaa .y .z .w {} #reservation .x.aaa .y .z .w .i {} #reservation .x.aaa .y .z .w .i .d1 {} #reservation .x.aaa .y .z .w .i .d1-1 {} #reservation .x.aaa .y .z .w .i .d1-1-1 {} @media (min-width: 960px) { /* for pc [960, inf] */ #reservation .x.aaa .y { margin-top: 20px; } #reservation .x.aaa .y .z .w .i .d1-1-1 { max-width: 960px; margin: 0 auto; } } @media (min-width: 481px) and (max-width: 959px) { /* for tab [481, 959] */ #reservation .x.aaa .y { margin-top: 20px; } #reservation .x.aaa .y .z .w .i .d1-1-1 { max-width: 960px; margin: 0 auto; } } @media (max-width: 480px) { /* for sp [0, 480] */ #reservation .x.aaa .y { margin-top: 20px; } #reservation .x.aaa .y .z .w .i { padding:0 20px; } #reservation .x.aaa .y .z .w .i .d1-1-1 {} } #reservation .xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled{ display: none; } /* ******************************************************************************** * reservation_thx * ******************************************************************************** */ #reservation_thx .x.aaa {} #reservation_thx .x.aaa .y {} #reservation_thx .x.aaa .y .z { max-width: none; } #reservation_thx .x.aaa .y .z .w {} #reservation_thx .x.aaa .y .z .w .i {} #reservation_thx .x.aaa .y .z .w .i .d1 {} #reservation_thx .x.aaa .y .z .w .i .d1-1 {} #reservation_thx .x.aaa .y .z .w .i .d1-1-1 {} #reservation_thx .x.aaa .y .z .w .i .d1-1-1 .txt {} #reservation_thx .x.aaa .y .z .w .i .d1-1-1 .txt a { text-decoration: underline; } #reservation_thx .x.aaa .y .z .w .i .d1-1-2 {} #reservation_thx .x.aaa .y .z .w .i .d1-1-2 .txt {} #reservation_thx .x.aaa .y .z .w .i .d1-1-2 .txt a { text-decoration: underline; } @media (min-width: 960px) { /* for pc [960, inf] */ #reservation_thx .x.aaa .y { margin-top: 20px; } #reservation_thx .x.aaa .y .z .w .i .d1-1-1 { text-align: center; padding-top: 60px; } #reservation_thx .x.aaa .y .z .w .i .d1-1-1 .txt { display: inline-block; text-align: left; } #reservation_thx .x.aaa .y .z .w .i .d1-1-2 { text-align: center; padding: 80px 0 40px; } #reservation_thx .x.aaa .y .z .w .i .d1-1-2 .txt { display: inline-block; text-align: left; } } @media (min-width: 481px) and (max-width: 959px) { /* for tab [481, 959] */ #reservation_thx .x.aaa .y { margin-top: 20px; } #reservation_thx .x.aaa .y .z .w .i .d1-1-1 { text-align: center; padding-top: 60px; } #reservation_thx .x.aaa .y .z .w .i .d1-1-1 .txt { display: inline-block; text-align: left; } #reservation_thx .x.aaa .y .z .w .i .d1-1-2 { text-align: center; padding: 80px 0 40px; } #reservation_thx .x.aaa .y .z .w .i .d1-1-2 .txt { display: inline-block; text-align: left; } } @media (max-width: 480px) { /* for sp [0, 480] */ #reservation_thx .x.aaa .y { margin-top: 20px; } #reservation_thx .x.aaa .y .z .w .i { padding:0 20px; } #reservation_thx .x.aaa .y .z .w .i .d1-1-1 {} #reservation_thx .x.aaa .y .z .w .i .d1-1-1 .txt { padding-top: 20px; } #reservation_thx .x.aaa .y .z .w .i .d1-1-2 {} #reservation_thx .x.aaa .y .z .w .i .d1-1-2 .txt { padding: 60px 0 40px; } }