@charset "UTF-8";
/*
Theme Name : エルテック
*/
/* コンテンツ幅　PC:1000px SP:768px */

/* ===================
ベーススタイル
=================== */

:root {
    /* 色 */
    --color-black: #000;
    --color-main: #B96AEE;
    --color-main-l: #DEA4F3;
    --color-main-d: #8835C0;
    --color-gray: #484848;
    --color-gray-l: #EDEDED;
    --color-white: #fff;
    --color-txt: var(--color-black);
    /* フォント */
    --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
    --line-height-xs: 1;
    --line-height-s: 1.5;
    --line-height-m: 1.7;
    --line-height-l: 2;
    --bold: 700;
    --bold: 600;
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --inner: min(100%, 1000px);
    --unit-s: 60px;
    --unit-m: 80px;
    --unit-l: 100px;
    --unit-xl: 120px;
    /* border-radius */
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 20px;
    --radius-xl: 40px;
    --radius-xxl: 80px;
    /* transition */
    --transition: 0.3s ease-in-out;
    --transition-1s: 1s ease-in-out;
    /* 影 */
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 768px) {
    :root {
        --space-8: 6px;
        --space-16: 12px;
        --space-24: 16px;
        --space-32: 20px;
        --space-40: 26px;
        --unit-s: 32px;
        --unit-m: 40px;
        --unit-l: 60px;
        --unit-xl: 80px;
        /* border-radius */
        --radius-xs: 4px;
        --radius-s: 6px;
        --radius-m: 12px;
        --radius-l: 14px;
        --radius-xl: 20px;
        --radius-xxl: 40px;
    }
}

*,
::before,
::after {
    /* fluid 計算式） */
    --size-root: 16;
    --clamp-slope: calc((var(--size-max) - var(--size-min)) / (var(--viewport-max) - var(--viewport-min)));
    --clamp-intercept: calc(var(--size-min) - (var(--clamp-slope) * var(--viewport-min)));
    --clamp-value: calc(var(--clamp-intercept) * (1rem / var(--size-root)) + (var(--clamp-slope) * 100vw));
    --clamp: clamp(calc(var(--size-min) * (1rem / var(--size-root))),
            var(--clamp-value),
            calc(var(--size-max) * (1rem / var(--size-root))));
    font-size: var(--clamp);
}

html {
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    --color: var(--color-black);
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    color: var(--color);
    background: var(--color-white);
    line-height: var(--line-height-m);
    -webkit-font-smoothing: antialiased;
    --size-min: 16;
    --size-max: 16;
    --viewport-min: 375;
    --viewport-max: 1111;
}

footer {
    margin-top: auto;
}

h1,
h2,
h3,
h4,
h5 {
    line-height: var(--line-height-xs);
    font-weight: var(--bold);
}

address {
    font-style: normal;
}

/* 電話番号a表示 */
@media screen and (min-width: 768.1px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }
}

img {
    width: 100%;
    height: auto;
    display: block;
}

/* PC/SP 出し分け */
@media screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }
}

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

/* リストスタイル */
ul {
    list-style: none;
}

.disc {
    list-style-type: "・";
    padding-left: 1em;
}

.rice {
    list-style-type: "※";
    padding-left: 1em;
}

/* デフォルトリンクスタイル */
:where(a, a *) {
    text-decoration: none;
}

:where(a:not(:has([class]))) {
    transition: opacity var(--transition);
}

@media (any-hover: hover) {
    :where(a:not(:has([class]))):hover {
        opacity: .7;
    }
}

:where(a:focus-visible),
:where(button:focus-visible) {
    outline-color: var(--color);
}

.underline {
    text-decoration: underline 1px;
    text-underline-offset: 0.15em;
}

.underline_none {
    text-decoration: none;
}

pre {
    white-space: pre-wrap;
    word-break: break-all;
    display: inline-block;
    font-family: var(--font);
}

/* 改行設定 */
.wbr {
    word-break: keep-all;
}

/* PC */
@media screen and (min-width: 768.1px) {
    *:has(>wbr) {
        word-break: keep-all;
    }
}

/* デフォルト幅設計 */
:where([class*="wrap_"]:not(.swiper-wrapper)),
.wrap {
    width: 100%;
    padding: var(--unit-m) 5%;
    overflow-x: hidden;
}

.wrap_s {
    padding-block: var(--unit-s);
}

.wrap_l {
    padding-block: var(--unit-l);
}

.wrap_xl {
    padding-block: var(--unit-xl);
}

.inner {
    width: var(--inner);
    margin: 0 auto;
}

.inner_s {
    width: min(100%, 790px);
    margin: 0 auto;
}

.inner_l {
    width: min(100%, 1166px);
    margin: 0 auto;
}

.w_100 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.w_l {
    --w-l: 100%;
    width: calc(var(--w-l) + 50vw - 50%);
    margin-left: calc(50% - 50vw);
}

.w_r {
    --w-r: 100%;
    width: calc(var(--w-r) + 50vw - 50%);
    margin-right: calc(50% - 50vw);
}

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

    .w_l,
    .w_r {
        width: 100vw;
    }
}

/* 背景色とテキスト */
:where([class*="bg_"]) {
    color: var(--color-txt);
}

:where(.bg_gray) {
    --color-txt: var(--color-white);
    background-color: var(--color-gray);
}

:where(.bg_gray-l) {
    --color-txt: var(--color-black);
    background-color: var(--color-gray-l);
}

:where(.bg_black) {
    --color-txt: var(--color-white);
    background-color: var(--color-black);
}

:where(.bg_white) {
    --color-txt: var(--color-black);
    background-color: var(--color-white);
}

:where(.bg_main) {
    --color-txt: var(--color-white);
    background-color: var(--color-main);
}

.bg_gray-xl {
    background-color: #f2f2f2;
}

.color_main {
    color: var(--color-main);
}

.color_main-l {
    color: var(--color-main-l);
}

.color_main-d {
    color: var(--color-main-d);
}

.color_gray {
    color: var(--color-gray);
}

/* 個別クラス */
.oswald {
    font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
}

.dib {
    display: inline-block;
}

.tac {
    text-align: center;
}

.tac_cont {
    text-align: center;
    width: fit-content;
    margin-inline: auto;
}

/* PC */
@media screen and (min-width: 768.1px) {
    .tac_pc {
        text-align: center;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .tac_sp {
        text-align: center;
    }
}

.tar {
    text-align: right;
}

.tar_cont {
    text-align: right;
    margin-left: auto;
    width: fit-content;
}

.tal {
    text-align: left;
}

.tal_cont {
    text-align: left;
    margin-left: auto;
    width: fit-content;
}

/* .letter_s {
    letter-spacing: -0.08em;
} */
.letter_l {
    letter-spacing: 0.03em;
}

.line-h_s {
    line-height: var(--line-height-s);
}

.line-h_l {
    line-height: var(--line-height-l);
}

.m-top_05 {
    margin-top: .5em;
}

.m-top_1 {
    margin-top: 1em;
}

.m-top_40 {
    margin-top: var(--space-40);
}

.m-top_unit-s {
    margin-top: var(--unit-s);
}

.m-top_unit-m {
    margin-top: var(--unit-m);
}

.m-top_unit-l {
    margin-top: var(--unit-l);
}

.m-top_unit-xl {
    margin-top: var(--unit-xl);
}

.m-btm_1 {
    margin-bottom: 1em;
}

.m-btm_unit-m {
    margin-bottom: var(--unit-m);
}

.m-btm_unit-xl {
    margin-bottom: var(--unit-xl);
}

.m-i_auto {
    margin-inline: auto;
}

.p-top_unit-m{
	padding-top:var(--unit-m);
}

.p-btm_0 {
    padding-bottom: 0;
}

.p-btm_unit-xl {
    padding-bottom: var(--unit-xl);
}

.strong {
    font-size: 1.2em;
    font-weight: var(--bold);
}

.bold {
    font-weight: var(--bold);
}

.font_s {
    --size-min: 14;
    --size-max: 14;
}

.font_reduction{
	font-size:0.8em;
}

.font_m {
    --size-min: 16;
    --size-max: 18;
}

.font_l {
    --size-min: 18;
    --size-max: 20;
}

.font_xl {
    --size-min: 18;
    --size-max: 24;
}

.display_contents {
    display: contents;
}

.m-b-m_exclusion {
    mix-blend-mode: exclusion;
}

/* 画面リーダー専用テキスト */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* img関連 */
.img_cover,
.img_contain,
.img_fill {
    position: relative;
    overflow: hidden;
}

.img_cover img,
.img_cover video {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.img_cover [class*="wrap_"] {
    position: relative;
    background: transparent;
}

.img_contain img {
    position: absolute;
    object-fit: contain;
    height: 100%;
}

.img_fill img {
    position: absolute;
    object-fit: fill;
    height: 100%;
    width: 100%;
}

[class*="img_"].img_opacity img {
    opacity: .7;
}

/* ボタン・リンク */

:where([class*="btn_"]:not([class*="txt"])) {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: var(--color);
    column-gap: 0.5em;
    padding: .8em 1em;
    width: fit-content;
    height: fit-content;
    line-height: var(--line-height-xs);
}

[class*="btn_"].tac {
    margin-inline: auto;
}

[class*="btn_"].gap_m {
    column-gap: 2em;
}

[class*="btn_"] .ico {
    height: 1em;
    width: auto;
}

.btn_main {
    width: min(320px, 100%);
    height: 2.8em;
    padding: 0;
    margin-inline: auto;
    border-radius: 2px;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn_main p {
    position: absolute;
    padding: .9em 0;
    width: 100%;
    inset: 0 auto auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    transition: inset var(--transition), color var(--transition);
}

.btn_main .btn_txt_clone {
    transform: translateY(120%);
}

.bg_white .btn_main {
    background: var(--color-black);
    color: var(--color-white);
}

.bg_black .btn_main,
.bg_gray .btn_main {
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-white);
}

.btn_main.color_main {
    background: var(--color-main);
    color: var(--color-white);
    border: 1px solid var(--color-main);
}

.btn_white {
    border-radius: 2px;
    border: 1px solid var(--color-white);
    --size-min: 18;
    --size-max: 22;
    /* font-weight: var(--bold); */
    width: min(400px, 100%);
}

.btn_square {
    border: 1px solid var(--color-main);
    color: var(--color-main);
    background: transparent;
    border-radius: .2em;
    padding: .8em 1.5em;
    margin-inline: auto;
    transition: color var(--transition), background-color var(--transition);
}

.btn_square.color_main-l {
    border: 1px solid var(--color-main-l);
    color: var(--color-main-l);
}

.btn_min {
    padding-inline: 2em;
    border-radius: 3em;
    background-color: var(--color-main);
    color: var(--color-white);
    border: 1px solid var(--color-main);
}

.btn_min.transparent {
    background-color: transparent;
    color: var(--color-gray);
    border: 1px solid var(--color-gray);
}

/* SP */
@media screen and (max-width: 768px) {
    [class*="btn"].gap_m {
        column-gap: 1em;
    }

    .btn_main {
        width: min(400px, 100%);
    }
}


/* ホバー */
@media (any-hover: hover) {
    .btn_main p:hover {
        inset: -3em auto auto;
    }

    .bg_white .btn_main:hover {
        background: #979797;
        opacity: 1;
    }

    .bg_black .btn_main:hover,
    .bg_gray .btn_main:hover {
        background: var(--color-black);
        color: var(--color-white);
        opacity: 1;
    }

    .btn_main.color_main:hover {
        opacity: 1;
        background-color: transparent;
        color: var(--color-main);
    }

    a.btn_square:hover,
	a:hover .btn_square{
        background: var(--color-main);
        color: var(--color-white);
    }

    a.btn_square.color_main-l:hover,
	a:hover .btn_square.color_main-l{
        background: var(--color-main-l);
    }

    a.btn_square:hover .ico,
	a:hover .btn_square .ico{
        filter: brightness(0) invert(1);
    }

    .btn_square .ico {
        transition: filter var(--transition);
    }

    .btn_min {
        transition: background-color var(--transition), color var(--transition);
    }

    a.btn_min:hover,
	a:hover .btn_min{
        background: transparent;
        color: var(--color-main);
        opacity: 1;
    }

    a.btn_min.transparent:hover,
	a:hover .btn_min.transparent{
        background: var(--color-gray);
        color: var(--color-white);
    }
}

/* タイトル類 */
.ttl {
    line-height: 1.3;
}

.ttl_sec {
    --size-min: 36;
    --size-max: 70;
    font-weight: var(--bold);
}

.ttl_sec_min {
    --size-min: 14;
    --size-max: 16;
    margin-top: .3em;
    font-weight: normal;
}

.ttl+p,
.ttl_2+p,
.ttl_2_sub+p,
.ttl_3+p {
    margin-top: 3em;
}

.ttl_2,
.ttl_3 {
    line-height: var(--line-height-xs);
}

.ttl_2nd {
    --size-min: 40;
    --size-max: 80;
    font-weight: var(--bold);
}
.ttl_2nd>.font_reduction{
	font-size:.7em;
}
.ttl_2nd+.ttl_sec_min {
    margin-top: 1em;
}

.ttl_2_sub {
    line-height: 1.3;
}

.ttl_2_sub .ttl_sec {
    --size-min: 22;
    --size-max: 36;
}

.ttl_3 .ttl_sec {
    --size-min: 36;
    --size-max: 60;
}

.wrap_l:has(.ttl_other) {
    padding-block: calc(var(--unit-l) * 2);
}

.ttl_other {
    font-weight: bold;
}

.ttl_other .oswald {
    --size-min: 60;
    --size-max: 128;
}

.ttl_other .oswald+span {
    --size-min: 20;
    --size-max: 40;
    display: block;
    margin-top: .3em;
}

h1.ttl_other {
    --size-min: 20;
    --size-max: 30;
}

/* PC */
@media screen and (min-width: 768.1px) {
    .ttl_3 {
        display: flex;
        align-items: center;
        gap: 1em;
    }

    .ttl_3 .ttl_sec {
        margin-bottom: .2em;
    }
}

/* 画面上部へスキップリンク */
.skip_link {
    position: fixed;
	font-size:14px;
    padding: .2em .6em;
    background: var(--color-gray-l);
	border-radius:2px;
	top:70px;
	right:-18em;
    transition: right var(--transition), opacity var(--transition);
    z-index: 1000;
    opacity: 0;
}


.skip_link:focus {
    opacity: 1;
	right:5%;
}

/* SP */
@media screen and (max-width: 768px) {
	.skip_link {
		font-size:12px;
	}
	.skip_link:focus {
		right:min(5vw, 16px);
	}

}

/* カード */
[class*="card_wrap"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-16);
}

/* 子が2つの場合 */
[class*="card_wrap"]:has(> :nth-child(2):last-child) {}

/* 子が3つの場合 */
[class*="card_wrap"]:has(> :nth-child(3):last-child) {}

/* 子が4つ以上の場合 */
[class*="card_wrap"]:has(> :nth-child(4)) {}

.card_wrap_s {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: min(var(--space-16), 1vw);
}

.card_cont {
    background: var(--color-white);
    border-radius: var(--radius-s);
    padding: var(--space-24);
    display: grid;
    grid-template-rows: subgrid;
    align-items: center;
    gap: 0;
}

.card_wrap_s .card_cont {
    padding: 1em min(16px, 1vw);
}

/* 子が2つの場合 */
.card_cont:has(> :nth-child(2):last-child) {
    grid-row: span 2;
}

/* 子が3つの場合 */
.card_cont:has(> :nth-child(3):last-child) {
    grid-row: span 3;
}

.card_icon_m {
    width: 3em;
    margin-inline: auto;
}

.card_icon_m+.card_ttl {
    color: var(--color-txt);
    line-height: var(--line-height-xs);
    --size-min: 12;
    --size-max: 16;
}

/* SP */
@media screen and (max-width: 768px) {
    .card_wrap_s {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: min(var(--space-16), 1vw);
    }
}

/* テキストリスト */
.list {
    display: grid;
    grid-template-columns: auto auto 1fr 1em;
    line-height: var(--line-height-s);
}

.list_card {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    padding: 2.8em .5em 1em 0;
    border-bottom: 1px solid var(--color-txt);
}

.list_card>* {
	transition: margin-inline var(--transition);
	margin-inline:0 12px;
}

.list_card::after {
    content: "";
    background-color: var(--color-txt);
    width: 1em;
    height: .8em;
    clip-path: polygon(40% 0, 90% 50%, 40% 100%, 35% 95%, 80% 50%, 35% 5%);
}

.list_card_cat {
    text-align: center;
    padding: .2em .8em .1em;
    border: 1px solid var(--color-txt);
    border-radius: 3em;
    --size-min: 14;
    --size-max: 14;
}

.list_card_ttl {
    --size-min: 16;
    --size-max: 18;
    font-weight: var(--bold);
}

.list_txt li+li {
    margin-top: .5em;
    line-height: 1.5;
}

/* SP */
@media screen and (max-width: 768px) {
    .list_card {
        gap: .4em;
        padding-right: 0;
    }

    .list_card_ttl {
        grid-row: 2/3;
        grid-column: 1/4;
    }

    .list_card::after {
        grid-row: 2/3;
        grid-column: 4/5;
    }
}

@media (any-hover: hover) {
    .list_card {
        position: relative;
        padding-right: .5em;
    }

    .list_card.fade-up {
        transition: opacity var(--transition-1s), translate var(--transition-1s), padding var(--transition);
    }

    .list_card:hover>* {
		margin-inline:8px 4px;
    }

    .list_card::before {
        content: "";
        width: 25%;
        height: 3px;
        background: url(img/line_hover.png) no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: -2px;
        transition: left var(--transition);
    }

    .list_card:hover::before {
        left: 75%;
    }
}

/* flex */
.flex {
    display: flex;
}

/* PC */
@media screen and (min-width: 768.1px) {

    /* 子が2つの場合 */
    :where([class*="flex"]:has(> :nth-child(2):last-child)) {
        gap: 5%;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .flex {
        flex-direction: column;
        gap: 1em;
    }
}

/* grid */
:where([class*="grid"]) {
    display: grid;
}

.grid_1 {
    grid-template-columns: 1fr;
    gap: 1em;
}

.grid_2 {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 2em 3%;
}

.grid_3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2em 1.5%;
}

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

    .grid_1,
    .grid_2,
    .grid_3 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2em 1.5%;
    }
}

/* 製品カード */
.card_product {
    background: var(--color-white);
    border-radius: var(--radius-m);
    padding: 2em 10%;
    display: grid;
    grid-template-rows: subgrid;
    gap: 1em;
    grid-row: span 4;
    overflow: hidden;
    position: relative;
}

.card_product_ttl {
    font-weight: var(--bold);
    --size-min: 20;
    --size-max: 24;
    text-align: center;
    line-height: 1.3;
    /* align-self: center; */
}

.card_product_img {
    width: 90%;
    margin-inline: auto;
    align-self: center;
/* 	aspect-ratio:1; */
}

.new_products .card_product {
    background: linear-gradient(to bottom, #FFF 30%, #4C4C4C 90%);
    /* background: linear-gradient(180deg, #E9E9E9 32.82%, #4C4C4C 50.09%); */
    color: var(--color-white);
    padding: 2em 7%;
}

.new_products .card_product_ttl {
    --size-max: 28;
}

.new_products .card_product_txt {
    --size-min: 14;
    --size-max: 14;
    margin-top: -.5em;
    line-height: var(--line-height-s);
}

.card_news {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: .5em;
    line-height: 1.3;
	max-width:500px;
}

.card_news_img {
    border-radius: var(--radius-s);
    aspect-ratio: 3/2;
}

.card_news_cat {
    --size-min: 14;
    --size-max: 14;
    border: 1px solid var(--color-gray);
    border-radius: 5em;
    padding: .2em .8em;
    color: var(--color-gray);
    width: fit-content;
    display: inline-block;
}

/* PC */
@media screen and (min-width: 768.1px) {
    .new_products .card_product_img {
        order: -1;
        aspect-ratio: 4/3;
        z-index: -1;
    }

    .new_products .card_product_img img {
        position: absolute;
        left: 0;
        top: 0;
    }

    .new_products li:nth-of-type(1) .card_product_img img {
        width: 80%;
        left: 10%;
        top: 32px
    }

    .new_products li:nth-of-type(2) .card_product_img img {
        left: -10%;
        top: 16px;
    }

    .new_products li:nth-of-type(3) .card_product_img img {
        width: 150%;
        top: 24px;
        left: -58%;
    }

    .new_products li:nth-of-type(4) .card_product_img img {
        width: 74%;
        left: 13%;
        top: 40px
    }

    .grid_1 .card_product {
        padding: 2em 5%;
        display: flex;
        align-items: center;
        gap: 5%
    }

    .grid_1 .card_product_inner {
        display: flex;
        flex-direction: column;
        gap: 0.8em;
        flex: 1;
    }

    .grid_1 .card_product_img {
        width: max(25%, 220px);
        height: 100%;
    }

    .grid_1 .card_product_ttl {
        text-align: left;
    }

    .grid_1 .card_product_btn {
        margin-inline: auto 0;
    }

    .grid_1 .card_product_ttl {
        grid-row: 1/2;
        grid-column: 2/3;
        text-align: left;
    }

    .grid_1 .card_product_txt {
        grid-row: 2/3;
        grid-column: 2/3;
    }

    .grid_1 .card_product_btn {
        grid-row: 3/4;
        grid-column: 2/3;
        margin-left: auto;
        height: fit-content;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .card_product_img {
        order: -1;
    }

    .grid_1 .card_product_inner {
        display: contents;
    }

    .grid_1 .card_product_img img {
        position: inherit;
    }

    .grid_1 .card_product_btn {
        margin-inline: auto;
    }
}

@media (any-hover: hover) {
    .card_news img {
        transition: transform var(--transition);
    }

    .card_news:hover img {
        transform: scale(1.05);
    }
}

/* アニメーション */
.zoom-in {
    opacity: 0;
    transform: scale(.9);
    transition: opacity var(--transition-1s), transform var(--transition-1s);
}

.zoom-in_on {
    opacity: 1;
    transform: scale(1);
}

.fade-up {
    opacity: 0;
    translate: 0 30px;
    transition: opacity var(--transition-1s), translate var(--transition-1s);
}

.fade-up_on {
    opacity: 1;
    translate: 0 0;
}

.blur {
    filter: blur(10px);
    transition: filter var(--transition-1s);
}

.blur_on {
    filter: blur(0);
}

/* KVのアニメーション */
.stand-up {
    opacity: 0;
    transform: translateY(1em) rotateX(-90deg);
    position: relative;
}

.stand-up_on {
    --index: 0;
    animation: stand-up 1s forwards ease;
}

.top_kv .stand-up_on {
    animation: stand-up 1s calc(0.5s + 0.07s * var(--index)) forwards ease;
}

.ttl_sec:has(.stand-up) {
    display: flex;
    width: fit-content;
    perspective: 4em;
}

@keyframes stand-up {
    10% {
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg) translateY(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .stand-up,
    .stand-up_on {
        animation: none !important;
        opacity: 1 !important;
        transform: rotateX(0deg) translateY(0) !important;
    }
}

.scroll_fade {
    opacity: 0;
    will-change: opacity;
}

/* セクションスケール */
.scale {
    --scale: 0.9;
    transform: scale(var(--scale));
    transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
    .zoom-in {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .fade-up {
        opacity: 1 !important;
        translate: 0 0 !important;
    }

    .blur {
        filter: blur(0) !important;
    }
}

.left-right {
    opacity: 0;
    transform: translateX(-1em);
    position: relative;
}

.left-right_on {
    --index: 0;
    animation: left-right 1s calc(0.5s + 0.1s * var(--index)) forwards ease;
}

@keyframes left-right {
    20% {
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg) translateY(0);
        opacity: 1;
    }
}

/* ==============================
　header
============================== */
/* 上部ナビ */
.nav_btn {
    padding-inline: var(--btn-padding);
    background: var(--color-main);
    border-radius: 3em;
    border: 1px solid var(--color-main);
    transition: border var(--transition), background-color var(--transition), color var(--transition);
}

/* li:first-of-type .nav_btn {
    color: var(--color-main);
    border: 1px solid var(--color-main);
    background: transparent;
} */

/* PC */
@media screen and (min-width: 768.1px) {
    .header {
        --viewport-min: 768;
        --viewport-max: 1000;
        --size-min: 14;
        --size-max: 16;
        white-space: nowrap;
        --gap: clamp(0.375rem, -1.864rem + 4.66vw, 1.375rem);
        --btn-padding: min(var(--gap), 1em);
    }

    .nav_list,
    .header_btns>ul {
        display: contents;
    }

    /* メニュー左側 */
    .header_inner {
        position: fixed;
        mix-blend-mode: exclusion;
        display: flex;
        width: 100%;
        padding: 1em calc(5% + 9.5em + var(--gap) + var(--btn-padding) * 5) 1em 5%;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
        z-index: 99;
        text-align: center;
        gap: var(--gap);
    }

    .header nav {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-end;
        gap: var(--gap);
        margin-left: auto;
    }

    /* メニューボタン部 */
    .header_btns {
        position: fixed;
        right: 0;
        display: flex;
        padding: 1em 5% 1em 0;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
        z-index: 99;
        text-align: center;
        gap: var(--btn-padding);
    }

    .nav_btn {
        padding-inline: var(--btn-padding);
        background: var(--color-main);
        border-radius: 3em;
        border: 1px solid var(--color-main);
        transition: border var(--transition), background-color var(--transition), color var(--transition);
    }

    li:first-of-type .nav_btn {
        color: var(--color-main);
        border: 1px solid var(--color-white);
        background: var(--color-white);
    }

    .nav_btn .nav_item {
        bottom: calc(-0.7em + 1px);
    }

    .header_logo {
        width: clamp(100px, 8.5em, 140px);
        min-width: 100px;
    }

    .nav_menu {
        display: block;
        color: var(--color-white);
        font-weight: var(--bold);
        height: 2.4em;
        overflow: hidden;
        position: relative;
    }

    .nav_menu_over {
        margin-inline: -0.3em;
    }

    .nav_menu span.pc {
        --size-min: 12;
        --size-max: 14;
    }

    .nav_item {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 2em;
        bottom: -0.7em;
        transition: bottom var(--transition);
    }

    .nav_row {
        position: relative;
    }

    .nav_sub {
        position: absolute;
        display: flex;
        flex-direction: column;
        text-align: left;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition);
    }

    .nav_sub a {
        display: block;
        color: var(--color-white);
        padding-block: .5em;
    }
}

/* rootフォントが18.5px以上の場合 */
@media screen and (min-width: 768.1px) and (max-width: 1000px) {
    .mode_l .header {
        --gap: .5em;
    }

    .mode_l .header_btns {
        top: 2.5em;
    }

    .mode_l .header_inner {
        padding-right: calc(5% + .5em);
    }
}

/* PCかつホバー可能ブラウザ */
@media screen and (min-width: 768.1px) and (any-hover: hover) {

    .nav_btn:hover,
    li:first-of-type .nav_btn:hover {
        border: 1px solid var(--color-main-l);
        background: var(--color-main-l);
        color: var(--color-white);
    }

    .nav_row:hover .nav_sub {
        opacity: 1;
        visibility: visible;
    }

    .nav_menu:hover .nav_item {
        bottom: 2.2em;
    }

    .nav_menu.nav_btn:hover .nav_item {
        bottom: calc(2.2em + 1px);
    }

}

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

    /* ロゴ */
    .header_logo {
        position: fixed;
        inset: 20px auto auto min(5vw, 16px);
        z-index: 100;
        width: 100px;
        mix-blend-mode: exclusion;
    }

    /* バーガーボタン */
    .burger_btn {
        position: fixed;
        inset: 8px min(5vw, 16px) 0 auto;
        z-index: 100;
        width: 48px;
        height: 48px;
        mix-blend-mode: exclusion;
    }


    .burger_btn span {
        position: absolute;
        width: 24px;
        height: 2px;
        background: var(--color-white);
        border-radius: 2px;
        right: 10px;
        transition: transform var(--transition), width var(--transition), top var(--transition);
        transform: rotate(0deg);
    }

    /* バーガーライン */
    .burger_btn span:first-of-type {
        top: 30%;
    }

    .burger_btn span:nth-of-type(2) {
        top: 45%;
    }

    .burger_btn span:nth-of-type(3) {
        top: 60%;
    }

    .header_nav {
        position: fixed;
        inset: 0;
        z-index: 99;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 56px 3% 5em;
        line-height: var(--line-height-xs);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity var(--transition), visibility 0s linear .3s;
    }

    .nav_list {
        position: relative;
        z-index: 100;
        margin: 0;
        background: #fffd;
        padding: min(1em, 16px) clamp(min(2em, 32px), 10%, 40px) min(2em, 32px);
        border-radius: 14px;
        backdrop-filter: blur(16px);
    }

    .nav_single,
    .nav_row {
        border-bottom: 1px solid #ddd;
        position: relative;
    }

    .nav_menu {
        display: block;
        padding: 1em 0;
        position: relative;
    }

    .nav_single .nav_menu::after {
        content: "";
        position: absolute;
        inset: 1.2em 0 auto auto;
        width: .6em;
        height: .6em;
        background: url("img/ico_arrow_b.svg") no-repeat center;
        background-size: contain;
    }

    .nav_row .nav_menu {
        width: calc(100% - 48px);
    }

    /* ＋ボタン */
    .nav_toggle {
        appearance: none;
        border: 0;
        background: transparent;
        cursor: pointer;
        padding: 1em 0;
        width: 48px;
        height: 3em;
        position: absolute;
        top: 0;
        right: 0;
    }

    .nav_row .nav_toggle span:first-of-type {
        display: block;
    }

    .nav_row .nav_toggle span:nth-of-type(2) {
        display: none;
    }

    .nav_row:has(.nav_row_open) .nav_toggle span:first-of-type {
        display: none;
    }

    .nav_row:has(.nav_row_open) .nav_toggle span:nth-of-type(2) {
        display: block;
    }

    /* ＋の線（CSSで描画） */
    .nav_toggle::before,
    .nav_toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -3px;
        width: 10px;
        height: 1px;
        border-radius: 1em;
        background: var(--color-txt);
        transform: translate(-50%, -50%);
    }

    .nav_toggle::after {
        transform: translate(-50%, -50%) rotate(90deg);
        transition: transform var(--transition);
    }

    /* 開いたら「＋→−」に（縦線を横に回して重ねる） */
    .nav_row_open .nav_toggle::after {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    /* サブメニュー */
    .nav_sub {
        margin: 0;
        padding: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--transition), opacity var(--transition), margin-bottom var(--transition);
    }

    .nav_row_open .nav_sub {
        opacity: 1;
        max-height: 400em;
        margin-bottom: .5em;
    }

    .nav_sub a {
        display: block;
        padding: .6em 1em;
    }

    .header_nav .nav_btns {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-top: 2em;
        gap: .8em;
    }

    .header_nav .nav_btn {
        color: var(--color-txt);
        border: 1px solid var(--color-txt);
        background: transparent;
        padding: .8em;
        text-align: center;
        width: min(100%, 10em);
    }

    .header_nav .nav_btn:last-of-type {
        border: none;
        border: 1px solid var(--color-main);
        background: var(--color-main);
        color: var(--color-white);
    }

    /* バーガーアクティブ */
    .header_nav.burger_active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity var(--transition), visibility 0s;
    }

    .header_nav::before {
        content: "";
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        background: #0003;
        backdrop-filter: blur(4px);
        transition: opacity var(--transition), visibility var(--transition);
    }

    .header_nav.burger_active::before {
        visibility: visible;
        opacity: 1;
    }

    /* バーガーライン */
    .burger_btn:has(+.burger_active) span:first-of-type {
        transform: rotate(45deg);
        top: 45%;
    }

    .burger_btn:has(+.burger_active) span:nth-of-type(2) {
        width: 0;
    }

    .burger_btn:has(+.burger_active) span:nth-of-type(3) {
        transform: rotate(-45deg);
        top: 45%;
    }

    body:has(.burger_active) {
        overflow: hidden;
    }
}

/* RECRUITフロートバナー */
.float {
    position: fixed;
    bottom: -.5em;
    z-index: 100;
}

.float.float_hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}

.float a {
    display: block;
    background: linear-gradient(180deg, var(--color-main-l) 0%, var(--color-main) 100%);
    line-height: 1;
}

.float span:first-of-type {
    --size-min: 24;
    --size-max: 24;
    color: #FDFF9F;
    font-weight: var(--bold);
}

.float span:last-of-type {
    color: #fff;
}

.float_btn {
    position: absolute;
}

.float_btn::before,
.float_btn::after {
    content: "";
    position: absolute;
    background: var(--color-main);
    width: 55%;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.float_btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* PC */
@media screen and (min-width: 768.1px) {
    .float {
        right: 5%;
    }

    .float a {
        padding: 1.2em 2.4em 1.5em;
        border-radius: 10px 10px 0 0;
    }

    .float span {
        display: block;
    }

    .float span:last-of-type {
        margin-top: .3em;
    }

    .float_btn {
        width: 1.3em;
        height: 1.3em;
        background: var(--color-white);
        top: .4em;
        right: .4em;
        border-radius: 50%;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .float {
        right: 0;
        width: 100%;
    }

    .float a {
        padding: 1.5em 5% 2em;
        display: flex;
        align-items: center;
        gap: .8em;
    }


    .float_btn {
        width: 2.4em;
        height: 2.4em;
        top: calc(50% - 1.2em);
        right: 2.5%;
    }

    .float_btn::before,
    .float_btn::after {
        background: var(--color-white);
    }

}

/* PCかつホバー可能ブラウザ */
@media screen and (min-width: 768.1px) and (any-hover: hover) {
    .float {
        transition: bottom var(--transition);
    }

    .float:hover {
        bottom: 0;
    }

    .float a:hover {
        opacity: 1;
    }
}

/* ==============================
 footer
============================== */
.footer,
.footer a {
    color: var(--color-gray);
    --size-min: 13;
    --size-max: 13;
}

.footer_nav {
    display: flex;
    gap: 1.5em 1em;
}

.footer_logo {
    display: block;
    margin: 0 auto 0 0;
    width: 150px;
    min-width: 150px;
}

.footer_item:not(:last-of-type)>a {
    font-weight: var(--bold);
}

.footer_info {
    justify-content: space-evenly;
    gap: 1em 1.5em;
}

/* PC */
@media screen and (min-width: 768.1px) {
    .footer_menu {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5em;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .footer_nav {
        flex-direction: column;
    }

    .footer_logo {
        min-width: 0;
        max-width: 110px;
        margin: 0 auto;
    }

    .footer_menu {
        column-count: 2;
        column-gap: 1em;
    }

    .footer_item {
        break-inside: avoid;
		margin-bottom:.5em;
    }
}

/* ==============================
 kvエリア
============================== */
/* ==============================
 TOPページ
============================== */
.top_kv {
    min-height: 100vh;
    padding-block: calc(75px + 3em) 3em;
    display: grid;
    align-items: center;
}

.top_kv_bg {
    position: fixed;
    inset: 0;
    z-index: -1;
}

.top_kv_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, transparent 75%, #2A2A2A 100%);
    mix-blend-mode: multiply;
}

.top_kv_cont {
    position: relative;
    color: var(--color-white);
}

.top_kv_ttl,
.company_ttl {
    width: fit-content;
    --size-min: 60;
    --size-max: 128;
    font-weight: var(--bold);
    line-height: var(--line-height-xs);
    position: relative;
    overflow: hidden;
}

.top_kv_ttl p {
    display: flex;
    width: fit-content;
    perspective: 2em;
}

.top_kv_ttl-sub {
    --size-min: 14.5;
    --size-max: 31;
    font-weight: var(--bold);
    margin-top: .5em;
}

.mode_l .top_kv_ttl {
    --size-min: 80;
    --size-max: 100;
}

.mode_l .top_kv_ttl-sub {
    --size-min: 19;
    --size-max: 24;
}

/* SP */
@media screen and (max-width: 768px) {
    .top_kv {
        padding-block: 4em;
    }

    .top_kv_ttl-sub {
        --size-min: 16;
        font-weight: normal;
        margin-top: 1em;
    }

    .mode_l .top_kv_ttl,
    .mode_l .company_ttl {
        --size-min: 40;
        --size-max: 200;
    }

    .mode_l .top_kv_ttl-sub {
        --size-min: 18;
    }
}

/* 動画の再生ボタン */
.movie_toggle {
    position: absolute;
    right: min(5%, 16px);
    bottom: max(10vh, 5.5em);
    width: 64px;
    height: 64px;
    border: 1px solid var(--color-white);
    border-radius: 64px;
    background: transparent;
    cursor: pointer;
}

/* 再生中 */
.movie_toggle[data-state="playing"]::before {
    content: "";
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 16px;
    border-inline: 2px solid var(--color-white);
    transition: var(--transition);
}

/* 停止中 */
.movie_toggle[data-state="paused"]::before {
    content: "";
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent var(--color-white);
    margin-left: 2px;
    transition: var(--transition);
}

.movie_toggle:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 3px;
}

.top_message {
    padding-block: calc(var(--unit-l)*2) 0;
}

.top_message .bold {
    --size-min: 20;
    --size-max: 32;
    line-height: 1.3;
    margin-bottom: 1.8em;
}

.top_message .scroll_fade+.scroll_fade {
    display: block;
    margin-top: 1em;
}

.bg_floor {
    position: relative;
    overflow: hidden;
    height: calc(var(--unit-l)*3);
    margin-top: calc(var(--unit-l)*1.5);
    background: linear-gradient(to bottom, var(--color-gray), #fff);
    border-top: 1px solid #666;
}

/* 面を「グラデーション全体」にかける */
.bg_floor_plane {
    position: absolute;
    inset: 0;
    pointer-events: none;
    width: 200vw;
    height: calc(var(--unit-l)*9);
    opacity: .2;

    /* 奥行き調整 */
    transform-origin: 50vw 0;
    transform: perspective(900px) rotateX(86deg) translateY(0);

    /* 線の設定（縦・横で別） */
    --vx: 4vw;
    /* 縦線の間隔 */
    --vy: 4vw;
    /* 横線の間隔（←ここで「横線が多すぎる」を解決） */

    --lineX: 1px;
    --lineY: 7px;

    /* 線色（濃さ） */
    --colX: rgba(255, 255, 255, 1);
    --colY: rgba(255, 255, 255, 1);

    /* 縦線（固定）＋横線（動く） */
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0 calc(var(--vx) - var(--lineX)),
            var(--colX) calc(var(--vx) - var(--lineX)) var(--vx)),
        repeating-linear-gradient(0deg,
            transparent 0 calc(var(--vy) - var(--lineY)),
            var(--colY) calc(var(--vy) - var(--lineY)) var(--vy));

    /* 横線だけ動かす */
    background-position: 0 0, 0 0;
    animation: floorMove 2s linear infinite;

    /* 上に行くほど薄くする（床を“全体に出しつつ”自然に消す） */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, 0) 100%);
}

@keyframes floorMove {
    to {
        background-position: 0 0, 0 calc(var(--vy) * -1);
    }
}

/* 動きを減らす */
@media (prefers-reduced-motion: reduce) {
    .bg_floor_plane {
        animation: none;
    }
}


/* PC */
@media screen and (min-width: 768.1px) {
    .top_message .scroll_fade+.scroll_fade {
        margin-top: .5em;
    }

}

/* SP */
@media screen and (max-width: 768px) {
    .bg_floor_plane {
        height: calc(var(--unit-l) * 12);
        /* --vx: 50px; */
        --vx: 11vw;
        --vy: 60px;
    }
}

/* products　リスト */
.product_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    gap: var(--space-40) 5%;
    text-align: center;
}

.product_list_item {
    max-width: 280px;
}

.product_list_item img {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: bottom;
}

.product_list_item figcaption {
    margin-top: .5em;
    line-height: var(--line-height-s);
    --size-min: 16;
    --size-max: 18;
}

/* PC */
@media screen and (min-width: 768.1px) {
    .product_list_item figcaption {
        font-weight: var(--bold);
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .product_list {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-32) 5%;
    }

    .product_list_item {
        max-width: 220px;
    }

    .product_list_item img {
        aspect-ratio: 5/4;
    }
}

@media (any-hover: hover) {
    .product_list img {
        transition: transform var(--transition);
    }

    .product_list a:hover img {
        transform: scale(0.97);
    }
}

/* works */
body.color_business #top_works,
body.color_business #top_business {
    background-color: var(--color-gray);
}

#top_works,
#top_business {
    transition: background-color var(--transition);
    overflow: hidden;
}

#top_works {
    padding-bottom: calc(var(--unit-xl) * 2);
}

/* worksスライダー */

#works_swiper {
    z-index: 2;
}

#works_swiper2 {
    margin-top: -8vw;
    pointer-events: none;
}

.works_swiper .swiper-slide {
    position: relative;
    aspect-ratio: 5/3;
    color: #ffffff;
    text-align: center;
}

#works_swiper .swiper-slide a::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0003;
    z-index: 1;
	transition: background-color var(--transition);
}

.works_swiper .swiper-slide span {
    position: absolute;
	bottom: .5em;
    right: .7em;
    line-height: 1;
    color: var(--color-white);
    --size-min: 32;
    --size-max: 48;
    font-weight: var(--bold);
}

.works_swiper_img {
    aspect-ratio: 5/3;
    object-fit: cover;
}

@media (any-hover: hover) {
	#works_swiper .swiper-slide a:hover::before{
		background-color: transparent;
	}
}

#works_swiper2 .swiper-slide {
    aspect-ratio: 5/3;
    object-fit: cover;
}

#works_swiper2 .swiper-slide img {
    transition: opacity .3s ease-in-out;
    opacity: 0;
    transform: scaleY(-1);
    filter: blur(8px);
    /* ★追加：下に向かって透過（下半分が溶ける） */
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 85%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 85%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#works_swiper2 .swiper-slide-active img {
    opacity: 0.6;
}

[class*="swiper-button"] {
    border-radius: 50%;
    border: 1px solid var(--color-white);
    background: transparent;
}

[class*="swiper-button"] svg {
    display: none;
}

.swiper-button-next {
    right: calc(20% - 22px) !important;
}

.swiper-button-prev {
    left: calc(20% - 22px) !important;
}

[class*="swiper-button"]::after {
    content: "";
    position: absolute;
    width: 25%;
    height: 25%;
    border-right: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
}

.swiper-button-next::after {
    transform: rotate(-45deg);
    margin-right: 10%;
}

.swiper-button-prev::after {
    transform: rotate(135deg);
    margin-left: 10%;
}

.works_swiper+.btn_main {
    margin-top: -15vw;
    z-index: 3;
}

@media (max-width: 768px) {
    [class*="swiper-button"] {
        width: 28px;
        height: 28px;
        margin-top: -14px !important;
        background-color: #0006;
    }

    .swiper-button-next {
        right: 3vw !important;
    }

    .swiper-button-prev {
        left: 3vw !important;
    }

    .works_swiper+.btn_main {
        margin-top: -25vw;
    }
}

/* BUSINESS */

#top_business {
    padding-top: calc(var(--unit-xl) * 2);
}

/*回るキューブ*/
:root {
    --cube-size: min(16vw + 1px + 144px, 336px + 1px);
    --cube-cell: min(1vw + 9px, 21px);
    --cube-line: rgba(255, 255, 255, .6);
    --cube-speed: 40s;
}

.scene {
    width: var(--cube-size);
    height: var(--cube-size);
    perspective: 900px;
    perspective-origin: 50% 50%;
}

/* 3D空間の中で回る本体 */
.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(35deg);
}

.cube_tilt {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
/*     transform: rotateX(-26deg) rotateZ(-12deg); */
    transform: rotateX(250deg) rotateZ(28deg) rotatey(12deg);
}

/* 6面 */
.face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;

    /* ワイヤーフレーム風グリッド */
    background-image:
        repeating-linear-gradient(to right, var(--cube-line) 0 .5px, transparent .5px var(--cube-cell)),
        repeating-linear-gradient(to bottom, var(--cube-line) 0 .5px, transparent .5px var(--cube-cell));
    opacity: .95;
}

/* 各面を奥行き方向に配置 */
.front {
    transform: translateZ(calc(var(--cube-size)/2));
}

.back {
    transform: rotateY(180deg) translateZ(calc(var(--cube-size)/2));
}

.right {
    transform: rotateY(90deg) translateZ(calc(var(--cube-size)/2));
}

.left {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-size)/2));
}

.top {
    transform: rotateX(90deg) translateZ(calc(var(--cube-size)/2));
}

.bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--cube-size)/2));
}

.cube.is_rotating {
    animation: spin var(--cube-speed) linear infinite;
}

/* アクセシビリティ：動きを減らす設定なら止める */
@media (prefers-reduced-motion: reduce) {
    .cube.is_rotating {
        animation: none;
    }
}

/* ★35deg から回し始める */
@keyframes spin {
    from {
        transform: rotateY(35deg);
    }

    to {
        transform: rotateY(395deg);
    }

    /* 35 + 360 */
}

/* SP */
@media screen and (max-width: 768px) {
    :root {
        --cube-size: calc(48vw + 1px);
        --cube-cell: 4vw;
        --cube-line: rgba(255, 255, 255, .6);
        --cube-speed: 40s;
    }

    .scene {
        margin: 12vw auto 24vw;
    }
}

#top_business header {
    flex: 1;
}

/* PC */
@media screen and (min-width: 768.1px) {
    #top_business .flex {
        gap: 5%;
        margin-bottom: 3em;
        justify-content: space-between;
    }

    #top_business header {
        max-width: 470px;
    }
}

/* COMPANY */
#top_company {
    position: relative;
}

/* PC */
@media screen and (min-width: 768.1px) {
    #top_company::after {
        content: "";
        position: absolute;
        width: 50%;
        height: 100%;
        inset: 0 0 0 auto;
        background: url("img/kv.jpg")center;
        background-size: cover;
    }

    #top_company .inner>* {
        width: 46%;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    #top_company::after {
        content: none;
    }
}

/* お問い合わせCTA */
.img_cover .cta [class*="btn_"] {
    background-color: transparent;
}

.img_cover:has(.cta) video {
    opacity: .2;
}

@media (any-hover: hover) {
    .img_cover .cta [class*="btn_"] {
        transition: background-color var(--transition), color var(--transition);
    }

    .img_cover .cta [class*="btn_"]:hover {
        opacity: 1;
        background-color: var(--color-white);
        color: var(--color-black);
    }
}

/* 採用情報 */

.top_recruit_cont {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.top_recruit_cont img {
    max-width: 200px;
    margin-inline: auto;
}

.top_recruit_cont>p {
    margin-bottom: 2em;
}

.top_recruit_cont .flex {
    align-items: center;
    justify-content: center;
    gap: .5em 1em;
    flex-wrap: wrap;
}

.top_recruit_cont .btn_main {
    margin-inline: 0;
    width: min(300px, 100%);
}

/* PC */
@media screen and (min-width: 768.1px) {
    .top_recruit .btn_main {
        /* min-width: 320px; */
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .top_recruit_cont>a {
        order: 0;
    }

    .top_recruit_cont>p {
        order: -1;
    }

    .top_recruit_cont>div {
        order: 2;
    }
}

/* ==============================
 第二階層
============================== */
.wrap_s:has(.ttl_2),
.wrap_m:has(.ttl_2),
.wrap_l:has(.ttl_2),
.wrap_xl:has(.ttl_2) {
    margin-top: 4.4em;
}
.wrap_s:has(.ttl_2){
	padding-block:;
}
.wrap_s:has(.news_header) {
    padding-block: var(--space-40);
}

/* WORKS */
.works_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-24) 2.5%;
}

.works_card {
    aspect-ratio: 17/10;
}

.works_card_img {
    filter: grayscale(100%);
    transition: filter var(--transition);
}

.works_card_year {
    --size-max: 28;
    --size-min: 28;
    position: absolute;
    right: .8em;
    bottom: .2em;
    display: flex;
    align-items: center;
    gap: .2em;
    transition: right var(--transition);
}

.works_card_year::after {
    content: "";
    width: .4em;
    height: .4em;
    border-right: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
    transform: translatey(.1em) rotate(-45deg);
}

@media (any-hover: hover) {
    .works_card:hover .works_card_img {
        filter: grayscale(0%);
    }

    .works_card:hover .works_card_year {
        right: .5em;
    }
}

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

    .wrap_s:has(.ttl_2),
    .wrap_m:has(.ttl_2),
    .wrap_l:has(.ttl_2),
    .wrap_xl:has(.ttl_2) {
        margin-top: 64px;
    }

    .wrap_s:has(.ttl_2) {
        padding-top: var(--unit-s);
    }
}

.works_month:not(:first-of-type) {
    margin-top: var(--unit-s);
}

.works_month_ttl {
    --size-max: 50;
    --size-min: 50;
    margin-bottom: .5em;
    color: var(--color-main-l);
}

.works_month_ttl span span {
    font-size: .7em;
    margin-left: .3em;
}

/* COMPANY */
.company_ttl::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg, transparent 1.31%, #000 93.44%);
}

.company_message .bold {
    --size-min: 18;
    --size-max: 32;
    line-height: 1.3;
    margin-bottom: 1.2em;
}

.company_message .bg_floor {
    margin-top: var(--unit-l);
}

.company_ttl p {
    display: flex;
    width: fit-content;
}

.stance_head {
    padding-bottom: var(--space-40);
}

.stance_txt {
    --size-max: 20;
    --size-min: 16;
}

/* PC */
@media screen and (min-width: 768.1px) {
    .company_ttl {
        margin-bottom: -1.5em;
    }

    .company_message .bold {
        text-align: right;
    }

    .company_message .bold p+p {
        margin-top: .5em;
    }

    .company_message .font_m {
        text-align: right;
    }

    .stance_head {
        position: sticky;
        top: 0;
        padding-block: var(--unit-m) var(--space-40);
    }

    .stance_cont {
        position: sticky;
        top: calc(var(--unit-m) + var(--space-40) + 4.2em);
        height: calc(100vh - var(--unit-m) - var(--space-40));
        min-height: calc(var(--unit-l) * 2 + 10em);
    }

    .stance_cont .wrap_l {
        height: 100%;
        position: relative;
    }

    .stance_txt {
        position: absolute;
        margin-top: 0 !important;
        top: max(40vh - 2em, var(--unit-l) + 4em);
    }

}

/* SP */
@media screen and (max-width: 768px) {
    .company_ttl::after {
        background: linear-gradient(111deg, transparent 0%, #000 100%);
    }

    .company_message .bold {
        margin-top: 1.5em;
    }

    .company_message .bold p+p {
        margin-top: 1em;
    }
}

.list_prof {
    display: flex;
    gap: .3em 10%;
    padding-block: 1.5em;
}

.list_prof+.list_prof {
    border-top: 1px solid var(--color-gray-l);
}

.list_prof_ttl {
    font-weight: var(--bold);
}

.list_prof_txt {
    flex: 1;
}

.company_prof {
    position: sticky;
    top: 0;
}


.maps iframe {
    aspect-ratio: 3/2;
    max-height: 350px;
}

.maps div {
    flex: 1;
    gap: .5em;
}

.grid_2:has(.maps) {
    grid-template-columns: 1fr, 1fr;
    gap: var(--unit-s) 5%;
}

.col_2 {
    margin-top: calc(var(--unit-s) * -1 + 1em);
}

/* PC */
@media screen and (min-width: 768.1px) {
    .col_2 {
        grid-column: 1 / 3;
    }

    .list_prof_ttl {
        width: 4em;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .grid_2:has(.maps) {
        grid-template-columns: 1fr
    }

    .maps iframe {
        aspect-ratio: 1;
    }

    .maps .btn_min {
        margin-left: auto;
    }

    .list_prof {
        flex-direction: column;
    }
}

/* Business */
.business_card {
    position: relative;
}


.business_card_num {
    --size-max: 20;
    --size-min: 20;
    line-height: 1.2;
    margin-bottom: auto;
}

.business_card_num .oswald {
    --size-max: 70;
    --size-min: 70;
    font-weight: lighter;
}

.business_card_ttl {
    --size-max: 26;
    --size-min: 22;
    margin-block: 1.5em .5em;
    line-height: 1.5;
}

.business_card.bg_main .business_card_cont {
    margin-left: auto;
}

.business_card.bg_black .business_card_img {
    left: auto;
    right: 0;
}

/* PC */
@media screen and (min-width: 768.1px) {
    .business_card_cont {
        display: flex;
        width: 45%;
        flex-direction: column;
        aspect-ratio: 1;
    }

    .business_card hgroup {
        display: contents;
    }


    .business_card_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .business_card .wrap_l {
        padding-bottom: var(--unit-s);
    }

    .business_card_img {
        aspect-ratio: 3/2;
    }
}

/* contact */
header:has(.contact_links) {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--unit-s) 1em;
    flex-wrap: wrap;
}

.contact_links {
    display: flex;
    align-items: center;
    gap: 1em .5em;
    font-weight: var(--bold);
    flex-wrap: wrap;
	margin-left:auto;
}

.contact_links_btns {
    display: flex;
    align-items: center;
    gap: .3em;
}

.contact_links_btns .btn_min {
    background-color: #00ABEB;
    border: 1px solid #00ABEB;
    padding: .5em 1.4em .4em;
}

@media (any-hover: hover) {
	.contact_links_btns .btn_min:hover{
		color: #00ABEB;
	}
}

.contact_links_logo img {
    width: 8.5em;
}

.cf7_row{
	padding-block:1em
}

.cf7_label{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.4em;
	color:var(--color-gray);
}

.cf7_req{
	width:.6em;
	height:.6em;
	border-radius:2em;
	background:var(--color-main);
}

.cf7_input,
.cf7_textarea{
	width:100%;
	background-color:var(--color-white);
	padding:.7em;
	border:1px solid #909090;
	font-family:var(--font);
	margin-top:.5em;
}

.cf7_input::placeholder,
.cf7_textarea::placeholder{
	color:#818181;
}

.cf7_row .wpcf7-list-item{
	margin-left:0;
}

:focus-visible {
    outline: var(--color-main) auto 1px;
}

input[type="checkbox"]{
	width: 1em;
    height: 1em;
}

input[type="checkbox"]:checked{
	accent-color: var(--color-main);
}

.cf7_submit{
	width:100%;
	padding:.8em;
	background-color:var(--color-txt);
	color:var(--color-white);
	text-align:center;
	font-weight:bold;
	transition: background-color var(--transition);
}

.wpcf7 .wpcf7-submit:disabled{
	background-color:#bbb;
}

@media (any-hover: hover) {
	.cf7_submit:hover{
		background-color:var(--color-main);
	}
}

/* ============================== 
 記事 single
============================== */
.news_header {
    display: flex;
    flex-direction: column;
    gap: 1em;
    line-height: 1.3;
}

.news_ttl {
    line-height: 1.5;
    --size-max: 28;
    --size-min: 20;
    font-weight: var(--bold);
}

.news_detail {
    line-height: 1.9;
}

.news_detail h2 {
    --size-max: 24;
    --size-min: 20;
    margin-bottom: 1.3em;
    line-height: 1.5;
    font-weight: var(--bold);
	padding-left:.6em;
	border-left:.2em solid var(--color-txt);
}

.news_detail *+h2 {
    margin-top: 3em;
}

.news_detail h3 {
    --size-max: 20;
    --size-min: 18;
    line-height: 1.6;
    font-weight: var(--bold);
    margin-bottom: 0.8em;
}

.news_detail *+h3 {
    margin-top: 1.8em;
}

.news_detail h4 {
    --size-max: 18;
    --size-min: 16;
    line-height: 1.6;
    font-weight: var(--bold);
    margin-bottom: 0.5em;
}

.news_detail *+h4 {
    margin-top: 1em;
}

.news_detail .wp-block-image,
.news_detail .wp-block-gallery {
    margin: 2.5em auto;
}
.news_detail .wp-block-image .wp-element-caption{
	margin-block:1em 2.5em;
}

.news_detail a:not(:has(img)) {
    text-decoration: underline 1px;
    text-underline-offset: 0.15em;
}

.news_detail .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
	background: linear-gradient(0deg, #000c, #0000);
	padding:2em .5em .5em;
	line-height:1.3;
}

.news_detail p+p {
    margin-top: 1em;
}

.news_detail figcaption{
	line-height:1.3;
}

.news_detail ul{
	list-style:"・";
	padding-left:1.2em;
	margin-block:1em;
	line-height:1.7;
}
.news_detail li+li{
	margin-top:.3em;
}
.news_detail ol{
	list-style:numbers;
	padding-left:1.2em;
	margin-block:1em;
	line-height:1.6;
}

.works_pagination {
    position: fixed;
    display: flex;
    gap: .8em;
    right: 5%;
    bottom: 3em;
    color: #707070;
    background-color: var(--color-black);
    padding: .2em 1.5em;
    border-radius: 6px;
    white-space: nowrap;
    width: fit-content;
    border: 1px solid #959595;
	z-index:80;
}

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

.cat_pagination .nav-links{
	--size-min:14;
	--size-max:14;
	width:fit-content;
	margin-inline:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	line-height:2;
	gap:.4em;
}

.cat_pagination .nav-links .page-numbers{
	width:2em;
	height:2em;
	background:#eee;
	position:relative;
}

.cat_pagination .nav-links .page-numbers.next::after,
.cat_pagination .nav-links .page-numbers.prev::after{
	content:"";
	position:absolute;
    background-color: var(--color-txt);
    width: 1em;
    height: .8em;
	clip-path: polygon(40% 0, 90% 50%, 40% 100%, 35% 95%, 80% 50%, 35% 5%);
	top:calc(50% - .4em);
	left:calc(50% - .5em);
}

.cat_pagination .nav-links .page-numbers.prev::after{
	transform:scaleX(-1);
}

.cat_pagination .nav-links .page-numbers.current{
	border-bottom:1px solid #999;
	color:#999;
}

.single_pagination{
	display:flex;
	gap:2em;
	justify-content:center;
}

.single_pagination>*{
	position:relative;
	border-bottom:1px solid var(--color-txt);
}

.news_detail .single_pagination a{
	text-decoration:none;
}

.single_pagination_prev{
	padding:0 1em 0 2em;
	text-decoration
}


.single_pagination_back{
	padding:0 1em;
}

.single_pagination_next{
	padding:0 2em 0 1em;
}

.single_pagination_prev::before,
.single_pagination_next::before{
	content:"";
	position:absolute;
    bottom: -1px;
	width: 10px;
    height: 1px;
    background-color: var(--color-txt);
}

.single_pagination_prev::before{
    transform: rotate(-45deg);
	left:0;
    transform-origin: 0 0;
}

.single_pagination_next::before{
    transform: rotate(45deg);
	right:0;
    transform-origin: 100% 0;
}

/* SP */
@media screen and (max-width: 768px) {
    .works_pagination {
        right: 50%;
        transform: translateX(50%);
        bottom: 1em;
    }
}