/*
Theme Name: Watch Makers
Version: 1.0.0
Author: GVT株式会社
Author URI: http://greenvalleytrading.net
*/
@charset "UTF-8";


/****************************************
    variables
****************************************/
:root{
    --color-orange:#e06616;
    --color-gray:#323333;
    --color-green:#066f38;
    --font-mincho:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    --font-gothic:'游ゴシック','Yu Gothic',"Helvetica Neue",Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;

    --pcw:1030px;
    --spw:90%;

    --boxMargin:5rem auto;
}

/****************************************
    common
****************************************/
* { scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ display:none; }
html, body { font-size:16px; font-family:var(--font-mincho); width:100%; }
body { background-image: url("images/bg.svg"); background-size: cover; background-position: center; background-repeat:repeat-y; }

#contents { overflow-x:hidden; }
a { text-decoration:none; }
li { list-style:none; }
img { display:block; max-width:100%; }

.pc { display:inline-block !important; }
.sp { display:none !important; }

.orange { color:var(--color-orange); }

.flexTop { display:flex; justify-content:space-between; align-items:flex-start; }

.contentBox { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); margin-top:5rem; }
.contentTitle { font-size:2rem; white-space:nowrap; }
.contentText { font-size:1.25rem; margin-left:4rem; line-height:2; padding-top:0.75rem; text-align:justify; }

.swiper-notification { display:none; }

@media screen and (max-width:1600px) and (min-width:1001px){
    html, body { font-size:1vw; }
}

@media screen and (max-width:1000px) and (min-width:641px){
    html, body { font-size:10px; }
}

/****************************************
    header
****************************************/
header { background-color:#fff; position:fixed; /*position:absolute; */top:4rem; right:0; width:57.5vw; height:5rem; display:flex; align-items:center; z-index:100; }
header::before { content:''; width:0; height:0; border-style:solid; border-width:2.5rem 2.5rem 2.5rem 0; border-color:transparent #fff transparent transparent; position:absolute; top:0; left:0; transform:translateX(-100%); }
header .hTel { display:none; position: absolute; top: 100%; left: 0; background-color: var(--color-orange); color: #fff; width: 100%; padding: 0.25rem 3rem;}
header #logo { display:flex; align-items:center; margin-left:1rem; padding:1rem 0; height:100%; }
header #logo > img, header #logo > svg { height:100%; overflow:visible; }
header #logo > svg .logoBody { animation:logoFix 1.5s 2s forwards; transform-origin:center; }
header #logoSide { display:flex; flex-direction:column; justify-content:space-around; height:100%; margin-left:0.5rem; }
header #logoSide > img { height:35%;}
#overhaul { background-color:var(--color-orange); padding:0.5rem 1.5rem; border-radius:1rem; margin:0 2.5rem; font-family:var(--font-gothic); }
#overhaul .ohContact { color:#fff; font-size:1rem; letter-spacing:1px; font-family:var(--font-gothic); text-decoration: none; }
#overhaul .ohContact::after { content:'\f003'; font-family:fontawesome;  font-size:1rem; padding-left:1rem; }
#overhaul > span { color:#fff; padding:0 0.5rem; }
#menu { width:2rem; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; transition:0.75s; }
#menu > span { width:100%; height:0.25rem; border:1px solid rgb(0, 0, 0); background-color:#000; transition:0.5s; }
#menu > span:nth-child(2) { width:var(--spw); margin:0.75rem 0; }
#menu.active { transform:rotate(-360deg); }
#menu.active > span:nth-child(1) { transform:rotate(45deg) translate(40%, 240%); }
#menu.active > span:nth-child(2) { opacity:0; }
#menu.active > span:nth-child(3) { transform:rotate(-45deg) translate(40%, -240%); }

#menuBody { background-color:#fff; display:flex; flex-direction:column; align-items:center; position:absolute; top:100%; left:30%; width:23rem; visibility:hidden; overflow:hidden; transition:0.75s ease-in-out; }
#menuBody > ul { font-size:1.5rem; color:var(--color-gray); width:90%; }
#menuBody > ul li > a { display:flex; justify-content:space-between; padding-bottom:0.5rem; border-bottom:1px solid var(--color-gray); margin-top:2rem; color:var(--color-gray); font-weight:bold; padding-left:0.5rem; }
#menuBody > ul li > a:after { content:'\f054'; font-family:fontawesome; font-size:1.7rem; padding-right:1rem; }
#menuBody > div { color:var(--color-orange); text-align:center; font-size:1.25rem; padding:2rem 1rem; }
#menuBody > div > p { line-height:1.5; padding:0.5rem; }
#menuBody > div > p:last-child { line-height:1; }
#menuBody > div span { display:block; font-size:1rem; }

@keyframes logoFix {
    0% { transform:scale(1); }
    100% { transform:scale(1.2); }
}

/****************************************
    footer
****************************************/
footer { background-color:var(--color-gray); }
#footerUpper { display:flex; justify-content:space-between; width:var(--spw); max-width:1024px; margin:0 auto; padding:2rem 0; }
#footerUpper > img { width:8rem; }
#footerUpper > section { color:var(--color-gray); background-color:#fff; font-size:0.875rem;  border-radius:0.5rem; display:flex; padding:0.5rem 1.5rem; }
#footerUpper > section > span:last-child { padding-left:1rem; }
#footerLower { background-color:var(--color-orange); font-size:0.875rem; color:#fff; text-align:center; padding:0.75rem 0; }

/****************************************
main visual
****************************************/
#mainVis { position:relative; width:100%; background-position:center; background-size:cover; background-repeat:no-repeat; }
#mainVis #mainBg { visibility:hidden; width:100%; height:auto; }
#mainVis #mainBgSP { display:none; }
#mainVis::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0 ,0.4); z-index:1; }
#mainVis > div { position:absolute; z-index:10; color:#fff; font-size:3.5rem; top:50%; left:50%; transform:translate(-50%, -50%); display:inline-flex; align-items:center; }
#mainVis > div.mainImg { z-index:0; transform:none; display:block; width:100%; height:100%; top:0; left:0; }
#mainVis > div.mainImg div { width:100%; height:100%; }
#mainVis > div.mainImg .swiper-wrapper img { width:100%; height:auto; }
#mainVis .swiper-wrapper { transition-timing-function:ease-in-out; }
/* index */
#mainVis > div > span { font-size:1.75rem; color:var(--color-orange); background-color:#fff; padding:0.25rem 1.5rem 0.15rem; margin-left:2rem; border-radius:0.5rem; font-weight:bold; }
#mainLead { color:#fff; position:absolute; top:60%; left:50%; transform:translateX(-50%); line-height:1.5; z-index:10; font-size:1.5rem; letter-spacing:2px; }
#mainLeadSub { color:#fff; position:absolute; top:70%; left:50%; transform:translateX(-50%); line-height:1.5; z-index:10; font-size:1.5rem; letter-spacing:2px; display:flex; flex-direction:column; }
#mainLeadSub > span:not(:first-child) { text-indent:2rem; }
#mainVis > ul { position:absolute; right:1rem; top:50%; text-align:right; color:#fff; z-index:10; }
#mainVis > ul > li:not(:last-child) { margin-bottom:1rem; }

/* underlayer */
#mainVis > #ULTitle { top:45%; }
#mainVis > #ULTitleSub { font-size:1.75rem; top:55%; }
#mainVis > #ULTitleSub > span { background-color:var(--color-orange); color:#fff; padding:2px 1rem 0; line-height:1.6rem; border-radius:0; }
#ULLead { color:#fff; position:absolute; top:65%; left:50%; transform:translateX(-50%); line-height:1.5; z-index:10; font-size:1.75rem; }

/* business sign */
#bizSign { display:flex; align-items:center; justify-content:center; height:3.5rem; }
#bizSign::before { content:''; width:0; height:0; border-style:solid; border-width:0 1.5rem 3.5rem 0; border-color:transparent var(--color-orange) transparent transparent; }
#bizSign::after { content:''; width:0; height:0; border-style:solid; border-width:3.5rem 1.5rem 0 0; border-color:var(--color-orange) transparent transparent transparent; }
#bizSign > span { background-color:var(--color-orange); color:#fff; font-size:1.5rem; padding:0 2rem; display:flex; justify-content:center; align-items:center; min-width:20vw; height:100%; }

/****************************************
    index
****************************************/
.indexNewsWrap { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
.indexNewsWrap > article { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-top:1rem; border-bottom:1px dotted var(--color-gray); padding-bottom:1rem; }
.indexNewsWrap > article > h1 { font-weight:normal; display:flex; align-items:center; font-size:1.5rem; }
.indexNewsWrap > article > h1::before { content:'\f1ea'; font-family:fontawesome; padding-right:0.5rem; font-size:1rem; }
.indexNewsWrap > article > p { width:100%; text-align:justify; padding-left:1.75rem; }
.serviceBoxWrap { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
.boxTitle { width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap; }
.boxTitle > span { font-size:2rem; font-weight:bold; }
.boxTitle > a { font-size:1.125rem; color:#fff; background-color:var(--color-orange); padding:0.25rem 1.5rem; margin:0.5rem 0 0 0.5rem; }
.boxTitle > a:after { font-size:1.25rem; content:'\f105'; font-family:fontawesome; padding-left:1rem; }
.serviceBox { position:relative; margin-top:1rem; }
.sbContent { position:absolute; top:1.25rem; left:1.25rem; width:calc(100% - 2.5rem); height:calc(100% - 2.5rem); display:flex; flex-direction:column; justify-content:space-around; align-items:flex-start; color:#fff; font-weight:bold; clip-path:inset(0 44% 72% 0); transition:all 0.3s ease; }
.sbContent::after { content:''; width:100%; height:100%; position:absolute; z-index:-1;  background-color:var(--color-orange); opacity:0.9; }
.serviceBox:hover .sbContent { clip-path:inset(0); }
.sbTitle { font-size:1.5rem; padding:0.5rem 0 0.25rem; margin-left:0.5rem; width:15rem; text-align:center; position:relative; }
.sbTitle::before, .sbTitle::after { content:''; position:absolute; right:0; bottom:0; border-style:solid; border-color:#fff; }
.sbTitle::before { height:1rem; border-width:0 1px 0 0; animation:0.3s linear forwards extLineV-out; }
.sbTitle::after  { width:1rem;  border-width:0 0 1px 0; animation:0.3s linear forwards extLineH-out; }
.serviceBox:hover .sbTitle::before { animation:0.3s linear forwards extLineV; }
.serviceBox:hover .sbTitle::after { animation:0.3s linear forwards extLineH; }
.sbContent > section { padding:0 0.75rem; }
.sbContent > section > p { font-size:1.1rem; text-align:justify; margin-bottom:0.5rem; line-height:1.5; }
.sbContent > a { margin-left:auto; margin-right:0.5rem; background-color:#fff; color:var(--color-orange); padding:0.25rem 1rem 0.15rem; }

@keyframes extLineV {
    0% { height:1rem; }
    30% { height:100%; width:0; border-width:1px 1px 0 0; }
    100% { height:100%; width:100%; border-width:1px 1px 0 0; }
}

@keyframes extLineH {
    0% { width:1rem; }
    70% { width:100%; height:0; border-width:0 0 1px 1px; }
    100% { width:100%; height:100%; border-width:0 0 1px 1px; }
}

@keyframes extLineV-out {
    0% { height:100%; width:100%; border-width:1px 1px 0 0; }
    70% { height:100%; width:0; border-width:1px 1px 0 0; }
    100% { height:1rem; width:0; border-width:1px 1px 0 0; }
}

@keyframes extLineH-out {
    0% { width:100%; height:100%; border-width:0 0 1px 1px; }
    30% { width:100%; height:0; border-width:0 0 1px 1px; }
    100% { width:1rem; height:0; border-width:0 0 1px 0; }
}

/* instagram */
.instaArea { margin:var(--boxMargin); margin-top:0; }
.instaTitle { width:var(--spw); max-width:var(--pcw); margin:0 auto 1rem; display:flex; justify-content:space-between; align-items:center; }
.instaTitle > span { font-size:2rem; font-weight:bold; }
.instaTitle::after { content:'\f16d'; font-family:fontawesome; color:var(--color-orange); font-size:2rem; }
/* 20211111 mod start */
/*.instaBox { display:flex; flex-direction:column; justify-content:space-between; }*/
.instaBox { display:flex; flex-direction:column; }
/* 20211111 mod end   */
.instaBox > span { line-height:1.5; padding-top:0.5rem; font-size:1rem; text-align:justify; color:#000; }

/* repair flow */
.flowBox { display:flex; flex-direction:column; width:23%; color:#fff; font-size:1rem; font-weight:bold; margin-top:2rem; }
.flowUpper { background-color:var(--color-gray); display:flex; flex-direction:column; align-items:center; padding:2rem 1rem 3rem; }
.flowIcon { height:4rem; display:flex; justify-content:center; align-items:center; }
.flowUpper > p { margin:1.5rem 0; }
.flowUpper > span { text-align:justify; font-size:0.98rem; }
.flowLower { display:flex; justify-content:center; align-items:center; padding:2.5rem 0 2rem; position:relative; background-color:var(--color-orange); }
.flowLower > p { font-size:4rem; position:absolute; top:0; left:50%; transform:translate(-50%, -50%); }


/****************************************
    pricing
****************************************/
#prArea { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
#prArea .prTable { overflow-x:scroll; border:1px solid var(--color-gray); }
#prArea .prTable:not(:first-child) { margin:3rem 0; }
#prBoxArea { display:flex; justify-content:space-between; flex-wrap:wrap; margin-bottom:2rem; }
.prBox { width:30%; display:flex; flex-direction:column; align-items:center; border:1px solid var(--color-gray); background-color:#fff; box-shadow:1px 1px 3px 1px #acacac; }
.prBox > img { max-width:70%; padding:1rem 0 0.5rem; }
.prBox:hover { cursor:pointer; }
.prBox:nth-child(n+4) { margin-top:2rem; }
.prBoxLast { margin-right:auto; margin-left:5%; }
.prBox > p { width:100%; text-align:center; font-size:0.85rem; font-weight:bold; color:var(--color-gray); padding:1rem 0 0; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.prBox > p::before { content:''; width:10%; height:1px; background-color:var(--color-gray); margin-bottom:1.5rem}
.prBox > p::after { content:''; width:10%; height:1px; background-color:var(--color-gray); margin-top:1.5rem}
.prBox::after { content:'詳細'; font-family:fontawesome; color:var(--color-gray); text-align:center; width:100%; padding:2rem; transition:0.5s; }
.prBox:hover::after { background-color:var(--color-green); color:#fff; }

.prListBG { display:none; position:fixed; top:0; left:0; min-width:100%; min-height:100%; background-color:rgba(0, 0, 0, 0.6); z-index:100; }
.prListArea { display:none; position:fixed; top:5rem; left:50%; transform:translateX(-50%); z-index:101; width:600px; max-width:var(--spw); max-height:87.5vh; overflow-y:auto; border-radius:0.5rem; background-color:#fff; }
.prList { width:100%; height:100%; position:relative; }
.prList .close { position:absolute; top:0; right:0; padding:1rem; line-height:1; }
.prList .close::before { content:'\f00d'; font-family:fontawesome; color:var(--color-gray); opacity:0.6; transition:0.5s; }
.prList .close:hover::before { opacity:1; }
.prListBox { width:100%; overflow:auto; }
.prList img { max-height:120px; width:100%; border-bottom:1px solid var(--color-gray); }
.prListTable { margin:1rem; width:95%; border-collapse:collapse; }
.prListTable * { font-size:1.25rem; text-align:center; padding:0.5rem 0; font-weight:bold; }
.prListTable > thead { background-color:var(--color-green); color:#fff; }
.prListTable > thead > tr { border:1px solid var(--color-green); }
.kikou { border:1px solid var(--color-gray); border-width:1px 1px 0 1px; }
.repair { border:1px solid var(--color-gray); border-width:0 1px 1px 1px; }
.kikou span { font-size:1rem; border:1px solid var(--color-gray); border-radius:10rem; background-color:var(--color-green); color:#fff; margin:0 0.25rem; padding:0 1rem; }
.repair > td { display:flex; justify-content:space-between; align-items:center; }
.repair > td > span { padding:0 1rem; }
.repair > td > span:first-child { font-weight:normal; }

/* 20210825 del start *//*
#prArea table { border-collapse:collapse; width:100%; table-layout:fixed; }
#prArea table caption { caption-side:bottom; text-align:left; margin-top:1rem; font-size:0.85rem; }
#prArea table td { border:1px solid var(--color-gray); font-size:1rem; text-indent:0.5rem;line-height:2; white-space:pre; }
#prArea table td:first-child { border-left-width:0; }
#prArea table td:last-child { border-right-width:0; }
#prArea table tbody tr:first-child td { border-top-width:0; }
#prArea table tbody tr:last-child td { border-bottom-width:0; }
#prArea table td.diagonal { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+'); }
#prArea table td.price { text-align:right; }
#prArea table td.price::before { content:'\\'; }
#prArea table td.price::after { content:'～'; }
.sticky { position:sticky; left:0; background-color:#fff; background-clip:padding-box; text-align:center; text-indent:0 !important; }
.sticky::before { content:''; position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px;  border:1px solid var(--color-gray); border-left-width:0; }
#prArea table tbody tr:last-child td.sticky::before { bottom:0; border-bottom-width:0; }
.td5 { width:5rem !important; }
.td15 { width:15rem !important; left:calc(5rem + 1px) !important; }
.td15::before { border-left-width:0 !important; }
.colG1 { width:5rem !important; }
.colG2 { width:15rem !important; }
.colG3, .colG4, .colG5, .colG6 { width:13rem; }
/* 20210825 del end */
p#prCaution { margin-top:3rem; font-size:1rem; }


/****************************************
    overhaul
****************************************/
#ohArea { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
.ohCate { margin-bottom:2rem; }
.ohCateTitle { font-size:1.5rem; font-weight:bold; display:flex; align-items:center; justify-content:flex-start; }
.narrowDown { font-size:1rem; width:60%; display:flex; justify-content:space-around; margin-left:2rem; }
.narrowDown > span { display:none; }
.narrowDown > ul { display:flex; justify-content:space-between; width:100%; }
.narrowDown a { color:#000; }
.ulCateList { padding:1rem 0.5rem; display:flex; justify-content:flex-start; flex-wrap:wrap; }
.cateItem { font-size:1.25rem; margin:0 2rem 1rem 0; display:inline-flex; align-items:center;  margin-bottom:1rem; position:relative; padding:0 0.5rem; }
.cateItem:last-child { margin-right:auto; }
.cateItem > label { padding-left:0.75rem; }
#ohButtonArea { display:flex; justify-content:center; align-items:center; }
#ohButtonArea > button { color:#fff; font-size:1.5rem; padding:0.25rem 1.5rem 0.15rem; margin:0 0.5rem; }
#ohClear { background-color:var(--color-gray)}
#ohSubmit { background-color:var(--color-orange); }
#ohCaution { margin-top:5rem; }
.ohActive::before { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; background-color:#f8c19c; content:''; mix-blend-mode:hard-light; }
.ohActive::after { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-2; background-color:var(--color-gray); content:'';}

/* estimate */
#estSpinner { position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; background-color:rgba(255, 255, 255, 0.4); display:none; }
#estSpinner::before { content:'\f110'; font-family:fontawesome; color:#999; font-size:3rem; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); animation:3s linear infinite spinner;}
#estimatesArea { position:fixed; top:0; left:0; width:100%; height:100%; display:none; }
#estimates { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:2rem; display:flex; justify-content:space-between; flex-direction:column; color:#fff; font-size:1.75rem; }
#estimates::before { content:''; background-color:var(--color-gray); opacity:0.85; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }
#estTitle { width:100%; border:1px solid #fff; padding:0.5rem 1rem; margin-bottom:2rem; }
#estList { border-collapse:collapse; }
#estList > tbody { font-size:1.5rem; }
#estList tr { line-height:1.75; }
#estList tr > td:not(:last-child) { padding-right:4rem; }
#estList tr > td { padding:0 1.5rem; }
#estList tr#estLast > td { padding-bottom:1rem; }
#estList tr#estSum > td { padding-top:0.5rem; }
#estList tr:last-child > td { border-top:1px solid #fff; }
#estBtnArea { display:flex; align-items:center; justify-content:center; margin-top:2rem; font-size:1.5rem; }
#estBtnArea > * { margin:0 0.75rem; padding:0.25rem 0 0.15rem; width:15rem; text-align:center; }
#estBtnArea > button { background-color:#fff; color:var(--color-gray); }
#estBtnArea > a { background-color:var(--color-orange); color:#fff; }

@keyframes spinner {
    0% { transform:rotate(0); }
    100% { transform:rotate(360deg); }
}

/****************************************
    service
****************************************/
#svArea { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
.svBox { display:flex; flex-direction:column; width:100%; align-items:flex-start; margin-bottom:3rem; }
.svBox > * { width:100%; }
.svBox > h1 { font-size:1.75rem; display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.svBox > h1 > a { font-size:1rem; color:#fff; background-color:var(--color-orange); padding:0.25rem 1rem; }
.svBox > p { line-height:1.5; font-size:1.3em; text-align:justify; margin-top:1.5rem; }
.svBox > p > span { color:var(--color-orange); }

/* 20211022 add start */
#svPolishImg { overflow:hidden; }
/* 20211111 mod start */
#svPolishImg .swiper-slide { height:auto; }
#svPolishImg .swiper-slide img { width:100%; height:100%;  }
/* 20211111 mod end   */
/* 20211022 add end   */

/****************************************
    shopinfo
****************************************/
#siArea { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
#siBox { width:100%; display:flex; flex-direction:column; }
#siBox > h1 { font-size:1.75rem; margin-bottom:2rem; }
#siBox > div { display:flex; align-items:flex-start; padding-bottom:0.75rem; border-bottom:1px dotted #030000; margin-bottom:1.5rem; font-size:1.25rem; }
#siBox > div > div:first-child{ width:8rem; padding-left:0.5rem; margin-right:2rem; }
#mapArea .mapTitle { width:var(--spw); max-width:var(--pcw); margin:0 auto 2rem; font-size:1.75rem; display:flex; justify-content:space-between; align-items:center; }
#mapArea .mapTitle > a { color:#fff; background-color:var(--color-orange); font-size:1.25rem; padding:0.25rem 1rem; }
#mapArea .gmap { width:100%; height:50vh; }
#mapArea section { display:flex; justify-content:flex-start; align-items:center; margin-top:1.5rem; font-size:1.25rem; width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); margin-top:1rem; }
#mapArea section > span { display:flex; justify-content:flex-start; align-items:center; }
#mapArea section > span:first-child { margin-right:2rem; }
#mapArea section > span:first-child::before { content:''; display:block; border-radius:50%; background-color:#d84f8e; margin-right:0.5rem; width:1rem; height:1rem; }
#mapArea section > span:last-child::before { content:''; display:block; border-radius:50%; background-color:#9f2173; margin-right:0.5rem; width:1rem; height:1rem; }

/* 20211013 add start */
#commerce { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
#commerce h1 { font-size: 1.5rem; margin-bottom: 1rem; }
#commerce table { width:100%; background-color:#999; border-collapse:collapse; text-align:justify; }
#commerce table th { padding:0.5rem 1rem; background-color:#eee; border:1px solid var(--color-gray); width:20%; }
#commerce table td { padding:0.5rem 1rem; background-color:#fff; border:1px solid var(--color-gray); }
/* 20211013 add end   */

/****************************************
    flow
****************************************/
#flArea { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
#flArea > h1 { margin-bottom:2rem; font-size:1.75rem; }
.flBox { display:flex; width:100%; justify-content:space-between; align-items:stretch; }
.flBoxTitle { display:flex; width:25%; min-height:18rem; flex-direction:column; align-items:center;  background-color:var(--color-gray); position:relative; }
.flBoxTitle > img { padding:2rem 0; }
.flBoxTitle > h1 { font-size:1.125rem; padding-bottom:2rem; }
.flBoxTitle > p { font-size:1rem; background-color:var(--color-orange); display:flex; flex-direction:column; line-height:0.75; width:100%; align-items:center; padding-bottom:2rem; position:absolute; bottom:0; }
.flBoxTitle > p > span { font-size:4rem; transform:translateY(-50%); }
.flBoxTitle * { color:#fff; }
.flBoxCont { width:30%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; }
.flBoxCont > img { padding:1.25rem 0; }
.flBoxCont > p { font-size:1.25rem; text-align:justify; }
.flBoxCont > p > a, .flBoxCont > p > span { color:var(--color-orange); }
.hAllow { display:flex; align-items:center; justify-content:center; }
.hAllow.rHidden { visibility:hidden; }
.hAllow::before { content:''; width:0; height:0; border-style:solid; border-width:0.5rem 0 0.5rem 1rem; border-color:transparent transparent transparent var(--color-gray); }
.vAllow { margin: 2rem 0; width: 26%; display: flex; justify-content: center; }
.vAllow::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 16px 8px 0 8px; border-color: var(--color-orange) transparent transparent transparent; }

/****************************************
    contact
****************************************/
#ctArea { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
#ctTitle { width:100%; display:flex; justify-content:space-between; align-items:center; font-size:1.75rem; margin-bottom:2rem; }
#ctTitle > a { color:#fff; background-color:var(--color-orange); padding:0.25rem 1rem; font-size:1.25rem; }
#ctForm * { font-size:1.25rem; }
#ctForm label { padding-left:1rem; }
.ctRadio { margin-top:1rem; display:flex; align-items:center; }
.ctRadio > div:not(:first-child) { margin-left:2rem; }
.ctText { margin:1.5rem 0 2rem; display:block !important; text-align:justify; }
.ctOverhaul { color:var(--color-orange); text-decoration: underline; }
.ctContents > div { display:flex; align-items:flex-start; flex-wrap:wrap; }
.ctContents > div > label, .ctContents > div > span { width:20%; padding-left:1rem; }
#itemInfo { display:none; flex-wrap:wrap; position:relative; }
#addInfo { position:absolute; bottom:2rem; left:1rem; padding:0.25rem 1.5rem; background-color:var(--color-orange); color:#fff; font-size:0.8rem; }
#addInfo::before { content:'\f067'; font-family:fontawesome; padding-right:1rem; }
.itemInfo { width:calc(100% - 13rem); margin-left:auto; position:relative; }
.itemInfo:nth-child(n+3) { padding-top:0.75rem; border-top:1px dotted var(--color-orange); }
.itemInfo > div { display:flex; align-items:flex-start; }
.itemInfo > div > label { width:13rem; padding-left:0 !important; }
.delInfoBox { justify-content:flex-end; margin-bottom:0.75rem; }
.delInfo { font-size:0.8rem !important; background-color:var(--color-gray); color:#fff; padding:0.25rem 1.25rem; }
.delInfo::before { content:'\f068'; font-family:fontawesome; padding-right:0.5rem; }
.ctContents input, .ctContents textarea { outline:none; border:1px solid #000; width:80%; margin-bottom:1rem; padding:0.5rem; }
#itemFileBox { display:none; margin-bottom:1rem; align-items:center; }
#itemFileBox > label { background-color:var(--color-orange); color:#fff; padding:0.25rem 1rem; width:auto; }
#itemFileBox > label::before { content:'\f1c5'; font-family:fontawesome; padding-right:0.5rem; }
#itemFileBox > span:last-child { width:auto; font-size:1rem; }
.ctButton { display:flex; justify-content:center; align-items:center; margin:3rem 0 5rem; }
.ctReset { color:#fff; background-color:var(--color-gray); padding:0.25rem 0; width:13rem; margin-right:1rem; }
.ctConfirm { color:#fff; background-color:var(--color-orange); padding:0.25rem 0; width:13rem; margin-left:1rem; transition:0.5s; }
.ctConfirm[disabled] { opacity:0.6; }

#privacyBase { position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0, 0, 0, 0.6); z-index:10; display:none; }
#privacy { position:fixed; top:18%; bottom:12%; left:15%; right:15%; overflow-y:scroll; background-color:#fff; padding:2rem; display:none; z-index:11; }
#privacy h1 { font-weight:bold; font-size:1.5rem; }
#privacy h2 { font-weight:bold; font-size:1.25rem; }
#privacy h1 + p { margin-top:1rem; font-size:1rem; line-height:1.5; }
#privacy > ol > li { list-style:decimal; margin:1rem 0 1rem 1rem; }
.pvList { list-style:disc; margin-left:1rem; }
#privacyContact { display:flex; flex-direction:column; }
#privacyContact + p { margin:1rem 0; }
#privacy a { color:#1481b7; }
#privacy a::after { content:'\A'; white-space:pre; }
#privacyCom { display:flex; flex-direction:column; align-items:flex-end; margin-top:2rem; }
#pvClose { position:absolute; right:15%; bottom:8%; z-index:11; background-color:var(--color-orange); color:#fff !important; padding:0.25rem 1rem; border-radius:0.5rem; }
/* 20211122 add start */
#privacy.privacyContent { width:var(--pcw); max-width:var(--spw); margin:var(--boxMargin); display:block; position:static; background-color:transparent; }
/* 20211122 add end   */

#ctFormBase { position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0, 0, 0, 0.4); display:flex; justify-content:center; align-items:center; display:none; }
#ctFormConf { position:fixed; top:18%;  right:30%; bottom:12%; left:30%; background-color:#fff; padding:0.25rem 1rem; border-radius:0.5rem; z-index:10; display:flex; flex-direction:column; justify-content:space-between; align-items:center; display:none; }
#ctFormHead { height:10%; display:flex; justify-content:center; align-items:center; font-size:1.25rem; }
#ctFormItems { width:80%; height:75%; overflow-y:scroll; }
.ctFormItem { display:flex; margin-top:0.5rem; padding-bottom:0.25rem; border-bottom:1px dotted var(--color-gray); }
.ctFormItem > div:first-child { width:30%; }
.ctFormItem > div:nth-child(2) { width:70%; }
#ctConfBtArea { height:15%; display:flex; justify-content:center; align-items:center; }
#ctCorrect { color: #fff; background-color: var(--color-gray); padding: 0.25rem 0; width: 13rem; margin-right: 1rem; }
#ctSubmit { color: #fff; background-color: var(--color-orange); padding: 0.25rem 0; width: 13rem; margin-left: 1rem; transition: 0.5s; }

#thanksCont { width:var(--spw); max-width:var(--pcw); margin:var(--boxMargin); }
#thanksCont > p { margin-top:3rem; text-align:justify; }

/****************************************
    news
****************************************/
#newsPagination { display:flex; align-items:center; justify-content:space-around; margin-top:3rem; }
.newsBtn { color:#fff; background-color:var(--color-orange); padding:0.5rem 2rem; border:1px solid var(--color-orange); border-radius:0.5rem; transition:0.3s; }
.newsBtn:hover { color:var(--color-orange); background-color:transparent; }
.newsBtn.disabled { opacity:0; pointer-events:none; }

/****************************************
    recruit
****************************************/
#recLead { width:var(--pcw); max-width:var(--spw); margin:var(--boxMargin); }
#recSex { display:flex; justify-content:flex-start; align-items:center; margin-bottom:1.5rem; }
#recSex > input { margin:0; width:auto; }
#recSex > label { margin-right:3rem; word-break:keep-all; }
.recConfirm { color:#fff; background-color:var(--color-orange); padding:0.25rem 0; width:13rem; margin-left:1rem; transition:0.5s; }
.recConfirm[disabled] { opacity:0.6; }

/***********************************************************
            sp
***********************************************************/
@media screen and (max-width:640px) {
    /* common */
    .pc { display:none !important; }
    .sp { display:inline-block !important; }

    /* header */
    header { width:75vw; height:3rem; justify-content:space-around; top:2rem; }
    header::before { border-width:24px 24px 24px 0; }
    header #logo { margin-left:0; padding:0.5rem 0; }
    header #logoSide { margin-left:0.5rem; }
    header #overhaul { display:none; position:fixed; bottom:0; left:0; width:100vw; margin:0; padding:1rem 1.5rem; border-radius:0; }
    header .hTel { padding:0.25rem 0; font-size:3.5vw; text-align:center; }
    #menu > span:nth-child(2) { margin:0.5rem 0; }
    #menu.active { transform:rotate(720deg); }
    #menu.active > span:nth-child(1) { width:50%; transform:rotate(45deg) translate(40%, 100%); }
    #menu.active > span:nth-child(2) { opacity:1; }
    #menu.active > span:nth-child(3) { width:50%; transform:rotate(-45deg) translate(40%, -100%); }
    #menuBody { left:auto; width:100%; }
    #menuBody > ul li { font-size:3.5vw; }
    #menuBody > ul li::after { font-size:4vw; }
    #menuBody > ul li > a { margin-top:1rem; }
    #menuBody > div { font-size:4vw; }


    /* footer */
    footer { display:flex; flex-direction:column; align-items:center; }
    #footerUpper,  #footerUpper > section { flex-direction:column; }
    #footerUpper { padding:1rem 0; }
    #footerUpper > section { margin-top:1rem; padding:0.5rem; text-align:center; }
    #footerUpper > section > span { padding-left:0 !important; font-size:3vw; }
    #footerLower { width:100%; }

    #mainVis { margin-bottom:2rem; }
    #mainVis #mainBg { display:none; }
    #mainVis #mainBgSP { visibility:hidden; width:100%; height:auto; display:block; }
    #mainVis > div { flex-direction:column; white-space:nowrap; align-items:center; font-size:8vw; letter-spacing:3px; }
    #mainVis > div > span { margin-left:0; font-size:5vw; letter-spacing:1px; margin-top:0.5rem; padding:0.15rem 1rem 0.05rem; }
    #mainLead { font-size:3.5vw; font-weight:bold; white-space:nowrap; top:64%; }
    #mainLeadSub { font-size:3.5vw; font-weight:bold; white-space:nowrap; top:75%; }
    #mainVis > ul { display:none; }

    .contentBox { flex-direction:column; margin-top:3rem; margin-bottom:3rem; }
    .contentTitle { font-size:5vw; }
    .contentText { margin-left:0; font-size:3.5vw; line-height:1.5; }
    .boxTitle > span { font-size:1.5rem; }
    .boxTitle > a, .boxTitle > a::after { font-size:0.75rem; margin-top:0.25rem;}

    .boxTitle > a::after { padding-left:0.5rem; }
    .boxTitle > span  { font-size:5vw; }
    .sbContent { top:0.5rem; left:0.5rem; width:calc(100% - 1rem); height:calc(100% - 1rem); clip-path:inset(0 44% 70% 0); }
    .sbTitle { font-size:3.5vw; padding:0.5rem 1rem; width:50%; }
    .sbContent > section > p { font-size:3vw; }
    .sbContent > a { font-size:3vw; padding:0.15rem 1rem; }

    /* index */
    #bizSign { margin-top:-2rem; height:10vw; }
    #bizSign::before { border-width:0 5vw 10vw 0; }
    #bizSign::after { border-width:10vw 5vw 0 0; }
    #bizSign > span { font-size:3.5vw; min-width:70vw; }
    
    .instaBox > span { font-size:3vw; }
    .instaTitle::after { font-size:8vw; }
    .instaTitle > span { font-size:5vw; }

    .flowBox { width:47.5%; }
    .flowUpper { padding:1rem 0.5rem 2rem; }
    .flowIcon { height:2.5rem; }
    .flowIcon > img { height:100%; }
    .flowUpper > p { font-size:3.2vw; margin:1rem 0; }
    .flowUpper > span { font-size:3vw; }
    .flowLower { padding:1.5rem 0 1rem; }
    .flowLower > p { font-size:10vw; }
    .flowLower > span { font-size:2.8vw; }

    /* pricing */
    .prListArea { top:10vh; height:80vh; }
    .prList .close { padding:3vw; }
    .prList .close::before { font-size:7.5vw; }
    .prBox { width:100%; }
    .prBox:nth-child(n+2) { margin-top:3vh; }
    .prListTable { width:90%; }
    .prListTable * { font-size:4vw; }
    .kikou span { font-size:3.5vw; }
    .repair > td > span { padding:0 3vw; }
    p.prCaution { font-size:2.75vw; padding-left:2.753vw; text-indent:-2.75vw; }

    /* estimate */
    #mainVis > #ULTitle { font-size:8vw; }
    #mainVis > #ULTitleSub { font-size:3.5vw; align-items:center; top:60%; }
    #mainVis > #ULTitleSub > span { font-size:3vw; padding:0 0.5rem; margin-top:0; }
    #ULLead { font-size:3vw; line-height:2; top:70%; white-space:nowrap}

    .ohCateTitle { font-size:5vw; justify-content:space-between; align-items:flex-end; }
    .ulCateList { width:100%; }
    .cateItem { font-size:3vw; white-space:nowrap; margin-right:auto; padding:3px 0.5rem; }
    .cateItem input[type="radio"] { border-radius:50%; }
    #ohButtonArea > button {font-size:4vw; }
    #ohCaution { font-size:3vw; }
    #estimates { width:95%; font-size:3.5vw; padding:3vw; }
    #estimates::before { opacity:0.9; }
    #estList > tbody { font-size:3vw; }
    #estList tr { line-height:2.5; }
    #estList tr > td { padding:0 2vw !important; }
    #estList tr#estLast > td { padding-bottom:2vh !important; }
    #estList tr#estSum > td { padding-top:2vh !important; }
    #estBtnArea > * { font-size:4vw; padding-bottom:0.25rem; }
    /*.narrowDown { display:none; }*/
    .narrowDown { justify-content:space-between; flex-direction:column; position:relative; width:40%; }
    .narrowDown > span { display:flex; justify-content:space-between; align-items:center; }
    .narrowDown > span::after { content:'\f107'; font-family:fontawesome; }
    .narrowDown > ul { display:block; position:absolute; top:8vw; z-index:10; }
    .narrowDown > ul > li { display:none; background-color:#fff; width:100%; border-bottom:1px solid var(--color-gray); padding-top:2vw; }
    .narrowDown > ul > li > a { font-size:3.5vw; display:flex; justify-content:flex-start; align-items:center; line-height:2; }
    .narrowDown > ul > li > a::before { content:'\f111'; font-family:fontawesome; padding:2vw; font-size:2.5vw; }

    /* service */
    .svBox > h1 { font-size:5vw; }
    .svBox > h1 > a { font-size:3vw; }
    .svBox > p { font-size:4vw; }

    /* shopinfo */
    #siBox > h1 { font-size:5vw; }
    #siBox > div { font-size:4vw; }
    #siBox > div > div:first-child { width:22vw; }
    #mapArea .mapTitle { font-size:5vw; }
    #mapArea .mapTitle > a { font-size:3vw; padding:1vw 4vw; }
    #mapArea section { flex-direction:column; align-items:flex-start; }
    #mapArea section > span { font-size:4vw; }

    /* 20211013 add start */
    #commerce h1 { font-size:5vw; }
    #commerce table { font-size:4vw; }
    #commerce table th { width:35%; font-weight:normal; }
    #commerce table td { width:65%; }
    /* 20211013 add end   */
    
    /* flow */
    #flArea > h1 { margin-bottom:2vh; font-size:5vw; }
    .flBox { flex-direction:column}
    .flBox > * { width:100%; }
    .flBoxCont > p { font-size:3.5vw; width:80%; }
    .hAllow { margin:2rem 0; }
    .hAllow::before { transform:rotate(90deg); }
    .hAllow.rHidden { margin:1rem 0; }
    .vAllow { width:100%; }

    /* contact */
    #ctTitle { font-size:5vw; }
    #ctTitle > a { font-size:3vw; }
    #ctForm * { font-size:4vw; }
    .ctRadio { flex-direction:column; align-items:flex-start; }
    .ctRadio > div:not(:first-child) { margin-top:2vw; margin-left:0; }
    .ctRadio input { border-radius:50%; }
    .ctContents > div { display:flex; flex-direction:column; align-items:flex-start; }
    .ctContents > div > * { width:100%; }
    .ctContents > div > label, .ctContents > div > span { padding-left:0 !important; width:auto; }
    .itemInfo { width:90% !important; }
    .itemInfo > div { flex-direction:column; }
    .itemInfo > div > * { width:100%; }
    #addInfo  { position:static; width:auto; margin-left:auto; margin-bottom:1rem; }
    #itemFileBox { justify-content:flex-start; align-items:flex-start; }
    #itemFileBox > label { display:flex; align-items:center; padding:1vw 5vw !important; margin-left:10%; }
    #itemFileBox > label::before { font-size:2.5vw; }
    #itemFileBox > span:last-child { font-size:3.5vw; margin-left:10%; }
    .ctButton { flex-direction:column; }
    .ctButton > button { padding:1rem; margin:0.5rem 0; }
    .ctReset { margin:0; }
    .ctSubmit { margin:1rem 0 0; }
    
    #ctFormConf { top: 12vh; left: 3vw; right: 5vw; bottom:8vh; }
    #ctFormHead { height:7.5%; }
    .ctFormItem { flex-direction:column; }
    .ctFormItem > div:first-child { width: auto; flex-grow: 0; display: flex; }
    .ctFormItem > div:first-child::after { content:':'; padding-left:0.5rem; }
    .ctFormItem > div:nth-child(2) { padding-left: 1rem; text-align: justify; }
    #ctConfBtArea { flex-direction:column; height:17.5%; }
    #ctConfBtArea > button { margin:1vh 0; }

    #pvClose { right:7.5%; bottom:3%; }
    #privacy { left:7.5%; right:7.5%; padding:6vw; }
    #privacy * { font-size:3vw !important; text-align:justify; }
    #privacy h1 { font-size:5vw !important; }
    #privacy h2 { font-size:3.5vw !important; padding-left:3.5vw; text-indent:-3.5vw; margin:1rem 0 0.25rem; }
    #privacy > ol > li { font-size:3.5vw !important; ; }

    /* news */
    .indexNewsWrap > article { flex-direction:column; align-items:flex-start; }
    .indexNewsWrap > article > h1 { font-size:4vw; }
    .indexNewsWrap > article > h1::before { font-size:3.5vw; }
    .indexNewsWrap > article > span { font-size:3.5vw; padding-bottom:3vw; }
    .indexNewsWrap > article > p { font-size:3.5vw; padding-left:0; }
    .newsBtn { padding:1vw 5vw; }
}