@charset "UTF-8"; /* inquiry CSS Document */ /*================================= overwrite for PC ================================ */ /* header fix none */ .form #allContainer { overflow: visible; padding-top: 0px !important; } .form #headerContainer.moving, .form #headerContainer.fixed { position: relative; top: 0px; } /* //header fix none */ .form #globalHeader > .headerBlock { padding: 25px 0; } .form #globalFooter { background-color: #F5F5F5; padding: 40px 0; } .form #globalFooter > .footerBlock { padding: 0; } .form .fixed .headerBlock .siteLogo { width: auto; text-align: center; margin: 0px; padding: 0px; } .form .fixed .headerBlock .siteLogo a { background-image: url(/ja/common/img/header_logo01.png); background-repeat: no-repeat; background-size: contain; display: inline-block; height: 50px; width: 120px; } .form .fixed .headerBlock .siteLogo a img { display:none; } .btnType04 a, .btnType04 > span { width: 100%; height: 100%; } /*----- form reset -----*/ input[type="submit"], input[type="button"] { border: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: bottom; } input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea { height: 40px; padding-left: 5px; margin: 0; border: 1px solid #bbbbbb; background-color: #FFF; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { vertical-align:bottom; } input::-webkit-input-placeholder { padding-top:2px; } input:-ms-input-placeholder { padding-top:2px; } input::-moz-placeholder { padding-top:2px; } input::placeholder { padding-top:2px; } textarea { height: auto; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance:textfield; } select { font-size: 1.4rem; background: #FFF; line-height: 1.2; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-style: none; } select option{ background-color: #fff; } select::-ms-expand { display: none; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #828c9a; } button { font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Myriad Pro, Myriad, Arial, sans-serif; background-color: #FFF; margin: 0px; padding: 0px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /*================================= inquiry for PC ================================ */ /*----- input -----*/ .errorArea { font-size: 1.5rem; font-weight: bold; color: #FF0000; background-color: #FFF2F2; text-align: center; margin-top: 60px; padding-top: 25px; padding-bottom: 25px; display: none; } .tblInput { background-color: #F7F8FA; margin-top: 20px; width: 100%; } .tblEnq { margin-top: 5px !important; width: 100%; border-bottom: 1px solid #DDDDDD; } .tblInput th, .tblInput td, .tblEnq th, .tblEnq td { font-weight: normal; text-align: left; vertical-align: top; padding: 20px; word-break: break-all; } .tblInput tr + tr > *, .tblEnq tr + tr > * { border-top: 1px solid #DDDDDD; } .tblInput th, .tblEnq th { width: 280px; } .input .tblInput th { padding-top: 30px; } .tblEnq th { vertical-align: middle; padding: 20px 0; } .tblEnq th > div { vertical-align: middle; padding-left: 50px; height: 100%; position: relative; } .tblEnq th > div:before { content: "Q"; font-family: Helvetica, Arial, sans-serif; font-size: 24px; font-weight: normal; color: #FFF; line-height: 1; text-align: center; background-color: #003197; display: block; padding: 8px; height: 40px; width: 40px; margin-top: -21px; position: absolute; left: 0px; top: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .tblEnq hr { margin: 0px; margin-top: 20px; display: block; height: 1px; border: none; } .listRadiobtn { margin-top: -5px; position: relative; } * + .listRadiobtn { margin-top: 0px; padding-top: 0px; } .listRadiobtn .label.error { } .listRadiobtn li { display: inline-block; margin-right: 2.5em; margin-top: 5px; } .listRadiobtn.checkbox li { display: block; } .listRadiobtn label { display: inline-block; position: relative; padding: 0px 0px 0px 30px; } .listRadiobtn label input { position: absolute; left: -9999px; } .listRadiobtn label:before { content: ""; background-color: #FFF; display: inline-block; height: 20px; width: 20px; margin-top: -12px; border: 1px solid #CCC; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 0px; top: 50%; } .listRadiobtn label.error { padding: 0px; margin-bottom: 30px; position: absolute; left: 0px; bottom: -1.5em; } .listRadiobtn label.error:before { display: none; } .listRadiobtn label input:checked + *:before { content: ""; background-color: #002F93; display: inline-block; height: 12px; width: 12px; margin-top: -7px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 5px; top: 50%; } .listRadiobtn.checkbox label:before { -moz-border-radius: 0%; -webkit-border-radius: 0%; border-radius: 0%; } .listRadiobtn.checkbox label input:checked + *:before { background: rgba(255,255,255,0); height: 12px; width: 8px; margin-top: -11px; -moz-border-radius: 0%; -webkit-border-radius: 0%; border-radius: 0%; left: 7px; border-right: 3px solid #002F93; border-bottom: 3px solid #002f93; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .icnRequired { line-height: 1; background-color: #F00; display: inline-block; padding: 3px 7px; margin-left: 5px; font-style: normal; } .mac .icnRequired { padding-top: 5px; } .icnRequired:before { content: "必須"; font-size: 13px; color: #FFF; } .width01 { width: 100%; } .width02 { width: 440px; } .width03 { width: 200px; } input.width03 + span { color: #CCC; display: inline-block; margin-right: 12px; margin-left: 12px; } .label_select { background-color: #fff; display: inline-block; border: 1px solid #CCC; position: relative; padding: 0; } .label_select:before { content: ""; background-color: #002F93; display: inline-block; height: 42px; height : -moz-calc(100% + 2px); height : -webkit-calc(100% + 2px); height : calc(100% + 2px); width: 40px; position: absolute; top: -1px; right: -1px; webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } .label_select:after { content: ""; display: inline-block; width: 10px; height: 10px; border-bottom: 2px solid #FFF; border-left: 2px solid #FFF; position: absolute; top:50%; right: 12px; margin-top: -9px; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } .label_select select { color: #666; width: 100%; padding: 10px 38px 7px 5px; margin: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .safari .label_select select { color: #999; } .label_select select option { color: #000; } .inputError, input.error, select.error, textarea.error { background-color: #FFF2F2 !important; } .txtError, label.error, div.error-message { color: #F00; display: block; margin-top: 3px; } .linkPolicy { font-size: 1.3rem; margin-top: 10px; } .docSelect { display: table; } .docSelect > * { vertical-align: top; display: table-cell; } .docSelect > figure { padding-right: 20px; } .docSelect .listRadiobtn { margin-top: 20px; } .btnArea { text-align: center; margin-top: 60px; } .btnArea button { font-size: 1.5rem; font-weight: bold; color: #04449F; background-color: #FFF; text-align: center; padding: 15px 4em; max-width: 100%; border: 2px solid #CCC; cursor: pointer; -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -o-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out; } .btnArea button:hover { color: #3B65BA; } .btnArea button.btnEnter { color: #FFF; background-color: #04449F; border: 2px solid #04449F; } .btnArea button.btnEnter:hover { background-color: #3B65BA; border: 2px solid #3B65BA; } /*----- confirm -----*/ .tblEnq p + p { margin-top: 10px; } .confirm .btnArea button.btnEnter { padding: 15px 7em; } .btnArea br + button { margin-top: 30px; } /*----- confirm -----*/ .txtThanks { margin-top: 300px !important; margin-top: 200px !important; font-size: 2.8rem; text-align: center; } @media print, screen and (max-width: 1160px) { /*================================= overwrite for TAB ================================ */ .pcElm {display: none !important;} /*================================= inquiry for TAB ================================ */ } @media only screen and (max-width: 768px) { /*================================= overwrite for SP ================================ */ /* header fix none */ .form #headerContainer { position: relative; top: 0px; } .form #contentsContainer { padding-top: 15px; } /* //header fix none */ .form #globalHeader > .headerBlock { text-align: center; padding: 14px 0 8px; } .form #headerContainer .menuSwitch { display: none; } .form .headerBlock .siteLogo { display: inline-block; width: 78px !important; } .form .headerBlock .siteLogo a { background-image: url(/ja/common/img/header_logo01.png); background-repeat: no-repeat; background-size: contain; display: block; height: 32px; } .form .headerBlock .siteLogo a img { display: none; } .form #globalFooter { padding: 20px 0; } .form #copyright { margin-top: 0px; } /*----- form reset -----*/ input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea { height: 30px; } input::-webkit-input-placeholder { padding-top:0px; } input:-ms-input-placeholder { padding-top:0px; } input::-moz-placeholder { padding-top:0px; } input::placeholder { padding-top:0px; } /*================================= inquiry for SP ================================ */ /*----- input -----*/ .errorArea { font-size: 1.2rem; font-weight: normal; margin-top: 20px; padding: 20px 0; } .tblInput th, .tblInput td, .tblEnq th, .tblEnq td { padding: 10px; display: block; } .tblInput th, .tblEnq th { line-height: 1; width: auto; padding-bottom: 0px; } .tblInput td, .tblEnq td { border: none !important; } .input .tblInput th { padding-top: 10px; } .tblEnq th { padding: 0px; } .tblEnq th > div { padding: 15px 0px 15px 30px; } .tblEnq th > div:before { font-size: 12px; padding: 5px; height: 20px; width: 20px; margin-top: 0px; top: 10px; } .tblEnq td { border-top: 1px dashed #CCC !important; padding-left: 30px; } .tblEnq hr { width : 114%; width : -moz-calc(100% + 40px); width : -webkit-calc(100% + 40px); width : calc(100% + 40px); margin: 10px 0px; border-top: 1px dashed #CCC !important; position: relative; left: -30px; } .listRadiobtn { margin-top: -5px; } * + .listRadiobtn { margin-top: 0px; padding-top: 0px; } .listRadiobtn li { display: inline-block; margin-right: 1.5em; margin-top: 5px; } .listRadiobtn.spBlc li { display: block; margin-right: 0; } .listRadiobtn label { padding: 0px 0px 0px 20px; } .listRadiobtn label:before { height: 15px; width: 15px; margin-top: 0px; top: 1px; } .listRadiobtn label input:checked + *:before { height: 9px; width: 9px; margin-top: 0px; left: 4px; top: 5px; } .listRadiobtn.checkbox label input:checked + *:before { height: 8px; width: 5px; margin-top: -8px; left: 6px; top: 50%; border-right: 2px solid #002F93; border-bottom: 2px solid #002f93; } .icnRequired { padding: 2px 7px 2px; } .icnRequired:before { font-size: 8px !important; font-size: 10px !important; font-weight: normal; } .width01, .width02, .width03 { width: 100%; } .inputPostcode .width03 { width : 16.6%; width : -moz-calc((100% - 22px) / 2); width : -webkit-calc((100% - 22px) / 2); width : calc((100% - 22px) / 2); } input.width03 + span { margin-right: 5px; margin-left: 5px; } .tblInput textarea { height: 8em; } .label_select:before { height: 30px; height : -moz-calc(100% + 2px); height : -webkit-calc(100% + 2px); height : calc(100% + 2px); width: 30px; } .label_select:after { width: 8px; height: 8px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; margin-top: -7px; right: 9px; } .label_select select { padding: 8px 28px 6px 5px; } .inputError { background-color: #FFF2F2 !important; } .txtError { color: #F00; display: block; margin-top: 3px; } .linkPolicy { font-size: 1rem; margin-top: 10px; } .docSelect { display: block; } .docSelect > * { display: block; } .docSelect > figure { padding-right: 0px; padding-bottom: 10px; text-align: center; } .docSelect .listRadiobtn { margin-top: 10px; } .btnArea { margin-top: 30px; } .btnArea button { font-size: 1.2rem; padding: 15px 3em; max-width: 100%; } /*----- confirm -----*/ .tblEnq p + p { margin-top: 10px; } .confirm .btnArea button.btnEnter { padding: 15px 3em; } .btnArea br + button { margin-top: 20px; } .confirm .tblInput td { padding-left: 20px; } /*----- confirm -----*/ .txtThanks { margin-top: 100px !important; font-size: 1.2rem; } }