@charset "utf-8";

/*! base.css v1.1 */*,a:active,a:focus,a:hover{outline:0}a,mark{color:#3960e0}fieldset,legend,menu,ol,ul{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{text-decoration:none}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-size:100%;margin:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0}dd,dl,figure,form,menu,ol,p,pre,ul{margin:0}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}nav ol,nav ul,ul{list-style:none}img{max-width:100%;height:auto;vertical-align:top;border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0}legend{border:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}input.clear_css:-webkit-autofill,textarea.clear_css:-webkit-autofill{-webkit-box-shadow:0 1px 3px #c9c9c9 inset!important;transition:background-color 10s ease-in-out}input.clear_css:-webkit-autofill.wpcf7c-conf,textarea.clear_css:-webkit-autofill.wpcf7c-conf{-webkit-box-shadow:0 0 0 1000px #f7f9f6 inset!important;transition:background-color 10s ease-in-out}input,textarea{border-radius:0}.clearfix:after{display:block;clear:both;content:""}.hover{-webkit-transition:opacity .4s;transition:opacity .4s}.hover:hover{opacity:.8}

/*一時*/
.workWrap .workTable tbody tr:first-child,
.mail {
    display: none;
}

/***************************************************************************
 *
 * COMMON STYLE
 *
 ***************************************************************************/
@font-face {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: normal;
    src: url("../font/ZenMaruGothic/SubSet-ZenMaruGothic-Regular.woff2") format("woff2");
	font-display: swap;
}
@font-face {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: bold;
    src: url("../font/ZenMaruGothic/SubSet-ZenMaruGothic-Bold.woff2") format("woff2");
	font-display: swap;
}
@font-face {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 900;
    src: url("../font/ZenMaruGothic/SubSet-ZenMaruGothic-Black.woff2") format("woff2");
	font-display: swap;
}
@font-face {
    font-family: "Zen Kaku Gothic New";
    font-style: normal;
    font-weight: normal;
    src: url("../font/ZenKakuGothicNew/subset-ZenKakugothicNewRegular.woff2") format("woff2");
	font-display: swap;
}
@font-face {
    font-family: "Zen Kaku Gothic New";
    font-style: normal;
    font-weight: bold;
    src: url("../font/ZenKakuGothicNew/subset-ZenKakugothicNewBold.woff2") format("woff2");
	font-display: swap;
}
@font-face {
    font-family: "Zen Kaku Gothic New";
    font-style: normal;
    font-weight: 900;
    src: url("../font/ZenKakuGothicNew/subset-ZenKakugothicNewBlack.woff2") format("woff2");
	font-display: swap;
}

.zenkaku {
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.poppins {
    font-family: "Poppins", sans-serif;
}

.wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    max-width: 768px;
    margin: 0 auto;
    background: url(../images/common/background.jpg)repeat-y top left/ 100%;
}

.afterCommon {
    background-color: #fff;
}

body,button,html,input,select,textarea {
	font-family: "Zen Maru Gothic", serif;
}

body {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #272727;
}

body.fixed {
    overflow: hidden;
}

.inner {
    width: 100%;
    padding: 0 3.4%;
}

[data-wpr-lazyrender] {
    content-visibility: inherit !important;
}

/*VALIDATE CONTACT*/
.error {
    display: block;
    font-size: 12px;
    color: red;
}

/* HEADER */
#header {
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 10px);
    max-width: 758px;
    background-color: #F4FBFF;
    border-radius: 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    z-index: 9;
}

.admin-bar #header {
    margin-top: 32px;
}

.headerBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4.7% 4px 2.3%;
}

.headerBar .logo {
    width: 35%;
    margin-top: -2px;
}

.headerBar .logo a {
    display: block;
}

.headerBar .hbRight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 20%;
}

.headerBar .hbRight .hbPhone {
    width: 57.9%;
    margin-right: 14.4%;
}

.headerBar .hbRight .hbPhone a {
    display: block;
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    pointer-events: none;
}

.headerBar .hbRight .hbPhone img {
    width: 100%;
}

.headerBar .hbRight .hamburger {
    width: 27.7%;
    cursor: pointer;
    margin-top: 1px;
}

.headerBar .hbRight .hamburger img {
    width: 100%;
}

.mainMenu {
    position: fixed;
    top: -110vh;
    right: 49.9%;
    transform: translateX(66.7%);
    width: 98.9%;
    max-width: 575px;
    height: 100vh;
    background: rgb(16, 52, 96, 0.98);
    z-index: 9;
    transition: top 0.5s ease;
    overflow: hidden;
}

.mainMenu.show {
    top: 0;
}

.mainMenu .menuTop {
    position: relative;
    display: flex;
    justify-content: center;
    background-color: #fff;
    text-align: center;
    padding: 11px 10px;
}

.mainMenu .menuTop .menuLogo {
    width: 12.9%;
}

.mainMenu .menuTop .menuLogo img {
    width: 100%;
}

.mainMenu .menuTop .menuClose {
    position: absolute;
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    width: 6%;
    cursor: pointer;
}

.mainMenu .menuTop .menuClose img {
    width: 100%;
}

.menuWrap {
    height: calc(100% - 74px);
    padding: 20px 5% 70px;
    overflow-y: auto;
}

.menuWrap .menuList {
    margin-bottom: 69px;
    padding: 0 9.1%;
}

.menuWrap .menuList>li {
    position: relative;
}

.menuWrap .menuList>li:not(:last-child) {
    margin-bottom: 19px;
}

.menuWrap .menuList li a {
    position: relative;
    display: inline-block;
    font-size: clamp(17px, 3.9vw, 24px);
    font-weight: bold;
    color: #fff;
    letter-spacing: -0.1px;
}

.menuWrap .menuList>li>a::before {
    content: "";
    position: absolute;
    top: 53%;
    left: -13px;
    transform: translateY(-50%);
    width: 6px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #fff;
}

.menuWrap .menuList li .menuSub {
    position: relative;
    margin-top: 8px;
}

.menuWrap .menuList li .menuSub::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -9px;
    width: 1px;
    height: 100%;
    background-color: #DDFBFF;
}

.menuWrap .menuList li .menuSub li:not(:last-child) {
    margin-bottom: 9px;
}

.menuWrap .menuList li .menuSub a {
    font-size: clamp(16px, 3.5vw, 22px);
    font-weight: 500;
}

.menuWrap .menuList li .menuSub ul {
    margin: 10px 0 10px 20px;
}

.menuWrap .menuList li .menuSub ul a {
    font-size: clamp(16px, 3.5vw, 18px);
}

#header+.mainMenu .menuWrap .ctaWrap .ctaPhone {
    width: 66.3%;
}

#header+.mainMenu .menuWrap .ctaWrap .ctaPhone a {
    padding: 6px 20px 8px 17px;
}

#header+.mainMenu .ctaWrap .ctaPhone a .number::before {
    left: 4.7%;
    top: 26%;
}

#header+.mainMenu .menuWrap .ctaWrap .ctaLine {
    width: 14.3%;
}

.ctaWrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding-left: 2px
}

.ctaWrap a {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
}

.ctaWrap .ctaPhone {
    width: 68%;
    max-width: 330px;
    margin-right: 5.5%;
}

.ctaWrap .ctaPhone a {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background-color: #F0112B;
    border-radius: 50px;
    padding: 6px 20px 8px;
    width: 100%;
    line-height: 1;
    pointer-events: none;
}

.ctaWrap .ctaPhone a .number {
    position: relative;
    display: block;
    font-size: clamp(27px, 6.3vw, 40px);
    padding-left: 1.5vw;
    letter-spacing: 0px;
    margin-bottom: 3px;
}

.ctaWrap .ctaPhone a .number::before {
    content: "";
    position: absolute;
    top: 28%;
    left: 3.3%;
    width: 8.4%;
    aspect-ratio: 1/1;
    background: url(../images/common/icon-phone-white.svg) no-repeat center center/ 100%;
}

.ctaWrap .ctaPhone a .note {
    font-size: clamp(11px, 2.6vw, 14px);
    display: inline-block;
    letter-spacing: 0.5px;
    margin-left: 0.5vw;
}

.ctaWrap .ctaPhone a .note .fs12 {
    display: inline-block;
    font-size: 12px;
    margin-left: 8px;
}

.ctaWrap .ctaLine {
    width: 10.35%;
}

.ctaWrap .ctaLine a {
    display: inline-block;
    width: 100%;
    border-radius: 50%;
}

.ctaWrap .ctaLine img {
    width: 100%;
}

/* breadCrumb */
.breadCrumb {
    margin-bottom: 7px;
	margin-top: 5px;
}

.breadCrumb .breadCrumbList {
    display: flex;
    flex-wrap: wrap;
}

.breadCrumb .breadCrumbList li {
    position: relative;
}

.breadCrumb .breadCrumbList li:not(:last-child) {
    margin-right: 3%;
}

.breadCrumb .breadCrumbList li:not(:last-child)::before {
    content: '>';
    position: absolute;
    top: 1px;
    right: -14px;
    font-size: clamp(11px, 2.6vw, 15px);
    font-weight: 500;
    color: #0B3F7E;
    line-height: 1;
}

.breadCrumb .breadCrumbList li a {
    font-size: clamp(11px, 2.6vw, 15px);
    font-weight: 500;
    color: #0B3F7E;
}

.breadCrumb .breadCrumbList li:last-child a {
    pointer-events: none;
}

/* breadCrumb */

.pageTitle {
    position: relative;
    text-align: center;
    font-size: clamp(27px, 6.3vw, 40px);
    font-weight: 900;
    color: #0B3F7E;
}

.pageTitle::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    background-color: #55BDE0;
    border-radius: 5px;
}

/* CONTENT */
#content {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
}

/* ctaFix */
.ctaFix {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100.2%;
    max-width: 768px;
    z-index: 3;
    transition: opacity 0.3s ease;
}

.ctaFix.hidden {
    opacity: 0;
    pointer-events: none;
}

.ctaFix .ctaFixWrap {
    position: relative;
    z-index: 1;
}

.ctaFix .ctaFixWrap .ctaFixPhoto {
    position: absolute;
    top: -107.6%;
    right: 0.4%;
    width: 42.1%;
    aspect-ratio: 182 / 73;
    z-index: -1;
}

.ctaFix .ctaFixWrap .ctaWrap {
    position: relative;
    background-color: #DCF1F8;
    border-radius: 5px 5px 0 0;
    padding: 10px 20px 11px;
    z-index: 2;
}

/* ctaFix */

/* areaCta */
.areaCta {
    width: 96.9%;
    max-width: 768px;
    background-color: #0B3D85;
    box-shadow: 0 0 9px rgba(31, 102, 196, 0.23);
    border-radius: 5px;
    padding: 15px 8px 11px;
    margin: 50px auto;
    content-visibility: inherit !important;
}

.areaCta .inner {
    padding: 0;
}

.areaCta .ctaIntro {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-left: 5%;
    margin-top: -11.9%;
    margin-bottom: 0.9%;
}

.areaCta .ctaIntro .introWrap {
    position: relative;
    margin-bottom: 1.3%;
}

.areaCta .ctaIntro .introWrap .introTitle {
    display: inline-block;
    color: #0B3D85;
    font-size: clamp(35px, 8.1vw, 60px);
    background-color: #FCDF03;
    border-radius: 3px;
    line-height: 1;
    padding: 2px 6px 6px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.areaCta .ctaIntro .introWrap .introSub {
    font-size: clamp(14px, 4.2vw, 28px);
    font-weight: bold;
    color: #fff;
    margin-left: 5px;
    line-height: 1.42;
}

.areaCta .ctaIntro .introPhoto {
    width: 38.62%;
    margin-left: -2.6%;
	z-index: 1;
}

.areaCta .ctaList {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 11px;
}

.areaCta .ctaList li {
    width: calc(100%/3 - 5px);
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    padding: 10px 5px 16px;
}

.areaCta .ctaList li .ctaIcon {
    width: 38%;
    margin: 0 auto -0.3vw;
}

.areaCta .ctaList li .ctaIcon img {
    width: 100%;
}

.areaCta .ctaList li .iconName {
    font-size: clamp(17px, 3.9vw, 27px);
    font-weight: bold;
    color: #103460;
    margin-bottom: -0.6vw;
}

.areaCta .ctaList li .iconNote {
    font-size: clamp(20px, 4.5vw, 30px);
    font-weight: bold;
    color: #F0112B;
    line-height: 1;
}

.areaCta .ctaList li .iconNote .number {
    font-size: clamp(28px, 6vw, 38px);
}

.areaCta .ctaPay {
    width: 100%;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    padding: 3px 5px 2px;
    margin-bottom: 11px;
}

.areaCta .ctaPay .paySub {
    font-size: clamp(14px, 3.2vw, 24px);
    font-weight: bold;
    color: #103460;
    margin-bottom: 2px;
}

.areaCta .ctaPay .payPhoto {
    width: 64.7%;
    margin: 0 auto;
}

.areaCta .ctaWrap {
    width: 100%;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    padding: 10px 6px;
}

.areaCta .ctaWrap p {
    position: relative;
    padding-top: clamp(20px, 2.5vw, 40px);
}

.areaCta .ctaWrap .ctaWrapNote {
    position: absolute;
    top: clamp(-4px, -1vw, -20px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(150px, 13vw, 300px);
    font-size: clamp(15px, 3.5vw, 25px);
    font-weight: bold;
    color: #F0112B;
    letter-spacing: 0.6px;
}

.areaCta .ctaWrap .ctaPhone {
    margin: 0;
}

.areaCta .ctaWrap .ctaLine .ctaWrapNote {
    color: #4DC764;
}

.areaCta .ctaWrap .ctaLine a {
    width: 100%;
}

.areaCta .ctaWrap .ctaLine {
    width: 10%;
    margin-left: 7.6%;
}

/* areaCta */

/* areaBtn */
.areaBtn {
    text-align: center;
}

.areaBtn a {
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #103460;
    background-color: #F7CA0F;
    border: 2px solid #103460;
    border-radius: 20px;
    padding: 7px 33px 6px 26px;
    margin: 0 auto;
}

.areaBtn a::before {
    content: '';
    position: absolute;
    top: 53%;
    right: 13px;
    transform: translateY(-50%);
    width: 6px;
    height: 12px;
    background: url(../images/common/icon-arrow.svg)no-repeat top left/ 100%;
}

/* areaBtn */


.sectionTitle {
    font-size: clamp(27px, 6.3vw, 48px);
    font-weight: 900;
    text-align: center;
    color: #0B3F7E;
    line-height: 1.15;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.sectionTitle .bg {
    position: relative;
    z-index: 1;
}

.sectionTitle .bg::before {
    content: "";
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 34%;
    background-color: #FCDF03;
    border-radius: 5px;
    z-index: -1;
}

.titleEn {
    text-align: center;
    font-size: clamp(13px, 3vw, 18px);
    font-weight: bold;
    font-family: "Poppins", sans-serif;
    color: #0B3F7E;
}

.sectionTitle~.titleEn {
    margin-top: 4px;
}

/* FOOTER */
#footer {
    width: 100%;
    max-width: 768px;
    background-color: #103460;
    padding: 3px 0;
    margin: 0 auto;
}

#footer .ftLogo {
    display: block;
    width: 100%;
    background-color: #fff;
    padding: 10px 2.7% 13px;
}

#footer .ftLogo .inner {
    padding: 0;
}

#footer .ftLogo a {
    display: block;
    width: 37%;
}

#footer .menuWrap {
    padding: 12px 0 23px 13px;
}

#footer .menuWrap .wrapBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 41px;
}

#footer .menuWrap .menuList {
    width: 44%;
    padding: 0;
    margin: 0;
}

#footer .menuWrap .ctaWrap {
    padding-right: 13px;
}

#copyright {
    text-align: center;
    font-size: clamp(13px, 2.5vw, 15px);
    font-weight: 500;
    color: #103460;
    background-color: #fff;
    padding: 7px 15px 5px;
}


/* workFrame */
.workFrame {
    margin: 10px 0 10px;
    background: #DCF1F8;
    border-radius: 5px;
    padding: 16px 0 20px;
    overflow: hidden;
}

.workFrame .titleEn {
    margin-top: 7px;
    margin-bottom: 13px;
}

.workFrame .workWrap {
    overflow-x: auto;
    width: calc(100% + 3.4%);
    margin-bottom: 20px;
}

.workFrame .workWrap .workBox {
    display: flex;
    padding-bottom: 6px;
    width: max-content;
    padding-right: 3.4%;
}

.workFrame .workWrap .workBox a[href^="https://car-boy.jp/works/"] {
	margin-right: 10px;
}

.workFrame .workWrap .workBox .workItem {
    background: #fff;
    box-shadow: 0 1px 4px rgb(160 212 229 / 34%);
    color: #103460;
    border-radius: 5px;
    padding: 12px 10px 21px;
    overflow: hidden;
    max-width: 374px;
    width: 87vw;
    margin-right: 17px;
}

.workFrame .workWrap .workBox .workItem:last-child {
    margin: 5px;
}

.workFrame .workWrap .workBox .workItem .itemInfo {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    margin-bottom: 12px;
}

.workFrame .workWrap .workBox .workItem .itemInfo .infoName {
    width: calc(100% - 100px);
}

.workFrame .workWrap .workBox .workItem .workPhoto {
    overflow-x: auto;
    width: calc(100% + 11px);
    margin-bottom: 10px;
    padding-right: 11px;
}

.workFrame .workWrap .workBox .workItem .workPhoto .listPhoto li {
    width: 230px;
}

.workFrame .workWrap .workBox .workItem .workPhoto .listPhoto li+li {
    margin-left: 8px;
}

.workFrame .workWrap .workBox .workItem .workPhoto .listPhoto {
    display: flex;
    width: max-content;
}

.workFrame .workWrap .workBox .workItem .workPhoto .listPhoto img {
    border-radius: 3px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.workFrame .workWrap .workBox .workItem .price {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 0;
}

.workFrame .workWrap .workBox .workItem .price .txtPrice {
    font-size: 15px;
    margin-right: 6px;
    margin-top: 10px;
}

.workFrame .workWrap .workBox .workItem .price .priceNumber {
    display: flex;
    align-items: center;
    font-size: 40px;
    color: #CC0202;
    line-height: 1;
    letter-spacing: -1.5px;
}

.workFrame .workWrap .workBox .workItem .price .priceNumber span {
    font-size: 22px;
    margin-left: 2px;
}

.workFrame .workWrap .workBox .workItem .price .priceNumber span small {
    display: block;
    font-size: 10px;
    margin-bottom: 3px;
    transform: translate(2.5px, 3px);
}

.workFrame .workWrap .workBox .workItem .workTable {
    margin-bottom: 17px;
}

.workFrame .workWrap .workBox .workItem .workTable table {
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
}

.workFrame .workWrap .workBox .workItem .workTable table tr:not(:last-child) {
    border-bottom: 1px solid #fff;
}

.workFrame .workWrap .workBox .workItem .workTable table tr th {
    background: #103460;
    font-size: 15px;
    color: #fff;
    width: 90px;
    padding: 10px 5px 4px;
}

.workFrame .workWrap .workBox .workItem .workTable table tr td {
    width: calc(100% - 282px);
    background: #F3F5F8;
    padding: 2px 14px 0;
    line-height: 1.95;
}

.workFrame .workWrap .workBox .workItem .workTable table tr td .fee {
    font-size: 14px;
    line-height: 1.5em;
}

.workFrame .workWrap .workBox .workItem .workTable table tr td .fee:last-child {
    margin-bottom: 6px;
}

.workFrame .workWrap .workBox .workItem .workTable table tr td .fee span {
    font-size: 17px;
}

.workFrame .workWrap .workBox .workItem .workTable table tr td .fee span small {
    font-size: 13px;
}

.workFrame .workWrap .workBox .workItem .workTable table tr td .time {
    font-size: 13px;
}

.workFrame .workWrap .workBox .workItem .workTable table tr td .time span {
    font-size: 17px;
}

.workFrame .workWrap .workBox .workItem .comment .commentTitle {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.workFrame .workWrap .workBox .workItem .comment .commentBox {
    overflow-y: auto;
    padding: 0 14px;
}

.workFrame .workWrap .workBox .workItem .comment .commentBox .commentTxt {
    font-size: 15px;
    max-height: 180px;
    color: #363C3C;
    line-height: 1.6;
    text-align: justify;
}

.workFrame .workWrap .seeMore {
    width: 100%;
    max-width: 125px;
    margin: 0 auto;
}

.workFrame .workWrap .seeMore a {
    position: relative;
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #363c3c;
    box-shadow: 0 0 3px rgba(0 0 0 / 0.4);
    border-radius: 60px;
    padding: 6px 0;
    padding-right: 6px;
    background: #fff;
}

.workFrame .workWrap .seeMore a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: url(../images/work/icon-arrow.svg) no-repeat center center/100%;
    width: 9px;
    height: 10px;
}


.workFrame .workWrap .workBox .workItem .workPriceBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 0.7%;
    margin-bottom: 10px;
}
.workFrame .workWrap .workBox .workItem .workPriceBox.hasInsuranceIcon .price{
    justify-content: flex-start;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .priceLogo {
    width: 17.8%;
    max-width: 100px;
    margin-right: 9px;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .priceLogo img{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(160,212,229,0.16);
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: -3px;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail .txtPrice {
    margin-right: 9px;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail .priceNumber {
    position: relative;
    font-size: 40px;
    margin-right: 9px;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail .priceNumber::before {
    content: "";
    position: absolute;
    top: 59%;
    left: -4%;
    width: 110%;
    height: 2px;
    transform: rotate(14deg);
    background-color: #900B09;
    border-radius: 5px;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceArrow {
    width: 34px;
    margin-right: 3px;
    margin-top: 4px;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceArrow img {
    width: 100%;
    aspect-ratio: 1/1;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail ~ .priceNumber {
    align-items: flex-end;
    font-size: 55px;
    margin-top: -3px;
}
.workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail ~  .priceNumber span {
    font-size: 31px;
    transform: translateY(-4px);
}

/* faqFrame */
.titlePost {
    font-size: 27px;
    font-weight: 900;
    text-align: center;
    color: #0B3F7E;
    line-height: 1.22;
}

.titlePost span {
    position: relative;
    z-index: 2;
}

.titlePost span::before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50.8%;
    transform: translateX(-50%);
    background: #FCDF03;
    width: 89.9%;
    height: 13px;
    border-radius: 3px;
    z-index: -1;
}

.faqFrame {
    background: #DCF2F8;
    border-radius: 5px;
    padding: 19px 0 28px;
    margin-bottom: 25px;
}

.faqFrame .sectionTitle {
    margin-bottom: 26px;
}

.faqFrame .titleEn {
    margin-bottom: 10px;
}

.listFaq {
    margin-bottom: 22px;
}

.listFaq>li {
    background: #fff;
    border-radius: 5px;
    padding: 12px 10px 8px;
    margin-bottom: 11px;
	border-radius: 35px;
}

.listFaq>li:last-child {
    margin-bottom: 0;
}

.listFaq li .question {
    position: relative;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: all .3s;
	font-weight: bold;
}

.listFaq li .question::after,
.listFaq li .question::before {
    content: "";
    position: absolute;
    top: 41%;
    right: 6px;
    transform: translateY(-50%);
    width: clamp(10px, 2.6vw, 15px);
    height: clamp(1px, 0.5vw, 2px);
    border-radius: 10px;
    background-color: #103460;
    transition: all .3s;
}

.listFaq li .question::after {
    transform: translateY(-50%) rotate(90deg);
}

.listFaq li .question.open::after {
    transform: translateY(-50%) rotate(0);
}

.listFaq li .question .alphabet {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #103460;
    color: #fff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    padding-bottom: 2px;
}

.listFaq li .question .questionTitle {
    font-size: 15px;
    color: #103460;
    width: calc(100% - 70px);
}

.listFaq li .answerBox {
    display: none;
}

.listFaq li .answerBox .alphabetBox {
    display: flex;
    margin-top: 9px;
    padding-bottom: 6px;
}

.listFaq li .answerBox .alphabetBox .alphabet {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #103460;
    color: #103460;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin-right: 15px;
    margin-top: 10px;
    padding-bottom: 2px;
}

.listFaq li .answerBox .alphabetBox .alphabetCnt {
    font-size: 13px;
    width: calc(100% - 56px);
    background: url(../images/common/faq-border.svg) no-repeat center top/ 100%;
    padding-top: 14px;
}

.listFaq li .answerBox .alphabetBox .alphabetCnt .alphabetTitle {
    color: #103460;
    line-height: 1.35;
    margin-bottom: 13px;
    font-weight: bold;
}

.listFaq li .answerBox .alphabetBox .alphabetCnt .alphabetTxt {
    line-height: 1.39;
}

.listFaq li .answerBox .alphabetBox .alphabetCnt .listNetwork {
    display: flex;
    justify-content: right;
    margin-top: 2px;
    padding: 0 4px;
}

.listFaq li .answerBox .alphabetBox .alphabetCnt .listNetwork li+li {
    margin-left: 15px;
}

.listFaq li .answerBox .alphabetBox .alphabetCnt .listNetwork li img {
    width: 45px;
    height: 45px;
}

/* reviewFrame */
/* listReview */
.listReview {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 5px;
}

.listReview>li {
    box-shadow: 0 0 6px rgb(0 0 0 / 0.16);
    background: #ffffff;
    border-radius: 7px;
    padding: 15px 10px 15px;
    margin-bottom: auto;
}

.listReview>li:last-child {
    margin-bottom: 0;
    margin-right: 0;
}

.listReview>li .userInfo {
    position: relative;
    display: flex;
    align-items: self-start;
    margin-bottom: 9px;
}

.listReview>li .userInfo .avatar {
    width: 63px;
    aspect-ratio: 1 / 1;
}

.listReview>li .userInfo .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.listReview>li .userInfo .detail {
    font-size: 15px;
    font-weight: 500;
    padding-left: 0px;
    width: calc(100% - 63px);
    margin-bottom: 2px;
    color: #103460;
}

.listReview>li .userInfo .listRatting {
    display: flex;
    margin-bottom: 4px;
}

.listReview>li .userInfo .listRatting li {
    position: relative;
    margin-right: -0.8px;
    overflow: hidden;
}

.listReview>li .userInfo .listRatting li .star {
    width: 18px;
    height: 16px;
    line-height: 1;
    overflow: hidden;
}

.listReview>li .userInfo .listRatting li .star img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.listReview>li .userInfo .listRatting li .starV {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0px, -47.2%);
    height: 17px;
    background: url(../images/common/star-02.svg) no-repeat left center/cover;
}

.listReview>li .userInfo .detail .name {
    padding-right: 110px;
    margin-bottom: -1px;
}

.listReview>li .userInfo .detail .info {
    padding-right: 110px;
}

.listReview>li .userInfo .detail .status {
    position: absolute;
    top: 1px;
    right: -2px;
    color: #fff;
    background: #51B0D0;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 6px;
    border-radius: 4px;
}

.listReview>li .userInfo .detail .date {
    position: absolute;
    bottom: 2px;
    right: 0;
}

.listReview>li .userContent .title {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 9px;
    color: #103460;
}

.listReview>li .userContent .expert {
    font-size: 15px;
    text-align: justify;
    color: #363C3C;
    line-height: 1.398;
}

.reviewFrame {
    margin-bottom: 12px;
    background: #BAE6FF url(../images/common/review-bcr.png) repeat center center/100%;
    border-radius: 5px;
    padding: 18px 0 19px;
}

.reviewFrame .titleEn {
    margin-top: 7px;
    margin-bottom: 9px;
}

.reviewFrame .reviewBox {
    overflow-x: auto;
    width: calc(100% + 3.4%);
    margin-bottom: 20px;
}

.reviewFrame .listReview {
    width: max-content;
    padding-right: 3.4%;
}

.reviewFrame .listReview>li {
    margin-right: 13px;
    max-width: 371px;
    width: 86.4vw;
}

.reviewFrame .listReview>li:last-child {
    margin-right: 0;
}

.reviewFrame .viewOtherPrice {
    width: 100%;
    max-width: 228px;
    margin: 0 auto;
}

.reviewFrame .viewOtherPrice a {
    display: block;
    color: #3B4243;
    padding: 6px 10px 8px 0;
    text-align: center;
}

.reviewFrame .areaBtn a {
    padding: 7px 38px 6px 35px;
}

/* end-reviewFrame */

/* checkBox */
.checkBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: #fff;
    border-radius: 5px;
    padding: 16px 10px 23px;
    margin-bottom: 15px;
}

.checkBox .titleCheck {
    font-size: 18px;
    font-weight: bold;
    color: #103460;
    text-align: center;
    margin-bottom: 11px;
    line-height: 1.49;
}

.checkBox .checkList li {
    color: #272727;
    font-size: 16px;
    font-weight: 500;
    background: url(../images/wrecker/icon-check.svg) no-repeat left top 4px/ 20px;
    padding-left: 27px;
    line-height: 1.6;
    letter-spacing: -0.1px;
    margin-bottom: 7.4px;
}

.checkBox .checkList li:last-child {
    margin-bottom: 0;
}

/* LOADING SECTION */
.loadingSection {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9990;
    background-color: rgba(255, 255, 255, 0.7);
    display: none;
}

.loadingSection.loading {
    display: block;
}

.loadingSection .lds-ring {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lds-ring {
    color: #0B3F7E;
}

.lds-ring,
.lds-ring div {
    box-sizing: border-box;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid currentColor;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



/* localizeCta */
.introSection + .localizeCta {
    margin-top: -6px;
}
.localizeCta {
    position: relative;
    text-align: center;
    background-color: #F8DD0E;
    padding: 2vw 0 2.5vw;
    overflow: hidden;
}
.localizeCta .localizeIntro {
    font-size: clamp(19px, 4.65vw, 34px);
    font-weight: bold;
    color: #0B3D85;
    letter-spacing: -1px;
    line-height: 1.45;
    margin-bottom: 12px;
}
.localizeCta .localizeIntro .fs25 {
    font-size: clamp(25px, 5vw, 40px);
    letter-spacing: 0.2px;
}
.localizeCta .localizeIntro .bgBlue {
    display: inline-block;
    background-color: #0B3D85;
    color: #F8DD0E;
    border-radius: 5px;
    padding: 4px 6px 6px;
    line-height: 1;
    margin-right:3px;
    letter-spacing: 0.5px;
}
.localizeCta .ctaWrap .ctaPhone {
    width: 61.8%;
    max-width: 330px;
    margin-right: 0;
}
.localizeCta .localizePhoto {
    position: absolute;
    bottom: -0.9vw;
    right: -0.5vw;
    width: 28%;
}
.localizeCta .localizePhoto img {
    width: 100%;
}
/* localizeCta */

@media(min-width:768px) {
    #fixH {
        height: 94px;
    }

    .breadCrumb .breadCrumbList {
        margin-top: 5px;
    }
}

/* SHOW HIDE PC SP */
@media (min-width: 769px) {
    .sp {
        display: none;
    }

    .listFaq li .answerBox .alphabetBox .alphabetCnt .listNetwork li a:hover img {
        opacity: 0.7;
    }
}

/* STYLE MOBILE */
@media (max-width: 768px) {
    .headerBar .logo {
        width: 52%;
    }

    .menuWrap {
        padding-bottom: 22vw;
    }

    .ctaWrap .ctaPhone a,
    .headerBar .hbRight .hbPhone a {
        pointer-events: auto;
    }

    .ctaWrap .ctaPhone a .note .fs12 {
        font-size: 2.8vw;
    }

    .ctaWrap .ctaLine img {
        width: 100%;
    }

    .areaCta .ctaWrap .ctaWrapNote {
        width: clamp(150px, 45vw, 300px);
    }

    .areaCta .ctaWrap .ctaLine {
        width: 11%;
    }

    .areaCta .ctaWrap p {
        padding-top: clamp(20px, 12.5vw, 40px);
    }
}

@media (max-width: 430px) {
    .headerBar .logo {
        width: 203px;
    }

    .headerBar .hbRight {
        width: 24.4%;
    }

    #header+.mainMenu .menuWrap .ctaWrap .ctaLine {
        width: 14.3%;
        width: 15.1%;
    }

    #header+.mainMenu .ctaWrap .ctaPhone a .number::before {
        left: 3.7%;
        top: 13%;
    }

    .mainMenu {
        right: 0;
        transform: translateX(0);
        width: 96.6%;
    }

    .menuWrap {
        padding-bottom: 25vw;
    }

    .mainMenu .menuTop {
        max-height: 74px;
    }

    .ctaFix .ctaFixWrap .ctaFixPhoto {
        top: -85%;
        width: 45%;
    }

    .ctaWrap .ctaPhone a .number {
        padding-left: 7.6vw;
    }

    .ctaWrap .ctaLine {
        width: auto;
    }

    .ctaWrap .ctaPhone a .number::before {
        top: 16%;
        width: 10.4%;
    }

    .areaCta .ctaWrap .ctaWrapNote {
        width: 150px;
    }

    .areaCta .ctaWrap .ctaLine {
        width: 39%;
    }

    .areaCta .ctaWrap .ctaLine a {
        width: auto;
    }

    .areaCta .ctaWrap .ctaLine {
        margin-left: -2.4%;
    }

    .areaCta .ctaWrap p {
        padding-top: clamp(20px, 2.5vw, 40px);
    }
    .localizeCta {
        padding: 2.8vw 0 3.8vw;
    }
    .localizeCta .ctaWrap .ctaPhone a .number {
        padding-left: 6.6vw;
        margin-bottom: 3px;
    }
    .localizeCta .ctaWrap .ctaPhone a .note {
        margin-left: -0.5vw;
    }
    .localizeCta .localizePhoto {
        bottom: -1.3vw;
    }
    .ctaWrap .ctaPhone a .number::before {
        left: 2.3%;
    }

    .breadCrumb .breadCrumbList li:not(:last-child)::before {
        top: 6px;
        right: -10px;
    }
    .workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail .priceNumber {
        font-size: 31px;
    }
    .workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail .priceNumber span {
        font-size: 17px;
    }
    .workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail .priceNumber small {
        font-size: 8px;
    }
    .workFrame .workWrap .workBox .workItem .price .priceWrap .priceArrow {
        width: 24px;
    }
    .workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail ~ .priceNumber {
        font-size: 39px;
    }
    .workFrame .workWrap .workBox .workItem .workPriceBox .price .priceWrap .priceDetail ~ .priceNumber span {
        font-size: 21px;
        transform: translateY(-2px);
    }

    #footer .ftLogo {
        padding: 10px 3.5% 12px;
    }

    #footer .ftLogo a {
        width: 56.6%;
    }
}

@media (max-width: 414px) {
    .breadCrumb {
        margin-top: 5px;
    }

    .areaCta .ctaWrap .ctaLine {
        width: 35%;
        margin-left: -5%;
    }

    .areaCta .ctaIntro {
        padding-left: 0;
    }

    #footer .menuWrap .menuList li a {
        font-size: clamp(15px, 3.9vw, 24px);
    }

    #footer .menuWrap .menuList li .menuSub a {
        font-size: clamp(13px, 3.5vw, 18px);
    }

    .checkBox {
        padding: 20px 15px;
        margin-bottom: 30px;
    }
}

@media (max-width: 390px) {
    .areaCta .ctaIntro {
        padding-left: 0;
    }

    .areaCta .ctaList li .iconName {
        font-size: 15px;
    }

    .areaCta .ctaList li .iconNote {
        font-size: 18px;
    }

    .areaCta .ctaList li .iconNote .number {
        font-size: 24px;
    }

    .ctaWrap .ctaPhone a {
        width: 225px;
        padding: 6px 10px 8px;
    }

    .ctaWrap .ctaPhone a .number {
        font-size: 25px;
    }

    .areaCta .ctaWrap .ctaLine {
        width: 38%;
        margin-left: -4%;
    }

    .areaCta .ctaIntro .introPhoto {
        width: 38.62%;
    }

    .areaCta .ctaIntro .introWrap .introTitle {
        font-size: clamp(30px, 7.7vw, 50px);
    }

    .areaCta .ctaIntro .introWrap .introSub {
        font-size: clamp(16px, 4.2vw, 24px);
    }
}

@media (max-width: 375px) {

    .sectionTitle .bg::before {
        bottom: 5%;
    }

    .ctaWrap .ctaPhone a {
        width: 210px;
    }

    .areaCta .ctaIntro .introPhoto {
        width: 35.62%;
        margin-left: -4.6%;
    }

    #footer .menuWrap .menuList {
        width: 48%;
    }

    #footer .menuWrap .menuList:not(:last-child) {
        margin-bottom: 20px;
    }

    #footer .menuWrap .ctaWrap {
        justify-content: space-around;
    }
}

@media (max-width: 360px) {
    .menuWrap {
        padding-right: 3%;
        padding-left: 3%;
    }

    .ctaWrap .ctaPhone {
        margin-right: 4%;
    }

    .areaCta .ctaWrap .ctaLine {
        width: 40%;
        margin-left: -7%;
    }

    .areaCta .ctaIntro {
        margin-top: -9.9%;
    }
    .localizeCta .localizeIntro {
        font-size: clamp(17px, 4.65vw, 34px);
    }
    .localizeCta .localizeIntro .fs25 {
        font-size: clamp(23px, 5vw, 40px);
    }
}

@media(min-width:431px) {

    /* workFrame */
    .workFrame {
        padding: 30px 0;
    }

    .reviewFrame .listReview>li,
    .workFrame .workWrap .workBox .workItem {
        max-width: 475px;
    }

    .workFrame .workWrap .workBox .workItem .itemInfo,
    .workFrame .workWrap .workBox .workItem .comment .commentBox .commentTxt,
    .workFrame .workWrap .workBox .workItem .price .txtPrice {
        font-size: 20px;
    }

    .workFrame .workWrap .workBox .workItem .price .priceNumber {
        font-size: 50px;
    }

    .workFrame .workWrap .workBox .workItem .workTable {
        margin-bottom: 25px;
    }

    .workFrame .workWrap .workBox .workItem .workTable table tr th {
        font-size: 20px;
        width: 150px;
    }

    .workFrame .workWrap .workBox .workItem .workTable table tr td .fee,
    .workFrame .workWrap .workBox .workItem .workTable table tr td {
        font-size: 19px;
    }

    .workFrame .workWrap .workBox .workItem .workTable table tr td .time span {
        font-size: 22px;
    }

    .workFrame .workWrap .workBox .workItem .workTable table tr td .fee span small,
    .workFrame .workWrap .workBox .workItem .workTable table tr td .time {
        font-size: 18px;
    }

    .workFrame .workWrap .workBox .workItem .workTable table tr td .fee span,
    .workFrame .workWrap .workBox .workItem .comment .commentTitle {
        font-size: 22px;
    }

    .workFrame .workWrap .workBox .workItem .comment .commentTitle {
        margin-bottom: 20px;
    }

    .workFrame .workWrap .seeMore {
        max-width: 215px;
    }

    .workFrame .workWrap .seeMore a {
        font-size: 22px;
    }

    .workFrame .workWrap .seeMore a::before {
        top: 53%;
        right: 16px;
        width: 19px;
    }

    /* faqFrame */
    .faqFrame,
    .reviewFrame {
        padding: 30px 0;
    }

    .listFaq li .answerBox .alphabetBox .alphabetCnt,
    .listFaq li .question .questionTitle {
        font-size: 18px;
    }

    .listFaq li .answerBox .alphabetBox .alphabet,
    .listFaq li .question .alphabet {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }

    .listReview>li .userInfo .avatar {
        width: 90px;
    }

    .listReview>li .userInfo .detail {
        font-size: 15px;
        padding-left: 10px;
        width: calc(100% - 90px);
    }

    .listReview>li .userInfo .detail .date {
        bottom: 10px;
    }

    .listReview>li .userContent .title {
        font-size: 17px;
    }

    .listReview>li .userContent .expert {
        font-size: 15px;
    }

    .listReview>li .userInfo .detail .status {
        font-size: 13px;
    }


    .checkBox .titleCheck {
        font-size: 26px;
    }

    .checkBox .checkList li {
        font-size: 18px;
        padding-left: 35px;
        background-position: left top 7px;
        background-size: 26px;
    }

    .faqFrame .areaBtn a,
    .reviewFrame .areaBtn a,
    .workFrame .areaBtn a {
        font-size: 18px;
    }

}