.page-faq{
margin: 80px 0 120px;
}
.page-faq > .faq_deco{
z-index: -1;
opacity: 0.1;
position: absolute;
top: clamp(300px, 22.6744186047vw, 390px);
right: 5%;
transform: translateY(-4%);
pointer-events: none;
}
.page-faq > .faq_deco > .faq_deco--image{
width: clamp(100px, 26.1627906977vw, 450px);
}
.page-faq .faqEnd_deco{
z-index: -1;
opacity: 0.1;
position: absolute;
bottom: 30%;
left: 2%;
transform: translateY(-4%);
pointer-events: none;
}
.page-faq .faqEnd_deco > .faqEnd_deco--image{
width: clamp(100px, 26.1627906977vw, 450px);
}
@media (max-width:767px) {
.page-faq .faqEnd_deco{
bottom: 40%;
}
}
.page-faq > .accordion-area{
list-style: none;
width: 95%;
max-width: 960px;
margin:0 auto;
}
.accordion-area p.faq_txt{
text-align: center;
margin-bottom: 80px;
font-size: 20px;
line-height: 2;
}
@media (max-width:767px) {
.accordion-area p.faq_txt{
font-size: 16px;
text-align: left;
margin-bottom: 50px;
}
}
.accordion-area li{
margin: 10px 0;
}
.accordion-area section {
border: 1px solid var(--color-orange);
}
.faq_title {
position: relative;
cursor: pointer;
padding: 3% 3% 3% 50px;
transition: all .5s ease;
font-size: 18px;
font-weight: bold;
line-height: 2;
}
.faq_title::before,
.faq_title::after{
position: absolute;
content:'';
width: 15px;
height: 2px;
background-color: var(--color-orange);
}
.faq_title::before{
top:48%;
left: 15px;
transform: rotate(0deg);
}
.faq_title::after{    
top:48%;
left: 15px;
transform: rotate(90deg);
}
.faq_title.close::before{
transform: rotate(45deg);
}
.faq_title.close::after{
transform: rotate(-45deg);
}
.faq_box {
display: none;
background: #ffdeb1f5;
margin:0 3% 3% 3%;
padding: 3%;
color: #333;
line-height: 2;
} div.contact_guidance > .contact_deco{
z-index: -1;
opacity: 0.1;
position: absolute;
top: 10%;
right: 5%;
transform: translateY(-4%);
pointer-events: none;
}
div.contact_guidance > .contact_deco > .contact_deco--image{
width: clamp(100px, 26.1627906977vw, 450px);
}
@media (max-width:767px) {
div.contact_guidance > .contact_deco{
top: 8%;
}
}
div.contact_guidance{
margin: 30px 0 150px;
}
div.contact_guidance .frame{
margin: 0 auto 60px;
padding:36px 10px 32px 10px;
text-align:center;
line-height: 2;
font-size: 18px;
}
div.contact_guidance .frame > .mes_title{ 
color: var(--color-orange);
font-size: 25px;
font-weight: bold;
}
@media screen and (max-width:768px){
div.contact_guidance{
margin: 0px 0 150px;
}
div.contact_guidance .frame{
width:96%;
padding: 30px 1em;
font-size: 16px;
text-align: left;
margin: 0 auto 30px;
}
}	
div.contact_guidance .question span{
font-weight:600;		
}
div.contact_guidance .tel{
text-align:center;
}
div.contact_guidance .tel a{
font-weight: bold;
font-size: 42px;
color:#4A390F;
}
div.contact_guidance .tel a:before{
content: url(//bestwork-isa.com/wp-content/themes/bestwork/assets/img/footer_telicon.svg);
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
width: 1em;
}
@media screen and (max-width:560px){
div.contact_guidance .tel a{
font-size:32px;
}
}
div.contact_guidance .tel:hover,
div.contact_guidance .tel:hover::before{
color:#EEB73A;
}	
div.contact_guidance .reception{
margin:10px auto;
line-height:1.7;
text-align:center;	
}
.tenpo_tel{
margin: 20px auto;
display: inline-block;
text-align: left;
}
.tenpo_tel > .tenpo_tel--p{
font-size: 30px;
line-height: 2;
letter-spacing: 4px;
}
.tenpo_tel > .tenpo_tel--p > a{
color: var(--color-orange);
letter-spacing: 0;
}
@media (max-width:767px) {
.tenpo_tel > .tenpo_tel--p{
font-size: 25px;
}
}
div.page-content{
width:100%;
margin:0 auto;
margin-bottom:100px;
}
div.mes{
box-sizing:border-box;
margin-bottom:40px;
}
div.mes h3{
color:#c36;
font-size:18px;
font-weight:bold;
}	
#contact{
max-width:var(--content-width-medium);
background-color:#fff;
padding:60px 80px;
box-sizing:border-box;
border:2px solid var(--color-gray-light);
border-radius:10px;
margin: 0 auto;
}
@media screen and (max-width:1380px){
#contact{
padding: 60px 2em;
}
}	
@media screen and (max-width:767px){
#contact{
padding: 60px 1em;
}
}	
#contact .contact-flow {
max-width: 400px;
position: relative;
box-sizing: border-box;
margin: 10px auto 40px auto;
}
#contact .contact-flow:before {
content: "";
width: calc(100% - 50px);
height: 2px;
background-color: #d5cdcd;
position: absolute;
top: 7px;
left: 25px;
z-index: 0;
}
#contact .contact-flow ul.flow-list {
width: 100%;
position: relative;
z-index: 1;
display: flex;
margin: 0;
justify-content: space-between;
align-items: center;
padding: 0;
}
#contact .contact-flow ul.flow-list li {
list-style: none;
}
#contact .contact-flow ul.flow-list > li.flow-list-item {
width: 60px;
position: relative;
top: 3px;
z-index: 1;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
text-align: center;
color: var(--color-black);
}
#contact .contact-flow ul.flow-list > li.flow-list-item.active {
color: var(--color-orange);
}
#contact .contact-flow ul.flow-list > li.flow-list-item:before {
position: static;
content: "";
width: 10px;
height: 10px;
margin: 0 auto;
margin-bottom: 20px;
display: block;
background-color: #d5cdcd;
border-radius: 50%;
box-shadow: none;
}
#contact .contact-flow ul.flow-list > li.flow-list-item.active:before {
background-color: var(--color-orange);
}	
.contact-form {
margin-top: clamp(47px, 6.27090301vw, 75px);
}
.contact-form > div + div {
margin-top: clamp(19px, 2.508361204vw, 30px);
}
.contact-form > div > dt {
font-size: 16px;
line-height: 1.625;
}
.contact-form > div > dd {
flex: 1 1 0%;
margin-top: clamp(5px, 0.6688963211vw, 8px);
font-size: 15px;
line-height: 2;
}
.contact-form > .privacy {
margin-top: clamp(38px, 5.016722408vw, 60px);
text-align: center;
}
@media (max-width:767px) {
.contact-form > .privacy{
text-align: left;
}
}
.mw_wp_form_confirm .contact-form > .privacy > dd, .mw_wp_form_preview .contact-form > .privacy > dd {
display: none;
}
.contact-form > .submit > dd {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(13px, 1.6722408027vw, 20px);
}
@media (min-width: 560px) {
.contact-form > .submit > dd {
flex-direction: row-reverse;
}
}
.contact-form a {
color: var(--color-red);
text-decoration: underline;
}
.contact-form .required {
margin-left: 0.25em;
color: var(--color-red);
}
.c-form-control {
--c-form-control-border: 1px solid var(--color-gray-light);
--c-form-control-border-radius: 5px;
--c-form-control-padding: .75em 1em;
--c-form-control-background: var(--color-gray-pale);
--c-form-control-line-height: 1.625;
--c-form-control-font-size: 16px;
--c-form-control-font-color: inherit;
--c-form-control-textarea-padding: 1em;
}
@media (min-width: 768px) {
.c-form-control {
--c-form-control-padding: 1.125em;
--c-form-control-font-size: 17px;
}
}
.c-form-control {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0 0 10px;
padding: var(--c-form-control-padding, 0);
border: var(--c-form-control-border, none);
border-radius: var(--c-form-control-border-radius, 0);
background: var(--c-form-control-background, transparent);
font: inherit;
font-size: var(--c-form-control-font-size, inherit);
line-height: var(--c-form-control-line-height, inherit);
color: var(--c-form-control-font-color, inherit);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-form-control:disabled {
cursor: not-allowed;
}
textarea.c-form-control {
padding: var(--c-form-control-textarea-padding, 0);
resize: vertical;
}
select.c-form-control {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3e%3cpath fill='%23343a40' d='M15 22L0 0h30z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: calc(100% - 0.75em) 50%;
background-size: 0.5em auto;
}
select.c-form-control[multiple], select.c-form-control[size]:not([size="1"]) {
background-image: none;
}
.c-form-control.-auto {
display: inline-block;
width: auto;
}
.c-btn.-contactAction {
justify-content: center;
min-width: clamp(175px, 23.4113712375vw, 280px);
padding: 1.125em 3.25em;
font-size: 16px;
text-align: center;
}
.c-btn.-contactAction.-submit {
background: var(--color-orange);
border: 3px solid var(--color-orange);
color: var(--color-white);
transition: all .4s;
}
.c-btn.-contactAction.-submit:hover{
transition: all .4s;
background: var(--color-white);
border: 3px solid var(--color-orange);
color: var(--color-orange);
opacity: 1;
}
.c-btn.-contactAction.-back {
background: var(--color-gray-light);
border: 3px solid var(--colorgray-light);
color: var(--color-black);
transition: all .4s;
}
.c-btn.-contactAction.-back:hover{
transition: all .4s;
background: var(--color-white);
border: 3px solid var(--color-black);
color: var(--color-black);
opacity: 1;
}
@media (max-width:767px) {
.c-btn.-contactAction.-submit:hover{
opacity: 1;
}
.c-btn.-contactAction.-back:hover{
opacity: 1;
}
}
.contact-captcha{
text-align: center;
margin: 30px 0;
font-size: 15px;
line-height: 2.2;
}
.contact-captcha > img{
margin: 0 auto;
}
.contact-captcha > input{
padding: 2px 16px;
}
#contact > .contact_deco{
z-index: -1;
opacity: 0.1;
position: absolute;
bottom: 25%;
left: 2%;
transform: translateY(-4%);
pointer-events: none;
}
#contact > .contact_deco > .contact_deco--image{
width: clamp(100px, 26.1627906977vw, 450px);
}
@media (max-width:767px) {
#contact > .contact_deco{
bottom: 30%;
}
} .shop-details .kodawari{
font-size: 15px;
color: #ffffff;
text-align: center;
line-height: 1.6;
background-color: var(--color-orange);
border-radius: 5px;
padding: 30px 15px 30px 15px;
}
@media (max-width:560px) {
.shop-details .kodawari{
text-align: left;
}
} .privacy_container {
max-width: var(--content-width-medium);
margin: 0 auto;
padding: 80px 0 120px;
font-size: 16px;
text-align: justify;
word-break: break-all;
line-height: 2.1;
}
@media (max-width:767px) {
.privacy_container {
padding: 50px 0 80px;
min-width: 90%;
}
}
.privacy_container--h2{
margin: 2.25em 0 0.75em;
}
.privacy_container p,
.privacy_container ol {
margin-bottom: 1em;
}
.privacy_container--h2{
position: relative;
font: inherit;
line-height: 1;
}
.privacy_container--h2.-bb {
padding-bottom: 0.25em;
border-bottom: 0.25em solid var(--color-orange);
font-size: 25px;
font-weight: bold;
text-align: justify;
word-break: break-all;
line-height: 1.5;
} .company-vision > .body > .list > .philosophy{
margin-block: 1em 2em;
margin-left: 5%;
}
@media (max-width:1000px) {
.company-vision > .body > .list > .philosophy{
margin-left: 0;
}
}