/*
Theme Name: 輸入車エアコン(yunyusha-aircon)
Description: 輸入車に特化したカーエアコン修理の集客ページサンプルです。
Theme URI: https://yunyusha-aircon.grace-sample.com
Author: 株式会社GRACE
Author URI: https://gr1.jp/
Version: 1.0
License: GPL
License URI: https://www.gnu.org/copyleft/gpl.html
*/

@charset "utf-8";

/* ==============================================
 Reset & Base（前提スタイル）
=============================================== */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
main,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

nav ul,
ul,
ol {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
}

a {
    background: transparent;
    color: currentColor;
    text-decoration: none;
    font-size: 100%;
    vertical-align: baseline;
}

a:hover {
    opacity: .6;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    color: #000;
    font-weight: bold;
    background: linear-gradient(transparent 50%, #fdf991 50%);
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #c1c1c1;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

span {
    vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
em {
    font-weight: inherit;
}

* {
    box-sizing: border-box;
    text-decoration: none;
    font-style: normal;
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* ==============================================
 Font Utility
=============================================== */
.serif {
    font-family: "Noto Serif JP", serif;
    letter-spacing: .05em;
}

.sans {
    font-family: sans-serif;
}

.oswald {
    font-family: "Oswald", sans-serif;
}

.luxu {
    font-family: "Luxurious Script", cursive;
}

/* ==============================================
 Utility & Common
=============================================== */
:root {
    --grayColor: #ccc;
    --margin: clamp(0px, 2vw, 24px);
}

@media screen and (max-width: 767px) {
    :root {
        --hambWidth: clamp(48px, 1.28vw, 98px);
        --margin: 15px;
    }
}

.common__container {
    width: 1200px;
    max-width: calc(100vw - (var(--margin)*2));
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 767px) {
    .common__container {
        /*width: 540px;*/
    }
}


.common__inner {
    margin-right: var(--margin);
    margin-left: var(--margin);
}

.common__em {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--accColor);
}

.cmn__maker-banner {
    position: relative;
    height: clamp(0px, 10vw, 192px);
    background: #000;
    max-width: 100vw;
    overflow-x: hidden;
}

.cmn__maker-banner::after {
    content: "";
    display: block;
    position: absolute;
    top: var(--margin);
    width: 300%;
    bottom: var(--margin);
    left: 0;
    background: url(images/makericons.png) repeat-x left/50vw;
    opacity: .6;
    animation: slide 60s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.common__nowrap {
    display: inline-block;
    white-space: nowrap;
}

.common__button {
    display: block;
    border: 1px solid #fff;
    background: #fff;
    color: #000;
    padding: 1em;
    font-weight: 700;
    font-size: 20px;
    transition: all .2s;
    line-height: 1;
    width: max-content;
    margin: 0 auto;
    box-shadow: 0 0 10px #0004;
    min-width: 200px;
    text-align: center;
}

.common__button:hover {
    color: #fff;
    background: var(--accColor);
    opacity: 1;
}

.common__social {
    display: flex;
    align-items: center;
    gap: var(--margin);
}

.common__social__link {
    width: 32px;
    height: auto;
}

.common__social__icon {
    object-fit: contain;
}


@media screen and (max-width: 767px) {
    .common__social {
        max-width: 440px;
        justify-content: space-evenly;
        width: 80%;
        margin: auto;
    }
}

.section__header {
    position: relative;
    margin-left: var(--margin);
}

@media screen and (min-width: 1201px) {
    .section__header {
        margin-left: calc(50vw - 600px);
    }
}

.section__title {
    position: relative;
}

.section__title--en {
    font-family: "Oswald", sans-serif;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 120px;
    opacity: .5;
    line-height: 1;
    align-content: center;
    font-weight: 800;
    color: var(--grayColor);
    text-align: left;
}

.section__title--small {
    font-size: .5em;
}

.section__title--jp {
    position: relative;
    font-size: clamp(40px, 5vw, 60px);
    display: block;
    margin-left: 120px;
    border-width: 0 0 1px 0;
    font-weight: 800;
    z-index: 1;
    padding-top: 1em;
}


.section__description {
    font-size: 22px;
    font-weight: 500;
    margin-top: 40px;
}

.light .section__title--jp {
    text-shadow: .1em .1em .5em #fff8;
    border-bottom: #000 solid 1px;
}

.dark .section__title--jp {
    text-shadow: .1em .1em .5em #0008;
    color: #fff;
    border-bottom: #fff solid 1px;
}

.dark .section__description {
    color: #fff;
}

.note {
    font-size: 12px;
    font-weight: bold;
    color: var(--accColor);
    display: inline-block;
}

.bg-faq {
    background:
        linear-gradient(to bottom, transparent 40vw, #eee 70vw),
        url(images/common_faq_bg.jpg)no-repeat center top/100%;
}

.bg-case {
    position: relative;
    background: linear-gradient(#0004, #0004),
        url(images/works_bg.jpg) no-repeat left center / cover;
    background-attachment: fixed;
    color: #fff;
}


@media screen and (max-width: 767px) {
    .bg-case {
        padding: 64px 0;
        background: linear-gradient(to bottom, transparent, var(--mainColor) 130vw, #000), url(images/works_bg.jpg) no-repeat top left / 200%;
    }
}

/* ==============================================
 Layout & Responsive
=============================================== */
html {
    background-attachment: fixed;
    position: relative;
}

body {
    position: relative;
    font-size: 16px;
    font-family: "Noto Serif JP", serif;
    background: #fff;
}

img,
svg {
    display: block;
    width: 100%;
    height: 100%;
}

img {
    object-fit: cover;
}

svg {
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    body {
        font-size: 14px;
    }

    .cmn__maker-banner {
        height: clamp(0px, 20vw, 150px);
    }

    .cmn__maker-banner::after {
        background-size: 100vw;
    }

    .common__button {
        font-size: 14px;
    }

    .section__header {
        margin-left: 0;
        width: 100%;
        max-width: calc(100vw - (var(--margin) * 2));
        margin-right: auto;
        margin-left: auto;
    }

    .section__title--en {
        font-size: 15vw;
        text-align: center;
        position: relative;
        width: 100%;
        display: block;
        margin-bottom: -.5em;
    }

    .section__title--jp {
        font-size: 8vw;
        margin: 0 auto;
        width: 70%;
        text-align: center;
        padding-top: 0;
    }

    .section__title--small {
        display: block;
    }

    .section__description {
        font-size: 16px;
        margin-top: 32px;
    }
}

@media screen and (min-width: 768px) {
    .sp {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

/* ==============================================
 ctabtn
=============================================== */
.cta__link {
    display: block;
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px;
    align-content: center;
    overflow: hidden;
    position: relative;
    transition: filter .2s;
}

.cta__link:hover {
    opacity: 1;
    filter: brightness(1.4);
}

.cta__link::after {
    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: overlay;
    background: linear-gradient(to right, #fffd 50%, transparent 0);
    animation: ctashine 5s linear infinite;
    pointer-events: none;
}

@keyframes ctashine {

    0%,
    45% {
        transform: skewX(-45deg) translateX(-150%);
    }

    55%,
    100% {
        transform: skewX(-45deg) translateX(150%);
    }
}

.cta__icon {
    display: block;
    align-content: center;
    aspect-ratio: 1/1;
}

.cta__tel-icon {
    width: 1.5em;
}

.cta__mail-icon {
    width: 1.5em;
}

.cta__tel-link {
    background: linear-gradient(to bottom, transparent, #FFF4 50%, transparent 0, #000b), var(--accColor);
}

.cta__mail-link {
    background: linear-gradient(to bottom, transparent, #FFF4 50%, transparent 0, #000b), var(--subColor);
}

.cta__tel-num,
.cta__mail-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2em;
}

.cta__tel-num-bold {
    font-weight: 800;
    font-size: 1.2em;
    letter-spacing: .05em;
    line-height: 1.2;
}

.cta__tel-info {
    font-size: .6em;
}

.cta__mail-text {
    font-weight: 800;
}

.cta__mail-text2 {
    font-size: .7em;
    text-align: center;
}

/* モバイル用 cta__link__wrapper, header__cta */
@media screen and (max-width: 767px) {
    .header .cta__link__wrapper {
        padding-bottom: 0;
        aspect-ratio: 1 / 1;
        height: 100%;
    }

    .header .cta__link__wrapper:hover {
        margin-top: 0;
    }

    .header__cta {
        font-size: 24px;
    }

    .header .cta__link {
        aspect-ratio: 1/1;
        border: 1px solid #fff;
        padding: 0;
    }

    .cta__tel-icon,
    .cta__mail-icon {
        width: 36px;
    }
}

/* ==============================================
 breadcrumb
=============================================== */
.common__breadcrumb {
    padding: 20px 0 15px 0;
}

.breadcrumb__nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.breadcrumb__nav--link {
    text-decoration: underline;
    white-space: nowrap;
    color: var(--mainColor);
}

.breadcrumb__nav--link:hover {
    text-decoration: none;
}

.breadcrumb__nav--item {
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    white-space: nowrap;
    gap: 5px;
}

.breadcrumb__nav--item+.breadcrumb__nav--item::before {
    content: ">";
}

.breadcrumb__nav--current__title {
    width: 100%;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media screen and (max-width: 767px) {
    .common__breadcrumb {
        padding-top: 15px;
        padding-bottom: 10px;
    }
}

/* ==============================================
 Header
=============================================== */
.header {
    background: #000;
    border-bottom: #fff solid .5px;
}

body:has(#hum:checked) .header {
    position: fixed;
    top: 0;
    z-index: 9999;
    pointer-events: all;
}


body:has(#hum:checked) .header__cta {
    display: none;
}

body:has(#hum:checked) .header__site-title {
    max-width: calc(100vw - 2em - var(--margin) - (var(--hambWidth)));
}

.header__flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.header__site-description {
    background: #eee;
    width: 100vw;
    overflow-x: hidden;
    height: 20px;
    align-content: center;
}

.header__site-description__text {
    font-size: 14px;
    max-width: 100%;
    display: flex;
    position: relative;
    line-height: 1.2;
    width: max-content;
    max-width: none;
    font-size: 8px;
    white-space: nowrap;
    animation: headerslide 60s linear infinite;
}

.header__site-description__text::before,
.header__site-description__text::after {
    content: attr(data-text);
    position: absolute;
}

.header__site-description__text::before {
    transform: translateX(-100%);
}

.header__site-description__text::after {
    transform: translateX(100%);
}

@keyframes headerslide {
    0% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.header__site-icon {
    width: 2em;
    height: 2em;
}

.header__home-link {
    color: #fff;
    display: grid;
    width: max-content;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 3px;
}

.header__site-title__business {
    display: block;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.header__site-title__store-name {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.header__gnav {
    flex-grow: 1;
    display: flex;
    justify-content: right;
}

.header__gnav__content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: max-content;
}

.header__gnav__link {
    align-content: center;
    padding: 12px 0;
}

.header__gnav__text {
    color: #fff;
    text-align: center;
    padding: 0 10px;
}

.header__gnav__text--jp {
    font-size: 12px;
    font-weight: 700;
}

.header__gnav__text--en {
    font-size: 8px;
}

.header__gnav__link.current {
    background: #fff;
    border: none;
}

.header__gnav__link.current .header__gnav__text {
    color: var(--accColor);
}

.header__gnav__link+.header__gnav__link .header__gnav__text {
    border-left: 1px solid #fff;
}

.header__gnav__link.current+.header__gnav__link .header__gnav__text {
    border: none;
}

.header__cta {
    display: grid;
    grid-template-columns: repeat(2, auto);
    margin-right: calc(var(--margin) * -1);
    border: 1px solid #fff;
}

/* ハンバーガーメニュー */
.header__hum {
    top: 15px;
    z-index: 10000;
    position: sticky;
    width: 100%;
    display: block;
    mix-blend-mode: difference;
}

.header__hum:has(:checked) {
    pointer-events: all;
    position: fixed;
}

.header__hum__content {
    width: var(--hambWidth);
    aspect-ratio: 1/1;
    display: grid;
    gap: 5px 0;
    align-content: center;
    border: 2px solid #fff;
    top: 0;
    right: 0;
    position: absolute;
}

.header__hum:has(:checked) .header__hum__content {
    background: #fff;
}

.header__hum__icon {
    position: relative;
    width: 50%;
    aspect-ratio: 3/2;
    margin: 0 auto;
}

.header__hum__bar {
    position: absolute;
    display: block;
    background: #fff;
    height: 2px;
    right: 0;
    left: 0;
    transition: all .5s;
}

.header__hum:has(:checked) .header__hum__bar {
    background: #000;
}

.header__hum__bar--top {
    top: 0;
}

.header__hum__bar--mid {
    top: 50%;
    transform: translateY(-50%);
}

.header__hum__bar--btm {
    top: 100%;
    transform: translateY(-100%);
}

.header__hum:has(#hum:checked) .header__hum__bar--top {
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
}

.header__hum:has(#hum:checked) .header__hum__bar--mid {
    opacity: 0;
}

.header__hum:has(#hum:checked) .header__hum__bar--btm {
    top: 50%;
    transform: translateY(-50%) rotate(225deg);
}

.header__hum__label {
    position: relative;
}

.header__hum__label-text {
    display: block;
    color: #fff;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    transition: opacity .2s;
}

.header__hum:has(#hum:checked) .header__hum__label-text {
    color: #000;
}

.header__hum__label-close {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.header__hum:has(#hum:checked) .header__hum__label-menu {
    opacity: 0;
}

.header__hum:has(#hum:checked) .header__hum__label-close {
    opacity: 1;
}

/* レスポンシブ */
@media screen and (max-width: 1400px) {
    .header__site-title {
        max-width: calc(100vw - 2em - var(--margin) - (var(--hambWidth)*3));
    }

    .header__flex-layout {
        display: grid;
        grid-template-columns: 1fr max-content;
    }

    .header__gnav {
        grid-row: 2/3;
        grid-column: 1/3;
        justify-content: center;
        margin: 0 calc(-1 * var(--margin));
    }

    .header__gnav__content {
        width: 100%;
    }

    .header__gnav__text--en {
        display: none;
    }

    .header__gnav__text--jp {
        font-size: 14px;
    }
}

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

    .header__site-description {
        height: 15px;
    }

    .header__site-description__text {
        font-size: 10px;
    }

    .header__flex-layout {
        display: flex;
        margin-right: calc(var(--hambWidth) - 1px);
        height: var(--hambWidth);
    }

    .header__content {
        margin-left: var(--margin);
        margin-right: 0;
    }

    .header__site-title__business {
        font-size: clamp(14px, 3.6vw, 18px);
    }

    .header__site-title__store-name {
        font-size: 10px;
    }

    .header__gnav {
        display: none;
    }

    .header__cta .cta__text {
        display: none;
    }
}

/* ==============================================
 hummenu(SPのみ)
=============================================== */
.hummenu {
    display: none;
}

@media screen and (max-width: 767px) {
    .hummenu {
        position: fixed;
        top: calc(var(--hambWidth) + 15px);
        left: 0;
        width: 100vw;
        height: 0;
        background: #000d;
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: all .5s;
    }

    body:has(#hum:checked) .hummenu {
        opacity: 1;
        pointer-events: all;
        height: calc(100vh - (var(--hambWidth) + 15px));
        overflow-y: auto;
    }

    body:has(#hum:checked) {
        padding-top: calc(var(--hambWidth) + 15px);
    }

    html:has(#hum:checked),
    body:has(#hum:checked) {
        height: 100vh !important;
        overflow-y: hidden !important;
        pointer-events: none;
    }

    .hummenu__header {
        position: sticky;
        top: 0;
        background: #000;
        align-content: center;
        z-index: 1;
        border-bottom: 1px solid #fff;
    }

    .hummenu__header .header__site-title {
        height: var(--hambWidth);
        max-width: calc(100vw - var(--margin) - var(--hambWidth));
        align-content: center;
    }

    .hummenu__gnav {
        margin-top: 20px;
    }

    .hummenu__gnav__content {
        display: grid;
    }

    .hummenu__gnav__link {
        border-bottom: 1px solid #fff;
        padding: 1em 0;
        font-size: 18px;
    }

    .hummenu__gnav__link.current {
        pointer-events: none;
        background: #fff;
    }

    .hummenu__gnav__text {
        color: #fff;
        display: flex;
        align-items: center;
        max-width: 480px;
        width: 90%;
        margin: auto;
        gap: 10px;
        font-size: 16px;
        font-weight: 600;
    }

    .hummenu__gnav__link.current .hummenu__gnav__text {
        color: var(--accColor);
        font-weight: 700;
    }

    .hummenu__gnav__text::before {
        content: "-";
    }

    .hummenu__gnav__text--en {
        font-size: .8em;
        display: flex;
        align-items: center;
        gap: .2em;
        margin-left: auto;
    }

    .hummenu__gnav__text--en::before {
        content: "/";
    }

    .hummenu__contact__buttons {
        font-size: 5vw;
    }

    .hummenu__social {
        margin: 64px 0 40px 0;
    }

    .hummenu__copyright {
        margin-top: auto;
        color: #fff;
        background: #000;
        text-align: center;
        font-size: 10px;
        padding: .5em 0;
        border-top: 1px solid #fff;
    }
}

/* ==============================================
 mv
=============================================== */
.top-mv {
    background:
        linear-gradient(110deg, var(--mainColor) calc(100%/3), var(--mc-trans1) 0, var(--mc-trans1) 42%, var(--mc-trans2) 0, var(--mc-trans2) 50%, transparent 0) no-repeat left / cover,
        url(images/mv_bg_pc.jpg) no-repeat right/80%;
    width: 100%;
    position: relative;
}

.top-mv__content {
    padding: 40px 0;
    width: max-content;
    display: grid;
    gap: 20px;
}

.top-mv__grid-layout {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 24px;
    width: max-content;
}

.top-mv__description {
    font-size: clamp(0px, 1.66vw, 20px);
    text-shadow: .2em .2em .2em #0008;
    color: #fff;
    font-weight: 800;
}

.top-mv__area {
    color: var(--subColor);
    background: #fff;
    font-weight: 800;
    padding: .2em .5em;
    text-shadow: none;
    margin-right: .4em;
}

.top-mv__business {
    font-size: 1.4em;
}

.top-mv__text-wrapper {
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.top-mv__features {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.top-mv__feature-item {
    display: flex;
    color: #fff;
    font-weight: 700;
    align-items: center;
    transform: skewX(-15deg);
    padding: .5em .4em;
    background: #000;
    box-shadow: .2em .2em 0 #fff;
}

.top-mv__feature-icon {
    display: block;
    width: 2em;
    height: 2em;
    aspect-ratio: 1/1;
}

.top-mv__strengths {
    /* display: flex;
    align-items: center; */
    gap: .2em;
    font-size: clamp(0px, 2.5vw, 30px);
    color: #fff;
    font-weight: 700;
}

.top-mv__strengths--em {
    font-size: 1.6em;
    line-height: 1;
}

.top-mv__strengths--strong {
    font-weight: 800;
    color: #000;
    line-height: 1;
    transform: scaleX(.88);
    transform-origin: left;
}

.top-mv__strengths--stroke {
    -webkit-text-stroke: #fff .15em;
    paint-order: stroke;
    text-shadow: none;
}

.top-mv__strengths--italic {
    display: inline-block;
    /* transform: skew(-10deg, -5deg); */
    transform: skew(-10deg, 0deg);
    position: relative;
    bottom: .1em;
    padding-right: .2em;
    /* background: url(images/mv_mark_shine.png) no-repeat right top .1em / 1em; */
    /* font-size: 3em; */
    font-size: 2em;
}

.top-mv__issues {
    display: flex;
    font-size: clamp(0px, 1vw, 12px);
    gap: 1em;
}

.top-mv__issue-item {
    white-space: nowrap;
    background: var(--accColor);
    padding: .5em .5em .6em;
    margin-bottom: 1em;
    position: relative;
    color: #fff;
    font-weight: 700;
}

.top-mv__text-shadow {
    text-shadow: 0 0 .2em #000, 0 0 .2em #000;
}

.top-mv__text02 {
    font-size: clamp(0px, 2.66vw, 32px);
    color: #fff;
    font-weight: 700;
    position: relative;
    text-align: center;
}

.top-mv__dot {
    font-size: 1.2em;
    padding-top: .6em;
    line-height: 1;
    position: relative;
    margin-right: .1em;
}

.top-mv__dot::before {
    content: "・";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}

.top-mv__text--strong {
    position: relative;
    font-size: 1.2em;
    margin: 0 -.4em;
    line-height: 1.2;
    padding-left: 1em;
}

.top-mv__text--strong::before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    left: .5em;
    background: url(images/mv_mark_tangle.png) no-repeat center/contain;
    position: absolute;
}

.top-mv__emphasis {
    font-size: 1.6em;
    line-height: 1.4;
    color: var(--subColor);
    font-weight: 800;
}

/* PCワイド */
@media screen and (min-width: 1921px) {
    .top-mv {
        background-size: 75%;
    }
}

/* SP用 */
@media screen and (max-width: 767px) {
    .top-mv {
        background:
            linear-gradient(170deg, #fff, var(--mainColor) 15%, transparent 40%) no-repeat left / cover,
            url(images/mv_bg_sp.jpg) no-repeat bottom /cover,
            var(--mainColor);
    }

    .top-mv__content {
        padding: 10px 0;
        width: 100%;
        height: 140vw;
    }

    .top-mv__grid-layout {
        display: flex;
        flex-direction: column;
        gap: .5vw;
        align-items: center;
        width: 100%;
    }

    .top-mv__description {
        font-size: 2.8vw;
        display: flex;
        align-items: center;
        gap: .2em;
    }

    .top-mv__strengths--italic {
        /* font-size: 2.5em; */
        font-size: 1.7em;
        position: relative;
        left: .1em;
        line-height: 1.3;
    }

    .top-mv__features {
        margin-top: 0;
        z-index: 1;
        gap: 5px;
        margin-bottom: 3vw;
    }

    .top-mv__feature-item {
        font-size: 4vw;
    }

    .top-mv__text-wrapper {
        gap: 2vw;
        align-items: center;
        text-align: center;
    }

    .top-mv__strengths {
        position: relative;
        display: block;
        font-size: 7vw;
        margin-bottom: 10px;
    }

    .top-mv__strengths--strong:first-child {
        margin-right: .1em;
    }

    .top-mv__strengths--italic01,
    .top-mv__strengths--italic02 {
        font-size: 2em;
        line-height: 1;
        background-position: right top;
        background-size: .9em;
        left: .1em;
    }

    .top-mv__issues {
        font-size: 2.2vw;
        display: grid;
        gap: 0;
        grid-template-columns: repeat(2, 1fr);
        position: absolute;
        bottom: 24vw;
        right: 0;
    }

    .top-mv__issue-item {
        aspect-ratio: 1 / 1;
        border-radius: 100px;
        align-content: center;
        text-align: center;
        margin-bottom: .5em;
        border: 1px solid #fff;
    }

    .top-mv__issue-item:nth-child(odd) {
        bottom: 6vw;
    }

    .top-mv__issue-item:nth-child(even) {
        top: 2vw;
    }

    .top-mv__text02 {
        position: absolute;
        font-size: 5vw;
        padding: 0;
        bottom: .5em;
    }
}

/* ==============================================
 page title
=============================================== */

.page__mv {
    background: url(images/page_mv_bg.jpg) no-repeat center/cover;
    background-attachment: fixed;
    position: relative;
}

.page__mv::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: var(--mainColor);
    mix-blend-mode: color-burn;
    opacity: .6;
}

.page__title {
    position: relative;
    height: 280px;
    align-content: center;
}

.page__title__text {
    font-size: 40px;
    line-height: 1;
    text-align: center;
    display: block;
    align-content: center;
}

.page__title__jp {
    position: relative;
    font-weight: 800;
    z-index: 1;
    color: #fff;
    letter-spacing: .05em;
    text-shadow: var(--mainColor) 0 0 .2em, var(--mainColor) 0 0 .2em;
}

.page__title__en {
    font-family: "Oswald", sans-serif;
    font-weight: 800;
    user-select: none;
    font-size: 160px;
    position: absolute;
    inset: 0;
    margin-bottom: var(--margin);
    color: transparent;
    -webkit-text-stroke: #fff8 1px;
}

.privacy-policy__mv .page__title__en {
    font-size: clamp(64px, 13vw, 130px);
}

@media screen and (max-width: 767px) {
    .page__mv {
        background-attachment: unset;
    }

    .page__title {
        height: clamp(120px, 21vw, 160px);
    }

    .privacy-policy__mv .page__title {
        height: 160px;
    }

    .page__title__text {
        font-size: 24px;
    }

    .page__title__en {
        font-size: 64px;
        position: relative;
        margin-bottom: -.2em;
    }
}

/* ==============================================
 bottom-common（ページ共通セクション）
=============================================== */

/* --- FAQ Section --- */
.btmCmnFaq {
    border-top: var(--mainColor) 10px solid;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.btmCmnFaq__list {
    max-width: 1000px;
    margin: 80px auto 0;
}

.btmCmnFaq__item {
    border-bottom: 1px solid var(--mainColor);
}

.btmCmnFaq__item+.btmCmnFaq__item {
    border-top: #fff 1px solid;
}

.btmCmnFaq__item:last-child {
    border-bottom: 1px solid var(--mainColor);
}

.btmCmnFaq__item-question--wrapper {
    background: linear-gradient(to bottom, transparent, #000000b3);
    background-color: var(--mainColor);
    color: #fff;
    padding: 1em var(--margin);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s;
}

.btmCmnFaq__item-question {
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    gap: 0.5em;
}

.btmCmnFaq__item-question::before {
    content: "Q.";
    font-size: 2em;
    font-family: "Oswald", sans-serif;
    padding-bottom: 0.2em;
}

.btmCmnFaq__item:has(:checked) .btmCmnFaq__item-question--wrapper {
    background-color: var(--accColor);
}

/* Accordion Plus Icon */
.btmCmnFaq__accordion__plus {
    position: relative;
    width: 20px;
    height: 20px;
    aspect-ratio: 1 / 1;
}

.btmCmnFaq__accordion__plus__bar {
    position: absolute;
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.5s;
}

.btmCmnFaq__accordion__plus__verticalBar {
    transform: translateY(-50%) rotate(90deg);
}

.btmCmnFaq__item:has(:checked) .btmCmnFaq__accordion__plus__horizontalBar {
    transform: translateY(-50%) rotate(180deg);
}

.btmCmnFaq__item:has(:checked) .btmCmnFaq__accordion__plus__verticalBar {
    transform: translateY(-50%) rotate(360deg);
}

/* Accordion Answer */
.btmCmnFaq__item-answer {
    height: auto;
    max-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--mainColor);
    border-left: 1px solid var(--mainColor);
    background: #fff;
    padding: 0;
    transition: all 0.5s;
    position: relative;
    opacity: 0;
}

.btmCmnFaq__item:has(:checked) .btmCmnFaq__item-answer {
    max-height: 400px;
    padding-top: var(--margin);
    padding-bottom: var(--margin);
    opacity: 1;
}

.btmCmnFaq__item-answer__title {
    font-size: 24px;
    color: var(--accColor);
    font-weight: 800;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.btmCmnFaq__item-answer__title::before {
    content: "A.";
    font-size: 2em;
    font-family: "Oswald", sans-serif;
    padding-bottom: 0.2em;
}

.btmCmnFaq__item-answer__text {
    margin-top: 10px;
    overflow-y: scroll;
    position: relative;
}

.btmCmnFaq__item-answer__text::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: 40px;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, transparent, #fff);
}

/* Accordion Close Button */
.btmCmnFaq__accordion--close {
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid #000;
    font-size: 16px;
    margin: 20px auto 0;
    display: block;
    width: max-content;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.btmCmnFaq__accordion--close:hover {
    color: var(--accColor);
    border-color: var(--accColor);
}

.btmCmnFaq__accordion--close:active {
    border-bottom: none;
}

.btmCmnFaq__link {
    margin-top: 64px;
}

/* --- Works Section --- */
.btmCmnWorks {
    position: relative;
    background:
        linear-gradient(to top, #fff, #fff0 120px),
        url(images/works_bg.jpg) no-repeat left center/cover;
    background-attachment: fixed;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(80px, 13.33vw, 160px);
}

.btmCmnWorks__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--subColor);
    mix-blend-mode: hue;
    opacity: 0.6;
}

.btmCmnWorks::after {
    content: "";
    display: block;
    position: absolute;
    height: 80px;
    right: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, #fff);
}

/* --- Voice Section --- */
.btmCmnVoice {
    padding: clamp(40px, 6.66vw, 80px) 0;
    position: relative;
}

.btmCmnVoice__content {
    margin-top: 64px;
}

/* --- Map Section --- */
.btmCmnMap {
    padding-top: clamp(40px, 6.66vw, 80px);
}

.btmCmnMap__header {
    position: relative;
    box-shadow: 0 10px 10px #0002;
    padding-bottom: var(--margin);
}

.btmCmnMap__footer {
    position: relative;
    box-shadow: 0 -10px 10px #0002;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.btmCmnMap__title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}

.btmCmnMap__description {
    font-weight: 700;
    font-size: 20px;
}

.btmCmnMap__details {
    border: #000 1px solid;
    min-height: 80px;
    align-content: center;
    margin-top: var(--margin);
    padding: var(--margin) 0;
}

.btmCmnMap__note {
    margin-top: var(--margin);
}

/* --- Contact Section --- */
.btmCmnContact {
    background: var(--mainColor);
    --codex: 40px;
}

.btmCmnContact__header {
    padding-top: 40px;
    padding-bottom: var(--codex);
    background: linear-gradient(#0008, #0008),
        url(images/page_mv_bg.jpg) no-repeat center/cover;
    background-attachment: fixed;
    position: relative;
}

.btmCmnContact__header::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: var(--mainColor);
    mix-blend-mode: color-burn;
    opacity: .6;
}

.btmCmnContact__title {
    position: relative;
    padding-bottom: var(--codex);
    align-content: center;
}

.btmCmnContact__title__text {
    font-size: 24px;
    line-height: 1;
    text-align: center;
    display: block;
    align-content: center;
}

.btmCmnContact__title__strong {
    font-size: 1.4em;
    font-weight: 800;
}

.btmCmnContact__title__en {
    font-size: 160px;
    line-height: 1em;
    top: 0;
    bottom: 0;
    width: 100%;
    -webkit-text-stroke: #fff8 1px;
    color: transparent;
    font-weight: 800;
    z-index: -1;
}

.btmCmnContact__content {
    background: var(--grayColor);
}

.btmCmnContact__title__jp {
    color: #fff;
    position: relative;
    text-shadow: var(--mainColor) 0 0 0.2em, var(--mainColor) 0 0 0.2em, var(--mainColor) 0 0 0.2em;
}

.btmCmnContact__title__jp .note {
    color: #fff;
    margin-top: 20px;
}

.btmCmnContact__box {
    background: #fff;
    max-width: 100%;
    position: relative;
    bottom: var(--codex);
    width: max-content;
    margin-right: auto;
    margin-left: auto;
    padding: 40px;
    border-radius: 2px;
    box-shadow: 0 0 20px #0004;
}

.btmCmnContact__info {
    text-align: center;
}

.btmCmnContact__location {
    font-size: 28px;
    font-weight: 700;
}

.btmCmnContact__message {
    font-size: 32px;
    font-weight: 700;
}

.btmCmnContact__store-name {
    font-weight: 800;
    position: relative;
    white-space: nowrap;
    font-size: 1.5em;
}

.btmCmnContact__strong-message {
    font-size: 1.3em;
    line-height: 1.8;
    background: var(--accColor);
    color: #fff;
    font-weight: 800;
    padding: 0 0.5em 0.1em;
    white-space: nowrap;
    margin: 0 0.1em;
}

.btmCmnContact__store-name::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--accColor);
    mask: url(images/naminami.png) repeat-x center bottom / 0.5em;
    transform: translateY(0.2em);
}

.btmCmnContact__inquiry {
    width: max-content;
    max-width: 100%;
    margin: 40px auto 0;
}

.btmCmnContact__final-message {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

.btmCmnContact__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--margin);
    font-size: clamp(24px, 2.66vw, 32px);
    margin: 40px auto;
    width: max-content;
}

.btmCmnContact__buttons .cta__link {
    box-shadow: 0 0 20px #0006;
    border-width: 2px;
}

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

    .btmCmnContact__header {
        background: url(images/page_mv_bg.jpg) no-repeat center/cover;
        background-attachment: unset;
    }

    .btmCmnMap__description {
        text-align: center;
    }

    .btmCmnFaq__list {
        margin-top: 40px;
    }

    .btmCmnFaq__link {
        margin-top: 32px;
    }

    .btmCmnFaq__item-question {
        font-size: 16px;
    }

    .btmCmnFaq__item-answer__title {
        font-size: 18px;
    }


    .btmCmnWorks {
        padding-top: 64px;
        /*background-attachment: inherit;*/
        background:
            linear-gradient(to bottom, transparent, var(--mc-trans2) 130vw, #000),
            linear-gradient(to bottom, transparent, #000 130vw),
            url(images/works_bg.jpg) no-repeat top left / 200%;
    }

    .btmCmnVoice__content {
        margin-top: 24px;
    }

    .btmCmnContact__location {
        font-size: 18px;
    }

    .btmCmnContact__message {
        font-size: 24px;
    }

    .btmCmnContact__box {
        padding: var(--margin);
    }

    .btmCmnContact__store-name {
        font-size: 1.2em;
    }

    .btmCmnContact__strong-message {
        font-size: 1.1em;
    }

    .btmCmnContact__inquiry,
    .btmCmnContact__final-message {
        width: 100%;
    }

    .btmCmnContact__inquirt--strong {
        font-weight: 700;
    }

    .btmCmnContact__title__text {
        font-size: 4.4vw;
    }

    .btmCmnContact__title__en {
        font-size: 80px;
        -webkit-text-stroke: #fff8 2px;
    }

    .btmCmnContact__buttons {
        font-size: 6vw;
        grid-template-columns: 100%;
    }
}


/* ==============================================
 front-page
=============================================== */

.top-intro {
    background:
        linear-gradient(to right, transparent 10%, #fffd 33%),
        url(images/top_intro_bg.jpg)no-repeat center/cover;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
    border-bottom: 10px solid #000;
}

.top-intro__text {
    font-size: clamp(24px, 2.66vw, 32px);
    text-align: center;
    font-weight: 700;
    line-height: 1.3;
}

.top-intro__text--strong {
    font-size: 1.4em;
    line-height: 1.3;
    margin: 0 .1em;
}


.top-intro__models {
    background: linear-gradient(to bottom, transparent, #00131C),
        var(--subColor);
    max-width: 720px;
    padding: 48px 40px;
    position: relative;
    margin-top: 64px;
    margin-right: auto;
    margin-left: auto;
}

.top-intro__models-title {
    color: #fff;
    font-size: clamp(20px, 2.66vw, 32px);
    text-align: center;
    font-weight: 600;
    padding: .2em 1em;
    position: relative;
    z-index: 1;
    display: block;
    width: max-content;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.top-intro__models-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--subColor);
    z-index: -1;
    transform: skew(-20deg);
    box-shadow: 0 4px 8px #000000b0;
}


.top-intro__models-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.3;
}

.top-intro__models-item {
    white-space: nowrap;
    color: #fff;
    font-size: 36px;
    font-size: clamp(18px, 2.33vw, 28px);
}

.top-intro__models-item rt {
    text-align: center
}

.top-intro__models-item:not(:last-child)::after {
    content: "・";
}

.top-intro__message {
    font-size: clamp(16px, 2.66vw, 32px);
    text-align: center;
    color: #fff;
}


.top-message {
    background: #fff;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.top-message__content {
    margin-top: 64px;
    display: flex;
    gap: 0 var(--margin);
    align-items: center;

    width: 1200px;
    max-width: calc(100vw - (var(--margin) * 2));
    margin-right: auto;
    margin-left: auto;
    position: relative;
}


.top-message__text {
    width: calc(60% - var(--margin));
}

.top-message__figure {
    position: relative;
    z-index: 1;
    width: 40%;
}

.top-message__figure::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translate(var(--margin), var(--margin));
    background: var(--grayColor);
    z-index: -1;
}

@media screen and (max-width: 767px) {
    .top-intro {
        background:
            linear-gradient(to bottom, #fffd 33%, transparent 66%),
            url(images/top_intro_bg.jpg)no-repeat center/cover;
    }

    .top-intro__models {
        padding: 24px;
        padding-top: 40px;
    }

    .top-message__content {
        display: block;
        margin-top: 0;
        position: relative;
        padding-top: 10vw;
    }

    .top-message__content::before {
        content: "";
        display: block;
        width: 100vw;
        aspect-ratio: 3/2;
        margin-left: calc(var(--margin) * -1);
        margin-bottom: -60%;
        background: url(images/top_reason_img01.jpg)no-repeat center/cover;
        mask: linear-gradient(to bottom, #fff, transparent);
    }

    .top-message__text {
        max-width: 540px;
        background: #fffe;
        position: relative;
        z-index: 1;
        padding: var(--margin);
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .top-message__figure {
        display: none;
    }
}

/*top-troubles*/

.top-troubles {
    background: var(--mainColor);
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.troubles__header {
    text-align: center;
}

.troubles__header-text {
    color: #fff;
    font-weight: 700;
    font-size: clamp(20px, 3.33vw, 40px);
}

.troubles__store-name {
    font-size: 1.2em;
    background: var(--subColor);
    padding: .1em 1em .2em;
    min-height: 350px;
    margin-right: 5px;
}

.troubles__title {
    color: #fff;
    font-size: 36px;
    line-height: 1.1;
    margin-top: 20px;
    font-weight: 700;
}

.troubles__title--strong {
    font-size: 1.3em;
}

.troubles__title--em {
    font-size: 1.6em;
    position: relative;
}

.troubles__title--em::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--accColor);
    mask: url(images/naminami.png) repeat-x center bottom / .5em;
    transform: translateY(.2em);
}

.troubles__title--em::before {
    content: "";
    display: block;
    width: .5em;
    height: .5em;
    left: -.45em;
    top: 0;
    background: url(images/mv_mark_tangle.png) no-repeat center / contain;
    position: absolute;
}

.troubles__subtitle {
    color: #fff;
    font-size: clamp(24px, 3.6vw, 36px);
    display: flex;
    gap: 0 var(--margin);
    align-items: center;
    margin-top: clamp(0px, 6.66vw, 80px);
}

.troubles__subtitle::before,
.troubles__subtitle::after {
    content: "";
    display: block;
    height: 5px;
    flex-grow: 1;
    background: var(--subColor);
}

.troubles__list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--margin);
    margin-top: clamp(0px, 8vw, 96px);
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

.troubles__item {
    display: grid;
    justify-content: center;
    background: #fff;
    border-radius: 1000px;
    aspect-ratio: 1/1;
    align-content: center;
    text-align: center;
    max-width: 30vw;
    max-height: 30vw;
}

.troubles__item__text {
    font-size: clamp(0px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1em;
}


.troubles__item__text--strong {
    font-size: 1.26em;
    line-height: 1.2;
}

.troubles__icon {
    color: #F00;
    width: clamp(0px, 14vw, 168px);
    height: clamp(0px, 14vw, 168px);
    aspect-ratio: 1/1;
    margin-right: auto;
    margin-left: auto;
}



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

    .troubles__title {
        font-size: 32px;
    }

    .troubles__subtitle {
        margin-top: 40px;
    }

    .troubles__list {
        margin-top: 32px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .troubles__item {
        width: 224px;
        height: 160px;
        max-width: inherit;
        max-height: inherit;
    }

    .troubles__item__text {
        font-size: 16px;
    }

    .troubles__icon {
        width: 80px;
        height: 80px;
    }
}

.troubles__icon__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--subColor);
}

.troubles__other {
    margin-top: clamp(0px, 12vw, 144px);
    border: 2px solid #fff;
    background: #0008;
    position: relative;
    padding: 60px 60px 48px 60px;
}

.troubles__other-text {
    font-size: clamp(18px, 3.6vw, 36px);
    text-align: center;
    color: #fff;
    position: absolute;
    padding: .2em 1em;
    width: max-content;
    margin-right: auto;
    margin-left: auto;
    top: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-weight: 500;
    line-height: 1.25;
}

.troubles__other-text--strong {
    font-size: 1.33em;
    font-weight: 700;
    line-height: 1.25;
}

.troubles__other-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--subColor);
    z-index: -1;
    transform: skew(-20deg);
}

.troubles__other-list {
    width: max-content;
    margin-right: auto;
    margin-left: auto;
}

.troubles__other-item {
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .2em;
    font-weight: 600;
}

.troubles__other-item::before {
    content: "";
    display: block;
    width: 1.5em;
    height: 2em;
    background: var(--accColor);
    mask: url(images/checkicon.png)no-repeat center/contain;
}

.troubles__outro {
    font-size: clamp(24px, 3.6vw, 36px);
    color: #fff;
    text-align: center;
    line-height: 1.4;
    font-weight: 800;
    margin-top: 80px;
}

.troubles__outro--em {
    background: var(--accColor);
    font-size: 1.2em;
    margin-right: .2em;
    padding: 0 .5em;
    line-height: 1.4;
}

.troubles__outro--strong {
    font-size: 62px;
}


@media screen and (max-width: 767px) {
    .troubles__other-item {
        font-size: 3.6vw;
    }

    .troubles__other {
        padding: 20px;
        padding-top: 60px;
        margin-top: 80px;
    }

    .troubles__outro {
        margin-top: 40px;
    }

    .troubles__outro--strong {
        font-size: 34px;
    }
}

/*top-menu*/
.top-menu__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    align-items: stretch;
    margin-top: 64px;
}

.top-menu__item {
    color: #fff;
    display: flex;
    align-items: stretch;
    position: relative;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size .5s;
}

.top-menu__item:hover {
    background-size: 140%;
}

.top-menu__item--gas {
    background-image: url(images/menu_bg01.jpg);
}

.top-menu__item--compressor {
    background-image: url(images/menu_bg02.jpg);
}

.top-menu__item--pipe {
    background-image: url(images/menu_bg03.jpg);
}

.top-menu__item--filter {
    background-image: url(images/menu_bg04.jpg);
}

.top-menu__item::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #0009;
    transition: all .5s;
    opacity: 1;
    pointer-events: none;
}

.top-menu__item:hover::before {
    background: #0002;
    backdrop-filter: blur(5px);
}

.top-menu__service-link {
    padding: var(--margin);
}

.top-menu__service-link:hover {
    opacity: 1;
}

.top-menu__item__content {
    position: relative;
    --kagi-size: 40px;
    padding: var(--margin);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.top-menu__item__content::before,
.top-menu__item__content::after {
    content: "";
    position: absolute;
    display: block;
    width: var(--kagi-size);
    height: var(--kagi-size);
    border-color: #fff;
    border-style: solid;
}

.top-menu__item__content::before {
    top: 0;
    left: 0;
    border-width: 3px 0 0 3px;
}

.top-menu__item__content::after {
    bottom: 0;
    right: 0;
    border-width: 0 3px 3px 0;
}

.top-menu__item__detail {
    color: #000;
    margin-top: auto;
    display: block;
    width: 200px;
    margin: 40px auto 0;
    text-align: center;
    padding: .5em var(--margin);
    border: 1px solid #fff;
    transition: all .2s;
    background: #fff;
}

.top-menu__item__detail:hover {
    opacity: .6;
}

.top-menu__item:hover .top-menu__item__detail {
    color: #fff;
    background-color: var(--accColor);
}

@media screen and (max-width: 767px) {
    .top-menu__list {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
        width: max-content;
        gap: 5px;
    }

    .top-menu__item {
        width: 100%;
        max-width: 540px;
        background-size: 140%;
    }

    .top-menu__service-link {
        pointer-events: none;
    }

    .top-menu__item:hover {
        background-size: 160%;
    }

    .top-menu__item__detail {
        pointer-events: all;
        width: 120px;
    }
}

.top-menu {
    background: linear-gradient(to bottom, #fff, #eee);
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}


.top-menu__item__flex-box {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    gap: var(--margin);
}

.top-menu__item-detail {
    margin-top: 40px;
}


.menu__icon {
    width: 20%;
    aspect-ratio: 1/1;
}

.top-menu__item__text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.top-menu__item-title {
    display: block;
    font-size: clamp(0px, 2vw, 24px);
    line-height: 1.2;
    height: 2.4em;
    align-content: center;
    font-weight: 700;
}

.top-menu__item-description {
    margin-top: 10px;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .top-menu__item-title {
        font-size: 5vw;
    }
}

/*top-reason*/
.top-reason {
    border-top: var(--subColor) 10px solid;
    background: #fff;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.reason__content {
    margin-top: 64px;
    display: flex;
    gap: 0 var(--margin);
    align-items: center;
}

.reason__figure {
    order: -1;
    position: relative;
    z-index: 1;
    width: 40%;
}

.reason__figure::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translate(calc(-1*var(--margin)), var(--margin));
    background: var(--grayColor);
    z-index: -1;
}

.reason__text-content {
    width: calc(60% - var(--margin));
}

.reason__sub-title {
    font-size: 1.4em;
    font-weight: 700;
}

.reason__sub-title__big {
    font-size: 1.6em;
    color: #fff;
    display: inline-block;
    width: 1.6em;
    text-align: center;
    aspect-ratio: 1/1;
    background: #000;
    margin-right: .1em;
}

.reason__text {
    margin-top: var(--margin);
}

.reason__text+.reason__sub-title {
    margin-top: 64px;
}

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


    .reason__content {
        display: block;
        margin-top: 20px;
        position: relative;
        padding-top: 10vw;
    }

    .reason__content::before {
        content: "";
        display: block;
        width: 100vw;
        aspect-ratio: 3/2;
        margin-left: calc(var(--margin) * -1);
        margin-bottom: -60%;
        background: url(images/top_reason_img01.jpg) no-repeat center / cover;
        mask: linear-gradient(to bottom, #fff, transparent);
    }

    .reason__text-content {
        max-width: 540px;
        background: #fffe;
        position: relative;
        z-index: 1;
        padding: var(--margin);
        width: 100%;
        margin-right: auto;
        margin-left: auto;

    }

    .top-message__text {
        max-width: 540px;
        background: #fffe;
        position: relative;
        z-index: 1;
        padding: var(--margin);
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .reason__figure {
        display: none;
    }
}

/*top-strengths*/
.top-strengths {
    position: relative;
    background: url(images/top_strengths_bg.jpg)no-repeat center/cover;
    background-attachment: fixed;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.strengths__title {
    color: #fff;
    font-size: clamp(0px, 2.66vw, 32px);
    text-align: center;
    font-weight: 600;
    padding: .2em 1em;
    position: relative;
    z-index: 1;
    display: block;
    width: max-content;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.strengths__title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accColor);
    z-index: -1;
    transform: skew(-20deg);
    box-shadow: 0 4px 8px #000000b0;
}

.strengths__title--num {
    font-size: 6em;
    line-height: .1;
    padding-bottom: .2em;
    display: inline-block;
    margin-right: .05em;
    -webkit-text-stroke: .03em var(--accColor);
    paint-order: stroke;
}

.strengths__list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    counter-reset: strengths__item 0;
    margin-top: 64px;
}

.strengths__item {
    width: 24%;
    background: #fff;
    padding: var(--margin);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    padding-top: 10em;
    position: relative;
}

.strengths__item::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--accColor);
    top: 15%;
}


.strengths__item-title {
    font-size: 24px;
    font-weight: 600;
    height: 3.2em;
    align-content: center;
    text-align: center;
}

.strengths__item-text {
    margin-top: var(--margin);
}

.strengths__item-number {
    position: absolute;
    top: 0;
    display: flex;
    font-size: 80px;
    color: #fff;
    width: max-content;
    background: var(--accColor);
    font-size: 160px;
    padding-right: .1em;
    width: .5em;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .2em), 0 100%);
    left: 50%;
    transform: translateX(-50%);
    line-height: .8;
    padding-bottom: .2em;
}

.strengths__item-number::before,
.strengths__item-number::after {
    content: "";
    display: block;
    height: 2px;
    flex-grow: 1;
    background: var(--accColor);
    align-items: center;
}

@media screen and (max-width: 1199px) {
    .top-strengths {
        background-attachment: inherit;
    }

    .strengths__title {
        font-size: 24px;
    }

    .strengths__list {
        justify-content: center;
        gap: 40px 20px;
        margin-top: 40px;
    }

    .strengths__item {
        width: 400px;
        padding-top: 4.5em;
    }

    .strengths__item-number {
        left: 15%;
        line-height: .65;
        padding-bottom: .3em;
    }

    .strengths__item-title {
        text-align: left;
        margin-left: 27%;
    }

    .strengths__item::before {
        top: 10%;
    }
}

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

    .strengths__item {
        width: 350px;
    }
}

/*top-service*/
.top-service {
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.top-service__content {
    margin-top: 80px;
}


.top-service__label {
    font-size: 36px;
    text-align: center;
}

.top-service__label__text {
    font-weight: 700;
}

.top-service__label__name {
    color: var(--accColor);
    background: #fff;
    padding: .1em 1em;
    font-weight: 700;
}

.top-service__title {
    font-size: 64px;
    font-weight: 800;
    text-align: center;
}

.top-service__title--strong {
    position: relative;
}

.top-service__title--strong::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--accColor);
    mask: url(images/naminami.png)repeat-x center bottom/.5em;
    transform: translateY(.2em);
}

.top-service__list {
    flex-wrap: wrap;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px var(--margin);
    align-items: stretch;
    max-width: 1020px;
    margin: auto;
}


.top-service__item {
    width: 100%;
    display: grid;
    gap: calc(var(--margin)/2);
}

.top-service__item-figure {
    order: -2;
}

.top-service__item-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}


@media screen and (max-width: 767px) {
    .top-service__label {
        font-size: 5vw;
    }

    .top-service__title {
        font-size: 8vw;
    }

    .top-service__content {
        margin-top: 40px;
        padding: 40px 20px 80px;
    }

    .top-service__list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .top-service__item {
        width: 300px;
        padding: var(--margin);
        border-radius: 2px;
        box-shadow: 0 0 20px #0004;
    }

    .top-service__item-figure {
        aspect-ratio: 2/1;
    }
}

/* ==============================================
初めての方へページ(page-guest)
=============================================== */
.guest__main {}

/*guest-troubles*/


.guest-troubles__intro-text {
    font-weight: 700;
    font-size: 20px;
}

.guest-troubles {
    background: linear-gradient(to bottom, #fff, var(--grayColor));
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.guest-troubles__header {
    text-align: center;
}

.guest-troubles__store-name {
    color: #fff;
    font-size: clamp(20px, 3.33vw, 40px);
    background: var(--subColor);
    padding: .1em 1em .2em;
    min-height: 350px;
    font-weight: 700;
}

.guest-troubles__title {
    font-size: 36px;
    line-height: 1.1;
    margin-top: 20px;
    font-weight: 700;
}

.guest-troubles__title--strong {
    font-size: 1.3em;
}

.guest-troubles__title--em {
    font-size: 1.6em;
    position: relative;
}

.guest-troubles__title--em::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--accColor);
    mask: url(images/naminami.png)repeat-x center bottom/.5em;
    transform: translateY(.2em);
}


.guest-troubles__title--em::before {
    content: "";
    display: block;
    width: .5em;
    height: .5em;
    left: -.45em;
    top: .2em;
    background: #000;
    mask: url(images/mv_mark_tangle.png) no-repeat center / contain;
    position: absolute;
}

.guest-troubles__subtitle {
    font-size: clamp(24px, 3.6vw, 36px);
    display: flex;
    gap: 0 var(--margin);
    align-items: center;
    margin-top: clamp(0px, 6.66vw, 80px);
}

.guest-troubles__subtitle::before,
.guest-troubles__subtitle::after {
    content: "";
    display: block;
    height: 5px;
    flex-grow: 1;
    background: var(--subColor);
}

.guest-troubles__list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--margin);
    margin-top: clamp(0px, 8vw, 96px);
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

.guest-troubles__item {
    display: grid;
    justify-content: center;
    background: #000;
    color: #fff;
    border-radius: 1000px;
    aspect-ratio: 1/1;
    align-content: center;
    text-align: center;
    max-width: 30vw;
    max-height: 30vw;
}

.guest-troubles__item__text {
    font-size: clamp(0px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1em;
}


.guest-troubles__item__text--strong {
    font-size: 1.26em;
    line-height: 1.2;
}

.guest-troubles__icon {
    color: #FF0;
    width: clamp(0px, 14vw, 168px);
    height: clamp(0px, 14vw, 168px);
    aspect-ratio: 1/1;
    margin-right: auto;
    margin-left: auto;
}



@media screen and (max-width: 767px) {
    .guest-troubles__title {
        font-size: 32px;
    }

    .guest-troubles__subtitle {
        margin-top: 40px;
    }

    .guest-troubles__list {
        margin-top: 32px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .guest-troubles__item {
        width: 224px;
        height: 160px;
        max-width: inherit;
        max-height: inherit;
    }

    .guest-troubles__item__text {
        font-size: 16px;
    }

    .guest-troubles__icon {
        width: 80px;
        height: 80px;
    }
}

.guest-troubles__icon__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--subColor);
}


.guest-troubles__other {
    margin-top: clamp(0px, 12vw, 144px);
    border: 2px solid #000;
    position: relative;
    padding: 60px 60px 48px 60px;
}

.guest-troubles__other-text {
    font-size: clamp(18px, 3.6vw, 36px);
    text-align: center;
    position: absolute;
    color: #fff;
    padding: .2em 1em;
    width: max-content;
    margin-right: auto;
    margin-left: auto;
    top: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-weight: 500;
    line-height: 1.25;
}

.guest-troubles__other-text--strong {
    font-size: 1.33em;
    font-weight: 700;
    line-height: 1.25;
}

.guest-troubles__other-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--subColor);
    z-index: -1;
    transform: skew(-20deg);
}

.guest-troubles__other-list {
    width: max-content;
    margin-right: auto;
    margin-left: auto;
}

.guest-troubles__other-item {
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: .2em;
    font-weight: 600;
}

.guest-troubles__other-item::before {
    content: "";
    display: block;
    width: 1.5em;
    height: 2em;
    background: var(--accColor);
    mask: url(images/checkicon.png)no-repeat center/contain;
}

.guest-troubles__outro {
    font-size: clamp(18px, 3.6vw, 36px);
    text-align: center;
    line-height: 1.4;
    font-weight: 800;
    margin-top: 80px;
}

.guest-troubles__outro--em {
    color: #fff;
    background: var(--accColor);
    font-size: 1.2em;
    margin-right: .2em;
    padding: 0 .5em;
    line-height: 1.6;
}

.guest-troubles__outro--strong {
    font-size: 1.4em;
}


@media screen and (max-width: 767px) {
    .guest-troubles__other-item {
        font-size: 3.6vw;
    }

    .guest-troubles__other {
        padding: 20px;
        padding-top: 60px;
        margin-top: 80px;
    }

    .guest-troubles__outro--strong {
        font-size: 34px;
    }

    .guest-troubles__outro {
        margin-top: 40px;
    }
}

/*guest-attention*/
.guest-attention {
    background: #fff;
    border-top: #000 solid 10px;
    padding-bottom: clamp(60px, 10vw, 120px);
}


.guest-attention__catchcopy {
    margin: auto;
    background-color: #000;
    padding: 40px 0;
    overflow-x: hidden;
}

.guest-attention__catchcopy::before {
    content: "";
    transform: skewX(-30deg);
    display: block;
    height: 40px;
    width: 100%;
    background: linear-gradient(-90deg, #ff0 50%, #000 50%) repeat-x left / 40px;
}

.guest-attention__copy--en {
    color: #f00;
    font-weight: 800;
    font-size: 40px;
    display: block;
}

.guest-attention__copy--jp {
    font-size: 60px;
    font-weight: 800;
    color: #fff;
}

.guest-attention__description {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}

.guest-attention__strong {
    position: relative;
    font-size: 1.4em;
    font-weight: 800;
}

.guest-attention__strong::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--accColor);
    mask: url(images/naminami.png)repeat-x center bottom/.5em;
    transform: translateY(.2em);
}

.guest-attention__content {
    margin-top: 64px;

}

.guest-attention__text {
    width: calc(60% - var(--margin));
}

.guest-attention__flex-box {
    display: flex;
    gap: 0 var(--margin);
    align-items: center;
    width: 1200px;
    max-width: calc(100vw - (var(--margin) * 2));
    margin-right: auto;
    margin-left: auto;
    position: relative;
    margin-top: 64px;
}

.guest-attention__figure {
    position: relative;
    z-index: 1;
    width: 40%;
}

.guest-attention__figure::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translate(var(--margin), var(--margin));
    background: var(--grayColor);
    z-index: -1;
}

@media screen and (max-width: 767px) {
    .guest-attention__text {
        max-width: 540px;
        background: #fffe;
        position: relative;
        z-index: 1;
        padding: var(--margin);
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .guest-attention__content {
        margin-top: 40px;
    }

    .guest-attention__flex-box {
        display: block;
        margin-top: 40px;
        position: relative;
    }

    .guest-attention__flex-box::before {
        content: "";
        display: block;
        width: 100vw;
        aspect-ratio: 3 / 2;
        margin-left: calc(var(--margin) * -1);
        margin-bottom: -60%;
        background: url(images/guest_attention_img01.jpg) no-repeat center / cover;
        mask: linear-gradient(to bottom, #fff, transparent);
    }

    .guest-attention__figure {
        display: none;
    }

    .guest-attention__copy--jp {
        font-size: 24px;
    }

    .guest-attention__description {
        font-size: 18px;
    }
}

/*guest-flow*/

.guest-flow {
    background: var(--mainColor);
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.guest-flow__header {
    color: #fff;
}

.guest-flow__list {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1020px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 80px;
}

.guest-flow__item {
    position: relative;
}

.guest-flow__item:not(:last-child)::after {
    content: "";
    display: block;
    width: 100px;
    height: 50px;
    background: #fff;
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    bottom: 0;
}

.guest-flow__item-title--jp {
    text-shadow: .1em .1em .5em #000;
    border-bottom: #fff solid 1px;
}

.guest-flow__item {
    counter-increment: guest-flow__item 1;
    background: #fff;
}

.guest-flow__flex-box {
    display: flex;
    margin-right: var(--margin);
    margin-left: var(--margin);
    gap: var(--margin);
}

.guest-flow__item:nth-child(even) .guest-flow__figure {
    order: -1;
}

.guest-flow__figure {
    width: 40%;
    aspect-ratio: 1/1;
    background-color: var(--grayColor);
}

.guest-flow__text-content {
    padding: 20px 0 40px;
    width: 60%;
}

.guest-flow__detail {}

.guest-flow__item-title {
    display: flex;
    align-items: center;
    font-size: clamp(24px, 3.33vw, 40px);
    font-weight: 800;
    gap: .4em;
    line-height: 1.2;
}

.guest-flow__item-title::before {
    content: "0" counter(guest-flow__item);
    color: #fff;
    font-family: "Oswald", sans-serif;
    background: #000;
    font-weight: 800;
    aspect-ratio: 1/1;
    display: block;
    width: 1.5em;
    font-size: 2em;
    text-align: center;
    align-content: center;
}

.guest-flow__item-description {
    font-weight: 800;
    padding: .3em;
    margin-bottom: .5em;
    border-bottom: var(--accColor) 2px solid;
    font-size: 20px;
    margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .guest-flow__list {
        gap: 0;
        margin-top: 40px;
    }

    .guest-flow__item-description {
        font-size: 18px;
        line-height: 1.4;
    }

    .guest-flow__item:not(:last-child)::after {
        height: 60px;
        width: 100%;
        z-index: 1;
    }

    .guest-flow__flex-box {
        display: grid;
        margin: 0;
        padding-bottom: 20px;
    }

    .guest-flow__text-content {
        margin-right: var(--margin);
        margin-left: var(--margin);
        display: flex;
        flex-direction: column;
        gap: var(--margin);
        width: inherit;
        padding: 0;
    }

    .guest-flow__figure {
        width: 100%;
        aspect-ratio: 2/1;
        max-height: 240px;
        order: -1;
        position: relative;
    }

    .guest-flow__figure+.guest-flow__figure::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: linear-gradient(to bottom, #0008, transparent 30%);
    }


    .guest-flow__item-title {
        font-size: 24px;
    }

    .guest-flow__item-title::before {
        width: 80px;
        height: 80px;
    }
}

/* ==============================================
 サービスページ（page-service）
=============================================== */

.service-intro {
    background: #fff;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.service-intro__title {
    font-size: clamp(20px, 3.6vw, 36px);
    text-align: center;
    line-height: 1.4;
    font-weight: 800;
}

.service-intro__catchcopy {
    margin: auto;
    background-color: #000;
    padding: 40px 0;
    overflow-x: hidden;
    margin-top: 64px;
}

.service-intro__catchcopy::before {
    content: "";
    transform: skewX(-30deg);
    display: block;
    height: 40px;
    width: 100%;
    background: linear-gradient(-90deg, #ff0 50%, #000 50%) repeat-x left / 40px;
}


.service-intro__copy--en {
    color: var(--accColor);
    font-weight: 800;
    font-size: 40px;
    display: block;
}

.service-intro__copy--jp {
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 800;
    color: #fff;
}

.icon-compressor {
    fill: #fff;
}

.service-intro__description {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin: 32px 0 64px;
}

.service-intro__strong {
    position: relative;
    font-size: 1.4em;
    font-weight: 800;
}

.service-intro__strong::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--accColor);
    mask: url(images/naminami.png)repeat-x center bottom/.5em;
    transform: translateY(.2em);
}

.service-intro__content {
    margin-top: 64px;

}


.service-intro__flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-intro__text {
    width: calc(60% - var(--margin));
}

.service-intro__image {
    position: relative;
    z-index: 1;
    width: 40%;
}

.service-intro__image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translate(var(--margin), var(--margin));
    background: var(--grayColor);
    z-index: -1;
}

.service-menu {
    position: relative;
    background: var(--mainColor);
    padding-top: clamp(40px, 6.66vw, 80px);
}

.service-menu__nav {
    display: flex;
    gap: var(--margin);
    justify-content: center;
    width: max-content;
    max-width: 100%;
    text-align: center;
    margin: auto;
    margin-top: 96px;
}

.service-menu__nav-link {
    display: block;
    width: 200px;
    aspect-ratio: 1/1;
    color: #fff;
    background: #0008;
    position: relative;
    align-content: center;
    transition: background .2s, color .2s;
}

.service-menu__nav-link:hover {
    background: #fff;
    color: #000;
    opacity: 1;
}

.service-menu__nav-link::before,
.service-menu__nav-link::after {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: #fff;
    border-style: solid;
    --kagi-width: 4px;
}

.service-menu__nav-link::before {
    top: -1px;
    left: -1px;
    border-width: var(--kagi-width) 0 0 var(--kagi-width);
}

.service-menu__nav-link::after {
    right: -1px;
    bottom: -1px;
    border-width: 0 var(--kagi-width) var(--kagi-width) 0;
}

.service-menu__nav-icon {
    width: 96px;
    aspect-ratio: 1/1;
    margin: auto;
}

.service-menu__nav-text {
    text-align: center;
    font-weight: 800;
}

.service-menu__list {
    display: grid;
    margin-top: 96px;
}

.service-menu__item {
    color: #fff;
    padding: 40px 0 64px;
    background-attachment: fixed;
}

.service-menu__details {
    display: grid;
    border: 1px solid #000;
    border: #fff solid 1px;
    text-align: center;
    margin-top: 20px;
}

.service-menu__details-title {
    color: #fff;
    background: #000;
    padding: 8px;
}

.service-menu__details-description {
    color: #000;
    background: #fff;
    padding: 8px;
    font-size: 1.2em;
}

.service-menu__note {
    font-size: 14px;
    margin-top: .5em;
}

.service-menu__item:nth-child(odd) {
    background: linear-gradient(to right, #000d calc(100% / 3), #0002 calc(100% / 3 *2)),
        var(--bgImg);
}

.service-menu__item:nth-child(even) {
    background: linear-gradient(to left, #000d calc(100% / 3), #0002 calc(100% / 3 *2)),
        var(--bgImg);
}


.service-menu__item:nth-child(odd),
.service-menu__item:nth-child(even) {
    background-attachment: fixed;
}


.service-menu__item--gas {
    --icon: url(images/service_icon_gas.png)no-repeat center/contain;
    --bgImg: url(images/menu_bg01.jpg)no-repeat center right/cover;
}

.service-menu__item--compressor {
    --icon: url(images/service_icon_compressor.png)no-repeat center/contain;
    --bgImg: url(images/menu_bg02.jpg)no-repeat center/cover;
}

.service-menu__item--pipe {
    --icon: url(images/service_icon_pipe.png)no-repeat center/contain;
    --bgImg: url(images/menu_bg03.jpg)no-repeat center right/cover;
}

.service-menu__item--filter {
    --icon: url(images/service_icon_filter.png)no-repeat center/contain;
    --bgImg: url(images/menu_bg04.jpg)no-repeat center left/cover;
}

.service-menu__item-content {
    width: 50%;
    padding: 20px var(--margin) 40px;
    position: relative;
    --kagi-size: clamp(0px, 10vw, 120px);
}


.service-menu__item-content::before,
.service-menu__item-content::after {
    content: "";
    position: absolute;
    display: block;
    width: var(--kagi-size);
    height: var(--kagi-size);
    border-color: #fff;
    border-style: solid;
}

.service-menu__item-content::before {
    top: 0;
    left: 0;
    border-width: 3px 0 0 3px;
}

.service-menu__item-content::after {
    bottom: 0;
    right: 0;
    border-width: 0 3px 3px 0;
}

.service-menu__item:nth-child(odd) .service-menu__item-content {
    margin-right: auto;
}

.service-menu__item:nth-child(even) .service-menu__item-content {
    margin-left: auto;
}

.service-menu__item-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.service-menu__icon {
    width: clamp(64px, 10vw, 120px);
    aspect-ratio: 1/1;
    color: #fff;
}

.service-menu__menu-name {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.4;
}

.service-menu__item-description {
    display: block;
    font-weight: 700;
    line-height: 1.4;
}

.service__text__highlight {
    display: inline-block;
    background: linear-gradient(to bottom, transparent 40%, var(--subColor) 40%);
    font-weight: 700;
    padding: 0 .2em .1em;
    font-size: 1.2em;
    white-space: nowrap;
}

.service-menu__item-detail {
    margin-top: 40px;
}

.service-menu__cta {
    margin-top: 40px;
}

.service-menu__cta-text {
    color: #fff;
    font-weight: 700;
    display: flex;
    gap: .5em;
    justify-content: center;
    font-size: 22px;
}

.service-menu__cta-text::before,
.service-menu__cta-text::after {
    content: "";
    display: block;
    height: 1.5em;
    width: 2px;
    position: relative;
    background: #fff;
    top: .2em;
}

.service-menu__cta-text::before {
    transform: rotate(-25deg);
}

.service-menu__cta-text::after {
    transform: rotate(25deg);
}

.service-menu__contact-link {
    margin-top: 10px;
    font-size: 18px;
}

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

    .service-intro__figure {
        display: none;
    }

    .service-intro__copy--jp {
        font-size: 20px;
    }

    .service-intro__description {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .service-intro__catchcopy {
        margin-top: 40px;
    }

    .service-intro__flex-box {
        display: block;
        margin-top: 40px;
        position: relative;
    }

    .service-menu__note {
        font-size: 12px;
    }

    .service-intro__flex-box::before {
        content: "";
        display: block;
        width: 100vw;
        aspect-ratio: 3 / 2;
        margin-left: calc(var(--margin) * -1);
        margin-bottom: -60%;
        background: url(images/service_intro_img01.jpg) no-repeat center / cover;
        mask: linear-gradient(to bottom, #fff, transparent);
    }

    .service-intro__text {
        max-width: 540px;
        background: #fffe;
        position: relative;
        z-index: 1;
        padding: var(--margin);
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }


    .service-intro__image {
        display: none;
    }

    .service-menu__item-header {
        align-items: center;
        position: relative;
        gap: 10px;
    }

    .service-menu__item-detail {
        margin-top: 30px;

    }

    .service-menu__nav-link::before,
    .service-menu__nav-link::after {
        --kagi-width: 2px;
    }

    .service-menu__nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 60px;
    }

    .service-menu__nav-icon {
        width: 64px;
    }

    .service-menu__nav-link {
        width: 160px;
    }

    .service-menu__list {
        margin-top: 64px;
    }
}

.service-price {
    background: linear-gradient(to bottom, #fff, var(--grayColor));
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.service-price__content-wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 24px;
}

.service-price__brands {
    height: max-content;
    position: sticky;
    top: 24px;
}

.service-price__brands-list {
    display: grid;
    grid-template-columns: 100%;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.service-price__brands-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: #000;
    align-content: center;
    height: 64px;
    text-align: center;
    font-size: clamp(12px, 1.5vw, 18px);
    font-weight: 700;
    padding: .5em 1em;
    gap: .5em;
}


.service-price__brands-link::after {
    content: "▼";
    font-size: .8em;
}


.service-price__brands-item+.service-price__brands-item {
    border-top: 1px solid #fff;
}

.service-price__comparison {
    display: grid;
    grid-template-columns: 100%;
    gap: 80px;
}

.service-price__catch {
    font-weight: 700;
    font-size: 20px;
}

.service-price__brand-comparison {
    background: #fff;
    padding-bottom: clamp(40px, 6.66vw, 80px);
    border-radius: 2px;
    overflow: hidden;
}

.service-price__brand-comparison--bmw {
    --makerIcon: url(images/maker-logo_bmw_white.png);
}

.service-price__brand-comparison--benz {
    --makerIcon: url(images/maker-logo_benz_white.png);
}

.service-price__brand-comparison--audi {
    --makerIcon: url(images/maker-logo_audi_white.png);
}

.service-price__brand-comparison--vw {
    --makerIcon: url(images/maker-logo_vw_white.png);
}

.service-price__case-title {

    background:
        linear-gradient(to bottom, transparent, #FFF4 50%, transparent 0, #000000b3),
        linear-gradient(var(--mc-trans1), var(--mc-trans1)),
        var(--makerIcon)no-repeat right/20%,
        var(--subColor);
    color: #fff;
    font-weight: 800;
    font-size: clamp(24px, 3.33vw, 40px);
    padding: .5em var(--margin) .6em;
}

.service-price__case-details {
    display: grid;
    grid-template-columns: 4fr 7fr;
}

.service-price__case-details-label {
    background: var(--mainColor);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    border-top: 1px solid #fff;
    padding: var(--margin);
    align-content: center;
}

.service-price__case-price-label {
    display: block;
    width: 100%;
    color: #fff;
    font-weight: 700;
    text-align: center;
    margin-top: 5px;
}

.dealer .service-price__case-price-label {
    background: #000;
}

.shop .service-price__case-price-label {
    background: var(--accColor);
}

.service-price__case-details-value {
    border-bottom: var(--mainColor) 1px solid;
    border-right: var(--mainColor) 1px solid;
    font-size: 18px;
    line-height: 1.4;
    padding: var(--margin);
}

.service-price__case-price__figures {
    display: grid;
    grid-template-columns: auto 40px auto;
    gap: var(--margin);
    width: max-content;
    margin: auto;
}

.service-price__case-price__figures-arrow {
    background: var(--mainColor);
    height: 50%;
    transform: translateY(50%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.service-price__case__flexbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.service-price__case-prices {
    align-content: center;
    padding: var(--margin) 0;
}

.service-price__case-prices__inner {
    display: grid;
    gap: var(--margin);
}

.service-price__case-price-amount {
    display: block;
    font-weight: 800;
    text-align: center;
    font-size: clamp(18px, 1.66vw, 20px);
    line-height: 1;
    align-content: center;
}

.service-price__case-price-value {
    font-size: 2em;
    line-height: 1;
}

.shop .service-price__case-price-value {
    color: var(--accColor);
}

.service-price__case-price-note {
    display: grid;
    border: var(--mainColor) 1px solid;
    margin-right: auto;
    margin-left: auto;
    max-width: 750px;
}

.service-price__case-price-note__title {
    font-weight: 800;
    font-size: 24px;
    text-align: center;
    color: #fff;
    background: var(--mainColor);
    padding: 0 var(--margin);
    align-content: center;
}

.service-price__case-price-note-text {
    padding: 10px var(--margin);
}

.service-price__case-price--dealer__figure {
    background: linear-gradient(to right, #0008, transparent, #0008), var(--grayColor);
}

.service-price__case-price--shop__figure {
    background: linear-gradient(to right, #0008, transparent, #0008), var(--accColor);
}

.service-price__case-price--shop__figure::before {
    content: "";
    display: block;
    border: var(--accColor) 4px dotted;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
}

.service-price__case-price--shop__figure {
    grid-template-rows: 1fr 2fr;
}


.service-price__case-price-diff {
    border: 4px solid #000;
    padding: 5px;
    text-align: center;
}


.service-price__case-price-diff-amount {
    font-size: clamp(20px, 2.66vw, 32px);
    font-weight: 800;
}

.service-price__case-price-diff-value {
    color: var(--accColor);
    font-weight: 900;
}

.service-price__case-price-diff-value-num {
    font-size: 1.6em;
    line-height: 1;
}

.service-price__other-cases-title {
    margin: 24px auto 40px;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
    text-align: center;
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 1em;
}

.service-price__main {
    margin-top: 80px;
}

.service-price__other-cases-title__strong {
    font-size: 1.4em;
    color: var(--accColor);
    font-weight: 700;
    display: block;
}

.service-price__other-cases-title::before,
.service-price__other-cases-title::after {
    content: "";
    display: block;
    width: 2px;
    height: 3em;
    border-radius: 100px;
    background: #000;
}

.service-price__other-cases-title::before {
    transform: rotate(-20deg);
}

.service-price__other-cases-title::after {
    transform: rotate(20deg);
}

.service-price__other-cases-list {
    border-top: #000 solid 1px;
    border-left: #000 solid 1px;
    background-color: var(--grayColor);
    max-width: 750px;
    margin: auto;
}

.service-price__other-cases-list__header,
.service-price__other-cases-list__row {
    display: grid;
    grid-template-columns: 3fr 3fr 4fr;
    text-align: center;
}

.service-price__other-cases-list__price {
    display: block;
    font-size: 20px;
    font-weight: 800;
}

.service-price__other-cases-list__col {
    border-right: #000 solid 1px;
    border-bottom: #000 solid 1px;
    padding: .5em 0;
    align-content: center;
    font-weight: 700;
}

.service-price__other-cases-list__cell {
    background-color: #fff;
    border-right: #000 solid 1px;
    border-bottom: #000 solid 1px;
    padding: .5em 0;
    align-content: center;
}

.service-price__other-cases-list__cell--shop {
    background: #ffffdd;
    color: var(--accColor);
    font-size: 1.2em;
    font-size: 24px;
}



@media screen and (max-width: 1000px) {
    .service-price__case__flexbox {
        grid-template-columns: 1fr;
    }

    .service-price__comparison {
        gap: 64px;
    }

    .service-price__comparison__figure {
        aspect-ratio: 2/1;
    }
}

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

    .service-price__content-wrapper {
        grid-template-columns: 100%;
    }

    .service-price__brands-link {
        font-size: 18px;
    }

    .service-price__main {
        margin-top: 0;
    }

    .service-price__brand-comparison {
        border: solid 1px var(--mainColor);
    }

    .service-price__case-details-label {
        font-size: 14px;
    }

    .service-price__case-details-value {
        font-size: 14px;
        align-content: center;
        border-right: none;
    }

    .service-price__case-price-amount {
        font-size: 4vw;
    }

    .service-price__case-price-diff-amount {
        font-size: 5vw;
    }


    .service-price__case-price__figures {
        grid-template-columns: auto 20px auto;
    }

    .service-price__other-cases-title {
        font-size: 3vw;
    }

    .service-price__brands {
        position: static;
        margin: 40px 0 20px;
    }

    .service-price__brands-list {
        display: flex;
        flex-direction: column;
    }

    .service-price__case-title {
        font-size: 20px;
        padding-top: 1em;
        padding-bottom: 1.2em;
    }


    .service-price__compariso {
        gap: 40px;
    }

    .service-price__case-prices {}

    .service-price__case-price-diff-value {

        font-size: 8vw;
    }
}

/* ==============================================
 サービスページ（page-service）- SP
=============================================== */
@media screen and (max-width: 767px) {
    .service-menu__item {
        padding: 10vw 0;
    }

    .service-menu__item:nth-child(odd),
    .service-menu__item:nth-child(even) {
        background: linear-gradient(transparent 50vw, #000 55vw), var(--bgImg);
        background-attachment: unset;
        background-size: contain;
        background-position: top;
        padding-top: 120px;
    }

    .service-menu__item-content {
        width: 100%;
        background: #000c;
        padding-top: 30px;
    }
}

/* ==============================================
よくある質問ページ（page-faq）- PCSP共通
=============================================== */

.faq__main {
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.faq__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 40px;
    margin-top: 64px;
}

.faq__item {
    border: 1px var(--mainColor) solid;
    box-shadow: 5px 5px 20px #0004;
    background: #fff;
}

.faq__item-answer {
    padding: var(--margin) 0;
}

.faq__item-answer__text {
    margin-top: 10px;
}

.pFaq__item-answer__title {
    border-bottom: 2px solid var(--accColor);
}

.pFaq__cta-area {
    margin-top: 80px;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

.faq__list {
    max-width: 1000px;
    margin: 80px auto 0;
}

.faq__item {
    border-bottom: 1px solid var(--mainColor);
}

.faq__item+.faq__item {
    border-top: #fff 1px solid;
}

.faq__item:last-child {
    border-bottom: 1px solid var(--mainColor);
}

.faq__item-question--wrapper {
    background: linear-gradient(to bottom, transparent, #000000b3);
    background-color: var(--mainColor);
    color: #fff;
    padding: 1em var(--margin);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s;
}

.faq__item-question {
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    gap: 0.5em;
}

.faq__item-question::before {
    content: "Q.";
    font-size: 2em;
    font-family: "Oswald", sans-serif;
    padding-bottom: 0.2em;
}

.faq__item-answer__title {
    font-size: 24px;
    color: var(--accColor);
    font-weight: 800;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.faq__item-answer__title::before {
    content: "A.";
    font-size: 2em;
    font-family: "Oswald", sans-serif;
    padding-bottom: 0.2em;
}


/* ==============================================
よくある質問ページ（page-faq）- SP
=============================================== */
@media screen and (max-width: 767px) {
    .faq__list {
        grid-template-columns: 100%;
        gap: 40px;
    }
}

/* ==============================================
 お問合せページ（page-contact）
=============================================== */

.contact-form {
    background-color: #fff;
    padding-top: clamp(20px, 3.33vw, 40px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.contact__intro__title {
    background: var(--mainColor);
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 32px;
    padding: .2em .8em.4em;
    width: max-content;
    margin: auto;
}


.contact__catchcopy {
    font-size: clamp(0px, 2.66vw, 32px);
    font-weight: 700;
    text-align: center;
    margin-top: 20px;
}

.contact__description {
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}

.contact-thanks__note-list {
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    font-size: .8em;
}

.contact__form-wrapper {
    background: #eee;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 840px;
    margin-right: auto;
    margin-left: auto;
}



/*mw_wp_form*/
.mw_wp_form {
    margin-top: 40px;
}

.mw_wp_form_confirm small {
    display: none;
}

.mw_wp_form .error {
    width: 100%;
    font-weight: 700;
}

/*form*/
.form__item {
    padding: 0 10px 32px;
}

.form__item:has(.error) input[type="text"],
.form__item:has(.error) textarea,
.form__item:has(.error) .mwform-checkbox-field.horizontal-item label {
    background: #ffffdd;
}



.form__item:not(:first-child) {
    padding-top: 24px;
    border-top: 1px solid var(--grayColor);
}

.form__flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form__flex-box+.form__flex-box {}

.form__label {
    display: flex;
    font-weight: 700;
    gap: 10px;
    align-items: center;
    font-size: 16px;
}

.form__note-text {
    font-size: 12px;
}

.form__note {
    order: -1;
    display: block;
    line-height: 1;
    height: max-content;
    align-content: center;
    padding: .2em .5em .3em;
    font-size: 12px;
    font-weight: 700;
    border-radius: 2px;
    color: #fff;
    font-family: sans-serif;
    white-space: nowrap;
}

.form__note--optional {
    background: var(--grayColor);
}

.form__note--required {
    background: var(--accColor);
}

.form__input {
    appearance: none;
    border: 1px solid #000;
    border-radius: 2px;
    background-color: #fff;
    padding: .5em .6em .4em;
    line-height: 1.6;
    font-size: 18px;
}

.form__text-input {
    width: 70%;
}

.form__checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.form__policy-link {
    text-decoration: underline;
    display: flex;
    align-items: center;
}


.form__policy-link:hover {
    text-decoration: none;
}


.form__policy-link::after {
    content: "";
    width: 1.2em;
    height: 1.2em;
    background: url(images/icon_open-in-new.png)no-repeat center/contain;
}

.mw_wp_form input[type="checkbox"] {
    display: none;
}

.mwform-checkbox-field.horizontal-item {
    margin-left: 0 !important;
}

.mwform-checkbox-field.horizontal-item label {
    display: flex;
    user-select: none;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    padding: .5em;
    background: #fff;
    font-family: sans-serif;
    transition: all .1s;
}

.mwform-checkbox-field label::before {
    content: "";
    background: #fff;
    border-radius: 2px;
    aspect-ratio: 1/1;
    width: 20px;
    height: 20px;
    object-fit: cover;
    display: block;
    border: 1px solid #000;
    pointer-events: none;
    user-select: none;
}

.mwform-checkbox-field label {
    width: max-content;
    max-width: 100%;

}

.mwform-checkbox-field:has(:checked) label,
.form__item:has(.error) .mwform-checkbox-field:has(:checked) label {
    background: var(--subColor);
    color: #fff;
}

.mwform-checkbox-field:has(:checked) label::before {
    content: url(inc/svgs/check.svg);
    border-color: transparent;
}

.form__description {
    font-size: 14px;
    margin: 10px 0;
}

.form__input--user-message {
    width: 100%;
}

.form__checkbox-options,
.form__input--user-message,
.form__policy-area,
.form__input-image__wrapper {
    margin-top: var(--margin);
}

.form__policy-link {
    margin-top: 10px;
}

.form__submit--button {
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    .contact__intro__title {
        font-size: 18px;
    }

    .contact__form-wrapper {
        max-width: 540px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .contact__catchcopy {
        font-size: 24px;
    }

    .form__item {
        padding: 0 0px 20px;
    }

    .form__item:not(:first-child) {
        padding-top: 20px;
    }

    .form__flex-box {
        display: block;
    }

    .form__text-input {
        width: 100%;
    }

    .form__input {
        margin-top: var(--margin);
        font-size: 16px;
    }
}

/* ==============================================
 プライバシーポリシーページ（privacy-policy）
=============================================== */

.privacy-policy__main {
    background: #fff;
    padding-top: 40px;
    padding-bottom: clamp(60px, 10vw, 120px);
}

.privacy-policy__content {
    display: grid;
    gap: 40px;
    max-width: 1000px;
    margin: auto;
}

.privacy-policy__section {
    border-top: 1px solid var(--grayColor);
    padding-top: 40px;
    display: grid;
    gap: 5px;
}

.privacy-policy__section-title {
    font-weight: 700;
    font-size: 24px;
}

.privacy-policy__list {
    margin-left: 2em;
    list-style-type: disc;
}


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

    .privacy-policy__content {
        gap: 24px;
    }

    .privacy-policy__section {
        padding-top: 24px;
    }


    .privacy-policy__section-title {
        font-weight: 700;
        font-size: 18px;
    }

}


/* ==============================================
 施工事例用テンプレート（case-list）
=============================================== */

.case-list__content {
    margin-top: 64px;
}

.case-list__notfound {
    text-align: center;
    color: #fff;
}

.case-list__notfound-button {
    margin-top: 64px;
}

.case-list {
    display: grid;
    grid-template-columns: repeat(4, 23%);
    gap: 32px var(--margin);
    max-width: 1020px;
    margin: auto;
    justify-content: center;
}

.case-list__thumbnail {
    aspect-ratio: 3/2;
    width: 100%;
}

.case-list__item {
    color: #000;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px #0004;
    transition: opacity .2s;
    border-radius: 2px;
    overflow: hidden;
}

.case-list__info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 5px;
}

.case-list__count {
    color: #fff;
    text-align: center;
}

.case-list__title {
    display: block;
    font-weight: 700;
    font-size: clamp(0px, 1.6vw, 16px);
    line-height: 1.2;
    flex-grow: 1;
}

.case-list__date {
    font-size: 12px;
}

.case-list__price-wrapper {
    display: flex;
    flex-direction: column;
}

.case-list__price-title {
    background-color: var(--mainColor);
    color: #fff;
    text-align: center;
    padding: .1em 0 .2em;
    font-size: 12px;
    font-weight: 700;
    border-radius: 2px;
}

.case-list__price-data {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.case-list__price-value {
    font-size: clamp(0px, 3.33vw, 40px);
    font-weight: 800;
    color: var(--accColor);
    line-height: 1;
    text-align: center;
}

.case-list__price-unit {
    position: relative;
    padding-top: .8em;
    font-weight: 700;
    line-height: 1.2;
    font-size: 20px;
}

.case-list__price-tax {
    font-size: .5em;
    margin: 0 -.2em;
    position: absolute;
    top: 0;
    left: 0;
}

.case-list__detail {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    border-top: 1px solid #ccc;
    line-height: 1.6;
    padding-top: .2em;
    width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-list__detail-icon {
    width: 1.6em;
    height: 1.6em;
    color: var(--mainColor);
}

.case-list__detail-text {
    flex-grow: 1;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.case-list__type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.case-list__type-item {
    background: var(--accColor);
    padding: .1em .4em;
    font-size: 10px;
    font-weight: 600;
    border-radius: 2px;
    color: #fff;
}

.case-list__type-item.noset {
    background: #ccc;
}

.case-list__more-button {
    margin-top: 64px;
}

.case-list__pagination {
    position: relative;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 1em;
    padding: 0 50px;
}


.case-list__pagination .prev,
.case-list__pagination .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.case-list__pagination .page-numbers {
    font-weight: 700;
}

.case-list__pagination .page-numbers.current {
    color: var(--accColor);
}

.case-list__pagination .prev {
    left: 0;
}

.case-list__pagination .next {
    right: 0;
}

.case-list--container {
    margin-top: 40px;
}

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

    .case-list__price-value {
        font-size: 64px;
    }

    .case-list__notfound-button {
        margin-top: 40px;
    }

    .case-list__more-button {
        margin-top: 40px;
    }

    .case-list__thumbnail {
        aspect-ratio: 2/1;
        height: fit-content;
    }

    .case-list__content {
        margin-top: 32px;
    }

    .case-list {
        display: flex;
        flex-wrap: wrap;
    }

    .case-list__item {
        width: 300px;
    }

    .case-list__title {
        font-size: 20px;
    }
}


/* ==============================================
 施工事例一覧ページ（archive-case）
=============================================== */

.case-archive__taxonomy {
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.case-archive__taxonomy-group {
    text-align: center;
}

.case-archive__taxonomy-list {
    display: grid;
    width: 720px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}

.case-archive__taxonomy-icon {
    width: 30px;
    height: 40px;
    margin: auto;
}

.case-archive__maker-list .case-archive__taxonomy__link-text::before,
.tax-all .case-archive__taxonomy__link-text::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    margin: auto;
    background: var(--taxonomyIcon)no-repeat center/ contain;
}

.case-archive__taxonomy__link-text {
    display: flex;
    flex-direction: column;
}

.case-archive__taxonomy-clear {
    margin-top: 64px;
}

.case-archive__maker-list {
    grid-template-columns: repeat(6, 1fr);
    justify-content: left;
    flex-wrap: wrap;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}

.case-archive__taxonomy-item:has(.other-imported) {
    grid-column: 1/4;
}

.case-archive__taxonomy-item:has(.domestic) {
    grid-column: 4/7;
}

.case-archive__taxonomy-item:has(.maker-all) {
    grid-column: 1/7;
}

.case-archive__taxonomy-item:has(.types-all) {
    grid-column: 1/6;
}

.case-archive__taxonomy-name {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
}

.case-archive__taxonomy-slug {
    font-size: 8px;
    display: block;
    line-height: 1;
}

.case-archive__taxonomy-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}


.case-archive__taxonomy__description {
    margin: auto;
    text-align: center;
}

.bmw {
    --taxonomyIcon: url(images/maker_bmw.png);
}

.benz {
    --taxonomyIcon: url(images/maker_benz.png);
}

.audi {
    --taxonomyIcon: url(images/maker_audi.png);
}

.volvo {
    --taxonomyIcon: url(images/maker_volvo.png);
}

.mini {
    --taxonomyIcon: url(images/maker_mini.png);
}

.porsche {
    --taxonomyIcon: url(images/maker_porsche.png);
}

.fiat {
    --taxonomyIcon: url(images/maker_fiat.png);
}

.jeep {
    --taxonomyIcon: url(images/maker_jeep.png);
}

.jaguar {
    --taxonomyIcon: url(images/maker_jaguar.png);
}

.maserati {
    --taxonomyIcon: url(images/maker_maserati.png);
}

.alfaromeo {
    --taxonomyIcon: url(images/maker_alfaromeo.png);
}

.wagen {
    --taxonomyIcon: url(images/maker_wagen.png);
}

.landrover {
    --taxonomyIcon: url(images/maker_rover.png);
}

.other-imported,
.domestic {
    --taxonomyIcon: url(images/maker_other.png);
}

.tax-all {
    --taxonomyIcon: url(images/tax_all.png);
}

.case-archive__taxonomy-link {
    display: block;
    width: 100%;
    height: 100%;
    align-content: center;
    padding: 5px 0 10px;
}

.case-archive__taxonomy-current-box {
    max-width: 720px;
    display: flex;
    font-size: 18px;
    padding: 24px 32px;
    border: 4px solid #000;
    margin-right: auto;
    margin-left: auto;
}

.case-archive__type-list {
    grid-template-columns: repeat(5, 1fr);
}

.case-archive__taxonomy-item {
    width: 100%;
    background: #000;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    color: #fff;
    max-height: 80px;
}

.case-archive__taxonomy-item:has(.current) {
    background: var(--accColor);
    color: #fff;
}

.case-archive__taxonomy-all {
    max-width: 720px;
    justify-content: center;
    text-align: center;
    margin: auto;
}

.case-archive__taxonomy-link.current {
    pointer-events: none;
}

.case-archive__taxonomy-current {
    color: #000;
}

.case-archive__works {
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

@media screen and (max-width: 767px) {
    .case-archive__taxonomy-all {
        max-width: 400px;
    }

    .case-archive__taxonomy-list {
        max-width: 400px;
    }


    .case-archive__taxonomy__description {
        text-align: left;
    }

    .case-archive__maker-list {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .case-archive__taxonomy-name {
        font-size: 10px;
    }

    .case-archive__maker-list .case-archive__taxonomy-item:nth-last-child(2) {
        grid-column: 1/4;
        aspect-ratio: 4/1;
    }

    .case-archive__maker-list .case-archive__taxonomy-item:last-child {
        grid-column: 1/4;
        aspect-ratio: 4/1;
    }

    .case-archive__type-list {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .case-archive__type-list .case-archive__taxonomy-item:last-child {
        grid-column: 1/3;
        aspect-ratio: 4/1;
    }

}


/* ==============================================
 施工事例詳細ページ（single-case）
=============================================== */
.case-single {

    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.case-single__content {
    background: #fff;
    color: #000;
    padding: 32px var(--margin);
    max-width: 1020px;
    margin-right: auto;
    margin-left: auto;
}

.case-single__content-header {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-left: .4em solid var(--accColor);
}

.case-single__date {
    font-size: 16px;
    font-weight: 700;
}

.case-single__title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}

.case-single__info-price {
    color: var(--accColor);
    font-size: 1.4em;
}

.case-single__flexbox {
    display: flex;
    gap: var(--margin);
    margin-top: 20px;
}

.case-single__thumb {
    width: 40%;
}

.case-single__info {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1px;
}

.case-single__info-cell {
    padding: .5em 1em;
    align-content: center;
}

.case-single__info-label {
    background: var(--mainColor);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

.case-single__info-value {
    border-bottom: var(--grayColor) 1px solid;
}


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

    .case-single__flexbox {
        flex-direction: column;
    }

    .case-single__thumb {
        width: 100%;
    }

    .case-single__info {
        display: block;
    }

    .case-single__date {
        font-size: 14px;
    }

    .case-single__title {
        font-size: 20px;
    }

}

/* ==============================================
 投稿本文スタイル（ビジュアルエディタ用）
=============================================== */
.post_content {
    margin-top: 40px;
}

.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.post_content h6 {
    font-weight: 700;
    line-height: 1.2;
}

.post_content h1 {
    font-size: 32px;
    padding-left: 10px;
    border-left: .2em solid var(--accColor);
}

.post_content h2 {
    font-size: 28px;
    padding-left: 10px;
    border-left: .2em solid var(--accColor);
}

.post_content h3 {
    font-size: 24px;
}

.post_content h4 {
    font-size: 20px;
}

.post_content h5 {
    font-size: 18px;
}

.post_content h6 {
    font-size: 16px;
}

.post_content ul {
    list-style-type: disc;
}

.post_content ol {
    list-style-type: decimal;
}

.post_content li {
    margin-left: 1.5em;
}

.post_content li+li {
    margin-top: 20px;
}


.post_content *+* {
    margin-top: 20px;
}

/* ==============================================
 会社概要ページ（page-company）
=============================================== */

.company__info-title {
    background: #000;
    color: #fff;
    font-weight: 800;
    font-size: 32px;
    padding: .5em;
    text-align: center;
}

.company__maker-banner {
    display: block;
    background: linear-gradient(#000b, #000b), url(images/makericons.png)no-repeat center/contain, #000;
    color: #fff;
    font-weight: 800;
    padding: 1em 0;
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
    margin-top: 64px;
}

.company-intro__flex-box {
    margin-top: 64px;
    display: flex;
    gap: 0 var(--margin);
    align-items: center;
    width: 1200px;
    max-width: calc(100vw - (var(--margin) * 2));
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.company__image {
    position: relative;
    z-index: 1;
    width: 40%;
}

.company__image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translate(var(--margin), var(--margin));
    background: var(--grayColor);
    z-index: -1;
}

.company__description {
    width: calc(60% - var(--margin));
}

.company__overview {
    background: #fff;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(60px, 10vw, 120px);
}

.company__overview__title {
    font-size: clamp(18px, 3.6vw, 36px);
    text-align: center;
    line-height: 1.4;
    font-weight: 800;
}

.company__overview__title--strong {
    font-size: 1.4em;
    line-height: 1.2;
}

.company__info {
    background: #fff;
    padding-bottom: clamp(60px, 10vw, 120px);
}

.company__info-list {
    display: grid;
    grid-template-columns: 2fr 8fr;
    max-width: 750px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid;
    margin-top: 40px;
}

.company__info-cell {
    align-content: center;
    padding-top: var(--margin);
    padding-bottom: var(--margin);
    min-height: 64px;
}

.company__info-cell:nth-child(n+3) {
    border-top: 1px solid;
}

.company__info-detail {
    border-left: 1px solid;
    padding: var(--margin);
}

.company__info-item {
    background: #ddd;
    text-align: center;
    font-size: 18px;
    line-height: 1;
}


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


    .company-intro__flex-box {
        display: block;
        margin-top: 0;
        position: relative;
    }

    .company__description {
        background: #fffe;
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .company__info-list {
        grid-template-columns: 1fr;
        border: none;
        max-width: 440px;
        margin: 40px auto 0;
    }

    .company__info-cell {
        border: none !important;
        font-size: 16px;
        font-weight: 500;
    }

    .company__info-item {
        min-height: 32px;
        font-weight: 700;
        font-size: 16px;
    }

    .company-intro__flex-box::before {
        content: "";
        display: block;
        width: 100vw;
        aspect-ratio: 3 / 2;
        margin-left: calc(var(--margin) * -1);
        margin-bottom: -60%;
        background: url(images/guest_attention_img01.jpg) no-repeat center / cover;
        mask: linear-gradient(to bottom, #fff, transparent);
    }

    .company__description {
        max-width: 540px;
        background: #fffe;
        position: relative;
        z-index: 1;
        padding: var(--margin);
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
}



/* ==============================================
 404ページ（404）
=============================================== */

.notfound__main {
    background: #fff;
}

.notfound {
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(90px, 10vw, 120px);
}

.notfound__title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.notfound__description {
    width: max-content;
    max-width: 100%;
    margin: 40px auto 0;
}

/* ==============================================
 Footer
=============================================== */

.footer {
    background: var(--mainColor);
}

.footer__home-link {
    color: #fff;
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 0 10px;
}


.footer__site-icon {
    display: block;
    width: clamp(40px, 6.66vw, 80px);
    aspect-ratio: 1/1;
}

.footer__site-title {
    color: #fff;
    font-size: 40px;
    line-height: 1;
}


.footer__business {
    font-weight: 800;
    display: block;
}

.footer__store-name {
    font-size: .4em;
    display: block;
}

.footer__content {
    display: grid;
    gap: 64px 0;
    padding-top: clamp(40px, 6.66vw, 80px);
    padding-bottom: clamp(90px, 10vw, 120px);
    grid-template-columns: 100%;
}

.footer__support {
    background: #fff;
    padding: var(--margin);
}

.footer__support__title {
    font-weight: 700;
    font-size: 18px;
}

.footer__support__description {
    margin-top: 10px;
}

.footer__company {
    display: flex;
    color: #fff;
    gap: 64px;
}

.footer__company-name {
    font-weight: 700;
    font-size: 20px;
}

.footer__company__info {
    display: grid;
    gap: 10px;
}

.footer__company__item {
    display: flex;
    list-style: disc;
    margin-left: 1em;
    gap: .2em;
}

.footer__company__item::before {
    content: "-";
}

.footer__sitemap {
    padding-left: 64px;
    border-left: 1px solid #fff;
    display: grid;
    gap: 10px;
}

.footer__sitemap__title {
    font-size: 24px;
    font-weight: 700;
}

.footer__sitemap__list {
    column-count: 2;
    margin-top: var(--margin);
    gap: 5px;
    margin-top: 5px;
}

.footer__company__label::after {
    content: "：";
}

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


    .footer__home-link {
        gap: 0 5px;

    }

    .footer__company {
        width: 80%;
        max-width: 400px;
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    .footer__site-title {
        font-size: 20px;
    }

    .footer__company__info {
        width: max-content;
        max-width: 100%;
        margin: auto;
        gap: 20px;
    }

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

    .footer__sitemap {
        padding-left: 0;
        margin-top: 40px;
        padding-top: 40px;
        border-left: none;
        border-top: #fff solid 1px;
        text-align: center;
    }

    .footer__sitemap__list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

}

/* ==============================================
 fixed footer
=============================================== */

.fixed-gotop {
    position: fixed;
    z-index: 10;
    bottom: 8vw;
    mix-blend-mode: difference;
    background: url(images/gotop_arrow.png) no-repeat center/cover, #0008;
    right: var(--margin);
    transform: translateY(-130%);
    aspect-ratio: 1/1;
    border-radius: 100px;
    aspect-ratio: 1/1;
    width: 48px;
    height: 48px;
}

.fixed-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--mc-trans1);
    border-top: 1px solid #fff;
    padding: 10px 0;
    backdrop-filter: blur(5px);
}

.fixed-footer__message {
    color: #fff;
    text-align: center;
    line-height: 1;
}

.fixed-footer__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--margin);
    margin-top: 8px;
}

.fixed-footer__text {
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}

.fixed-footer__cta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-grow: 1;
    gap: var(--margin);
    font-size: clamp(0px, 2vw, 24px);
}

.fixed-footer__cta .cta__link {
    border: 2px solid #fff;
}

@media screen and (max-width: 767px) {
    .fixed-footer__content {
        margin: 0;
    }

    .fixed-footer {
        background: transparent;
    }

    .company__maker-banner {
        font-size: 18px;
        margin-top: 40px;
    }

    .fixed-footer {
        padding: 0;
        border: none;
    }

    .fixed-footer__cta {
        gap: 2px;
        font-size: 4.6vw;
        margin-right: calc(-1* var(--margin));
        margin-left: calc(-1* var(--margin));
    }

    .fixed-footer__content .cta__link {
        border-radius: 10px 10px 0 0;
        outline: 1px solid #fff;
    }

    .fixed-footer__content .cta__tel-holiday {
        display: none;
    }
}

.footer__copyright {
    color: #fff;
    background: #000;
    text-align: center;
    font-size: 10px;
    padding: .5em 0;
}