@charset "utf-8";
/*
Theme Name: miyaken-solar
Theme URI: https://miyaken-solar.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");

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-width: 1200px;
    font-size: 16px;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100% !important;
    color: var(--body-text-color);
    /* background: var(--main-color02); */
    overflow-wrap: anywhere;
    /* word-break: normal; */
    word-break: break-all;
    line-break: strict;
}

body.iframe {
    min-width: 0;
}

a {
    color: var(--main-color01);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    opacity: 0.7;
    /* color: var(--main-color01); */
}

img {
    image-rendering: -webkit-optimize-contrast;
}

figure {
    margin-bottom: 0;
}

em {
    font-weight: bold;
    font-style: normal;
}

time {
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
}

.wide_lg {
    max-width: 1600px;
    margin: 0 auto;
}

.wide {
    max-width: 1200px;
    margin: 0 auto;
}

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

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

.flex {
    display: flex;
}

.en {
    font-family: var(--en-font-family);
    font-weight: 700 !important;
    text-transform: capitalize;
}

.tel {
    display: flex;
    flex-direction: column;
}

.tel i[class*='fa-'] {
    font-size: 35px;
    margin-right: 0.25em;
    vertical-align: 1px;
}

.tel .tel-link {
    font-family: var(--en-font-family);
    font-size: 47px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-left: 5px;
    color: var(--body-text-color);
}

.tel .tel-link a {
    color: var(--main-color01);
}

.tel .tel-open {
    font-size: 12px;
    font-family: var(--base-font-family);
    font-weight: 500;
    margin-top: -5px;
}

/* -----------------------------------------------------------
    common
----------------------------------------------------------- */
.non-register {
    padding: 50px;
    text-align: center;
}

/* -----------------------------------------------------------
    box
----------------------------------------------------------- */
.box_border01 {
    background: var(--white);
    border: 2px solid var(--main-color01);
    border-radius: 6px;
    padding: 60px;
}

.box_border01 > .tl_border02 {
    padding-top: 0;
}

/* -----------------------------------------------------------
    title
----------------------------------------------------------- */
.tl_popup01 {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.blogList .tl_popup01, 
.infoList .tl_popup01, 
.staffList .tl_popup01, 
.messageContent .tl_popup01, 
.productContentL .tl_popup01, 
.corporateOutline .tl_popup01 {
    font-size: 40px;
    font-weight: 900;
    color: #222;
    padding-bottom: 20px;
}

.blogList .tl_popup01::after, 
.infoList .tl_popup01::after, 
.staffList .tl_popup01::after, 
.messageContent .tl_popup01::after, 
.productContentL .tl_popup01::after, 
.corporateOutline .tl_popup01::after {
    content: "";
    position: absolute;
    bottom: 0;
    background: url(./img/ttl_line01.png) center;
    width: 190px;
    height: 11px;
}

.tl_popup01 small {
    position: relative;
    display: inline-block;
    font-size: 30px;
    font-weight: 800;
    color: var(--sub-color01);
    margin-bottom: 5px;
}

.tl_popup01 small b {
    color: var(--main-color02);
}

.tl_popup01 small::before,
.tl_popup01 small::after {
    content: "";
    background: url(./img/ttl_small_line.png) no-repeat center;
    position: absolute;
    top: 50%;
    width: 77px;
    height: 78px;
}

.tl_popup01 small::before {
    left: -100px;
    transform: translateY(-50%);
}

.tl_popup01 small::after {
    right: -100px;
    transform: translateY(-50%) scale(-1, 1);
}

.tl_popup01 .balloon01 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 102px;
    height: 102px;
    box-sizing: border-box;
    padding-bottom: 5px;
    inset: 15px auto 0 -0.5em;
    margin: auto;
    color: var(--red);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.08;
    pointer-events: none;
    transform: translate(-100%, -50%);
}

.tl_popup01 .balloon01::before {
    content: "";
    position: absolute;
    background: var(--red);
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    --mask: url(./img/svg_balloon10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

.tl_border01 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    border-top: 4px solid var(--sub-color01);
    border-bottom: 4px solid var(--sub-color01);
    margin-bottom: 60px;
    /* padding: 30px 25px; */
    padding: 0.833em 0.694em;
}

.tl_border02 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    padding: 20px 0;
    border-bottom: 1px solid var(--sub-color02);
    margin-bottom: 40px;
}

.tl_border03 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.33;
    text-align: center;
    padding: 20px 0;
    margin-bottom: 40px;
    position: relative;
}

.tl_border03 small {
    font-size: 0.73em;
    font-weight: 700;
    display: block;
}

.tl_border03::before {
    display: block;
    position: absolute;
    inset: auto 0 0;
    margin: 0 auto;
    content: "";
    background: var(--main-color01);
    width: 50px;
    height: 7px;
    pointer-events: none;
}

.tl_bar01 {
    font-size: 26px;
    font-weight: 700;
    color: var(--white);
    background: var(--sub-color01);
    padding: 0.8em 0 0.8em 0.8em;
    box-sizing: border-box;
    line-height: 1.25;
    margin: 40px 0;
}

/* .tl_bar02 {
    font-size: 18px;
    font-weight: 400;
    padding: 20px 20px 20px 65px;
    position: relative;
    border-bottom: 1px solid var(--sub-color02);
}

.tl_bar02::before {
    position: absolute;
    display: block;
    content: "";
    inset: 0 auto 0 20px;
    margin: auto 0;
    background: var(--sub-color01);
    width: 20px;
    height: 5px;
} */

.title_txt {
    text-align: center;
    margin: 20px 0;
    padding: 60px;
    background: var(--white);
}

.title_txt h2 {
    font-size: 30px;
    font-weight: 900;
    color: var(--sub-color01);
    line-height: 1.5;
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}

.title_txt p {
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    line-height: 2;
}

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

.title_txt h2::before,
.title_txt h2::after {
    content: "";
    background: url(./img/ttl_small_line.png) no-repeat center;
    position: absolute;
    top: 50%;
    width: 77px;
    height: 78px;
}

.title_txt h2::before {
    left: -120px;
    transform: translateY(-50%);
}

.title_txt h2::after {
    right: -120px;
    transform: translateY(-50%) scale(-1, 1);
}

#corporate .title_txt {
    padding: 100px 0;
}

#corporate .title_txt h2 {
    font-size: 59px;
}

#corporate .title_txt h2::before,
#corporate .title_txt h2::after {
    content: none;
}

#corporate .title_txt h2 span {
    display: block;
    font-size: 36px;
    color: var(--main-color01);
    padding: 10px;
    margin-bottom: 30px;
    border: 6px solid var(--main-color01);
    border-radius: 45px;
}

#corporate .title_txt h2 span b {
    color: var(--main-color02);
}

.cats .cat {
    font-size: 14px;
    color: var(--body-text-color);
    background: #e9e9e9;
    padding: 7px 15px 8px;
    line-height: 1;
    transition: 0.3s ease;
}

.cats .cat:hover {
    opacity: 0.7;
}

.categories {
    position: relative;
}

.categories:not(.flatCategories) {
    /* margin-top: -25px; */
    padding: 0 40px 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* .categories::before {
    position: absolute;
    inset: auto -100% 0;
    margin: 0 auto;
    content: "";
    display: block;
    width: 200vw;
    height: 1px;
    background: var(--sub-color02);
} */

.categories:not(.flatCategories) .cats .cat {
    border: 1px solid currentColor;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 25px 12px;
    line-height: 1;
    text-align: center;
    min-width: 160px;
    box-sizing: border-box;
    margin: 10px 20px;
    transition: 0.3s ease;
}

.categories:not(.flatCategories) .cats .cat:hover,
.categories:not(.flatCategories) .cats .cat.active {
    color: var(--white) !important;
    background: var(--sub-color01);
    border-color: transparent;
}

/* .flatCategories */
.categories.flatCategories .cats {
    display: flex;
    gap: 0 1px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.categories.flatCategories .cats .cat {
    --background: #999;
    display: block;
    flex: 1;
    font-size: 18px;
    font-weight: 500;
    color: var(--white) !important;
    text-align: center;
    background: var(--background);
    margin: 10px 0 0 0;
    padding: 20px 20px 18px;
    border: none;
    position: relative;
    transition: 0.3s;
}

.categories.flatCategories .cats .cat.active,
.categories.flatCategories .cats .cat:hover {
    --background: var(--main-color02);
    padding-top: 23px;
    margin-top: 0;
    padding-bottom: 23px;
}

.categories.flatCategories .cats .cat::after {
    display: block;
    position: absolute;
    inset: auto 0 2px;
    margin: 0 auto;
    content: "";
    width: 18px;
    height: 8px;
    background: transparent;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translateY(100%);
}

.categories.flatCategories .cats .cat.active::after,
.categories.flatCategories .cats .cat:hover::after {
    background: var(--background);
}

/* .categories.flatCategories .cats {
    display: flex;
    gap: 0;
    justify-content: stretch;
    width: 100%;
}

.categories.flatCategories .cats .cat {
    display: block;
    margin: 0 !important;
    flex-grow: 1;
    padding: 20px 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    background: transparent;
    transition: 0.3s ease;
}

.categories.flatCategories .cats .cat.active,
.categories.flatCategories .cats .cat:hover {
    background: transparent !important;
    color: var(--main-color01) !important;
    opacity: 1 !important;
}

.categories.flatCategories .cats .cat.active::after,
.categories.flatCategories .cats .cat:hover::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--main-color01);
    pointer-events: none;
    z-index: -1;
} */

/* -----------------------------------------------------------
    list
----------------------------------------------------------- */
.lst_checkbox01 {
    display: block;
    margin: 0;
    padding: 0;
}

.lst_checkbox01 li {
    padding-left: 30px;
    padding-right: 1em;
    padding-bottom: 2px;
    position: relative;
}

.lst_checkbox01 li::before {
    content: "";
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    inset: 0.2em auto auto 0;
    margin: 0;
    background: var(--red);
    --mask: url(./img/svg_check01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

.lst_number01 {
    counter-reset: list-item !important;
    line-height: 2;
    margin: 1rem 0;
}

.lst_number01 li {
    counter-increment: list-item;
    margin-left: 2rem;
    margin-bottom: 1rem;
    padding-left: 0 !important;
}

.lst_number01 li::marker {
    content: counter(list-item) '.    ';
}

.lst_number01 li::before,
.lst_number01 li::after {
    display: none !important;
}

.lst01 li {
    list-style: none;
    line-height: 2;
    padding-left: 1em;
    position: relative;
}

.lst01 li::before {
    content: '';
    display: block;
    left: 0.5em;
    top: 1em;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: currentColor;
    position: absolute;
    transform: translate(-50%, -50%);
}

.lst_img02 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lst_img02 > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.lst_img02 > * img {
    display: block;
    border: 1px solid var(--sub-color02);
}



/* -----------------------------------------------------------
    table
----------------------------------------------------------- */
table {
    width: 100%;
}

th {
    background: #eee;
    font-size: 16px;
    font-weight: 500;
}

th, td {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 25px 20px;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}
td > p:last-of-type{
    margin-bottom: 0;
}
.tbl01 th,
.tbl01 td {
    border: 2px solid #ccc;
}

.tbl01 td {
    background: var(--white);
}

.tbl01 td a {
    text-decoration: underline;
    text-underline-offset: 8px;
    transition: 0.3s ease;
}

/* -----------------------------------------------------------
    button
----------------------------------------------------------- */
a.btn, .btn a {
    display: block;
    background: var(--main-color01);
    color: var(--white) !important;
    font-size: 24px;
    font-weight: 600;
    line-height: 70px;
    min-width: 460px;
    width: fit-content;
    height: 70px;
    outline: 2px solid transparent;
    box-sizing: border-box;
    margin: 20px 20px 20px 0;
    padding-right: 30px;
    position: relative;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 10px #004c87;
    transition: 0.3s ease;
}

/* a.btn.btn_md,
.btn.btn_md a {
    font-size: 16px;
    border-radius: 25px;
    min-width: 280px;
    padding: 20px 45px 19px 35px;
} */

a.btn::before,
.btn a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: url(./img/img_arrow.png) no-repeat center left 55%;
    background-color: var(--main-color02);
    border-radius: 50%;
}

/* a.btn.btn_md::before,
.btn.btn_md a::before {
    inset: 0 25px 0 auto;
} */

a.btn:hover, .btn a:hover {
    transform: translateY(10px);
    box-shadow: none;
    opacity: 1;
}

.textLeft.btn a,
.textLeft a.btn {
    margin-right: auto;
}

.textCenter.btn a,
.textCenter a.btn {
    margin-left: auto;
    margin-right: auto;
}

.textRight.btn a,
.textRight a.btn {
    margin-left: auto;
}

a.btn_outline,
.btn_outline a,
.btn_outline span {
    display: block;
    border-radius: 4px;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 45px 12px 30px;
    line-height: 1;
    color: var(--main-color01);
    background: var(--white);
    border: 2px solid currentColor;
    width: fit-content;
    min-width: 220px;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

a.btn_outline.btn_outline02,
.btn_outline.btn_outline02 a,
.btn_outline.btn_outline02 span {
    border-color: var(--body-text-color);
    color: var(--body-text-color);
    background: var(-white);
}

.btn_outline span {
    min-width: 180px;
}

a.btn_outline::before,
.btn_outline a::before,
.btn_outline span::before {
    position: absolute;
    inset: 15px 15px 0 auto;
    margin: auto 0;
    content: "";
    width: 9px;
    height: 15px;
    background: currentColor;
    --mask: url(./img/svg_arrow10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
    transform: translateY(-50%);
}

.textLeft.btn_outline a,
.textLeft a.btn_outline,
.textLeft .btn_outline span {
    margin-right: auto;
}

.textCenter.btn_outline a,
.textCenter a.btn_outline,
.textCenter.btn_outline span {
    margin-left: auto;
    margin-right: auto;
}

.textRight.btn_outline a,
.textRight a.btn_outline,
.textRight .btn_outline a {
    margin-left: auto;
}

a.btn_outline:hover,
.btn_outline a:hover,
a:hover .btn_outline span,
li:has(a) a:hover ~ a:not(.cat) .btn_outline span {
    border-color: var(--body-text-color) !important;
    color: var(--body-text-color);
    background: var(-white);
    opacity: 1 !important;
}

.btn_ico {
    display: block;
    background: var(--main-color02);
    color: var(--white) !important;
    font-size: 18px;
    font-weight: 700;
    outline: 2px solid transparent;
    box-sizing: border-box;
    margin: 20px 10px 20px 0;
    padding: 25px 20px 25px 75px;
    /* align-items: center; */
    line-height: 1;
    position: relative;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 6px #e15907;
    transition: 0.3s ease;
    white-space: nowrap;
}

.btn_ico.ico_file01 {
    background: var(--sub-color01) !important;
    box-shadow: 0 6px #002143 !important;
    margin-right: 25px;
}

.btn_ico::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    margin: auto 0;
    background-color: currentColor;
}

.btn_ico.ico_mail01::before,
span[class='ico_mail01']::before {
    width: 40px;
    background: url(./img/ico_mail.png) no-repeat center left;
}

.btn_ico.ico_file01::before,
span[class='ico_file01']::before {
    width: 40px;
    background: url(./img/ico_showroom.png) no-repeat center left;
}

.btn_ico.ico_fdl01::before,
span[class='ico_fdl01']::before {
    /* width: 28px;
    height: 13.75px; */
    /* width: 1.75em;
    height: 0.86em; */
    width: 2.275em;
    height: 1.118em;
    --mask: url(./img/svg_fdl01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

.btn_ico.ico_tel01::before,
span[class='ico_tel01']::before {
    width: 1.58125em;
    height: 1.58125em;
    --mask: url(./img/svg_tel01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

.btn_ico:hover {
    box-shadow: none !important;
    transform: translateY(6px);
    opacity: 1 !important;
}

.btn_ico small {
    display: block;
    background: #ff1e00;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 12px 6px;
    margin-bottom: 10px;
    position: absolute;
    left: 13px;
    top: 0;
    transform: translateY(-50%);
    line-height: 1;
    /* width: 100%; */
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
}

.btn_ico small::after {
    content: "";
    position: absolute;
    transform: translate(-50%, 100%);
    left: 50%;
    bottom: 0;
}

.btn_ico small::after {
    border-top: #ff1e00 9px solid;
    border-left: transparent 4px solid;
    border-right: transparent 4px solid;
}

.btn_ico img {
    position: absolute;
    top: 0;
    left: 15px;
    bottom: 0;
    margin: auto 0;
}

.btn_ico.btn_orange {
    font-size: 28px;
    text-align: center;
    line-height: 100px;
    width: 530px;
    height: 100px;
    padding: 0;
    margin: 0 auto;
    box-shadow: 0 10px #e15907;
    position: relative;
}
.btn_ico.btn_orange::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: url(./img/img_arrow.png) no-repeat center left 55%;
    background-color: var(--main-color01);
    border-radius: 50%;
}

.btn_ico.btn_orange:hover {
    transform: translateY(10px);
}

/*----- .cats -----*/
.cats {
    display: block;
    margin: 10px -10px 0 0;
}

.cats .cat {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    background: #e9e9e9;
    margin: 0 10px 10px 0;
    padding: 8px 10px 9px;
    color: var(--body-text-color) !important;
}

/*----- other -----*/
.formBoxNotes {
    padding-left: 1em;
    text-indent: -1em;
}

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

.wp-pagenavi .pages {
    border: 0;
}

.wp-pagenavi a {
    text-decoration: none !important;
}

.wp-pagenavi a,
.wp-pagenavi span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    border: 0;
    color: var(--body-text-color) !important;
    background: var(--white);
    padding: 10px 5px 10px;
    line-height: 1;
    border-radius: 0;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    min-width: 2.1875em;
    box-sizing: border-box;
}

.wp-pagenavi span.extend {
    background: transparent !important;
}

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

.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink {
    position: relative;
    text-align: center;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: var(--main-color01);
    color: var(--white) !important;
}

.wp-pagenavi a.previouspostslink {
    padding-left: 60px;
    padding-right: 25px;
    margin-right: 50px;
    order: -1;
}

.wp-pagenavi a.previouspostslink::after,
.wp-pagenavi a.nextpostslink::after {
    position: absolute;
    margin: auto 0;
    content: "";
    width: 17px;
    height: 12px;
    background-color: currentColor;
    --mask: url(./img/svg_arrow10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

.wp-pagenavi a.previouspostslink::after {
    inset: 0 auto 0 25px;
    transform: scaleX(-1);
}

.wp-pagenavi a.nextpostslink {
    padding-left: 25px;
    padding-right: 60px;
    margin-left: 50px;
    order: 999;
}

.wp-pagenavi a.nextpostslink::after {
    inset: 0 25px 0 auto;
}

/* -----------------------------------------------------------
    .pagenavi
----------------------------------------------------------- */
.pagenavi {
    clear: both;
    width: 100%;
    max-width: 1200px;
    margin: 80px 0;
}

.pagenavi ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    /* max-width: 640px; */
}

.pagenavi ul li {
    flex: 1;
    display: block;
    /* width: 33.3%; */
    padding: 0 !important;
    margin-bottom: 0;
}

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

.pagenavi ul li a {
    display: block;
    border: 0;
    color: var(--body-text-color);
    background: var(--white);
    padding: 6px 20px;
    line-height: 1;
    border-radius: 0;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    min-width: 2.1875em;
    box-sizing: border-box;
}

.pagenavi ul li.list a {
    background: transparent;
    width: fit-content;
    margin: 0 auto;
}

.pagenavi ul li.list a i[class^='fa'] {
    margin-right: 1em;
    font-size: 1.4em;
    vertical-align: middle;
}

.pagenavi ul li.list a:hover {
    opacity: 0.7;
}

.pagenavi ul li.next a,
.pagenavi ul li.prev a {
    width: fit-content;
    font-size: 16px;
    font-weight: 400;
    color: var(--white);
    background: var(--main-color01);
    padding-top: 10px;
    padding-bottom: 11px;
}

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

.pagenavi ul li.next a {
    position: relative;
    margin: 0 auto 0 50px;
    padding-left: 25px;
    padding-right: 60px;
    text-align: left;
}

.pagenavi ul li.prev a {
    position: relative;
    margin: 0 50px 0 auto;
    padding-left: 60px;
    padding-right: 25px;
    text-align: right;
}

.pagenavi ul li.next a::before {
    position: absolute;
    inset: 0 15px 0 auto;
    margin: auto 0;
    content: "";
    /* width: 10px;
    height: 16px; */
    width: 17px;
    height: 12px;
    background-color: currentColor;
    --mask: url(./img/svg_arrow10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

.pagenavi ul li.prev a::after {
    position: absolute;
    inset: 0 auto 0 15px;
    margin: auto 0;
    content: "";
    width: 17px;
    height: 12px;
    background-color: currentColor;
    --mask: url(./img/svg_arrow10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
    transform: scaleX(-1);
}

.pagenavi ul li.prev a i {
    margin-right: 1.0rem;
}

.pagenavi ul li.next {
    text-align: right;
}

.pagenavi ul li.next a i {
    margin-left: 1.0rem;
}

.pagenavi ul li.next a:hover,
.pagenavi ul li.prev a:hover {
    opacity: 0.7;
}

.pagenavi ul li.list {
    text-align: center;
}

/* -----------------------------------------------------------
    background
----------------------------------------------------------- */
.bg_pattern01 {
    position: relative;
}

.bg_pattern01::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 600px;
    max-height: 70%;
    background: center top url(img/bg_pattern01.png) repeat-x;
}

.bg_pattern02 {
    background: url(./img/bg_pattern02.png);
    padding: 150px 0 100px;
}

/* .bg_pattern02 {
    --c01: #eee;
    --c02: #f6f6f6;
    --c01: red;
    --img: var(--c01) 0, var(--c01) 2px, transparent 2px, transparent 10px;
    background-image:
        repeating-linear-gradient(0deg, var(--img)),
        repeating-linear-gradient(90deg, var(--img));
    background-color: var(--c02);
} */

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
header {
    position: relative;
    z-index: 101;
}

header .wide_lg {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

header > .wide_lg {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    /* box-sizing: border-box; */
}

@media screen and (max-width : 1280px) {
    header > .wide_lg {
        padding: 0;
    }

    header .btn_ico {
        font-size: 14px;
    }

    header .hdrTel .tel {
        padding: 20px 0 !important;
    }

    header .hdrTel .tel-link {
        font-size: 38px !important;
    }

    header .hdrTel .headerblock {
        font-size: 10px !important;
    }

    header .hdrTel .tel-open {
        font-size: 12px !important;
    }
}

header .wide_lg .boxL {
    display: flex;
    align-items: flex-end;
    height: fit-content;
    margin: auto 0;
    gap: 20px;
}

header a.htxt,
header .htxt a,
header h1.htxt a {
    padding: 5px 0;
    color: var(--black);
    transition: 0.3s ease;
}

header a.htxt:hover,
header .htxt a:hover,
header h1.htxt a:hover {
    color: var(--main-color01);
}

header h1.htxt,
header .htxt h1,
header .htxt a,
header .htxt p {
    font-size: 14px;
    display: block;
    font-weight: 500;
    line-height: 1;
}

@media screen and (max-width : 1499px) {
    header .wide_lg .boxL {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

header .htxt p strong {
    font-weight: 500;
}

header .hdrLogo {
    display: inline-block;
    max-width: 357px;
}

header .hdrLogo img {
    width: 100%;
    height: auto;
}

header .boxR {
    /* text-align: right; */
    padding: 0 0 0 10px;
    box-sizing: border-box;
}

header .hdrTelContact {
    display: flex;
    align-items: center;
}

header .hdrTelContact a {
    transition: 0.3s ease;
}

header .hdrTelContact a:hover {
    opacity: 0.7;
}

header .hdrTelContact > * {
    /* padding: 20px; */
    color: var(--white);
    line-height: 1;
}

header .hdrTel {
    display: flex;
    align-items: center;
}

header .hdrTel .tel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    color: var(--black);
    justify-content: center;
    /* align-items: center; */
    padding: 20px;
}

@media screen and (max-width : 1440px) {
    header .hdrTel .tel {
        flex-direction: column;
        gap: 5px;
    }
}

header .hdrTel .tel i[class*="fa-"] {
    font-size: 27px;
    margin-right: 0.25em;
}

header .hdrTel .tel-link {
    display: flex;
    align-items: center;
    font-size: 42px;
    font-weight: 700;
    color: var(--main-color01);
    letter-spacing: -0.02em;
    padding-right: 20px;
    margin-bottom: 5px;
    white-space: nowrap;
}

header .hdrTel .tel-link img {
    vertical-align: text-bottom;
    margin-right: 0.5rem;
}

.headerblock {
    display: none;
}
header .hdrTel .headerblock {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    background: var(--main-color01);
    border-radius: 20px;
    padding: 10px 15px 7px;
    margin-left: 10px;
}

header .hdrTel .headerblock span {
    color: #fef12f;
}

header .hdrTel .tel-open {
    font-size: 16px;
    font-weight: 500;
}

header .hdrTel .tel-open .cut {
    display: none;
}

header .hdrTelContact .btn_ico.ico_file01 {
    margin-right: 0;
}

#hdrNv {
    width: 100%;
    background: var(--main-color01);
}

#hdrNv .wide_lg {
    display: block;
    padding: 20px 0;
}

header nav #gNav {
    /* position: relative; */
    display: flex;
    font-size: 14px;
    padding: 0 1px;
    gap: 0;
    justify-content: center;
    align-items: center;
}

header nav #gNav * {
    line-height: 1.0;
}

header nav #gNav > li {
    display: block;
    text-align: center;
    position: relative;
    /* position: relative; */
    /* flex: 1; */
    /* width: 100%; */
}

header nav #gNav > li::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 40px;
    top: 0;
    right: 0;
    background: #003055;
    box-shadow: 1px 0px 0px 0px #0084e9;
}

header nav #gNav > li:last-child::after {
    content: none;
}

header nav #gNav > li:first-of-type {
    flex-shrink: 0;
}

header nav #gNav > li:first-of-type > a:hover {
    background: none !important;
}

header nav #gNav > li:last-of-type {
    border-right: 0;
}

header nav #gNav > li > a {
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 0 15px;
    margin: 0 30px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    width: fit-content;
    min-height: 40px;
    box-sizing: border-box;
    position: relative;
    transition: 0.3s ease;
    white-space: nowrap;
}

header nav #gNav > li > a:hover,
header nav #gNav > li.js-dropmenu.open > a {
    opacity: 1;
}

header nav #gNav > li > a::before {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--white);
    transform: scale(0, 1);
    transform-origin: center top;
    transition: 0.3s ease;
}

header nav #gNav > li > a:hover::before { 
    transform: scale(1, 1); 
}

header nav #gNav > li.gNav_product > a::after, 
header nav #gNav > li.gNav_corporate > a::after {
    content: "";
    display: block;
    background: url(./img/img_gnav_arrow.png) no-repeat right center;
    width: 12px;
    height: 9px;
    margin-left: 10px;
}

/* #product .gNav_product > a::before,
#works .gNav_works > a::before,
#voice .gNav_voice > a::before,
#blog .gNav_blog > a::before,
#corporate .gNav_corporate > a::before,
#staff .gNav_staff > a::before {
    position: absolute;
    bottom: 0;
    display: block;
    content: "";
    width: 100%;
    height: 5px;
    background: var(--sub-color01);
} */

@media screen and (max-width : 1300px) {
    /* header nav #gNav li a {
        font-size: 13px;
    } */
}

.dropmenu {
    width: 280px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #222;
    background: var(--white);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
}

#gNav .js-dropmenu.open .dropmenu {
    opacity: 1;
    pointer-events: auto;
}

.dropmenu h2 {
    font-size: 20px;
    font-weight: 500;
    max-width: 300px;
    margin: 10px auto 0px;
    text-align: center;
}

.dropmenu h2 a {
    padding: 40px 0;
    display: block;
}

.dropmenu h2 a::after {
    position: absolute;
    inset: 5px 15px 0 auto;
    margin: auto 0;
    content: "";
    width: 17px;
    height: 13px;
    transition: 0.3s ease;
    background-color: currentColor;
    --mask: url(./img/svg_arrow01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

.dropmenu h2 a::before {
    position: absolute;
    inset: 5px 8px 0 auto;
    margin: auto 0;
    content: "";
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.23);
}

.dropmenu h2 a:hover {
    background: transparent !important;
}

.dropmenu a {
    color: var(--white);
    position: relative;
    transition: 0.3s ease;
}

.dropmenu a:hover {
    background-color: var(--sub-color01) !important;
    color: var(--white) !important;
    opacity: 1 !important;
}

.dropmenu > ul {
    opacity: 1 !important;
}

header nav #gNav > li ul {
    pointer-events: none;
    z-index: 100;
    box-sizing: border-box;
    text-align: left;
}

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

header nav #gNav > li .dropmenu .inner > ul > li > a {
    background: var(--white);
    color: #222;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 0 20px 27px;
}

header nav #gNav > li .dropmenu .inner > ul > li li a {
    font-size: 14px;
    font-weight: 500;
    padding: 11px 50px 14px 20px;
    background: rgba(255, 255, 255, 0);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}



header nav #gNav > li ul li {
    display: block;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

header nav #gNav > li ul li a {
    display: block;
    font-weight: 700;
    padding: 10px;
}

header nav #gNav > li ul li a:hover {
    opacity: 0.7;
    transition: 0.6s;
}


/* -----------------------------------------------------------
    cornerName
----------------------------------------------------------- */
#cornerName {
    position: relative;
    background: var(--sub-color01);
    text-align: center;
    z-index: 1;
    overflow: hidden;
}

#cornerName > .wide_lg {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    padding: 0 60px;
    z-index: 2;
    height: 120px;
    box-sizing: border-box;
}

#cornerName .title {
    font-size: 36px;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    letter-spacing: 2px;
}

#cornerName .title .sub {
    display: inline-block;
    margin-left: 1em;
    padding-left: 1em;
    position: relative;
}

span.sub::before {
    content: "";
    display: block;
    height: 0.75em;
    width: 1px;
    background: #000;
    position: absolute;
    inset:0.1em auto 0 0;
    margin: auto 0;
}

#cornerName p {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
}

/*----- .breadcrumb -----*/
.breadcrumb.wide_lg {
    max-width: 100%;
    background: #eee;
}

.breadcrumbList {
    width: fit-content;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 400;
    color: var(--body-text-color);
    /* padding: 5px 20px;
    background: var(--white); */
    padding: 30px 40px;
    line-height: 1.5;
}

.breadcrumbList a {
    color: #0060b0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.breadcrumbList > span > a,
.breadcrumbList > span > span {
    padding: 5px;
    /* display: inline-block; */
    display: inline;
}


/* -----------------------------------------------------------
    main
----------------------------------------------------------- */
/*----- .topMainv -----*/
.topMainv {
    /* background: var(--main-color02); */
}

.topMainv .stage .slick-slide {
    margin: 0 10px 60px;
}

.topMainv .stage.slick-slider {
    width: 100%;
    overflow: hidden;
}

.topMainv .stage .slick-arrow {
    inset: 0;
    margin: auto;
    width: 50px;
    height: 50px;
}

.topMainv .stage .slick-prev {
    left: -60px;
}

.topMainv .stage .slick-next {
    right: -60px;
}

.topMainv .stage .slick-prev::before,
.topMainv .stage .slick-next::before {
    content: "";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(./img/arrow_circle01.png) no-repeat center;
    transform: translateY(-50%);
}

.topMainv .stage .slick-prev::before {
    transform: translateY(-50%) scaleX(-1);
}

.topMainv .stage.slick-dotted.slick-slider {
    margin-bottom: 0;
    padding-bottom: 30px;
}

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

.slick-slide {
    opacity: .5;
    -webkit-transition: .5s;
    transition: .5s;
}

.slick-current {
    opacity: 1;
}

.topMainv .stage button {
    position: absolute;
    z-index: 100;
}

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

.topMainv .stage .slick-prev {
    transform: translateX(-585px);
    left: 0;
}

.topMainv .stage .slick-next {
    transform: translateX(585px);
    right: 0;
}

/* 
.slick-dots {
    position: absolute;
    bottom: -50px;
    padding: 0;
    width: 100%;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    padding: 0;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

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

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

@media screen and (max-width : 1280px) {

    /* .topMainv .stage.slick-slider,
    .worksList ul,
    .voiceList ul {
        width: auto !important;
    }

    .slick-slider:not(.stage) {
        margin: 0 100px;
    } */

    /* #product #main .slick-slider {
        margin: 0;
    } */
}

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

.slick-slider .slick-dots li button::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #b3b3b3;
    content: '' !important;
    text-align: center;
    font-size: 6px;
    line-height: 20px;
    opacity: 1 !important;
}

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

/*----- メインカラム -----*/
#contents {
    margin: 0 auto 0;
    overflow: hidden;
}


/*----- .showroomContent -----*/
.showroomContent {
    background: var(--sub-color02);
}

.showroomContent .header {
    background: url(./img/bg_showroom01.png) no-repeat center top;
    background-size: cover;
    padding: 80px 0 382px;
    position: relative;
}

.showroomContent .header::after {
    content: "";
    background: url(./img/bg_showroom02.png) no-repeat center;
    background-size: cover;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 458px;
}

.showroomContent .tl_popup01 span {
    line-height: 1.5;
}

.showroomContent .tl_popup01 strong {
    font-size: 94px;
    color: var(--white);
    text-shadow: rgb(255, 30, 0) 12px 0px 0px, rgb(255, 30, 0) 11.9584px 0.998843px 0px, rgb(255, 30, 0) 11.8337px 1.99075px 0px, rgb(255, 30, 0) 11.6269px 2.96885px 0px, rgb(255, 30, 0) 11.3395px 3.92634px 0px, rgb(255, 30, 0) 10.9733px 4.85657px 0px, rgb(255, 30, 0) 10.531px 5.75311px 0px, rgb(255, 30, 0) 10.0156px 6.60971px 0px, rgb(255, 30, 0) 9.43065px 7.42044px 0px, rgb(255, 30, 0) 8.78027px 8.17967px 0px, rgb(255, 30, 0) 8.06895px 8.88212px 0px, rgb(255, 30, 0) 7.30163px 9.52293px 0px, rgb(255, 30, 0) 6.48363px 10.0977px 0px, rgb(255, 30, 0) 5.62063px 10.6023px 0px, rgb(255, 30, 0) 4.71862px 11.0333px 0px, rgb(255, 30, 0) 3.78387px 11.3878px 0px, rgb(255, 30, 0) 2.82285px 11.6633px 0px, rgb(255, 30, 0) 1.84224px 11.8577px 0px, rgb(255, 30, 0) 0.848846px 11.9699px 0px, rgb(255, 30, 0) -0.15044px 11.9991px 0px, rgb(255, 30, 0) -1.14868px 11.9449px 0px, rgb(255, 30, 0) -2.13895px 11.8078px 0px, rgb(255, 30, 0) -3.11438px 11.5888px 0px, rgb(255, 30, 0) -4.06819px 11.2894px 0px, rgb(255, 30, 0) -4.99376px 10.9116px 0px, rgb(255, 30, 0) -5.88468px 10.458px 0px, rgb(255, 30, 0) -6.73475px 9.93192px 0px, rgb(255, 30, 0) -7.53808px 9.33688px 0px, rgb(255, 30, 0) -8.2891px 8.67703px 0px, rgb(255, 30, 0) -8.98258px 7.95696px 0px, rgb(255, 30, 0) -9.61372px 7.18167px 0px, rgb(255, 30, 0) -10.1781px 6.35653px 0px, rgb(255, 30, 0) -10.6719px 5.48727px 0px, rgb(255, 30, 0) -11.0916px 4.57993px 0px, rgb(255, 30, 0) -11.4344px 3.64081px 0px, rgb(255, 30, 0) -11.6977px 2.67641px 0px, rgb(255, 30, 0) -11.8799px 1.69344px 0px, rgb(255, 30, 0) -11.9796px 0.698716px 0px, rgb(255, 30, 0) -11.9962px -0.300857px 0px, rgb(255, 30, 0) -11.9296px -1.29834px 0px, rgb(255, 30, 0) -11.7801px -2.28682px 0px, rgb(255, 30, 0) -11.5489px -3.25942px 0px, rgb(255, 30, 0) -11.2375px -4.2094px 0px, rgb(255, 30, 0) -10.8481px -5.13016px 0px, rgb(255, 30, 0) -10.3834px -6.01532px 0px, rgb(255, 30, 0) -9.84671px -6.85874px 0px, rgb(255, 30, 0) -9.24164px -7.65454px 0px, rgb(255, 30, 0) -8.57243px -8.39723px 0px, rgb(255, 30, 0) -7.84372px -9.08163px 0px, rgb(255, 30, 0) -7.06058px -9.703px 0px, rgb(255, 30, 0) -6.22843px -10.257px 0px, rgb(255, 30, 0) -5.35305px -10.7399px 0px, rgb(255, 30, 0) -4.44052px -11.1482px 0px, rgb(255, 30, 0) -3.49717px -11.4791px 0px, rgb(255, 30, 0) -2.52955px -11.7304px 0px, rgb(255, 30, 0) -1.54437px -11.9002px 0px, rgb(255, 30, 0) -0.548477px -11.9875px 0px, rgb(255, 30, 0) 0.451226px -11.9915px 0px, rgb(255, 30, 0) 1.4478px -11.9123px 0px, rgb(255, 30, 0) 2.43432px -11.7505px 0px, rgb(255, 30, 0) 3.40395px -11.5071px 0px, rgb(255, 30, 0) 4.34995px -11.1838px 0px, rgb(255, 30, 0) 5.26576px -10.7829px 0px, rgb(255, 30, 0) 6.14503px -10.3072px 0px, rgb(255, 30, 0) 6.98164px -9.75995px 0px, rgb(255, 30, 0) 7.7698px -9.14495px 0px, rgb(255, 30, 0) 8.50404px -8.46648px 0px, rgb(255, 30, 0) 9.17925px -7.72925px 0px, rgb(255, 30, 0) 9.79076px -6.93838px 0px, rgb(255, 30, 0) 10.3343px -6.09935px 0px, rgb(255, 30, 0) 10.8061px -5.21799px 0px, rgb(255, 30, 0) 11.203px -4.30041px 0px, rgb(255, 30, 0) 11.522px -3.35299px 0px, rgb(255, 30, 0) 11.7612px -2.38229px 0px, rgb(255, 30, 0) 11.9186px -1.39506px 0px, rgb(255, 30, 0) 11.9934px -0.398151px 0px;
    display: block;
}

.showroomContent .tl_popup01 .name {
    font-size: 84px;
    color: var(--sub-color01);
    text-shadow: rgb(255, 255, 255) 8px 0px 0px, rgb(255, 255, 255) 7.93758px 0.997398px 0px, rgb(255, 255, 255) 7.7513px 1.97923px 0px, rgb(255, 255, 255) 7.44406px 2.93018px 0px, rgb(255, 255, 255) 7.02066px 3.8354px 0px, rgb(255, 255, 255) 6.4877px 4.68078px 0px, rgb(255, 255, 255) 5.85351px 5.45311px 0px, rgb(255, 255, 255) 5.12797px 6.14035px 0px, rgb(255, 255, 255) 4.32242px 6.73177px 0px, rgb(255, 255, 255) 3.44941px 7.21814px 0px, rgb(255, 255, 255) 2.52258px 7.59188px 0px, rgb(255, 255, 255) 1.55638px 7.84714px 0px, rgb(255, 255, 255) 0.565898px 7.97996px 0px, rgb(255, 255, 255) -0.433417px 7.98825px 0px, rgb(255, 255, 255) -1.42597px 7.87189px 0px, rgb(255, 255, 255) -2.39627px 7.63269px 0px, rgb(255, 255, 255) -3.32917px 7.27438px 0px, rgb(255, 255, 255) -4.21013px 6.80256px 0px, rgb(255, 255, 255) -5.02539px 6.22459px 0px, rgb(255, 255, 255) -5.76223px 5.54948px 0px, rgb(255, 255, 255) -6.40915px 4.78778px 0px, rgb(255, 255, 255) -6.95606px 3.95136px 0px, rgb(255, 255, 255) -7.39442px 3.05329px 0px, rgb(255, 255, 255) -7.71739px 2.10757px 0px, rgb(255, 255, 255) -7.91994px 1.12896px 0px, rgb(255, 255, 255) -7.9989px 0.132735px 0px, rgb(255, 255, 255) -7.95304px -0.865561px 0px, rgb(255, 255, 255) -7.78307px -1.85035px 0px, rgb(255, 255, 255) -7.49165px -2.80627px 0px, rgb(255, 255, 255) -7.08333px -3.71839px 0px, rgb(255, 255, 255) -6.56448px -4.57249px 0px, rgb(255, 255, 255) -5.94318px -5.35524px 0px, rgb(255, 255, 255) -5.22915px -6.05442px 0px, rgb(255, 255, 255) -4.43352px -6.65912px 0px, rgb(255, 255, 255) -3.5687px -7.15991px 0px, rgb(255, 255, 255) -2.6482px -7.54898px 0px, rgb(255, 255, 255) -1.68637px -7.82024px 0px, rgb(255, 255, 255) -0.698222px -7.96947px 0px, rgb(255, 255, 255) 0.300817px -7.99434px 0px, rgb(255, 255, 255) 1.29516px -7.89446px 0px, rgb(255, 255, 255) 2.2693px -7.67139px 0px, rgb(255, 255, 255) 3.20802px -7.32862px 0px, rgb(255, 255, 255) 4.09668px -6.87148px 0px, rgb(255, 255, 255) 4.92142px -6.30711px 0px, rgb(255, 255, 255) 5.66936px -5.64432px 0px, rgb(255, 255, 255) 6.32883px -4.89346px 0px, rgb(255, 255, 255) 6.88954px -4.06623px 0px, rgb(255, 255, 255) 7.34274px -3.17555px 0px, rgb(255, 255, 255) 7.68136px -2.23532px 0px, rgb(255, 255, 255) 7.90012px -1.26021px 0px, rgb(255, 255, 255) 7.9956px -0.265434px 0px;
}

.showroomContent .tl_popup01 .name span {
    color: var(--main-color01);
}

.showroomContent .bg_showroom02 {
    width: 100%;
    transform: translateY(-21%);
}
.showroomContent .bg_showroom02 img {
    width: 100%;
}

.showroomContent .content {
    padding: 60px 0 100px;
}

.showroomContent .showroomAdd {
    background: var(--white);
    padding: 40px;
}

.showroomContent .showroomAdd .add {
    display: flex;
    gap: 50px;
    justify-content: center;
    margin-bottom: 20px;
}

.showroomContent .showroomAdd .add a {
    text-decoration: underline;
    text-underline-offset: 5px;
    position: relative;
    padding-left: 40px;
}

.showroomContent .showroomAdd .add a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 29px;
    height: 42px;
    background: url(./img/icon_map.png) no-repeat center;
}

.showroomContent .tel {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.showroomContent .tel .tel-link {
    font-size: 50px;
    font-weight: 800;
    color: var(--main-color01);
    letter-spacing: -0.02em;
}

.showroomContent .tel .tel-link img {
    width: 44px;
}

.showroomContent .tel .tel-open {
    font-size: 16px;
}

.showroomContent .tel .tel-open .cut {
    display: none;
}

.showroomContent .showroomBtn {
    display: flex;
    gap: 40px;
}

.showroomContent .showroomBtn .btn_ico {
    width: 100%;
    margin: 40px 0 20px;
    padding: 0 0 0 70px;
}

.btn_showroom::before {
    content: "";
    position: absolute;
    left: 40px;
    background: url(./img/img_btn_showroom.png) no-repeat center;
    width: 107px;
    height: 77px;
}

.btn_reservation::before {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 40px;
    background: url(./img/img_btn_reservation.png) no-repeat center;
    width: 125px;
    height: 119px;
}


/*----- .satisfactionContent -----*/
.prContent {
    position: relative;
    background: url(./img/bg_pr.jpg) no-repeat center;
    background-size: cover;
    padding: 60px 0 25px;
    border-bottom: 3px solid var(--main-color01);
    margin-bottom: 1px;
}

.prContent .inner {
    overflow: visible;
}

.prContent .staff {
    position: absolute;
    right: 0;
    bottom: -25px;
}

.prContent .prList {
    display: flex;
    gap: 25px;
}

.prContent p {
    font-size: 14px;
    margin-top: 10px;
}

.satisfactionContent {
    position: relative;
}

.satisfactionContent .inner {
    overflow: visible;
}

.satisfactionContent .header {
    background: url(./img/bg_satisfaction01.png) no-repeat center top;
    background-color: #4ea3fa;
    background-size: cover;
    padding: 100px 0 200px;
    position: relative;
}

.satisfactionContent .header .staff01 {
    position: absolute;
    right: -50px;
    bottom: -100px;
    z-index: 2;
}

.satisfactionContent .header .staff02 {
    position: absolute;
    left: -80px;
    bottom: -140px;
    z-index: 2;
}

.satisfactionContent .header h1 {
    font-size: 46px;
    font-weight: 900;
    color: var(--sub-color01);
    text-shadow: rgb(255, 255, 255) 8px 0px 0px, rgb(255, 255, 255) 7.93758px 0.997398px 0px, rgb(255, 255, 255) 7.7513px 1.97923px 0px, rgb(255, 255, 255) 7.44406px 2.93018px 0px, rgb(255, 255, 255) 7.02066px 3.8354px 0px, rgb(255, 255, 255) 6.4877px 4.68078px 0px, rgb(255, 255, 255) 5.85351px 5.45311px 0px, rgb(255, 255, 255) 5.12797px 6.14035px 0px, rgb(255, 255, 255) 4.32242px 6.73177px 0px, rgb(255, 255, 255) 3.44941px 7.21814px 0px, rgb(255, 255, 255) 2.52258px 7.59188px 0px, rgb(255, 255, 255) 1.55638px 7.84714px 0px, rgb(255, 255, 255) 0.565898px 7.97996px 0px, rgb(255, 255, 255) -0.433417px 7.98825px 0px, rgb(255, 255, 255) -1.42597px 7.87189px 0px, rgb(255, 255, 255) -2.39627px 7.63269px 0px, rgb(255, 255, 255) -3.32917px 7.27438px 0px, rgb(255, 255, 255) -4.21013px 6.80256px 0px, rgb(255, 255, 255) -5.02539px 6.22459px 0px, rgb(255, 255, 255) -5.76223px 5.54948px 0px, rgb(255, 255, 255) -6.40915px 4.78778px 0px, rgb(255, 255, 255) -6.95606px 3.95136px 0px, rgb(255, 255, 255) -7.39442px 3.05329px 0px, rgb(255, 255, 255) -7.71739px 2.10757px 0px, rgb(255, 255, 255) -7.91994px 1.12896px 0px, rgb(255, 255, 255) -7.9989px 0.132735px 0px, rgb(255, 255, 255) -7.95304px -0.865561px 0px, rgb(255, 255, 255) -7.78307px -1.85035px 0px, rgb(255, 255, 255) -7.49165px -2.80627px 0px, rgb(255, 255, 255) -7.08333px -3.71839px 0px, rgb(255, 255, 255) -6.56448px -4.57249px 0px, rgb(255, 255, 255) -5.94318px -5.35524px 0px, rgb(255, 255, 255) -5.22915px -6.05442px 0px, rgb(255, 255, 255) -4.43352px -6.65912px 0px, rgb(255, 255, 255) -3.5687px -7.15991px 0px, rgb(255, 255, 255) -2.6482px -7.54898px 0px, rgb(255, 255, 255) -1.68637px -7.82024px 0px, rgb(255, 255, 255) -0.698222px -7.96947px 0px, rgb(255, 255, 255) 0.300817px -7.99434px 0px, rgb(255, 255, 255) 1.29516px -7.89446px 0px, rgb(255, 255, 255) 2.2693px -7.67139px 0px, rgb(255, 255, 255) 3.20802px -7.32862px 0px, rgb(255, 255, 255) 4.09668px -6.87148px 0px, rgb(255, 255, 255) 4.92142px -6.30711px 0px, rgb(255, 255, 255) 5.66936px -5.64432px 0px, rgb(255, 255, 255) 6.32883px -4.89346px 0px, rgb(255, 255, 255) 6.88954px -4.06623px 0px, rgb(255, 255, 255) 7.34274px -3.17555px 0px, rgb(255, 255, 255) 7.68136px -2.23532px 0px, rgb(255, 255, 255) 7.90012px -1.26021px 0px, rgb(255, 255, 255) 7.9956px -0.265434px 0px;
    text-align: center;
    position: relative;
}

.satisfactionContent .header h1::before {
    content: "";
    position: absolute;
    top: -70px;
    right: 0;
    background: url(./img/icon_satisfaction01.png) no-repeat;
    width: 151px;
    height: 151px;
}

.satisfactionContent .header h1::after{
    content: "";
    position: absolute;
    top: -70px;
    left: 0;
    background: url(./img/icon_satisfaction02.png) no-repeat;
    width: 151px;
    height: 151px;
}

.satisfactionContent .header h1 b {
    font-size: 68px;
    font-weight: 900 !important;
    color: var(--main-color02);
    font-weight: 700;
    margin-right: 5px;
}

.satisfactionContent .header h1 .subTtl {
    display: inline-block;
    padding: 15px 100px 20px;
    border-radius: 70px;
    background: var(--sub-color02);
    margin-top: 20px;
}

.satisfactionContent .content {
    position: relative;
    background: url(./img/bg_satisfaction02.jpg) no-repeat center top 70%;
    background-size: cover;
    padding-bottom: 100px;
}

.satisfactionContent .content::before {
    content: "";
    position: absolute;
    top: -125px;
    width: 100%;
    height: 125px;
    background: url(./img/bg_satisfaction03.png) no-repeat center bottom;
    background-size: cover;
    z-index: 3;
}

.satisfactionContent .content p.lead {
    font-size: 20px;
}

.satisfactionContent .satisfactionList {
    display: flex;
    gap: 25px;
    padding: 60px 0 40px;
}

.satisfactionContent .satisfactionList li {
    background: var(--white);
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: 0.3s ease;
}

.satisfactionContent .satisfactionList li div {
    background: var(--main-color02);
}

.satisfactionContent .satisfactionList li div img {
    display: block;
    margin: 0 auto;
    transform: translate(20px, 20px);
}

.satisfactionContent .satisfactionList li h3 {
    font-size: 26px;
    font-weight: 900;
    text-align: center;
    line-height: 1.4;
    margin: 40px -20px 15px;
    padding: 0 30px;
}

.satisfactionContent .satisfactionList li h3 span {
    color: var(--red);
}

.satisfactionContent .satisfactionList li p {
    margin-bottom: 0;
    font-weight: 600;
    padding: 0 30px 40px;
}

.satisfactionContent .satisfactionList li p b {
    color: var(--red);
    font-weight: 600;
}

.satisfactionContent .content a img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}


/*----- .infoList -----*/
.infoList {
    background: var(--white);
}

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

/* .infoList > .flex > .leftBox {
    width: calc(50% - 7.8vw);
    min-height: 528px;
} */

.infoList > .flex > .rightBox {
    background: var(--white);
    width: 65%;
}

.infoList > .flex > .leftBox .inBox {
    margin-left: auto;
    position: relative;
    height: 100%;
}

.infoList > .flex > .leftBox .tl_popup01 {
    padding-top: 50px;
    margin-bottom: 50px;
}

.infoList > .flex > .leftBox .tl_popup01::before {
    content: "";
    position: absolute;
    top: 0;
    background: url(./img/icon_infoList_ttl.png) no-repeat center;
    width: 38px;
    height: 45px;
}

.infoList > .flex > .leftBox h2 small {
    color: currentColor;
}

.infoList > .flex > .leftBox .btn a {
    font-size: 18px;
    line-height: 60px;
    min-width: 0;
    width: fit-content;
    height: 60px;
    padding: 0 70px 0 30px;
}

.infoList > .flex > .leftBox .btn a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background: url(./img/img_arrow.png) no-repeat center left 50%;
    background-size: 7px;
    background-color: var(--main-color02);
    border-radius: 50%;
}

.infoList > .flex .rightBox > ul {
    display: block;
    margin-right: auto;
    /* max-width: 770px; */
    padding: 70px 0;
    box-sizing: border-box;
}

.infoList ul {
    display: block;
}

.infoList li {
    display: block;
    margin: 0 0 20px;
    padding: 0 40px 20px 0;
    position: relative;
    /*    margin-bottom: 30px;
    padding-bottom: 30px; */
    border-bottom: 2px solid var(--sub-color01);
}

.infoList li .inBox {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 30px;
}

.infoList li .flex {
    gap: 25px;
    /* position: relative; */
    transition: 0.3s ease;
}

.infoList li time {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #999;
}

.infoList li .cats {
    margin: 5px 0;
}

.infoList li a:not(.cat) {
    color: var(--body-text-color);
}

.infoList .rightBox {
    position: relative;
}

.infoList li::after {
    position: absolute;
    inset: 0 15px 0 auto;
    margin: auto 0;
    content: "";
    width: 7px;
    height: 13px;
    background-color: var(--main-color01);
    --mask: url(./img/svg_arrow10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
    transition: 0.3s ease;
    transform: translate(0, 0);
}

.infoList li:hover::after {
    transform: translate(50%, 0);
}


.infoList h3 {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.625;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infoList li .mainThumb {
    width: 220px;
    height: auto;
    aspect-ratio: 11 / 8;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.0), 0 5px 2px rgba(0, 0, 0, 0.0);
    transition: 0.3s ease;
}

.infoList li:hover .mainThumb {
    opacity: 1;
    transform: scale(1.05) rotate(-5deg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 2px rgba(0, 0, 0, 0.1);
}

/*----- .productContent -----*/
.productContent {
	padding: 300px 0 50px;
    background: var(--sub-color04);
    position: relative;
}

#product .productContent {
    padding-bottom: 100px;
}

#product.single .productContent {
    background: var(--white);
    padding-bottom: 0;
}

.productContent::before {
    content: "";
    background: url(./img/bg_productContent01.jpg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    width: 100%;
    height: 500px;
}

.productContent::after {
    content: "";
    background: var(--sub-color04);
    width: 1400px;
    height: 200px;
    position: absolute;
    top: 300px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#product.single .productContent::after {
    background: var(--white);
}

.productContent .tl_popup01 {
    padding-top: 100px;
    z-index: 10;
}

#product.single .productContent > .tl_popup01 {
    font-size: 78px;
    font-weight: 900;
    color: var(--main-color02);
    line-height: 1;
    gap: 30px;
}

#product.single .productContent .ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 110px;
    background: var(--main-color01);
    border-radius: 50%;
}

.productContent .productContentL .tl_popup01 {
    margin-bottom: 60px;
}

.productContent .inner {
    overflow: visible;
}

.productContent .btn_ico {
    padding-left: 20px;
}

.btn_warranty::before {
    content: "";
    position: absolute;
    top: -50px;
    left: -20px;
    background: url(./img/img_btn_warranty.png) no-repeat center;
    width: 117px;
    height: 94px;
}

/*----- .productCatListL -----*/
.productContent ul.productCatList,
.productContent ul.productCatList:has(>.productCatListL) {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 80px;
    margin: 150px 0 80px;
}

#product.single .productContent ul.productCatList {
    margin: 30px 0 0;
}

.productContent ul.productCatList::before {
    content: "";
    position: absolute;
    top: -210px;
    right: 0;
    background: url(./img/img_productContent_staff01.png) no-repeat center;
    width: 205px;
    height: 332px;
    z-index: 1;
}

.productContent ul.productCatList::after {
    content: "";
    position: absolute;
    top: -220px;
    left: 0;
    background: url(./img/img_productContent_staff02.png) no-repeat center;
    width: 190px;
    height: 302px;
    z-index: 1;
}

.productContent ul.productCatList .productCatListL .flex {
    color: var(--body-text-color);
}

.productContent ul.productCatList .productCatListL {
    display: block;
    border: 8px solid var(--sub-color01);
    background: var(--white);
    box-sizing: border-box;
    padding: 60px;
    outline: 0px solid #fff;
    position: relative;
    transition: 0.3s ease;
    z-index: 2;
}

.productContent ul.productCatList .productCatListL .flex {
    flex-direction: column;
}

.productContent ul.productCatList .productCatListL h2 {
    color: var(--white);
    background: var(--sub-color01);
    border-radius: 6px;
    font-size: 22px;
    font-weight: 700;
    width: 440px;
    max-width: 100%;
    position: absolute;
    inset: 0 0 auto;
    margin: 0 auto;
    padding: 15px 80px;
    box-sizing: border-box;
    transform: translateY(-50%);
    text-align: center;
    transition: 0.3s ease;
}

.productContent ul.productCatList .productCatListL a:hover h2 {
    background: var(--main-color01);
    opacity: 1;
}

.productContent ul.productCatList .productCatListL h2 .ico {
    max-width: 48px;
    max-height: 39px;
    object-fit: contain;
    position: absolute;
    inset: 0 auto 0 50px;
    margin: auto 0;
    transform: translateX(-50%);
}

.productContent ul.productCatList .productCatListL a:hover h2 .ico {
    opacity: 1 !important;
}

.productContent ul.productCatList .productCatListL h3 {
    font-size: 18px;
    font-weight: 700;
    padding: 20px 0;
    margin: 0 0 20px;
    line-height: 1.25;
    border-bottom: 1px solid var(--sub-color02);
}

.productContent ul.productCatList .productCatListL .flex > figure {
    display: flex;
    justify-content: center;
}

.productContent ul.productCatList .productCatListL .flex > figure figure {
    margin: 0 20px 20px;
    border: 1px solid var(--sub-color02);
    max-width: 380px;
}

.productContent ul.productCatList .productCatListL figure img {
    width: 100%;
    height: auto;
    display: block;
}

.productContent ul.productCatList .productCatListL p {
    line-height: 1.625;
}

.productCatListL .inBox {
    margin-bottom: 50px;
}

.productCatListL .inBox b {
    color: var(--red);
}

.btn_mail::before {
    background: url(./img/img_btn_mail.png) no-repeat center;
    width: 110px;
    height: 91px;
    top: -70px;
    left: -30px;
}

.productCatListL_free01 {
    width: fit-content;
    margin: 50px auto 0;
}

/*----- .productContentL -----*/
.productContentL {
    background: var(--sub-color03);
    margin: 0 calc(50% - 50vw);
	width: 100vw;
    padding-bottom: 100px;
}

/*----- .productCatListS -----*/
.productContent ul.productCatList:has(>.productCatListS) {
    gap: 90px;
}

.productContent ul.productCatList .productCatListS {
    display: block;
    border: 8px solid var(--sub-color01);
    background: var(--white);
    box-sizing: border-box;
    transition: 0.3s ease;
    position: relative;
    z-index: 10;
}

.productContent ul.productCatList .productCatListS a.flex {
    color: var(--body-text-color);
    justify-content: space-between;
}

.productContent ul.productCatList .productCatListS a:hover {
    opacity: 1;
}

.productContent ul.productCatList .productCatListS a:hover .inBox, 
.productContent ul.productCatList .productCatListS a:hover figure {
    opacity: 0.7;
}

.productContent ul.productCatList .productCatListS figure {
    width: 440px;
    flex-shrink: 0;
    transition: 0.3s;
}

.productContent ul.productCatList .productCatListS figure img {
    width: 100%;
    height: auto;
    display: block;
}

.productContent ul.productCatList .productCatListS .inBox {
    padding: 100px 30px 0;
    transition: 0.3s;
}

.productContent ul.productCatList .productCatListS h3 {
    font-size: 50px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    position: absolute;
    top: -54px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--main-color01);
    width: 660px;
    height: 100px;
    padding-left: 50px;
    box-sizing: border-box;
    z-index: 10;
}


.productContent ul.productCatList .productCatListS h3 .ico {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background: var(--white);
    border-radius: 50%;
}

.productContent ul.productCatList .productCatListS p {
    line-height: 1.625;
}

.productCatTab {
    display: flex;
    gap: 0 1px;
    position: relative;
    z-index: 2;
}

.productCatTab li {
    display: block;
    flex: 1;
}

.productCatTab li a {
    --background: #aa0e00;
    display: block;
    padding: 16px;
    border-radius: 6px 6px 0 0;
    color: var(--white);
    /* background: var(--main-color01); */
    background: var(--background);
    text-align: center;
    margin-top: 10px;
    position: relative;
    transition: 0.3s ease;
}

.productCatTab li a::after {
    display: block;
    position: absolute;
    inset: auto 0 0;
    margin: 0 auto;
    content: "";
    width: 16px;
    height: 8px;
    background: transparent;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translateY(100%);
}

.productCatTab li a:hover::after,
.productCatTab li a.active::after {
    background: var(--background);
}

.productCatTab li a.active,
.productCatTab li a:hover {
    --background: var(--main-color01);
    padding-top: 23px;
    margin-top: 0;
    padding-bottom: 19px;
}

.productCatTabContent {
    display: block;
    position: relative;
    z-index: 1;
}

.productCatTabContent > div > a,
.productCatTabContent > div > a * {
    width: fit-content;
    margin: 0 auto;
}

.productCatTabContent > *.active {
    position: relative;
    z-index: 2;
    opacity: 1;
    pointer-events: all;
}

.productCatTabContent > * {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
}

.productCatTabContent ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin: 0 0 80px;
}

.productCatTabContent ul li {
    background: var(--white);
    border: 6px solid var(--main-color01);
    box-sizing: border-box;
}

.productContent ul.productCatList .productCatListS {
    display: block;
    background: var(--white);
    /* border: 2px solid var(--main-color01);
    border-radius: 6px;
    box-sizing: border-box;
    padding: 28px; */
}

.productCatTabContent li a {
    color: var(--body-text-color);
    display: block;
    transition: 0.3s ease;
    padding: 40px;
}

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

.productCatTabContent figure {
    width: 100%;
    border: 2px solid #ccc;
    aspect-ratio: 47 / 26;
    transition: 0.3s ease;
    box-sizing: border-box;
}

.productCatTabContent figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* object-fit: cover; */
}

.productCatTabContent figure img.blank {
    object-fit: cover;
}

.productCatTabContent table,
.productCatTabContent tbody,
.productCatTabContent th,
.productCatTabContent td {
    display: block;
}

.productCatTabContent tr {
    display: flex;
    justify-content: space-between;
}

.productCatTabContent table {
    border-top: 0;
    border-bottom: 0;
    margin-bottom: 40px;
}

.productCatTabContent table tr th,
.productCatTabContent table tr td {
    border-top: 0;
    border-bottom: 2px solid #ccc;
}

.productCatTabContent table tr th {
    width: 20%;
    background: none;
    font-weight: 500;
}

.productCatTabContent table tr td {
    width: 80%;
}

.productCatTabContent table tr:first-of-type td {
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    box-sizing: border-box;
}

.product-marker img {
    display: block;
    max-height: 42px;
    width: auto;
}

.productCatTabContent table tr:first-of-type th {
    display: none;
}

/*----- product_detail -----*/
.productSingle {
    padding-top: 70px;
}

#product .headerContent .teslaHeader {
    margin-top: 85px;
    background: center top url(img/bg_tesla_header.jpg) no-repeat;
    /* padding: 420px 0 0; */
    /* margin-bottom: 80px; */
    /* overflow: hidden; */
    position: relative;
    /* background-attachment: fixed; */
    overflow: hidden;
}

#product .teslaHeader .full {
    color: var(--white);
    background: rgba(0, 0, 0, 0.7);
    padding: 30px;
}

#product .teslaHeader .full h1 {
    margin-bottom: 0;
    text-align: center;
}

#product .teslaHeader p {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.25;
}

#product .teslaHeader p strong {
    display: block;
    font-size: 18px;
    font-weight: 500;
    text-indent: 0.4em;
    letter-spacing: 0.4em;
    margin: 30px 0 20px;
    padding: 6px 10px 7px;
    background: #444;
    line-height: 1.25;
    text-align: center;
}

#product .teslaHeader > .inner {
    margin-top: 500px;
    /* padding-bottom: 40px; */
    color: var(--white);
    position: relative;
    z-index: 2;
    overflow: visible;
    display: flex;
    gap: 30px;
}

#product .teslaHeader > .inner::before {
    position: absolute;
    inset: 0 -100% auto;
    margin: 0 auto;
    content: "";
    display: block;
    width: 200vw;
    height: 100%;
    z-index: -1;
    background: var(--sub-color01);
}

#product .teslaHeader > .inner .logo {
    display: block;
    margin-bottom: -40px;
    background: var(--white);
    transform: translateY(-80px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}

#product .teslaHeader > .inner .logo img {
    display: block;
}

.headerContent_bar {
    /* position: absolute; */
    inset: auto 0 0;
    text-align: center;
    color: var(--white);
    background: var(--main-color01);
    line-height: 1;
    padding: 32px 30px;
}

.headerContent_bar p {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.05em;
}

.headerContent_bar p strong {
    font-size: 1.33em;
    font-weight: 500;
    /* letter-spacing: -0.05em; */
    display: inline-block;
    background: #bc190a;
    padding: 8px 20px 12px;
    margin: 0 15px;
    /* vertical-align: sub; */
}

#product .productSingle .mainContent {
    display: flex;
    gap: 60px;
}

#product #main .productSingle .slider {
    overflow: hidden;
    width: 470px;
    flex-shrink: 0;
}

#product #main .productSingle .slider button {
    z-index: 10;
    width: 30px;
    height: 30px;
}

#product #main .productSingle .slider .slick-prev {
    left: 10px;
}

#product #main .productSingle .slider .slick-next {
    right: 10px;
}

#product #main .productSingle .slider .slick-prev::before,
#product #main .productSingle .slider .slick-next::before,
#product #main .productSingle .slider .slick-prev::after,
#product #main .productSingle .slider .slick-next::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: none;
}

#product #main .productSingle .slider .slick-prev::after,
#product #main .productSingle .slider .slick-next::after {
    background: var(--sub-color01);
    --mask: url(./img/svg_arrow_square01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

#product #main .productSingle .slider .slick-prev::after {
    transform: scaleX(-1);
}

#product #main .productSingle .slider .slick-prev::before,
#product #main .productSingle .slider .slick-next::before {
    background: var(--white);
    transform: scale(0.75);
    mask-image: none;
    --mask-image: none;
}

#product #main .productSingle .slider li img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

#product #main .productSingle .slider .slick-list {
    margin: 0;
}

#product #main .productSingle .slider .slick .slick-slide {
    height: auto;
    background: var(--white);
    display: block;
}

#product #main .productSingle .slider .slick .slick-slide .img {
    aspect-ratio: 47 / 34;
    display: flex;
    justify-content: center;
    align-items: center;
}

#product #main .productSingle .slider-nav {
    margin-left: -10px;
    margin-right: -10px;
}

#product #main .productSingle .slider-nav li {
    margin: 20px 10px 1px;
    max-width: 102px;
    height: auto;
    background: var(--white);
    position: relative;
    cursor: pointer;
    opacity: 0.8;
    transition: 0.3s ease;
}

#product #main .productSingle .slider-nav li img {
    border: 1px solid var(--sub-color02);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
}

#product #main .productSingle .slider-nav li.slick-current {
    opacity: 1;
}

#product #main .productSingle .slider-nav li::before {
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid transparent;
    pointer-events: none;
}

#product #main .productSingle .slider-nav li.slick-current::before {
    border: 2px solid var(--sub-color01);
}

#product #main .productSingle .slider-nav .slick-track {
    display: flex;
    justify-content: center;
    transform: none !important;
}

#product .mainContent .inBox:not(.slider) {
    width: 100%;
}

#product .mainContent .inBox table,
#product .mainContent .inBox tbody,
#product .mainContent .inBox th,
.productCatTabContent td {
    display: block;
}

#product .mainContent .inBox table tr {
    display: flex;
    justify-content: space-between;
}

#product .mainContent .inBox table {
    margin-top: 40px;
    border-top: 0;
    border-bottom: 0;
}

#product .mainContent .inBox table tr th,
#product .mainContent .inBox table tr td {
    border-top: 0;
    border-bottom: 2px solid var(--sub-color01);
    width: 100%;
}

#product .mainContent .inBox table tr th {
    width: 20%;
    background: none;
    font-weight: 500;
}

/* #product #main .flex .inBox table tr td {
    width: 80%;
} */


#product .mainContent .inBox table th,
#product .mainContent .inBox table td {
    padding: 34px 20px;
    font-size: 16px;
}

#product .mainContent .inBox table tr:not(.product-model-number) th {
    display: none;
}

#product .mainContent .inBox table tr.product-cat td {
    font-size: 22px;
    font-weight: 700;
    border: 2px solid var(--main-color01);
    text-align: center;
    padding: 14px 20px;
}

#product .mainContent .inBox table tr.product-marker td {
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    height: 115px;
    box-sizing: border-box;
    padding-top: 50px;
}

#product .mainContent .inBox table tr.product-cat .ico {
    display: inline-block;
    /* width: 48px;
    height: 39px; */
    margin-right: 15px;
    width: 37px;
    height: 30px;
}

#product .mainContent .inBox table tr.product-add td {
    padding: 40px 0;
    border: 0;
}

#product .mainContent .inBox table td ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 auto;
}

#product .mainContent .inBox table td li {
    display: block;
    border: 1px solid var(--sub-color01);
    padding: 10px 10px 12px;
    line-height: 1;
    background: var(--white);
    text-align: center;
    font-size: 16px;
}

#product .mainContent .inBox table td li small {
    font-size: 0.75em;
    margin-right: 1em;
    vertical-align: 0.1em;
}

#product .detailContent {
    margin: 60px 0;
}

#product .detailContent dl,
#product .detailContent dt,
#product .detailContent dd {
    display: block;
}

#product .detailContent dl {
    border-top: 1px solid var(--sub-color02);
    border-left: 1px solid var(--sub-color02);
    border-right: 1px solid var(--sub-color02);
}

#product .detailContent dt,
#product .detailContent dd {
    padding: 15px 20px;
    border-bottom: 1px solid var(--sub-color02);
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}

#product .detailContent dt {
    background: #eee;
    text-align: center;
    font-weight: 700;
}

#product .detailContent dd {
    text-align: center;
    background: var(--white);
    padding: 20px 50px;
}

#product .detailContent dd ul {
    margin: 0 auto;
    display: grid;
    /* grid-template-rows: repeat(3,minmax(0, 1fr));
    grid-auto-flow: column; */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* grid-auto-flow: column; */
}

#product .detailContent dd ul li {
    text-align: left;
}

#product .pointContent {
    margin-top: 80px;
}

.inner .pointContent:last-of-type {
    margin-bottom: 0;
}

.pointContent dl > div {
    /* display: grid;
    grid-template-areas:
        "dt figure"
        "dd figure"
        ". figure"; */
    place-items: start;
    /* gap: 0 40px; */
    border: 4px solid #0060b0;
    padding: 55px 40px 40px;
    margin-bottom: 60px;
    position: relative;
}

.pointContent dl > div:first-of-type {
    margin-top: 60px;
}

.pointContent dl > div:last-of-type {
    margin-bottom: 100px;
}

.pointContent dl > div dt {
    grid-area: dt;
}

.pointContent dl > div dd {
    grid-area: dd;
    border: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.pointContent dl > div figure {
    grid-area: figure;
    max-width: 400px;
}

.pointContent dl > div figure img {
    width: 100%;
    height: auto;
    display: block;
}

.pointContent dl dt {
    /* display: flex;
    justify-content: flex-start;
    align-items: start; */
    /* align-items: center; */
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 0.4em;
}

.pointContent dl dd {
    border-bottom: 1px solid var(--sub-color02);
    padding-bottom: 30px;
    margin-bottom: 40px;
}

.pointContent dl dd b,
.pointContent dl dd strong {
    font-weight: 400;
    color: var(--main-color01);
}

.pointContent dl dd em {
    font-weight: 700;
    font-style: normal;
}

.pointContent .number {
    color: var(--main-color01);
    font-family: var(--en-font-family);
    font-size: 18px;
    font-weight: 700;
    border: 2px solid currentColor;
    line-height: 1;
    width: fit-content;
    padding: 6px 20px;
    min-width: 188px;
    box-sizing: border-box;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--sub-color03);
    position: absolute;
    top: -40px;
    left: 40px;
}

.pointContent .number::before,
.pointContent .number::after {
    content: "";
    display: block;
    position: absolute;
    left: 25%;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 15px;
    height: 15px;
    background: var(--white);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    transform: translate(0, 97%);
}

.pointContent .number::before {
    background: var(--main-color01);
    transform: translate(-2px, 99%);
}

.pointContent .number small {
    font-size: 1em;
    margin-top: 0.1em;
}

.pointContent .number b {
    font-size: 56px;
    font-weight: 900;
    margin-left: 0.75rem;
}

#product .specContent .tbl01 th {
    width: 27%;
}

#product .specContent .tbl01 td {
    width: 73%;
}
#product .specContent .tbl01 td p + p{
    margin-top: 1em;
}
#product .introContent {
    text-align: center;
    margin: 80px 0;
}

#product .introContent + .pointContent {
    padding-top: 80px;
}

#product .introContent h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.38;
    margin: 40px 0;
}

#product .introContent h2 b {
    color: var(--main-color01);
    font-weight: 700;
}

#product .introContent b {
    color: var(--main-color01);
    font-weight: 400;
}

#product .notesContent {
    margin-top: 80px;
    font-size: smaller;
}

.productDetailBtn {
    display: flex;
    gap: 40px;
    margin: 100px 0;
}

/* -----------------------------------------------------------
    #voice
----------------------------------------------------------- */
.single .worksPhotosContent + .voiceCstContent {
    margin-top: 60px;
}

.voiceCstContent > h2 {
    padding-top: 0;
    margin-bottom: 10px;
}

.voiceCstContent dt,
.voiceCstContent dd {
    padding: 1.111em 1.111em 1.111em 3.6111em;
}

.voiceCstContent dt {
    font-size: 18px;
    font-weight: 400;
    position: relative;
    border-bottom: 1px solid var(--sub-color02);
}

.voiceCstContent dt::before {
    position: absolute;
    display: block;
    content: "";
    inset: calc(0.5em * 1.8 + 1.111em) auto auto 1.111em;
    margin: 0;
    background: var(--sub-color01);
    width: 1.111em;
    height: 0.2777em;
}

.voiceCstContent dd + dt {
    margin-top: 20px;
}

.voiceCstContent dd {
    padding-bottom: 0;
}

.voiceCstContent figure {
    display: block;
    margin: auto;
    width: fit-content;
}

.voiceCstContent figcaption {
    text-align: center;
    padding: 10px;
}

.voiceCstContent figure img {
    display: block;
    border-radius: 20px;
}




/* -----------------------------------------------------------
    #blog
----------------------------------------------------------- */
/*----- .blogList -----*/
.blogList {
    overflow: hidden;
    position: relative;
    /* margin: 80px 0; */
    padding: 100px 0 80px;
}

#blog .blogList {
    margin-top: 0;
}

#blog .blogList .categories + ul {
    margin-top: 40px;
}

#blog .blogList + .contactContent02 {
    margin-top: -60px;
}

.blogList .inner {
    overflow: visible;
    box-sizing: content-box;
}

.blogList > .header {
    padding: 0 0 60px;
    border-bottom: 1px solid var(--sub-color02);
}

.blogList ul {
    width: 100%;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    margin: 60px 0;
}

.blogList ul .slick-slide {
    opacity: 1;
    height: auto;
}

.blogList li {
    padding: 0 0 100px;
    box-sizing: border-box;
    margin: 0;
    position: relative;
    border: 6px solid #ccc;
    word-break: break-all;
    word-wrap: break-word;
    transition: 0.3s ease;
}

.blogList ul > li {
    width: calc((100% - 50px) / 3);
}

.blogList li a {
    color: var(--body-text-color);
    display: block;
}

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

.blogList li figure {
    margin-bottom: 20px;
    transition: 0.3s ease;
}

.blogList li time {
    color: #999;
    font-weight: 600;
}

.blogList li .cats {
    margin: 10px 30px 0;
}

.blogList li .cats .cat {
    margin-bottom: 20px;
}

.blogList li .mainThumb {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.blogList li a:hover .mainThumb {
    opacity: 1 !important;
}

#blog .blogList li .cats {
    display: block;
    /* text-align: center; */
    border-top: 1px solid var(--sub-color02);
    border-bottom: 1px solid var(--sub-color02);
    margin: 10px 0 0;
    padding: 20px 10px 10px;
}

#blog .blogList li .cats .cat {
    padding: 7px 20px 8px;
}

.blogList li h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color01);
    border-top: 2px solid var(--sub-color01);
    border-bottom: 2px solid var(--sub-color01);
    margin: 0 30px;
    padding: 20px 0;
}

.blogList .excerpt {
    display: block;
    padding: 20px;
}

.blogList li a .time {
    padding: 0 30px;
}

.blogList li .bottom {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px 30px;
}

.blogList .btn {
    margin-top: 30px;
    margin-bottom: -10px;
}


/* -----------------------------------------------------------
    #works
----------------------------------------------------------- */
#works .categories {
    padding-top: 90px;
}

#works .worksList {
    margin-top: 0;
    padding: 50px 0;
    background: var(--sub-color04);
}

#works .worksList ul {
    width: auto;
    gap: 40px 25px;
}

#works .worksList .categories + ul {
    margin-top: 40px;
}

#works .worksList + .contactContent02 {
    margin-top: -60px;
}

#works .worksList li {
    width: calc((100% - 50px) / 3);
    background: var(--white);
    border: 6px solid var(--main-color02);
}

#works .worksList li > .inBox {
    padding: 0 0 80px;
}

#works .worksList li:hover {
    transform: scale(1.05);
}

#works .worksList li:hover figure {
    transform: scale(1);
}

#works .worksList li h3 {
    text-align: left;
    margin: 0 20px;
}

#works .worksList .post_detail {
    margin: 10px 20px 0;
}

#works .worksList .cats {
    margin: 0 20px;
}

/*----- #works.single -----*/
#works.single .infoBox h1 {
    border-top: 4px solid var(--main-color02);
    border-bottom: 4px solid var(--main-color02);
}

#works.single .infoBox h1 b {
    background: var(--main-color01);
}

#works.single .pointContent {
    margin: 80px 0 0;
}

#works.single .pointContent .inBox {
    background: var(--white);
    border-radius: 6px;
    /* padding: 60px; */
}

/*----- .worksContent -----*/
.worksContent {
    position: relative;
}

.worksContent::before {
    content: "";
    background: url(./img/bg_worksContent01.png) no-repeat center;
    background-size: cover;
    position: absolute;
    top: -150px;
    width: 100%;
    height: 770px;
}

.worksContent::after {
    content: "";
    background: url(./img/bg_worksContent02.png) no-repeat center;
    background-size: cover;
    position: absolute;
    bottom: -130px;
    width: 100%;
    height: 770px;
}

#reason .worksContent::after {
    content: none;
}

.worksContent .worksList {
    margin-top: 0;
    overflow: visible;
    z-index: 10;
    /* padding-top: 80px; */
}

.worksContent .header {
    margin-top: -120px;
    position: relative;
    z-index: 2;
}

.worksContent .header .inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(./img/img_worksContent_staff01.png) no-repeat center;
    width: 331px;
    height: 221px;
}

.worksContent .tl_popup01 > span > span {
    display: flex;
    gap: 7px;
}

.worksContent .tl_popup01 .odd, 
.worksContent .tl_popup01 .even {
    font-size: 64px;
    color: var(--white);
    line-height: 1.3;
    border: 4px solid var(--sub-color01);
    padding: 0 13px 6px;
}

.worksContent .tl_popup01 .odd {
    background: var(--main-color02);
}
.worksContent .tl_popup01 .even {
    background: var(--main-color01);
}

.worksContent .tl_popup01 small {
    margin-bottom: 80px;
}

/* .worksContent::before {
    border-bottom: 1px solid var(--white);
    position: sticky;
    top: 0;
    content: "";
    display: block;
    width: 100%;
    height: 420px;
    background: center top #fff url(img/img_works.jpg) no-repeat;
} */

/*----- .worksList -----*/
.worksList {
    overflow: hidden;
    position: relative;
}

.worksList .inner {
    overflow: visible;
    /* padding: 20px; */
    box-sizing: content-box;
}

.worksList .header .inner {
    padding: 0 0 60px;
    margin-bottom: 30px;
    border-bottom: 6px solid var(--sub-color01);
}

#voice .worksList h2 {
    padding-top: 40px;
    margin-bottom: 40px;
}

.worksList ul {
    width: 100%;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.worksList ul .slick-slide {
    opacity: 1;
    height: auto;
}

.worksList li {
    box-sizing: border-box;
    margin: 10px 0;
    position: relative;
    border-right: 2px solid var(--sub-color01);
    word-break: break-all;
    word-wrap: break-word;
    transition: 0.3s ease;
}

.worksList.slider li > .inBox {
    display: block;
    padding: 20px 20px 100px;
}

.worksList li > .inBox {
    display: block;
    padding: 20px 20px 70px;
    box-sizing: border-box;
}

.worksList ul > li {
    width: calc(100% / 3);
}

.slider-multi .slick-slide > div li:nth-of-type(3n),
.worksList ul li:nth-of-type(3n) {
    border-right: 0;
}

.worksList li a {
    color: var(--body-text-color);
    display: block;
}

.worksList li:hover figure {
    transform: scale(1.05);
}

.worksList li figure {
    margin-bottom: 20px;
    transition: 0.3s ease;
}

.worksList li .mainThumb {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.worksList li h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color01);
    text-align: center;
    word-break: break-all;
}

.worksList .post_detail {
    display: block;
    text-align: center;
    border-top: 2px solid var(--sub-color01);
    margin: 10px 0;
    padding: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worksList .post_detail + .post_detail {
    border-top: 0;
    margin-top: -10px;
    border-bottom: 0;
}

.worksList li a .time {
    margin-top: 30px;
    /* color: #999; */
    text-align: right;
}

.worksList li .bottom {
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px 30px;
}

.worksList .btn {
    margin-top: 30px;
    margin-bottom: -10px;
}


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

.worksList02 .header {
    margin-bottom: 50px;
    border-bottom: 6px solid var(--sub-color01);
}

.worksList02 .header .inner {
    padding-bottom: 60px;
}

.worksList02 ul {
    margin-bottom: 50px;
}

.worksList02 ul .slick-slide {
    height: auto;
    background: var(--white);
    margin: 0 15px;
    padding-bottom: 30px;
    border: 6px solid var(--main-color02);
}

.worksList02 li {
    text-align: center;
}

.worksList02 li .mainThumb {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.worksList02 li h3 {
    text-align: left;
    margin: 10px 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sub-color01);
}

.worksList02 li .post_detail {
    color: #222;
}

.worksList02 li .cats {
    text-align: left;
    margin: 10px 30px 20px;
}

.worksList02.slider .slick-arrows01 .slick-prev {
    transform: scale(-1, 1);
    left: 0;
    z-index: 2;
}

.worksList02.slider .slick-arrows01 .slick-next {
    right: 0;
}

.worksList02.slider .slick-arrows01 .slick-prev, 
.worksList02.slider .slick-arrows01 .slick-next {
    width: 50px;
    height: 50px;
}

.worksList02.slider .slick-arrows01 .slick-prev::before, 
.worksList02.slider .slick-arrows01 .slick-next::before {
    content: "";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(./img/arrow_circle01.png) no-repeat center;
    transform: translateY(-50%);
    --mask: none;
}

/*----- .reasonContent -----*/
.reasonContent {
    overflow: visible;
    position: relative;
    background-attachment: fixed;
}

.reasonContent::after {
    content: "";
    position: absolute;
    bottom: 0;
    background: url(img/bg_reason02.png) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 77px;
}

.reasonContent .full {
    background: #b9ecff url(img/bg_reason01.jpg) no-repeat center top;
    background-size: 100%;
    padding: 80px 100px 150px;
    overflow: hidden;
    box-sizing: border-box;
}

.reasonContent .tl_popup01 {
    flex-direction: column;
    gap: 70px;
    padding-bottom: 320px;
}

.reasonContent .tl_popup01::after {
    content: "";
    position: absolute;
    bottom: 0;
    background: url(./img/img_reasonContent_staff01.png) no-repeat center;
    width: 977px;
    height: 305px;
}

.reasonContent .tl_popup01 small::before, 
.reasonContent .tl_popup01 small::after {
    background: url(./img/ttl_small_line02.png) no-repeat center;
    width: 39px;
    height: 69px;
}

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

.reasonContent ul {
    margin-bottom: 80px;
}

#reason .reasonContent ul {
    margin-bottom: 0;
}

.reasonContent li {
    align-items: center;
}

.reasonContent li > * {
    /* flex: 1; */
    width: 50%;
}

.reasonContent li {
    margin-top: 100px;
}

.reasonContent li figure {
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}

.reasonContent li figure img {
    max-width: 540px;
    max-height: 380px;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    margin-left: auto;
    display: block;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.15);
}

.reasonContent li:nth-of-type(1) figure::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -100px;
    background: url(./img/img_reason_staff01.png) no-repeat center;
    width: 255px;
    height: 378px;
}

.reasonContent li:nth-of-type(4) figure::after {
    content: "";
    position: absolute;
    bottom: 147px;
    left: -45px;
    background: url(./img/img_reason_staff02.png) no-repeat center;
    width: 251px;
    height: 294px;

    @media screen and (max-width: 1135px) {
        bottom: 141px;
    }
}

.reasonContent li:nth-of-type(5) figure::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -50px;
    background: url(./img/img_reason_staff03.png) no-repeat center;
    width: 305px;
    height: 362px;
}

.reasonContent li .inBox {
    background: var(--white);
    min-height: 460px;
    max-width: 700px;
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    padding: 60px;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
}

.reasonContent li .inBox .number {
    color: var(--main-color01);
    font-family: var(--en-font-family);
    font-size: 18px;
    font-weight: 700;
    background: var(--sub-color03);
    border: 3px solid currentColor;
    line-height: 1;
    width: fit-content;
    padding: 10px 40px;
    min-width: 188px;
    box-sizing: border-box;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -80px;
    right: 60px;
}

.reasonContent li:nth-of-type(even) .inBox .number {
    left: 0;
}

/* @media screen and (max-width : 1280px) {
    .reasonContent li .inBox .number {
        top: 30px;
        right: 30px;
    }
}

@media screen and (max-width : 1100px) {
    .reasonContent li .inBox .number {
        top: 20px;
        right: 0;
    }
} */

.reasonContent li .inBox .number::before,
.reasonContent li .inBox .number::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 25px;
    height: 25px;
    background: var(--white);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    transform: translate(0, 97%);
}

.reasonContent li .inBox .number::before {
    background: var(--main-color01);
    transform: translate(3px, 99%);
}

.reasonContent li:nth-of-type(even) .inBox .number::before,
.reasonContent li:nth-of-type(even) .inBox .number::after {
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    transform: translate(0, 97%);
}

.reasonContent li:nth-of-type(even) .inBox .number::before {
    background: var(--main-color01);
    transform: translate(-3px, 99%);
}

.reasonContent li .inBox .number small {
    font-size: 26px;
    font-weight: 900;
    margin-top: 0.1em;
}

.reasonContent li .inBox .number b {
    font-size: 100px;
    font-weight: 900;
    margin-left: 1rem;
}

.reasonContent li .inBox h3 {
	font-size: 35px;
    font-weight: 900;
    margin-top: 20px;
    margin-bottom: 30px;
    line-height: 1.25;
}

.reasonContent li .inBox h3 b {
    color: var(--red);
    font-weight: 900;
}

.reasonContent li .inBox p {
    margin-bottom: 20px;   
}

.reasonContent li .inBox p b {
    color: var(--red);
    font-weight: 700;
}


.reasonContent li .inBox::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 200vw;
    height: 100%;
    background: var(--white);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: translateX(-200px);
}

.reasonContent li .inBox .btn a {
    font-size: 18px;
    line-height: 60px;
    min-width: 0;
    width: fit-content;
    height: 60px;
    padding: 0 70px 0 30px;
}

.reasonContent li .inBox .btn a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background: url(./img/img_arrow.png) no-repeat center left 50%;
    background-size: 7px;
    background-color: var(--main-color02);
    border-radius: 50%;
}

.reasonContent li:nth-of-type(even) {
    flex-direction: row-reverse;
}

.reasonContent li:nth-of-type(odd) .inBox {
    padding-right: 0;
}

.reasonContent li:nth-of-type(odd) .inBox .number {
    right: 0;
}

.reasonContent li:nth-of-type(even) .inBox {
    padding-left: 0;
}

.reasonContent li:nth-of-type(even) figure img {
    margin-left: 0;
    margin-right: auto;
}

.reasonContent li:nth-of-type(even) .inBox::before {
    left: auto;
    right: 0;
    transform: translateX(200px);
}

/*----- .messageContent -----*/
.messageContent {
    padding: 100px 0;
    background: var(--sub-color04);
}

#reason .messageContent {
    padding-bottom: 350px;
}

.messageContent .inner {
    overflow: visible;
}

.messageContent h2 {
    margin-bottom: 20px;
}

.messageContent .flex {
    gap: 50px;
    margin: 60px 0;
}

.messageContent h3 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.6;
    margin-bottom: 20px;
}

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

.messageContent p {
    line-height: 2;
    text-align: justify;
    letter-spacing: -0.025em;
}

.messageContent p + p {
    margin-top: 1.5em;
}

.messageContent figure {
    max-width: 360px;
    flex-shrink: 0;
}

.messageContent figure img {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 10px;
}

.messageContent figcaption {
    display: block;
    font-size: 16px;
    text-align: right;
    line-height: 1.8;
}

.messageContent figcaption b {
    font-size: 20px;
    font-weight: 500;
}

/*----- .areaContent -----*/
.areaContent {
    padding: 100px 0 50px;
    position: relative;
}

.areaContent .wide_lg {
    padding: 0 100px;
    box-sizing: border-box;
    position: relative;
}

.areaContent .wide_lg .imgLayer {
    top: -200px;
    right: 100px;
}

.areaContent .flex {
    align-items: center;
    justify-content: center;
    /* justify-content: stretch; */
    align-items: stretch;
    gap: 0;
    overflow: visible;
    background: var(--sub-color03);

    padding-top: 50px;
    position: relative;
}

.areaContent .flex .content {
    /* width: 46%; */
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 50px;
    box-sizing: border-box;
}

.areaContent .flex h2 {
    font-size: 54px;
    font-weight: 900;
    color: var(--white);
    flex-direction: row;
    flex-shrink: 0;
    position: absolute;
    top: -60px;
    right: 47%;
}

.areaContent .flex h2 span {
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 4px;
}

.areaContent .flex h2 .odd {
    background: var(--main-color02);
    transform: rotate(-10deg);

    span {
        display: block;
        transform: rotate(10deg);
    }
}

.areaContent .flex h2 .even {
    background: var(--sub-color01);
    transform: rotate(10deg);

    span {
        display: block;
        transform: rotate(-10deg);
    }
}

@media screen and (max-width: 1400px) {
    .areaContent .flex h2 {
        font-size: 44px;
        left: 30px;
    }

    .areaContent .flex h2 span {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }
}

.areaContent .flex h2 small {
    color: var(--white);
}

.areaContent .flex h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--white);
    background: var(--main-color01);
    padding: 15px 30px;
    line-height: 1;
    margin: 10px 0 50px;
}

.areaContent .flex p {
    font-size: 16px;
    line-height: 2;
    /* margin: 30px 0 30px; */
}

.areaContent .flex p strong {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    display: block;
    margin-bottom: -10px;
}

.areaContent .flex figure {
    width: 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;

    @media screen and (max-width: 1400px) {
        padding: 40px 10px;
    }
}

.areaContent .flex figure img {
    max-width: 100%;
    height: auto;
}

/*----- .shopListContent -----*/
.shopListContent .wide_lg {
    padding: 0 100px;
    box-sizing: border-box;
}

.shopListContent h2 {
    font-size: 40px;
    color: var(--white);
    position: relative;
    z-index: 10;
    transform: translateY(10px);
}

.shopListContent h2::after {
    content: "";
    position: absolute;
    top: 0;
    margin: 0 auto;
    background: url(./img/bg_shopList_ttl.png) no-repeat center;
    width: 508px;
    height: 103px;
    z-index: -1;
}

.shopListContent .content {
    background: #eee;
    padding: 100px 20px;
}

.shopListContent .shopList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin: 0 auto;
    max-width: 1100px;
}

.shopListContent .shopList li {
    width: calc((100% - 40px) / 2);
    background: var(--white);
    padding: 20px;
    box-sizing: border-box;
}

@media screen and (max-width: 1400px) {
    .shopListContent .content {
        padding: 70px 20px 20px;
    }
    .shopListContent .shopList{
        gap: 20px;
    }
    .shopListContent .shopList li {
        width: calc((100% - 20px) / 2);
    }     
}

.shopListContent .shopList li.flex {
    gap: 20px;
}

.shopListContent .shopList li .flex {
    gap: 20px;
    margin-bottom: 10px;
}

.shopListContent .shopList .flex a {
    text-decoration: underline;
    text-underline-offset: 5px;
    position: relative;
    padding-left: 30px;
}

.shopListContent .shopList .flex a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 23px;
    height: 34px;
    background: url(./img/icon_map.png) no-repeat center;
    background-size: 23px;
}

.shopListContent .shopList .add .fdl img {
    vertical-align: middle;
}

.shopListContent .shopList .add .tel, 
.shopListContent .shopList .add .fax {
    display: inline-block;
}

/*----- .slider -----*/
.slick:not(.slick-initialized) {
    opacity: 0;
    transition: 0.3s ease;
}

.slick.slick-initialized {
    opacity: 1;
}

.slider .inner {
    overflow: visible;
}

.slider .slick-track {
    display: flex !important;
    gap: 0;
    align-items: stretch;
}

.slider .slick-slide {
    opacity: 1 !important;
}

/* .slider-multi .slick-slide > div {
    display: flex;
    justify-content: center;
    gap: 0;
} */

.slider a:hover img {
    opacity: 1 !important;
}

.slider .slick-arrows01 .slick-prev {
    left: -90px;
}

.slider .slick-arrows01 .slick-next {
    right: -90px;
}

.slider .slick-arrows01 .slick-prev::before,
.slider .slick-arrows01 .slick-next::before {
    content: "";
    display: block;
    position: absolute;
    width: 25px;
    height: 42px;
    background: var(--main-color01);
    opacity: 1;
    --mask: url(./img/svg_arrow10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
    transform: translateY(-50%);
}

.slider .slick-arrows01 .slick-prev::before {
    transform: translateY(-50%) scaleX(-1);
}

.slider .slick-arrows01 .slick-prev:hover::before,
.slider .slick-arrows01 .slick-next:hover::before {
    opacity: 0.8;
}

/* @media screen and (max-width : 1280px) {

    .slider .slick-arrows01 .slick-prev,
    .slider .slick-arrows01 .slick-next {
        display: flex;
        z-index: 10;
        width: 50px;
        height: 50px;
        outline: 2px solid transparent;
        padding: 20px 10px;
        border-radius: 50%;
        box-sizing: border-box;
        background: url(./img/arrow_circle01.png) no-repeat center !important;
        z-index: 10;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
        transition: 0.3s ease;
    }

    .slider .slick-arrows01 .slick-prev {
        left: 2px;
        transform: translateX(0) scale(-1, 1);
        border-radius: 0 6px 6px 0;
    }

    .slider .slick-arrows01 .slick-next {
        right: 2px;
        transform: translateX(0%) scale(1);
        border-radius: 6px 0 0 6px;
    }

    .slider .slick-arrows01 .slick-prev:hover,
    .slider .slick-arrows01 .slick-next:hover {
        background: var(--white) !important;
        outline: 2px solid var(--main-color01);

        opacity: 0.8;
    }

    .slider .slick-arrows01 .slick-prev::before,
    .slider .slick-arrows01 .slick-next::before {
        position: static;
        transform: none;
        width: 100%;
        height: 100%;
        background: var(--white);
        transition: 0.3s ease;

        content: none;
    }
} */

/*----- .blogList -----*/
.blogList {
    overflow: hidden;
}

.blogList .inner {
    overflow: visible;
    box-sizing: content-box;
}

#product .blogList {
    overflow: hidden;
    position: relative;
    padding: 120px 15px;
}

#product .blogList.slider .slick-list {
    padding: 15px 0;
}

#product .blogList ul .slick-slide {
    margin: 0 15px;
}

#product .blogList.slider .slick-arrows01 .slick-prev {
    transform: scale(-1, 1);
    left: 0;
    z-index: 2;
}

#product .blogList.slider .slick-arrows01 .slick-next {
    right: 0;
}

#product .blogList.slider .slick-arrows01 .slick-prev, 
#product .blogList.slider .slick-arrows01 .slick-next {
    width: 50px;
    height: 50px;
}

#product .blogList.slider .slick-arrows01 .slick-prev::before, 
#product .blogList.slider .slick-arrows01 .slick-next::before {
    content: "";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(./img/arrow_circle01.png) no-repeat center;
    transform: translateY(-50%);
    --mask: none;
}

/*----- .voiceList -----*/
.voiceList {
    padding: 150px 0 100px;
    background: var(--sub-color03);
}

#voice .voiceList {
    margin-top: 0;
}

/* #voice .voiceList .bg_waver01 {
    padding-top: 100px;
} */

.voiceList .inner {
    overflow: visible;
    /* padding: 20px; */
    box-sizing: content-box;
}

.voiceList .tl_popup01 small {
    margin-bottom: 20px;
}

.voiceList h2 {
    padding-top: 80px;
}

#voice .voiceList h2 {
    padding-top: 40px;
    margin-bottom: 40px;
}

.voiceList ul {
    width: 100%;
    display: flex;
    gap: 0;
    margin: -70px 0 60px;
    position: relative;
    z-index: 2;
    /* width: 1100px; */
}

.voiceList ul::after {
    content: "";
    position: absolute;
    top: -230px;
    right: 0;
    background: url(./img/img_voiceContent_staff01.png) no-repeat center;
    width: 292px;
    height: 306px;
    z-index: -1;
}

#voice .voiceList ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 30px -20px 25px;
    width: auto;
}

/* .slick-list {
    overflow: visible;
}

.slick-track {
    display: flex !important;
    gap: 0;
} */

.voiceList ul .slick-slide {
    opacity: 1;
    height: auto;
}

.voiceList li {
    background: var(--white);
    padding-bottom: 130px;
    border: 6px solid var(--sub-color01);
    box-sizing: border-box;
    margin: 12.5px;
    word-wrap: break-word;
    transition: 0.3s ease;
    position: relative;
    transition: 0.3s ease;
}

.voiceList li a {
    color: var(--body-text-color);
    display: block;
}

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

.voiceList li figure {
    margin-bottom: 20px;
}

.voiceList li .mainThumb {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.voiceList li h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color01);
    margin: 0 30px;
}

.voiceList .post_detail {
    display: block;
    text-align: center;
    border-top: 2px solid var(--sub-color01);
    border-bottom: 2px solid var(--sub-color01);
    margin: 10px 30px;
    padding: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voiceList .post_detail b {
    /* display: flex;
    text-align: center;
    line-height: 1.8;
    width: fit-content;
    gap: 0 1em; */
    display: block;
    white-space: wrap;
}

.voiceList .post_detail b span + span {
    margin-left: 1em;
}

.voiceList .post_detail + .post_detail {
    border-top: 0;
    margin-top: -10px;
}

.voiceList li .voicetxt {
    margin: 0 30px;
}

.voiceList li .cats {
    margin: 10px 30px 0;
}

.voiceList li .time {
    margin-top: 20px;
    color: #999;
    text-align: right;
}

.voiceList li .bottom {
    /* margin-top: 20px; */
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px 20px;
}

.voiceList .btn {
    margin-top: 10px;
}

/* -----------------------------------------------------------
    #corporate
----------------------------------------------------------- */
#corporate table {
    margin: 50px 0 0;
}

#corporate table th {
    width: 27%;
}

.corporatePhotos ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    align-content: space-between;
    gap: 40px 40px;
}

.corporatePhotos li figure img {
    width: 100%;
    height: auto;
}

#corporate .licenceContent {
    margin: 60px 0;
}

#corporate .shopContent {
    margin: 80px 0;
}

.shopContent iframe {
    width: 100%;
    height: 400px;
    margin: 50px 0 15px;
}

#corporate .areaContent {
    padding: 0;
    margin-top: 80px;
}

.corporateOutline {
    padding: 100px 0;
}

/*----- .shopAccess -----*/
#main ul.shopAccess {
    margin-top: 10px;
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);
}

#main ul.shopAccess > li {
    background: none !important;
    padding: 0 !important;
}

#main ul.shopAccess > li .bandTitle03 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    padding: 6px 25px 8px;
}

.shopAccess iframe {
    width: 100%;
    display: block;
}

.corporateImages ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    align-content: space-between;
    gap: 30px 20px;
}

.corporateImages li figcaption {
    padding-top: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.923;
}

.corporateImages li figure img {
    width: 100%;
    height: auto;
}

/* -----------------------------------------------------------
    staff
----------------------------------------------------------- */
/*----- .staffList -----*/
.staffList {
    /* padding: 80px 0; */
    padding: 100px 50px 100px 0;
    display: flex;
}

.staffList .leftBox {
    min-width: 360px;
    background: var(--main-color02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.staffList .tl_popup01 {
    font-size: 36px;
    color: var(--white);
}

.staffList .btn a {
    font-size: 18px;
    line-height: 60px;
    min-width: 0;
    width: fit-content;
    height: 60px;
    padding: 0 70px 0 30px;
}

.staffList .btn a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background: url(./img/img_arrow.png) no-repeat center left 50%;
    background-size: 7px;
    background-color: var(--main-color02);
    border-radius: 50%;
}

.staffList .rightBox {
    width: calc(100% - 360px);
    padding-left: 35px;
}

.staffList .rightBox .slick-slider {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
}

.staffList .slick-slider .slick-list {
    padding: 20px 0 20px !important;
    margin: -20px 0 -10px;
}

#staff .staffList {
    padding: 25px 0 0;
}

.staffList ul:not(.slick) {
    display: flex;
    flex-wrap: wrap;
}

.staffList ul:not(.slick) li {
    width: calc(100% / 2);
    box-sizing: border-box;
    border-right: 1px solid var(--sub-color02);
    box-sizing: border-box;
    margin-bottom: 100px;
    position: relative;
}

.staffList ul:not(.slick) li:nth-of-type(2n-1)::before {
    position: absolute;
    content: "";
    display: block;
    width: 200%;
    height: 1px;
    background: var(--sub-color02);
    left: 0;
    bottom: -50px;
}

.staffList ul:not(.slick) li:nth-last-of-type(-n+2)::before {
    display: none;
}


.staffList ul:not(.slick) li:nth-of-type(2n-1) {
    border-left: 1px solid var(--sub-color02);
}


.staffList ul:not(.slick) li > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.3s ease;
    padding: 50px 0 20px;
    position: relative;
}

.staffList ul:not(.slick) li > a::after {
    position: absolute;
    inset: auto 0 0;
    margin: 0 auto;
    content: "";
    width: 17px;
    height: 13px;
    background-color: var(--main-color01);
    --mask: url(./img/svg_arrow01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
}

.staffList ul:not(.slick) li > a:hover {
    transform: scale(1.05);
}

.staffList ul:not(.slick) li figure {
/*    width: 346px;*/
    width: 340px;
    height: auto;
    max-width: 100%;
    margin: 0 auto 20px;
}

.staffList li .cats .cat,
#staff .cats .cat {
    /* .staffList h3 small { */
    font-size: 16px;
    font-weight: 500;
    background: none;
    display: block;
    width: fit-content;
    padding: 0;
    margin: 0 auto 25px;
}

.staffList h3 {
    text-align: center;
    line-height: 1;
    margin: 10px 0 15px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--body-text-color);
}

#staff .staffList h3 {
    margin-top: 0;
}

.staffList .mainThumbWrap,
#staff .mainThumbWrap {
    aspect-ratio: 306 / 284;
    overflow: hidden;
    /* filter: drop-shadow(-10px -12px 0 var(--main-color01)); */
    margin-bottom: 20px;
}

.staffList a:hover figure img {
    opacity: 1 !important;
}

.staffList .mainThumb,
#staff .mainThumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 0%;
    /* --mask: url(./img/svg_polygon01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    mask-image: var(--mask); */
}

.staffList.slider li {
    margin: 0 25px;
    background: var(--white);
    box-shadow: 10px 10px 0px 0px #efefef;
    transition: 0.3s ease;
}

.staffList.slider li:hover {
    transform: scale(1.05);
}

.staffList.slider li .cats a {
    color: var(--white);
    background: var(--black);
}

.staffList.slider .slick-arrows01 .slick-prev {
    left: 40px;
    transform: scale(-1, 1);
}

.staffList.slider .slick-arrows01 .slick-next {
    right: 40px;
}

.staffList.slider .slick-arrows01 .slick-prev,
.staffList.slider .slick-arrows01 .slick-next {
    width: 40px;
    height: 40px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.staffList.slider .slick-arrows01 .slick-prev::before,
.staffList.slider .slick-arrows01 .slick-next::before {
    content: "";
    display: block;
    position: absolute;
    width: 13px;
    height: 30px;
    background: var(--main-color01);
    opacity: 1;
    --mask: url(./img/svg_arrow10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/*----- #staff ---- */
#staff .inner {
    overflow: visible;
}

#staff .mainContent {
    display: flex;
    gap: 60px;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 70px;
}

#staff .mainContent > .inBox {
    flex: 1;
    text-align: center;
}

#staff .mainContent .mainThumbWrap {
    width: 100%;
    max-width: 438px;
    filter: drop-shadow(-14px -17px 0 var(--main-color01));
}

#staff .mainContent h1 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 400;
}

#staff .mainContent .cats .cat {
    font-size: 22px;
    min-width: 380px;
    box-sizing: border-box;
    padding: 14px 30px;
}

#staff .mainContent .cats .cat:hover {
    opacity: 1;
}

#staff .mainContent .alphabet {
    color: var(--main-color01);
    font-size: 16px;
    text-transform: uppercase;
}

#staff .detailContent {
    margin: 0 0 80px;
}

#staff .detailContent dl,
#staff .detailContent dt,
#staff .detailContent dd {
    display: block;
}

#staff .detailContent dl {
    border-top: 1px solid var(--sub-color02);
    border-left: 1px solid var(--sub-color02);
    border-right: 1px solid var(--sub-color02);
}

#staff .detailContent dt,
#staff .detailContent dd {
    padding: 15px 20px;
    border-bottom: 1px solid var(--sub-color02);
    overflow-wrap: anywhere;
    /* word-break: normal; */
    word-break: break-all;
    line-break: strict;
}

#staff .detailContent dt {
    background: #eee;
    text-align: center;
    font-weight: 700;
}

#staff .detailContent dd {
    text-align: left;
    background: var(--white);
    padding: 20px 50px;
}

#staff .detailContent dd ul {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#staff .detailContent dd ul li {
    text-align: left;
}


/*----- .contactContent -----*/
.contactContent {
    /* margin-top: 80px; */
    padding: 80px 0 65px;
    border-radius: 60px;
}

.topMainv + .contactContent,
.messageContent + .contactContent {
    margin-top: 0;
}

.contactContent.bgImg01 > .inner {
    margin-top: -65px;
}

.contactContent .inner {
    position: relative;
    overflow: visible;
}

.contactContent h2 {
    margin-bottom: 25px;
}

.contactContent h2 .imgLayer {
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translate(-57%, -87%);
}

.contactContent .contactBox .inBox {
    flex: 1;
    position: relative;
    background: var(--white);
    border-radius: 85px;
    text-align: center;
    color: var(--body-text-color);
    border: 3px solid var(--main-color01);
    width: fit-content;
    margin: 0 auto 35px;
    padding: 36px 240px 24px 60px;
    transform-style: preserve-3d;
}

.contactContent .contactBox .lst_checkbox01 {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.contactContent .contactBox .inBox .btn_ico {
    margin-bottom: 10px;
}

.contactContent .contactBox .inBox h3 {
    color: var(--main-color01);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.contactContent .contactBox .imgLayer {
    position: absolute;
    bottom: 0;
    right: 85px;
}

.contactContent .contactBox .imgLayer p {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.125;
    position: relative;
    margin-right: -60px;
    margin-left: 60px;
}

.contactContent .contactBox .imgLayer p::before,
.contactContent .contactBox .imgLayer p::after {
    display: block;
    position: absolute;
    content: "";
    height: 120%;
    width: 4px;
    background: var(--sub-color01);
    border-radius: 2px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.contactContent .contactBox .imgLayer p::before {
    left: 0;
    transform: skewX(25deg);
}

.contactContent .contactBox .imgLayer p::after {
    right: 0;
    transform: skewX(-25deg);
}

.contactContent .contactBox .inBox p {
    font-size: 16px;
}

#main .contactContent .contactBox .btn_ico {
    position: relative;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    padding: 28px 10px 28px 45px;
    width: 360px;
    border-radius: 40px;
    transition: 0.3s ease;
}

#main .contactContent .contactBox .btn_ico + .btn_ico {
    margin-left: 40px;
}

#main .contactContent .contactBox a img {
    left: 40px;
}

#main .contactContent .contactBox a:hover {
    opacity: 0.7;
}

#main .contactContent .contactBox .tel {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--body-text-color);
    margin: 0;
}

.contactContent .contactBox .tel span.tel-link {
    color: var(--body-text-color);
    font-size: 58px;
    padding: 0;
    margin: 0;
}

.contactContent .contactBox .tel-link img {
    width: 0.775em;
    height: 0.775em;
    vertical-align: -0.05em;
    margin-right: 0.5rem;
}

.contactContent .contactBox .tel span.tel-open {
    margin-top: 5px;
    font-size: 16px;
    margin-left: 30px;
}

/*
.contactContent .contactBoxBtns {
    display: flex;
    justify-content: center;
}

.contactContent .contactBoxBtns .btn_ico.ico_mail01::before,
.contactContent .contactBoxBtns .btn_ico.ico_pc01::before {
    transform: scale(1.4) translateX(50%);
} */

/*----- .contactContent02 -----*/
.contactContent02 {
    color: var(--white);
    padding-top: 350px;
    padding-bottom: 100px;
    position: relative;
}

.contactContent02::after {
    content: "";
    background: url(./img/bg_contactContent02.png) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    width: 100%;
    height: 684px;
    z-index: -1;
}

.contactContent02 .wide_lg {
    max-width: 1400px;
    box-sizing: border-box;
}

.worksContent + .contactContent02 {
    margin-top: 80px;
}

.contactContent02 h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--white);
    padding-top: 100px;
    position: relative;
    z-index: 2;
}

.contactContent02 h2 b {
    display: inline-block;
    background: var(--red);
    padding: 3px 8px 7px;
    margin: 0 5px;
    font-weight: 700;
}

#main .contactContent02 h2 small {
    display: block;
    font-size: 70px;
    font-weight: 600;
    color: var(--white);
    font-family: var(--en-font-family);
    letter-spacing: 5px;
    text-shadow: rgb(30, 128, 227) 14px 0px 0px, rgb(30, 128, 227) 13.9643px 0.99915px 0px, rgb(30, 128, 227) 13.8574px 1.9932px 0px, rgb(30, 128, 227) 13.6798px 2.97709px 0px, rgb(30, 128, 227) 13.4324px 3.9458px 0px, rgb(30, 128, 227) 13.1166px 4.89438px 0px, rgb(30, 128, 227) 12.7338px 5.81801px 0px, rgb(30, 128, 227) 12.2862px 6.71196px 0px, rgb(30, 128, 227) 11.7758px 7.57168px 0px, rgb(30, 128, 227) 11.2054px 8.39279px 0px, rgb(30, 128, 227) 10.5779px 9.17109px 0px, rgb(30, 128, 227) 9.89637px 9.90262px 0px, rgb(30, 128, 227) 9.1644px 10.5837px 0px, rgb(30, 128, 227) 8.3857px 11.2107px 0px, rgb(30, 128, 227) 7.56423px 11.7806px 0px, rgb(30, 128, 227) 6.70419px 12.2904px 0px, rgb(30, 128, 227) 5.80995px 12.7375px 0px, rgb(30, 128, 227) 4.88609px 13.1197px 0px, rgb(30, 128, 227) 3.93731px 13.4349px 0px, rgb(30, 128, 227) 2.96844px 13.6817px 0px, rgb(30, 128, 227) 1.98444px 13.8586px 0px, rgb(30, 128, 227) 0.990321px 13.9649px 0px, rgb(30, 128, 227) -0.00885142px 14px 0px, rgb(30, 128, 227) -1.00798px 13.9637px 0px, rgb(30, 128, 227) -2.00197px 13.8561px 0px, rgb(30, 128, 227) -2.98574px 13.6779px 0px, rgb(30, 128, 227) -3.95429px 13.43px 0px, rgb(30, 128, 227) -4.90268px 13.1135px 0px, rgb(30, 128, 227) -5.82606px 12.7302px 0px, rgb(30, 128, 227) -6.71972px 12.2819px 0px, rgb(30, 128, 227) -7.57912px 11.771px 0px, rgb(30, 128, 227) -8.39987px 11.2001px 0px, rgb(30, 128, 227) -9.17778px 10.5721px 0px, rgb(30, 128, 227) -9.90888px 9.8901px 0px, rgb(30, 128, 227) -10.5894px 9.15771px 0px, rgb(30, 128, 227) -11.216px 8.37861px 0px, rgb(30, 128, 227) -11.7854px 7.55678px 0px, rgb(30, 128, 227) -12.2946px 6.69642px 0px, rgb(30, 128, 227) -12.7412px 5.8019px 0px, rgb(30, 128, 227) -13.1228px 4.87779px 0px, rgb(30, 128, 227) -13.4374px 3.92881px 0px, rgb(30, 128, 227) -13.6836px 2.95979px 0px, rgb(30, 128, 227) -13.8599px 1.97568px 0px, rgb(30, 128, 227) -13.9656px 0.981491px 0px, rgb(30, 128, 227) -14px -0.0177028px 0px, rgb(30, 128, 227) -13.963px -1.01681px 0px, rgb(30, 128, 227) -13.8549px -2.01073px 0px, rgb(30, 128, 227) -13.676px -2.99439px 0px, rgb(30, 128, 227) -13.4274px -3.96278px 0px, rgb(30, 128, 227) -13.1104px -4.91096px 0px, rgb(30, 128, 227) -12.7265px -5.8341px 0px, rgb(30, 128, 227) -12.2777px -6.72749px 0px, rgb(30, 128, 227) -11.7662px -7.58656px 0px, rgb(30, 128, 227) -11.1948px -8.40695px 0px, rgb(30, 128, 227) -10.5663px -9.18446px 0px, rgb(30, 128, 227) -9.88384px -9.91513px 0px, rgb(30, 128, 227) -9.15101px -10.5952px 0px, rgb(30, 128, 227) -8.37152px -11.2213px 0px, rgb(30, 128, 227) -7.54933px -11.7901px 0px, rgb(30, 128, 227) -6.68864px -12.2989px 0px, rgb(30, 128, 227) -5.79384px -12.7449px 0px, rgb(30, 128, 227) -4.8695px -13.1259px 0px, rgb(30, 128, 227) -3.92032px -13.4399px 0px, rgb(30, 128, 227) -2.95114px -13.6854px 0px, rgb(30, 128, 227) -1.96692px -13.8611px 0px, rgb(30, 128, 227) -0.972662px -13.9662px 0px, rgb(30, 128, 227) 0.0265543px -14px 0px, rgb(30, 128, 227) 1.02563px -13.9624px 0px, rgb(30, 128, 227) 2.01948px -13.8536px 0px, rgb(30, 128, 227) 3.00304px -13.6741px 0px, rgb(30, 128, 227) 3.97127px -13.4249px 0px, rgb(30, 128, 227) 4.91925px -13.1073px 0px, rgb(30, 128, 227) 5.84215px -12.7228px 0px, rgb(30, 128, 227) 6.73525px -12.2734px 0px, rgb(30, 128, 227) 7.594px -11.7614px 0px, rgb(30, 128, 227) 8.41402px -11.1895px 0px, rgb(30, 128, 227) 9.19114px -10.5604px 0px, rgb(30, 128, 227) 9.92138px -9.87756px 0px, rgb(30, 128, 227) 10.601px -9.14431px 0px, rgb(30, 128, 227) 11.2266px -8.36442px 0px, rgb(30, 128, 227) 11.7949px -7.54187px 0px, rgb(30, 128, 227) 12.3031px -6.68086px 0px, rgb(30, 128, 227) 12.7485px -5.78578px 0px, rgb(30, 128, 227) 13.1289px -4.8612px 0px, rgb(30, 128, 227) 13.4424px -3.91182px 0px, rgb(30, 128, 227) 13.6873px -2.94249px 0px, rgb(30, 128, 227) 13.8624px -1.95815px 0px, rgb(30, 128, 227) 13.9668px -0.963831px 0px;
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.contactContent02 h2 + p {
    font-size: 20px;
    text-align: center;
    margin-bottom: 25px;
}

.contactContent02 .contactBox {
    background: #1e80e3;
    position: relative;
}

.contactContent02 .contactBox .inBox {
    flex: 1;
    position: relative;
    border-radius: 6px;
    color: var(--body-text-color);
    padding: 35px 40px;
    transform-style: preserve-3d;
	text-align:center;
}

.contactContent02 .contactBox .inBox:nth-of-type(2) {
    position: relative;
    overflow: hidden;
    padding: 10px 150px 70px;
	text-align:left;
}

.contactContent02 .contactBox .inBox .btn_ico {
    margin-bottom: 10px;
}

.contactContent02 .contactBox .inBox h3 {
    color: var(--main-color01);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.contactContent02 .contactBox .imgLayer {
    position: absolute;
    top: -80px;
    right: 100px;

    @media screen and (max-width: 1400px) {
        right: 10px;
    }
}

.contactContent02 .contactBox .inBox p {
    font-size: 16px;
}
/*
#main .contactContent02 .contactBox a {
    font-size: 40px;
    position: relative;
    text-decoration: none;
    transition: 0.3s ease;
    width: 530px;
    height: 210px;
    padding-top: 100px;
    margin: 0;
}
*/
#main .contactContent02 .contactBox a.btn_ico.ico_file01 {
    padding-top: 85px;
}

#main .contactContent02 .contactBox a:hover {
    opacity: 0.7;
}

#main .contactContent02 .contactBox a span {
    font-size: 18px;
    font-weight: 500;
    display: block;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
}

#main .contactContent02 .contactBox a span::before, 
#main .contactContent02 .contactBox a span::after {
    content: "";
    background: url(./img/ttl_small_line03.png) no-repeat center;
    position: absolute;
    top: 50%;
    width: 19px;
    height: 24px;
}

#main .contactContent02 .contactBox a span::before {
    left: -30px;
    transform: translateY(-50%);
}

#main .contactContent02 .contactBox a span::after {
    right: -30px;
    transform: translateY(-50%) scale(-1, 1);
}

#main .contactContent02 .contactBox .tel {
    display: flex;
    flex-direction: column;
    color: var(--body-text-color);
    margin: 0;
}

.contactContent02 .contactBox .tel span.tel-link,
.contactContent02 .contactBox .tel .tel-link a{
    color: var(--white);
    font-size: 90px !important;
    padding-bottom: 10px;
}

.contactContent02 .contactBox .tel-link img {
    vertical-align: -0.05em;
    /* margin-right: 0.5rem; */
    width: 78px;
    height: 42px;
}

.contactContent02 .contactBox .tel span.tel-open {
    /* margin-top: -5px; */
    font-size: 20px;
    font-weight: 400;
    color: var(--white);
}

.contactContent02 .contactBox .tel span.tel-open .cut {
    display: none;
}

.contactContent02 .contactBoxBtns {
    display: flex;
    gap: 40px;
    /* padding-left: 20px; */
    justify-content: center;
}

.contactContent02 .contactBoxBtns .btn_ico.ico_mail01::before {
    width: 90px;
    background: url(./img/ico_mail02.png) no-repeat bottom 30% left;
}

.contactContent02 .contactBoxBtns .btn_ico.ico_file01::before {
    width: 90px;
    background: url(./img/ico_showroom02.png) no-repeat bottom 30% left;
}

.contactContent02 .contactBoxBtns .btn_ico.ico_mail01::after, 
.contactContent02 .contactBoxBtns .btn_ico.ico_file01::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 40px;
    height: 40px;
    background: url(./img/img_arrow.png) no-repeat center left 55%;
    background-color: var(--main-color01);
    border-radius: 50%; 
}

/*----- .pickupMenuContent -----*/
.pickupMenuContent {
    background: #f5f5f5;
    padding: 100px 0;
}

.pickupMenuContent .pickupMenuList {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.pickupMenuContent .pickupMenuList li {
    width: calc((100% - 40px) / 2);
    background: var(--white);
    border: 4px solid var(--main-color01);
    box-sizing: border-box;
}

.pickupMenuContent .pickupMenuList li .inBox {
    padding: 0 20px;
}

.pickupMenuContent .pickupMenuList li h3 {
    font-size: 22px;
    border-bottom: 2px solid currentColor;
    padding-bottom: 10px;
    margin-bottom: 10px;
    position: relative;
}

.pickupMenuContent .pickupMenuList li h3::after {
    position: absolute;
    inset: 8px 0 0 auto;
    margin: auto 0;
    content: "";
    width: 9px;
    height: 15px;
    background: currentColor;
    --mask: url(./img/svg_arrow10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
    transform: translateY(-50%);
}

.pickupMenuContent .pickupMenuList li a {
    display: flex;
    align-items: center;
}

.pickupMenuContent .pickupMenuList li p {
    color: #222;
}

/*----- 404 -----*/
#not-found .single-content .btn {
    margin-top: 2rem;
}

/* -----------------------------------------------------------
    form
----------------------------------------------------------- */

#main .formBox{
	background:#FFF;
	padding:70px 50px;
}

#main .formBox table {
    border-right: none !important;
    /* border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black); */
    max-width: min(100%, 900px);
    margin-left: auto;
    margin-right: auto;
}

.formBox table th,
.formBox table td {
    border-bottom: 2px solid var(--sub-color01);
    line-height: 1.3;
    vertical-align: top;
}

.formBox table tr:first-of-type th,
.formBox table tr:first-of-type td {
    border-top: none;
}

.formBox table th {
    width: 30%;
    font-weight: 500;
    vertical-align: middle;
    background: none;
    position: relative;
    line-height: 1;
    padding: 29px 20px;
}

.formBox table td {
    position: static;
    padding: 18px 20px;
    vertical-align: middle;
}

.formBox table th p,
.formBox table td p {
    margin-bottom: 0 !important;
}

.formBox table th span {
    display: block;
    font-size: 12px;
    background: #999;
    color: var(--white);
    margin-left: 1rem;
    padding: 3px 5px 5px;
    line-height: 1;
    display: inline-block;
    /* position: absolute;
    inset: 0 0 0 auto; */
    height: fit-content;
}

.formBox table th span.req {
    background: var(--red);
}

.formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.formBox select,
.formBox textarea {
    font-size: 16px;
    padding: 0 5px;
    width: 100%;
	border: 1px solid var(--gray);
    box-sizing: border-box;
    /* border-boxを指定する際は環境によっては見えなくなるのでheightを指定しないか、十分なheightを指定する */
    background: #fff;
    border-radius: 0;
    width: 100%;
}

.formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.formBox select {
    min-height: 40px;
}

.formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"])::placeholder,
.formBox textarea::placeholder {
	color: var(--silver);
    font-weight: 400;
}

.formBox input[name="your-name"],
.formBox input[name="your-tel"],
.formBox input[name="your-email"] {
    width: 100% !important;
    max-width: 100%;
}

.formBox input[name="your-add"] {
    width: 100% !important;
}

.formBox select {
    width: 300px;
}

.formBox .accept {
    border-radius: 6px;
    text-align: center;
    padding: 20px;
    /* margin: 30px 0; */
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.formBox .accept .wpcf7-list-item-label {
    font-size: 16px;
    font-weight: 500;
}

.formBox .accept input[type="checkbox"] {
    vertical-align: text-bottom;
}

.formBox .accept small {
    display: inline-block;
    line-height: 1;
    font-size: 14px;
    margin-top: 0.35em;
}

.formBox .accept small a {
    color: var(--main-color01);
}


.formBox input[type="checkbox"],
.formBox input[type="radio"] {
    transform: scale(1.5);
    margin: 0 6px 0 0;
}

.formBox input[type="submit"],
.searchBox input[type="submit"] {
    border: 0;
    display: block;
	background: var(--sub-color01);
	color: var(--white) !important;
    font-size: 16px;
    font-weight: 700;
    width: 200px;
    outline: 2px solid transparent;
    box-sizing: border-box;
    margin: 20px auto;
    padding: 17px 0;
    /* align-items: center; */
    line-height: 1;
    position: relative;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 6px #002143;
    transition: 0.3s ease;
}

.formBox .submit {
    text-align: center;
}

.formBox input[type="submit"]:disabled {
    color: var(--white) !important;
    cursor: default;
    background: #ccc;
    box-shadow: 0 3px #bbb;
    transition: all 0.3s ease;
}

.formBox .wpcf7-spinner {
    display: none !important;
	margin: 5px auto 0;
}
.submitting .formBox .wpcf7-spinner {
    display: block !important;
}

.formBox .wpcf7-list-item-label {
    vertical-align: text-bottom;
}

.formBox input[readonly="readonly"] {
    background: #f3f3f3 !important;
    color: #555;
    width: 100% !important;
}

.formBoxNotes {
    padding-left: 1em;
    text-indent: -1em;
}

/* -----------------------------------------------------------
    .single 投稿系共通
----------------------------------------------------------- */
.single-content {
    margin: 20px 0 0;
}

.single .infoBox {
    margin-bottom: 20px;
}

.infoBox h1 {
    /* text-align: center; */
    font-size: 30px;
    font-weight: 700;
    /* padding: 38px 50px; */
    padding: 1.266em 1.666em;
    margin: 100px 0 20px;
    line-height: 1.2;
    border-top: 4px solid var(--sub-color01);
    border-bottom: 4px solid var(--sub-color01);
}

.infoBox h1 b {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.6em;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    width: fit-content;
    margin: 0 auto 1.111em;
    padding: 0.555em 1.111em;
    color: var(--white);
    background: var(--sub-color01);
    gap: 5px 1em;
}

.infoBox h1 b span {
    display: block;
}

.infoBox h1 b span:empty {
    display: none;
}

.infoBox h1 small {
    display: flex;
    font-size: 0.6em;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    width: fit-content;
    margin: 1.5em auto 0;
    color: var(--white);
    gap: 0 1em;
    background: #222;
    padding: 10px 30px 12px;
}

.infoBox h1 b + small {
    margin-top: 1.111em;
}

.infoBox h1 small span {
    display: block;
}

.infoBox h1 small span:empty {
    display: none;
}

.single .infoBox .time {
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    line-height: 1;
}

.single .worksDetailsContent {
    margin: 60px 0 60px;
}

.single .worksDetailsContent th {
    width: 27%;
}

.single .worksPhotosContent ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin: 0;
    /* padding: 0 60px; */
}

.single .worksPhotosContent li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    /* height: 100%; */
    /* aspect-ratio: 47 / 34; */
}

.single .worksPhotosContent ul > * a {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.single .worksPhotosContent li a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
    /* aspect-ratio: 47 / 34; */
}

.single .worksPhotosContent ul span.img {
    display: block;
    width: 100%;
    /* border: 1px solid var(--sub-color02); */
    background: var(--white);
    box-sizing: border-box;
    overflow: hidden;
    aspect-ratio: 47 / 34;
}

.single .worksPhotosContent ul span.img a {
    display: block;
    width: 100%;
    height: 100%;
}

.single .worksPhotosContent li span.img > img {
    max-width: 100%;
    height: 100%;
    object-fit: none;
    display: block;
    margin: auto;
}

/*----- lightbox関連 -----*/
a.colorbox,
a[rel='lightbox'] {
    display: block;
    position: relative;
    transition: 0.3s ease;
    z-index: 1;
}

a.colorbox:hover,
a[rel='lightbox']:hover {
    opacity: 0.8;
}

a.colorbox:hover img,
a[rel='lightbox']:hover img {
    opacity: 1;
}

a.colorbox::before,
a[rel='lightbox']::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f002";
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;

    width: 2.5em;
    height: 2.5rem;
    font-size: 1rem;
    border-top-left-radius: 3px;
    box-sizing: border-box;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    transition: 0.3s ease;
    z-index: 2;
}

/* -----------------------------------------------------------
    wysiwyg
----------------------------------------------------------- */
.wysiwyg * {
    /* word-break: break-word; */
    /* font-weight: 500; */
}

.wysiwyg strong {
    font-weight: 900;
}

.wysiwyg img {
    max-width: 100%;
    height: auto;
}

.wysiwyg p {
    margin: 0 0 15px 0;
    line-height: 2.18;
}

.wysiwyg p a,
.wysiwyg th a,
.wysiwyg td a {
        color: var(--main-color01);
    text-decoration: underline;
    text-underline-offset: 8px;
    transition: 0.3s ease;
}

.wysiwyg a:hover {
    opacity: 0.8;
}

.wysiwyg h2, .h2 {
    font-size: 26px;
    border-top: 3px solid var(--main-color01);
    border-bottom: 3px solid var(--main-color01);
    padding: 0.7em 1.5em;
    margin: 30px 0;
}

.wysiwyg * + h2 {
    margin-top: 4rem;
}

.wysiwyg h3, .h3 {
    font-size: 22px;
    color: var(--white);
    background: var(--sub-color01);
    padding: 0.7em 1.5em;
    margin: 30px 0;
}

.wysiwyg h4, .h4 {
    font-size: 20px;
    color: var(--white);
    background: var(--main-color01);
    padding: 0.5em 1.5em;
    margin: 30px 0;
}

.wysiwyg h5, .h5 {
    font-size: 18px;
    border-top: 2px solid #666;
    border-bottom: 2px solid #666;
    padding: 0.5em 1.5em;
    margin: 30px 0;
}

.wysiwyg h6, .h6 {
    font-size: 16px;
    border-bottom: 3px double #666;
    padding: 0.5em 1.5em;
    margin: 30px 0;
}

.wysiwyg blockquote {
    border: 1px dotted #000;
    background: #eee;
    padding: 40px;
    margin: 30px 0;

    /* background: #f6f6f6;
    padding: 1.875em 3.125em;
    margin-bottom: 1em;
    border: 1px dotted var(--body-text-color);
    --bc: var(--body-text-color);
    background-image:
        linear-gradient(to right, var(--bc), var(--bc) 1px, transparent 1px, transparent 3px),
        linear-gradient(to bottom, var(--bc), var(--bc) 1px, transparent 1px, transparent 3px),
        linear-gradient(to left, var(--bc), var(--bc) 1px, transparent 1px, transparent 3px),
        linear-gradient(to top, var(--bc), var(--bc) 1px, transparent 1px, transparent 3px);
    background-size: 3px 1px, 1px 3px, 3px 1px, 1px 3px;
    background-position: left top, right top, right bottom, left bottom;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y; */
}

.wysiwyg blockquote p {
    margin: 0;
}

:where(.wysiwyg) ul {
    margin: 0 0 15px 0;
}

:where(.wysiwyg ul) li {
    list-style: none;
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
}

:where(.wysiwyg ul) li::before {
    content: '';
    display: block;
    left: 8px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: var(--main-color01);
    position: absolute;
}


.wysiwyg ol {
    counter-reset: my-counter;
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.wysiwyg ol li {
    list-style: none;
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 36px;
    position: relative;
}

.wysiwyg ol li:before {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: var(--main-color02);
    color: var(--white);
    display: block;
    float: left;
    line-height: 28px;
    margin-left: -36px;
    text-align: center;
    height: 28px;
    width: 28px;
    border-radius: 50%;
}

.wysiwyg table {
    width: 100%;
    /* margin: 1rem 0; */
}

.wysiwyg * + table {
    margin-top: 2rem;
}

.wysiwyg table caption {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    padding-bottom: 15px;
}

.wysiwyg table caption strong {
    font-weight: 700;
    display: inline-block;
    color: var(--white);
    background: var(--main-color01);
    padding: 1px 5px 3px;
    margin-right: 0.5rem;
    text-align: center;
    min-width: 90px;
}

.wysiwyg table th,
.wysiwyg table td {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    vertical-align: top;
    position: relative;
    border: 1px solid #ddd;
}

.wysiwyg table th {
    width: 27%;
    background: #eee;
    font-weight: 400;
}

.wysiwyg iframe {
    width: 100%;
    height: 500px;
}

/* -----------------------------------------------------------
    #blog.single 
----------------------------------------------------------- */
#blog.single .wysiwyg {
    background: var(--white);
    padding: 60px;
}

/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */
.footerAdd {
    background-color: #e7f5ff;
    padding-top: 60px;
	padding-bottom: 30px;
}
.footerAdd .inner div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-bottom: 50px;
}
.footerAdd p {
    font-size: 16px;
    text-align: center;
}
.footerAdd p a{
	color:inherit;
}

.footerMenu {
    background-color: var(--main-color01);
    padding-top: 30px;
    padding-bottom: 150px;
}

footer a {
    color: var(--white);
    text-decoration: none;
}

.ftrNav {
    padding: 20px 0;
}

.ftrNav .wide {
    display: flex;
    justify-content: flex-start;
    gap: 0 200px
}

/*----- .ftrNavSitemap -----*/
.ftrNavSitemap {
    margin: 35px 0 100px;
    display: flex;
    justify-content: space-between;
    gap: 0 60px;
}

.ftrNavSitemap > ul {
    display: block;
    font-size: 16px;
    line-height: 2.14;
}

.ftrNavSitemap li {
    font-size: 16px;
    position: relative;
    line-height: 2.5;
}

.ftrNavSitemap li ul {
    display: block;
}

.ftrNavSitemap > ul > li {
    padding-left: 1em;
}

.ftrNavSitemap > ul > li::before {
    content: "─";
    margin-right: 0.5em;
    color: var(--white);
}

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

footer .ftrContent {
    font-size: 14px;
}

footer .ftrContent > .wide {
    display: flex;
    justify-content: space-between;
}

.ftrLogo {
    display: block;
}

.ftrLogo + h3 {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color01);
    margin-bottom: 1em;
}

.ftrContent dl {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    gap: 10px;
    margin: 20px 0;
}

.ftrContent dl > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
}

.ftrContent dl dt {
    background: var(--main-color01);
    color: var(--white);
    border-radius: 4px;
    text-align: center;
    padding: 0 10px;
}

.ftrSNS {
    display: flex;
    justify-content: center;
    background: #005a9f;
    gap: 40px;
    margin-top: 50px;
    padding: 20px 0;
}

footer .copyRight {
    float: none;
    clear: both;
    font-size: 14px;
    color: var(--white);
    width: 100%;
    text-align: center;
}

.ftrBnr01 {
    width: fit-content;
    display: block;
    margin: 20px 20px 10px auto;
}

.ftrBnr01 li + li {
    margin-top: 10px;
}

.ftrBnr01 li {
    width: fit-content;
    display: block;
}

.ftrBnr01 li a {
    display: block;
    width: fit-content;
}

.ftrFabWrapper {
    position: fixed;
    right: 0;
    bottom: 0;
    width: fit-content;
    height: fit-content;
    z-index: 100;
}

.pageTop {
    margin: 0 20px 0 auto;
    width: fit-content;
    height: fit-content;
    opacity: 0;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.scrolled .pageTop {
    opacity: 1;
}

.pageTop a {
    display: block;
    background: #00345b;
    transition: all 0.3s ease;
}

.pageTop a:hover {
    opacity: 0.8;
}

/*----- .ftrTelContact -----*/
.ftrTelContactWrapper {
    display: flex;
    align-items: center;
    opacity: 0;
    z-index: 10;
    background: #fff;
    transition: all 0.5s ease;
    position: fixed;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 1100px;
    box-sizing: border-box;
    pointer-events: none;
}

.scrolled .ftrTelContactWrapper {
    opacity: 1;
    pointer-events: auto;
    width: 1100px;
}

.ftrTelContact {
    display: flex;
    align-items: center;
    width: 100%;
    /* width: fit-content;
    height: fit-content; */
}

.ftrTelContact a {
    transition: 0.3s ease;
}

.hdrTelContact a:hover {
    opacity: 0.7;
}

.ftrTelContact > * {
    color: var(--white);
    line-height: 1;
}

.ftrTel {
    display: flex;
    align-items: center;
    margin-right: auto;
    /* background: var(--main-color02); */
}

.ftrTel .tel {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 16px;
    color: var(--black);
    justify-content: center;
    align-items: center;
    margin-right: auto;
}

.ftrTel .tel i[class*="fa-"] {
    font-size: 27px;
    margin-right: 0.25em;
}

.ftrTel span.tel-link {
    font-size: 34px;
    font-weight: 700;
    color: var(--main-color01);
    letter-spacing: -0.02em;
    padding-right: 10px;
    margin-left: 25px;
}

.ftrTel .tel-link img {
    vertical-align: text-bottom;
    margin-right: 0.5rem;
}

.ftrTel .tel-open {
    font-size: 14px;
    font-weight: 500;
    margin-top: 0;
    line-height: 22px;
}

.ftrContact {
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    width: 200px;
    box-sizing: border-box;
    margin: 20px 20px 20px 0;
    padding: 17px 0 17px 65px;
    background: var(--main-color01);
    align-items: center;
    line-height: 1;
    position: relative;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 0 3px #af1406;
}

.ftrContact small {
    display: block;
    background: var(--white);
    color: var(--main-color01);
    border: 2px solid #af1406;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 12px 4px;
    margin-bottom: 10px;
    position: absolute;
    left: 30px;
    top: 0;
    transform: translateY(-50%);
    line-height: 1;
    /* width: 100%; */
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
}

.ftrContact small::before,
.ftrContact small::after {
    content: "";
    position: absolute;
    transform: translate(-50%, 100%);
    left: 50%;
    bottom: 0;
}

.ftrContact small::before {
    border-top: #af1406 11px solid;
    border-left: transparent 5px solid;
    border-right: transparent 5px solid;
}

.ftrContact small::after {
    border-top: var(--white) 9px solid;
    border-left: transparent 3px solid;
    border-right: transparent 3px solid;
}

.ftrContact img {
    position: absolute;
    top: 0;
    left: 15px;
    bottom: 0;
    margin: auto 0;
}

.ftrLine {
    background-color: var(--line-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
}

.ftrLine img {
    width: auto;
    height: 36px;
    margin-bottom: 10px;
}

.wysiwyg #toc_container ul li{
	line-height: 2;
}
.wysiwyg #toc_container ul li::before{
	content: none;
}
/* H1 */
.wysiwyg #toc_container > ul > li > a{
	font-weight: 700;
	color: unset;
}
/* H2 */
.wysiwyg #toc_container > ul > li > ul > li > a{
	position: relative;
	padding-left: 1.5em;
}
.wysiwyg #toc_container > ul > li > ul > li > a::before{
    content: '';
    display: block;
    left: 8px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #999;
    position: absolute;
}
/* H3 */
.wysiwyg #toc_container > ul > li > ul > li > ul > li > a{
	position: relative;
	padding-left: 1em;
}
.wysiwyg #toc_container > ul > li > ul > li > ul > li > a::before,
.wysiwyg #toc_container > ul > li > ul > li > ul > li > a::after{
	content: "";
	position: absolute;
	top: calc(50% - 1.5px);
	left: 0;
	width: 10px;
	height: 3px;
	border-radius: 9999px;
	background-color: #999;
	transform-origin: calc(100% - 1.5px) 50%;
	transform: rotate(45deg);
}
.wysiwyg #toc_container > ul > li > ul > li > ul > li > a::after{
	transform: rotate(-45deg);
}
/* H4 */
.wysiwyg #toc_container > ul > li > ul > li > ul > li > ul > li > a::before{
	content: '－ ';
}
/* H5 */
.wysiwyg #toc_container > ul > li > ul > li > ul > li > ul > li> ul > li > a::before{
	content: '・ ';
}