:root {
--global_column_width: calc((100vw - 14vw) / 4);
--global_column_gap: calc((14vw) / 5);
}
.wrap__content-page {
padding-left: 24.3vw;
width: 100%;
}
.wrap__contact-detail {
display: flex;
gap: 50px 2.8vw;
transform: translateY(-.9vw);
}
.wrap__contact-detail .wrap__contact-detail-left {
flex-shrink: 0;
font-size: max(2.5vw, 16px);
font-weight: 100;
max-width: 18.7vw;
transform: translateY(-.2vw);
width: 100%;
}
.wrap__contact-detail .wrap__contact-detail-right {
margin-top: 60px;
max-width: 24.3vw;
min-width: 300px;
width: 100%;
}
@media screen and (max-width: 768px) {
.wrap__content-page {
padding-left: 0;
}
.wrap__contact-detail {
flex-direction: column;
gap: 20px 2.8vw;
}
.wrap__contact-detail .wrap__contact-detail-left {
font-size: 36px;
line-height: 1.4;
max-width: 100%;
}
.wrap__contact-detail .wrap__contact-detail-right {
margin-top: 30px;
max-width: 100%;
min-width: auto;
}
}
.contactSingle {
width: 100%;
padding-left: calc(var(--global_column_width) + var(--global_column_gap));
}
@media screen and (max-width: 768px) {
.contactSingle {
padding-left: 0;
}
}
.contactSingle__column {
display: flex;
gap: 50px var(--global_column_gap);
transform: translateY(-0.9vw);
}
@media screen and (max-width: 768px) {
.contactSingle__column {
flex-direction: column;
gap: 20px var(--global_column_gap);
}
}
.contactSingle__column__left {
width: 100%;
max-width: calc(var(--global_column_width) - var(--global_column_gap));
font-size: max(2.5vw, 16px);
flex-shrink: 0;
font-weight: 100;
transform: translateY(-0.2vw);
}
@media screen and (max-width: 768px) {
.contactSingle__column__left {
max-width: 100%;
font-size: 36px;
line-height: 1.4;
}
}
.contactSingle__column__right {
width: 100%;
max-width: calc(var(--global_column_width) + var(--global_column_gap));
min-width: var(--global_column_width);
margin-top: 60px;
}
@media screen and (max-width: 768px) {
.contactSingle__column__right {
max-width: 100%;
min-width: auto;
margin-top: var(--global_column_gap);
}
}
.zf-templateWidth {
width: 100%;
}
.zf-templateWrapper {
background-color: transparent;
border: none;
}
.zf-templateWrapper ul {
list-style: none;
}
.zf-nameWrapper,
.zf-phwrapper {
width: 100%;
overflow: auto;
}
.zf-tempFrmWrapper {
padding: 15px 0;
}
.zf-tempHeadBdr {
display: none;
}
.zf-subContWrap {
margin: 0;
}
.zf-subContWrap ul {
list-style: none;
}
.zf-name .zf-tempContDiv span,
.zf-phone .zf-tempContDiv span,
.zf-time .zf-tempContDiv span {
display: block;
}
.zf-namemedium .zf-tempContDiv span {
width: 47%;
margin-left: 6%;
float: left;
}
.zf-namemedium .zf-tempContDiv span:first-child {
margin-left: 0;
}
.tempContDiv {
width: 100%;
background: white;
border: 0.8px solid #000;
padding: 10px 20px;
height: 400px;
overflow: scroll;
}
.zf-tempContDiv input,
.zf-tempContDiv textarea,
.zf-tempContDiv select,
.zf-tempContDiv .zf-pdfTextArea {
background: transparent;
border: 0.8px solid #8c8c8c;
padding: 15px 20px;
font-size: 13px;
}
input[type='text'],
textarea,
.zf-sliderCont,
.zf-pdfTextArea,
.zf-signContainer {
width: 100%;
height: 100%;
}
.zf-radioChoice+input[type='text'],
.zf-radioChoice+textarea,
.zf-radioChoice+.zf-sliderCont,
.zf-radioChoice+.zf-pdfTextArea,
.zf-radioChoice+.zf-signContainer {
margin-top: 10px;
}
.zf-small .zf-tempContDiv input[type='text'],
.zf-small .zf-tempContDiv textarea,
.zf-small .zf-tempContDiv .zf-sliderCont,
.zf-small .zf-tempContDiv .zf-pdfTextArea,
.zf-small .zf-tempContDiv .zf-form-sBox {
width: 100%;
}
.zf-small .zf-mSelect select,
.zf-small .zf-signContainer {
width: 100%;
}
.zf-termsContainer .zf-termsMsg {
border: 0.8px solid #8c8c8c !important;
}
.zf-tempFrmWrapper .zf-labelName {
width: 100%;
font-size: max(1.1vw, 13px);
display: flex;
align-items: center;
font-weight: bold;
color: #444;
padding-bottom: 8px;
}
.zf-oneColumns .zf-tempContDiv span {
display: block;
width: 100%;
margin: 0;
padding: 15px var(--global_column_gap);
border-bottom: 0.8px solid #8c8c8c;
border-right: 0.8px solid #8c8c8c;
border-left: 0.8px solid #8c8c8c;
}
.zf-oneColumns .zf-tempContDiv span:first-child {
border-top: 0.8px solid #8c8c8c;
}
.zf-important {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
margin-left: 10px;
}
.zf-important::after {
font-style: normal;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
content: '必須';
background: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: white;
line-height: 1;
}
.zf-fmFooter {
margin-top: 50px;
padding: 15px 0;
} .zf-submitColor {
background-color: #000;
border: none;
color: #fff;
font-weight: 700;
padding: 15px 40px;
position: relative;
z-index: 1;
transition: 0.5s;
width: 100%;
font-size: max(1vw, 11px);
line-height: 1.7;
}
.zf-submitColor::before {
content: '';
width: 100%;
height: calc(100% + 2px);
position: absolute;
top: -1px;
left: 0;
z-index: -1;
background: #ffd500;
transform-origin: 0% 50%;
transform: scaleX(0);
transition: transform ease 0.5s;
}
.zf-submitColor:hover {
color: #000;
}
.zf-submitColor:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
.zf-oneColumns .zf-tempContDiv span input[type='radio'] {
display: block;
width: 13px;
height: 13px;
margin: 4px 0 0 0;
padding: 0;
float: left;
}
.zf-phone .zf-tempContDiv label,
.zf-date .zf-tempContDiv label,
.zf-time .zf-tempContDiv label,
.zf-address .zf-tempContDiv label,
.zf-name .zf-tempContDiv span label {
color: #888888;
font-size: 11px;
padding-top: 3px;
}
.zf-phwrapper label {
display: block;
color: #888888;
font-size: 11px;
margin-top: 2px;
}
.zf-oneColumns .zf-tempContDiv span label {
line-height: 19px;
display: block;
margin: 0 0 0 20px;
padding: 0;
font-size: 13px;
}
.zf-instruction {
color: #939393;
font-style: italic;
margin-top: 3px;
font-size: 12px;
overflow: visible;
word-break: break-all;
margin-bottom: 3px;
}
.zf-termsContainer .zf-termsMsg {
border: 1px solid #e1e1e1;
max-height: 250px;
min-height: 70px;
overflow-y: scroll;
padding: 10px;
margin-bottom: 6px;
}
.zf-termsAccept label {
margin-left: 20px;
font-size: 13px;
float: none;
display: block;
}
.zf-termsAccept input[type='checkbox'] {
margin-top: 2px;
float: left;
}
li.zf-fmFooter button,
.zf-multiAttType .zf-radioBtnType,
.zf-multiAttType label,
input.zf-checkBoxType {
cursor: pointer;
}