@charset "UTF-8";
/*
Theme Name: shiga-nuritatsu
Theme URI: https://shiga.nuritatsu.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: 16px;
    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;
}

.mt-0 {
    margin-top: 0 !important;
}

.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;
}

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

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

.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;
}

.cats span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    padding-left: 17px;
    font-size: 14px;
}

.cats span::before {
    position: absolute;
    content: '';
    width: 14px;
    height: 14px;
    background:url(./img/tag_icon.png) no-repeat;
    top: 6px;
    left: 0;
    margin: auto 0;
}

.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: 125px 0;
    background: url(./img/bg_contactTitle.jpg) 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;
    text-shadow:
        3px 3px 2px var(--sub-color02),
        -3px 3px 2px var(--sub-color02),
        -3px -3px 0 var(--sub-color02),
        3px -3px 0 var(--sub-color02);
}

.contactBox {
    background: #ebdfd7;
    padding: 50px 0 120px;
    text-align: left;
    line-height: 1;
}

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

.contactBox .wpcf7-spinner {
    display: block;
    margin: 10px auto 0;
}

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

.contactBox .tel {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 0;
}

.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: 700;
    font-size: 54px;
    color: var(--main-color01);
    padding-left: 60px;
    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;
}

.contactBox .tel_number::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 27px;
    background: url(./img/ico_fdl01.png) no-repeat;
    background-size: contain;
    top: 15px;
    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 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 50px 0;
    margin-top: 50px;
    border-bottom: dotted 3px var(--sub-color02);
    border-top: dotted 3px var(--sub-color02);
}

.contactBox .simulation h3 {
    display: inline-block;
    font-size: 17px;
    font-weight: 700;
    background-color: var(--sub-color03);
    color: var(--white);
    padding: 15px 30px;
    border-radius: 50px;
}

.contactBox .simulation h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--sub-color03);
}

.contactBox .simulation p {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.6;
}




.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-color01);
    flex: 1;
    min-width: 250px;
    width: fit-content;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50px;
    border: solid 4px var(--sub-color03);
    padding: 20px 50px 22px 50px;
    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: 0.75 !important;
}

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

.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(--sub-color02);
    border: solid 2px var(--sub-color03);
    border-radius: 50px;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin: auto;
    position: relative;
    padding: 0.8em 50px 1.0em 30px;
    text-align: center;
    text-decoration: none;
    transition: ease .2s;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 1;
}

@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;
    /* align-items: center; */
    flex-wrap: wrap;
    gap: 40px;
}

.photoUL li {
    padding: 0;
    background: none;
    font-size: 16px;
    list-style: none;
}

.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 - 27px);
    margin: 30px 0 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.25;
    font-weight: 700;
    text-align: center;
}

.tl01 .ja {
    display: block;
    font-size: 50px;
    color: var(--sub-color03);
    margin-top: 30px;
    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;
}

.tl01 .ja small {
    display: block;
    font-size: 40px;
}

.tl01 .en {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color01);
    font-size: 26px;
    color: var(--white);
    height: 60px;
    background-color: #12a73b;
    border-top: solid 3px #00651c;
    border-bottom: solid 3px #00651c;
    padding: 10px;
    box-sizing: border-box;
}

.tl01 .en::before,
.tl01 .en::after {
    content: "";
    position: absolute;
    width: 58px;
    height: 60px;
    background-size: contain;
    z-index: -1;
}

.tl01 .en::before {
    background-image: url(./img/ribbon_left.png);
    left: -55px;
}

.tl01 .en::after {
    background-image: url(./img/ribbon_right.png);
    right: -55px;
}

.tl01 .en b {
    display: inline-block;
    margin: 0 3px;
    background-color: var(--red);
    padding: 2px 5px;
    border-radius: 5px;
}

.tl02 {
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    position: relative;
}

.tl02.deco::before,
.tl02.deco::after {
    content: "";
    position: absolute;
}

.tl02.deco::after {
    background-image: url(./img/worksHead_birds.png);
    width: 135px;
    height: 51px;
        right: 40px;
    top: 100px;
}

.tl02.deco::before {
    background-image: url(./img/worksHead_fukidashi.png);
    width: 243px;
    height: 72px;
    top: 100px;
    left: 40px;
}

#menu .tl02.deco::before {
    display: none;
}

.tl02.deco.color::before {
    background-image: url(./img/worksHead_fukidashi02.png);
    width: 176px;
    height: 75px;
    top: 100px;
    left: 100px;
}

.tl02.deco.works::before {
    background-image: url(./img/worksHead_fukidashi03.png);
    width: 110px;
    height: 72px;
    top: 100px;
    left: 170px;
}

.tl02 .en {
    display: inline-block;
    position: relative;
    padding: 0 100px;
    font-size: 30px;
    color: var(--sub-color03);
}

.tl02 .en::before,
.tl02 .en::after {
    content: "";
    position: absolute;
    width: 77px;
    height: 77px;
    background-size: contain;
    bottom: -20px;
}

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

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

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

.tl02 .ja {
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 70px;
    color: #FFF;
    margin-top: 40px;
}

.tl02 .ja span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 110px;
    border: solid 4px var(--sub-color03);
    border-radius: 10px;
    background-color: var(--main-color01);
}

.tl02 .ja span:nth-of-type(even) {
    background-color: #269bdb;
}

.tl03 {
    position: relative;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    padding: 20px;
    margin: 80px 0 50px;
    background-color:  #f6efea;
    border-left: solid 10px var(--main-color01);
    border-radius: 10px;
}

.tl04 {
    line-height: 1;
    font-size: 26px;
    font-weight: 700;
    border-bottom: solid 3px var(--main-color01);
    border-top: solid 3px var(--main-color01);
    padding: 15px;
    margin: 50px 0 25px;
}

.tl05 {
    margin-top: 35px;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--sub-color03);
}

.tl06 {
    margin-top: 100px;
    margin-bottom: 10px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    padding-bottom: 10px;
    border-bottom: solid 4px var(--sub-color02);
}

.tlDots {
    position: relative;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.55;
    padding: 30px 0;
}

.tlDots::before,
.tlDots::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 7px;
    background-image: url(./img/tlDots.png);
    background-repeat: repeat-x;
    left: 0;
}

.tlDots::before {
    top: 0;
}

.tlDots::after {
    bottom: 0;
}

.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
----------------------------------------------------------- */
.deterioration-list {
    margin-top: 60px;
    justify-content: center;
}

.deterioration-list li {
    width: 260px;
}

.deterioration-list li p {
    position: relative;
    background-color: var(--white);
    border-radius: 40px;
    padding: 40px;
    height: 166px;
    box-sizing: border-box;
}

.deterioration-list li figure {
    text-align: center;
    margin-top: 30px;
}

.deterioration-list li p::before {
    content: "";
    position: absolute;
    display: inline-block;
    background: var(--white);
    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);
}

.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;
}

.three-merit .list01 ul {
    justify-content: center;
}

.three-merit .list01 li {
    width: 180px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
}

.three-merit .list01 li:nth-of-type(1) {
    background-color: #f18c2e;
}

.three-merit .list01 li:nth-of-type(2) {
    background-color: #12a73b;
}

.three-merit .list01 li:nth-of-type(3) {
    background-color: #8c6e58;
}

.three-merit .list01 li:nth-of-type(4) {
    background-color: #0066b9;
}

.three-merit .list01 p {
    text-align: center;
    margin-top: 15px;
}

.three-merit .list02 {
    display: flex;
    gap: 40px;
    margin-top: 60px;
}

.three-merit .list02 ul {
    width: 640px;
}

.three-merit .list02 li {
    padding: 15px 0;
    font-weight: 700;
    border-bottom: solid 2px var(--sub-color02);
    font-size: 20px;
}

.three-merit .list02 li::before {
    display: inline-block;
    margin-right: 5px;
    color: var(--sub-color03);
    font-size: 20px;
    font-weight: 700;
}

.three-merit .list02 li:nth-of-type(1)::before {
    content: "❶";
}

.three-merit .list02 li:nth-of-type(2):before {
    content: "❷";
}

.three-merit .list02 li:nth-of-type(3)::before {
    content: "❸";
}

/*原因と改善（雨漏りのケース）*/
.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
----------------------------------------------------------- */
.mainBG {
    position: relative;
}

.mainBG::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 80%;
    background-image: url(./img/mainBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    z-index: -1;
}

#header {
    padding: 10px;
    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.bg::before {
    height: 180px;
    background-color: #ffb55d;
}

#header.bg {
    position: relative;
    z-index: 9997 !important;
}

#header.fixed {
    position: fixed;
}

#header.fixed::before {
    height: 85px;
    background-color: #ffb55d;
}

#header.fixed .logo .htxt,
#header.fixed .logo .medalImg {
    display: none;
}

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

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

#header.fixed .headerContact {
    margin-top: 0;
}

#header.fixed .headerContact .tel p span::before {
    width: 32px;
    height: 17px;
    top: 8px;
    left: 0;
}

#header.fixed .headerContact .recruit a {
    padding: 3px 35px 3px 30px;
    font-size: 14px;
}

#header.fixed .headerContact .recruit a::before {
    font-size: 16px;
}

#header.fixed .headerContact .recruit a::after {
    font-size: 12px;
}

#header.fixed #gNav {
    top: -5px;
    margin-bottom: -5px;
}

#header.fixed #gNav ul.nav > li > a::before {
    display: none;
}

/* #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;
    align-items: flex-start;
    z-index: 1;
}

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

#header .logo .htxt {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
    display: block;
    transition: 0.7s;
    color: var(--white);
}

#header .logo a {
    display: flex;
    gap: 20px;
    align-items: center;
}

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

#header .headerContact {
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

#header .headerContact .recruit a {
    position: relative;
    display: inline-block;
    background-color: var(--base-color01);
    color: var(--body-text-color);
    padding: 3px 35px 3px 30px;
    border-radius: 30px;
}

#header .headerContact .recruit a::before {
    position: absolute;
    top: 0;
    left: 15px;
    bottom: 0;
    margin: auto 0;
    font-family: "Font Awesome 5 Free";
    content: '\f0da';
    font-weight: 900;
    font-size: 20px;
    height: 1em;
    color: var(--sub-color02);
    line-height: 1;
}

#header .headerContact .recruit a::after {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto 0;
    font-family: "Font Awesome 5 Free";
    content: '\f24d';
    font-weight: 400;
    font-size: 14px;
    height: 1em;
    color: var(--sub-color02);
    line-height: 1;
}

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

#header .headerContact .tel p {
    display: flex;
    align-items: center;
    line-height: 1;
    transition: 0.7s;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
}

#header .headerContact .tel p span {
    position: relative;
    font-size: 36px;
    font-family: var(--en-font-family);
    font-weight: 700;
    padding: 0 10px 0 50px;
    color: var(--main-color01);
    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;
}

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

/* -----------------------------------------------------------
    nav
----------------------------------------------------------- */
#gNav {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--sub-color03);
    background-color: var(--base-color01);
    border-radius: 60px;
    padding: 0 18px;
    /* box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.1); */
    overflow: initial;
    line-height: 1;
    top: -30px;
    margin-bottom: -30px;
}

#gNav ul.nav {
    display: flex;
    overflow: visible;
    padding: 15px 0;

}

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

#gNav ul.nav > li > a {
    color: var(--body-text-color);
    font-size: 16px;
    font-weight: 700;
    color: var(--sub-color03);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0 35px;
    border-left: solid 1px #ddd1c8;
}

#gNav ul.nav > li:first-child > a {
    border-left: none;
}

#gNav ul.nav > li > a:hover {
    opacity: 1;
    transition: 0.2s;
    color: var(--main-color01);
}

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

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

#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.nav > li:nth-of-type(6) > a::before {
    background-image: url(img/icon_nav06.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(--sub-color03);
    position: absolute;
    z-index: 100;
    width: 450px;
    margin-top: 5px;
    margin-left: -140px;
    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:last-of-type ul {
    margin-left: -109px;
}

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

#gNav > ul > li:hover ul::before {
    content: "";
    position: absolute;
    top: -10px;
    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(--sub-color03);
    border-top: 0;
}

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

#gNav > ul > li ul li.w-full {
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #ddd1c8;
}

#gNav > ul > li ul li.w-full a {
    display: inline-block !important;
}

#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: 14px;
    letter-spacing: -1px;
}

#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_nav08.png);
    mask-image: url(./img/icon_nav08.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 {
    display: flex;
    justify-content: center;
    gap: 70px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding-top: 20px;
}

.hero img {
    width: 1200px;
    object-fit: contain;
}

.hero > div {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    gap: 5px;
}

.hero > div p {
    writing-mode: vertical-rl;
    font-size: 40px;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
}

.hero > div p:last-of-type {
    margin-top: 50px;
}

.hero > div span {
    display: inline-block;
    background-color: var(--sub-color02);
    padding: 20px 15px;
}

.hero > div p:first-of-type span {
    height: 520px;
}

.hero > div p:last-of-type span {
    height: 600px;
}

@media screen and (max-width: 1200px) {
.hero {
    align-items: center;
}

.hero img {
    width: calc(100% - 350px);
}
} 

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

#jsMainv .stage {
    opacity: 0;
}
#jsMainv .stage.slick-initialized {
    opacity: 1;
}

#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: #666360;
    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 {
    background-image: url(img/bgTit_corporate.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: var(--white);
    position: relative;
    z-index: 1;
    top: -67px;
    margin-bottom: -67px;
}

#reason #cornerName {
    background-image: url(img/bgTit_reason.jpg);
}

#first #cornerName {
    background-image: url(img/bgTit_first.jpg);
}

#corporate #cornerName {
    background-image: url(img/bgTit_corporate.jpg);
}

#diagnosis #cornerName {
    background-image: url(img/bgTit_diagnosis.jpg);
}

#rainleaking #cornerName {
    background-image: url(img/bgTit_rainleaking.jpg);
}

#showroom #cornerName {
    background-image: url(img/bgTit_showroom.jpg);
}

#colorsimulation #cornerName {
    background-image: url(img/bgTit_color.jpg);
}

#contact #cornerName {
    background-image: url(img/bgTit_contact.jpg);
}

#menu #cornerName {
    background-image: url(img/bgTit_menu.jpg);
}

#menu #cornerName.apartment {
    background-image: url(img/bgTit_apartment.jpg);
}

#staff #cornerName {
    background-image: url(img/bgTit_staff.jpg);
}

#voice #cornerName {
    background-image: url(img/bgTit_voice.jpg);
}

#blog #cornerName {
    background-image: url(img/bgTit_staff.jpg);
}

#works #cornerName {
    background-image: url(img/bgTit_works.jpg);
}

#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: 40px;
    font-weight: 700;
    line-height: 1;
    margin: 0 auto;
    width: fit-content;
    color: var(--sub-color03);
    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;
}

#cornerName .title small {
    display: block;
    font-size: 30px;
    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 0;
}

.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: #f1e9e4;
}

.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;
}

/* -----------------------------------------------------------
    page-mainv
----------------------------------------------------------- */
.page-mainv {
    margin: 100px auto 0;
}

/* -----------------------------------------------------------
    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 {
    padding: 100px 0;
}

.worksAndBlog .flex {
    align-items: center;
}

.worksAndBlog .head {
    width: 550px;
}

.worksAndBlog .head .tl01 {
    margin-bottom: 60px;
}

.worksAndBlog .head .tl01 .en {
    font-size: 18px;
}

.worksAndBlog .head .tl01 .ja {
    font-size: 40px;
}

.worksAndBlog ul {
    width: 550px;
}

.worksAndBlog li {
}

.worksAndBlog li a {
    display: flex;
    align-items: center;
    color: var(--body-text-color);
    gap: 15px;
    border-bottom: dotted 2px #CCC;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.worksAndBlog li:last-of-type a {
    margin-bottom: 0;
}

.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: #777777;
}

.worksAndBlog li .mainContent .cats span {
    position: relative;
    display: inline-block;
    margin: 1px;
    padding: 6px 15px 8px 32px;
    font-size: 14px;
    color: var(--body-text-color);
    background: var(--white);
    border-radius: 4px;
    border: solid 1px var(--body-text-color);
}

.worksAndBlog li .mainContent .cats span::before {
    left: 15px;
}

/* -----------------------------------------------------------
    sboard
----------------------------------------------------------- */
.sboard {
    padding-bottom: 100px;
}

.sboard ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.sboard li {
    width: 49%;
}

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


/* -----------------------------------------------------------
    aboutUs
----------------------------------------------------------- */
.reason_Mainv img {
    width: 100%;
}

.aboutus {
    padding: 100px 0 140px;
    background-image: url(./img/bg_orange.png);
}

#reason .aboutus {
    border-bottom: solid 3px var(--sub-color02);
}

.aboutus .moovie {
    text-align: center;
    margin-top: 60px;
}

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

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

.aboutus .box:first-of-type .flex {
    margin-top: 0;
}

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

.aboutus .box.right .menuListBnr.flex {
    margin-top: 40px !important;
    flex-direction: row;
    gap: 35px;
}

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

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

.aboutus .box figure {
    margin: 0;
    width: 740px;
}

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

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

.aboutus .box .innBox > div {
    position: relative;
    width: 680px;
    box-sizing: border-box;
    padding: 105px 55px 55px;
    background: #fff7f1;
    border: solid 10px #ffad73;
    /* 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: -85px;
    margin-top: 70px;
}

.aboutus .box.right .innBox > div {
    right: -85px;
    margin-top: 70px;
}

.aboutus .box .innBox .reasonNumber {
    position: absolute;
    display: inline-flex;
    gap: 10px;
    background-color: #12a73b;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    font-family: var(--en-font-family);
    font-weight: 600;
    border-radius: 100px;
    padding: 15px 30px;
    line-height: 1;
}

.aboutus .box:nth-of-type(odd) .innBox .reasonNumber {
    right: 55px;
    top: -55px;
}

.aboutus .box:nth-of-type(even) .innBox .reasonNumber {
    left: 55px;
    top: -55px;
}

.aboutus .box .innBox .reasonNumber span:nth-of-type(1) {
    background-color: var(--white);
    color: #12a73b;
    font-size: 15px;
    padding: 10px 17px 10px 20px;
    border-radius: 20px;
    letter-spacing: 3px;
}

.aboutus .box .innBox .reasonNumber span:nth-of-type(2) {
    color: var(--white);
    font-size: 74px;
}

.aboutus .box.left .innBox picture {
    position: absolute;
    left: -10px;
    top: -120px;
}

.aboutus .box.left .innBox picture img {
    width: 320px;
}

.aboutus .box .innBox h3 {
    margin-bottom: 25px;
    font-weight: 900;
    font-size: 40px;
    color: var(--sub-color03);
    line-height: 1.25;
}

.aboutus .box .innBox p {
    margin-top: 15px;
    line-height: 2;
}

.aboutus .box .innBox p a {
    font-weight: 700;
    color: var(--main-color01);
    text-decoration: underline;
}

.aboutus .btn {
    margin-top: 60px;
}

.aboutus .box .innBox .reason_detail p:first-of-type {
    margin-top: 0;
}

.aboutus .box .innBox .reason_detail .strong {
    margin-top: 15px;
    font-weight: 700;
    color: var(--sub-color03);
}

.aboutus .box .innBox .reason_detail ul {
    margin-top: 15px;
}

.aboutus .box .innBox .reason_detail li {
    font-weight: 700;
}

.aboutus .box .innBox .reason_detail li::before {
    content: "■";
    color: #12a73b;
    display: inline-block;
    margin-right: 5px;
}

.award {
  margin-top: 90px;
  padding-bottom: 0;
}
.award h3 {
    color: var(--main-color02);
    font-size: 21px;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 30px;
    font-weight: 700;
}
.award h3 > img {
  margin: 0 5px 0 0;
}
.award h3 > span {
}
.award h3 > span > span {
  color: var(--main-color01);
  font-size: 40px;
}
.award .award_table {
  width: 100%;
  display: table;
}
.award .award_table > div {
  display: table-cell;
  vertical-align: top;
}
.award .award_table-left {
  width: 385px;
  padding-right: 40px;
  text-align: left;
}
.award .award_table-left img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.award .award_table-right {
  width: auto;
  text-align: left;
}
.award .award_table-right p {
  font-size: 17px;
  text-align: justify;
}

.award .award_list {
  display: flex;
  padding-top: 60px;
  text-align: left;
  justify-content: space-between;
}
.award .award_list p {
  width: 340px;
  margin-bottom: 0;
}
.award .award_list p img {
  width: 100%;
  border-radius: 10px;
}

.award .award_image {
  padding-top: 30px;
  text-align: center;
}
.award .award_image > div {
    display: inline-block;
    text-align: left;
}
.award .award_image img {
  width: 410px;
  height: auto;
}
.award .award_image img:nth-of-type(1) {
    border-radius: 10px 0 0 10px;
}
.award .award_image img:nth-of-type(2) {
    border-radius: 0 10px 10px 0;
}


/* -----------------------------------------------------------
    topWorks
----------------------------------------------------------- */
.topWorks {
    position: relative;
    padding: 100px 0;
    z-index: 0;
}

.topWorks::after {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - 340px);
    background-image: url(./img/bg_green.png);
    top: 0;
    left: 0;
    z-index: -1;
}

.topWorks > .inner {
    overflow: initial;
}

.topWorks > .inner::before, .topWorks > .inner::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

.topWorks > .inner::before {
    width: 219px;
    height: 249px;
    background-image: url(./img/bg_topworks01.png);
    top: -30px;
    left: -40px;
}

.topWorks > .inner::after {
    width: 135px;
    height: 51px;
    background-image: url(./img/bg_topworks02.png);
    top: 100px;
    right: 40px;
}

.topWorks .mainArticle {
    position: relative;
    padding-top: 40px;
    margin-top: 80px;
    border-top: solid 2px var(--sub-color03);
}

.topWorks .mainArticle::before,
.topWorks .mainArticle::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

.topWorks .mainArticle::before {
    width: 181px;
    height: 326px;
    background-image: url(./img/bg_topworks03.png);
    top: 500px;
    left: -180px;
}

.topWorks .mainArticle::after {
    width: 152px;
    height: 239px;
    background-image: url(./img/bg_topworks04.png);
    top: 850px;
    right: -180px;
}

.topWorks h3 {
    text-align: center;
    line-height: 1.25;
}

.topWorks h3 span {
    font-weight: 700;
    border-radius: 50px;
}

.topWorks h3 .en {
    display: inline-block;
    background-color: #12a73b;
    color: var(--white);
    font-size: 18px;
    padding: 10px 40px;
} 

.topWorks h3 .ja {
    display: block;
    margin-top: 15px;
    background-color: var(--white);
    color: var(--sub-color03);
    font-size: 40px;
    padding: 10px;
}

.topWorks .cats {
    margin-top: 10px;
}

.topWorks .before {
    display: flex;
    flex-wrap: wrap;
    margin: 40px 60px 0;
    gap: 40px;
}

.topWorks .before li {
    position: relative;
    width: 470px;
}

.topWorks .before li::before {
    content: "";
    position: absolute;
    width: 106px;
    height: 108px;
    background: url(./img/before_ribbon.png) no-repeat;
    background-size: contain;
    top: -6px;
    left: -6px;
}

.topWorks .before li img {
    width: 100%;
    border: solid 8px var(--sub-color02);
    border-radius: 10px;
}

.topWorks .afterSlide {
    display: flex;
    justify-content: space-between;
    margin: 40px 60px 0;
    gap: 40px;   
    position: relative;
    z-index: 1;
}

.topWorks .afterSlide .main-slider {
    width: 830px;
}

.topWorks .afterSlide .main-slider li {
    width: 830px !important;
}

.topWorks .afterSlide .main-slider li::before {
    content: "";
    position: absolute;
    width: 174px;
    height: 177px;
    background: url(./img/after_ribbon.png) no-repeat;
    background-size: contain;
    top: -8px;
    left: -8px;
}

.topWorks .afterSlide .main-slider .slick-list {
    overflow: initial;
}

.topWorks .afterSlide .main-slider li img {
    width: 100%;
    border-radius: 10px;
    border: solid 8px #12a73b;
    box-sizing: border-box;
}

.topWorks .afterSlide .thumbnail-slider {
    width: 100px;
}

.topWorks .afterSlide .thumbnail-slider li {
    width: 100% !important;
    height: 100px !important;
    margin-bottom: 10px;

}

.topWorks .afterSlide .thumbnail-slider li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    border: solid 5px var(--white);
    box-sizing: border-box;
}

.topWorks .afterSlide .thumbnail-slider li.slick-current img {
    border: solid 5px var(--main-color02);
}

.topWorks .tableArea {
    top: -80px;
    margin-bottom: -80px;
    position: relative;
    background-color: #fff7f1;
    border-radius: 10px;
    padding: 140px 60px 60px;
    display: block;
}

.topWorks .tableArea > p {
    margin-top: 40px;
}

.topWorks .tableArea > p a {
    background-color: var(--sub-color02);
}

.topWorks .slick-slider .slick-list {
    padding: 0 !important;
}

.topWorks .thumbnail-slider.slick-slider .slick-list .slick-cloned {
    display: none !important;
}

/* -----------------------------------------------------------
    worksSlider
----------------------------------------------------------- */
.worksSlider {
    margin-top: 80px;
}

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

.worksSlider .slider {
    margin-bottom: 60px !important;
    z-index: 2;
}

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

.worksSlider li {
    padding: 0 20px;
    height: auto;
    width: 530px;
}

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

.worksSlider li > a {
    position: relative;
    text-decoration: none;
    display: block;
    color: var(--body-text-color);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.0) 0 4px 4px 0;
    transform: scale(1);
    padding: 0 30px 30px;
}

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

.worksSlider li > a::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 230px;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    background-color: var(--white);
    z-index: -1;
}

.worksSlider picture {
    box-sizing: border-box;
    display: block;
    width: 470px;
    height: 350px;
    margin: 0 auto;
    border-radius: 10px;
}

.worksSlider picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.worksSlider li .title {
    font-size: 20px;
    font-weight: 700;
    display: block;
    margin-top: 10px;
}

.worksSlider li time {
    display: block;
    text-align: right;
    font-size: 14px;
    color: #777777;
    margin-top: 10px;
}

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

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

.worksSlider .slick-next::after,
.worksSlider .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;
}

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

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

.worksSlider .slick-prev {
    left: auto;
    right: 220px;
    bottom: -105px;
    top: auto;
}

.worksSlider .slick-next {
    right: 130px;
    bottom: -105px;
    top: auto;
}

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

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

.worksSlider .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;
}

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

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

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

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

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

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

.menuList .inner {
    background-color: #ffe294;
    box-sizing: content-box;
    padding: 100px;
    z-index: 0;
    border-top: solid 10px var(--sub-color03);
    border-bottom: solid 10px var(--sub-color03);
    background-image: url(./img/bg_menulist.png);
    background-repeat: no-repeat;
    background-position: right 8% top 8%;
}
.menuList .flex {
    flex-wrap: wrap;
    margin: 120px 0 0;
}

.menuList li {
    width: 530px;
}

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

.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%;
    border: solid 3px var(--sub-color03);
}

.menuList li .head h3 {
    position: relative;
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    color: var(--sub-color03);
    border-bottom: dotted 3px var(--sub-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%;
    border: solid 5px var(--sub-color03);
}

.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(--sub-color03);
    border-bottom: dotted 3px var(--sub-color02);
    padding: 0 40px 1px 0;
}

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

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

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

.menuList li .outTax,
.menuPlanList > li .list li.price .outTax,
.menuPlanList > li li.price .outTax {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    font-family: var(--base-font-family);
}

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

.menuList li .red small,
.menuPlanList > li .list li.price .red small,
.menuPlanList > li li.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;
}

.menuListBnr {
    margin-top: 60px;
    justify-content: center !important;
    gap: 35px;
}

/* -----------------------------------------------------------
    myColor
----------------------------------------------------------- */
#colorsimulation .aboutus {
    position: relative;
    z-index: 0;
}

#colorsimulation .aboutus > p.inner02{
    margin: 60px auto;
}

.myColorStep {
    padding: 100px 0;
}

.myColumun {
    margin-top: 60px;
}

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

.myColumun li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: solid 5px var(--sub-color02);
    margin-top: 40px;
}

.myColumun li::after {
    content: "";
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    bottom: -40px;
    --r: 1px;
    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);
    background: #ebdfd7;
    transform: rotate(90deg);
}

.myColumun li:last-child::after {
    display: none;
}

.myColumun li img {
    width: 200px;
}

.myColumun li .flex {
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
}

.myColumun li .pointNumber {
    background-color: var(--main-color01);
    color: var(--white);
    border-radius: 4px;
    font-family: var(--en-font-family);
    padding: 17px 25px;
    line-height: 1;
    font-weight: 600;
    text-align: center;
}

.myColumun li .pointNumber span {
    display: block;
}

.myColumun li .pointNumber span:first-of-type {
    font-size: 13px;
}

.myColumun li .pointNumber span:last-of-type {
    font-size: 36px;
}

.myColumun li h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
}

.myColorStep .textInfo {
    margin-top: 40px;
}

.myColorStep .textInfo h3 {
    font-weight: 700;
    font-size: 26px;
}

.myColorStep .textInfo p {
    margin-top: 10px;
    font-size: 18px;
}

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

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

/* -----------------------------------------------------------
    pickupMenu
----------------------------------------------------------- */
.pickupMenu {
    position: relative;
    background: #f1e8e1;
    padding: 100px 0;
    z-index: 0;
}

.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: -28px;
    bottom: -90px;
}

.pickupMenu li a::before {
    width: 26px;
    height: 26px;
    background: var(--sub-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: solid 2px var(--sub-color03);
    color: var(--sub-color03);
    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 10px #12a73b;
    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: 1059px;
    height: 266px;
    top: 200px;
    left: -40px;
}

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

.staffMessage p {
    margin-bottom: 15px;
}

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


/* -----------------------------------------------------------
    message
----------------------------------------------------------- */
.coverMessage {
    padding: 100px 0;
    position: relative;
    background-image: url(./img/bg_orange.png);
    z-index: 0;
}

#menu .coverMessage {
    background: none;
}

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

.coverMessage .flex {
    flex-direction: row-reverse;
    gap: 80px;
}

.coverMessage h3 {
    font-size: 36px;
    line-height: 1.45;
    font-weight: 700;
    margin-bottom: 40px;
}

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

.coverMessage .msgPhoto img {
    border-radius: 10px;
    border: solid 10px var(--sub-color02);
}

.coverMessage .name {
    text-align: right;
    font-size: 18px;
    font-weight: 700;
}

.coverMessage .name b {
    font-size: 26px;
    font-weight: 700;
}

.coverMessage .name small {
    font-weight: normal;
} 

/* -----------------------------------------------------------
    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 .slick-track {
    display: flex;
    align-items: stretch;
}

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

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

.voiceSlider li:nth-of-type(odd) {
    margin-top: 30px;
}

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

.voiceSlider li > a {
    text-decoration: none;
    display: block;
    color: var(--body-text-color);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    height: 100%;
    transition: all 0.3s ease;
    transform: scale(1);
}

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

.voiceSlider picture {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 245px;
    margin: 0 auto;
    border-radius: 10px 10px 0 0;
}

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

.voiceSlider li a > div {
    background-color: var(--white);
    border-left: solid 3px var(--main-color01);
    border-right: solid 3px var(--main-color01);
    border-bottom: solid 3px var(--main-color01);
    border-radius: 0 0 10px 10px;
    padding-bottom: 25px;
}

.voiceSlider li .catch {
    text-align: center;
    width: 100%;
    height: 160px;
    background-color: var(--white);
    border-radius: 50%;
    position: relative;
    top: -80px;
    margin-bottom: -80px;
}
.voiceSlider li .catch span {
    display: inline-block;
    margin-top: 30px;
    font-weight: 700;
    padding: 5px 25px;
    background-color: var(--sub-color02);
    color: var(--white);
    border-radius: 30px;
}

.voiceSlider li .title {
    position: relative;
    top: -80px;
    margin: 0 25px -80px;
    font-weight: 700;
    text-align: left;
    padding: 10px 0 15px;
    border-bottom: solid 2px var(--body-text-color);
}

.voiceSlider li .cats,
.voiceSlider li time {
    display: block;
    position: relative;
    margin-top: 15px;
    padding-left: 25px;
    padding-right: 25px;
}

.voiceSlider li .cats {
    text-align: left;
}

/* .voiceSlider li .cats span {
    position: relative;
    padding-left: 15px;
    font-size: 14px;
}

.voiceSlider li .cats span::before {
    position: absolute;
    top: 1px;
    left: 0;
    bottom: 0;
    margin: auto 0;
    font-family: "Font Awesome 5 Free";
    content: '\f02b';
    font-weight: 900;
    font-size: 14px;
    height: 1em;
    line-height: 1;
} */

.voiceSlider li time {
    text-align: right;
    font-size: 14px;
    color: #777777;
}

.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: 60px;
    height: 60px;
    background: var(--sub-color02);
    opacity: 1.0;
    border-radius: 100vh;
}

.voiceSlider .slick-next::after,
.voiceSlider .slick-prev::after {
    --mask: url(img/svg_arrow01.svg);
    width: 60px;
    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 {
    z-index: 1;
    left: calc(50% - 600px);
    opacity: 0.90;
}

.voiceSlider .slick-next {
    z-index: 1;
    right: calc(50% - 600px);
    opacity: 0.90;
}

.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: 60px auto 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;
}

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

#packOther {
    margin-bottom: 100px;
}

.coverMenu .planTitle {
    padding: 110px 0;
    text-align: center;
    color: var(--sub-color03);
    background-size: cover;
    border-top: solid 10px var(--sub-color02);
    border-bottom: solid 10px var(--sub-color02);
}

#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;
}

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

.coverMenu .planTitle .ja {
    font-size: 40px;
    display: block;
    font-weight: 900;
    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;
}

.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,
#packCover .planTitle .en {
    background: #e7bba1;
}

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

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

#packWall .planBox {
    padding-bottom: 100px;
}

#packRoof .planBox {
    padding-bottom: 100px;
}

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

.packPrice.type02 {
    background-color: var(--red);
    border: none;
    border-radius: 10px;
    padding: 25px;
    color: var(--white);
    margin: 60px 60px 0;
}

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

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

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

.packPrice p {
    font-weight: 700;
}

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

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

.coverMenu .planBox .asterisk02 {
    margin-top: 25px;
}

.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,
#packCover .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 5px var(--sub-color03);
    position: relative;
}

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

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

.menuPlanList > li > a:hover img {
    opacity: 1;
}

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

.menuPlanList > li .imgMedal {
    position: absolute;
    top: -25px;
    left: 10px;
    width: 90px;
}

.menuPlanList > li .head figure {
    margin-bottom: 10px;
}

.menuPlanList > li .head figure img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

#packWpack .menuPlanList > li .head,
#packCover .menuPlanList > li .head  {
    padding: 25px 0 40px;
    border-radius: 14px 14px 0 0;
    background: #0066b9;
    text-align: center;
    border-bottom: solid 5px var(--sub-color03);
}

.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 .subTitle,
#packCover .menuPlanList > li .subTitle {
    display: inline-block;
    background-color: #001c33;
    color: var(--white);
    font-size: 26px;
    font-weight: 700;
    padding: 5px 50px;
    border-radius: 50px;
    margin-bottom: 10px;
}

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

#packWpack .menuPlanList > li .title span,
#packCover .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,
#packCover .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 .head {
    background: var(--main-color01);
}

#packRoof .menuPlanList > li .head {
    background: #12a73b;
}

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

.menuPlanList > li .list li {
    padding: 15px;
    border-bottom: solid 1px var(--sub-color03);
    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(--white) !important;
    border: solid 4px var(--sub-color03);
    background: var(--sub-color02);
    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(--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 li.price .red {
    font-size: 90px;
}

.menuPlanList > li.menuListItem02 li.price .red small {
    font-size: 40px;
}

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

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

.menuPlanList > li.menuListItem02 .flex ul li:last-of-type {
    border-bottom: none;
}

.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;
    background: var(--main-color01);
    min-width: 300px;
    padding: 25px 25px 27px;
}

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

#packOther table th,
#packOther table td {
    font-weight: normal;
    color: var(--body-text-color);
}

#packOther table th {
    width: 50%;
}

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

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

#packOther table th.textCenter,
#packOther table td.textCenter {
    font-weight: normal;
    font-size: 16px;
    color: var(--body-text-color);
    background-color: #e6e6e6;
}

#packOther table td span {
    color: var(--body-text-color);
}

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

#packOther .bnr,
#packLeaking .bnr {
    display: flex;
    justify-content: space-between;
    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;
    background-image: url(./img/bg_yellow.png);
    z-index: 0;
    padding: 100px 0;
}

.shopAccess ul li iframe {
    display: block;
    width: 100%;
    height: 400px;
    border-radius: 20px;
    border: solid 10px var(--sub-color02) !important;
    box-sizing: border-box;
}

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

.shopAccess .shopPhoto {
    margin-bottom: 40px;
}

.shopAccess .shopPhoto figure {
    width: 530px;
    height: 300px;
}

.shopAccess .shopPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;

}

.shopAccess .table {
    margin-top: 25px;
}

.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: 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: 25%;
    background: #f1f1f1;
    border-right: solid 1px #d0d0d0;
    font-weight: 700;
}

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

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

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

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

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

.shopAccess .table dd a {
    position: relative;
    color: var(--main-color01);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--main-color01);
    text-underline-offset: 2px;

}

.shopAccess .table dd a.blank::after {
    font-family: "Font Awesome 5 Free";
    content: '\f24d';
    font-weight: 400;
    font-size: 16px;
    height: 1em;
    line-height: 1;
    position: absolute;
    right: -20px;
    bottom: 5px;
}

/* -----------------------------------------------------------
    showroom
----------------------------------------------------------- */
#showroom .page-mainv .mainv {
    margin-top: 40px;
}

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

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

.showroomTitle p {
    margin-top: 15px;
}

.showroomTitle p:first-of-type {
    margin-top: 40px;
}

.showroomTitle .showroomBtn {
        padding: 20px 50px 30px 50px;
}

.showroomTitle .showroomBtn::after {
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    transform: rotate(135deg);
}

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

#showroom .aboutus {
    position: relative;
    z-index: 0;
    margin-top: 100px;
    background-image: url(./img/bg_pink.png);
}

#showroom .aboutus::before,
#showroom .aboutus::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

#showroom .aboutus::before {
    width: 191px;
    height: 186px;
    background-image: url(./img/bg_showroomPoint01.png);
    top: 800px;
    left: 10%;
}

#showroom .aboutus::after {
    width: 174px;
    height: 157px;
    background-image: url(./img/bg_showroomPoint02.png);
    bottom: 1200px;
    right: 10%;
}

#showroom .aboutus .box .innBox > div {
    padding: 55px 55px 55px;
    border: solid 10px #ffad9b;
}

#showroom .aboutus .box ul.flex {
    gap: 40px;
    justify-content: center;
    margin-top: 40px;
}

#showroom .otherPoint,
#colorsimulation .otherPoint {
    flex-wrap: wrap;
}

#showroom .otherPoint li,
#colorsimulation .otherPoint li {
    width: 530px;
    box-sizing: border-box;
    background-color: var(--white);
    border-radius: 10px;
}

#showroom .otherPoint li {
   border: solid 6px #ffad9b; 
}

#showroom .otherPoint li img,
#colorsimulation .otherPoint li img {
    border-radius: 5px 5px 0 0;
    width: 100%;
}

#showroom .otherPoint li > div,
#colorsimulation .otherPoint li > div {
    padding: 30px;
}

#showroom .otherPoint li h4,
#colorsimulation .otherPoint li h4 {
    color: var(--sub-color03);
    font-size: 18px;
    font-weight: 700;
}

.reserveMerit {
    margin-top: 80px;
    overflow: initial;
}

.reserveMerit ul {
    margin-top: 80px;
}

.reserveMerit li {
    position: relative;
    width: 340px;
    border-radius: 10px;
    background-color: var(--white);
}

.reserveMerit div {
    position: absolute;
    text-align: center;
    width: 80px;
    height: 80px;
    background-color: var(--main-color01);
    color: var(--white);
    font-family: var(--en-font-family);
    font-weight: 600;
    border-radius: 10px;
    padding-top: 16px;
    box-sizing: border-box;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.reserveMerit div small,
.reserveMerit div span {
    display: block;
    line-height: 1;
}
.reserveMerit div small {
    font-size: 11px;
}

.reserveMerit div span {
    display: block;
    font-size: 40px;
}

.reserveMerit li p {
    padding: 20px 30px;
}

.giftFlow ol {
    justify-content: center;
    gap: 25px;
    margin-top: 90px;
}

.giftFlow ol li {
    position: relative;
    width: 140px;
    border-radius: 14px;
    border: solid 3px #12a73b;
}

.giftFlow ol li:last-of-type {
    border: solid 3px var(--red);
}

.giftFlow ol li div {
    position: absolute;
    text-align: center;
    width: 90px;
    height: 90px;
    background-color: #12a73b;
    color: var(--white);
    font-family: var(--en-font-family);
    font-weight: 600;
    border-radius: 50%;
    padding-top: 10px;
    box-sizing: border-box;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.giftFlow ol li:last-of-type div {
    background-color: var(--red);
}

.giftFlow ol li div small,
.giftFlow div span {
    display: inline-block;
    line-height: 1;
}

.giftFlow ol li div small {
    font-size: 12px;
}

.giftFlow ol li div span {
    font-size: 24px;
}

.giftFlow ol li p {
    padding: 10px;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    background-color: var(--white);
    border-radius: 0 0 10px 10px;
}

.giftFlow ul {
    margin-top: 20px;
}

.giftFlow ul li::before {
    content: "■";
    color: #12a73b;
    display: inline-block;
    margin-right: 5px;
}

.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 {
    margin-top: 100px;
    padding-bottom: 100px;
}

#corporate .corpTitle h2 {
    text-align: center;
    border-top: solid 5px var(--sub-color02);
    border-bottom: solid 5px var(--sub-color02);
    padding: 40px;
    line-height: 1.25;
}

#corporate .corpTitle h2 span {
    display: block;
}

#corporate .corpTitle h2 .en {
    font-family: var(--en-font-family);
    font-size: 90px;
    font-weight: 700;
    color: var(--main-color01);
    letter-spacing: 1.5;
    letter-spacing: 5px;
    
}

#corporate .corpTitle h2 .ja {
    font-weight: 900;
    font-size: 30px;
    color: var(--sub-color03);
    margin-top: 10px;
}

#corporate .corpTitle ul {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
#corporate .corpTitle p {
    margin-top: 25px;
    text-align: center;
    font-size: 26px;
}

#corporate .youtube {
    margin-top: 60px;
    
}

#corporate .youtube .iframeWrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

#corporate .youtube .iframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* -----------------------------------------------------------
    first
----------------------------------------------------------- */
.topAbout {
    background: url(./img/bg_topabout.png) no-repeat;
    background-position: left 10% top 10%;
}

.firstList {
    position: relative;
    z-index: 2;
}

.firstList h2 figure img {
    width: 100%;
}


#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;
    z-index: 0;
    background-image: url(./img/bg_green.png);
    padding: 100px 0;
}

#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(--red);
}

#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: 10px;
    margin-top: 140px;
}

#rainleaking .rainWorries .warning-contents {
    margin-top: 80px;
}

.rainWorries .warning-contents::before {
    content: "";
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    top: -100px;
    --r: 3px;
    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-color01);
}

#rainleaking .rainWorries .warning-contents::before {
    display: none;
}

.rainWorries .warning-contents::after {
    content: "";
    position: absolute;
    width: 115px;
    height: 105px;
    background: url(./img/ico_warning.png) no-repeat;
    left: -57px;
    top: -30px;
}

.rainWorries .warning-contents p {
    text-align: center;
    font-size: 34px;
    font-weight: 900;
    color: var(--white);
    line-height: 1.4;
}

.rainWorries .warning-contents small {
    display: block;
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 700;
}

.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;
}

.rainWorries .warning-list h3 span {
    color: var(--red);
}

.rainWorries .warning-list p {
    margin-top: 40px;
}

.rainWorries .ranking {
    margin-top: 60px;
    padding: 60px;
    border: solid 5px #0066b9;
    background: var(--white);
    border-radius: 20px;
    gap: 35px;
}

.rainWorries .ranking h4 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
}

.rainWorries .ranking h4 span {
    color: var(--main-color01);
}

.rainWorries .ranking ul {
    margin: 30px 0;
    font-size: 20px;
    color: var(--red);
    font-weight: 700;
}

.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 {
    position: relative;
    z-index: 0;
    background-image: url(./img/bg_limeGreen.png);
    padding: 100px 0;
}

#rainleaking .rainPoint {
    background-image: url(./img/bg_blue.png);
}


#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 5px var(--sub-color03);
    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(--sub-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;
    flex-wrap: wrap;
    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;
}

.rainMenu li .taxPrice {
    margin-top: 5px;
    text-align: center;
}

.rainMenu li .outTax,
#packLeaking li .outTax {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    font-family: var(--base-font-family);
}

/* -----------------------------------------------------------
    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: normal;
}

.dataTable table th.textCenter,
.dataTable table td.textCenter {
    display: table-cell;
    font-weight: 700;
    background: #0066b9;
    color: var(--white);
}

.dataTable table th {
    /* white-space: nowrap; */
    width: 30%;
    max-width: 50%;
    font-weight: 700;
    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;
}

.dataTable table td li::before {
    content: "■";
    color: #12a73b;
    display: inline-block;
    margin-right: 5px;
}

.historyTable {

}

.historyTable {
    position: relative;
    padding-top: 35px;
}

.historyTable::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #d0d0d0;
    top: 0;
    left: 46px;
}

.historyTable th,
.historyTable td {
    vertical-align: top;
    padding: 10px 10px 35px;
}

.historyTable th {
    text-align: right;
}

.historyTable th.year {
    position: relative;
    width: 22%;
    font-size: 20px;
    color: var(--sub-color03);
    line-height: 1.25;
}

.historyTable th.year::before {
    content: "";
    position: absolute;
    width: 92px;
    height: 14px;
    background-image: url(./img/historyTable_head.png);
    background-repeat: no-repeat;
    background-size: contain;
    left: 40px;
    top: 15px;
}

.historyTable th.month {
    width: 6%;
    font-weight: normal;
}

.historyTable td {
    width: 72%;
}

/*お客様の声アーカイブ*/

.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;
}

.post .event-info p {
    overflow: visible;
    text-overflow: unset;
    white-space: wrap;
}

.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;
    font-size: 18px;
    font-weight: 700;
}

.service-list li a {
    display: block;
    position: relative;
    padding: 25px 0 25px 75px;
    border-bottom: solid 2px var(--sub-color03);
    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-list05.png);
}

.service-list li:nth-child(5) a::before {
    background-image: url(./img/service-list04.png);
}

.service-list li:nth-child(6) a::before {
    background-image: url(./img/service-list07.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(--body-text-color);
    border-right: solid 2px var(--body-text-color);
    right: 15px;
    top: 35px;
    transform: rotate(135deg);
    transition: 0.7s;
}

.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_position {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    gap: 2px;
}

.staff_position li {
    padding: 3px 10px;
    background-color: #ffead7;
    color: var(--main-color01);
    border-radius: 4px;
}

#staff #cboxOverlay {
    background: var(--main-color01);
    opacity: 0.9;
    filter: alpha(opacity = 90);
}

#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight {
    background: #FFF !important;
}

#staff #cboxClose {
    position: absolute;
    top: 0;
    bottom: auto;
    right: 30px;
    background: url(img/closeBtn.png) no-repeat;
    width: 65px;
    height: 65px;
    text-indent: -9999px;
    transition: 0.3s ease;
}

#staff #cboxClose:hover {
    opacity: 0.6;
}

#staffDetail {
    padding: 120px 60px 60px;
    background-color: var(--white);
    min-width: 100%;
}

#staffDetail .contactContent01 .wide::after,
#staffDetail .contactContent01 .wide .hgroup {
    display: none;
}

#staffDetail .contactContent01 {
    padding: 60px 0 100px;
    background-size: auto 300px;
}

#staffDetail .contactContent01 .wide {
    width: 90%;
    padding: 30px 0;
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.12);
}

#staffDetail .contactContent01 .contactBox li {
    padding: 0 40px;
}

.profileMain {
}

.profileMain figure {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

.profileMain figure img {
    width: 360px;
    height: 460px;
    object-fit: cover;
    object-position: center;
}

.profileMain > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
    padding: 20px;
    border-top: solid 4px var(--main-color02);
    border-bottom: solid 4px var(--main-color02);
}

.staffName {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.profileDetail {
    margin-bottom: 120px;
}

.profileDetail h2 {
    margin-top: 40px;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--main-color02);
    padding: 10px 20px;
}

.profileDetail p {
    margin-top: 20px;
    word-wrap: break-word;
}

#btnClose.btn {
    font-family: var(--en-font-family);
    background-color: var(--sub-color02);
}

#btnClose.btn::after {
    display: none;
}

/* -----------------------------------------------------------
 .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;
    box-sizing: border-box;
}

.archiveList.voiceList > li {
    background: var(--main-color02);
    border: none;
}

.archiveList > li a {
    /* display: block; */
    display: flex;
    flex-direction: column;
    color: var(--body-text-color);
    height: 100%;
    position: relative;
}

.archiveList.voiceList li a {
    color: var(--white);
}

.archiveList .mainThumb {
    text-align: center;
    position: relative;
    z-index: 1;
}

.archiveList .mainThumb img {
    width: 280px;
    height: 210px;
    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;
    background-color: var(--white);
    border-radius: 10px;
}

.archiveList.workList .overflowH {
    flex: 1;
    padding: 70px 25px 25px;
    position: relative;
    top: -50px;
    margin-bottom: -50px;
    box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.1);
    border: dashed 1px #d3cbc5;
}

.archiveList .archive-ttl {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.archiveList.workList .archive-ttl {
    border-bottom: solid 2px var(--sub-color03);
}

.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: 15px;
    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);
}

.cats > a {
    color: var(--white);
}

.cats .parent {
    display: block !important;
    background: transparent !important;
    padding: 0;
    color: var(--body-text-color) !important;
    background: transparent !important;
    line-height: 1;
    margin: 20px 0 10px !important;
    border-radius: 0 !important;
}

.cats .parent:first-of-type {
    margin: 0 0 15px !important;
}

.cats .parent a {
    position: relative;
    display: block;
    width: 100%;
    font-size: 17px;
    font-weight: 700;
    color: var(--main-color02);
    border-bottom: dotted 2px var(--main-color02);
    padding: 10px 30px 10px 10px;
    margin: 0;
    box-sizing: border-box;
}

.cats .parent a::before,
.cats .parent a::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
    left: -40px;
}

.cats .parent a::before {
    width: 18px;
    height: 18px;
    background: var(--main-color01);
    opacity: 1.0;
    border-radius: 100vh;
}

.cats .parent 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;
}

.cats > a:hover,
.cat-item a:hover,
.categrory-box .taxList li a:hover,
.categrory-box .taxList li.current-cat a {
    background: var(--main-color01);
    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(--sub-color03);
    margin-top: 100px;
}

.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(--sub-color03);
    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: #f1e9e4;
    border-top: solid 2px var(--sub-color02);
    border-bottom: solid 2px var(--sub-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: 14px;
    padding: 10px 12px;
    margin: 0;
    display: inline-block;
    color: var(--sub-color03);
    background: var(--white);
    border: solid 1px var(--sub-color03);
    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: 170px;
    height: 90px;
    background: url(./img/works_after.png) no-repeat;
    background-size: contain;
    top: -45px;
    left: 25px;
    z-index: 1;
}

.picBox .btmPhoto {
    width: 340px;
    position: relative;
    box-sizing: border-box;
}

.picBox .btmPhoto::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 71px;
    background: url(./img/works_before.png) no-repeat;
    background-size: contain;
    top: -35px;
    left: 25px;
    z-index: 1;
}

.picBox .btmPhoto::after {
    content: "";
    position: absolute;
    width: 118px;
    height: 51px;
    background: url(./img/works_arrow.png) no-repeat;
    background-size: contain;
    bottom: -65px;
    right: -30px;
    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;
    box-sizing: border-box;
}

.picBox .btmPhoto img {
    border: solid 5px var(--sub-color02);
}

.picBox .photo img {
    border: solid 5px var(--main-color01);
}

.works-report_ttl {
    color: var(--main-color02);
    font-size: 18px;
    font-weight: 700;
    margin: .5em 0;
}

.works-report_title {
    font-weight: 700;
    margin: 10px 0 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;
}

.works-report .picBox {
    padding-top: 70px;
    border-top: solid 2px var(--sub-color02);
}

.works-report .picBox:first-of-type {
    padding-top: 0;
    border-top: none;
}

.other-com {
    background: var(--white);
    border: var(--main-color02) solid 2px;
    padding: 30px;
    margin-bottom: 80px;
    border-radius: 4px;
}

.other-com p {
    position: relative;
    margin-bottom: 0;
    border-bottom: dotted 4px #CCC;
    padding: 5px 0 5px 60px;
}

.free_com01 {
    border: solid 10px var(--main-color02);
    border-radius: 10px;
    background-color: var(--white);
    padding: 40px;
}

/* -----------------------------------------------------------
 .staffList
-----------------------------------------------------------   */
.archiveList.staffList > li {
    width: 245px;
    padding: 0;
}

.archiveList.staffList > li > a {
    padding: 0;
    border-radius: 10px;
    background-color: var(--white);
    border: solid 3px var(--main-color01);
    box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.1);
}

.archiveList.staffList > li img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 7px 7px 0 0;
}

.archiveList.staffList > li .staff_position {
    margin-top: 0;
    justify-content: center;
}

.archiveList.staffList > li .staff_position li {
    font-size: 12px;
}

.archiveList.staffList > li .inBox {
    padding: 20px 40px;
    text-align: center;
}

.archiveList.staffList > li h3 {
    font-size: 26px;
    font-weight: 700;
    margin-top: 5px;
}

.archiveList.staffList > li .btnDetail {
    margin-top: 10px;
}

.archiveList.staffList > li .btnDetail::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 12px;
    background-color: var(--white);
    right: 30px;
    top: 14px;
}

.archiveList.staffList > li .btnDetail::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 2px;
    background-color: var(--white);
    right: 25px;
    top: 0;
}

.categrory-box.staffCate {
    border-bottom: solid 2px var(--sub-color03);
    margin-top: 100px;
}

.categrory-box.staffCate .taxList {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.categrory-box.staffCate .taxList li {
    width: 540px;
}

.categrory-box.staffCate .taxList li a {
    display: block;
    font-size: 22px;
    font-weight: 700;
    padding: 20px;
    color: var(--sub-color03);
    border: solid 2px var(--sub-color03);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.categrory-box.staffCate .taxList li .count {
    display: none;
}

.categrory-box.staffCate .cats > a:hover,
.categrory-box.staffCate .cat-item a:hover,
.categrory-box.staffCate .taxList li a:hover,
.categrory-box.staffCate .taxList li.current-cat a {
    background: var(--main-color01);
    color: var(--white);
}

/* -----------------------------------------------------------
    single-voice & single-staff
----------------------------------------------------------- */
.fromName {
    text-align: center;
    margin-bottom: 10px;
}

.fromName span {
    display: inline-block;
    padding: 5px 40px;
    background: var(--sub-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;
}

#voice .voiceData {
    flex-direction: row-reverse;
    align-items: flex-start;
}

#staff h1.tl04 {
    text-align: center;
}

.voiceData figure {
    width: 500px;
    text-align: center;
    color: var(--sub-color03);
    font-size: 18px;
}

.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: 350px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    border: solid 5px var(--sub-color02);
}

#staff .voiceData figure img {
    height: auto;
}

.voiceData .dataTable {
    width: 560px;
    margin-top: 40px;
}

.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: #0066b9;
    color: var(--white);
}

.voiceData .dataTable table td .cats,
.worksData .dataTable table td .cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.voiceData .dataTable table td a,
.worksData .dataTable table td a {
    position: relative;
    display: inline-block;
    line-height: 1;
    color: var(--body-text-color);
    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;
    color: var(--main-color02);
}

.voiceData .dataTable table td a:hover::before,
.worksData .dataTable table td a:hover::before {
    color: var(--white);
}

.voiceData .dataTable table td span {
    color: var(--body-text-color);
}

.voiceEnq {
    margin-top: 60px;
    padding-top: 60px;
    border-top: dotted 3px var(--sub-color02);
    text-align: center;
}

.voiceEnq img {
    width: auto;
    max-width: 940px;
}

.voiceSummary {
    border: solid 2px var(--sub-color03);
    border-radius: 20px;
    background: var(--white);
    margin-top: 60px;
}

.voiceSummary h3 {
    background: var(--main-color02);
    border-bottom: solid 2px var(--sub-color03);
    color: var(--white);
    font-size: 26px;
    text-align: center;
    color: var(--white);
    border-radius: 17px 17px 0 0;
    padding: 10px;
}

.voiceSummary.staff-v h3 {
    background: var(--main-color01);
} 

.voiceSummary .flex {
    padding: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}

.voiceSummary .wysiwyg {
    padding: 40px;
}


.voiceSummary .profileSales .wysiwyg {
    padding: 0;
}

.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: #0066b9;
    color: var(--white);
    border-right: none;
    font-weight: 700;
}

.voiceSummary .mainpic {
}

.voiceSummary .mainpic img {
    width: 240px;
    height: 280px;
    object-fit: cover;
    border-radius: 10px;
}

.voiceSummary .profileSales .maindetail {
    margin-top: 10px;
    text-align: center;
}

.voiceSummary .profileSales .positionTxt {
    margin-bottom: 10px;
}

.voiceSummary .profileSales .positionTxt span {
    color: #fff;
    font-size: 15px;
    background: var(--main-color02);
    border-radius: 20px;
    padding: 5px 15px;
}

.voiceSummary .profileSales .staffName {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 16px;
    background-color: var(--sub-color03);
    color: var(--white);
    line-height: 1.3;
    font-weight: bold;
    margin-bottom: 0;
    margin-bottom: 15px;
}

.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.children {
    margin-bottom: 0;
    padding-bottom: 0;
}

.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;
}

.works-comment {
    margin: 100px 0 0;
    padding: 40px 0 100px;
    background-image: url(./img/bg_yellow.png);
    border-top: solid 10px var(--sub-color03);
    border-bottom: solid 10px var(--sub-color03);
}

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

.contactForm .inBox {
    margin-top: 60px;
    background: #f1f1f1;
    border: 10px solid var(--sub-color02);
    border-radius: 20px;
    padding: 60px;
    box-sizing: border-box;
}

.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 h6 {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.contactForm .check-list p a {
    color: var(--main-color01);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contactForm .check-list div {
    text-align: center;
    margin-top: 20px;
}

.contactForm .check-list div .wpcf7-form-control.wpcf7-checkbox {
    justify-content: center;
}

.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;
}

.contactForm .contactBnr {
    text-align: center;
    margin-top: 60px;
}

.contactForm .contactBnr p {
    font-size: 18px;
    font-weight: 700;
    margin-top: 15px;
}

.contactForm .contactBnr p a {
    color: var(--main-color01);
    text-decoration: underline;
}

/* -----------------------------------------------------------
. form
----------------------------------------------------------- */
::placeholder {
    color: #ccc;
}

.formBox {
    /* padding: 30px; */
    text-align: left;
    /* position: relative;
    z-index: 1; */
    background: var(--white);
    border-radius: 20px;
}

.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(--sub-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 input[type="submit"]:disabled {
    color: #fff !important;
    background: #ccc;
    transition: all 0.3s ease;
    border: 4px solid #aaa;
    cursor: default;
}
.formBox input[type="submit"]:disabled:hover {
    opacity: 1;
}

.formBox .submit input {
    --background: var(--main-color01);
    flex: 1;
    width: 340px;
    font-size: 22px;
    font-weight: 700;
    border-radius: 50px;
    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: solid 4px var(--sub-color03);
    cursor: pointer;
}

.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:nth-of-type(odd) {
    width: 60%;
}

.wpcf7-list-item:nth-of-type(even) {
    width: 36%;
}

.wpcf7-list-item label {
    padding: 0 !important;
    font-weight: 500 !important;
    font-size: 15px;
}

.wpcf7-list-item-label {
    margin-left: 5px !important;
}

/* .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);
}

.wpcf7 form .wpcf7-response-output {
    margin: 0 40px 40px !important;
}

.wpcf7-spinner {
    display: block !important;
    margin: 20px auto 0 !important;
}


/* -----------------------------------------------------------
    .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 {
    position: relative;
    z-index: 0;
    padding: 100px 0;
    background-image: url(./img/bg_review.png);
}

.reviewContents::before, .reviewContents::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 23px;
    background-image: url(./img/dots_line.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    left: 0;
}

.reviewContents::before {
    top: 3px;
}

.reviewContents::after {
    bottom: 3px;
}

.reviewContents .inner {
    overflow: initial;
}

.reviewContents .inner::before, .reviewContents .inner::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

.reviewContents .inner::before {
    width: 219px;
    height: 236px;
    background-image: url(./img/bg_reviewContents01.png);
    top: -60px;
    right: -40px;
}

.reviewContents .inner::after {
    width: 170px;
    height: 137px;
    background-image: url(./img/bg_reviewContents02.png);
    top: -60px;
    left: 0;
}

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

.reviewContents .reviewBox {
    overflow: visible;
    background-color: var(--white);
    border: solid 6px var(--main-color01);
    border-radius: 20px;
    padding: 60px;
}

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

.reviewContents .wp-gr .wp-google-list {
    text-align: center !important;
}

.reviewContents .wp-gr .wp-google-place {
    position: relative !important;
    display: inline-block !important;
    margin-bottom: 25px !important;
}

.reviewContents .wp-gr .wp-google-place .wp-google-left {
    display: inline-block !important;
    width: auto !important;
    position: absolute !important;
    left: 0 !important;
    top: -15px !important;
}

.reviewContents .wp-gr .wp-google-place .wp-google-right {
    display: inline-block !important;
    vertical-align: top !important;
    width: auto !important;
}

.reviewContents .wp-gr.wpac .wp-google-name {
    display:  inline-block !important;
    margin: 0 0 15px !important;
    padding-right: 0 !important;
    padding-left: 50px !important;
}

.reviewContents .wp-gr.wpac .wp-google-name a {
    color: var(--head-name-color, #222222) !important;
    font-size: 22px !important;
}

.reviewContents .wp-gr .wp-google-rating {
    color: var(--main-color01) !important;
    font-size: 67px !important;
    font-weight: 900 !important;
    font-family: var(--base-font-family) !important;
}

.reviewContents .wp-gr .wp-google-place .wp-star svg {
    width: 50px !important;
    height: 50px !important;
    fill: var(--main-color01) !important;
}

.reviewContents .wp-gr .wp-google-based, .reviewContents .wp-gr .wp-google-powered {
    display: inline-block;
    margin: 15px 5px 0 !important;
}

.reviewContents .wp-gr .wp-google-reviews {
    background-color: #fff7f1 !important;
    padding: 40px !important;
    border-radius: 20px !important;
    height: 260px !important;
    overflow-y: scroll !important;
}

.reviewContents .wp-gr .wp-google-url {
    display: none;
}

.reviewContents .wp-gr .wp-google-content-inner {
    text-align: left !important;
}

.reviewContents .voiceSlider {
    margin-top: 60px;
}

/* -----------------------------------------------------------
    .reason
----------------------------------------------------------- */
.reasonList {
    position: relative;
    z-index: 2;
}

.reasonList h2 figure img {
    width: 100%;
}

.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 10px #12a73b;
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--white);
    padding: 80px 50px;
    margin: 100px auto;
}

.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: 900;
    color: var(--sub-color03);
    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: 900;
    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: #12a73b;
    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;
}

.comparePaint h3 {
    margin-bottom: 60px;
}

.compareTable {
    width: 100%;
    table-layout: fixed;
}

.compareTable thead th {
    background: #ffad73;
    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: #ffdfc9;
}

.compareTable th,
.compareTable td {
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    border-bottom: var(--main-color01) solid 2px;
    border-right: var(--main-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(--main-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;
    line-height: 1.55;
}

.compareTable tbody tr:last-of-type td {
    padding: 10px;
} 

.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 {
    margin-top: 100px;
}

.serviceMenu-main .apartmentText {
    margin-top: 40px;
    margin-bottom: 60px;
}

.serviceMenu-main .apartmentText ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.serviceMenu-main .apartmentText li {
    width: 180px;
    border-radius: 10px;
    color: var(--white);
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    padding: 10px;
}

.serviceMenu-main .apartmentText li:nth-of-type(1) {
    background-color: #0066b9;
}

.serviceMenu-main .apartmentText li:nth-of-type(2) {
    background-color: var(--main-color02);
}

.serviceMenu-main .apartmentText li:nth-of-type(3) {
    background-color: #ff5151;
}

.serviceMenu-main .apartmentText p a {
    font-weight: 700;
    color: var(--main-color01);
    text-decoration: underline;
}

.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);
    position: relative;
    border: solid 10px var(--sub-color03);
}

.serviceMenu-main_type .imgMedal {
    position: absolute;
    top: -50px;
    left: 30px;
}

.serviceMenu-main_type h2 {
    color: var(--white);
    font-weight: 900;
    font-size: 90px;
    text-align: center;
    border-radius: 15px 15px 0 0;
    line-height: 1;
    padding: 30px;
    letter-spacing: 0.1em;
    border-bottom: solid 10px var(--sub-color03);
}

.wallDetail .serviceMenu-main_type h2 {
    background-color: var(--main-color01);
}

.roofDetail .serviceMenu-main_type h2 {
    background-color: #12a73b;
}

.wpackDetail01 .serviceMenu-main_type h2 {
    background-color: #0066b9;
}

.apartmentDetail .serviceMenu-main_type h2 {
    background-color: #ffba00;
    font-size: 60px;
    letter-spacing: -0.025em;
}

.serviceMenu-main_type .wrapper {
    background-color: #ffefe1;
    padding: 60px;
    border-bottom: solid 10px var(--sub-color03);
}

.wpackDetail01 .serviceMenu-main_type .wrapper {
    background-color: #ecf6ff;
}

.apartmentDetail .serviceMenu-main_type .wrapper {
    background-color: #fff8e4;
}

.summary-name {
    text-align: center;
}

.summary-name h3 {
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    margin-top: 15px;
}

.wallDetail .summary-name h3 {
    color: var(--main-color01);
}

.roofDetail .summary-name h3 {
    color: #12a73b;
}

.wpackDetail01 .summary-name h3 {
    color: #0066b9;
}

.apartmentDetail .summary-name h3 {
    color: #ffba00;
}

.packmain-subttl {
    padding: 5px;
    font-size: 22px;
    background-color: var(--white);
    font-weight: 700;
}

.packmain-ttl {
    margin-top: 40px;
    gap: 0;
    align-items:flex-start;
}

.packmain-ttl figure {
    width: 460px;
    height: 280px;
}

.apartmentDetail .packmain-ttl figure {
    width: 100%;
    height: 380px;
}

.packmain-ttl figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.packmain-ttl > div,
.packmain-ttl > aside div {
    width: 440px;
    border: solid 2px var(--sub-color03);
    border-radius: 10px;
    text-align: center;
}

.packmain-ttl > aside div:nth-of-type(2) {
    margin-top: 25px;
}

.packmain-ttl h4 {
    background-color: var(--sub-color03);
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    padding: 10px;
    border-radius: 7px 7px 0 0;
}

.packmain-ttl .item-name {
    display: block;
    background-color: var(--white);
    padding: 15px;
    border-radius: 0 0 7px 7px;
}

.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;
}

.wpackDetail01 .packmain-ttl figure,
.wpackDetail02 .packmain-ttl figure {
    height: 290px;
}

.wpackDetail01 .packmain-ttl span:nth-child(n+5),
.wpackDetail02 .packmain-ttl span:nth-child(n+5) {
    order: 1;
    margin-top: -110px;
}

.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: 2px;
    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: #e6e6e6;
    padding: 8px 15px;
    border-radius: 6px;
    margin-left: 20px;
    font-size: 20px;
}

.serviceMenu-outTax {
    text-align: center;
    font-size: 22px;
}

.summary-note {
    text-align: right;
    font-size: 14px;
    margin: 25px 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;
}

.itemBox {
    margin-bottom: 60px;
}

.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,
.itemSummery ul li  {
    margin-top: 1rem;
}

.itemSummery ul li {
    position: relative;
    padding-left: 20px;
}
.itemSummery ul li::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--main-color02);
    display: inline-block;
    margin-right: 5px;
}

.itemSummery p strong {
    font-weight: 700;
    font-size: 26px;
    color: var(--main-color01);
}

.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(--sub-color03) solid 5px;
    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: 20px;
    border-radius: 4px 0 0 4px;
}

.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 5px var(--sub-color03);
    border-radius: 0 4px 4px 0;
}

.age-list_item .catchTtl {
    color: var(--white);
    background: var(--main-color02);
    text-align: center;
    font-weight: 700;
    /* flex-shrink: 1; */
}

.itemChart {
    width: 690px;
    border: solid 5px var(--sub-color03);
    border-radius: 10px;
    background-color: #0066b9;
    margin: 60px auto 0;
    padding: 40px 0;
}

.itemChart h4 {
    color: var(--white);
    font-size: 26px;
    font-weight: 700;
    text-align: center;
}

.itemChart canvas {
    background-color: var(--white);
    border-radius: 10px;
    padding: 25px 60px;
    margin: 15px auto 0;
}

/*----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: #8c6e58;
    border-bottom: solid 5px var(--main-color01);
}

footer nav.ftrNav {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 50px 0;
    justify-content: space-between;
}

footer nav.ftrNav > * {
    /* flex: 1; */
}

footer nav.ftrNav ul:first-of-type {
    width: 100%;
}

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: var(--white);
}

footer nav.ftrNav ul > li li::before {
    content: "└";
    margin-right: 0.5em;
    color: var(--white);
}

footer nav.ftrNav ul > li a,
footer nav.ftrNav ul > p {
    color: var(--white);
    text-decoration: none;
}

footer nav.ftrNav ul > li.blank a::after {
    font-family: "Font Awesome 5 Free";
    content: '\f24d';
    font-weight: 400;
    font-size: 14px;
    height: 1em;
    line-height: 1;
    margin-left: 5px;
}

footer nav.ftrNav ul > li a:hover {
    color: var(--main-color01);
}

footer nav.ftrNav ul > li > ul {
    margin-left: -1em;
}

.ftrInfo {
    padding: 50px 0;
    border-top: solid 5px var(--sub-color03);
    background: var(--white);
}

.ftrInfo p {
    text-align: left;
    font-weight: 400;
    margin-top: 15px;
}

.ftrInfo p:first-of-type {
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: dotted 2px var(--sub-color03);
}

.ftrInfo p b {
    display: block;
    font-weight: 400;
}

.ftrInfo p:has(a)::after {
    font-family: "Font Awesome 5 Free";
    color: var(--sub-color02);
    content: '\f24d';
    font-weight: 400;
    font-size: 14px;
    height: 1em;
    line-height: 1;
    margin-left: 5px;
}

.ftrInfo p > a {
    color: var(--main-color01);
    text-decoration: underline;
    margin-left: 1rem;
    transition: 0.3s;
}
.ftrInfo p > a:hover {
    opacity: 0.7;
}

.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: 280px;
}

.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-weight: 400;
}

.ftrInfo .ftrInfoContent b {
    font-weight: 400;
}

footer #copyright {
    padding: 15px 0 40px;
    font-size: 14px;
}

footer #copyright p {
    margin-top: 60px;
    color: var(--white);
}

/*===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/chatbot===*/
#chatbot {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 100;
}
#pageTop {
    position: fixed;
    bottom: 80px;
    right: 10px;
    width: 60px;
    height: 60px;
    z-index: 100;
}

#pageTop a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    color: #4c3c30;
    background-color: #8c6e58;
    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;
    }
} */

@media screen and (max-height: 864px) {
    /* #chatbot {
        position: fixed;
        bottom: 5px;
        right: 75px;
        z-index: 100;
    } */
    #pageTop {
        bottom: 80px;
        right: 75px;
    }
    .siq_bR {
        bottom: 10px !important;
        right: 75px !important;
    }
}

/*===sideMenu===*/
#sideMenu {
    display: inline-block;
    position: fixed;
    right: 0;
    top: 170px;
    z-index: 10000;
}

#sideMenu::before {
    content: "";
    position: absolute;
    width: 103px;
    height: 108px;
    background-image: url(./img/balloon_slide.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: -90px;
    left: -50px;
    z-index: 1;
}

#sideMenu li {
    writing-mode: vertical-rl;
    line-height: 1.25;
    font-weight: 900;
    margin-bottom: 10px;
}

#sideMenu li a {
    position: relative;
    display: flex;
    width: 64px;
    height: 180px;
    align-items: center;
    border-radius: 10px 0 0 10px;
    color: var(--white);
    box-sizing: border-box;
    padding-top: 52px;
}

#sideMenu li a::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 58px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 25px;
}

#sideMenu li:nth-child(1) a {
    background-color: var(--main-color01);
    background-size: 30px;
}

#sideMenu li:nth-child(1) a::before {
    width: 33px;
    height: 24px;
    background-image: url(./img/icon_slide01.png);
}

#sideMenu li:nth-child(2) a {
    background-color: #12a73b;
    background-size: 30px;
}

#sideMenu li:nth-child(2) a::before {
    width: 30px;
    height: 20px;
    background-image: url(./img/icon_slide02.png);
}

#sideMenu li:nth-child(3) a {
    background-color: var(--white);
    border-top: solid 5px #00c551;
    border-bottom: solid 5px #00c551;
    border-left: solid 5px #00c551;
    color: var(--body-text-color);
    padding-top: 10px;
}

#sideMenu li:nth-child(3) a::before {
    display: none;
}

#sideMenu li:nth-child(3) a img {
    display: inline-block;
    margin-bottom: 5px;
}

footer #fixedFooter.ftrScroll {
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.735);
  position: fixed;
  bottom: 0;
  width: 100%;
  display: none;
  z-index: 100;
  font-size: 12px;
  line-height: 1.2;
}

footer .ftrScroll .inner {
  margin: 10px auto;
  padding: 0;
  width: 1100px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: stretch;
}

footer .ftrScroll .ftrCont {
  background: #fff;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  border-radius: 10px;
}

footer .ftrScroll .catchTtl {
  margin: 0 10px 0 0 !important;
  background: none !important;
}

footer .ftrScroll .catchTtl li {
  background: var(--red);
  color: #fff;
  padding: 2px 10px;
  width: auto;
  margin: 0 0 1px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: normal;
  float: none;
}

footer .ftrScroll .tel {
  /*    display: flex; */
  display: block;
  align-items: center;
  margin-right: 15px;
  font-size: 18px;
  line-height: 1;
  text-align: left;
  padding-left: 36px;
  flex: auto;
}

footer .ftrScroll .tel span {
    position: relative;
  padding: 0 0 0 26px;
  font-size: 40px;
    font-family: var(--en-font-family);
    font-weight: 600;
  line-height: 1;
  display: block;
  background-size: 34px;
  background-position: left center;
  margin-left: -26px;
  margin-right: 5px;
  margin-bottom: -2px;
}

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

footer .ftrScroll .ftrCont .btnList {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: stretch;
  align-items: stretch;
}

footer .ftrScroll .ftrCont .ftrBtnList li {
  float: left;
  margin-left: 5px;
  width: 205px;
  font-size: 22px;
  font-weight: 500;
  border-radius: 30px;
  box-sizing: border-box;
  overflow: hidden;
}

footer .ftrScroll .ftrCont .ftrBtnList li a {
  padding: 13px 0;
  display: block;
  color: #fff;
  text-decoration: none;
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

footer .ftrScroll .ftrCont .ftrBtnList li a:hover {
  background: rgba(255, 255, 255, 0.3);
  transition: 0.7s;
}

/*footer .ftrScroll .ftrCont .btnList li.ftrDiagnosis a {*/
footer .ftrScroll .ftrCont .ftrBtnList li.ftrShowroom a {
  background-color: var(--main-color01);
  border: var(--main-color01) 2px solid;
}

footer .ftrScroll .ftrCont .ftrBtnList li.ftrContact a {
  background-color: var(--main-color02);
  border: var(--main-color02) 2px solid;
}

footer .ftrScroll .ftrCont .ftrBtnList li.ftrLine a {
  background-color: #00a83a;
  border: #00a83a 2px solid;
}

footer .ftrScroll .ftrCont .ftrBtnList li.ftrTel {
  display: none;
}

footer .ftrScroll .ftrCont .ftrBtnList li 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;
}

footer .ftrScroll .ftrCont .ftrBtnList li.ftrShowroom a::before {
    -webkit-mask-image: url(./img/icon_nav06.png);
    mask-image: url(./img/icon_nav06.png);
}

/* footer .ftrScroll .ftrCont .ftrBtnList li.ftrShowroom a {
    background-color: var(--white);
    border: var(--main-color01) 2px solid;
    color: var(--main-color01);
} */

/* footer .ftrScroll .ftrCont .ftrBtnList li.ftrShowroom a:hover {
    background-color: var(--white);
    color: var(--main-color01);
} */

footer .ftrScroll .ftrCont .ftrBtnList li.ftrContact a::before {
    -webkit-mask-image: url(./img/icon_nav07.png);
    mask-image: url(./img/icon_nav07.png);
}

footer .ftrScroll .ftrCont .ftrBtnList li.ftrLine a::before {
    background-image: url(./img/ico_line01.png);
    background-color: #00a83a;
    background-size: contain;
}

/* footer .ftrScroll .ftrCont .ftrBtnList li.ftrContact a {
    background-color: var(--white);
    border: var(--main-color02) 2px solid;
    color: var(--main-color02);
} */

/* footer .ftrScroll .ftrCont .ftrBtnList li.ftrContact a:hover {
    background-color: var(--white);
    color: var(--main-color02);
} */

/* -----------------------------------------------------------
  pagenavi
----------------------------------------------------------- */
#main .pagenavi {
    clear: both;
    width: 100%;
    max-width: 1200px;
    margin: 0;
    padding: 60px 0 100px;
}

#main .pagenavi ul {
    display: flex;
    justify-content: center;
    margin: 0;
}

#main .pagenavi ul li {
    display: block;
    padding: 0 !important;
    margin-bottom: 0;
    background-color: var(--white);
}

#main .pagenavi ul li:before {
    content: none;
}

#main .pagenavi ul li a {
    display: flex;
    font-size: 16px;
    color: var(--body-text-color);
    position: relative;
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 10px;
}

#main .pagenavi ul li.list a {
    position: relative;
    border: solid 1px var(--sub-color03);
    padding: 5px 60px 5px 60px;
    box-sizing: border-box;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    color: var(--body-text-color);
}

#main .pagenavi ul li.list a::before {
    content: "";
    position: absolute;
    width:20px;
    height: 15px;
    background: url(./img/three_line.png) no-repeat;
    background-size: contain;
    left: 25px;
}

/* #main .pagenavi ul li.list a:hover {
    color: var(--white);
    background-color: var(--sub-color03);
    transition: 0.7s;
} */

#main .pagenavi ul li.prev {
    text-align: left;
}

#main .pagenavi ul li.next a,
#main .pagenavi ul li.prev a {
    padding: 15px 40px;
    letter-spacing: 0.1em;
    position: relative;
}

#main .pagenavi ul li.prev {
    width: 450px;
    border-right: solid 1px var(--sub-color03);
    border-top: solid 1px var(--sub-color03);
    border-bottom: solid 1px var(--sub-color03);
    border-radius: 0 4px 4px 0;
}

#main .pagenavi ul li.prev a {
    flex-direction: row-reverse;
}

#main .pagenavi ul li.next {
    width: 450px;
    border-left: solid 1px var(--sub-color03);
    border-top: solid 1px var(--sub-color03);
    border-bottom: solid 1px var(--sub-color03);
    border-radius: 4px 0 0 4px;
}

#main .pagenavi ul li.next a::before {
    content: "〈";
    font-weight: 900;
    color: var(--sub-color03);
    position: absolute;
    font-size: 20px;
    left: 5px;
}

#main .pagenavi ul li.prev a::after {
    content: "〉";
    font-weight: 900;
    color: var(--sub-color03);
    position: absolute;
    font-size: 20px;
    right: 5px;
}

#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;
}

#main .pagenavi ul li.next a img,
#main .pagenavi ul li.prev a img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
}

/* .wp-pagenavi */
.wp-pagenavi {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 60px 0 0;
}

.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(--sub-color03);
    border-bottom: solid 1px var(--sub-color03);
    border-top: solid 1px var(--sub-color03);
    border-left: solid 1px var(--sub-color03);
}

.wp-pagenavi a:last-child,
.wp-pagenavi span:last-child {
    border-right: solid 1px var(--sub-color03);
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    background: var(--sub-color03);
    color: var(--white) !important;
}

/* -----------------------------------------------------------
  articleContents
----------------------------------------------------------- */


/* -----------------------------------------------------------
  wysiwyg 投稿関連
----------------------------------------------------------- */
.wysiwyg *[class*=elementor-] {
    display: contents;
}

.post .tl04 {
    text-align: left;
    line-height: 1.5;
    margin: 0 0 40px;
    font-size: 30px;
}

#voice .post .tl04 {
    font-size: 34px;
}

#blog .post .tl04 {
    font-size: 30px;
    margin: 0 0 20px;
}

.post .infoBox {
    margin: 100px 0 5px;
}

.post .time {
    text-align: right;
    color: #777777;
}

.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;
}

#blog .wysiwyg img,
.wysiwyg img.aligncenter {
    display: block;
    margin: 0 auto;
}

#blog .wysiwyg img.alignright {
    display: block;
    margin: 0 0 0 auto;
}

#blog .wysiwyg img.alignleft {
    display: block;
    margin: 0 auto 0 0;
}

.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 hr{
    display: block;
    clear: both;
    border-bottom: solid 1px #333;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-bottom: 20px;
}

.wysiwyg a {
    text-decoration: underline;
    color: var(--main-color01);
}

.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: 40px 0;
    padding: 15px 20px;
}

.wysiwyg h2:not([class]),
.h2 {
    font-size: 26px;
    margin: 40px 0;
    padding: 15px;
    font-weight: 700;
    border-top: solid 3px var(--main-color02);
    border-bottom: solid 3px var(--main-color02);
}

.wysiwyg h3:not([class]),
.h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 40px 0;
    padding: 10px 15px;
    background: var(--main-color02);
    color: var(--white);
}

.wysiwyg h4:not([class]),
.h4 {
    font-size: 20px;
    font-weight: 700;
    padding: 10px 15px;
    background: var(--sub-color03);
    color: var(--white);
    margin: 40px 0;
}

.wysiwyg h5:not([class]),
.h5 {
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
    margin: 40px 0;
    border-bottom: solid 2px var(--sub-color02);
    border-top: solid 2px var(--sub-color02);
}

.wysiwyg h6:not([class]),
.h6 {
    font-size: 16px;
    font-weight: 700;
    padding: 0 10px 10px;
    border-bottom: double 3px var(--sub-color02);
    margin: 40px 0;
}

.wysiwyg blockquote {
    border: 1px dotted var(--black);
    background: #f0f0f0;
    margin-bottom: 20px;
    padding: 40px;
}

.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;
    position: relative;
}

.wysiwyg ul li + li {
    margin-top: 5px;
}

.wysiwyg ul li::before {
    content: "■";
    color: #12a73b;
    display: inline-block;
    margin-right: 5px;
}

.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(--sub-color03);
    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 table {
    width: 100%;
    border-collapse: separate;
    border-top: 1px solid #d0d0d0;
    border-left: 1px solid #d0d0d0;
    border-radius: 10px;
}

.wysiwyg td,
.wysiwyg th {
    vertical-align: middle;
    padding: 20px;
    border-bottom: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    box-sizing: border-box;
}

.wysiwyg th {
    background: #f1f1f1;
    width: 35%;
}

.wysiwyg td {
    font-weight: 500;
    background: var(--white);
}

.wysiwyg tr:first-of-type *:first-child {
    border-radius: 10px 0 0 0;
}
.wysiwyg tr:last-of-type *:first-child {
    border-radius: 0 0 0 10px;
}
.wysiwyg tr:first-of-type *:last-child {
    border-radius: 0 10px 0 0;
} 
.wysiwyg tr:last-of-type *:last-child {
    border-radius: 0 0 10px 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　汎用BOX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wysiwyg .box01{
    background-color: var(--white);
    padding: 20px 30px;
}
.wysiwyg .box01 *:last-child{
	margin-bottom: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　レイアウト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* clearfix */
.cf:before,
.cf:after {
    content:"";
    /*display:table;*/
    display:block;
}
.cf:after {clear:both;}
.cf {zoom:1;}

/* 2列 */
.container00 > * {
    float: right;
}
.container00 > *:first-child {
    float: left;
}
.lr_reverse > * {
    float: left;
}
.lr_reverse > *:first-child {
    float: right;
}
.container00 > * {
    width: calc(50% - 20px);
}
.multi_column .container00 > * {
    width: calc(50% - 10px);
}
.container00.col_37 > *:first-child {
    width: 30%;
}
.col_37 > * {
    width: calc(70% - 40px);
}
.multi_column .col_37 > * {
    width: calc(70% - 20px);
}
.container00.col_73 > * {
    width: 30%;
}
.col_73 > *:first-child {
    width: calc(70% - 40px);
}
.multi_column .col_73 > *:first-child {
    width: calc(70% - 20px);
}
.container00.col_28 > *:first-child {
    width: 20%;
}
.col_28 > * {
    width: calc(80% - 40px);
}
.multi_column .col_28 > * {
    width: calc(80% - 20px);
}
.container00.col_82 > * {
    width: 20%;
}
.col_82 > *:first-child {
    width: calc(80% - 40px);
}
.multi_column .col_82 > *:first-child {
    width: calc(80% - 20px);
}
.container00.col_46 > *:first-child {
    width: 40%;
}
.col_46 > * {
    width: calc(60% - 40px);
}
.multi_column .col_46 > * {
    width: calc(60% - 20px);
}
.container00.col_64 > * {
    width: 40%;
}
.col_64 > *:first-child {
    width: calc(60% - 40px);
}
.multi_column .col_64 > *:first-child {
    width: calc(60% - 20px);
}

/* 3列 */
.container01 > * {
    float: left;
}
.container01 > * {
    /*width:calc((100% - 100px) / 3);*/
    width: calc((100% - 100px) * 0.333);
    margin-left: 50px;
}
.multi_column .container01 > * {
    /*width:calc((100% - 50px) / 3);*/
    width: calc((100% - 50px) * 0.333);
    margin-left: 25px;
}
.container01 > *:first-child {
    margin-left: 0;
}

/* 4列 */
.container02 > * {
    float: right;
    width: 49%;
    width: calc(50% - 10px);
}
.container02 > *:first-child {
    float: left;
}
.container02 > * > * {
    float: right;
    width: 48%;
    width: calc(50% - 10px);
}
.container02 > * > *:first-child {
    float: left;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　ボタン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wysiwyg .btn{
	margin-top: 50px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　フォント
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wysiwyg .mincho {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　効果
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 点滅 */
.wysiwyg .blink {
	-webkit-animation: blink .5s ease-in-out infinite alternate;
	-moz-animation: blink .5s ease-in-out infinite alternate;
	animation: blink .5s ease-in-out infinite alternate
}
@-webkit-keyframes blink {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@-moz-keyframes blink {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@keyframes blink {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

/* 流れる */
.wysiwyg .marquee {
	overflow: hidden;
	width: 100%;
}
.wysiwyg .marquee span{
	margin: 0 auto 40px;
	width: 100%;
	text-align: center;
	overflow: hidden;
	margin: 0;
	display: inline-block;
	padding-left: 100%;
	white-space: nowrap;
	line-height: 1em;
	animation: marquee 10s linear infinite;
	-webkit-animation: marquee 10s linear infinite
}
@keyframes marquee {
	0% {
		transform: translateX(0)
	}
	100% {
		transform: translateX(-100%)
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　よくあるご質問
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wysiwyg {
	dl.faq:not(:last-child) {
		border-bottom: 1px dotted #ccc;
	}
	dl.faq > dt {
		background-color: #ffdfc9;
		transition: all 0.2s linear;
		font-weight: bold;
		padding: 20px 25px 20px 30px;
		position: relative;
	}
	dl.faq > dt.open, dl.faq > dt:hover {
		background-color: #ffdfc9;
	}
	dl.faq > dt:before {
		content: 'Q. ';
		position: absolute;
		left: 10px;
		top: 19px;
	}
	dl.faq > dt a {
		color: #333;
	}
	dl.faq > dd {
		padding: 20px;
		overflow: hidden;
		margin-left: 0;
		background-color: var(--white);
		*:last-child{
			margin-bottom: 0;
		}
	}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　リスト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wysiwyg {
	ul[class], ol[class] {
		list-style-type: none;
		padding-left: 0;
	}
	/* 番号無しリスト */
	ul.list01 > li {
		list-style: none;
		line-height: 1.8;
		position: relative;
		padding: 0 0 0 20px;
	}
	ul.list01 > li:before,
	ul.list01 > li:after {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	ul.list01 > li:before {
		z-index: 2;
		left: 1px;
		width: 3px;
		height: 3px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	ul.list01 > li:after {
		left: 0px;
		width: 8px;
		height: 8px;
		background-color: var(--main-color01);
	}
	/* 番号無しリスト（大） */
	ul.list01.large > li {
		font-size: 22px;
	}
	ul.list01.large li {
		background: none;
		border-bottom: #333 dotted 1px;
		position: relative;
		font-size: 22px;
		padding: 0 0 8px 35px;
		margin: 0 0 8px;
		line-height: 1.5;
	}
	ul.list01.large li:last-child {
		margin-bottom: 0;
	}
	ul.list01.large>li:before,
	ul.list01.large>li:after {
		top: 5px;
		bottom: inherit;
	}
	ul.list01.large>li:after {
		width: 20px;
		height: 20px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
	}
	ul.list01.large>li:before {
		left: 6px;
		top: 10px;
		width: 20px;
		height: 10px;
		z-index: 2;
		left: 3px;
		width: 8px;
		height: 8px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
	}
	.list01 ul > li:first-child {
		margin-top: 5px;
	}
	.list01 ul > li:before {
		content: '┗';
		margin-left: 0;
	}
	/* 番号無しリスト（BOX） */
	.list02 > li {
		/*padding: 15px;*/
		padding: 30px;
		position: relative;
		border: #45b440 solid 5px;
		background: #fff;
		min-height: 2em;
		margin-top: 20px!important;
	}
	.list02 > li:first-child {
		margin-top: 0;
	}

	/* 番号リスト */
	ol.list01 {
		counter-reset: nomalol;
	}
	ol.list01 > li {
		padding-left: 2em;
		font-weight: bold;
		counter-increment: nomalol;
	}
	ol.list01 > li:before {
		top: auto;
		left: auto;
		top: 2px;
		right: calc(100% - 2em);
		color: #f18c2e;
		content: counter(nomalol,decimal)'.';
		background-color: transparent;
	}
	ol.list01.large li{
		font-size: 22px;
	}
	ol.list02{
		counter-reset: boxol;
	}
	ol.list02 > li {
		padding-left: 80px;
		min-height: 80px;
		counter-increment: boxol;
		margin-top: 30px !important;
	}
	ol.list02 > li:after {
		content: ' ';
		height: 0;
		position: absolute;
		width: 0;
		border: 20px solid transparent;
		border-top: #45b440 solid 20px;
		left: 0;
		right: 0;
		bottom: -50px;
		margin: auto;
	}
	ol.list02 > li:last-child:after {
		content: none;
	}
	ol.list02 > li:before {
		position: absolute;
		top: 0;
		left: 0;
		color: #fff;
		width: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 28px;
		background-color: #45b440;
		font-family: Arial;
		content: counter(boxol,decimal);
		margin-left: 0;
		height: unset;
		border-radius: 0;
	}
	ol.list02 > li > h3 {
		font-weight: bold;
		/* font-family: "Noto Sans Japanese"; */
		font-size: 20px;
		margin-bottom: 20px;
	}
	/* チェックリスト */
	ul.list01.list_type02 > li {
		position: relative;
		padding-left: 25px;
	}
	ul.list01.list_type02 > li:before,
	ul.list01.list_type02 > li:after {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		margin: auto;
		bottom: inherit;
	}
	ul.list01.list_type02 > li:before {
		left: 6px;
		top: 8px;
		width: 10px;
		height: 5px;
		border-left: 2px solid var(--sub-color03);
		border-bottom: 2px solid var(--sub-color03);
		border-right: none;
		border-top: none;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	ul.list01.list_type02 > li:after {
		content: none;
	}
	ul.list01.list_type02.large > li {
		font-size: 22px;
	}
	ul.list01.list_type02.large li {
		background: none;
		border-bottom: #333 dotted 1px;
		position: relative;
		font-size: 22px;
		padding: 0 0 8px 35px;
		margin: 0 0 8px;
	}
	/* チェックリスト（大） */
	ul.list01.list_type02.large li:last-child {
		margin-bottom: 0;
	}
	ul.list01.list_type02.large>li:before,
	ul.list01.list_type02.large>li:after {
		position: absolute;
		top: 5px;
		left: 0;
		bottom: inherit;
		margin: auto;
		content: "";
		vertical-align: middle;
	}
	ul.list01.list_type02.large>li:after {
		background: var(--sub-color03);
		border-radius: 50%;
		width: 25px;
		height: 25px;
	}
	ul.list01.list_type02.large>li:before {
		left: 6px;
		top: 12px;
		width: 10px;
		height: 5px;
		border-left: 4px solid #fff;
		border-bottom: 4px solid #fff;
		border-right: none;
		border-top: none;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
	}
}


.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
-----------------------------------------------------------   */
.maintenance {
    position: relative;
    z-index: 0;
    background-image: url(./img/bg_limeGreen.png);
    padding: 100px 0;
}

.deteriorationChk {
    position: relative;
    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: var(--main-color01) !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 5px var(--main-color01);
    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 !important;
    line-height: 1.2;
}

.deteriorationChk .checkPoint ul li p {
    display: inline-block;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 0 !important;
}

.deteriorationChk .checkContent {
    padding-top: 40px;
    clear: both;
}
.deteriorationChk .checkContent > p {
    margin-top: 0 !important;
}

.deteriorationChk .diagnosis-bnr {
    padding-top: 60px;
    clear: both;
}

/* -----------------------------------------------------------
 topShowroom
-----------------------------------------------------------   */
.topShowroom {
    position: relative;
    z-index: 0;
    padding: 100px;
    background-image: url(./img/bg_pink.png);
}

.topShowroom .inner {
    overflow: initial;
}

.topShowroom .inner::before,
.topShowroom .inner::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

.topShowroom .inner::before {
    width: 219px;
    height: 234px;
    background-image: url("./img/bg_topshowroom01.png");
    top: -60px;
    left: -40px;
}

.topShowroom .inner::after {
    width: 283px;
    height: 218px;
    background-image: url("./img/bg_topshowroom02.png");
    top: -60px;
    right: -80px;
}

.topShowroom .desc {
    padding: 60px 40px 25px;
}

.topShowroom .photoList {
    display: flex;
    justify-content: space-between;
}

.topShowroom .info {
    background-color: var(--white);
    padding: 40px;
    margin: 25px 0 40px;
    border-radius: 10px;
}

.topShowroom .add,
.topShowroom .tel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.topShowroom .add a {
    position: relative;
    display: inline-block;
    padding-left: 35px;
    color: var(--main-color01);
    text-decoration: underline;
}

.topShowroom .add a::before {
    content: "";
    position: absolute;
    width: 29px;
    height: 42px;
    background: url(./img/icon_map.png) no-repeat;
    background-size: contain;
    top: -5px;
    left: 0;
}

.topShowroom .tel {
    margin-top: 25px;
}

.topShowroom .tel span {
    display: inline-block;
    position: relative;
    font-size: 50px;
    font-family: var(--en-font-family);
    font-weight: 700;
    color: var(--main-color01);
    line-height: 1;
    padding-left: 50px;
}

.topShowroom .tel span::before {
    content: "";
    position: absolute;
    width: 43px;
    height: 23px;
    background: url(./img/ico_fdl01.png) no-repeat;
    background-size: contain;
    top: 12px;
    left: 0;
}

.topShowroom .tel small {
    font-size: 16px;
}


/* -----------------------------------------------------------
 ourStaff
-----------------------------------------------------------   */
.staff {
    position: relative;
    padding: 100px 0;
    background-image: url(./img/bg_green.png);
    z-index: 0;
}

.staff .inner {
    overflow: initial;
}

.staff .inner::before,
.staff .inner::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

.staff .inner::before {
    width: 219px;
    height: 243px;
    background-image: url("./img/bg_topstaff01.png");
    top: -60px;
    left: -40px;
}

.staff .inner::after {
    width: 126px;
    height: 120px;
    background-image: url("./img/bg_topstaff02.png");
    top: -60px;
    right: 60px;
}
/* -----------------------------------------------------------
 worksFlowArea
-----------------------------------------------------------   */

.worksFlowArea {
    position: relative;
    padding: 100px 0;
    background-color: #ffe392;
    z-index: 0;
}

.worksFlowArea::before,
.worksFlowArea::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 23px;
    background-image: url(./img/dots_line.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    left: 0;
}

.worksFlowArea::before {
    top: 3px;
}

.worksFlowArea::after {
    bottom: 3px;
}

.worksFlowArea .inner {
    overflow: initial;
}

.worksFlowArea .inner::before,
.worksFlowArea .inner::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

.worksFlowArea .inner::before {
    width: 219px;
    height: 234px;
    background-image: url("./img/bg_worksflow01.png");
    top: -60px;
    right: -40px;
}

.worksFlowArea .inner::after {
    width: 87px;
    height: 126px;
    background-image: url("./img/bg_worksflow02.png");
    top: -60px;
    left: 60px;
}

.worksFlowArea .inner.bgNone::before {
    display: none;
}

.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(--sub-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";
}

/* -----------------------------------------------------------
 worksList
-----------------------------------------------------------   */
.worksList {
    position: relative;
    padding: 100px 0;
    border-top: solid 10px var(--sub-color03);
}

.worksList.border-b {
    border-bottom: solid 10px var(--sub-color03);
}

.worksList::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(./img/bg_green.png);
    top: 0;
    left: 0;
    z-index: -1;
}

.worksList .inner {
    overflow: initial;
}

.worksList > .inner::before, .worksList > .inner::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

.worksList .inner::before {
    width: 181px;
    height: 326px;
    background-image: url(./img/bg_topworks03.png);
    top: 300px;
    left: -200px;
}

.worksList .inner::after {
    width: 152px;
    height: 239px;
    background-image: url(./img/bg_topworks04.png);
    top: 480px;
    right: -200px;
}

.worksList .btn {
    margin-top: 60px;
}

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

/* .voicesList.border-t .inner {
    border-top: solid 4px var(--sub-color03);
    padding-top: 100px;
} */

#voice .voicesList {
    padding: 100px 0 0;
}

.voicesList .inner {
    overflow: initial;
}

.voicesList .inner::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 137px;
    background-image: url(./img/bg_reviewContents02.png);
    top: -60px;
    left: 0;
}

#voice .voicesList .inner::after {
    display: none;
}

.voicesList.voiceSlider ul.flex {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 60px;
    align-items: flex-start;
}

.voicesList.voiceSlider li {
    padding: 0;
}

.voicesList.voiceSlider li:nth-of-type(odd) {
    margin-top: 0;
}

.voicesList.voiceSlider li > a {
    box-shadow: 0px 5px 0px 0px #e8e8e8;
    border-radius: 10px;
}

/* -----------------------------------------------------------
 corp-outline
-----------------------------------------------------------   */
.corp-outline {
    padding-top: 100px;
}

.corp-outline .dataTable table td {
    position: relative;
}

.corp-outline .dataTable table td span {
    color: var(--body-text-color);
}

.corp-outline table td a {
    position: absolute;
    right: 20px;
    top: 15px;
    background: var(--main-color01);
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
}

/* -----------------------------------------------------------
 introduction
-----------------------------------------------------------   */
.introduction {
    position: relative;
    z-index: 0;
    padding: 100px 0;
    background-image: url(./img/bg_review.png);
}

.introduction::before,
.introduction::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 23px;
    background-image: url(./img/dots_line.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    left: 0;
}

.introduction::before {
    top: 3px;
}

.introduction::after {
    bottom: 3px;
}

.introduction li {
    width: 525px;
    border: solid 6px var(--main-color01);
    background: var(--white);
    border-radius: 10px;
    box-sizing: border-box;
}

.introduction li a {
    display: block;
    height: 100%;
}

.introduction li img {
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.introduction li h3 {
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    margin: 25px 0 20px;
    line-height: 1;
}

.introduction li h3 > span {
    position: relative;
    padding-right: 35px;
}

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

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

.introduction li h3 > span::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;
}

.introduction li p {
    padding: 0 25px 25px;
}

/* -----------------------------------------------------------
 corporateArea
-----------------------------------------------------------   */
.corporateArea {
    padding-bottom: 100px;
}

.corporateArea .flex {
    gap: 40px;
    justify-content: flex-start;
}

.corporateArea h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 40px;
}

.corporateArea h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}


/* -----------------------------------------------------------
 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
-----------------------------------------------------------   */
.faq {
    padding: 100px 0;
}

.faq ul {
    margin-top: 60px;
}
.faq li {
    margin-top: 15px;
}

.faq .que {
  position: relative;
  padding: 15px 9% 15px 15px;
  background-color: #fff;
  cursor: pointer;
  border: solid 2px var(--sub-color02);

}
.faq .que p,
.faq .ans p {
  display: flex;
  font-size: 18px;
}
.faq .que p::before {
  content: 'Q';
  display: inline-block;
  margin-right: 0.5em;
  color: var(--sub-color03);
  font-size: 36px;
  font-weight: 700;
  font-family: var(--en-font-family);
  line-height: 1;
}
.faq .ans + .faq .que {
  margin-top: 25px;
}
.faq .ans {
  display: none;
  margin-left: 0;
  padding: 15px 9% 15px 15px;
  border-bottom: solid 2px var(--sub-color02);
  border-left: solid 2px var(--sub-color02);
  border-right: solid 2px var(--sub-color02);
  background-color: var(--white);
}
.faq .ans p::before {
  content: 'A';
  display: inline-block;
  margin-right: 0.5em;
  color: var(--main-color01);
  font-size: 36px;
  font-weight: 700;
  font-family: var(--en-font-family);
  line-height: 1;
}

/* 「+」を追加 */
.faq .que::before,
.faq .que::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4%;
  width: 15px;
  height: 3px;
  margin: auto;
  background-color: var(--sub-color03);
}
.faq .que::after {
  transform: rotate(90deg);
  transition: .3s;
}
.faq .que.is-active {
    background-color: var(--main-color01);
    color: var(--white);
}
.faq .que.is-active p::before {
    color: var(--white);
}
/* クリックしたときに「+」を「−」に変更 */
.faq .que.is-active::before,
.faq .que.is-active::after {
  background-color: var(--white);
}

.faq .que.is-active::after {
  transform: rotate(180deg);
}


/* -----------------------------------------------------------
 #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;
    line-height: 1;
    text-align: center;
}

.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: 700;
    font-size: 60px;
    padding-left: 55px;
    color: var(--main-color01);
}

.contactTel .box > div {
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.contactTel .box > div > div {
    display: inline-grid;
    text-align: center;
}

.contactTel .tel_number::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 27px;
    background: url(./img/ico_fdl01.png) no-repeat;
    background-size: contain;
    top: 17px;
    left: 0;
}

.contactTel .open_info {
    line-height: 1;
    font-weight: 700;
}

.contactTel .open_info.border {
    border: solid 2px var(--body-text-color);
    border-radius: 4px;
    padding: 10px 15px;

}

.contactTel .btn {
    min-width: 400px;
}

.contactTel .btn::after {
    top: 40%;
}
#menu .contactTel .btn::after, 
#rainleaking .contactTel .btn::after, 
#diagnosis .contactTel .btn::after, 
#colorsimulation .contactTel .btn::after {
    transform: rotate(135deg);
}

.contactTel .btn .free {
    display: inline-block;
    background-color: var(--red);
    color: var(--white);
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 16px;
    margin-right: 7px;
}


/* -----------------------------------------------------------
    menuCommon
----------------------------------------------------------- */
.menuCommon {
    position: relative;
    z-index: 0;
    padding: 100px 0;
    margin: 100px 0 0;
    background-image: url(./img/bg_orange.png);
}

.menuCommon .menuPointIcon {
    position: absolute;
    text-align: center;
    width: 120px;
    height: 120px;
    background-color: var(--main-color02);
    color: var(--white);
    font-family: var(--en-font-family);
    font-weight: 600;
    border-radius: 50%;
    padding-top: 22px;
    box-sizing: border-box;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}

.menuCommon .menuPointIcon small {
    font-size: 12px;
}

.menuCommon .menuPointIcon span {
    display: block;
    font-size: 58px;
}

.menuCommon .warning-contents {
    position: relative;
    background: var(--red);
    padding: 25px 40px;
    border-radius: 10px;
    font-size: 34px;
    font-weight: 700;
    /* text-align: center; */
    color: var(--white);
    line-height: 1.25;
}

.menuCommon .warning-contents b {
    color: #ffe4a2;
}

.menuCommon .warning-contents small {
    font-size: 22px;
}

.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 {
    margin-top: 80px;
}

.section02 ul {
    margin-top: 80px;
}

.section02 li {
    position: relative;
    width: 340px;
}

.section02 li dl {
    background-color: var(--white);
    padding: 20px;
    border-radius: 0 0 10px 10px;
}

.section02 li dt {
    font-weight: 700;
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: solid 2px var(--sub-color02);
}

.section02 li img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.section02 .menuPointIcon {
    width: 100px !important;
    height: 100px !important;
    padding-top: 22px !important;
    top: -50px !important;
}

.section02 .menuPointIcon span {
    font-size: 40px;
}

.menuCommon .section02 .compareTable thead th {
    border-left: solid 2px #ffcb9b;
}

.menuCommon .section02 .compareTable tbody tr:last-of-type td {
    /* padding: 10px 10px 10px 65px; */
}

.menuCommon .section02 .warning-contents,
.menuCommon .section03 .warning-contents {
    margin: 130px auto 0;
    width: 840px;
}

.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: 3px;
    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-color01);
}

.menuCommon .section02 .cost-contents {
    border: solid 5px var(--red);
    border-radius: 20px;
    background: var(--white);
    padding: 50px;
    margin-top: 40px;
}

.menuCommon .section02 .cost-contents h4 {
    font-size: 36px;
    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: #0066b9;
    border-radius: 10px;
    box-sizing: border-box;
}

.menuCommon .section02 .cost-contents li img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.menuCommon .section02 .cost-contents li p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    padding: 20px 25px;
    color: var(--white);
}

.menuCommon .section03 ul {
    flex-wrap: wrap;
}

.menuCommon .section03 li {
    position: relative;
    box-sizing: border-box;
    width: 530px;
    background: var(--white);
    border-radius: 10px;
    margin-top: 60px;
}

.menuCommon .section03 li:nth-child(3) {
    width: 100%;
    padding: 55px 40px 40px;
}

.menuCommon .section03 .menuPointIcon small {
    font-size: 16px;
    font-family: var(--base-font-family);
}

.menuCommon .section03 li dl {
    padding: 25px 40px;
}

.menuCommon .section03 li h4,
.menuCommon .section03 li dt {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 15px;
}

.menuCommon .section03 li img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.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,
.menuCommon .section05 h4  {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

.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 {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    gap: 40px;
    background-color: var(--white);
    border-radius: 10px;
    padding: 40px 40px 40px 80px;
    margin: 40px 0 0 60px;
}

.menuCommon .section04 li .menuPointIcon {
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
}

.menuCommon .section04 li h5 {
    position: relative;
    font-size: 26px;
    font-weight: 700;
    color: var(--main-color01);
    margin-bottom: 5px;
    border-bottom: solid 2px var(--sub-color02);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.menuCommon .section05 ul {
    margin-top: 40px;
}

.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: 36%;
}

.first_point figure img {
    width: 100%;
}

.first_point .innBox > div {
    position: relative;
    width: 700px;
    box-sizing: border-box;
}

.first_point .innBox h2 {
    font-size: 60px;
    font-weight: 900;
    color: var(--sub-color03);
    line-height: 1.25;
    margin-bottom: 25px;
}

.first_point .innBox h2 span {
    color: var(--main-color01);
}

.first_point .innBox h3 {
    position: relative;
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    background-color: var(--white);
    padding: 10px;
    border-radius: 50px;
}

.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: 15px;
    line-height: 2;
    letter-spacing: -0.05em;
}

.first_point .btn {
    margin-top: 60px;
}

.first_point .innBox figure {
    margin-top: 40px;
    position: relative;
    left: -50px;
    width: 80%;
}

.first_point .innBox figure.w_auto {
    position: static;
    width: auto;
    text-align: center;
}

.first_point .innBox figure.w_auto img {
    width: auto;
}

/* -----------------------------------------------------------
    checkPointList
----------------------------------------------------------- */
.checkPointList.inner {
    overflow: initial;
}

.checkPointList .box {
    position: relative;
    background-color: #fff7f1;
    border: solid 10px #ffad73;
    padding: 80px 60px 60px;
    border-radius: 20px;
    margin-top: 100px;
}

.checkPointList .box .pointNumber {
    position: absolute;
    display: inline-flex;
    gap: 10px;
    background-color: var(--main-color01);
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    font-family: var(--en-font-family);
    font-weight: 600;
    border-radius: 100px;
    padding: 15px 70px;
    line-height: 1;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
}

.checkPointList .box .pointNumber span:nth-of-type(1) {
    background-color: var(--white);
    color: var(--main-color01);
    font-size: 15px;
    padding: 10px 17px 10px 20px;
    border-radius: 20px;
    letter-spacing: 3px;
}

.checkPointList .box .pointNumber span:nth-of-type(2) {
    color: var(--white);
    font-size: 74px;
}


.checkPointList .box figure {
    text-align: center;
}

.checkPointList .box figure img {
    width: auto;
    max-width: 100%;
}

.checkPointList .box span {
    font-weight: 700;
}

.checkPointList .box h3 {
    font-size: 40px;
    font-weight: 900;
    color: var(--sub-color03);
    margin-top: 25px;
    line-height: 1.35;
}

.checkPointList .box  h3 span {
    font-weight: 900;
}

.checkPointList .box p,
.checkPointList .box ul {
    margin-top: 15px;
}

.checkPointList .box .photo {
    margin-top: 25px;
    justify-content: center;
    gap: 40px;
}

.checkPointList .box h4.tl04 {
    border-bottom: solid 3px #89b728;
    border-top: solid 3px #89b728;
}

.checkPointList .box ul li {
    font-weight: 700;
}

.checkPointList .box ul li::before {
    content: "■";
    color: #12a73b;
    display: inline-block;
    margin-right: 5px;
}

.checkPointList .box ol li {
    position: relative;
    padding: 10px 10px 10px 30px;
    border-bottom: solid 2px var(--sub-color03);
}
.checkPointList .box ol li::before {
    position: absolute;
    display: inline-block;
    line-height: 1;
    margin-right: 5px;
    color: var(--sub-color03);
    font-size: 20px;
    font-weight: 700;
    left: 0;
    top: 18px;
}

.checkPointList .box ol li:nth-of-type(1)::before {
    content: "❶";
}
.checkPointList .box ol li:nth-of-type(2)::before {
    content: "❷";
}
.checkPointList .box ol li:nth-of-type(3)::before {
    content: "❸";
}

.checkPointList .box ol li h5 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.checkPointList .box ol li p {
    margin: 0;
}

/* -----------------------------------------------------------
    categoryTabs
----------------------------------------------------------- */
/*タブ切り替え全体のスタイル*/
.categoryTabs {
    position: relative;
    margin-top: 40px;
}

.categoryTabs::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--sub-color03);
    left: 0;
    top: 50px;
}

.categoryTabs .inner {
    margin: 0 auto;
    display: grid;
    align-items: flex-end;
    grid-template-columns: repeat(9, minmax(0, 1fr))
        /*auto*/
    ;
    grid-template-rows: 1fr auto;
    z-index: 10;
    position: static;
}

/* タブのスタイル */
.categoryTabs .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 5px 14px 5px;
    cursor: pointer;
    z-index: 1;
    transition: none;
    border-top: 2px solid var(--sub-color03);
    border-left: 2px solid var(--sub-color03);
    border-right: solid 2px var(--sub-color03);
    height: 50px;
    border-radius: 4px 4px 0 0;
    font-size: 15px;
    letter-spacing: -0.05em;
}

.categoryTabs .tab.all {
    padding: 13px 8px 14px 28px;
}

.categoryTabs .tab.all::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 16px;
    background: url(./img/three_line.png) no-repeat;
    background-size: contain;
    left: 22px;
    top: 16px;
}

.categoryTabs .tab b,
.categoryTabs .tab i {
    font-weight: 500;
}

.categoryTabs .tab:first-of-type::after {
    width: 100vw;
}

.categoryTabs input:checked + .tab,
.categoryTabs .tab:hover {
    z-index: 100;
    background: var(--main-color01);
    color: var(--white);
}

.categoryTabs input:checked + .tab.all::before,
.categoryTabs .tab.all:hover::before {
    background-image: url(./img/three_line_w.png);
    background-repeat: no-repeat;
}

.categoryTabs input:checked + .tab + .categoryTabs .tab {
    color: #1c8aff;
}

.categoryTabs input:checked + .tab::after,
.categoryTabs .tab:hover::after {
    background: transparent;
}

.categoryTabs input:checked + .tab:first-of-type::after,
.categoryTabs .tab:first-of-type:hover::after {
    left: 100%;
    background: var(--black);
}

/*ラジオボタンを全て消す*/
input[name="tab"],
input[name="tab_all"] {
    display: none;
}

/*タブ切り替えの中身のスタイル*/
.tabContent {
    display: none;
    padding: 25px 0;
    clear: both;
    overflow: hidden;
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

.tabContent::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - 50px);
    background: #f1e9e4;
    left: 0;
    bottom: -4px;
    border-top: solid 2px var(--sub-color03);
    border-bottom: solid 2px var(--sub-color03);
    z-index: 2;
}

.tabContent .cats {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tabContent .cats > a,
#works .tabContent .cats > a {
    /* background: var(--white); */
    background: var(--white);
    color: var(--sub-color03) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 15px 12px;
    line-height: 1;
    border: 2px solid var(--sub-color03);
    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;
}

/*選択されているタブのコンテンツのみを表示*/
.categoryTabs 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;
}

.single-content.free_video {
    margin-top: 60px !important;
}

.single-content.free_video iframe {
    width: 580px;
    height: 325px;
    display: block;
    margin: 20px auto;
}

/* -----------------------------------------------------------
    blogArchiveList
----------------------------------------------------------- */
.blogArchiveList {
    padding-bottom: 100px;
}

.blogArchiveList,
.blogArticleArea {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.blogArticleArea {
    margin-top: 100px;
}

.blog-archive,
.blog-article {
    width: 800px;
}

.side-category {
    width: 250px;
}

.blogList {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 25px;
}

.blogList.row {
    margin-top: 40px;
    gap: 40px;
}

.blogList li {
    width: 250px;
}

.blogList.row li {
    width: 340px;
}

.blogList li a {
    display: block;
    background-color: var(--white);
    border: solid 3px var(--main-color02);
    border-radius: 10px;
    height: 100%;
    box-shadow: 0px 5px 0px 0px #e8e8e8;
}

.blogList li img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 7px 7px 0 0;
}

.blogList.row li img {
    height: 220px;
} 

.blogList li .overflowH {
    padding: 15px;
}

.blogList li .archive-ttl {
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: solid 2px var(--sub-color03);
}

.blogList li time {
    display: block;
    font-size: 14px;
    color: #777777;
    text-align: right;
    margin-top: 10px;
}

.side-category {

}

.side-category h3 {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: var(--sub-color03);
    border-bottom: solid 3px var(--sub-color03);
    padding-bottom: 5px;
    margin-top: 40px;
}

.side-category h3:first-of-type {
    margin-top: 0;
}

.side-category h3::before {
    content: "";
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.side-category h3:nth-of-type(1)::before {
    width: 32px;
    height: 24px;
    top: 7px;
    background-image: url(./img/blogCateIcon01.png);
}

.side-category h3:nth-of-type(2)::before {
    width: 24px;
    height: 30px;
    top: 3px;
    background-image: url(./img/blogCateIcon02.png);
}

.side-category h3:nth-of-type(3)::before {
    width: 29px;
    height: 33px;
    top: 0;
    background-image: url(./img/blogCateIcon03.png);
}

.side-category h3:nth-of-type(4)::before {
    width: 29px;
    height: 29px;
    top: 4px;
    background-image: url(./img/blogCateIcon04.png);
}

.side-category .list01 .cat-item {
    display: block;
}

.side-category .list01 .cat-item a {
    border-radius: 0;
    font-size: 16px;
    padding: 15px 0;
    display: block;
    color: var(--body-text-color);
    background: transparent;
    line-height: 1.25;
    margin: 0;
    border-bottom: solid 1px var(--sub-color03);
}

.side-category .list02 a {
    width: 100%;
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: solid 1px var(--sub-color03);
}

.side-category .list02 .thumb {
    width: 65px;
    height: 65px;
}

.side-category .list02 .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.side-category .list02 .title {
    flex: 1;
    line-height: 1.25;
}

.side-category .list02 .title time {
    font-size: 14px;
    color: #777777;
}

.side-category .list02 .title h4 {
    margin-top: 5px;
}

.side-category select {
    width: 100%;
    display: block;
    margin-top: 10px;
    padding: 10px;
    border: none;
    border: solid 1px var(--sub-color03);
    background-color: #f1f1f1;
}

/* -----------------------------------------------------------
    blogArticleArea
----------------------------------------------------------- */
.blogArticleArea .cats a {
    color: var(--body-text-color);
}

.blogArticleArea .cats a:hover {
    background-color: transparent;
}

.blogArticleArea .tl04 {
    margin: 0 0 15px !important;
}

.blogArticleArea .time {
    color: #777777;
}

.blogArticleArea .mainThumb {
    margin: 20px 0;
}

.blogArticleArea .mainThumb img {
    width: 100%;
    object-fit: cover;
}

.blogListArea {
    margin-top: 80px;
    padding-top: 80px;
    border-top: solid 4px var(--sub-color03);
}