@charset "UTF-8";
/*
Theme Name: fukai-paint-nerima.com/
Theme URI: https://fukai-paint-nerima.com/
Description: pcbrain
Version: 1.0
Author: pcbrain.co.jp
*/

/* YUI fonts.css - font size設定
----------------------------------------------------------- */
@import url("css/cssfonts-min.css");
/* default style - リセット及びbody基本設定
----------------------------------------------------------- */
@import url("css/default.css");
/* all style
----------------------------------------------------------- */

@import url("css/style.css");

/* 色設定
----------------------------------------------------------- */
@import url("setting.css");

/* PC/SP共通設定
----------------------------------------------------------- */
@import url("common.css");


body {
    min-width: 1300px;
    /*コンテンツ横幅を指定する（スマホ閲覧時の背景欠けを防ぐ）*/
    font-size: 17px;
    overflow: hidden;
    box-sizing: border-box;
    /* -webkit-text-size-adjust: 100% !important; */
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    --triangle_height: 180px;
}

a {
    text-decoration: none;
}

picture {
    margin: 0;
    padding: 0;
}

.inner {
    width: 1100px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.inner02 {
    width: 940px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.my-sm {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

.mt-sm {
    margin-top: 25px !important;
}

.mb-sm {
    margin-bottom: 25px !important;
}

.py-sm {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-sm {
    padding-top: 25px !important;
}

.pb-sm {
    padding-bottom: 25px !important;
}

.my-md {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.mt-md {
    margin-top: 50px !important;
}

.mb-md {
    margin-bottom: 50px !important;
}

.py-md {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.pt-md {
    padding-top: 50px !important;
}

.pb-md {
    padding-bottom: 50px !important;
}

.my-lg {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
}

.mt-lg {
    margin-top: 100px !important;
}

.mb-lg {
    margin-bottom: 100px !important;
}

.py-lg {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.pt-lg {
    padding-top: 100px !important;
}

.pb-lg {
    padding-bottom: 100px !important;
}

.floatR {
    float: right !important;
}

.floatL {
    float: left !important;
}

.spblock,
.spinline,
.sptr {
    display: none;
}

.number {
    font-family: var(--en-font-family);
    font-weight: 700;
}

.tel:not(#telpage .tel) {
    /* cursor: pointer; */
}

.tel.flex {
    gap: normal;
}

.price {
    font-size: 100px;
    font-weight: 700;
    font-family: var(--en-font-family);
    line-height: 1;
}

.price .number,
.price .unit {
    color: var(--red);
}

.price .number i {
    font-style: normal;
}

.price .number i:last-of-type {
    font-size: 0.8em;
}

.price .number {
    letter-spacing: -0.05em;
}

.price .unit {
    display: inline-block;
    font-size: 28px;
    font-weight: 900;
    font-family: var(--base-font-family);
    width: 1em;
}

.flex {
    display: flex;
    gap: 40px;
    justify-content: space-between;
}

.flex picture {
    display: block;
}

.flex picture + picture {
    margin-top: 20px;
}

.marker {
    font-weight: 700;
    background-image: linear-gradient(90deg, #ffc980, #ffc980);
    background-size: 100% 40%;
    background-position: bottom;
    background-repeat: no-repeat;
}

.gap0 {
    gap: 0;
}

span[data-ruby]::before {
    content: attr(data-ruby);
}

/* .contactBtns */
.contactBtns a {
    font-size: 17px;
    font-weight: 500;
    border-radius: 25px;
    padding: 8px 20px 8px;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
    align-items: center;
    transition: 0.3s ease;
}

.contactBtns a:hover {
    opacity: 1.0;
}

/* .contactBtns a img {
    margin-right: 1em;
    vertical-align: sub;
} */

.contactBtns a::before {
    content: "";
    display: block;
    background-color: currentColor;
    width: 25px;
    height: 25px;
    margin-right: 0.5em;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.contactBtns a.showroom::before {
    -webkit-mask-image: url(./img/icon_nav06.png);
    mask-image: url(./img/icon_nav06.png);
}

.contactBtns a.showroom {
    background-color: var(--white);
    border: var(--main-color01) 2px solid;
    color: var(--main-color01);
}

.contactBtns a.showroom:hover {
    background-color: var(--main-color01);
    color: var(--white);
}

.contactBtns a.contact::before {
    -webkit-mask-image: url(./img/icon_nav07.png);
    mask-image: url(./img/icon_nav07.png);
}

.contactBtns a.contact {
    background-color: var(--white);
    border: var(--main-color02) 2px solid;
    color: var(--main-color02);
}

.contactBtns a.contact:hover {
    background-color: var(--main-color02);
    color: var(--white);
}

@media screen and (max-width: 1610px) {
    .contactBtns a {
        font-size: 15px;
        padding: 8px 20px 8px;
    }
}

.contactTitle {
    padding: 220px 0 40px;
    background: url(./img/bg_contactTitle.png) no-repeat top center;
    background-size: cover;
    text-align: center;
    position: relative;
    z-index: 1;
}

.contactTitle h2 {
    font-family: var(--en-font-family);
    font-weight: 600;
    font-size: 60px;
    color: var(--white);
    letter-spacing: 5px;
}

.contactBox {
    background: var(--sub-color03);
    padding: 50px 0 120px;
    text-align: left;
    line-height: 1;
}

.contactBox > .flex {
    align-items: center;
    justify-content: space-between;
}

@media screen and (max-width: 1100px) {
    .contactBox > .flex {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.contactBox .tel {
    text-align: center;
    margin-bottom: 50px;
}

.contactBox .tel > div:nth-of-type(2) {
    margin: 25px 0 10px;
}

.contactBox .tel p {
    display: inline-block;
}

.contactBox .tel_content {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    padding: 5px 120px 5px;
}

.contactBox .tel_content::before,
.contactBox .tel_content::after {
    content: "";
    position: absolute;
    width: 62px;
    height: 62px;
    background-size: contain;
    bottom: 0;
}

.contactBox .tel_content::before {
    left: 0;
    background-image: url(./img/dots_line01.png);
}

.contactBox .tel_content::after {
    right: 0;
    background-image: url(./img/dots_line02.png);
}

.contactBox .tel_content span {
    color: var(--red);
}

.contactBox .tel_number {
    position: relative;
    font-family: var(--en-font-family);
    font-weight: 600;
    font-size: 60px;
    padding-left: 40px;
}

.contactBox .tel_number::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 85px;
    background: url(./img/icon_tel02.png) no-repeat;
    background-size: contain;
    top: 10px;
    left: 0;

}

.contactBox .open_info {
    font-size: 17px;
    border: solid 2px var(--body-text-color);
    padding: 10px 25px;
    border-radius: 4px;
}

.contactBox .contactBtns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.contactBox .contactBtns .tel {
    display: none;
}

.contactBox .formBox tr:first-of-type th {
    vertical-align: middle;
    border-radius: 20px 0 0 0;
}

.contactBox .formBox tr:first-of-type td {
    border-radius: 0 20px 0 0;
}

.contactBox .formBox .submit {
    background: var(--white);
    padding: 25px 0;
    border-radius: 0 0 20px 20px;
}

.contactBox .contact_bnr li:last-of-type {
    margin-top: 25px;
}

.contactBox .simulation {
    padding-top: 50px;
    margin-top: 50px;
    border-top: solid 2px var(--white);
}

.contactBox .simulation h3 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.contactBox .simulation h3 span {
    color: var(--red);
}

.contactBox .simulation ul {
    gap: 0;
    margin: 40px 0;
}

.contactBox .simulation li {
    position: relative;
    width: 340px;
    box-sizing: border-box;
    background-color: var(--white);
    border: solid 3px var(--main-color02);
    border-radius: 20px;
    font-weight: 500;
    padding: 25px 25px 25px 100px;
    line-height: 1.6;
}

.contactBox .simulation li::before {
    content: "";
    position: absolute;
    width: 63px;
    height: 89px;
    background: url(./img/img_simulation01.png) no-repeat;
    background-size: contain;
    top: 25px;
    left: 25px;
}

.contactBox .simulation li:nth-of-type(2)::before,
.contactBox .simulation li:nth-of-type(3)::before {
    width: 40px;
    height: 75px;
    top: 25px;
    left: 40px;
}

.contactBox .simulation li:nth-of-type(2)::before {
    background: url(./img/img_simulation02.png) no-repeat;
}

.contactBox .simulation li:nth-of-type(3)::before {
    background: url(./img/img_simulation03.png) no-repeat;
}

.contactBox .simulation li h4 {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    padding-left: 32px;
    margin-bottom: 12px;
}

.contactBox .simulation li h4::before {
    content: "❶";
    position: absolute;
    left: 0;
    top: -7px;
    color: var(--main-color01);
    font-size: 28px;
}

.contactBox .simulation li:nth-of-type(2) h4::before {
    content: "❷";
}

.contactBox .simulation li:nth-of-type(3) h4::before {
    content: "❸";
}



.ftrScroll .contactBox {
    /* rgba(232, 232, 232, 0.9); */
    color: var(--body-text-color);
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 20px 0 20px;
}

.ftrScroll .contactBox::before {
    position: absolute;
    content: "";
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--silver);
    opacity: 0.9;
}

/* .btn */
.btn {
    --background: var(--main-color02);
    flex: 1;
    min-width: 250px;
    width: fit-content;
    font-size: 18px;
    font-weight: 700;
    border-radius: 35px;
    padding: 20px 75px 22px 30px;
    display: block;
    text-align: center;
    box-sizing: border-box;
    color: #fff !important;
    text-decoration: none !important;
    position: relative;
    background-color: var(--background);
    transition: 0.3s ease;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    line-height: 1;
}

.btn-lg {
    font-size: 22px;
}

.btn:hover {
    opacity: 1.0 !important;
    background-color: var(--main-color01);
}

.btn::before,
.btn::after {
    content: "";
    display: block;
    position: absolute;
    transition: 0.3s ease;
}

.btn::before {
    right: -3px;
    top: 0;
    width: 60px;
    height: 60px;
    background: #48566a;
    border-radius: 50%;
}

.btn:hover::before {
    background: #ffbb5f;
}

.btn::after {
    right: 22px;
    top: 42%;
    border-top: solid 2px var(--white);
    border-right: solid 2px var(--white);
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}

.btnSm {
    --background: var(--main-color02);
    flex: 1;
    width: 160px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    padding: 5px 46px 6px 13px;
    display: block;
    text-align: center;
    box-sizing: border-box;
    color: #fff !important;
    text-decoration: none !important;
    position: relative;
    background-color: var(--background);
    /* border: #000 1px solid; */
    box-shadow: 0 4px 0 rgb(0 0 0 / 12%);
    transition: 0.3s ease;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.btnSm:hover {
    opacity: 0.7;
}

/* a.btnSm::before, */
.btnSm::after {
    content: "";
    display: block;
    position: absolute;
}

/* a.btnSm::before {
    inset: 0 20px 0 auto;
    margin: auto 0;
    width: 20px;
    height: 20px;
    background: var(--main-color02);
    border-radius: 50%;
    transform: scale(0.8);
} */

.btnSm::after {
    inset: 0 20px 0 auto;
    margin: auto 0;
    width: 20px;
    height: 20px;
    background: var(--white);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(./img/svg_arw01.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url(./img/svg_arw01.svg);
}

.btnDetail {
    display: block;
    background: var(--main-color02);
    border-radius: 50px;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    margin: auto;
    position: relative;
    padding: .8em 50px 1em 30px;
    text-align: center;
    text-decoration: none;
    transition: ease .2s;
    overflow: hidden;
    width: 70%;
    box-sizing: border-box;
    z-index: 1;
}

.btnDetail:hover,
a:hover .btnDetail {
    background: var(--main-color01);
}

@media screen and (max-width:1024px) {
    .main .btnDetail {
        font-size: 1.25vw;
    }
}

.btnDetail::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    font-family: "Font Awesome 5 Free";
    content: '\f138';
    font-weight: 900;
    font-size: 1.05em;
    right: 20px;
    height: 1em;
    line-height: 1;
}

.btnDetail:hover, a:hover .btnDetail {
    transition: 0.4s;
    z-index: 1;
}

.line {
    text-decoration: underline;
    text-decoration-color: #d8dadd;
    text-underline-offset: 3px;
    color: var(--main-color02) !important;
}

#top #contents {
    background: rgba(255, 255, 255, 0);
}

.photoUL {
    margin: 0 0 0 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.photoUL li {
    margin: 40px 30px 0 0;
    padding: 0;
    background: none;
    font-size: 16px;
    list-style: none;
    width: calc(50% - 15px);
}

.photoUL li p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.875;
}

.photoUL li:nth-child(2n) {
    margin: 40px 0 0;
}

.photoUL li:nth-child(-n+2) {
    margin-top: 0;
}

.photoUL li span {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
}

.photoUL li span:before {
    content: '' !important;
    display: block;
    padding-top: 46%;
}

.photoUL li span img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photoUL li:before,
.photoUL li:after {
    content: none;
}

.photoUL.photoColumn3 li {
    width: calc(100%/3 - 20px);
    margin: 30px 30px 0 0 !important;
}

.photoUL.photoColumn3 li:nth-child(-n+3) {
    margin-top: 0 !important;
}

.photoUL.photoColumn3 li:nth-child(3n) {
    margin-right: 0 !important;
}

.photoUL.photoColumn3 li span::before {
    padding-top: 72%;
}

.photoUL.photoColumn3 li span img {
    border-radius: 10px;
}

.photoUL.photoColumn4 li {
    width: calc(25% - 15px);
    margin: 25px 20px 0 0 !important;
}

.photoUL.photoColumn4 li:nth-child(-n+4) {
    margin-top: 0 !important;
}

.photoUL.photoColumn4 li:nth-child(4n) {
    margin-right: 0 !important;
}

.photoUL.photoColumn4 li span::before {
    padding-top: 63%;
}

.photoUL + iframe {
    margin-top: 30px;
}

/* -----------------------------------------------------------
    title
----------------------------------------------------------- */
.tl01 {
    line-height: 1.35;
}

.tl01 span {
    display: block;
}

.tl01 .ja {
    font-size: 40px;
    font-weight: 700;
    color: var(--main-color02);
    margin-top: 15px;
}

.tl01 .ja small {
    font-size: 30px;
}

.tl01 .ja b {
    font-weight: 700;
    color: var(--main-color01);
}

.tl01 .en {
    color: var(--main-color01);
    font-family: var(--en-font-family);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.1em;
}

.tl02 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: var(--main-color02);
    position: relative;
    margin-bottom: 40px;
}

.tl02 b {
    color: var(--main-color01);
    font-weight: 700;
}

.tl02 span {
    display: inline-block;
    position: relative;
    padding: 0 100px;
}

.tl02 strong {
    color: var(--red);
}

.tl02 span::before,
.tl02 span::after {
    content: "";
    position: absolute;
    width: 62px;
    height: 62px;
    background-size: contain;
    bottom: 0;
}

.tl02 span::before {
    left: 0;
    background-image: url(./img/dots_line01.png);
}

.tl02 span::after {
    right: 0;
    background-image: url(./img/dots_line02.png);
}

.tl02.single span::before,
.tl02.single span::after {
    width: 57px;
    height: 76px;
    background-size: contain;
    bottom: -15px;
}

.tl02.single span::before {
    left: 0;
    background-image: url(./img/dots_line03.png);
}

.tl02.single span::after {
    right: 0;
    background-image: url(./img/dots_line04.png);
}

.tl03 {
    position: relative;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--main-color02);
    border-top: dotted 3px var(--main-color02);
    border-bottom: dotted 3px var(--main-color02);
    padding: 20px 20px 20px 50px;
    margin: 80px 0 50px;
}

.tl03::before {
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    border: solid 3px var(--main-color01);
    border-radius: 50%;
    left: 20px;
    top: 23px;
}

.tl04 {
    line-height: 1;
    font-size: 34px;
    font-weight: 700;
    border-bottom: solid 4px var(--main-color01);
    padding-bottom: 15px;
}

.tl05 {
    font-size: 80px;
    font-weight: 700;
    color: var(--main-color01);
    line-height: 1.2;
}

.tl05 b {
    font-size: 100px;
    font-family: var(--en-font-family);
    font-weight: 600;
}


.bandheading01 {
    background: var(--main-color02);
    color: var(--white);
    font-size: 30px;
    font-weight: 500;
    padding: 11px 20px;
    line-height: 1.25;
}

.bandheading02 {
    /* --background: repeating-linear-gradient(-45deg, #ffe38d 0, #ffe38d 2px, 0, #ffd75b 6px) !important; */
    --background: var(--main-color02);
    background: var(--background);
    color: var(--white);
    font-size: 40px;
    font-weight: 700;
    /* padding: 11px 20px; */
    padding: 20px 20px;
    line-height: 1.25;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto auto;
    margin-bottom: auto;
    border: 2px solid #e9c043;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.bandheading02 strong {
    /* font-size: 32px; */
    font-weight: 700;
    display: inline-block;
    color: var(--white);
    /* color: var(--main-color02); */
    width: fit-content;
    /* padding: 2px 0.5em 6px; */
    padding: 2px 1em 6px;
    margin: 0 0.5em;
    /* border-radius: 0.7em; */
    /* background: var(--red); */
    vertical-align: baseline;
    position: relative;
}

.bandheading02 strong::before {
    content: "";
    display: block;
    width: 100%;
    height: 200%;
    /* background: linear-gradient(to top, transparent 0%, var(--red), transparent); */
    background: var(--sub-color01);
    position: absolute;
    inset: -100% 0;
    z-index: -1;
    margin: auto 0;
    transform: skewX(-30deg) scaleY(1);
    /* opacity: 0.5; */
    /* filter: blur(10px); */
}

.bandheading03 {
    background: var(--main-color02);
    box-sizing: border-box;
    color: var(--white);
    font-size: 28px;
    font-weight: 500;
    position: relative;
    padding: .2em .5em;
    line-height: 1.4;
    margin: 0 auto 30px;
}

.bandheading03 span {
    background: var(--red);
    border-radius: 10px;
    color: var(--white);
    display: inline-block;
    padding: 0 .5em .2em;
    font-size: 22px;
    margin-right: 1em;
    vertical-align: bottom;
}

.bandheading04 {
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 2px, #171c61 0, #171c61 6px),
        linear-gradient(to right, #171c61, #171c61);
    color: var(--white);
    font-size: 36px;
    font-weight: 500;
    padding: 21px 20px;
    line-height: 1.25;
}

.circleheading01 {
    font-size: 30px;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.circleheading01 small {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--en-font-family);
    font-size: 18px;
    font-weight: 600;
    color: var(--sub-color01);
    margin-right: 25px;
    margin-bottom: 10px;
}

.circleheading01 small .num {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    width: 90px;
    height: 90px;
    background: var(--white);
    border: 3px solid var(--sub-color01);
    border-radius: 50%;
    margin: 0 auto;
    font-family: var(--en-font-family);
    font-size: 42px;
    font-weight: 600;
    box-sizing: border-box;
    padding-top: 5px;
    color: var(--body-text-color);
}

.circleheading01Box {
    padding: 45px 0;
    border-bottom: 1px dotted var(--black);
}

.circleheading01Box .flex > picture {
    /* margin: 0 40px 0 0; */
    padding: 0;
}

.popheading {
    position: relative;
    font-size: 36px;
    font-weight: 600;
    width: fit-content;
    margin: 1em auto;
    text-align: center;
    line-height: 1.25;
    max-width: calc(100% - 200px);
}

.popheading b > strong {
    font-size: 100px;
    font-family: var(--en-font-family);
    font-weight: 700;
    padding: 0 5px;
    vertical-align: -0.02em;
    display: inline-block;
}

.popheading b {
    display: inline-block;
    font-size: 46px;
    font-weight: 700;
    color: var(--red);
    width: fit-content;
    margin: 0 auto;
}

.popheading::before,
.popheading::after {
    content: "";
    display: block;
    width: 50px;
    height: 77px;
    position: absolute;
    top: -100%;
    bottom: -100%;
    margin: auto 0;
    background-color: var(--sub-color02);
    -webkit-mask-image: url("./img/svg_popheading.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("./img/svg_popheading.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.popheading::before {
    left: 0;
    transform: translateX(-200%);
}

.popheading::after {
    right: 0;
    transform: translateX(200%) scaleX(-1);
}

.popheading:has(b > strong)::before {
    transform: translate(-200%, 0.5em);
}

.popheading:has(b > strong)::after {
    transform: translate(200%, 0.5em) scaleX(-1);
}

.flagTitle {
    border-top: 20px solid var(--main-color02);
    text-align: center;
    position: relative;
    --w: 220px;
    --h: 320px;
    margin-top: 200px;
}

.flagTitle::before,
.flagTitle::after {
    position: absolute;
    content: "";
    display: block;
    width: calc(50% - var(--w));
    height: var(--h);
    top: 0;
    background-repeat: repeat;
}

.flagTitle::before {
    background: url('img/bg_flagTitle01.jpg');
    background-position: right top;
    left: 0;
}

.flagTitle::after {
    background: url('img/bg_flagTitle01.jpg');
    background-position: -1px top;
    right: 0;
}

.flagTitle > span {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #070a39;
    margin: 0 auto 0;
    padding: 60px 0 0;
    box-sizing: border-box;
    background: red;
    background: linear-gradient(to right, #b88719, #dcb300 20%, #f0d99b 38%, #d4ad00 68%, #b88719 100%);
    background: linear-gradient(to right, #b88719, #dcb300 20%, #f0d99b 38%, #d4ad00 68%, #b88719 100%);
    width: calc(var(--w) * 2);
    height: calc(var(--w) * 2 + 6px);
    position: relative;
    clip-path: polygon(100% 0, 100% 100%, 50% 75%, 0 100%, 0 0);
    z-index: 2;
}

.flagTitle > span::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--white);
    inset: 0 0 auto;
    margin: 0 auto;
    --ws: 30px;
    /* transform: scale(0.854); */
    /* transform-origin: center top; */
    clip-path: polygon(calc(100% - var(--ws)) 0, calc(100% - var(--ws)) calc(100% - var(--ws) * 1.47), 50% calc(75% - var(--ws)), var(--ws) calc(100% - var(--ws) * 1.47), var(--ws) 0);
    /* clip-path: polygon(100% 0, 100% 100%, 50% 75%, 0 100%, 0 0); */
    z-index: -1;
}

.flagTitle small {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 8px 15px 12px;
    line-height: 1;
    font-size: 1em;
    background: var(--main-color02);
    color: var(--white);
    border-radius: 28px;
}

.flagTitle b {
    display: block;
    font-size: 76px;
    font-weight: 700;
    color: #c79c18;
    text-shadow: 2px 2px 2px #845f0b, 4px 4px 4px rgba(0, 0, 0, 0.34);
    position: relative;
    width: fit-content;
    height: fit-content;
    margin: 15px auto 0;
    line-height: 1;
}

.flagTitle b::before {
    position: absolute;
    content: "施工実績";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: rgba(255, 255, 255, 0);
    /* background: linear-gradient(109deg, #c79c17 0%, #edc54c 15%, #f9e295 35%, #f9e295 65%, #ecc44b 85%, #c79c18 100%); */
    /* color: #c79c18; */
    background-image: linear-gradient(120deg, #c79c17 10%, #edc54c 25%, #f9e295 45%, #f9e295 65%, #ecc44b 75%, #c79c18 90%);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: none;
}

.balloonTitle01 {
    /* display: inline-block; */
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 40px 15px 120px;
    font-size: 30px;
    font-weight: 700;
    color: var(--white);
    border-radius: 100px;
    background-color: var(--main-color01);
    position: relative;
}

/* .balloonTitle01::after {
    content: '';
    position: absolute;
    display: block;
    width: 123px;
    height: 123px;
    background: url(./img/ill_color01.png) no-repeat;
    left: 30px;
    bottom: -15px;
    background-size: contain;
    transform: rotate(-15deg);
} */

.balloonTitle01::before {
    content: '';
    position: absolute;
    display: block;
    margin: auto auto 0;
    left: 25%;
    bottom: 1px;
    transform: translateY(100%);
    background: var(--main-color01);
    width: 53px;
    height: 31px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(./img/svg_shape01.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url(./img/svg_shape01.svg);
}

.balloonTitle01 .imgLayer {
    position: absolute;
    display: block;
    left: 10px;
    bottom: -10px;
}

.balloonTitle01 + .borderBox01 {
    margin-top: -100px;
    padding-top: 100px;
}

.borderBox01 {
    padding: 40px;
    border: #c4a77b solid 3px;
}

.lead01 {
    font-size: 20px;
    text-align: center;
    padding: 20px 10px;
}

.post .lead01 {
    text-align: left;
    padding: 20px 0;
}

.lead01 span + span {
    padding-left: 1em;
}

.lead02 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

p + .lead02 {
    margin-top: 1rem;
}

.balloonCopy01 {
    position: relative;
    padding-top: 20px;
    min-height: 230px;
    box-sizing: border-box;
}

.balloonCopy01 > p {
    --background: var(--background, #ffd75b);
    /* margin-right: 225px; */
    width: calc(100% - 255px);
    box-sizing: border-box;
    font-size: 40px;
    font-weight: 700;
    /* letter-spacing: -0.01em; */
    line-height: 1.1;
    border-radius: 10px;
    background: var(--background);
    /* width: fit-content; */
    padding: 20px 0 20px 20px;
    position: relative;
    border: 2px solid #e9c043;
}

.balloonCopy01 > p::before,
.balloonCopy01 > p::after {
    content: "";
    position: absolute;
    margin: auto 1px auto 0;
    inset: 0 0 0 auto;
    display: block;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    transform: translateX(100%);
}

.balloonCopy01 > p::before {
    background: #e9c043;
    width: 28px;
    height: 28px;
}

.balloonCopy01 > p::after {
    background: var(--background);
    background-position: -3px 1px;
    width: 24px;
    height: 24px;
}

.balloonCopy01 > p strong {
    font-size: 26px;
    font-weight: 700;
    display: block;
    color: var(--white);
    width: fit-content;
    padding: 3px 0.5em 5px;
    margin-bottom: 5px;
    border-radius: 0.7em;
    background: var(--main-color02);
}

.balloonCopy01 > p em {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-underline-offset: -3px;
    text-decoration-color: var(--red);
}

.balloonCopy01 .imgLayer {
    position: absolute;
    top: 0;
    right: 25px;
}

/* -----------------------------------------------------------
#rainleaking
#diagnosis
----------------------------------------------------------- */
.warning-box {
    position: relative;
    /* padding-bottom: 90px; */
}

.warning-box > .title {
    position: relative;
    margin-bottom: -50px;
    z-index: 1;
}

.diagnosis-headline {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: .8em;
}

.warning-list .warning-list_item,
.warning-list .warning-list_danger {
    background: var(--main-color02);
    color: var(--white);
    display: block;
    width: fit-content;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 1.3em 60px;
    padding: .2em .8em .4em;
    position: relative;
}

.warning-list .warning-list_item::before {
    content: '';
    background: url(./img/ico_troublelist.png) no-repeat center center;
    border-radius: 0;
    height: 44px;
    position: absolute;
    left: -60px;
    top: 5px;
    margin: auto;
    width: 48px;
}

.warning-list_item .warning_caption {
    background: #fe8707;
    color: var(--white);
    padding: .2em .3em .5em;
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    left: 103%;
    top: 0;
    bottom: 0;
    margin: auto 0;
    max-width: 3em;
    width: 3em;
    height: fit-content;
    display: block;
    text-align: center;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.5);
}

.warning-list .warning-list_danger {
    background: var(--red);
}

.warning-list_danger .warning_caption {
    background: var(--red);
}

.warning-detail {
    background: #333;
    box-sizing: border-box;
    margin-top: 50px;
    padding: 30px;
    border-width: 10px;
    border-style: solid;
    /* border-image-source: linear-gradient(0deg, #c79c17 0%, #edc54c 16%, #f9e295 35%, #f9e295 67%, #ecc44b 85%, #c79c18); */
    border-image-source: linear-gradient(45deg, var(--main-color02), #333, var(--main-color02));
    border-image-slice: 1;
}

.warning-box .photoUL {
    justify-content: center;
    margin-bottom: 30px;
}

/* .warning-detail .photoUL {
    justify-content: center;
    margin-bottom: 30px;
} */

.warning-detail p {
    margin-bottom: 0;
}

/*原因と改善（雨漏りのケース）*/
.leakage-caselist {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.leakage-caselist .leakage-case_item {
    background: var(--white);
    border: var(--main-color02) solid 3px;
    box-sizing: border-box;
    padding: 0;
    position: relative;
    text-align: center;
    width: calc(25% - 10px);
    transition: .6s;
}

.leakage-case_item:hover {
    background: #efefef;
}

.leakage-caselist .leakage-case_item::before {
    content: none;
}

.leakage-case_ttl {
    background: var(--sub-color02);
    border-radius: 50px;
    color: var(--white);
    display: block;
    font-size: 20px;
    font-weight: 500;
    padding: .3em .5em;
    position: absolute;
    text-align: center;
    top: -30px;
    transition: .6s;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
}

.leakage-case_ttl::after {
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: var(--sub-color02) transparent transparent transparent;
    content: '';
    height: 0;
    left: 0;
    right: 0;
    top: 100%;
    margin: auto;
    position: absolute;
    width: 0;
    transition: .6s;
    z-index: 2;
}

.leakage-case_ttl span {
    background: var(--red);
    border-radius: 50px;
    color: var(--white);
    display: inline-block;
    font-size: 14px;
    margin-right: .5em;
    padding: .1em .6em;
    position: absolute;
    top: -15px;
    left: 10px;
}

.leakage-case_item img {
    display: block;
    margin: 0 auto 5px;
}

.leakage-case_item a {
    display: block;
    color: var(--body-text-color);
    top: -30px;
    left: 0;
    right: 0;
    margin: 0 auto -30px;
    width: 100%;
    box-sizing: border-box;
    padding: 55px 10px 40px;
    display: block;
    z-index: 1;
    position: relative;
    text-decoration: none;
}

.leakage-case_item a::after {
    bottom: 0.5em;
    margin: auto;
    right: 0;
    left: 0;
    position: absolute;
    content: "";
    display: block;
    background-color: var(--sub-color02);
    width: 24px;
    height: 24px;
    -webkit-mask-image: url(./img/svg_arw01.svg);
    mask-image: url(./img/svg_arw01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transform: rotate(90deg);
}

.leakage-case_item p {
    margin-bottom: 0;
    height: 100%;
}


.leakage-case_item:hover .leakage-case_ttl {
    background: var(--main-color02);
    color: var(--white);
    transition: .6s;
}

.leakage-case_item:hover .leakage-case_ttl::after {
    border-color: var(--main-color02) transparent transparent transparent;
    transition: .6s;
}

/*原因と改善（詳細内容）*/
.leakage-case_detail {
    background: var(--white);
    border: #c4a77b solid 3px;
    box-sizing: border-box;
    padding: 40px;
    margin: 50px 0;
}

.cause-list {
    clear: both;
    counter-reset: causelist;
    margin-top: 30px;
}

.cause-list .cause-list_item {
    border-bottom: var(--body-text-color) dotted 2px;
    counter-increment: causelist;
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    line-height: 1.8;
}

.cause-list .cause-list_item:first-child {
    border-top: var(--body-text-color) dotted 2px;
}

.cause-list .cause-list_item::before {
    content: none;
}

.cause-item_ttl {
    background: var(--under-pr);
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 .5em 2em;
    position: relative;
}

.improvement_headline {
    /* background: linear-gradient(to bottom, transparent, #efefef 75%); */
    background: var(--red);
    color: var(--white);
    /* font-size: 48px; */
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    position: relative;
    margin: 30px -40px 30px;
    padding: 10px;
}

.improvement_headline::before {
    border-style: solid;
    border-width: 15px 20px 0 20px;
    border-color: var(--red) transparent transparent transparent;
    content: '';
    height: 0;
    left: 0;
    right: 0;
    top: 100%;
    margin: auto;
    position: absolute;
    width: 0;
    transition: .6s;
    z-index: 2;
}

.cause-item_ttl::before {
    background: var(--red);
    border-radius: 50%;
    box-sizing: border-box;
    content: counter(causelist, decimal);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: -2.4em;
    bottom: 0;
    margin: 0;
    width: 30px;
}

.leakage-case_detail .improvement-list {
    clear: both;
    counter-reset: causelist;
    margin-bottom: 0;
}

.improvement-list .improvement-list_item {
    border-bottom: var(--body-text-color) dotted 2px;
    counter-increment: causelist;
    overflow: hidden;
    padding: 20px 0 10px;
    position: relative;
    line-height: 1.8;
}

.improvement-list .improvement-list_item::before {
    content: none;
}

.improvement-item_ttl {
    background: var(--under-pb);
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 .5em 2em;
    position: relative;
}

.improvement-item_ttl::before {
    background: var(--main-color02);
    border-radius: 50%;
    box-sizing: border-box;
    content: counter(causelist, decimal);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: -2.4em;
    bottom: 0;
    margin: 0;
    width: 30px;
}

ol.numberList01 {
    counter-reset: my-counter;
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

ol.numberList01 li {
    list-style: none;
    line-height: 1.25;
    margin-bottom: 10px;
    padding-left: 1.75em;
    position: relative;
}

ol.numberList01 li::before {
    font-family: Roboto, sans-serif;
    font-size: 1em;
    content: counter(my-counter);
    counter-increment: my-counter;
    border: 1px solid var(--main-color02);
    color: var(--main-color02);
    display: block;
    float: left;
    line-height: 28px;
    margin-left: -1.75em;
    text-align: center;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    padding: 2px 1px 0;
    box-sizing: content-box;
    line-height: 1;
    margin-top: 0.1em;
}

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
#header {
    padding: 15px;
    position: fixed;
    width: 100%;
    background-color: transparent;
    z-index: 9999;
    box-sizing: border-box;
}

#header::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: transparent;
    transition: 0.3s;
}

#header.fixed::before {
    height: 120px;
    background-color: var(--base-color01);
}

#header.fixed .logo .htxt {
    font-size: 12px;
}

#header.fixed .headerContact .tel p {
    font-size: 15px;
}

#header.fixed .headerContact .tel p span {
    font-size: 26px;
    padding: 0 10px 0 20px;
}

#header.fixed .logo a img {
    width: 253px;
}

#header.fixed .headerContact .tel p span::before {

    width: 13px;
    height: 18px;
    top: 5px;
    left: 0;
}

#header .full {
    position: relative;
    gap: 0;
}

#header .logo {
    font-size: 12px;
}

#header .logo .htxt {
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 10px;
    display: block;
    transition: 0.7s;
}

#header .logo a {
    display: block;
}

#header .logo a img {
    width: 304px;
    transition: 0.7s;
}

#header .headerContact {
    margin-top: 14px;
}

#header .headerContact .tel {
    justify-content: flex-end;
}

#header .headerContact .tel p {
    display: flex;
    align-items: center;
    line-height: 1;
    transition: 0.7s;
}

#header .headerContact .tel p span {
    position: relative;
    font-size: 32px;
    font-family: var(--en-font-family);
    font-weight: 600;
    padding: 0 10px 0 30px;
}

#header .headerContact .tel p span::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 25px;
    background: url(./img/icon_tel.png) no-repeat;
    background-size: contain;
    top: 5px;
    left: 0;
}

@media screen and (max-width: 1440px) {
    #header .logo .htxt {
        font-size: 12px;
    }

    #header .logo a img {
        width: 260px;
    }
}

/* -----------------------------------------------------------
    nav
----------------------------------------------------------- */
#gNav {
    display: flex;
    align-items: center;
    border: 3px solid var(--main-color02);
    background-color: var(--base-color01);
    border-radius: 50px;
    margin-top: 15px;
    padding: 0 18px;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.1);
}

#gNav ul.nav {
    display: flex;
    overflow: visible;

}

#gNav ul.nav > li {
    position: relative;
    padding: 0 15px;
}

#gNav ul.nav > li > a {
    color: var(--body-text-color);
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 15px 0;
}

#gNav ul.nav > li > a:hover {
    text-decoration: underline var(--main-color01) 2px;
    text-underline-offset: 0.5em;
    opacity: 1;
    transition: 0s;
}

#gNav ul.nav > li:nth-child(3) > a:hover {
    text-decoration: none
}

#gNav ul.nav > li > a::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 1px;
}

#gNav ul.nav > li:nth-of-type(1) > a::before {
    background-image: url(img/icon_nav01.png);
}

#gNav ul.nav > li:nth-of-type(2) > a::before {
    background-image: url(img/icon_nav02.png);
}

#gNav ul.nav > li:nth-of-type(3) > a::before {
    background-image: url(img/icon_nav03.png);
}

#gNav ul.nav > li:nth-of-type(4) > a::before {
    background-image: url(img/icon_nav04.png);
}

#gNav ul.nav > li:nth-of-type(5) > a::before {
    background-image: url(img/icon_nav05.png);
}

#gNav > ul > li ul {
    position: relative;
    opacity: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 4%;
    border-radius: 5px;
    pointer-events: none;
    background: var(--main-color02);
    position: absolute;
    z-index: 100;
    width: 450px;
    margin-top: 0;
    margin-left: -157px;
    padding: 25px;
    box-sizing: border-box;
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

#gNav > ul > li:hover ul {
    opacity: 1;
    transition: opacity 1.0s;
    pointer-events: auto;
}

#gNav > ul > li:hover ul::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 16px solid var(--main-color02);
    border-top: 0;
}

#gNav > ul > li ul li {
    width: 48%;
    display: block;
}

#gNav > ul > li ul li a:link,
#gNav > ul > li ul li a:visited {
    position: relative;
    display: block;
    color: var(--white);
    padding: 10px 10px 10px 25px;
    border-radius: 5px;
    font-size: 15px;
}

#gNav > ul > li ul li a::before {
    background: none;
    color: var(--main-color01);
    content: '\f105';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    left: 10px;
    height: 17px;
    line-height: 1;
    width: auto;
}

#gNav > ul > li ul li a:hover {
    background-color: var(--main-color01);
    transition: 0.6s;
}

#gNav > ul > li ul li a:hover::before {
    color: var(--white);
}

#gNav > ul > li ul li.simulation {
    width: 100%;
}

#gNav > ul > li ul li.simulation a {
    position: relative;
    width: 76%;
    text-align: center;
    margin: 10px auto 0;
    border: solid 1px var(--white);
    border-radius: 30px;
}

#gNav > ul > li ul li.simulation a::before {
    content: "";
    display: block;
    background-color: var(--white);
    width: 25px;
    height: 25px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

#gNav > ul > li ul li.simulation:nth-last-of-type(2) a::before {
    margin-right: 0.5em;
    -webkit-mask-image: url(./img/icon_nav08.png);
    mask-image: url(./img/icon_nav08.png);
    left: 40px;
}

#gNav > ul > li ul li.simulation:last-of-type a::before {
    -webkit-mask-image: url(./img/icon_nav09.png);
    mask-image: url(./img/icon_nav09.png);
    left: 55px;
}

#gNav > ul > li ul li.simulation a:hover {
    background-color: transparent;
}

#gNav .contactBtns {
    display: flex;
    gap: 15px;
    margin-left: 15px;
}

@media screen and (max-width: 1610px) {
    #gNav ul.nav > li > a {
        font-size: 15px;
    }

    #gNav ul.nav > li {
        padding: 0 10px;
    }

    #gNav .contactBtns {
        gap: 10px;
        margin-left: 10px;
    }
}

@media screen and (max-width: 1440px) {
    #gNav ul.nav > li > a {
        font-size: 13px;
    }

    #gNav ul.nav > li {
        padding: 0 5px;
    }

    #gNav .contactBtns {
        gap: 5px;
        margin-left: 5px;
    }

    .contactBtns a {
        font-size: 13px;
        padding: 8px 15px 8px;
    }
}

/**/
.hero {
    width: 100%;
    box-sizing: border-box;
    padding: 2em 3em 0;
}

.hero img {
    width: 100%;
}

/* -----------------------------------------------------------
    .mainv .stage
----------------------------------------------------------- */
#jsMainv.mainv {
    width: 96%;
    margin: 0 auto;
}

#jsMainv.mainv .stage:has(>span) {
    position: relative;
}

#jsMainv.mainv .stage > span {
    display: block;
    position: absolute;
}

#jsMainv.mainv .stage > span:first-of-type {
    position: static;
    width: fit-content;
    margin: 0 auto;
}

.mainv .slick-list {
    max-width: 100%;
    margin: 0 auto;
    /* border-radius: 20px;
    overflow: hidden; */
}

.mainv .stage .slick-slide {
    margin: 0 10px;
    /* margin: 20px 10px; */
}

.mainv .stage .slick-slide a img {
    display: block;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.mainv .stage .slick-slide a {
    display: block;
    max-width: 1400px;
    margin: 0 auto;
}

.mainv .stage.slick-slider {
    width: 100%;
    /* overflow: hidden; */
}

.mainv .stage.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.mainv .stage.slick-slider .slick-dots {
    transform: none;
}

.mainv .stage button {
    position: absolute;
    z-index: 2000;
}

.mainv .stage .slick-prev,
.mainv .stage .slick-next {
    width: 60px;
    height: 60px;
    bottom: 50%;
    transform: translateY(-70%);
    /* background-color: var(--main-color02); */
    border-radius: 50%;
}

.mainv .stage .slick-prev {
    background-image: url(./img/slide_prev.png);
    left: -20px;
}

.mainv .stage .slick-next {
    background-image: url(./img/slide_next.png);
    right: -20px;
}

.mainv .stage .slick-prev::before,
.mainv .stage .slick-next::before {
    content: '';
}

/* .mainv .stage .slick-arrow {
    inset: 0;
    margin: auto;
    width: 200px;
    height: 200px;
}

.mainv .stage .slick-prev {
    transform: translateX(max(-670px, -46vw)) rotate(-90deg) scale(0.25);
    left: 0;
}

.mainv .stage .slick-next {
    transform: translateX(min(670px, 46vw)) rotate(90deg) scale(0.25);
    right: 0;
}

.mainv .stage .slick-prev:hover,
.mainv .stage .slick-next:hover {
    opacity: 1;
} */

.slick-dots {
    position: static !important;
    /* position: absolute; */
    /* left: 0;
    right: 0;
    bottom: -50px; */
    margin: 20px auto 25px !important;
    padding: 0;
    width: fit-content !important;
    list-style: none;
    text-align: center;
    display: flex !important;
}

.slick-dots li {
    position: relative;
    display: block !important;
    margin: 0 10px !important;
    padding: 0;
    width: 10px !important;
    height: 10px !important;
    cursor: pointer;
    text-align: center;
}

div .slick-dots li button {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    outline: none;
    border: 0;
    margin: 0 auto;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    border-radius: 50%;
    background: var(--main-color02);
    font-size: 6px;
    line-height: 20px;
    opacity: 0.3 !important;
}

div .slick-dots li.slick-active button {
    opacity: 1.0 !important;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover::before,
.slick-dots li button:focus::before {
    opacity: 1;
}

.slick-slider .slick-dots {
    bottom: 0;
    transform: translateY(100%);
    z-index: 100;
}

.slick-slider .slick-dots li button::before {
    display: none;
}

/* -----------------------------------------------------------
    .mainv
----------------------------------------------------------- */
#contents .mainv img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------
    cornerName
----------------------------------------------------------- */
#cornerName {
    margin-top: 125px;
    background: url(img/bg_pattern01.jpg) no-repeat center;
    background-size: cover;
    text-align: center;
    color: var(--white);
    position: relative;
    z-index: 1;
}

#cornerName > * {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
    z-index: 2;
    min-height: 420px;
    box-sizing: border-box;
}

#cornerName .title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    margin: 0 auto 30px;
    width: fit-content;
}

#cornerName .title small {
    display: block;
    font-size: 22px;
    margin-bottom: 15px;
}

#cornerName p {
    font-family: var(--en-font-family);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.breadcrumbs {
    font-size: 15px;
    font-weight: 500;
}

.breadcrumbs > * {
    padding: 20px 0 120px;
}

.breadcrumbs > * > span {
    margin: 0 15px;
}

.breadcrumbs > * > span:first-of-type {
    margin-left: 0;
}

.breadcrumbs a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.diagnosisBanners {
    padding: 100px 0;
}

h2 + .diagnosisBanners {
    padding-top: 0;
    padding-bottom: 0;
}

.diagnosisBanners .inner {
    overflow: visible;
}

.diagnosisBanners ul {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.diagnosisBanners li {
    display: block;
}

.diagnosisBanners li a:hover {
    transform: scale(1.05);
}

.diagnosisBanners a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--body-text-color);
    background: var(--white);
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.1);
}

.diagnosisBanners a:hover {
    color: var(--body-text-color);
    /* opacity: 0.7; */
}

.diagnosisBanners a:hover img {
    opacity: 1;
}

.diagnosisBanners a h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    --c: var(--main-color02);
    background-color: var(--c);
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 4px, var(--c) 0, var(--c) 8px);
    padding: 17px 29px;
}

.diagnosisBanners .rainleakingBanner a h2 {
    --c: var(--main-color01);
}

.diagnosisBanners a h2 > span {
    display: inline-block;
    color: var(--white);
    background: #000a29;
    font-size: 76px;
    line-height: 1;
    border-radius: 6px;
    margin-right: 2px;
    padding: 2px 5px 8px;
}

.diagnosisBanners a h2 > span:nth-of-type(-n+2) {
    color: var(--yellow);
}

.diagnosisBanners a h2 .ico {
    display: inline-block;
    text-align: center;
    width: 90px;
    height: 86px;
    margin-right: 10px;
    font-size: 32.5px;
    font-weight: 700;
    line-height: 86px;
    color: var(--white);
    background: var(--red);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url(./img/svg_shape02.svg);
    mask-image: url(./img/svg_shape02.svg);
}

.diagnosisBanners a .inBox {
    text-align: center;
    padding: 20px 30px 30px;
}

.diagnosisBanners a .inBox p {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.companyBanners > * {
    margin: 0 auto !important;
    /* padding: 30px 30px !important; */
    list-style: none;
    display: flex;
    justify-content: stretch;
    background: var(--white);
}

.companyBanners li {
    display: block;
    flex: 1;
    margin: 1px;
    background: url(img/bg_pattern02.jpg) repeat;
}

.companyBanners li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    color: #090c3b;
    font-size: 30px;
    font-weight: 700;
    height: 258px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    text-decoration: none;
    transition: 0.3s ease;
}

.companyBanners li a::after {
    display: block;
    position: absolute;
    content: "";
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: 0.3s ease;
    background: right center url(img/bg_corporateBanner01.jpg) no-repeat;
    /* background-size: contain; */
    --s: 300px;
    --b: 100px;
    --mask: linear-gradient(-90deg, hsl(0, 0%, 0%) 0%,
            hsla(0, 0%, 0%, 0.987) calc(0.081 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.951) calc(0.155 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.896) calc(0.225 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.825) calc(0.29 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.741) calc(0.353 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.648) calc(0.412 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.55) calc(0.471 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.45) calc(0.529 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.352) calc(0.588 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.259) calc(0.647 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.175) calc(0.71 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.104) calc(0.775 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.049) calc(0.845 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.013) calc(0.919 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0) calc(1 * var(--s)));
    mask-image: var(--mask);
    mask-repeat: no-repeat;
}

.companyBanners li:nth-of-type(2) a::after {
    background: right center url(img/bg_corporateBanner02.jpg) no-repeat;
}

.companyBanners li a::before {
    content: "";
    display: block;
    background-color: currentColor;
    width: 32px;
    height: 32px;
    margin-top: 0.1em;
    margin-right: 0.66em;
    -webkit-mask-image: url(./img/svg_arw01.svg);
    mask-image: url(./img/svg_arw01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.companyBanners li a:hover {
    color: var(--main-color01)
}

.companyBanners li a:hover::after {
    opacity: 0.7;
}

.snsBanners {
    background: var(--sub-color01);
}

.snsBanners > * {
    margin: 0 auto;
    padding: 20px 20px !important;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px
}

.snsBanners li {
    display: block;
}

.snsBanners li a {
    display: block;
}

/* -----------------------------------------------------------
    topReview
----------------------------------------------------------- */
.topReview {
    position: relative;
    padding: 60px 0 85px;
    background-image: url(./img/bg_topreview01.png), url(./img/bg_topreview02.png), url(./img/bg_topreview03.png);
    background-repeat: no-repeat;
    background-position: left top, right top 40%, left bottom;
    background-size: 30%, 40%, 40%;
}

.topReview .inner {
    overflow: initial;
}

/* -----------------------------------------------------------
    btnList
----------------------------------------------------------- */
.btnList {
    background: var(--sub-color03);
    box-sizing: border-box;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 80px;
}

.btnList li {
    box-sizing: border-box;
    width: 510px;
}

.btnList li a {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--main-color02);
    font-size: 18px;
    font-weight: 700;
    background: var(--white);
    border: solid 3px var(--main-color02);
    border-radius: 10px;
    padding: 5px;
    gap: 10px;
}

.btnList li a:hover {
    opacity: 0.75;
}

.btnList li a::before,
.btnList li a::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
    left: -45px;
}

.btnList li a::before {
    width: 26px;
    height: 26px;
    background: var(--main-color02);
    opacity: 1.0;
    border-radius: 100vh;
}

.btnList li a::after {
    --mask: url(img/svg_arrow01.svg);
    width: 26px;
    height: 16px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
}

/* -----------------------------------------------------------
    medalList
----------------------------------------------------------- */
.medalList {
    position: relative;
    gap: 25px;
    border-radius: 20px;
    background: var(--white);
    margin-bottom: 110px;
    padding: 80px 45px;
    box-shadow: 0px 0px 15px -5px #b5b5b5;
}

.medalList:before {
    content: "";
    position: absolute;
    width: 111px;
    height: 48px;
    margin-left: -55px;
    background: url(./img/medal_balloon.png);
    top: 100%;
    left: 50%;
    /* box-shadow: 0px 0px 15px -5px #b5b5b5; */
}

.medalList img {
    width: 100%;
}

/* -----------------------------------------------------------
    shopReview
----------------------------------------------------------- */
.shopReview {
    gap: 0;
    margin-top: 40px;
}

.shopReview li {
    width: 540px;
    border: solid 2px #f1dac3;
    border-radius: 20px;
    padding: 25px;
    box-sizing: border-box;
    background: #fff9f3;
}

.shopReview .wp-gr {
    padding-bottom: 0 !important;
}

.shopReview .wp-google-content-inner,
.shopReview .grw-content {
    display: none;
}

.shopReview .wp-gr .grw-header-inner, .wp-gr .grw-review-inner {
    padding: 0 !important;
}

.shopReview .wp-gr.wpac .wp-google-left img {
    width: 52px !important;
    height: 52px !important;
    margin-right: 20px !important;
}

.shopReview .wp-gr.wpac .wp-google-name {
    font-family: var(--base-font-family);
    color: var(--body-text-color) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    margin-bottom: 15px !important;
}

.shopReview .wp-gr .wp-google-rating {
    color: var(--star-color, #fb8e28) !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    margin: 0 6px 0 0 !important;
}

.shopReview .wp-gr .wp-google-place .wp-star svg {
    width: 35px !important;
    height: 35px !important;
}

.shopReview .wp-gr .wp-google-based {
    margin: 10px 0 0 !important;
}

.shopReview .wp-gr .wp-google-powered {
    margin: 0 !important;
}



/* -----------------------------------------------------------
    slideReview
----------------------------------------------------------- */
.slideReview .layer {
    position: relative;
    display: block;
    margin: -190px auto 0;
    bottom: -190px;
}

.slideReview .grw-header {
    display: none;
}

.slideReview .wp-gr .grw-review-inner {
    padding: 40px !important;
    border-radius: 20px !important;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto) 1fr;
    grid-template-areas:
        ". . icon icon . ."
        "text text text text text text"
        /* "read-more read-more read-more . . ." */
        "stars stars stars stars stars stars"
        ". . . . . .";
    justify-content: center;
}

.slideReview .wp-gr .wp-google-time {
    display: none;
}

.slideReview .wp-gr.wpac a.wp-google-name {
    /* grid-area: read-more;
    position: relative !important;
    text-indent: -2000% !important;
    overflow: hidden;
    text-align: left !important;
    margin-bottom: 15px !important;
    pointer-events: none;
    transition: 0.3s ease; */
    display: none;
}
/*
.slideReview .wp-gr.wpac a.wp-google-name:hover {
    opacity: 0.7;
}

.slideReview .wp-gr.wpac a.wp-google-name::before {
    content: "Read more";
    position: absolute;
    inset: 0;
    display: block;
    text-indent: 0 !important;
    font-weight: normal;
    color: #141921;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(0, 0, 0, 0.25) !important;
    text-underline-offset: 2px;
}*/

.slideReview .wp-gr .grw-review .wp-google-left {
    display: contents !important;
    float: none !important;
    text-align: center !important;
}

.slideReview .wp-gr.wpac .wp-google-left img {
    float: none !important;
    grid-area: icon;
    margin: 0 auto 20px !important;
    width: 60px !important;
    height: 60px !important;
    box-shadow: none !important;
}

.slideReview .wp-gr .wp-google-wrap {
    grid-area: text;
}

.slideReview .wp-gr .grw-review .wp-google-feedback {
    /* overflow-y: hidden !important; */
    /* height: auto !important; */
    height: 220px !important;
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden; */
}

.slideReview .wp-gr .grw-review-inner > svg {
    /* grid-area: g-mark; */
    grid-area: stars;
    inset: 0 !important;
    margin: auto;
    translate: 70px 10%;
}

.slideReview .wp-gr .grw-review .wp-google-stars {
    grid-area: stars;
    text-align: center !important;
    margin: 0 !important;
}

.slideReview .wp-gr .grw-review .wp-google-stars .wp-stars{
    margin-left: -10px !important;
}

.slideReview .wp-gr .grw-btns {
    height: 40px !important;
    width: 40px !important;
    background: #334155 !important;
    border-radius: 100vh !important;
    position: relative !important;
}

.slideReview .wp-gr .grw-btns svg {
    visibility: hidden;
}

.slideReview .wp-gr .grw-btns::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    inset: 0;
    margin: auto;
}

.slideReview .wp-gr .grw-prev::before {
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    rotate: 45deg;
    translate: 25% 0;
}

.slideReview .wp-gr .grw-next::before {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    rotate: 45deg;
    translate: -25% 0;
}

.slideReview .wp-gr[data-layout="slider"] .grw-reviews {
    margin: 0 10px !important;
}

/* -----------------------------------------------------------
    worksAndBlog
----------------------------------------------------------- */
.worksAndBlog {
    margin: 0 auto;
    padding: 80px 0;
    background: var(--sub-color02);
    width: 70%;
    min-width: 1400px;
    border-radius: 20px;
}

.worksAndBlog h2 {
    font-family: var(--en-font-family);
    text-align: center;
    color: var(--white);
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 40px;
}

.worksAndBlog .flex {
    justify-content: center;
    gap: 50px;
}

.worksAndBlog .inBox {
    width: 440px;
}

.worksAndBlog .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
    border-bottom: solid 4px var(--white);
    padding-bottom: 15px;
}

.worksAndBlog .head h3 {
    position: relative;
    font-size: 24px;
    font-weight: 700;
    color: var(--main-color02);
    padding-left: 25px;
}

.worksAndBlog .head h3::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: solid 3px var(--main-color01);
    border-radius: 50%;
    top: 3px;
    left: 0;
}

.worksAndBlog .head a {
    position: relative;
    display: inline-block;
    font-size: 17px;
    padding-right: 12px;
    color: var(--body-text-color);
}

.worksAndBlog .head a::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-top: solid 2px var(--body-text-color);
    border-right: solid 2px var(--body-text-color);
    transform: rotate(45deg);
    top: 5px;
    right: 0;
}

.worksAndBlog li {
    margin-top: 30px;
}

.worksAndBlog li a {
    display: flex;
    align-items: center;
    color: var(--body-text-color);
    gap: 15px;
}

.worksAndBlog li a:hover {
    opacity: 0.85;
}

.worksAndBlog li .mainThumb {
    width: 100px;
    height: 100px;
}

.worksAndBlog li .mainThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.worksAndBlog li .mainContent {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    width: calc(440px - 115px);
    line-height: 1;
}

.worksAndBlog li .mainContent h4 {
    font-size: 17px;
    font-weight: 500;
    width: 100%;
}

.worksAndBlog li .mainContent time {
    font-size: 17px;
    font-weight: 500;
    color: #516684;
}

.worksAndBlog li .mainContent .cats span {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--body-text-color);
    background: var(--white);
    border-radius: 4px;
    border: solid 1px var(--main-color02);
}



/* -----------------------------------------------------------
    aboutUs
----------------------------------------------------------- */
.aboutus {
    padding: 100px 0 140px;
}

.aboutus .box .flex {
    width: 100%;
    gap: 0;
    justify-content: flex-start;
}

.aboutus .box.right .flex {
    flex-direction: row-reverse;
}

.aboutus .box:nth-of-type(1) .flex {
    background: url(./img/bg_aboutus01.png) no-repeat right -27% top 46%;
    margin-top: 80px;
    background-size: 50%;
}

.aboutus .box:nth-of-type(2) .flex {
    background: url(./img/bg_aboutus02.png) no-repeat left -30% top 80%;
    margin-top: 40px;
    background-size: 50%;
}

.aboutus .box:nth-of-type(3) .flex {
    background: url(./img/bg_aboutus03.png) no-repeat right -22% top 46%;
    margin-top: 80px;
    background-size: 50%;
}

.aboutus .box.full {
    margin-top: 80px;
}

.aboutus .box .flex > * {
    flex: 1;
}

.aboutus .box figure {
    margin: 0;
    width: 50%;
}

.aboutus .box.full figure {
    width: 100%;
}

.aboutus .box figure img {
    width: 100%;
}

.aboutus .box .innBox > div {
    position: relative;
    width: 700px;
    box-sizing: border-box;
    padding: 55px;
    background: var(--white);
    border: solid 6px var(--main-color01);
    box-shadow: 0px 0px 15px -5px #b5b5b5;
    border-radius: 20px;
}

.aboutus .box.right .innBox > div {
    margin-left: auto;
    margin-right: 0;
}

.aboutus .box.full .innBox > div {
    position: relative;
    top: -80px;
    margin-bottom: -80px;
    width: 940px;
    border: solid 6px var(--main-color02);
    margin-left: auto;
    margin-right: auto;
}

.aboutus .box.left .innBox > div {
    left: -145px;
    margin-top: 70px;
}

.aboutus .box.right .innBox > div {
    right: -145px;
    margin-top: 115px;
}

.aboutus .box .innBox h3 {
    margin-bottom: 25px;
    font-size: 34px;
    font-weight: 700;
    color: var(--main-color02);
    line-height: 1.35;
}

.aboutus .box .innBox h3 span {
    color: var(--main-color01);
}

.aboutus .box .innBox p {
    margin-top: 10px;
    font-size: 17px;
    line-height: 2;
    letter-spacing: -0.05em;
}

.aboutus .box .innBox p span {
    color: var(--main-color01);
}

.aboutus .box .innBox .btn {
    margin-top: 40px;
}

/* -----------------------------------------------------------
    worksSlider
----------------------------------------------------------- */
.worksSlider {
    position: relative;
    background: url(./img/bg_worksSlider.png) no-repeat top center;
    background-size: cover;
    padding: 100px 0 80px;
}

.worksSlider.relative {
    background-color: var(--sub-color03);
}

.worksSlider::before {
    content: "";
    position: absolute;
    background: url(./img/works_balloon.png);
    width: 255px;
    height: 209px;
    top: -70px;
    left: calc(50% - 520px);
}

.worksSlider .tl01 {
    margin-bottom: 40px;
}

.worksSlider .tl01 .en,
.worksSlider .tl01 .ja {
    color: var(--white);
}

.worksSlider .slider {
    margin-bottom: 60px;
}

.worksSlider li {
    width: 245px;
    margin: 0 15px;
    padding-top: 50px;
    position: relative;
}

.worksSlider li a {
    display: block;
    border-radius: 20px;
    background: var(--white);
    color: var(--body-text-color);
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 10px;
}

.worksSlider li a:hover {
    opacity: 0.85;
    transition: 0.3s;
}

.worksSlider li picture img {
    width: 100%;
    border-radius: 20px 20px 0 0;
    border: solid 5px var(--main-color02);
    box-sizing: border-box;
}

.worksSlider li .imgLayer {
    position: absolute;
    left: 5px;
    top: 0px;
    z-index: 1;
}

.worksSlider li .title {
    margin-top: 10px;
}

.worksSlider li .title,
.worksSlider li .parts {
    padding: 0 15px;
}

.worksSlider li .click {
    position: absolute;
    display: inline-block;
    font-size: 13px;
    background: var(--white);
    padding: 5px 25px 5px 35px;
    border-radius: 0 20px 0 0;
    left: 0;
    bottom: 70px;
}

.worksSlider li .click::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: solid 2px var(--body-text-color);
    border-right: solid 2px var(--body-text-color);
    transform: rotate(45deg);
    left: 12px;
    top: 11px;
}

/* -----------------------------------------------------------
    menuList
----------------------------------------------------------- */

.menuList {
    margin: 0 !important;
    padding: 100px 0;
}

.menuList .flex {
    flex-wrap: wrap;
    margin: 120px 0 60px;
}

.menuList li {
    width: 530px;
}

.menuList li a {
    display: block;
    border: solid 4px var(--main-color02);
    background: var(--white);
    border-radius: 20px;
    color: var(--body-text-color);
    padding: 40px;
}

.menuList li a:hover {
    opacity: 0.75;
}

.menuList li .head {
    display: flex;
    gap: 25px;
    align-items: center;
}

.menuList li .head figure {
    margin: 0;
}

.menuList li .head img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.menuList li .head h3 {
    position: relative;
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    color: var(--main-color02);
    border-bottom: dotted 3px var(--main-color02);
    padding: 0 30px 5px 0;
}

.menuList li .head h3::before,
.menuList li .head h3::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
    left: -20px;
}

.menuList li .head h3::before {
    width: 26px;
    height: 26px;
    background: var(--main-color01);
    opacity: 1.0;
    border-radius: 100vh;
}

.menuList li .head h3::after {
    --mask: url(img/svg_arrow01.svg);
    width: 26px;
    height: 16px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
}

.menuList li:nth-of-type(1) .head,
.menuList li:nth-of-type(2) .head {
    position: relative;
    display: block;
    text-align: center;
    top: -135px;
    margin-bottom: -135px;
}

.menuList li:nth-of-type(1) .head img,
.menuList li:nth-of-type(2) .head img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.menuList li:nth-of-type(1) .head h3,
.menuList li:nth-of-type(2) .head h3 {
    display: inline-block;
    width: auto;
    font-size: 34px;
    font-weight: 700;
    color: var(--main-color02);
    border-bottom: dotted 3px var(--main-color02);
    padding: 0 40px 1px 0;
}

.menuList li .desc {
    margin-top: 10px;
}

.menuList li .price,
.menuPlanList > li .list li.price,
.menuPlanList > li figcaption.price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.menuList li .inTax,
.menuPlanList > li .list li.price .inTax,
.menuPlanList > li figcaption.price .inTax {
    font-size: 15px;
    background: #ebebeb;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
}

.menuList li .red,
.menuPlanList > li .list li.price .red,
.menuPlanList > li figcaption.price .red {
    color: var(--red);
    font-size: 44px;
    font-weight: 700;
    font-family: var(--en-font-family);
}

.menuList li .red small,
.menuPlanList > li .list li.price .red small,
.menuPlanList > li figcaption.price .red small {
    font-size: 20px;
}

.menuList li:nth-of-type(1) .desc,
.menuList li:nth-of-type(2) .desc {
    margin-top: 20px;
}

.menuList li:nth-of-type(1) .price,
.menuList li:nth-of-type(2) .price {
    margin-top: 20px;
}

.menuList li:nth-of-type(1) .red,
.menuList li:nth-of-type(2) .red {
    font-size: 54px;
}

/* -----------------------------------------------------------
    myColor
----------------------------------------------------------- */

.myColor {
    background: var(--sub-color03);
    padding: 100px 0;
}

.myColor .inner {
    padding: 135px 75px;
    background: url(./img/bg_myColor02.png), url(./img/bg_myColor01.png) left bottom, left top;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-size: 100% contain;
    border-radius: 20px;
    box-shadow: 0px 0px 15px -5px #b5b5b5;
}

.myColor h2 {
    text-align: center;
}

.myColor .flex {
    margin: 60px 0 0;
}

.myColor iframe {
    width: 390px;
    min-width: 390px;
}

.myColor .flex > div {
    font-size: 17px;
}

.myColor .flex > div p {
    letter-spacing: -0.05em;
}

.myColor .flex > div a {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    padding-left: 32px;
    color: var(--body-text-color);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #d8dadd;
    text-underline-offset: 2px;
}

.myColor .flex > div a::before,
.myColor .flex > div a::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
    right: -20px;
}

.myColor .flex > div a::before {
    width: 26px;
    height: 26px;
    background: var(--main-color01);
    opacity: 1.0;
    border-radius: 100vh;
}

.myColor .flex > div a::after {
    --mask: url(img/svg_arrow01.svg);
    width: 26px;
    height: 16px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
}


.myColor figure {
    text-align: center;
    margin: 60px 0 0;
}

.myColorTitle {
    padding-bottom: 100px;
}

.myColorTitle h2 {
    text-align: center;
}

.myColorTitle p {
    margin-top: 40px;
}

.myColorContents {
    padding: 240px 0;
    background-image: url(./img/bg_myColorContents01.png), url(./img/bg_myColorContents02.png);
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    background-color: var(--white);
    background-size: 100% auto;
    border-radius: 100px;
    margin-bottom: 100px;
}

.myColorStart .title {
    text-align: center;
}

.myColorStart .content {
    line-height: 3;
    text-align: center;
    margin-top: 15px;
}

.myColorStart .bnr {
    margin-top: 40px;
}

.myColorStart .tool {
    margin-top: 140px;
    position: relative;
}

.myColorStart .tool::before {
    content: "";
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    top: -100px;
    --r: 5px;
    width: 35px;
    aspect-ratio: 1 / 2;
    --_g: calc(var(--r) / tan(22.5deg)) left var(--r), #000 98%, #0000 101%;
    -webkit-mask: conic-gradient(from 67.5deg at calc(var(--r) / (3 * sqrt(2) - 4) - 100% / tan(22.5deg)) 50%, #000 45deg, #0000 0) 0 0 / calc(100% - var(--r) / sqrt(2)) no-repeat, radial-gradient(var(--r) at calc(100% - var(--r) * sqrt(2)) 50%, #000 98%, #0000 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g));
    clip-path: polygon(100% 50%, 0 100%, 0 0);
    background: var(--main-color02);
}

.myColorStart .tool h3 {
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 40px;
    gap: 20px;
}

.myColorStart .tool h3 small {
    font-size: 26px;
}

.myColorStart .tool iframe {
    width: 520px;
    height: 305px;
}

.myColorStart .tool p {
    width: 540px;
}

.myColorStart .tool figure {
    margin-top: 40px;
}

.myColorMerit {
    position: relative;
    margin-top: 100px;
    padding: 100px 0;
    background: #f7e7e7;
}

.myColorMerit::before {
    content: "";
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    bottom: -60px;
    --r: 5px;
    width: 45px;
    aspect-ratio: 1 / 2;
    --_g: calc(var(--r) / tan(22.5deg)) left var(--r), #000 98%, #0000 101%;
    -webkit-mask: conic-gradient(from 67.5deg at calc(var(--r) / (3 * sqrt(2) - 4) - 100% / tan(22.5deg)) 50%, #000 45deg, #0000 0) 0 0 / calc(100% - var(--r) / sqrt(2)) no-repeat, radial-gradient(var(--r) at calc(100% - var(--r) * sqrt(2)) 50%, #000 98%, #0000 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g));
    clip-path: polygon(100% 50%, 0 100%, 0 0);
    background: #f7e7e7;
}

.myColorMerit .tl01 .en {
    color: #eb7979;
}

.myColorMerit .tl01 .ja b {
    color: #eb7979;
}

.myColorStep {
    padding: 100px 0;
    background: #f6f7e8;
}

.myColorStep .tl01 .en {
    color: #c2ca56;
}

.myColorStep .tl01 .ja b {
    color: #c2ca56;
}

.myColumun {
    display: flex;
    justify-content: space-between;
    overflow: initial;
    margin-top: 90px;
}

.myColumun li {
    position: relative;
    padding: 30px;
    width: 340px;
    border-radius: 20px;
    background: var(--white);
    box-sizing: border-box;
}

.myColumun.column04 li {
    width: 260px;
    padding: 20px;
}

.myColumun li::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    background-size: contain;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.myColumun.column04 li::after {
    content: "";
    position: absolute;
    display: inline-block;
    right: -16px;
    top: 120px;
    --r: 1px;
    width: 10px;
    aspect-ratio: 1 / 2;
    --_g: calc(var(--r) / tan(22.5deg)) left var(--r), #000 98%, #0000 101%;
    -webkit-mask: conic-gradient(from 67.5deg at calc(var(--r) / (3 * sqrt(2) - 4) - 100% / tan(22.5deg)) 50%, #000 45deg, #0000 0) 0 0 / calc(100% - var(--r) / sqrt(2)) no-repeat, radial-gradient(var(--r) at calc(100% - var(--r) * sqrt(2)) 50%, #000 98%, #0000 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g));
    clip-path: polygon(100% 50%, 0 100%, 0 0);
    background: var(--main-color02);
}

.myColumun li:nth-child(1)::before {
    background: url(./img/myColor_no01-01.png) no-repeat;
}

.myColumun li:nth-child(2)::before {
    background: url(./img/myColor_no01-02.png) no-repeat;
}

.myColumun li:nth-child(3)::before {
    background: url(./img/myColor_no01-03.png) no-repeat;
}

.myColumun.column04 li:nth-child(1)::before {
    background: url(./img/myColor_no02-01.png) no-repeat;
}

.myColumun.column04 li:nth-child(2)::before {
    background: url(./img/myColor_no02-02.png) no-repeat;
}

.myColumun.column04 li:nth-child(3)::before {
    background: url(./img/myColor_no02-03.png) no-repeat;
}

.myColumun.column04 li:nth-child(4)::before {
    background: url(./img/myColor_no02-04.png) no-repeat;
}

.myColumun.column04 li:nth-child(4)::after {
    display: none;
}

.myColumun li img {
    width: 100%;
}

.myColumun li h3 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 10px;
    color: var(--main-color02);
}

.myColumun li p {
    margin-top: 10px;
    color: var(--main-color02);
}

.myColorGuide {
    padding-top: 100px;
}

.myColorGuide .guide_box {
    background: var(--main-color02);
    color: var(--white);
    border-radius: 20px;
    padding: 60px;
    margin-bottom: 100px;
}

.myColorGuide .guide_box figcaption {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
}

.myColorGuide .guide_box h3 {
    font-size: 30px;
    font-weight: 700;
    margin: 15px 0 25px;
}

.myColorGuide .inner02 {
    width: 1100px;
}

.myColorGuide .contactTel {
    padding: 50px 70px;
}

.myColorGuide .contactTel .top {
    gap: 45px;
}

/* -----------------------------------------------------------
    contents02
----------------------------------------------------------- */

.contents02 {
    background: url(./img/bg_contents02.png) no-repeat left 4% bottom 28%;
    background-size: 320px;
}

/* -----------------------------------------------------------
    pickupMenu
----------------------------------------------------------- */
.pickupMenu {
    position: relative;
    background: var(--sub-color04);
    margin-top: -200px;
    bottom: -200px;
    padding: 100px 0 300px;
}

.pickupMenu ul.flex {
    flex-wrap: wrap;
    margin-top: 60px;
}

.pickupMenu li {
    width: 530px;
}

.pickupMenu li a {
    position: relative;
    justify-content: flex-start;
    color: var(--body-text-color);
    gap: 30px;
    padding-right: 50px;
}

.pickupMenu li a:hover {
    opacity: 0.75;
}

.pickupMenu li a::before,
.pickupMenu li a::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
    left: -25px;
    bottom: -90px;
}

.pickupMenu li a::before {
    width: 26px;
    height: 26px;
    background: var(--main-color02);
    opacity: 1.0;
    border-radius: 100vh;
}

.pickupMenu li a::after {
    --mask: url(img/svg_arrow01.svg);
    width: 26px;
    height: 16px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
}

.pickupMenu li a > div {
    width: 380px;
}

.pickupMenu h3 {
    border-bottom: dotted 3px var(--main-color02);
    color: var(--main-color02);
    font-size: 24px;
    font-weight: 700;
}

.pickupMenu p {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 500;
}

/* -----------------------------------------------------------
    staffMessage
----------------------------------------------------------- */
.staffMessage {
    padding: 100px 0;
}

.staffMessage .inner {
    overflow: initial;
    border-radius: 20px;
    box-shadow: 0px 0px 15px -5px #b5b5b5;
    border: solid 6px var(--main-color02);
    padding: 80px 60px;
    background: var(--white);

}

.staffMessage .inner::before {
    content: "";
    position: absolute;
    background: url(./img/bg_staffMessage.png) no-repeat left top;
    background-size: contain;
    width: 1076px;
    height: 276px;
    top: 150px;
    left: -50px;
}

.staffMessage figure {
    text-align: center;
    margin-bottom: 60px;
}

.staffMessage p {
    font-size: 17px;
    margin-bottom: 15px;
    font-weight: 500;
}

.staffMessage .btn {
    margin-top: 40px;
}


/* -----------------------------------------------------------
    message
----------------------------------------------------------- */

.coverMessage {
    padding: 100px 0 80px;
    position: relative;
}

.coverMessage h2 {
    margin-bottom: 50px;
}

.coverMessage h3 {
    font-size: 34px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--main-color02);
    margin-bottom: 40px;
}

.coverMessage h3 b {
    font-weight: 700;
    color: var(--main-color01);
}

.coverMessage .msgCom p + p {
    margin-top: 15px;
    line-height: 2;
}

.coverMessage .msgPhoto {
    float: right;
}

.coverMessage .msgPhoto img {
    border-radius: 20px;
    margin: 0 0 40px 40px;
}

.coverMessage .name {
    text-align: right;
    font-size: 20px;
}

.coverMessage .name b {
    font-size: 30px;
    font-weight: 500;
}

/* -----------------------------------------------------------
    topYoutube
----------------------------------------------------------- */
.topYoutube {
    padding: 80px 0 0;
    text-align: center;
}

.topYoutube .inner {
    overflow: visible;
}

.topYoutube .inner::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--main-color02);
    top: -80px;
    left: 0;
}

.topYoutube iframe {
    width: 600px;
    height: 340px;
    background: #ffc981;
    padding: 40px;
    border-radius: 20px;
}

/* -----------------------------------------------------------
    voiceSlider
----------------------------------------------------------- */

.voiceSlider {
    padding: 100px 0;

}

.voiceSlider .slick-track {
    display: flex;
    align-items: stretch;
}

.voiceSlider .slider {
    max-width: 84%;
    min-width: 1180px;
    margin: 40px 0 0 auto;
    position: relative;
    background: var(--sub-color01);
    padding: 80px 0 80px 60px;
    border-radius: 100px 0 0 0;
}

.voiceSlider.full .slider {
    max-width: 100%;
    min-width: 100%;
    padding: 80px 0 80px;
}

.voiceSlider .slider::before {
    content: "";
    position: absolute;
    background: url(./img/voice_balloon.png);
    width: 255px;
    height: 209px;
    top: -160px;
    right: 15%;
}



.voiceSlider li {
    padding: 0 20px;
    height: auto;
    width: 300px;
}

.voiceSlider li.slick-active {
    opacity: 1;
}

.voiceSlider li > a {
    text-decoration: none;
    display: block;
    color: var(--white);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #48566a;
    position: relative;
    height: 100%;
    transition: all 0.3s ease;
    /* box-shadow: rgba(0, 0, 0, 0.2) 0 4px 4px 0; */
    box-shadow: rgba(0, 0, 0, 0.0) 0 4px 4px 0;
    transform: scale(1);
    border-radius: 20px;
}

.voiceSlider li a:hover {
    opacity: 0.85;
}

.voiceSlider picture {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 230px;
    margin: 0 auto;
    border: solid 4px var(--main-color01);
    border-radius: 20px 20px 0 0;
    background: var(--white);
}

.voiceSlider picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.voiceSlider li .title {
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    display: block;
    padding: 15px 15px 10px;
}

.voiceSlider li p:last-of-type {
    margin-bottom: 0;
    text-align: left;
    padding: 0 15px 15px;
}

.voiceSlider li .click {
    position: absolute;
    display: inline-block;
    font-size: 13px;
    background: #48566a;
    padding: 5px 25px 5px 35px;
    border-radius: 0 20px 0 0;
    left: 0;
    bottom: 125px;
}

.voiceSlider li .click::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: solid 2px var(--white);
    border-right: solid 2px var(--white);
    transform: rotate(45deg);
    left: 12px;
    top: 11px;
}

.voiceSlider .slick-prev::before,
.voiceSlider .slick-prev::after,
.voiceSlider .slick-next::before,
.voiceSlider .slick-next::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
}

.voiceSlider .slick-next::before,
.voiceSlider .slick-prev::before {
    width: 70px;
    height: 70px;
    background: var(--main-color02);
    opacity: 1.0;
    border-radius: 100vh;
}

.voiceSlider .slick-next::after,
.voiceSlider .slick-prev::after {
    --mask: url(img/svg_arrow01.svg);
    width: 70px;
    height: 40px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
}

.voiceSlider .slick-prev::after {
    --mask: url(img/svg_arrow03.svg);
}

.voiceSlider .slick-next::after {
    --mask: url(img/svg_arrow01.svg);
}

.voiceSlider .slick-prev {
    left: auto;
    right: 220px;
    bottom: -75px;
    top: auto;
}

.voiceSlider .slick-next {
    right: 130px;
    bottom: -75px;
    top: auto;
}

.voiceSlider .slick-slider .slick-dots {
    position: absolute !important;
    --color: var(--main-color02);
    bottom: -80px;
    right: 320px;
    z-index: 100;
    line-height: 1;
    display: flex;
    padding: 0;
    list-style: none;
    width: auto;
}

.voiceSlider .slick-slider .slick-dots li {
    position: relative;
    display: block;
    margin: 0 4px !important;
    padding: 0 !important;
    width: 60px !important;
    height: 6px !important;
    cursor: pointer;
}

.voiceSlider .slick-dots li button {
    position: relative;
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.voiceSlider .slick-slider .slick-dots li button::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 60px;
    height: 5px;
    background: var(--main-color02) !important;
    opacity: 1.0 !important;
    content: '' !important;
    text-align: center;
    font-size: 6px;
    line-height: 20px;
}

.voiceSlider .slick-dots li.slick-active button::before {
    opacity: 1 !important;
    background: var(--main-color02) !important;
}

.voiceSlider .btn {
    margin-left: 80px;
}

.voiceSlider.full .btn {
    margin-left: 0;
}

/* -----------------------------------------------------------
    cover
----------------------------------------------------------- */
.coverNews {
    margin: 0 0 40px;
}

.coverNews > .inner {
    display: flex;
    gap: 0 120px;
}

.coverNews > .inner::before {
    position: absolute;
    inset: 0;
    margin: auto;
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background: #d7d7d7;
    pointer-events: none;
}

.coverNews > .inner > * {
    flex: 1;
}

.coverNewsInq .inBox {
    display: grid;
    grid-template-areas:
        "h2 list1"
        "h2 table";
}

.coverNewsInfo .inBox {
    display: grid;
    grid-template-areas:
        "h2 list2"
        "h2 button";
}

.coverNews h2 {
    writing-mode: vertical-rl;
    color: #070a39;
    font-size: 30px;
    font-weight: 700;
    margin-right: 25px;
    grid-area: h2;
}

.coverNews h2::before {
    display: inline-block;
    content: "";
    width: 2px;
    height: 40px;
    background: currentColor;
    margin-bottom: 30px;
}

.coverNewsList time {
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
    line-height: 1;
}

.coverNewsList h3 {
    font-size: 16px;
    font-weight: 700;
}

.coverNewsList p {
    font-size: 16px;
}

.coverNewsList {
    grid-area: list;
    padding: 25px 25px 25px 35px;
    background: #f5f5f5;
    max-height: 300px;
    min-height: auto;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #000000 #eaeaea;
    margin-top: 70px;
    margin-bottom: 30px;
}

.coverNewsInq .coverNewsList {
    grid-area: list1;
    max-height: 330px;
}

.coverNewsInfo .coverNewsList {
    grid-area: list2;
    max-height: 400px;
}

.coverNewsList::-webkit-scrollbar {
    width: 12px;
}

.coverNewsList::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-radius: 5px;
}

.coverNewsList::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 5px;
}

.coverNewsList ul {
    display: block;
}

.coverNewsList li {
    display: block;
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.coverNewsList li a {
    color: var(--body-text-color);
    display: block;
    position: relative;
    text-decoration: none;
    transition: 0.3s ease;
    z-index: 1;
}

.coverNewsList li a::before,
.coverNewsList li a::after {
    content: "";
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
}

.coverNewsList li a::before {
    background: #f5f5f5;
    z-index: -2;
}

.coverNewsList li a::after {
    /* background: var(--sub-color02); */
    background: url(img/bg_pattern02.jpg) repeat;
    z-index: -1;
    transition: 0.3s ease;
    opacity: 0;
    mix-blend-mode: multiply;
}

.coverNewsList li a:hover::after {
    opacity: 1;
}

.coverNewsList li a:hover {
    color: var(--main-color02);
}

.coverNews .btn {
    grid-area: button;
}

table.coverNewsInqTbl {
    border: 0;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #d7d7d7;
    margin-bottom: 60px;
}

table.coverNewsInqTbl td,
table.coverNewsInqTbl th {
    text-align: center;
    vertical-align: center;
}

table.coverNewsInqTbl tr:last-of-type th,
table.coverNewsInqTbl tr:last-of-type td {
    border-bottom: 0;
}

table.coverNewsInqTbl th {
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
    background: var(--main-color02);
    border-bottom: 1px solid var(--white);
    padding: 12px 30px 13px;
}

table.coverNewsInqTbl td {
    font-size: 20px;
    font-weight: 500;
    padding: 5px 35px;
    border-bottom: 1px solid #d7d7d7;
}

table.coverNewsInqTbl span, table.coverNewsInqTbl b {
    line-height: 1;
}

table.coverNewsInqTbl span {
    display: inline-block;
}

table.coverNewsInqTbl b {
    font-size: 36px;
    font-weight: 500;
    /* margin-top: -16px; */
    margin-left: 0.5rem;
    margin-right: 0.25rem;
    display: inline-block;
    transform: translateY(5%);
}

table.coverNewsInqTbl small {
    font-size: 20px;
    font-weight: 500;
    display: inline-block;
}

.coverMovie {
    text-align: center;
    position: relative;
    background: transparent;
    z-index: 1;
}

.coverMovie > * {
    padding: 107px 0 100px;
}

.coverMovie::before {
    content: "";
    position: absolute;
    inset: 0 0 -1px auto;
    margin: auto 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--background, #000);
    --h: var(--triangle_height);
    clip-path: polygon(50% 0%, 100% var(--h), 100% 100%, 0 100%, 0% var(--h));
    z-index: -1;
}

.coverMovie video {
    width: 860px;
    height: auto;
    margin: 60px auto 0;
}

.coverAppeal {
    position: relative;
}

.coverAppeal::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: left top url(./img/bg_image02.jpg) no-repeat;
    pointer-events: none;
    /* mix-blend-mode: luminosity; */
}

.coverAppeal::after {
    content: "";
    display: block;
    position: absolute;
    inset: auto 0 0;
    margin: auto auto 0;
    width: 100%;
    height: 150px;
    background: repeating-linear-gradient(-45deg, #22254f, #22254f 2px, #0b0e3d 0, #0b0e3d 6px);
    pointer-events: none;
}

.coverAppeal h2 {
    margin: 0 auto;
    padding: 185px 0 335px;
    width: fit-content;
    position: relative;
}

.coverAppeal h2 img {
    display: block;
    max-width: 100%;
    height: auto;
}

.coverAppeal .imgLayer {
    position: absolute;
    inset: auto 0 -1px;
    margin: auto auto 0;
    display: block;
    max-width: 100%;
    height: auto;
    z-index: 20;
}

.coverAppeal dl {
    position: absolute;
    inset: 0;
    margin: auto;
    overflow: visible;
    z-index: 10;
}

.coverAppeal dl div {
    position: absolute;
    width: fit-content;
    height: fit-content;
}

.coverAppeal dl div:nth-of-type(1) {
    top: 0;
    left: 0;
    bottom: 40px;
    margin: auto 0;
    transform: translateY(-100%);
}

.coverAppeal dl div:nth-of-type(2) {
    top: 0;
    left: 100px;
    right: 0;
    margin: 0 auto;
    transform: translateY(-30px);
}

.coverAppeal dl div:nth-of-type(2) dd::before,
.coverAppeal dl div:nth-of-type(3) dd::before,
.coverAppeal dl div:nth-of-type(4) dd::before {
    transform: translateY(95%) scaleX(-1);
}

.coverAppeal dl div:nth-of-type(3) {
    top: 0;
    right: 0;
    bottom: 60px;
    margin: auto 0;
    transform: translateY(-100%);
}

.coverAppeal dl div:nth-of-type(4) {
    right: 0;
    bottom: 10px;
    margin: 0;
    transform: translateY(-100%);
}

.coverAppeal dl div:nth-of-type(5) {
    left: 10px;
    bottom: 40px;
    margin: 0;
    transform: translateY(-100%);
}

.coverAppeal dl b {
    /* text-decoration: underline;
    text-underline-offset: -2px;
    text-decoration-thickness: 6px;
    text-decoration-color: var(--red); */
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 2px, var(--red) 2px, var(--red) 8px, rgba(255, 255, 255, 0) 8px);
}

.coverAppeal dt,
.coverAppeal dd {
    color: var(--white);
    font-size: 16px;
    display: block;
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
}

.coverAppeal dt::before {
    position: absolute;
    content: "？";
    display: block;
    font-weight: 700;
    font-size: 30px;
    background: #9399f2;
    border-radius: 50%;
    line-height: 1;
    inset: 0 auto 0 10px;
    margin: auto 0;
    padding: 3px 4px 5px;
    width: 1em;
    height: 1em;
}


.coverAppeal dt {
    font-weight: 400;
    background: var(--sub-color02);
    border-radius: 6px;
    position: relative;
    padding-left: 60px;
    z-index: 2;
    line-height: 1.25;
    height: 60px;
    display: flex;
    align-items: center;
}

.coverAppeal dd {
    margin: -20px 0 0 20px;
    padding-top: 30px;
    font-weight: 500;
    background: var(--main-color02);
    border-radius: 6px;
    position: relative;
    z-index: 1;
}

.coverAppeal dd::before {
    content: '';
    position: absolute;
    display: block;
    margin: auto auto 0;
    inset: auto 0 1px;
    transform: translateY(100%);
    background: var(--main-color02);
    width: 33px;
    height: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(./img/svg_shape01.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url(./img/svg_shape01.svg);
}





.coverWorks {
    margin: 50px 0;
    /* transform-style: preserve-3d; */
    /* position: relative; */
}

.coverWorks + .coverBlog {
    margin-top: -80px;
    margin-bottom: 100px;
}

.bgPattern02 .coverWorks {
    padding-bottom: 100px;
}

.coverWorks .inner + .tl01 {
    margin-top: 20px
}


/* -----------------------------------------------------------
    coverMenu
----------------------------------------------------------- */
#packRoof,
#packWpack {
    position: relative;
    top: -100px;
    margin-bottom: -100px;
}

#packOther,
#packLeaking {
    margin-top: 100px;
}

#packLeaking {
    margin-bottom: 100px;
}

.coverMenu .planTitle {
    padding: 120px 0;
    text-align: center;
    color: var(--white);
    background-size: cover;
    border-radius: 100px 100px 0 0;
}

#packWall .planTitle {
    background: url(./img/planTitle_wall.png) no-repeat center;
}

#packRoof .planTitle {
    background: url(./img/planTitle_roof.png) no-repeat center;
}

#packWpack .planTitle {
    background: url(./img/planTitle_wpack.png) no-repeat center;
}

#packOther .planTitle {
    background: url(./img/planTitle_other.png) no-repeat center;
}

#packLeaking .planTitle {
    background: url(./img/planTitle_rain.png) no-repeat center;
}

.coverMenu .planTitle .ja {
    font-size: 40px;
    display: block;
}

.coverMenu .planTitle .en {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--en-font-family);
    border-radius: 6px;
    padding: 3px 20px;
    letter-spacing: 0.1em;
}

#packWall .planTitle .en {
    background: var(--main-color02);
}

#packRoof .planTitle .en {
    background: var(--main-color01);
}

#packWpack .planTitle .en {
    background: #e7bba1;
}

#packOther .planTitle .en {
    background: #6f6f6f;
}

#packLeaking .planTitle .en {
    background: #6c9cb8;
}

#packWall .planBox {
    --background: repeating-linear-gradient(-45deg, #b3c1d6 0, #b3c1d6 2px, 0, #aabad1 6px) !important;
    background: var(--background);
    padding-bottom: 200px;
}

#packRoof .planBox {
    --background: repeating-linear-gradient(-45deg, #ffe0b4 0, #ffe0b4 2px, 0, #ffdcac 6px) !important;
    background: var(--background);
    padding-bottom: 200px;
}

.packPrice {
    background: var(--white);
    border: solid 4px var(--main-color01);
    border-radius: 20px;
    text-align: center;
    padding: 40px;
    margin-top: 60px;
}

.packPrice h4 {
    font-weight: 700;
    font-size: 30px;
}

.packPrice h4 span {
    font-size: 40px;
}

.packPrice h4 .main01 {
    color: var(--main-color01);
}

.packPrice h4 .red {
    color: var(--red);
}

.packPrice p small span {
    color: var(--red);
}

.coverMenu .planBox .asterisk {
    margin-top: 5px;
    text-align: right;
}

.menuPlanList {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    gap: 35px;
    margin: 60px 0 0;
    flex-wrap: wrap;
    --color: 255 0 0;
}

#packWpack .menuPlanList {
    gap: 60px;
}

#top .menuPlanList {
    justify-content: center;
}

.menuPlanList > li {
    width: calc((100% - 70px) / 3);
    background: #fff;
    color: var(--body-text-color);
    transition: 0.3s ease;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.0);
    box-sizing: border-box;
    border-radius: 20px;
    border: solid 4px var(--main-color02);
}

#packWpack .menuPlanList > li {
    width: 100%;
}

.menuPlanList > li > a {
    display: block;
    padding: 0;
    color: var(--body-text-color);
    text-decoration: none;
}

.menuPlanList > li .head {
    padding: 20px;
    border-radius: 14px 14px 0 0;
}

#packWpack .menuPlanList > li .head {
    padding: 25px 0 40px;
    border-radius: 14px 14px 0 0;
    background: #6297a9;
}

#packWpack .menuPlanList > li:first-child .head {
    background: #e7bba1;
}

.menuPlanList > li .title {
    text-align: left !important;
    font-size: 30px;
    font-weight: 500;
    color: var(--white);
    line-height: 1.2;
    height: 75px;
    display: flex;
    align-items: center;
}

.menuPlanList > li .title small {
    font-size: 30px;
}

#packWpack .menuPlanList > li .title {
    text-align: center !important;
    font-size: 60px;
    font-weight: 700;
    height: auto;
    display: block;
}

#packWpack .menuPlanList > li .title span {
    display: inline-block;
    font-size: 30px;
    background: #32748a;
    border-radius: 100px;
    padding: 10px 40px;
}

#packWpack .menuPlanList > li:first-child .title span {
    background: #c18765;
}

.menuPlanList > li .sub_title {
    border-radius: 10px;
    background: var(--white);
    padding: 10px 15px;
    margin-top: 20px;
    word-break: break-all;
    height: 82px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#packWall .menuPlanList > li:nth-child(odd) .head {
    background: var(--main-color02);
}

#packWall .menuPlanList > li:nth-child(even) .head {
    background: #475a75;
}

#packRoof .menuPlanList > li:nth-child(odd) .head {
    background: var(--main-color01);
}

#packRoof .menuPlanList > li:nth-child(even) .head {
    background: #ffc16d;
}

.menuPlanList > li .list {
    padding: 0 15px;
}

.menuPlanList > li .list li {
    padding: 15px;
    border-bottom: solid 1px var(--main-color02);
    text-align: center;
    line-height: 1.5;
}

.menuPlanList > li .list li.maker {
    height: 82px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.menuPlanList > li .list li.price {
    line-height: 1;
}

.menuPlanList > li .list li .main01 {
    color: var(--main-color01);
    font-size: 22px;
    font-weight: 700;
}

.menuPlanList > li .btn {
    color: var(--main-color02) !important;
    border: solid 2px var(--main-color02);
    background: var(--white);
    padding: 15px 25px 17px 25px;
    text-align: center;
    margin: 25px auto;
}

.menuPlanList > li:hover .btn {
    color: var(--white) !important;
    border: solid 2px var(--main-color02);
    background: var(--main-color02);
}


.menuPlanList > li .btn::before {
    display: none;
}

.menuPlanList > li .btn::after {
    border-top: solid 2px var(--main-color02);
    border-right: solid 2px var(--main-color02);
}

.menuPlanList > li:hover .btn::after {
    border-top: solid 2px var(--white);
    border-right: solid 2px var(--white);
}

/* 
#top .menuList > li .head {
    flex-direction: column;
} */

.menuPlanList > li.menuListItem02 .flex {
    padding: 60px;
    box-sizing: border-box;
}

.menuPlanList > li.menuListItem02 figure {
    width: 400px;
    height: 260px;
}

.menuPlanList > li.menuListItem02 figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.menuPlanList > li.menuListItem02 figure figcaption .red {
    font-size: 60px;
}

.menuPlanList > li.menuListItem02 figure figcaption .red small {
    font-size: 30px;
}

.menuPlanList > li.menuListItem02 .flex ul {
    width: 540px;
}

.menuPlanList > li.menuListItem02 .flex ul li {
    padding: 25px;
    border-bottom: solid 1px var(--main-color02);
    display: flex;
    align-items: center;
}

.menuPlanList > li.menuListItem02 .flex ul li .listHead {
    width: 200px;
}

.menuPlanList > li.menuListItem02 .flex ul li .main01 {
    font-size: 22px;
    font-weight: 700;
}

.menuPlanList > li.menuListItem02 .flex ul li .main01 span {
    color: var(--main-color01);
}

.menuPlanList > li.menuListItem02 .btn {
    margin: 25px auto 60px;
}

#packOther .otherMain {
    margin: 60px 0;
    text-align: center;
}

#packOther table th,
#packOther table td {
    font-size: 17px;
}

#packOther table th {
    width: 40%;
}

#packOther table th span {
    color: var(--red);
}

#packOther table td {
    color: var(--red);
    font-size: 22px;
}

#packOther table td.textCenter {
    color: var(--body-text-color);
    font-size: 17px;
}

#packOther table td small {
    font-size: 15px;
    color: var(--body-text-color);
}

#packOther .bnr,
#packLeaking .bnr {
    text-align: center;
    margin-top: 60px;
}






.menuPlanList > li.menuListItem03 .flex .head {
    width: calc(100% - 285px);
}

.menuPlanList > li.menuListItem03 .flex picture {
    width: 285px;
    height: 210px;
}

.menuPlanList > li .flex picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menuPlanList > li a:hover .flex picture img {
    opacity: 1 !important;
}

.menuPlanList > li .imgLayer {
    position: absolute;
    display: block;
    right: 10px;
    top: 0;
    transform: translateY(-35px);
    width: 90px;
    height: 90px;
}

.menuPlanList > li > a:hover .imgLayer {
    opacity: 1 !important;
}

.menuPlanList > li .marker {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    padding: 15px 20px;
    line-height: 1.3;
    font-feature-settings: "palt";
}

/* .menuList > li.menuListItem03 .title {
    padding-top: 3px;
    padding-bottom: 3px;
} */

.menuList > li .title + p {
    margin: 5px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
}

/* .menuList > li.menuListItem03 .title + p {
    margin-top: 10px;
} */

.menuList > li .title + p > span {
    display: inline-block;
}

/* .menuList > li.menuListItem03 .stars {
    margin-top: 5px;
} */

.star-rating {
    --w: 40px;
    --h: 32px;
    display: block;
    position: relative;
    /* width: fit-content; */
    /* margin: 0 auto; */
    /* height: var(--w); */
    line-height: 1;

    width: calc(var(--w) * 5);
    height: var(--h);
    background: var(--white);
    -webkit-mask-repeat: repeat;
    -webkit-mask-position: left center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(./img/svg_star.svg);
    mask-repeat: repeat;
    mask-position: left center;
    mask-size: contain;
    mask-image: url(./img/svg_star.svg);
    margin: 5px auto 0;
    padding: 0;
}

.bgWhite > .star-rating {
    background: url(./img/svg_star02.svg) repeat left center;
    background-size: contain;
}

.star-rating::after {
    display: block;
    width: var(--w);
    height: var(--h);
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    margin: auto 0;
    background: url(./img/svg_star.svg) repeat left center;
    background-size: contain;
    /* -webkit-mask-repeat: repeat;
    -webkit-mask-position: left center;
    -webkit-mask-size: contain;
    -webkit-mask-image: ;
    mask-repeat: repeat;
    mask-position: left center;
    mask-size: contain;
    mask-image: url(./img/svg_star.svg); */
}

.star-rating[data-rate='0']::after {
    width: 0;
}

.star-rating[data-rate='1']::after {
    width: var(--w);
}

.star-rating[data-rate='1.5']::after {
    width: calc(var(--w) * 1.5);
}

.star-rating[data-rate='2']::after {
    width: calc(var(--w) * 2);
}

.star-rating[data-rate='2.5']::after {
    width: calc(var(--w) * 2.5);
}

.star-rating[data-rate='3']::after {
    width: calc(var(--w) * 3);
}

.star-rating[data-rate='3.5']::after {
    width: calc(var(--w) * 3.5);
}

.star-rating[data-rate='4']::after {
    width: calc(var(--w) * 4);
}

.star-rating[data-rate='4.5']::after {
    width: calc(var(--w) * 4.5);
}

.star-rating[data-rate='5']::after {
    width: calc(var(--w) * 5);
}

.menuList > li .perprice b {
    display: block;
    color: var(--white);
    background: var(--black);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 1em;
    text-indent: 1em;
}

.menuList > li .perprice dl {
    display: block;
    padding: 20px 20px 0;
    color: var(--body-text-color);
    background: var(--white);
}

.menuList > li .perprice dl > div {
    border-bottom: 1px dotted var(--black);
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.menuList > li .perprice dl > div dt {
    width: 50px;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
}

.menuList > li .perprice dl > div dd {
    text-align: right;
    flex: auto;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.44;
}

.menuList > li .perprice dl > div dd small {
    font-size: 14px;
    font-weight: 400;
}

.menuList > li .btnSm {
    margin-top: 17px;
}

/* .menuList > li .packCatch { */
.packCatch {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
    padding: 15px;
    width: fit-content;
}

.serviceMenu-main .packCatch {
    padding-left: 0;
    padding-right: 0;
}

/* .menuList > li .packCatch li { */
.packCatch li {
    display: block;
    width: 100%;
    color: var(--white);
    background: var(--red);
    text-align: center;
    padding: 7px 20px;
    box-sizing: border-box;
    line-height: 1;
    font-size: 16px;
    font-weight: 500;
}

/* .menuList > li .priceTxt { */
.priceTxt {
    font-size: 130px;
    font-family: var(--en-font-family);
    font-weight: 900;
    /* font-weight: var(--en-font-family-weight); */
    color: var(--red);
    letter-spacing: -0.02em;
    line-height: 0.9 !important;
    display: flex;
    align-items: flex-end;
    margin-left: auto;
    padding: 15px 15px 0;
}

.serviceMenu-main .priceTxt {
    padding-right: 0;
    text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px;
}

.menuList > li .priceTxt {
    font-size: 100px;
}

/* .menuList > li .priceTxt small { */
.priceTxt small {
    font-size: 40px;
    font-weight: bold;
}

/* .menuList > li .priceTxt span { */
.priceTxt span {
    font-size: 110px;
}

.menuList > li .priceTxt span {
    font-size: 80px;
}

/* .menuList > li .priceTxt span.unitTxt { */
.priceTxt span.unitTxt {
    font-family: var(--base-font-family);
    /* font-size: 40px; */
    font-size: 0.4em;
    line-height: 0.9;
    font-weight: 900;
    /* width: 42px; */
    padding-bottom: .3em;
    display: inline;
    line-height: 1;
}

.menuList > li .priceTxt span.unitTxt {
    /* font-size: 40px; */
    font-size: 0.4em;
}

/* .menuList > li .priceTxt small { */
.priceTxt small {
    font-family: var(--base-font-family);
    font-size: 30px;
    line-height: 0.9;
    font-weight: 900;
    padding-bottom: 12px;
    display: inline;
    line-height: 1;
}

.txts {
    text-align: left;
    font-size: 11px;
    line-height: 1.545;
}

.serviceMenu-summary .txts {
    padding-bottom: 15px;
}

.menuList > li .txts {
    padding: 0 15px 15px;
}

.inner:has(.menuListBanner) {
    overflow: visible;
}

.menuListBanner {
    list-style: none;
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 40px;
    margin: 90px 0 0;
}

.menuListBanner li {
    width: calc((100% - 80px) / 3);
    background: var(--white);
    /* background: green; */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
    /* filter: drop-shadow(30px 10px 4px #4444dd); */
    transition: 0.3s ease;
    /* box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.0); */
    transform: scale(1.00);
}

.menuListBanner li:hover {
    transform: scale(1.05);
    /* box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5); */
}

.menuListBanner li a .imgLayer {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: 50%;
    object-fit: cover;
    object-position: center top;
    --s: 150px;
    --b: 150px;
    --mask: radial-gradient(50% 50% at right bottom, hsl(0, 0%, 0%) 0%,
            hsla(0, 0%, 0%, 0.987) calc(0.081 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.951) calc(0.155 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.896) calc(0.225 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.825) calc(0.29 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.741) calc(0.353 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.648) calc(0.412 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.55) calc(0.471 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.45) calc(0.529 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.352) calc(0.588 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.259) calc(0.647 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.175) calc(0.71 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.104) calc(0.775 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.049) calc(0.845 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.013) calc(0.919 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0) calc(1 * var(--s)));
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    transform: translateZ(-1px);
    /* z-index: 1; */
}

.menuListBanner li a {
    display: block;
    text-decoration: none;
    text-align: center;
    color: var(--body-text-color);
    position: relative;
    transform-style: preserve-3d;
}

.menuListBanner li .title {
    color: var(--white);
    background: var(--main-color02);
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
    padding: 13px;
    box-sizing: border-box;
}

.menuListBanner li b {
    font-size: 26px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.menuListBanner li .price {
    font-size: 100px;
    font-weight: 700;
    line-height: 1;
    padding: 0 15px 15px;
}

.menuListBanner li .price .number {
    font-size: 100px;
    font-weight: 700;
    padding: 0 15px;
}

.menuListBanner li .price .unit {
    font-size: 28px;
    font-weight: 900;
    font-family: var(--base-font-family);
    width: 1em;
}

.menuListBanner li .price small,
.menuListBanner li .price p {
    line-height: 1.5;
    font-family: var(--base-font-family);
}

.menuListBanner li .price small {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-top: -5px;
    margin-bottom: 20px;
    text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

.menuListBanner li p:last-of-type {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

.layoutF {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.layoutF p {
    margin-bottom: 0;
}

.layoutF > .layout02,
.layoutF > .layout03 {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}

.layoutF > .layout02 + .layout03,
.layoutF > .layout03 + .layout02 {
    margin-top: 50px;
}

.layoutF > .layout02 {
    background: #fff;
    width: 100%;
}

.layoutF > .layout02 .menuSmallTxt dl {
    color: #000;
    display: grid;
    gap: 5px;
    padding: 20px;
    grid-template-columns: repeat(5, 1fr);
}

.layoutF > .layout02 .menuSmallTxt dl > div {
    display: flex;
    /* padding: 0 10px; */
    flex-direction: column;
    line-height: 1;
}

.layoutF > .layout02 .menuSmallTxt dl > div dt {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.1em;
    background: #eee;
    padding: 5px;
}

.layoutF > .layout02 .menuSmallTxt .priceTxt {
    font-size: 38px;
    margin: 0;
    align-items: flex-end;
    align-self: center;
    padding-top: 10px;
}

.layoutF > .layout02 .menuSmallTxt .priceTxt span.unitTxt {
    /* padding-bottom: 0.5em; */
    margin-top: 0.1em;
    margin-left: 2px;
}

.layoutF > .layout02 .menuSmallTxt .priceTxt span.unitTxt .tax {
    display: block;
    font-size: 11px;
    color: #000;
    font-weight: normal;
    padding-top: 2px;
    /* margin-left: 0.5em; */
}

/* shopAccess */
.shopAccess {
    position: relative;
    top: -100px;
    margin-bottom: -100px;
    padding: 200px 0 100px;
    border-radius: 0 0 0 100px;
}

.shopAccess ul li iframe {
    width: 100%;
    height: 450px;
    border-radius: 20px;
}

.shopAccess .flex {
    gap: 30px;
    margin-top: 30px;
}

.shopAccess figure {
    width: 370px;
}

.shopAccess figure img {
    width: 100%;
}

.shopAccess .table {
    width: 700px;
}

.shopAccess .table h4 {
    padding: 15px;
    background: #e6e6e6;
    text-align: center;
    font-weight: 700;
    border-radius: 20px 20px 0 0;
    border-top: solid 1px #d0d0d0;
    border-left: solid 1px #d0d0d0;
    border-right: solid 1px #d0d0d0;
}

.shopAccess .table dl {
    display: flex;
    flex-wrap: wrap;
    border-radius: 0 0 20px 20px;
    border-bottom: solid 1px #d0d0d0;
    border-left: solid 1px #d0d0d0;
    border-right: solid 1px #d0d0d0;
}

.shopAccess .table dt,
.shopAccess .table dd {
    padding: 15px;
    box-sizing: border-box;
    border-top: solid 1px #d0d0d0;
}

.shopAccess .table dt {
    width: 30%;
    background: #f1f1f1;
    border-right: solid 1px #d0d0d0;
}

.shopAccess .table dt:last-of-type {
    border-radius: 0 0 0 20px;
}

.shopAccess .table dd {
    width: 70%;
    background: var(--white);
}

.shopAccess .table dd:last-of-type {
    border-radius: 0 0 20px 0;
}

.shopAccess .table dd a {
    color: var(--body-text-color);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #d8dadd;
    text-underline-offset: 2px;

}

/* -----------------------------------------------------------
    showroom
----------------------------------------------------------- */
#showroom {
    position: relative;
    background-image: url(./img/bg_showroomTitle01.png), url(./img/bg_showroomTitle02.png);
    background-repeat: no-repeat;
    background-position: left top 420px, right top 740px;
    background-size: 650px, 750px;
}

.showroomTitle h2 {
    margin-bottom: 60px;
}

.showroomTitle .tl02 {
    margin-bottom: 25px;
}

.showroomTitle .mainv {
    margin-bottom: 40px;
}

.showroomTitle ul {
    margin-top: 40px;
}

.showroomMerit {
    position: relative;
    z-index: 1;
    margin-top: 100px;
    padding: 120px 0 100px;
}

.showroomMerit .inner {
    overflow: initial;
}

.showroomMerit ul.flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 60px;
}

.showroomMerit li {
    position: relative;
    width: 520px;
    padding: 60px 30px 30px;
    background: var(--main-color02);
    box-sizing: border-box;
    border-radius: 20px;
    margin-top: 110px;
}

.showroomMerit li::before {
    content: "";
    position: absolute;
    width: 137px;
    height: 125px;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    z-index: 0;
}

.showroomMerit li:nth-child(1)::before {
    background-image: url(./img/showroom_balloon01.png);
}

.showroomMerit li:nth-child(2)::before {
    background-image: url(./img/showroom_balloon02.png);
}

.showroomMerit li:nth-child(3)::before {
    background-image: url(./img/showroom_balloon03.png);
}

.showroomMerit li img {
    width: 100%;
}

.showroomMerit li > div {
    margin-top: 20px;
    background: var(--white);
    border-radius: 10px;
    padding: 30px;
    height: 350px;
}

.showroomMerit li h3 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 15px;
}

.showroomMerit li h3 span {
    color: var(--main-color01);
}

.showroomMerit li a {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    padding-left: 32px;
    color: var(--body-text-color);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #d8dadd;
    text-underline-offset: 2px;
}

.showroomMerit li a::before,
.showroomMerit li a::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
    right: -20px;
}

.showroomMerit li a::before {
    width: 26px;
    height: 26px;
    background: var(--main-color01);
    opacity: 1.0;
    border-radius: 100vh;
}

.showroomMerit li a::after {
    --mask: url(img/svg_arrow01.svg);
    width: 26px;
    height: 16px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
}

.featureBox {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: var(--background, var(--main-color02));
    padding: 20px;
}

.featureBox > * {
    flex: 1;
    background: var(--white);
    padding: 10px;
}

.featureBox dt {
    font-size: 32px;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    background: var(--sub-color02) url(img/bg_pattern01_lt.jpg) repeat;
    line-height: 1;
    padding: 22px 20px 26px;
}

.featureBox dd {
    font-size: 16px;
    line-height: 1.875;
    padding: 10px 0 5px;
}

/* -----------------------------------------------------------
    corporate
----------------------------------------------------------- */
#corporate .corpTitle .tl02 {
    margin-bottom: 0;
}

#corporate .corpTitle figure {
    margin: 60px 0 40px;
}

#corporate .corpTitle p {
    font-size: 17px;
    font-weight: 500;
}

#corporate .topYoutube {
    padding-bottom: 90px;
}

#corporate .topYoutube .inner::before {
    display: none;
}

#corporate .supportTxt {
    font-size: 17px;
    font-weight: 500;
    margin-top: 50px;
}

/* -----------------------------------------------------------
    first
----------------------------------------------------------- */
#first .firstTitle .inner {
    overflow: initial;
}

#first .firstTitle .flex {
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    gap: 5px;
    line-height: 1;
}

#first .firstTitle p {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;

}

#first .firstTitle p b {
    color: var(--main-color01);
    font-weight: 700;
}

#first .firstTitle .flex span {
    display: inline-block;
    position: relative;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 17px;
    background: var(--main-color02);
    color: var(--white);
    padding: 0 20px;
    font-weight: 500;
}

#first .firstTitle .flex span::before,
#first .firstTitle .flex span::after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

#first .firstTitle .flex span::before {
    top: 0;
    left: 0;
    border-width: 30px 0px 30px 15px;
    border-color: transparent transparent transparent var(--base-color01);
    border-style: solid;
}

#first .firstTitle .flex span::after {
    top: 0;
    right: 0;
    border-width: 30px 15px 30px 0px;
    border-color: transparent var(--base-color01) transparent transparent;
    border-style: solid;
}

#first .firstWhy p {
    margin-top: 40px;
}

#first .firstPointList {
    position: relative;
    padding: 200px 0 100px;
    top: -100px;
    margin-bottom: -100px;
    border-radius: 0 0 0 100px;
}

#first .first_list {
    margin-top: 60px;
}

#first .first_list ul {
    display: flex;
    justify-content: space-between;
}

#first .first_list li {
    width: 340px;
}

#first .first_list li p {
    box-sizing: border-box;
    height: 110px;
    background: var(--white);
    border-radius: 10px;
    margin-top: 10px;
    padding: 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.75;
}

#first .first_list li p span {
    color: var(--main-color01);
}

#first .first_list > p {
    margin-top: 60px;
    font-size: 17px;
    font-weight: 500;
}

#first .first_point .flex:nth-of-type(1) .innBox h3::before {
    background: url(./img/point_balloon01.png);
    top: -80px;
    right: 0;
}

#first .first_point .flex:nth-of-type(2) .innBox h3::before {
    background: url(./img/point_balloon02.png);
    top: -80px;
    left: 0;
}

#first .first_point .flex:nth-of-type(3) .innBox h3::before {
    background: url(./img/point_balloon03.png);
    top: -80px;
    right: 0;
}

/* -----------------------------------------------------------
    rainleaking
----------------------------------------------------------- */
.rainTitle {
    margin: 100px 0 60px;
}

.rainTitle .tl02 {
    margin-bottom: 25px
}

.rainTitle figure {
    margin-top: 60px;
}

.rainTitle p {
    margin-top: 40px;
}

.rainTitle p:nth-of-type(2) {
    margin-top: 15px;
}

.rainWorries .warning-contents {
    position: relative;
    background: var(--red);
    padding: 50px;
    border-radius: 200px;
    margin-top: 140px;
}

.rainWorries .warning-contents::before {
    content: "";
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    top: -100px;
    --r: 5px;
    width: 35px;
    aspect-ratio: 1 / 2;
    --_g: calc(var(--r) / tan(22.5deg)) left var(--r), #000 98%, #0000 101%;
    -webkit-mask: conic-gradient(from 67.5deg at calc(var(--r) / (3 * sqrt(2) - 4) - 100% / tan(22.5deg)) 50%, #000 45deg, #0000 0) 0 0 / calc(100% - var(--r) / sqrt(2)) no-repeat, radial-gradient(var(--r) at calc(100% - var(--r) * sqrt(2)) 50%, #000 98%, #0000 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g));
    clip-path: polygon(100% 50%, 0 100%, 0 0);
    background: var(--main-color02);
}

.rainWorries .warning-contents::after {
    content: "";
    position: absolute;
    width: 115px;
    height: 105px;
    background: url(./img/ico_warning.png) no-repeat;
    left: -40px;
    top: -10px;
}

.rainWorries .warning-contents p {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.4;
}

.rainWorries .warning-contents small {
    display: block;
    font-size: 26px;
    margin-bottom: 15px;
}

.rainWorries .warning-contents p span {
    color: #ffe4a2;
}

.rainWorries .warning-list {
    margin-top: 60px;
}

.rainWorries .warning-list h3 {
    margin-bottom: 25px;
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color: var(--main-color02);
}

.rainWorries .warning-list h3 span {
    color: var(--main-color01);
}

.rainWorries .warning-list p {
    margin-top: 40px;
}

.rainWorries .ranking {
    margin-top: 60px;
    padding: 60px;
    border: solid 6px var(--main-color02);
    background: var(--white);
    border-radius: 20px;
    gap: 35px;
}

.rainWorries .ranking h4 {
    font-size: 36px;
    font-weight: 700;
    color: var(--main-color02);
    line-height: 1.25;
}

.rainWorries .ranking h4 span {
    color: var(--main-color01);
}

.rainWorries .ranking ul {
    margin: 30px 0;
    font-size: 20px;
    color: var(--red);
}

.rainOrigin .results ul {
    margin-top: 40px;
}

.rainOrigin .merit {
    margin-top: 60px;
    border: solid 6px var(--main-color01);
    border-radius: 20px;
    background: var(--white);
}

.rainOrigin .merit h4 {
    text-align: center;
    background: var(--main-color01);
    color: var(--white);
    font-size: 34px;
    font-weight: 700;
    padding: 5px;
}

.rainOrigin .merit .flex {
    margin: 55px;
    justify-content: flex-start;
}

.rainOrigin .merit li {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
}

.rainOrigin .merit li span {
    color: var(--red);
}

.rainOrigin .merit li::before {
    color: var(--main-color02);
    padding-right: 7px;
    font-size: 26px;
}

.rainOrigin .merit li:nth-child(1)::before {
    content: "❶";
}

.rainOrigin .merit li:nth-child(2)::before {
    content: "❷";
}

.rainOrigin .merit li:nth-child(3)::before {
    content: "❸";
}

.rainPoint {
    margin-top: 100px;
    border-radius: 100px;
    padding: 120px 0;
}

#rainleaking .first_point .flex {
    margin-top: 120px;
}

#rainleaking .first_point .flex:nth-of-type(1) .innBox h3::before {
    background: url(./img/rain_balloon01.png);
    top: -80px;
    right: 0;
}

#rainleaking .first_point .flex:nth-of-type(2) .innBox h3::before {
    background: url(./img/rain_balloon02.png);
    top: -80px;
    left: 0;
}

#rainleaking .first_point .flex:nth-of-type(3) .innBox h3::before {
    background: url(./img/rain_balloon03.png);
    top: -80px;
    right: 0;
}

#diagnosis .first_point .flex:nth-of-type(1) .innBox h3::before {
    background: url(./img/diagnosis_balloon01.png);
    top: -80px;
    right: 0;
}

#diagnosis .first_point .flex:nth-of-type(2) .innBox h3::before {
    background: url(./img/diagnosis_balloon02.png);
    top: -80px;
    left: 0;
}

#diagnosis .first_point .flex:nth-of-type(3) .innBox h3::before {
    background: url(./img/diagnosis_balloon03.png);
    top: -80px;
    right: 0;
}

.rainMenu {
    padding: 100px 0;
}

.rainMenu .flex,
#packLeaking .flex {
    flex-wrap: wrap;
    margin-top: 60px;
}

.rainMenu li,
#packLeaking li {
    width: 340px;
    display: block;
    border: solid 4px var(--main-color02);
    background: var(--white);
    border-radius: 20px;
    color: var(--body-text-color);
    padding: 27px;
    box-sizing: border-box;
}

.rainMenu li .head figure,
#packLeaking li .head figure {
    margin: 0;
}

.rainMenu li .head img,
#packLeaking li .head img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
}

.rainMenu li .head h3,
#packLeaking li .head h3 {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--main-color02);
    border-bottom: dotted 3px var(--main-color02);
    padding: 15px 0 5px;
}

.rainMenu li .desc,
#packLeaking li .desc {
    margin-top: 10px;
}

.rainMenu li .komi,
#packLeaking li .komi {
    text-align: center;
    margin-top: 10px;
}

.rainMenu li .komi span,
#packLeaking li .komi span {
    color: var(--white);
    font-size: 15px;
    background: var(--main-color01);
    border-radius: 20px;
    padding: 3px 15px;
}

.rainMenu li .price,
#packLeaking li .price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.rainMenu li .inTax,
#packLeaking li .inTax {
    font-size: 15px;
    background: #ebebeb;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
}

.rainMenu li .red,
#packLeaking li .red {
    color: var(--red);
    font-size: 44px;
    font-weight: 700;
    font-family: var(--en-font-family);
}

.rainMenu li .red small,
#packLeaking li .red small {
    font-size: 20px;
}

/* -----------------------------------------------------------
    voice
----------------------------------------------------------- */
.score-box {
    width: 260px;
}

.score-box .score-ttl {
    font-size: 24px;
    font-weight: 500;
    color: var(--white);
    background: var(--sub-color02);
    margin-bottom: 1.5em;
    padding: .2em .5em;
    text-align: center;
}

.score-box .score-txt {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: 1em;
    line-height: 1;
    /* color: var(--red); */
    color: var(--main-color01);
    /* font-family: var(--en-font-family); */
}

.score-box .score-txt .score-num {
    font-family: var(--numberFont);
    font-weight: 700;
    font-size: 110px;
    line-height: 1;
}

/* #voice .dataTable {
    width: calc(100% - 300px);
} */

.dataTable {
    border: solid 1px #d0d0d0 !important;
    border-radius: 20px;
}

.dataTable table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0 !important;

}

.dataTable table th,
.dataTable table td {
    padding: 15px 20px;
    font-weight: 500;
    font-size: 20px;
}

.dataTable table th.textCenter,
.dataTable table td.textCenter {
    display: table-cell;
    font-weight: 700;
    background: #e6e6e6;
}

.dataTable table th {
    /* white-space: nowrap; */
    width: 30%;
    max-width: 50%;
    text-align: left;
    background-color: #f1f1f1;
    border-bottom: solid 1px #d0d0d0;
    border-right: solid 1px #d0d0d0;
}

.dataTable table td {
    /* width: 70%; */
    border-bottom: solid 1px #d0d0d0;
    background: var(--white);
}

.dataTable table td span {
    color: var(--red);
}

.dataTable table tr:last-of-type th,
.dataTable table tr:last-of-type td {
    border-bottom: 0;
}

.dataTable table tr:first-of-type th {
    border-radius: 20px 0 0 0;
}

.dataTable table tr:first-of-type td {
    border-radius: 0 20px 0 0;
}

.dataTable table tr:last-of-type th {
    border-radius: 0 0 0 20px;
}

.dataTable table tr:last-of-type td {
    border-radius: 0 0 20px 0;
}

/*お客様の声アーカイブ*/

.voice-catch {
    font-size: 26px;
    margin-bottom: 50px;
    text-align: center;
    color: var(--white);
    background-color: var(--main-color01);
    border: 10px solid var(--main-color01);
    line-height: 1;
    padding: 10px;
}

.voice-catch .txtL {
    font-size: 36px;
}

.voice-count {
    display: inline-block;
    margin: 0 .2em;
    font-size: 80px;
    font-weight: 700;
    font-family: var(--en-font-family);
}


.voice-youtube {
    display: flex;
    gap: 20px;
}


.voice-archive .voice-info {
    text-align: left;
    padding: 0;
}

.event-info {
    background: var(--main-color01);
    color: var(--white);
    font-weight: 700;
    /* color: var(--white); */
    padding: 5px 10px;
    border-width: 3px;
    border-style: solid;
    border-image-source: linear-gradient(0deg, #c79c17 0%, #edc54c 16%, #f9e295 35%, #f9e295 67%, #ecc44b 85%, #c79c18);
    border-image-slice: 1;
}

.post .event-info {
    margin: 25px 0;
}

.event-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
}

.eventimg-list {
    display: flex;
    justify-content: space-around;
}

.eventimg-list .eventimg_item {
    background: #f0f0f0;
    padding: 0;
    margin: 0;
    width: calc(50% - 20px);
}

/* .eventimg-list .eventimg_item::before {
    content: '';
    width: 100%;
    height: inherit;
    background: none;
    border-radius: 0;
    display: block;
    padding-top: 70%;
    position: relative;
    top: inherit;
} */

.eventimg-list .eventimg_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .wysiwyg td .cats > a:hover {
    background: #d7d7d7;
} */


.voice-staff {
    margin-bottom: 50px;
    overflow: hidden;
    position: relative;
}

.voice-staff_thumb {
    background: var(--white);
    box-sizing: border-box;
    float: left;
    margin-right: 40px;
    position: relative;
    width: 340px;
}

.voice-staff_thumb::before {
    content: '';
    display: block;
    padding-top: 100%;
}

.voice-staff_thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.voice-staff .staffName {
    margin-bottom: 1em;
    font-size: 18px;
}

.voicephotoList {
    text-align: center;
    margin-bottom: 50px;
}

.voicephotoList .voice-photo_item {
    background: #f7f7f7;
    display: block;
    text-align: center;
    padding: 0;
    position: relative;
    margin: 0 0 20px;
    box-sizing: border-box;
    overflow: hidden;
}

/* .voicephotoList .voice-photo_item::before {
    content: '';
    display: block;
    padding-top: 60%;
    position: relative;
    top: inherit;
    left: inherit;
    margin: auto;
    background: none;
    border-radius: 0;
    width: auto;
    height: auto;
} */

.voice-photo_item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 5 / 3;
    /* aspect-ratio: 3 / 4; */
}

.voicephotoList li .imgLayer {
    position: absolute;
    bottom: 5px;
    right: 5px;
    transform: none;
    top: inherit;
    left: inherit;
    width: auto;
    height: auto;
}



/* -----------------------------------------------------------
 menu
-----------------------------------------------------------   */
.menuTitle .tl02 {
    margin-bottom: 0;
}

.menuTitle p {
    margin-top: 40px;
}

.service-bnr {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.service-list {
    margin-top: 60px;
    display: flex;
    gap: 20px 55px;
    flex-wrap: wrap;
}

.service-list li {
    width: 330px;
    box-sizing: border-box;
}

.service-list li a {
    display: block;
    position: relative;
    padding: 25px 0 25px 75px;
    border-bottom: solid 2px var(--main-color02);
    color: var(--body-text-color);
}

.service-list li:nth-child(6) a {
    padding: 23px 0 23px 40px;
    font-size: 20px;
    font-weight: 700;
    border-bottom: none;
    border-radius: 10px;
    background: url(./img/bg_service-list06.png) no-repeat center;
    background-size: cover;
    color: var(--white);
}

.service-list li a:hover {
    border-bottom: solid 2px var(--main-color01);
}

.service-list li:nth-child(6) a:hover {
    border-bottom: none;
}

.service-list li a::before,
.service-list li a::after {
    content: "";
    position: absolute;
}

.service-list li a::before {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    left: 0;
    top: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.service-list li:nth-child(1) a::before {
    background-image: url(./img/service-list01.png);
}

.service-list li:nth-child(2) a::before {
    background-image: url(./img/service-list02.png);
}

.service-list li:nth-child(3) a::before {
    background-image: url(./img/service-list03.png);
}

.service-list li:nth-child(4) a::before {
    background-image: url(./img/service-list04.png);
}

.service-list li:nth-child(5) a::before {
    background-image: url(./img/service-list05.png);
}

.service-list li:nth-child(6) a::before {
    display: none;
}

.service-list li a::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: solid 2px var(--main-color02);
    border-right: solid 2px var(--main-color02);
    right: 20px;
    top: 30px;
    transform: rotate(135deg);
}

.service-list li a:hover::after {
    border-top: solid 2px var(--main-color01);
    border-right: solid 2px var(--main-color01);
}

.service-list li:nth-child(6) a::after {
    border-top: solid 2px var(--white);
    border-right: solid 2px var(--white);
    right: 20px;
    top: 35px;
    transform: rotate(45deg);
}

.service-list li:nth-child(6) a:hover::after {
    border-top: solid 2px var(--white);
    border-right: solid 2px var(--white);
}

/* -----------------------------------------------------------
 staff
-----------------------------------------------------------   */
#staff .tl02 {
    margin-bottom: 20px;
}

/* -----------------------------------------------------------
 .archiveList
-----------------------------------------------------------   */
.archiveList {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.archiveList + .mb-lg .diagnosis-bnr,
.archiveList + .diagnosis-bnr  {
	margin-top: 60px;
}

.archiveList.staffList {
    margin-bottom: 100px;
}

.archiveList li {
    width: 340px;
    background: var(--white);
    box-sizing: border-box;
    border: solid 4px var(--main-color02);
    border-radius: 20px;
}

.archiveList.voiceList li {
    background: var(--main-color02);
    border: none;
}

.archiveList li a {
    position: relative;
    display: block;
    color: var(--body-text-color);
}

.archiveList.staffList li a {
    padding: 30px;
    text-align: center;
    line-height: 1;
}

.archiveList.voiceList li a {
    color: var(--white);
}

.archiveList .mainThumb img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    border-radius: 15px 15px 0 0;
    border-bottom: solid 4px var(--main-color02);
}

.archiveList.staffList .staffPict img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.archiveList.voiceList .mainThumb img {
    border: solid 4px var(--main-color01);
    box-sizing: border-box;
}

.archiveList .overflowH {
    padding: 25px;
    line-height: 1;
}

.archiveList .archive-ttl {
    color: var(--main-color02);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: dotted 2px var(--main-color02);
}

.archiveList.workList .archive-ttl {
    border-bottom: solid 2px var(--main-color02);
}

.archiveList.voiceList .archive-ttl {
    color: var(--white);
    border-bottom: solid 2px var(--white);
    text-align: center;
}

.archiveList .contTxt {
    line-height: 1.6;
    font-size: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: solid 2px var(--main-color02);
}

.archiveList.voiceList .contTxt {
    padding-bottom: 0;
}

.archiveList .cats {
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: solid 2px var(--main-color02);
}

.archiveList.workList .cats {
    padding-bottom: 0;
    border-bottom: none;
}

.archiveList time {
    display: block;
    text-align: right;
    font-size: 15px;
    font-weight: 400;
}

.archiveList .click {
    position: absolute;
    left: 0;
    top: 200px;
    display: inline-block;
    padding: 15px 25px 15px 40px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0 20px 0 0;
    background: var(--white);
}

.archiveList.voiceList .click {
    background: var(--main-color02);
}

.archiveList .click::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: solid 2px var(--body-text-color);
    border-right: solid 2px var(--body-text-color);
    transform: rotate(45deg);
    left: 15px;
    top: 18px;
}

.archiveList.voiceList .click::before {
    border-top: solid 2px var(--white);
    border-right: solid 2px var(--white);
}

.archiveList.staffList .positionTxt {
    margin-top: 15px;
}

.archiveList.staffList .positionTxt span {
    display: inline-block;
    background: var(--main-color02);
    color: var(--white);
    padding: 10px 25px;
}

.archiveList.staffList .staffName {
    margin-top: 15px;
    font-size: 30px;
    color: var(--main-color02);
}

.archiveList.staffList .click02 {
    margin-top: 20px;
    position: relative;
    font-size: 15px;
    display: inline-block;
    border-bottom: solid 2px var(--main-color01);
    padding: 0 25px 5px 0;
}

.archiveList.staffList .click02::after {
    content: "+";
    position: absolute;
    font-weight: 700;
    color: var(--main-color01);
    right: 5px;
    top: 0;
}


.cats > * {
    font-size: 15px;
    padding: 6px 15px 8px;
    display: inline-block;
    color: var(--white);
    background: var(--main-color02);
    line-height: 1;
    margin: 5px 10px 05px 0;
    border-radius: 4px;
}

.cats > a {
    color: var(--white);
}

.cats > a:hover,
.cat-item a:hover,
.categrory-box .taxList li a:hover,
.categrory-box .taxList li.current-cat a {
    background: var(--main-color02);
    color: var(--white);
}

h2 + .infoBox {
    margin-top: 50px;
}

.infoBox .cat-item a {
    font-size: 14px;
}

.detailsWrapper {
    padding: 10px 40px;
    margin-bottom: 50px;
}

.category-head {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: var(--main-color02);
}

.categrory-box {
    color: var(--white);
    font-weight: 700;
    text-align: center;
    margin-top: 40px;
}

.category-ttl {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 40px 10px 70px;
    background: var(--main-color02);
    color: var(--white);
    z-index: 1;
    border-radius: 4px;
}

.category-ttl::before {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    background: url(./img/blog_icon.png) no-repeat center;
    background-size: contain;
    left: 30px;
    top: 8px;
}

.categrory-box .taxBG {
    top: -27px;
    margin-bottom: -27px;
    position: relative;
    padding: 50px 0 30px;
    background: #f1f1f1;
    border-top: solid 2px var(--main-color02);
    border-bottom: solid 2px var(--main-color02);
}

.categrory-box .taxList {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.categrory-box .taxList li {
    display: block;
    color: var(--main-color02);
}

.categrory-box .taxList li a {
    font-weight: 500;
    font-size: 15px;
    padding: 10px 12px;
    margin: 0;
    display: inline-block;
    color: var(--main-color02);
    background: var(--white);
    border: solid 1px var(--main-color02);
    border-radius: 4px;
    line-height: 1;
    transition: .7s;
}

.cat-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.cat-item object {
    background: #e5e5e5;
    margin: 0 .5em .2em 0;
    display: inline-block;
}

.cat-item a {
    border-radius: 4px;
    font-size: 15px;
    padding: 8px 12px;
    display: inline-block;
    color: var(--white);
    background: var(--main-color02);
    line-height: 1;
    margin: 10px 10px 10px 0;
}

.cat-item i {
    font-size: 24px;
    margin-right: .5em;
}

.picBox {
    display: flex;
    justify-content: space-between;
    /* flex-direction: row-reverse; */
    flex-direction: row;
    align-items: flex-start;
    margin: 70px 0 50px;
    position: relative;
}

.picBox .photo {
    width: 720px;
    position: relative;
    box-sizing: border-box;
}

.picBox .photo::before {
    content: "";
    position: absolute;
    width: 153px;
    height: 132px;
    background: url(./img/works_after.png) no-repeat;
    background-size: contain;
    top: -30px;
    right: 40px;
    z-index: 1;
}

.picBox .btmPhoto {
    width: 340px;
    position: relative;
    box-sizing: border-box;
}

.picBox .btmPhoto::before {
    content: "";
    position: absolute;
    width: 121px;
    height: 104px;
    background: url(./img/works_before.png) no-repeat;
    background-size: contain;
    bottom: -52px;
    left: 0;
    z-index: 1;
}

.picBox .photo img,
.picBox .btmPhoto img {
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    border: solid 4px var(--main-color02);
    box-sizing: border-box;
}

.picBox .after,
.picBox .before {
    position: absolute;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.picBox .after {
    top: -50px;
    left: 20px;
    background: var(--main-color01);
    z-index: 10;
    font-size: 24px;
    color: var(--white);
    width: 115px;
    height: 115px;
}

.picBox .before {
    top: -40px;
    left: 10px;
    background: #6f6f6f;
    z-index: 10;
    font-size: 16px;
    /* color: var(--body-text-color); */
    color: var(--white);
    width: 78px;
    height: 78px;
}

.works-report_ttl {
    color: var(--main-color02);
    font-size: 18px;
    font-weight: 700;
    margin: .5em 0;
}

.works-report_content {
    margin: 10px 0 0;
}

.works-enquete > .flex .imgLightbox01 {
    flex-shrink: 0;
    width: 33%;
}

.works-enquete > .flex .wysiwyg {
    width: 100%;
}

.works-staff {
    margin-bottom: 50px;
    overflow: hidden;
    position: relative;
}

.works-staff_thumb {
    background: var(--white);
    box-sizing: border-box;
    float: left;
    margin-right: 40px;
    position: relative;
    width: 340px;
}

.works-staff_thumb::before {
    content: '';
    display: block;
    padding-top: 100%;
}

.works-staff_thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.works-staff .staffName {
    margin-bottom: 1em;
    font-size: 18px;
}

.works-report {
    margin-bottom: 80px;
}

.other-com {
    background: #f9f9f9;
    border: var(--sub-color02) solid 2px;
    padding: 30px;
    margin-bottom: 80px;
}

.other-com p {
    margin-bottom: 0;
}

/* -----------------------------------------------------------
    single-voice & single-staff
----------------------------------------------------------- */
.fromName {
    border-top: solid 4px var(--main-color01);
    padding-top: 25px;
    text-align: center;
    margin-bottom: 10px;
}

.fromName span {
    display: inline-block;
    padding: 5px 40px;
    background: var(--main-color02);
    color: var(--white);
    font-weight: 700;
    font-size: 22px;
}

#staff .voiceData {
    margin-top: 60px;
    padding-bottom: 60px;
    border-bottom: solid 2px var(--main-color02);
    align-items: flex-start;
}

#staff h1.tl04 {
    text-align: center;
}

.voiceData figure {
    width: 400px;
    text-align: center;
    font-weight: 700;
    color: var(--main-color02);
}

.voiceData figure:first-of-type {
	margin: 0 auto;
}

.voiceData figure figcaption {
    margin-bottom: 10px;
}

.voiceData figure img {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    border: solid 4px var(--main-color02);
}

#staff .voiceData figure img {
    height: auto;
}

.voiceData .dataTable {
    width: 660px;
}

.voiceData .dataTable table th,
.voiceData .dataTable table td {
    padding: 15px 20px;
    font-weight: 500;
    font-size: 15px;
}

.voiceData .dataTable table th.head {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border-radius: 20px 20px 0 0;
    border-right: none;
    background: #e6e6e6;
}

.voiceData .dataTable table td a,
.worksData .dataTable table td a {
    position: relative;
    display: inline-block;
    line-height: 1;
    margin-right: 5px;
    color: var(--main-color02);
    border: solid 1px var(--main-color02);
    background: var(--white);
    padding: 6px 10px 6px 25px;
    border-radius: 4px;
}

.voiceData .dataTable table td a:hover,
.worksData .dataTable table td a:hover {
    background: var(--main-color02);
    color: var(--white);
}

.voiceData .dataTable table td a::before,
.worksData .dataTable table td a::before {
    content: ">";
    position: absolute;
    left: 10px;
    top: 4px;
    font-weight: 700;
}

.voiceData .dataTable table td span {
    color: var(--body-text-color);
}

.voiceEnq {
    margin-top: 60px;
    padding-top: 60px;
    border-top: solid 2px var(--main-color02);
    text-align: center;
}

.voiceEnq img {
    width: auto;
    max-width: 940px;
}

.voiceSummary {
    border: solid 2px var(--main-color02);
    border-radius: 20px;
    background: var(--white);
    margin-top: 60px;
}

.voiceSummary h3 {
    background: var(--main-color02);
    color: var(--white);
    font-size: 22px;
    text-align: center;
    color: var(--white);
    border-radius: 15px 15px 0 0;
    padding: 10px;
}

.voiceSummary .wysiwyg {
    padding: 40px;
}

.voiceSummary .wysiwyg * {
    margin-bottom: 0 !important;
}

.worksData .dataTable table tr th.head {
    border-radius: 20px 20px 0 0;
    text-align: center;
    font-size: 26px;
    background: #e6e6e6;
    border-right: none;
    font-weight: 700;
}

.worksData .dataTable table th,
.worksData .dataTable table td {
    font-size: 15px;
}

.bnrMitsumori {
    text-align: center;
    margin: 80px 0 40px;
    text-align: center;
}

.single-work_categoryList {
    padding-top: 100px;
    padding-bottom: 100px;
    border-top: solid 2px var(--main-color02);
    border-bottom: solid 2px var(--main-color02);
}

.single-work_categoryList h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--main-color02);
    margin-bottom: 40px;
}

.single-work_categoryList ul {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: dotted 2px var(--main-color02);
    display: flex;
    flex-wrap: wrap;
}

.single-work_categoryList ul:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.single-work_categoryList .cat-item a {
    color: var(--body-text-color);
    border: solid 1px var(--main-color02);
}

.single-work_categoryList .taxList .cat-item a {
    background: #d3e2e7;
}

.single-work_categoryList .areaList .cat-item a {
    background: #fff4e9;
}

.single-work_categoryList .colorList .cat-item a {
    background: #ffffff;
}

/* -----------------------------------------------------------
    .contactForm
----------------------------------------------------------- */
.contactForm {
    padding: 100px 0;
}

.contactForm .inBox {
    margin-top: 60px;
    background: #f1f1f1;
    border: 4px solid var(--main-color02);
    border-radius: 20px;
    padding: 65px;
}

.contactForm .contactTel {
    margin-bottom: 40px;
}

.contactForm .contactTel h3 {
    text-align: center;
}

.contactForm .formBox th,
.contactForm .formBox td {
    padding: 35px;
}

.contactForm .formBox th {
    font-size: 17px;
    font-weight: 500;
    vertical-align: middle;
}

.contactForm .formBox tr:first-of-type th {
    border-radius: 20px 0 0 0;
}

.contactForm .formBox tr:first-of-type td {
    border-radius: 0 20px 0 0;
}

.contactForm .formBox tr:last-of-type td .wpcf7-form-control-wrap {
    width: 40%;
}

.contactForm .formBox tr td.w60 .wpcf7-form-control-wrap {
    width: 60%;
}

.contactForm .check-list {
    background: var(--white);
    padding: 40px;
}

.contactForm .check-list p {
    text-align: center;
    margin-bottom: 20px;
}

.contactForm .check-list ul {
    font-size: 15px;
}

.contactForm .check-list li {
    list-style: disc;
    list-style-position: inside;
    margin-top: 5px;
}

.contactForm .check-list li a {
    color: var(--body-text-color);
    text-decoration: underline;
    text-decoration-color: #e0e1e1;
    text-underline-offset: 4px;
}

.contactForm .formBox .submit {
    padding: 0 0 60px;
    border-radius: 0 0 20px 20px;
}

/* -----------------------------------------------------------
. form
----------------------------------------------------------- */
::placeholder {
    color: #ccc;
}

.formBox {
    /* padding: 30px; */
    text-align: left;
    /* position: relative;
    z-index: 1; */
}

.formBox table {
    margin: 0;
    border: none;
    width: 100%;
}

.formBox tr:first-of-type th,
.formBox tr:first-of-type td {
    border-top: none;
}

.formBox th,
.formBox td {
    border-bottom: #d0d0d0 solid 1px;
    text-align: left;
    vertical-align: top;
}

.formBox th {
    padding: 35px 20px;
    width: 30%;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    background: var(--main-color02);
    color: var(--white);
}

.formBox th span,
.formBox td .req {
    background: var(--red);
    color: #fff;
    font-size: 12px;
    padding: 2px 8px 4px;
    border-radius: 4px;
    line-height: 1;
    display: inline-block;
    margin-left: 1rem;
}

.formBox th span.any,
.formBox td .any {
    background: #a7a7a7;
}

.formBox td .req {
    float: none;
}

.formBox td {
    background: var(--white);
    width: 70%;
    padding: 35px 20px;
    font-weight: bold;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 400;
}

.formBox td .wpcf7c-elm-step1 {
    font-size: 13px;
}

.wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
    margin-top: 12px;
}

.formBox td span {
    display: inline-block;
    font-size: 16px;
    margin: 0;
}

.formBox td span label {
    padding-right: 25px;
}

.formBox td input[type="text"],
.formBox td input[type="tel"],
.formBox td input[type="email"] {
    padding: 5px;
    height: 35px;
    width: 320px;
    border: 1px solid #d0d0d0;
    box-sizing: border-box;
    background-color: #fff;
    font-family: var(--base-font-family);
    border-radius: 6px;
}

.formBox td input[type="text"].youradd {
    width: 420px;
}

.formBox td.kibo input[type="text"] {
    width: 100%;
}

.formBox td.kibo select {
    width: 100%;
}

.formBox td.kibo span {
    margin-right: 1rem;
}

.formBox td textarea {
    padding: 5px;
    width: 580px;
    border: 1px solid #CCC;
    box-sizing: border-box;
    overflow: auto;
    background-color: #fff;
    border-radius: 6px;
}

.formBox td select,
.formBox td input[type="date"] {
    width: 200px;
    font-size: 16px;
    padding: 2px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #CCC;
    box-sizing: border-box;
    margin-right: 10px;
    background-color: #fff;
    font-family: var(--base-font-family);
}

.formBox .submit {
    background: var(--white);
    padding: 25px 0;
    border-radius: 0 0 20px 20px;
}

.formBox .submit input {
    --background: var(--main-color01);
    flex: 1;
    width: 220px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 35px;
    padding: 20px 30px 19px 30px;
    display: block;
    text-align: center;
    box-sizing: border-box;
    color: #fff !important;
    text-decoration: none !important;
    position: relative;
    background-color: var(--background);
    font-family: var(--base-font-family);
    transition: 0.3s ease;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border: 0;
}

.formBox .submit.bg01 {
    background: none;
}

.formBox .submit.bg01 input {
    --background: var(--main-color01);
}

.formBox .submit input:hover {
    opacity: 0.7;
}

.formBox .submit input[type="button"] {
    margin-right: 10px;
    background: #f3f3f3;
    color: var(--main-color02);
}

.formBox .txtPrivacy {
    text-align: center;
    margin: 10px 0 15px;
}

.formBox .txtPrivacy a {
    text-decoration: underline;
}

.wpcf7-not-valid-tip {
    padding: 0 10px;
}

/* チェックボックス */
.wpcf7-checkbox {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px 4% !important;
}

.wpcf7-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px 4% !important;
}

.wpcf7-list-item {
    width: 48%;
}

.wpcf7-list-item label {
    padding: 0 !important;
    font-weight: 500 !important;
    font-size: 15px;
}

.wpcf7 .formBox .wpcf7-spinner {
    display: none;
}

.wpcf7 .formBox .wpcf7-spinner::before {
    content: none;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    /* background: var(--white); */
    color: var(--red);
}

/* -----------------------------------------------------------
    .usefulContents
----------------------------------------------------------- */
.usefulContents {
    /* background: url(img/bg_pattern02.jpg) repeat; */
    position: relative;
}

.usefulContents::before {
    position: absolute;
    inset: 0 0 auto auto;
    content: "";
    display: block;
    width: 100%;
    width: min(100%, 1300px);
    height: 75%;
    height: min(75%, 850px);
    background: right top url(img/bg_image01.jpg) no-repeat;
    /* background: red; */
    z-index: 1;
    /* --s: 10vw;
    --b: 50vw; */
    /* --s: 10%;
    --b: 50%;
    --mask: radial-gradient(ellipse at right top, hsl(0, 0%, 0%) 0%,
            hsla(0, 0%, 0%, 0.987) calc(0.081 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.951) calc(0.155 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.896) calc(0.225 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.825) calc(0.29 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.741) calc(0.353 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.648) calc(0.412 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.55) calc(0.471 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.45) calc(0.529 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.352) calc(0.588 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.259) calc(0.647 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.175) calc(0.71 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.104) calc(0.775 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.049) calc(0.845 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0.013) calc(0.919 * var(--s) + var(--b)),
            hsla(0, 0%, 0%, 0) calc(1 * var(--s)));
    mask-image: var(--mask);
    mask-repeat: no-repeat; */
    /* opacity: 0.7; */
    /* mix-blend-mode: multiply; */
}

.usefulContents > .inner {
    padding: 100px 0;
    position: relative;
    overflow: visible;
    z-index: 2;
}

.usefulContents ul {
    display: flex;
    flex-wrap: wrap;
    margin: 60px -20px 0;
    /* align-items: stretch; */
}

.usefulContents li {
    display: block;
    width: calc(50% - 40px);
    padding: 20px;
    transition: 0.3s ease;
    transform: scale(1);
}

.usefulContents li:hover {
    transform: scale(1.05);
}

.usefulContents li > a {
    position: relative;
    display: grid;
    grid-template-areas: "ico title"
        "ico text";
    grid-template-columns: 90px auto;
    grid-auto-rows: min-content;
    gap: 10px 25px;
    text-decoration: none;
    background: var(--white);
    border: 1px dotted #000;
    padding: 20px 70px 20px 20px;
    box-sizing: border-box;
    height: 100%;
    place-items: start start;

    /* --bc: var(--black);
  background-image:
      linear-gradient(to right, var(--bc), var(--bc) 2px, transparent 2px, transparent 4px),
      linear-gradient(to bottom, var(--bc), var(--bc) 2px, transparent 2px, transparent 4px),
      linear-gradient(to left, var(--bc), var(--bc) 2px, transparent 2px, transparent 4px),
      linear-gradient(to top, var(--bc), var(--bc) 2px, transparent 2px, transparent 4px);
  background-size:
      4px 2px,
      2px 4px,
      4px 2px,
      2px 4px;
  background-position:
      left top,
      right top,
      right bottom,
      left bottom;
  background-repeat:
      repeat-x,
      repeat-y,
      repeat-x,
      repeat-y; */
}

.usefulContents li > a p,
.usefulContents li > a:hover p {
    color: var(--body-text-color);
}

.usefulContents li > a::after {
    position: absolute;
    display: block;
    content: "";
    inset: 0 20px 0 auto;
    margin: auto 0;
    width: 20px;
    height: 20px;
    background: #bcbcbc;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(./img/svg_arw01.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url(./img/svg_arw01.svg);
    transition: 0.3s ease;
}

.usefulContents li > a:hover::after {
    background: var(--main-color02);
}

.usefulContents li > a:hover img {
    opacity: 1;
}

.usefulContents li > a .ico {
    grid-area: ico;
    background: var(--main-color02);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
}

.usefulContents li > a h3 {
    grid-area: title;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.66;
    color: var(--main-color02);
}

.usefulContents li > a p {
    grid-area: text;
    font-size: 16px;
    margin-bottom: 0;
}

/* .usefulContents li > a p::after {
    content: "";
    display: block;
    grid-area: space;
} */

/* -----------------------------------------------------------
    .diagnosisContent
----------------------------------------------------------- */
/* -----------------------------------------------------------
    worries-list
----------------------------------------------------------- */

.worries-list {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.worries-item {
    width: 170px;
}

.worries-item p {
    margin-bottom: 25px;
    position: relative;
    line-height: 1.4;
    color: var(--white);
    background: #6c9cb8;
    border-radius: 20px;
    padding: 20px;
}

.worries-item p::before {
    content: "";
    position: absolute;
    display: inline-block;
    background: #6c9cb8;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    bottom: -20px;
    --r: 2px;
    width: 15px;
    aspect-ratio: 1 / 2;
    --_g: calc(var(--r) / tan(22.5deg)) left var(--r), #000 98%, #0000 101%;
    -webkit-mask: conic-gradient(from 67.5deg at calc(var(--r) / (3 * sqrt(2) - 4) - 100% / tan(22.5deg)) 50%, #000 45deg, #0000 0) 0 0 / calc(100% - var(--r) / sqrt(2)) no-repeat, radial-gradient(var(--r) at calc(100% - var(--r) * sqrt(2)) 50%, #000 98%, #0000 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g));
    clip-path: polygon(100% 50%, 0 100%, 0 0);
}

.worries-item:nth-of-type(even) p {
    background: #86b8d5;
}

.worries-item:nth-of-type(even) p::before {
    background: #86b8d5;
}

/* 
.diagnosisContentAttention .target {
    border: 2px solid var(--main-color02);
    background: #fffcee;
    padding: 20px;
}

.diagnosisContentAttention .target .title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.05em;
    color: var(--white);
    background: var(--red);
    border-radius: 16px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 7px 30px 8px;
    line-height: 1;
}

.diagnosisContentAttention .target .lead {
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    text-decoration: underline;
    text-decoration-thickness: 0.86em;
    text-underline-offset: -0.53em;
    text-decoration-color: var(--yellow);
    padding: 0;
}

.diagnosisContentAttention .target ul {
    margin: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.diagnosisContentAttention .target ul li {
    position: relative;
    padding-left: 35px;
}

.diagnosisContentAttention .target ul li::before,
.diagnosisContentAttention .target ul li::after {
    content: "";
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    inset: 0 auto 0 0;
    margin: auto 0;
}

.diagnosisContentAttention .target ul li::before {
    background: var(--white);
    border-radius: 50%;
    transform: scale(0.8);
}

.diagnosisContentAttention .target ul li::after {
    background: var(--main-color02);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(./img/svg_check01.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url(./img/svg_check01.svg);
} */

.diagnosisContentMerit .imgLayer {
    margin-right: 25px;
    margin-bottom: -50px;
}

.diagnosisContentMerit ol {
    display: flex;
    gap: 25px;
    justify-content: space-between;
    margin-top: 20px;
}

.diagnosisContentMerit ol li {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    display: block;
    flex: 1;
    background: #fff8e4;
    padding: 50px 10px 30px;
    border: 2px solid #c4a77b;
    position: relative;
}

.diagnosisContentMerit ol li .number {
    position: absolute;
    inset: 0 auto auto 20px;
    font-family: "Roboto", sans-serif;
    font-size: 43px;
    font-weight: 500;
    line-height: 1;
    background: var(--white);
    width: 86px;
    height: 86px;
    /* 108 119 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: translateY(-50%);
    transform-style: preserve-3d;
    /* z-index: 2; */
}

.diagnosisContentMerit ol li .number::before {
    content: "";
    position: absolute;
    display: block;
    width: 108px;
    height: 120px;
    background: var(--red);
    inset: -10px -100% auto;
    margin: 0 auto;
    transform: translateZ(-1px);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(./img/svg_marker01.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url(./img/svg_marker01.svg);
}

.diagnosisContentMerit ol li .number small {
    font-family: var(--base-font-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    /* font-family: var(--en-font-family); */
    display: block;
}

.diagnosisContentMerit ol li em {
    text-decoration: underline;
    text-decoration-thickness: 13px;
    text-underline-offset: -8px;
    text-decoration-color: var(--yellow);
}

.diagnosisContentMerit ol li img {
    display: block;
    margin: 0 auto 10px;
}

/* -----------------------------------------------------------
劣化度チェック
----------------------------------------------------------- */
.check-point {
    border: 2px solid var(--main-color02);
    background: #fff8e4;
    padding: 20px;
}

.check-point .check-catch {
    text-align: center;
}

.check-point .check-catch .txtB {
    /* text-align: center;
    display: inline-block;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.4; */
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.check-point .check-catch .check-caution {
    /* background: var(--red);
    border-radius: 50px;
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    padding: 0.2em 1em; */
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.05em;
    color: var(--white);
    background: var(--red);
    border-radius: 16px;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 7px 30px 8px;
    line-height: 1;
}

.check-point .checkpoint-list {
    margin: 20px;
    display: grid;
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
    /* flex-flow: column wrap; */
    grid-template-rows: repeat(3, auto);
    /* grid-template-columns: repeat(2, 1fr); */
    grid-auto-flow: column;
}

.checkpoint-list li {
    text-align: left;
    position: relative;
    padding: 0px 0 0px 1.95em;
}

.checkpoint-list li::before,
.checkpoint-list li::after {
    content: "";
    position: absolute;
    display: block;
    width: 1.22em;
    height: 1.22em;
    inset: 0 auto 0 0;
    margin: auto 0;
}

.checkpoint-list li::before {
    background: var(--white);
    border-radius: 50%;
    transform: scale(0.8);
}

.checkpoint-list li::after {
    background: var(--main-color02);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(./img/svg_check01.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url(./img/svg_check01.svg);
}

/* 
.checkpoint-list .checkpoint-item:before {
    content: none;
}

.checkpoint-list .checkpoint-item_child {
    padding-left: 30px;
    font-size: 18px;
}

.checkpoint-list .checkpoint-item_child:before {
    background: none;
    color: var(--main-color02);
    content: '\f058';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    left: 0;
    height: 20px;
    line-height: 1;
    width: auto;
} */

.check-cta::before {
    content: '';
    background: var(--sub-color02);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    /* top: 10px; */
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0.7;
    z-index: -1;
}

.check-cta a {
    display: block;
    text-decoration: none;
    height: 100%;
}

.check-cta a:hover {
    z-index: 1;
}

.check-cta a:hover .btnDetail::before {
    transform-origin: left top;
    transform: scale(1, 1);
    z-index: -1;
}

.check-cta .check-cta_catch {
    color: var(--white);
    text-align: center;
    position: relative;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.4;
}

.check-cta a {
    position: relative;
}

.check-cta a > span.img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    --mask:
        radial-gradient(circle closest-side, #000 100.0001%, #0000),
        linear-gradient(to right, #000 50%, #0000 50%);
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.check-cta a > span.img img {
    display: block;
    /* object-fit: contain;
    object-position: right bottom;
    width: 100%;
    height: 100%; */
    max-width: 100%;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;
}

.check-cta a:hover img {
    opacity: 1 !important;
}

.check-cta .check-cta_catch strong {
    display: flex;
    justify-content: space-between;
}

.check-cta .check-cta_catch span {
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    line-height: 1;
    padding: 0 0 5px;
}

.check-cta .check-cta_catch .check-cta_wall {
    background: var(--main-color02);
}

.check-cta .check-cta_catch .check-cta_roof {
    background: var(--main-color01);
}

.check-cta .check-cta_catch .check-cta_diagnosis {
    background: var(--body-text-color);
}

.check-cta .check-cta_catch .check-cta_caution {
    display: inline-block;
    background: var(--red);
    border-radius: 50px;
    font-size: 18px;
    font-weight: 500;
    height: auto;
    width: auto;
    padding: 2px 1em 5px;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
}

.check-cta .btnDetail {
    background: var(--red);
    border: 2px solid var(--black);
    position: absolute;
    margin: auto auto 0;
    inset: auto 0 20px;
    font-size: 18px;
    width: 80%;
    transition: all 0.3s ease;
    transform: scale(1);
}

.check-cta .btnDetail:hover {
    transform: scale(1.05);
}

.check-cta_catch .imgLayer {
    left: 60%;
    top: 10px;
}

/* -----------------------------------------------------------
    .reviewContents
----------------------------------------------------------- */
.reviewContents {
    padding: 80px 0 60px;
}

.reviewContents .inner {
    overflow: visible;
}

.reviewContents h2 {
    color: var(--white);
    display: flex;
    justify-content: center;
    /* align-items: flex-end; */
}

.reviewContents h2 .imgLayer {
    position: relative;
    margin-top: -44px;
    margin-right: 20px;
}

.reviewContents h2 > span:last-of-type {
    padding: 14px;
    margin-left: 6px;
}

.reviewContents h2 small {
    display: block;
    margin-bottom: 10px;
}

.reviewContents h2 small::before,
.reviewContents h2 small::after {
    content: "/";
    display: inline-block;
}

.reviewContents h2 small::before {
    margin-right: 1em;
    transform: scaleX(-1);
}

.reviewContents h2 small::after {
    margin-left: 1em;
}

/* -----------------------------------------------------------
    .reason
----------------------------------------------------------- */
#reason {
    position: relative;
    background-image: url(./img/bg_reasonList01.png), url(./img/bg_reasonList02.png);
    background-repeat: no-repeat;
    background-position: left top 420px, right top 340px;
    background-size: 650px, 750px;
}

.reasonList {
    position: relative;
    z-index: 2;
}

.reasonList .inner {
    overflow: initial;
}

.reasonList .tl02 {
    margin-bottom: 10px;
}

.reasonList .medalList::before {
    z-index: 1;
}

.reasonList .medalList {
    position: relative;
    z-index: 1;
    margin-top: 60px;
    margin-bottom: 0;
}

.reasonDetailWrapper {
    position: relative;
    padding: 150px 0 100px;
    top: -50px;
    margin-bottom: -50px;
    border-radius: 100px;
    z-index: 1;
}

.reasonDetailWrapper .reasonBox {
    position: relative;
    margin-top: 150px;
}

.reasonDetailWrapper .reasonBox::before {
    content: "";
    position: absolute;
    width: 183px;
    height: 169px;
    top: -90px;
    background-size: contain;
    z-index: 0;
}

.reasonDetailWrapper #reason01.reasonBox::before {
    background-image: url(./img/reason_balloon01.png);
    right: 0;
}

.reasonDetailWrapper #reason02.reasonBox::before {
    background-image: url(./img/reason_balloon02.png);
    left: 0;
}

.reasonDetailWrapper #reason03.reasonBox::before {
    background-image: url(./img/reason_balloon03.png);
    right: 0;
}

.reasonDetailWrapper #reason04.reasonBox::before {
    background-image: url(./img/reason_balloon04.png);
    left: 0;
}

.reasonDetailWrapper #reason05.reasonBox::before {
    background-image: url(./img/reason_balloon05.png);
    right: 0;
}

.reasonDetailWrapper #reason06.reasonBox::before {
    background-image: url(./img/reason_balloon06.png);
    left: 0;
}

.reasonDetailWrapper .reasonBox h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
    font-size: 34px;
    font-weight: 700;
    color: var(--main-color02);
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1);
}

.reasonDetailWrapper .reasonBox h3 span {
    color: var(--main-color01);
}

.reasonDetailWrapper .reasonBox figure.inner02 {
    position: relative;
    z-index: 1;
}

.reasonDetailWrapper .reasonBox figure.inner02 img {
    width: 100%;
}

.reasonDetailWrapper .reasonBox .inBox {
    position: relative;
    top: -100px;
    margin-bottom: -100px;
    padding: 160px 70px 70px;
    background: var(--white);
    border-radius: 20px;
}

.reasonDetailWrapper .reasonBox .inBox p {
    margin-top: 15px;
}

.reasonDetailWrapper .reasonBox .inBox p:first-of-type {
    margin-top: 0;
}

.reasonDetailWrapper .reasonBox .inBox figure {
    margin: 50px 0;
    text-align: center;
}

.reasonDetailWrapper .reasonBox .inBox .btn {
    margin-top: 50px;
}

.reasonPrice {
    background: var(--sub-color03);
    position: relative;
    padding: 200px 0 100px;
    top: -100px;
    margin-bottom: -100px;
}

.coverMessage + .bgPattern02:has(.coverWorks) {
    margin-top: 250px;
    padding-top: 100px;
}

/* -----------------------------------------------------------
    .fairPrice
----------------------------------------------------------- */
.fairPrice {
    border: solid 6px var(--main-color01);
    border-radius: 20px;
    box-sizing: border-box;
    background: var(--white);
    padding: 80px 50px;
}

.fairPrice .wallPartsBox {
    padding-bottom: 40px;
    border-bottom: solid 2px var(--main-color02);
    margin-bottom: 60px;
}

.fairPrice .wallPartsBox h3 {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: var(--main-color02);
    margin-bottom: 15px;
}

.fairPrice .wallPartsBox h3 span {
    color: var(--main-color01);
}

.fairPrice .wallPartsBox .catchTtl {
    display: flex;
    justify-content: center;
}

.fairPrice .wallPartsBox .catchTtl span {
    border-radius: 50%;
    color: var(--white);
    background: var(--red);
    width: 110px;
    height: 110px;
    font-size: 70px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 0.1em;
}

.fairPrice .wallPartsBox figure {
    margin: 40px 0;
    text-align: center;
}

.fairPrice .btn {
    margin-top: 40px;
}

.flowList {
    border-radius: 10px;
    background: var(--main-color02);
    padding: 15px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    clear: both;
}

.flowList h3 {
    flex-shrink: 0 !important;
    color: #fff !important;
    font-size: 24px !important;
    padding: 0 45px 0 30px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    /* width: auto; */
}

.flowList ul {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
}

.flowList ul li {
    border-radius: 6px;
    flex: 1;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: var(--body-text-color);
    padding: 0;
    text-align: center;
    margin: 0 5px 0 0;
    /* width: 100px; */
    height: 70px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-direction: column;
}

.flowList + p {
    margin: 10px 0 0;
    font-size: 15px;
}

.compareTable {
    width: 100%;
    table-layout: fixed;
}

.compareTable thead th {
    background: var(--sub-color01);
    padding: 15px;
    border-radius: 10px 10px 0 0;
    border-right: none;
    border-left: var(--white) solid 2px;
}

.compareTable thead th:first-of-type {
    background: transparent;
}

.compareTable tbody tr:nth-of-type(odd) {
    background: var(--white);
}

.compareTable tbody tr:nth-of-type(even) {
    background: #f3e0d5;
}

.compareTable th,
.compareTable td {
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    border-bottom: var(--sub-color01) solid 2px;
    border-right: var(--sub-color01) solid 2px;
    line-height: 1.2;
}

.compareTable th {
    padding: 10px;
    vertical-align: middle;
    font-weight: 500;
    font-size: 17px;
    width: 27%;
    border-left: var(--sub-color01) solid 2px;
}

.compareTable th:first-of-type {
    width: 19%;
}

.compareTable td {
    font-size: 15px;
    text-align: left;
    padding: 10px 10px 10px 65px;
    position: relative;
    height: 100px;
    overflow: hidden;
    vertical-align: middle;
}

.compareTable td span {
    font-size: 30px;
    font-weight: 700;
    display: block;
    border-right: #bdbdbd solid 1px;
    margin-right: 10px;
    padding: 10px 10px 10px 0;
    width: 46px;
    text-align: center;
    left: 10px;
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    transform: translateY(-50%);
}

.compareTable td.ourCompany span {
    color: var(--main-color01);
}






.main h2.menuCatch {
    background: none;
    font-size: 45px;
    box-shadow: none;
    color: #444;
    text-align: center;
    line-height: 1.3;
    padding: 0 0 30px;
    margin-bottom: 30px;
}

.main h2.menuCatch:after {
    background: #eb6100;
    content: '';
    display: block;
    height: 15px;
    position: absolute;
    width: 490px;
    margin: 0 auto;
    bottom: 0;
    top: inherit;
    left: 50%;
    margin-left: -245px;
    border-radius: 0;
    border: none;
}


.main .textComS {
    font-size: 13px;
    text-align: right;
}

.serviceMenu-main .packCatch_ttl {
    color: var(--white);
    background: rgba(var(--menu-color), 1);
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    /* margin: 0 -20px -20px; */
    margin: auto -20px -20px;
    padding: .3em .8em;
}

.serviceMenu-main_type {
    border-radius: 28px;
    background: var(--white);
}

.wallDetail .serviceMenu-main_type {
    border: solid 4px var(--main-color02);
}

.roofDetail .serviceMenu-main_type {
    border: solid 4px var(--main-color01);
}

.wpackDetail01 .serviceMenu-main_type {
    border: solid 4px #e7bba1;
}

.wpackDetail02 .serviceMenu-main_type {
    border: solid 4px #6297a9;
}

.packmain-subttl {
    padding: 15px 25px;
    font-size: 22px;
    color: var(--white);
    border-radius: 20px 20px 0 0;
}

.wallDetail .packmain-subttl {
    background: var(--main-color02);
}

.roofDetail .packmain-subttl {
    background: var(--main-color01);
}

.wpackDetail01 .packmain-subttl {
    background: #e7bba1;
}

.wpackDetail02 .packmain-subttl {
    background: #6297a9;
}

.packmain-ttl {
    gap: 0;
}

.wallDetail .packmain-ttl {
    border-bottom: solid 4px var(--main-color02);
}

.roofDetail .packmain-ttl {
    border-bottom: solid 4px var(--main-color01);
}

.wpackDetail01 .packmain-ttl {
    border-bottom: solid 4px #e7bba1;
}

.wpackDetail02 .packmain-ttl {
    border-bottom: solid 4px #6297a9;
}

.packmain-ttl h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 120px;
    font-weight: 700;
    width: 635px;
}

.wpackDetail01 .packmain-ttl h2 {
    flex-wrap: wrap;
    font-size: 96px;
    justify-content: flex-start;
}

.wpackDetail02 .packmain-ttl h2 {
    flex-wrap: wrap;
    font-size: 96px;
    justify-content: center;
}

.wpackDetail01 .packmain-ttl h2 {
    padding-left: 15px;
    box-sizing: border-box;
}

.wpackDetail01 .packmain-ttl h2::after,
.wpackDetail02 .packmain-ttl h2::after {
    content: "";
    width: 100%;
}

.packmain-ttl h2 span {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 6px 10px 14px;
    color: var(--white);
    border-radius: 10px;
}

.packmain-ttl figure {
    width: 465px;
    height: 220px;
}

.wpackDetail01 .packmain-ttl figure,
.wpackDetail02 .packmain-ttl figure {
    height: 290px;
}

.packmain-ttl figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.wallDetail .packmain-ttl span {
    background: var(--main-color02);
}

.roofDetail .packmain-ttl span {
    background: var(--main-color01);
}

.wpackDetail01 .packmain-ttl span {
    background: #e7bba1;
}

.wpackDetail02 .packmain-ttl span {
    background: #6297a9;
}

.wpackDetail01 .packmain-ttl span:nth-child(1),
.wpackDetail01 .packmain-ttl span:nth-child(2),
.wpackDetail01 .packmain-ttl span:nth-child(3),
.wpackDetail01 .packmain-ttl span:nth-child(4),
.wpackDetail02 .packmain-ttl span:nth-child(1),
.wpackDetail02 .packmain-ttl span:nth-child(2),
.wpackDetail02 .packmain-ttl span:nth-child(3),
.wpackDetail02 .packmain-ttl span:nth-child(4) {
    background: var(--main-color02);
    order: 0;
}

.wpackDetail01 .packmain-ttl span:nth-child(n+5),
.wpackDetail02 .packmain-ttl span:nth-child(n+5) {
    order: 1;
    margin-top: -110px;
}

.summary-name {
    text-align: center;
    padding: 35px 0;
    background: #ebebeb;
}

.wallDetail .summary-name {
    border-bottom: solid 4px var(--main-color02);
}

.roofDetail .summary-name {
    border-bottom: solid 4px var(--main-color01);
}

.wpackDetail01 .summary-name {
    border-bottom: solid 4px #e7bba1;
}

.wpackDetail02 .summary-name {
    border-bottom: solid 4px #6297a9;
}

.summary-name h3 {
    font-size: 50px;
    font-weight: 900;
    line-height: 1;
}

.summary-name h3 small {
    font-size: 40px;
}

.wallDetail .summary-name h3 small {
    color: var(--main-color02);
}

.roofDetail .summary-name h3 small {
    color: var(--main-color01);
}

.wpackDetail01 .summary-name h3 small {
    color: #e7bba1;
}

.wpackDetail02 .summary-name h3 small {
    color: #6297a9;
}

.summary-name .item-name {
    border-radius: 10px;
    border: solid 1px #d0d0d0;
    background: var(--white);
    display: inline-block;
    font-size: 22px;
    margin-top: 25px;
    padding: 5px 60px;
    font-weight: 700;
}

.summary-name dl {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 25px auto 0;
    font-weight: 700;
    font-size: 24px;
    text-align: left;
}

.summary-name dt,
.summary-name dd {
    padding: 7px 20px;
    box-sizing: border-box;
    border-bottom: solid 1px #d0d0d0;
    border-left: solid 1px #d0d0d0;
}

.summary-name dt {
    width: 30%;
    background: #f1f1f1;
}

.summary-name dt:first-of-type {
    border-radius: 10px 0 0 0;
    border-top: solid 1px #d0d0d0;
}

.summary-name dt:last-of-type {
    border-radius: 0 0 0 10px;
}

.summary-name dd {
    width: 70%;
    background: var(--white);
    border-right: solid 1px #d0d0d0;
}

.summary-name dd:first-of-type {
    border-radius: 0 10px 0 0;
    border-top: solid 1px #d0d0d0;
}

.summary-name dd:last-of-type {
    border-radius: 0 0 10px 0;
}

.serviceMenu-summary {
    line-height: 1;
    gap: 0;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 25px 0 0;
}

.serviceMenu-summary .inWorks {
    background: var(--black);
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 6px;
    margin-right: 40px;
}

.serviceMenu-summary .red {
    color: var(--red);
    font-family: var(--en-font-family);
    font-size: 160px;
    font-weight: 700;
}

.serviceMenu-summary .red span {
    font-size: 120px;
}

.serviceMenu-summary .red small {
    font-family: var(--base-font-family);
    font-size: 50px;
}

.serviceMenu-summary .inTax {
    background: #555555;
    color: var(--white);
    padding: 10px 20px;
    border-radius: 6px;
    margin-left: 20px;
}

.summary-note {
    text-align: right;
    font-size: 15px;
    margin: 10px 0 35px;
    padding: 0 30px;
}


.itemData {
    background: #f1f1f1;
    box-sizing: border-box;
    padding: 50px;
    border: solid 4px var(--main-color02);
    border-radius: 20px;
}

.itemData-ttl {
    color: var(--main-color02);
    font-size: 30px;
    text-align: center;
    margin: 0 0 30px;
    padding: 0;
    line-height: 1.2;
}

.itemData-ttl_sub {
    color: var(--white);
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    background: var(--main-color02);
    margin-top: 20px;
}

.itemData .itemData-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.itemData-list .itemData-list_item {
    background: var(--white);
    box-sizing: border-box;
    width: calc(100%/3 - 20px);
    text-align: center;
    padding-bottom: 20px;
    border-radius: 10px;
}

.itemData-list .itemData-list_item::before {
    content: none;
}

.itemData-list_ttl {
    background: var(--main-color02);
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding: 5px 10px;
    text-align: center;
    border-radius: 6px 6px 0 0;
}

.itemData-list_item i {
    color: var(--main-color02);
    font-size: 34px;
    text-shadow: rgb(178, 150, 0) 2px 0px 0px, rgb(178, 150, 0) 1.75517px 0.958851px 0px, rgb(178, 150, 0) 1.0806px 1.68294px 0px, rgb(178, 150, 0) 0.141474px 1.99499px 0px, rgb(178, 150, 0) -0.832294px 1.81859px 0px, rgb(178, 150, 0) -1.60229px 1.19694px 0px, rgb(178, 150, 0) -1.97998px 0.28224px 0px, rgb(178, 150, 0) -1.87291px -0.701566px 0px, rgb(178, 150, 0) -1.30729px -1.5136px 0px, rgb(178, 150, 0) -0.421592px -1.95506px 0px, rgb(178, 150, 0) 0.567324px -1.91785px 0px, rgb(178, 150, 0) 1.41734px -1.41108px 0px, rgb(178, 150, 0) 1.92034px -0.558831px 0px;
}

.packBox {
    display: flex;
    justify-content: space-between;
    flex-flow: row-reverse;
    margin-bottom: 60px;
}

.itemImg {
    position: relative;
    overflow: hidden;
    width: 35%;
}

.itemImg img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 300px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}


/* .itemImg::before {
    content: '';
    display: block;
    padding-top: 70%;
}

.itemImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
} */

.itemSummery {
    width: calc(65% - 50px);
    margin-right: 50px;
}

.itemSummery p + p {
    margin-top: 1rem;
}

.itemBox .age-list {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 60px;
    font-size: 18px;
    font-weight: 500;
}

.age-list .age-list_item {
    /* border: #d7d7d7 solid 1px; */
    border: var(--main-color02) solid 4px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 0 20px;
    min-width: calc(100% / 3);
    width: fit-content;
    font-weight: 500;
    border-radius: 10px;
}

.age-list .age-list_item::before {
    content: none;
}

.age-list_item p {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 10px;
    /* width: 50%; */
    flex: 1;
    font-size: 22px;
    border-radius: 6px 0 0 6px;
}

.age-list_item p:last-of-type {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 700;
    background: var(--white);
    border-left: solid 4px var(--main-color02);
    border-radius: 0 6px 6px 0;
}

.age-list_item .catchTtl {
    color: var(--white);
    background: var(--main-color01);
    text-align: center;
    /* flex-shrink: 1; */
}

/*----quality-Box お任せください-----*/
.qualityBox .catchTtl {
    position: relative;
    font-size: 70px;
    font-weight: 900;
    text-align: center;
    line-height: 1.085;
    margin-bottom: 30px;
}

.qualityBox .catchTtl strong {
    font-weight: 900;
}

.qualityBox .catchTtl > span {
    display: flex;
    text-align: left;
    font-size: .74em;
    font-weight: 700;
}

.qualityBox .catchTtl > span .catchIco {
    flex-shrink: 0;
    align-self: flex-start;
    margin-right: 5px;
}

.catchTtl .txtS {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

.qualityBoxPoint {
    display: flex;
    gap: 25px;
}

.qualityBoxPoint li {
    flex: 1;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--white);
    background: var(--sub-color02);
    border-radius: 10px;
    padding: 13px 25px 17px;
}

/* -----------------------------------------------------------
    .flow-list
----------------------------------------------------------- */

.flow-list {
    background: var(--white);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    /* justify-content: space-between;
     */
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    /* padding: 40px; */
    padding: 0;
    counter-reset: worksflow;
}

.flow-list > li {
    position: relative;
    padding: 0;
    /* width: calc(100%/3 - 40px); */
    /* margin: 40px 0 0 0; */
    list-style: none;
    counter-increment: worksflow;

    width: calc(20% - 20px);
    margin: 25px 25px 0 0;
    font-size: 16px;
    box-sizing: border-box;
}

/* .flow-list > li:nth-child(-n+3) {
    margin-top: 0;
} */

.flow-list > li p {
    margin-bottom: 0;
    font-size: 16px;
}

.flow-list .flow-list_thumb {
    display: block;
    width: 100%;
    position: relative;
}

.flow-list_thumb::before {
    content: '';
    display: block;
    padding-top: 70%;
    width: 100%;
    border-radius: 0;
    background: none;
    overflow: hidden;
}

.flow-list_thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flow-list .flow-list_thumb::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto 0;
    font-family: "Font Awesome 5 Free";
    content: '\f0da';
    font-weight: 900;
    font-size: 30px;
    height: 1em;
    line-height: 1;
    transform: translateX(125%) scale(1, 0.7);
}

.flow-list .flow-list_ttl {
    margin: 5px 0;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    display: inline-block;
    position: relative;
    font-size: 16px;
    padding: 0.3em 0 0.3em 2em;
}

.flow-list .flow-list_ttl::before {
    background: var(--main-color02);
    border-radius: 50%;
    content: counter(worksflow, decimal);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.flow-list > li:last-of-type .flow-list_thumb::after {
    display: none;
}

.flow-list > li:nth-child(-n+5) {
    margin-top: 0;
}

.flow-list > li:nth-child(5n) {
    margin-right: 0;
}

/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */
footer {
    text-align: center;
    background-color: var(--sub-color03);
}

footer nav.ftrNav {
    text-align: left;
    display: flex;
    gap: 40px;
    margin: 50px 0;
    justify-content: center;
}

footer nav.ftrNav > * {
    /* flex: 1; */
}

footer nav.ftrNav ul > li {
    display: block;
    font-size: 16px;
    text-indent: -1.5em;
    padding-left: 1.5em;
    margin-top: 3px;
    margin-bottom: 3px;
}

footer nav.ftrNav > ul {
    display: flex;
    flex-direction: column;
}

footer nav.ftrNav li > p {
    margin-left: 1em;
}

footer nav.ftrNav ul > li::before {
    content: "─";
    margin-right: 0.5em;
    color: #141921;
}

footer nav.ftrNav ul > li li::before {
    content: "└";
    margin-right: 0.5em;
    color: #141921;
}

footer nav.ftrNav ul > li a {
    color: var(--body-text-color);
    text-decoration: none;
}

footer nav.ftrNav ul > li a:hover {
    color: var(--main-color01);
}

footer nav.ftrNav ul > li > ul {
    margin-left: -1em;
}

.ftrInfo {
    padding: 50px 0;
    background-color: var(--main-color02);
    border-radius: 100px 100px 0 0;
    color: var(--white);
}

.ftrInfo .wrapper {
    display: inline-block;
}

.ftrInfo p {
    text-align: left;
}

.ftrInfo p b {
    display: inline-block;
    width: 220px;
}

.ftrInfo .inBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
    width: fit-content;
    margin: 0 auto 40px;
}

.ftrInfo .ftrLogo a {
    display: inline-block;
    box-sizing: border-box;
    width: 300px;
    background-color: var(--white);
    padding: 20px;
    border-radius: 60px;
}

.ftrInfo .ftrLogo a img {
    width: 100%;
}

.ftrInfo .ftrInfoContent {
    text-align: left;
    font-size: 16px;
    line-height: 1.875;
    flex: auto;
    margin-left: 50px;
}

.ftrInfo .ftrInfoContent h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

.ftrInfo .ftrInfoContent b {
    font-weight: 400;
}

footer #copyright {
    padding: 15px 0 25px;
    font-size: 12px;
}

/*===ftrFloating===*/
.ftrFloating {
    box-sizing: border-box;
    position: sticky;
    inset: auto 0 0;
    width: 100%;
    display: none;
    z-index: 99;
}

.ftrFloatBnr {
    position: fixed;
    bottom: 0;
    right: 110px;
    content: "";
    z-index: 100;
    max-width: 500px;
}

.ftrFloatBnr a {
    display: block;
}

.ftrFloatBnr a img {
    max-width: 100%;
    height: auto;
}

/* ボタンの光沢 */
.is-reflection {
    overflow: hidden;
    position: relative;
}

.is-reflection a {
    overflow: hidden;
}

.is-reflection a:after {
    -moz-animation: is-reflection 4s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -ms-animation: is-reflection 4s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -o-animation: is-reflection 4s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -webkit-animation: is-reflection 4s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    animation: is-reflection 4s ease-in-out infinite;
    background-color: #fff;
    content: " ";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -180px;
    transform: rotate(45deg);
    width: 30px;
}

/* アニメーションを遅延させる */
.is-reflection + .is-reflection a:after {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

@keyframes is-reflection {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

@-webkit-keyframes is-reflection {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

/*===page-top===*/
#pageTop {
    position: fixed;
    bottom: 30px;
    right: 15px;
    width: 80px;
    height: 80px;
    z-index: 100;
}

#pageTop a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: var(--main-color02);
    position: relative;
    transition: 0.3s ease;
    text-indent: -1000%;
    overflow: hidden;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.1);
}

#pageTop a:hover {
    opacity: 0.7;
}

#pageTop a::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    background-color: currentColor;
    width: 35px;
    height: 40px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url(./img/angle-up-solid.svg);
    mask-image: url(./img/angle-up-solid.svg);
}

@media screen and (max-width: 1280px) {
    #pageTop {
        bottom: 152px;
        transform: scale(0.5);
        transform-origin: right center;
    }
}

/* -----------------------------------------------------------
  pagenavi
----------------------------------------------------------- */
#main .pagenavi {
    clear: both;
    width: 100%;
    max-width: 1200px;
    margin: 0;
    padding: 60px 0 100px;
}

#main .pagenavi ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#main .pagenavi ul li {
    display: block;
    padding: 0 !important;
    margin-bottom: 0;
}

#main .pagenavi ul li:before {
    content: none;
}

#main .pagenavi ul li a {
    display: inline-block;
    font-size: 16px;
    color: var(--body-text-color);
    position: relative;
    text-decoration: none;
}

#main .pagenavi ul li.list a {
    background-color: var(--white);
    border: solid 1px var(--main-color02);
    padding: 5px 60px 5px 60px;
    min-width: 40%;
    /* width: 40%; */
    box-sizing: border-box;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.3s ease;
}

#main .pagenavi ul li.list a:hover {
    color: var(--white);
    background-color: var(--main-color02);
    transition: 0.7s;
}

#main .pagenavi ul li.list a i {
    margin-right: 0.5rem;
}

#main .pagenavi ul li.prev {
    text-align: left;
}

#main .pagenavi ul li.next a,
#main .pagenavi ul li.prev a {
    padding: 5px 20px;
    color: var(--black);
    letter-spacing: 0.1em;
    background-color: var(--white);
}

#main .pagenavi ul li.prev a {
    border-right: solid 1px var(--main-color02);
    border-top: solid 1px var(--main-color02);
    border-bottom: solid 1px var(--main-color02);
}

#main .pagenavi ul li.next a {
    border-left: solid 1px var(--main-color02);
    border-top: solid 1px var(--main-color02);
    border-bottom: solid 1px var(--main-color02);
}

#main .pagenavi ul li.next a::before {
    content: "＜";
    margin-right: 0.5rem;
}

#main .pagenavi ul li.prev a::after {
    content: "＞";
    margin-left: 0.5rem;
}

#main .pagenavi ul li.prev a i {
    margin-right: 1.0rem;
}

#main .pagenavi ul li.next {
    text-align: right;
}

#main .pagenavi ul li.next a i {
    margin-left: 1.0rem;
}

#main .pagenavi ul li.next a:hover,
#main .pagenavi ul li.prev a:hover {
    color: var(--white);
    background: var(--main-color02);
}

#main .pagenavi ul li.list {
    text-align: center;
}

/* .wp-pagenavi */
.wp-pagenavi {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 60px 0 100px;
}

.wp-pagenavi a,
.wp-pagenavi span {
    margin: 0;
}

.wp-pagenavi .pages {
    border: 0;
}

.wp-pagenavi a {
    text-decoration: none !important;
}

.wp-pagenavi a,
.wp-pagenavi span {
    display: flex;
    align-items: center;
    padding: 12px 17px 13px;
    line-height: 1;
    transition: all 0.3s ease;
    background: var(--white);
    color: var(--main-color02);
    border-bottom: solid 1px var(--main-color02);
    border-top: solid 1px var(--main-color02);
    border-left: solid 1px var(--main-color02);
}

.wp-pagenavi a:last-child,
.wp-pagenavi span:last-child {
    border-right: solid 1px var(--main-color02);
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    background: var(--main-color02);
    color: var(--white) !important;
}

/* -----------------------------------------------------------
  articleContents
----------------------------------------------------------- */


/* -----------------------------------------------------------
  wysiwyg 投稿関連
----------------------------------------------------------- */
.wysiwyg *[class*=elementor-] {
    display: contents;
}

.post .tl04 {
    text-align: left;
    line-height: 1.5;
}

.post .infoBox {
    margin-bottom: 40px;
}

.post .time {
    text-align: right;
    margin-top: 10px;
}

.post .post_mainv {
    width: 940px;
    margin: 0 auto 40px;
    text-align: center;
}

.post .post_mainv img {
    width: auto;
    max-width: 100%;
}

/* .wysiwyg {
    overflow: hidden;
} */

.wysiwyg * {
    word-break: break-word;
}

.wysiwyg img {
    max-width: 100%;
    height: auto;
}

.wysiwyg img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wysiwyg img.alignright {
    padding: 0;
    margin: 0 0 2px 7px;
    display: inline;
}

.wysiwyg img.alignleft {
    padding: 0;
    margin: 0 30px 10px 0;
    display: inline;
}

.wysiwyg img.aligncenter {
    display: block;
    margin: 0 auto;
}

.wysiwyg .alignright {
    float: right;
    margin-left: 10px;
    margin-bottom: 2px;
}

.wysiwyg .alignleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 2px;
}


.wysiwyg p {
    margin: 0 0 20px 0;
}

.wysiwyg iframe {
    width: 100%;
}

.wysiwyg a {
    text-decoration: underline;
    text-decoration-color: #d7d7d7;
    color: var(--body-text-color);
}

.wysiwyg h1 {
    background: var(--background, var(--main-color02));
    color: var(--white);
    font-size: 26px;
    font-weight: 500;
    margin: 0 0 20px 0;
    padding: 20px 30px;
}

.wysiwyg h1 a,
.wysiwyg h2 a,
.h2 a {
    color: var(--white);
}

.wysiwyg h2:not([class]),
.h2 {
    border-bottom: solid 2px var(--main-color01);
    border-top: solid 2px var(--main-color01);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 20px 0;
    padding: 15px 20px;
}

.wysiwyg h3:not([class]),
.h3 {
    font-size: 22px;
    background: var(--main-color02);
    margin: 0 0 20px 0;
    padding: 10px 15px;
    font-weight: 700;
    color: var(--white);
}

.wysiwyg h4:not([class]),
.h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px 0;
    padding: 10px 15px;
    background: var(--main-color01);
    color: var(--white);
}

.wysiwyg h5:not([class]),
.h5 {
    font-size: 18px;
    font-weight: 700;
    padding: 10px 15px;
    border-bottom: solid 2px var(--main-color01);
    border-top: solid 2px var(--main-color01);
    margin: 0 0 20px 0;
}

.wysiwyg h6:not([class]),
.h6 {
    font-size: 17px;
    font-weight: 700;
    padding: 0 15px 10px 15px;
    margin: 0 0 20px 0;
    border-bottom: double 5px var(--main-color02);
}

.wysiwyg blockquote {
    border: 1px dotted var(--black);
    background: #f0f0f0;
    margin-bottom: 20px;
    padding: 50px;
}

.wysiwyg blockquote p:last-of-type {
    margin-bottom: 0;
}

.wysiwyg ul + h3:not([class]) {
    margin-top: 40px;
}

.wysiwyg ul {
    margin: 0 0 20px 0;
}

.wysiwyg td ul {
    margin-bottom: 0;
}

.wysiwyg ul li {
    list-style: none;
    line-height: 1.8;
    padding-left: 30px;
    position: relative;
}

.wysiwyg ul li + li {
    margin-top: 5px;
}

.wysiwyg ul li::before {
    content: '';
    display: block;
    left: 7px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: var(--main-color01);
    border-radius: 50%;
    position: absolute;
}

.wysiwyg ul.toc_list li {
    padding-left: 30px !important;
}

.wysiwyg ol {
    counter-reset: my-counter;
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.wysiwyg ol li {
    list-style: none;
    line-height: 1.8;
    margin-bottom: 10px;
    padding-left: 36px;
    position: relative;
}

.wysiwyg ol li:before {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: var(--main-color01);
    color: var(--white);
    display: block;
    float: left;
    line-height: 28px;
    margin-left: -36px;
    text-align: center;
    height: 28px;
    width: 28px;
    border-radius: 50%;
}

.wysiwyg .dataTable {
    margin-bottom: 30px !important;
}

/* .wysiwyg td,
.wysiwyg th {
    vertical-align: center;
    padding: 15px 20px;
}

.wysiwyg th {
    font-weight: 500;
    color: var(--white);
    background: var(--main-color02);
    border-bottom: 1px solid var(--white);
    width: unset;
}

.wysiwyg td {
    font-weight: 500;
    border-bottom: 1px solid #d7d7d7;
}

.wysiwyg td .cats > * {
    font-size: 14px;
}

.wysiwyg td .cats > a {
    background: var(--white);
    color: var(--main-color02);
    border: 1px solid var(--main-color02);
    transition: 0.7s ease;
}

.wysiwyg td .cats > a:hover {
    background: #d7d7d7;
}

.wysiwyg tr:last-of-type th,
.wysiwyg tr:last-of-type td {
    border-bottom: 0;
} */

.articleContents .tel {
    margin-right: 20px;
    display: flex;
    align-items: center;
    gap: normal;
    width: fit-content;
    margin: 1rem auto 0;
    flex-direction: column;
}

.articleContents .tel br {
    display: none;
}

.articleContents .tel > div:first-of-type {
    margin-right: 15px;
}

.articleContents .tel > div:first-of-type p:first-of-type {
    display: none;
}

.articleContents .tel > div:first-of-type p:last-of-type {
    color: var(--red);
    position: relative;
    margin-top: 0.066em;
    padding-left: 1.066em;
    font-size: 75px;
    font-weight: 600;
    font-family: var(--en-font-family);
    line-height: 1;
}

.articleContents .tel > div:first-of-type p:last-of-type::before {
    content: "";
    position: absolute;
    /* width: 65px; */
    width: 0.86em;
    height: 100%;
    background-color: currentColor;
    /* background: url(../img/svg_fd01.svg) no-repeat; */
    /* background-size: contain; */
    -webkit-mask-image: url(./img/svg_fd01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url(./img/svg_fd01.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    bottom: 0.1em;
    left: 0;
}

.articleContents .tel > div:first-of-type p:last-of-type span {
    position: relative;
}

.articleContents .tel > div:first-of-type p:last-of-type span::before {
    position: absolute;
    font-family: "Noto Sans JP", sans-serif;
    color: var(--body-text-color);
    font-size: 1rem;
    font-weight: 500;
    inset: -0.5rem 0 0;
    margin: 0 auto;
    text-align: center;
}

.articleContents .tel > div:last-of-type p {
    font-size: 14px;
    line-height: 1.4;
}

/* -----------------------------------------------------------
 deteriorationChk
-----------------------------------------------------------   */

.deteriorationChk {
    position: relative;
    padding: 100px 0;
    background: var(--sub-color02);
    border-radius: 0 0 100px 0;
    z-index: 2;
}

.deteriorationChk.bg_none {
    padding: 100px 0 0;
    background: transparent;
    border-radius: 0;
}

.deteriorationChk h2 {
    margin-bottom: 40px;
}

.deteriorationChk .checkLegend {
    width: 232px;
    float: left;
    padding-left: 5px;
}

.deteriorationChk .checkLegend span {
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    background: #fff;
    color: var(--red);
    font-size: 1em;
    font-weight: 700;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    line-height: 1.5;
    position: relative;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.deteriorationChk .checkLegend span strong {
    font-size: 1.72em;
    line-height: 1.1;
    font-weight: 700;
}

.deteriorationChk .checkLegend p {
    font-size: 29px;
    margin-top: -20px;
}

.deteriorationChk .checkLegend p {
    font-size: 26px;
    margin-top: 0;
}

.deteriorationChk .checkLegend img {
    margin-top: 20px;
    width: 100%;
    height: auto;
}

.deteriorationChk .checkPoint {
    width: 800px;
    float: right;
}

.deteriorationChk .checkPoint h3 {
    margin: 0 !important;
    background: #6297a9 !important;
    border: none !important;
    border-radius: 20px 20px 0 0;
    text-align: center;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 500;
    padding: 10px 15px 8px !important;
}


.deteriorationChk .checkPoint ul {
    position: relative;
    overflow: hidden;
    padding: 40px;
    margin: 0;
    border: solid 4px #6297a9;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    border-radius: 0 0 20px 20px;
    background: #fff;
}

.deteriorationChk .checkPoint ul li {
    /* width: 226px; */
    /* margin: 20px 16px 0 0; */
    /* float: left; */
    background: none;
    padding: 0 !important;
}

.deteriorationChk .checkPoint ul li:nth-child(-n + 3) {
    margin-top: 0;
}

.deteriorationChk .checkPoint ul li:before,
.deteriorationChk .checkPoint ul li:after {
    content: none;
}

.deteriorationChk .checkPoint ul li:nth-child(3n) {
    margin-right: 0;
}

.deteriorationChk .checkPoint ul li .checkpointThumb {
    position: relative;
    font-size: 13px;
    margin-bottom: 10px;
}

.deteriorationChk .checkPoint ul li .checkpointThumb img {
    width: 100%;
    height: auto;
}

.deteriorationChk .checkPoint ul li .checkTtl {
    position: absolute;
    bottom: 10px;
    padding: 0 30px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

#contents:has(#side) .deteriorationChk .checkPoint ul li .checkTtl {
    padding: 0 10px;
}

.deteriorationChk .checkPoint ul li .checkTtl h4 {
    background: var(--red) !important;
    color: #fff !important;
    display: block !important;
    padding: 0 5px !important;
    font-size: 15px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

.deteriorationChk .checkPoint ul li .checkTtl h4::before,
.deteriorationChk .checkPoint ul li .checkTtl h4::after {
    display: none;
}

.deteriorationChk .checkPoint ul li .checkTtl p {
    background: #fff;
    border-radius: 5px;
    color: var(--red);
    display: block;
    font-size: 16px;
    margin-top: 5px;
    line-height: 1.2;
}

.deteriorationChk .checkPoint ul li p {
    display: inline-block;
    font-size: 15px;
    margin-bottom: 0;
}

.deteriorationChk .checkContent {
    padding-top: 60px;
    clear: both;
}

.deteriorationChk .diagnosis-bnr {
    padding-top: 60px;
    clear: both;
}

/* -----------------------------------------------------------
 worksFlowArea
-----------------------------------------------------------   */

.worksFlowArea {
    position: relative;
    padding: 200px 0 100px;
    border-radius: 0 0 0 100px;
    top: -100px;
    margin-bottom: -100px;
    z-index: 1;
}

.worksFlowArea .flex {
    margin-top: 60px;
    flex-wrap: wrap;
    gap: 60px;
}

.worksFlowArea li {
    position: relative;
    width: 300px;
}

.worksFlowArea li::before {
    content: "";
    position: absolute;
    display: inline-block;
    right: -55px;
    top: 120px;
    --r: 4px;
    /* border radius */
    width: 25px;
    aspect-ratio: 1/2;
    --_g: calc(var(--r)/tan(22.5deg)) left var(--r), #000 98%, #0000 101%;
    -webkit-mask:
        conic-gradient(from 67.5deg at calc(var(--r)/(3*sqrt(2) - 4) - 100%/tan(22.5deg)) 50%, #000 45deg, #0000 0) 0 0/calc(100% - var(--r)/sqrt(2)) no-repeat,
        radial-gradient(var(--r) at calc(100% - var(--r)*sqrt(2)) 50%, #000 98%, #0000 101%),
        radial-gradient(var(--r) at top var(--_g)),
        radial-gradient(var(--r) at bottom var(--_g));
    clip-path: polygon(100% 50%, 0 100%, 0 0);
    background: var(--main-color02);
}

.worksFlowArea li:nth-of-type(3n)::before {
    display: none;
}

.worksFlowArea li figure {
    margin: 10px 0;
    text-align: center;
}

.worksFlowArea li h3 {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    padding-left: 50px;
}

.worksFlowArea li h3::before {
    content: "";
    position: absolute;
    display: inline-block;
    text-align: center;
    line-height: 1;
    font-family: var(--en-font-family);
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    background: var(--main-color01);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding-top: 11px;
    left: 0;
    top: 0;
}

.worksFlowArea li:nth-of-type(1) h3::before {
    content: "01";
}

.worksFlowArea li:nth-of-type(2) h3::before {
    content: "02";
}

.worksFlowArea li:nth-of-type(3) h3::before {
    content: "03";
}

.worksFlowArea li:nth-of-type(4) h3::before {
    content: "04";
}

.worksFlowArea li:nth-of-type(5) h3::before {
    content: "05";
}

.worksFlowArea li:nth-of-type(6) h3::before {
    content: "06";
}

.worksFlowArea li:nth-of-type(7) h3::before {
    content: "07";
}

.worksFlowArea li:nth-of-type(8) h3::before {
    content: "08";
}

.worksFlowArea li:nth-of-type(9) h3::before {
    content: "09";
}

/* -----------------------------------------------------------
 corporateArea
-----------------------------------------------------------   */

.corporateArea {
    padding: 80px 0 140px;
    background: url(./img/bg_areamap.png) no-repeat right 1% top 8%;
    background-size: 320px;
}

.corporateArea .flex {
    justify-content: flex-start;
    font-weight: 500;
    margin: 40px 0 0;
}

.corporateArea h3 {
    display: inline-block;
    font-size: 17px;
    background: var(--white);
    border: solid 2px var(--main-color02);
    border-radius: 4px;
    padding: 3px 20px;
    margin-bottom: 15px;
}

.corporateArea p:first-of-type {
    font-size: 17px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.corporateArea p:last-of-type {
    font-size: 15px;
}

.corporateArea figure {
    margin: 40px 0 0;
}



/* -----------------------------------------------------------
 coporateAward
-----------------------------------------------------------   */

.coporateAward {
    margin-bottom: 60px;
}

.coporateAwardList {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.coporateAwardList img {
    width: 100%;
    height: 340px;
    object-fit: cover;
}

.coporateAward p {
    padding: 20px;
}

/* -----------------------------------------------------------
 topFaq
-----------------------------------------------------------   */

.topFaq {
    /* margin-bottom: 100px; */
}

.topFaq dl {
    margin-top: 30px;
}

.topFaq dt {
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    padding: 19px 30px 15px 38px;
    position: relative;
    border-top: #333 dashed 1px;
    transition: 0.7s;
    line-height: 1.3;
}

.topFaq dt:first-child {
    border-top: none;
}

.topFaq dt:before {
    content: "Q.";
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 14px;
    left: 5px;
    color: var(--sub-color02);
}

.topFaq dt:after {
    position: absolute;
    top: 50%;
    right: 15px;
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -8px;
    border-bottom: 2px solid var(--sub-color02);
    border-right: 2px solid var(--sub-color02);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.topFaq dd {
    display: none;
    padding: 0 10px 30px 38px;
    position: relative;
    word-break: break-all;
}

.topFaq dd:before {
    content: "A.";
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: -5px;
    left: 5px;
    color: var(--red);
}

.topFaq span {
    display: block;
    font-weight: bold;
}

.topFaq ul li {
    margin-bottom: 20px;
}

.topFaq ul li:last-child {
    margin-bottom: 0;
}

.topFaq a {
    font-weight: bold;
}



/* -----------------------------------------------------------
 #toc_container
-----------------------------------------------------------   */

#toc_container ul ul {
    margin-left: 0 !important;
}

#toc_container ul li:before, #toc_container ul li:after {
    position: absolute;
    top: 8px;
    left: 5px;
    margin: auto;
    content: '';
    vertical-align: middle;
}

#toc_container ul li:before {
    width: 7px;
    height: 7px;
    background: var(--main-color01);
    border-radius: 0;
}

#toc_container ul li:after {
    top: 10px;
    left: 7px;
    width: 2px;
    height: 2px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wysiwyg #toc_container ul.toc_list li {
    padding-left: 20px !important;
}




/* -----------------------------------------------------------
 .staffProf
-----------------------------------------------------------   */

#main .single-workcontent .staffProf,
#main .single-content .staffProf {
    margin-bottom: 60px;
}

#main .single-content .staffProf {
    margin-top: 60px;
}

#main .single-workcontent .profileDetail,
#main .single-content .profileDetail {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

#main .single-workcontent .profileDetail .mainpic,
#main .single-content .profileDetail .mainpic {
    width: 30%;
}

#main .single-workcontent .profileDetail .mainpic img,
#main .single-content .profileDetail .mainpic img {
    width: 100%;
    border-radius: 10px;
}

#main .single-workcontent .profileDetail .maindetail,
#main .single-content .profileDetail .maindetail {
    width: 65%;
}

#main .single-workcontent .profileDetail .positionTxt,
#main .single-content .profileDetail .positionTxt {
    margin-bottom: 15px;
    border-bottom: none;
}

#main .single-workcontent .profileDetail .positionTxt span,
#main .single-content .profileDetail .positionTxt span {
    color: #fff;
    font-size: 15px;
    background: var(--main-color02);
    border-radius: 20px;
    padding: 5px 15px;
}

#main .single-workcontent .profileDetail .staffName,
#main .single-content .profileDetail .staffName {
    font-size: 22px;
    line-height: 1.3;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: solid 2px var(--main-color02);
}

#main .single-workcontent .profileDetail .staffName span,
#main .single-content .profileDetail .staffName span {
    display: inline-block;
    margin-left: 10px;
    color: #131155;
    font-size: 15px;
}

#main .single-workcontent .profileDetail .license p,
#main .single-content .profileDetail .license p {
    background: #ff9500;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    display: block;
    padding: 3px 10px;
    margin: 15px 0 10px;
}

#main .single-workcontent .fbtn,
#main .single-content .fbtn {
    margin-bottom: 0;
    margin-top: 20px;
    text-align: right;
}

#main .single-workcontent .fbtn a,
#main .single-content .fbtn a {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    padding-left: 32px;
    color: var(--body-text-color);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #d8dadd;
    text-underline-offset: 2px;
}

#main .single-workcontent .fbtn a::before,
#main .single-content .fbtn a::before,
#main .single-workcontent .fbtn a::after,
#main .single-content .fbtn a::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
    right: -20px;
}

#main .single-workcontent .fbtn a::before,
#main .single-content .fbtn a::before {
    width: 26px;
    height: 26px;
    background: var(--main-color01);
    opacity: 1.0;
    border-radius: 100vh;
}

#main .single-workcontent .fbtn a::after,
#main .single-content .fbtn a::after {
    --mask: url(img/svg_arrow01.svg);
    width: 26px;
    height: 16px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
}

#main .single-workcontent .fbtn .btn::before,
#main .single-workcontent .fbtn .btn::after,
#main .single-content .fbtn .btn::before,
#main .single-content .fbtn .btn::after {
    content: none;
}

#main .single-workcontent .license ul li,
#main .single-content .license ul li {
    padding-left: 20px;
    position: relative;
}

#main .single-workcontent .license ul li:before, #main .single-workcontent .license ul li:after,
#main .single-content .license ul li:before, #main .single-content .license ul li:after {
    position: absolute;
    top: 8px;
    left: 5px;
    margin: auto;
    content: '';
    vertical-align: middle;
}

#main .single-workcontent .license ul li:before,
#main .single-content .license ul li:before {
    width: 7px;
    height: 7px;
    background: var(--main-color01);
    border-radius: 0;
}

#main .single-workcontent .license ul li:after,
#main .single-content .license ul li:after {
    top: 10px;
    left: 7px;
    width: 2px;
    height: 2px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}



/* -----------------------------------------------------------
    telapge
----------------------------------------------------------- */

#telpage header,
#telpage footer,
#telpage #cornerName,
#telpage #breadcrumbs {
    display: none;
}

body#telpage {
    background: var(--main-color02);
    min-width: auto;
}

#telpage #contents {
    text-align: center;
    color: #fff;
    padding-top: 50px;
}

#telpage .inner {
    width: auto;
}

#telpage .contactBox > .flex {
    justify-content: center;
}

.campaign-page * {
    box-sizing: border-box;
}

.campaign-page .pageTitle,
.campaign-page .pagePath,
.campaign-page .side {
    display: none;
}

.campaign-page .contents {
    position: relative;
    margin: 0 auto 40px;
    width: 100%;
}

.campaign-page .main {
    width: 100%;
}

.campaign-page .c-campaign__header-image img {
    width: 100%;
}

.campaign-page .l-promo,
.campaign-page .c-special-offers {
    padding: 32px 0;
    background: url("./img/character_bg.png") top left repeat #171c61;
    background-size: 50% auto;
}

.campaign-page .c-special-offers {
    background: none;
}

.campaign-page .l-promo.type02,
.campaign-page .c-special-offers.type02 {
    background: #FFFFFF;
    padding: 80px 0 80px;
}

.campaign-page .l-promo__inner,
.campaign-page .c-special-offers__wrap {
    margin: 0 auto;
    width: 1000px;
}

.campaign-page .c-reservation {
    background-color: #fff;
    border-radius: 24px;
    margin-bottom: 40px;
    padding: 19px 46px;
    position: relative;
}

.campaign-page .c-reservation::before {
    display: none;
}

.campaign-page .c-reservation__content {
    display: flex;
    align-items: center;
    gap: 36px;
}

.campaign-page .c-reservation__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.campaign-page .c-reservation__text {
    color: #23ac38;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
}

.campaign-page .c-reservation__text::before {
    transform: rotate(-30deg);
}

.campaign-page .c-reservation__text::before, .c-reservation__text::after {
    background-color: #23ac38;
    border-radius: 4px;
    content: '';
    width: 4px;
    flex-shrink: 0;
}

.campaign-page .c-reservation__text::after {
    transform: rotate(30deg);
}

.campaign-page .c-reservation__phone-number {
    color: #e50000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 46px;
    font-family: 'LINESeedJP', sans-serif;
    font-weight: bold;
    line-height: 1;
}

.campaign-page .c-reservation__phone-number::before {
    background-image: url(./img/ico_freedial04.png);
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: block;
    width: 78px;
    height: 44px;
    flex-shrink: 0;
}

.campaign-page .c-reservation__details {
    font-size: 16px;
    font-weight: bold;
}

.campaign-page .l-campaign a:link, .l-campaign a:visited {
    transition: .25s;
}

.campaign-page .c-reservation__form-button::before {
    background-image: url(./img/campaign-icon_mail.svg);
    background-repeat: no-repeat;
    background-position: center;
    content: '';
    display: block;
    width: 50px;
    height: 35px;
    flex-shrink: 0;
}

.campaign-page .c-reservation__form-button:link, .c-reservation__form-button:visited {
    color: #fff;
    text-decoration: none;
}

.campaign-page .c-reservation__form-button {
    background-color: #d0004e;
    border-radius: 100px;
    box-shadow: 0 4px 0 #a6003e;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    text-align: center;
    padding: 15px 44px;
    width: 404px;
    box-sizing: border-box;
    position: relative;
}

.campaign-page .c-reservation__form-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.campaign-page .c-reservation__form-tit {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: -.06em;
}

.campaign-page .c-reservation__form-details {
    background-color: #fff;
    border-radius: 10px;
    color: #a6003e;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.5;
    padding: 2px;
}

.campaign-page .c-reservation__form-button:hover {
    transition: .25s ease;
    background-color: #d93371;
    box-shadow: 0 2px 0 #a6003e;
    color: #fff !important;
    transform: translateY(2px);
}

.campaign-page .c-promo__content,
.campaign-page .c-special-offers__header {
    padding: 0;
    margin: 126px 0 105px;
    position: relative;
}

.campaign-page .c-special-offers__header {
    padding: 0;
    margin: 50px 0 50px;
    position: relative;
}

.campaign-page .c-promo__title {
    position: relative;
    margin: 0 auto;
    padding: 8px 15px;
    background: none;
    text-align: center;
    font-size: 23px;
}

.campaign-page .c-promo__title-text {
    position: relative;
}

.campaign-page .c-promo__title-text p {
    display: contents;
    font-size: 50px;
    color: #e95f19;
}

.campaign-page .stroke-text p {
    color: #070a39;
    --stroke-color: #fff;
    --stroke-width: 4px;
    text-shadow: calc(var(--stroke-width)* 1) calc(var(--stroke-width)* 0) 0 var(--stroke-color), calc(var(--stroke-width)* 0.9239) calc(var(--stroke-width)* 0.3827) 0 var(--stroke-color), calc(var(--stroke-width)* 0.7071) calc(var(--stroke-width)* 0.7071) 0 var(--stroke-color), calc(var(--stroke-width)* 0.3827) calc(var(--stroke-width)* 0.9239) 0 var(--stroke-color), calc(var(--stroke-width)* 0) calc(var(--stroke-width)* 1) 0 var(--stroke-color), calc(var(--stroke-width)* -0.3827) calc(var(--stroke-width)* 0.9239) 0 var(--stroke-color), calc(var(--stroke-width)* -0.7071) calc(var(--stroke-width)* 0.7071) 0 var(--stroke-color), calc(var(--stroke-width)* -0.9239) calc(var(--stroke-width)* 0.3827) 0 var(--stroke-color), calc(var(--stroke-width)* -1) calc(var(--stroke-width)* 0) 0 var(--stroke-color), calc(var(--stroke-width)* -0.9239) calc(var(--stroke-width)* -0.3827) 0 var(--stroke-color), calc(var(--stroke-width)* -0.7071) calc(var(--stroke-width)* -0.7071) 0 var(--stroke-color), calc(var(--stroke-width)* -0.3827) calc(var(--stroke-width)* -0.9239) 0 var(--stroke-color), calc(var(--stroke-width)* 0) calc(var(--stroke-width)* -1) 0 var(--stroke-color), calc(var(--stroke-width)* 0.3827) calc(var(--stroke-width)* -0.9239) 0 var(--stroke-color), calc(var(--stroke-width)* 0.7071) calc(var(--stroke-width)* -0.7071) 0 var(--stroke-color), calc(var(--stroke-width)* 0.9239) calc(var(--stroke-width)* -0.3827) 0 var(--stroke-color);
}

.campaign-page .c-promo__title-text::before {
    background-image: url(./img/campaign-title_img.svg);
    background-repeat: no-repeat;
    background-position: center;
    content: '';
    position: absolute;
    top: -60px;
    left: -52px;
    width: 67px;
    height: 62px;
}

.campaign-page .c-special-offers .c-promo__title-text::before {
    display: none;
}

.campaign-page .c-promo__item {
    position: relative;
}

.campaign-page .c-promo__details,
.campaign-page .c-special-offers .c-special-offers__list {
    background-color: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.campaign-page .c-promo__details img,
.campaign-page .c-special-offers .c-special-offers__offer-details img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.campaign-page .c-campaign__btn {
    margin-top: 40px;
}

.campaign-page .a-campaign-btn__link {
    background-color: #d0004e;
    border-radius: calc(100vw* 100 / 430);
    box-shadow: 0 calc(4vw* 100 / 430) 0 #a6003e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: calc(26vw* 100 / 430);
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: -.05em;
    padding: calc(16vw* 100 / 430) calc(24vw* 100 / 430) calc(16vw* 100 / 430) calc(100vw* 100 / 430);
    position: relative;
    text-align: center;
    min-height: calc(50vw* 100 / 430);
}

.campaign-page .a-campaign-btn__link {
    border-radius: 100px;
    box-shadow: 0 4px 0 #a6003e;
    flex-direction: row;
    font-size: 30px;
    padding: 0 24px;
    min-height: 104px;
    margin: 0 auto;
    width: 520px;
    box-sizing: border-box;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.campaign-page .a-campaign-btn__link:hover {
    transition: .25s ease;
    background-color: #d93371;
    box-shadow: 0 2px 0 #a6003e;
    color: #fff !important;
    transform: translateY(2px);
}

.campaign-page .c-campaign__footer-title {
    border-bottom: 4px dotted #070a39;
    color: #070a39;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    padding: 0 72px 16px;
    margin: 0 0 20px;
    position: relative;
}

.campaign-page .c-campaign__footer-title {
    font-size: 32px;
    padding: 0 72px 16px;
    margin: 0 0 40px;
    color: #070a39;
}

.campaign-page .c-showroom {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}

.campaign-page .c-showroom__location {
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.campaign-page .c-showroom__name {
    font-size: 20px;
    font-weight: bold;
}

.campaign-page .c-showroom__image {
    height: auto;
}

.campaign-page .c-showroom__image img {
    width: 100%;
    height: auto;
}

.campaign-page .c-showroom__location iframe {
    width: 100%;
    height: 300px;
}

.campaign-page .c-showroom__address {
    font-size: 16px;
    line-height: 1.8;
}

.campaign-page .c-showroom__btn {
    margin-top: auto;
}

.campaign-page .l-campaign a:link, .l-campaign a:visited {
    transition: .25s;
}

.campaign-page .a-btn__link {
    background-color: #1A2466;
    border-radius: calc(100vw* 100 / 430);
    box-shadow: 0 calc(4vw* 100 / 430) 0 #0B1244;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: calc(26vw* 100 / 430);
    font-weight: bold;
    line-height: 1.3;
    padding: calc(12vw* 100 / 430) calc(16vw* 100 / 430);
    position: relative;
    text-align: center;
    min-height: calc(50vw* 100 / 430);
    align-items: center;
}

.campaign-page .a-btn__link {
    border-radius: 100px;
    box-shadow: 0 4px 0 #0B1244;
    flex-direction: row;
    font-size: 26px;
    padding: 0 48px;
    padding-left: 82px;
    min-height: 72px;
    margin: 0 auto;
    width: max-content;
    position: relative;
}

.campaign-page .a-btn__link.c-showroom__link {
    color: #fff;
    text-decoration: none;
    background-color: #FD670B;
    font-size: calc(20vw* 100 / 430);
    padding-left: calc(42vw* 100 / 430);
    box-shadow: 0 calc(4vw* 100 / 430) 0 #D25000;
}

.campaign-page .a-btn__link.c-showroom__link {
    font-size: 16px;
    padding-left: 42px;
    padding-right: 0;
    box-shadow: 0 4px 0 #D25000;
    width: 100%;
    box-sizing: border-box;
}

.campaign-page .a-btn__link::before {
    background-color: #fff;
    -webkit-mask-image: url(./img/campaign-btn_arrow.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    mask-image: url(./img/campaign-btn_arrow.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(16vw* 100 / 430);
    width: calc(50vw* 100 / 430);
    height: calc(50vw* 100 / 430);
}

.campaign-page .a-btn__link::before {
    left: 16px;
    width: 50px;
    height: 50px;
}

.campaign-page #jsHeader > nav {
    margin-bottom: 0;
}

.campaign-page #cornerName {
    display: none;
}

.campaign-page #breadcrumbs {
    display: none;
}

/* -----------------------------------------------------------
    contactTel
----------------------------------------------------------- */
.contactTel {
    background: var(--white);
    border: solid 4px var(--main-color01);
    border-radius: 20px;
    padding: 50px;
}

.contactTel h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--main-color02);
    line-height: 1;
}

.contactTel h3 span {
    display: inline-block;
    margin-right: 5px;
    background: var(--main-color02);
    color: var(--white);
    border-radius: 4px;
    padding: 5px;
}

.contactTel h3 strong {
    color: var(--red);
}

.contactTel .top {
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
}

.contactTel .tel_number {
    display: inline-block;
    position: relative;
    line-height: 1;
    font-family: var(--en-font-family);
    font-weight: 600;
    font-size: 60px;
    padding-left: 40px;
    color: var(--main-color02);
}

.contactTel .box > div {
    margin-top: 10px;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.contactTel .tel_number::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 85px;
    background: url(./img/icon_tel02.png) no-repeat;
    background-size: contain;
    top: 10px;
    left: 0;
}

.contactTel .open_info {
    line-height: 1;
    display: inline-block;
    font-size: 17px;
    border: solid 2px var(--body-text-color);
    padding: 10px 25px;
    border-radius: 4px;
}

.contactTel .bottom {
    margin-top: 30px;
    padding-top: 30px;
    border-top: solid 2px var(--main-color02);
}

.contactTel .bottom p {
    margin-top: 10px;
    text-align: center;
    font-size: 15px;
}

/* -----------------------------------------------------------
    menuCommon
----------------------------------------------------------- */
.menuCommon {
    padding: 100px 0;
    margin: 100px 0;
    background: var(--sub-color04);
    border-radius: 100px;
}

.menuCommon b {
    font-weight: 700;
}

.menuCommon .tl02 b {
    color: var(--red);
}

.menuCommon .warning-contents {
    position: relative;
    background: var(--red);
    padding: 40px;
    border-radius: 200px;
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    color: var(--white);
    line-height: 1.4;
}

.menuCommon .warning-contents b {
    color: #ffe4a2;
}

.menuCommon .warning-contents small {
    font-size: 30px;
}

.menuCommon .section01 {
    margin-top: 80px;
}

.menuCommon .section01 ul {
    margin: 60px auto 40px;
}

.menuCommon .section01 .warning-contents {
    padding: 40px 40px 20px;
}

.menuCommon .section01 .warning-contents::before,
.menuCommon .section01 .warning-contents::after {
    content: "";
    position: absolute;
    background-size: contain;
}

.menuCommon .section01 .warning-contents::before {
    width: 83px;
    height: 89px;
    background: url(./img/shine01.png);
    top: 20px;
    left: -20px;
}

.menuCommon .section01 .warning-contents::after {
    width: 93px;
    height: 80px;
    background: url(./img/shine02.png);
    bottom: 20px;
    right: -20px;
}

.menuCommon .section01 .warning-contents p {
    margin-bottom: 10px;
}

.menuCommon .section02 .compareTable thead th {
    border-left: solid 2px var(--sub-color04);
}

.menuCommon .section02 .warning-contents,
.menuCommon .section03 .warning-contents {
    margin: 130px auto 0;
    width: 72%;
}

.menuCommon .section02 .warning-contents::before,
.menuCommon .section03 .warning-contents::before {
    content: "";
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    top: -100px;
    --r: 5px;
    width: 35px;
    aspect-ratio: 1 / 2;
    --_g: calc(var(--r) / tan(22.5deg)) left var(--r), #000 98%, #0000 101%;
    -webkit-mask: conic-gradient(from 67.5deg at calc(var(--r) / (3 * sqrt(2) - 4) - 100% / tan(22.5deg)) 50%, #000 45deg, #0000 0) 0 0 / calc(100% - var(--r) / sqrt(2)) no-repeat, radial-gradient(var(--r) at calc(100% - var(--r) * sqrt(2)) 50%, #000 98%, #0000 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g));
    clip-path: polygon(100% 50%, 0 100%, 0 0);
    background: var(--main-color02);
}

.menuCommon .section02 .cost-contents {
    border: solid 4px var(--red);
    border-radius: 20px;
    background: var(--white);
    padding: 50px;
    margin-top: 40px;
}

.menuCommon .section02 .cost-contents h4 {
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    color: var(--red);
}

.menuCommon .section02 .cost-contents ul {
    justify-content: center;
    margin-top: 25px;
    gap: 30px;
}

.menuCommon .section02 .cost-contents li {
    width: 300px;
    background: var(--main-color02);
    border-radius: 20px;
    padding: 25px;
    box-sizing: border-box;
}

.menuCommon .section02 .cost-contents li img {
    width: 100%;
}

.menuCommon .section02 .cost-contents li p {
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 15px;
}

.menuCommon .section03 ul {
    flex-wrap: wrap;
}

.menuCommon .section03 li {
    position: relative;
    box-sizing: border-box;
    width: 530px;
    background: var(--main-color02);
    color: var(--white);
    border-radius: 20px;
    padding: 55px 40px 40px;
    margin-top: 60px;
}

.menuCommon .section03 li::before {
    content: "";
    position: absolute;
    background-size: contain;
    width: 142px;
    height: 131px;
    top: -80px;
    left: 0;
}

.menuCommon .section03 li:nth-child(1)::before {
    background: url(./img/menuPlan_balloon01.png) no-repeat;
}

.menuCommon .section03 li:nth-child(2)::before {
    background: url(./img/menuPlan_balloon02.png) no-repeat;
}

.menuCommon .section03 li:nth-child(3)::before {
    background: url(./img/menuPlan_balloon03.png) no-repeat;
}

.menuCommon .section03 li:nth-child(3) {
    width: 100%;
}

.menuCommon .section03 li h4 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 15px;
}

.menuCommon .section03 li img {
    width: 100%;
}

.menuCommon .section03 li p {
    margin-top: 15px;
}

.menuCommon .section03 .content01 {
    margin-top: 40px;
}

.menuCommon .section03 .warning-contents {
    padding: 20px;
}

.menuCommon .section03 figure {
    margin-top: 25px;
}

.menuCommon .section03 .content02 {
    margin-top: 25px;
}

.menuCommon .section04 h4 {
    font-size: 40px;
    font-weight: 700;
    color: var(--main-color02);
    line-height: 1.4;
    text-align: center;
}

.menuCommon .section04 h4 b {
    color: var(--red);
    font-weight: 700;
}

.menuCommon .section04 h4 small {
    font-size: 26px;
}

.menuCommon .section04 ul {
    margin-top: 40px;
}

.menuCommon .section04 li {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: solid 2px var(--main-color02);
}

.menuCommon .section04 li h5 {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    padding-left: 25px;
    color: var(--main-color02);
    margin-bottom: 5px;
}

.menuCommon .section04 li h5::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid 3px var(--main-color02);
    border-radius: 50%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.menuCommon .section05 .dataTable {
    margin-top: 40px;
}

.menuCommon .section05 .dataTable td b {
    color: var(--red);
    font-weight: 500;
}

/* -----------------------------------------------------------
    first_point
----------------------------------------------------------- */
.first_point .flex {
    margin-top: 100px;
    width: 100%;
    gap: 60px;
    justify-content: flex-start;
    background-size: contain;
}

.first_point .flex.right {
    flex-direction: row-reverse;
}

.first_point > * {
    flex: 1;
}

.first_point figure {
    margin: 0;
    width: 47%;
}

.first_point figure img {
    width: 100%;
}

.first_point .innBox > div {
    position: relative;
    width: 550px;
    box-sizing: border-box;
}

.first_point .innBox h3 {
    position: relative;
    padding-top: 100px;
    margin-bottom: 25px;
    font-size: 34px;
    font-weight: 700;
    color: var(--main-color02);
    line-height: 1.35;
}

.first_point .innBox h3::before {
    content: "";
    position: absolute;
    background-size: contain;
    width: 183px;
    height: 169px;
}

.first_point .innBox h3 span {
    color: var(--main-color01);
}

.first_point .innBox p {
    margin-top: 10px;
    font-size: 17px;
    line-height: 2;
    letter-spacing: -0.05em;
}

.first_point .innBox .btn {
    margin-top: 40px;
}

/* -----------------------------------------------------------
    worksTabs
----------------------------------------------------------- */
/*タブ切り替え全体のスタイル*/
.worksTabs {
    position: relative;
    margin-top: 40px;
}

.worksTabs::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--main-color02);
    left: 0;
    top: 50px;
}

.worksTabs .inner {
    margin: 0 auto;
    display: grid;
    align-items: flex-end;
    grid-template-columns: repeat(7, minmax(0, 1fr))
        /*auto*/
    ;
    grid-template-rows: 1fr auto;
    z-index: 10;
    position: static;
}

/* タブのスタイル */
.worksTabs .tab {
    display: flex;
    margin: 0 3px;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    font-size: var(--base-font-size);
    text-align: center;
    color: var(--black);
    background: var(--white);
    box-sizing: border-box;
    position: relative;
    padding: 13px 12px 14px 12px;
    cursor: pointer;
    z-index: 1;
    transition: none;
    border-top: 2px solid var(--main-color02);
    border-left: 2px solid var(--main-color02);
    border-right: solid 2px var(--main-color02);
    height: 50px;
    border-radius: 4px 4px 0 0;
}

.worksTabs .tab.all {
    padding: 13px 8px 14px 28px;
}

.worksTabs .tab.all::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 16px;
    background: url(./img/three_line.png) no-repeat;
    background-size: contain;
    left: 30px;
    top: 17px;
}

.worksTabs .tab b,
.worksTabs .tab i {
    font-weight: 500;
}

.worksTabs .tab:first-of-type::after {
    width: 100vw;
}

.worksTabs input:checked + .tab,
.worksTabs .tab:hover {
    z-index: 100;
    background: var(--main-color02);
    color: var(--white);
}

.worksTabs input:checked + .tab.all::before,
.worksTabs .tab.all:hover::before {
    background-image: url(./img/three_line_w.png);
    background-repeat: no-repeat;
}

.worksTabs input:checked + .tab + .worksTabs .tab {
    color: #1c8aff;
}

.worksTabs input:checked + .tab::after,
.worksTabs .tab:hover::after {
    background: transparent;
}

.worksTabs input:checked + .tab:first-of-type::after,
.worksTabs .tab:first-of-type:hover::after {
    left: 100%;
    background: var(--black);
}

/*ラジオボタンを全て消す*/
input[name="tab"] {
    display: none;
}

/*タブ切り替えの中身のスタイル*/
.tabContent {
    display: none;
    padding: 35px 0 25px;
    clear: both;
    overflow: hidden;
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

.tabContent::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - 50px);
    background: #f1f1f1;
    left: 0;
    bottom: -2px;
    border-top: solid 2px var(--main-color02);
    border-bottom: solid 2px var(--main-color02);
    z-index: 2;
}

.tabContent .cats {
    position: relative;
    z-index: 2;
}

.tabContent .cats > a,
#works .tabContent .cats > a {
    /* background: var(--white); */
    background: var(--white);
    color: var(--body-text-color) !important;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 15px 12px;
    margin: 0 10px 10px 0;
    line-height: 1;
    border: 2px solid var(--main-color02);
    transition: all 0.3s ease;
    border-radius: 4px;
}

.tabContent .cats > a.active,
.tabContent .cats > a:hover,
#works .tabContent .cats > a.active,
#works .tabContent .cats > a:hover {
    background: var(--main-color02);
    color: var(--white) !important;
    border: solid 2px var(--main-color02);
}

/*選択されているタブのコンテンツのみを表示*/
.worksTabs input:checked + label + .tabContent {
    display: block;
    width: 1100px;
    /* border-color: var(--main-color02); */
    /* background-color: var(--main-color02); */
}


#privacy .tl03 {
    margin: 60px 0 15px;
    display: block;
    width: 1100px;
    /* border-color: var(--main-color02); */
    /* background-color: var(--main-color02); */
}

#privacy .tl03 {
    margin: 60px 0 15px;
}

/*-------------------#simulation-----------------*/

.simulationTitle .tl02 {
    margin-bottom: 0;
}

.simulationTitle p {
    margin-top: 40px;
}

.simulationQuestion {
    position: relative;
    margin-bottom: -100px;
    border-radius: 0 0 0 100px;
    z-index: 2;
}

.main .simulationLead {
    overflow: hidden;
}

.main .simulationFlow {}

.main .simulationFlowList {
    display: flex;
    flex-flow: column wrap;
    margin-bottom: 0;
}

.main .simulationFlowList li {
    background: #00395c;
    padding: 10px;
    margin: 0 0 40px;
    width: 100%;
    box-sizing: border-box;
}

.main .simulationFlowList li::before,
.main .simulationFlowList li::after {
    content: none;
}

.main .simulationFlowList li:last-of-type {
    /* margin-right: 0; */
}

.main .simulationFlowList li:nth-of-type(n + 2)::before {
    content: "";
    border-top: 30px solid #00395c;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    top: -35px;
    left: 50%;
    border-radius: 0;
    transform: translateX(-50%);
    background: none;
    width: initial;
    height: initial;
}

.main .simulationFlowList dt {
    font-size: 18px;
    background: #fff;
    border-radius: 10px;
    padding: 5px;
    display: flex;
    align-items: flex-start;
    font-weight: 700;
    box-sizing: border-box;
}

.main .simulationFlowList dt .step {
    display: inline-block;
    background: #ff9a38;
    color: #fff;
    padding: 3px 10px;
    line-height: 1.4;
    border-radius: 5px;
    margin-right: 10px;
}

.main .simulationFlowList dd {
    background: #fff;
    margin-top: 10px;
    padding: 10px;
    text-align: justify;
    box-sizing: border-box;
}

.main .simulationFlowList dd p {
    margin-bottom: 0;
}

.price_simulation .radio_wrap {
    display: flex;
    flex-wrap: wrap;
    /* align-items: flex-start; */
    margin: 0 0 20px;
}

.price_simulation .radio-inline__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

.price_simulation .radio-inline__label {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 0 2% 10px 0;
    border-radius: 10px;
    transition: all 0.2s;
    border: 3px solid var(--main-color02);
    background: var(--white);
    color: var(--main-color02);
    box-sizing: border-box;
    width: 32%;
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
}

.price_simulation .radio-inline__label img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

.radio-inline__label.finshed {
    display: inline-block;
    margin: 2% 0 4%;
    padding: 4%;
    border-radius: 3px;
    transition: all 0.2s;
    border: 3px solid var(--main-color02);
    color: var(--main-color02);
    box-sizing: border-box;
    text-align: center;
    width: 100%;
}

.radio-inline__input:checked + .radio-inline__label {
    background: var(--main-color02);
    border: 3px solid var(--main-color02);
    color: var(--white);
}

.radio-inline__input:checked + .radio-inline__label.finshed {
    background: var(--main-color02);
    border: solid var(--main-color02) 3px;
    color: var(--white);
}

.radio-inline__input:focus + .radio-inline__label {
    outline-color: var(--main-color02);
    outline-offset: -2px;
    outline-style: auto;
    outline-width: 5px;
}

.price_simulation .radio-inline__label:nth-of-type(3n) {
    margin-right: 0;
}

.price_simulation .radio_wrap_0 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0;
}

.price_simulation input[type="number"] {
    padding: 10px;
    width: 100px;
    border: 2px solid var(--main-color02);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin-right: 10px;
    text-align: center;
    font-size: 18px;
}

.price_simulation_result_table1,
.price_simulation_result_table2 {
    border-collapse: separate;
    border-radius: 10px;
    border: 3px solid var(--main-color02);
    width: 100%;
    background: var(--white);
}

.price_simulation_result_table1 th,
.price_simulation_result_table2 th {
    border-right: 1px solid var(--main-color02) !important;
    font-weight: 700;
    text-align: center;
    width: 30%;
}

.price_simulation_result_table1 th {
    background: var(--main-color02);
    color: var(--white);
    border-radius: 3px 0 0 3px;
}

.price_simulation_result_table1 td,
.price_simulation_result_table2 td {
    text-align: center;
    vertical-align: middle;
    font-size: 1.2em;
}

.price_simulation_result_table1 td {
    color: var(--main-color02);
}

.price_simulation_result_table2 tr:nth-child(2n) th,
.price_simulation_result_table2 tr:nth-child(2n) td {
    background: var(--sub-color02);
}

#simulation .main .formBox p {
    text-align: left;
}

.submit_result,
.back_to_simulation_btn {
    --background: var(--main-color01);
    flex: 1;
    width: fit-content;
    font-size: 17px;
    font-weight: 700;
    border-radius: 35px;
    padding: 20px 40px 19px 40px;
    display: block;
    text-align: center;
    box-sizing: border-box;
    color: #fff !important;
    text-decoration: none !important;
    position: relative;
    background-color: var(--background);
    font-family: var(--base-font-family);
    transition: 0.3s ease;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border: 0;
}

#simulation .price_simulation_result {
    position: relative;
    padding: 300px 0 100px;
    top: -100px;
    margin-bottom: -200px;
    border-radius: 0 0 0 100px;
}

#simulation .contactTitle {
    margin-top: 200px;
}