@charset "UTF-8";

:root {
    --color-corporate: #841617;
    --color-corporate-dark: #5e0e18;
    --color-corporate-pale: #fbf8f8;
    --color-corporate-light: #f0d0d1;
    --color-corporate-bright: #dd0a0a;
    --color-corporate-tag: #94B8B5;
    --color-corporate-bg: #EEF3F2;
    --color-corporate-btn: #839492;
    --color-primary: #444;
    --color-attention: #841617;
    --color-list: #a9afaf;
    --color-black: #000;
    --color-basic: #333;
    --color-dark: #666;
    --color-light: #AAA;
    --color-pale: #F7F7F7;
    --color-non: #FFF;
    --color-level0: #666;
    --color-level1: #777;
    --color-level2: #888;
    --color-here: #DDD;
    --color-inner-here: #FFF;
    --color-line: #ccc;

    --font-family-ja: "Noto Sans JP", "游ゴシック Medium", Yu Gothic Medium, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --font-family-base: "游ゴシック Medium", Yu Gothic Medium, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --font-family-ja-min: "游明朝", "YuMincho", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    --font-family-en: "Roboto Condensed", sans-serif;
    --font-family-num: "Roboto", sans-serif;

    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
    --box-shadow: 0 4rem 3rem -2rem hsl(200deg 0% 50% / 30%);
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --gap: 10px;
    --n: 10px;
}

@media (min-width: 801px) {
    html {
        scrollbar-width: thin;
    }
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* :-webkit-any-link {
    color: var(--color-basic);
}

:-moz-any-link{
    color: var(--color-basic);
}

:any-link{
    color: var(--color-basic);
} */

/* :-webkit-any-link:where(:not(.wp-element-button)), */
/* :-moz-any-link:where(:not(.wp-element-button)), */
:any-link:where(:not(.wp-element-button)) {
    color: var(--color-basic);
}

a {
    text-decoration: none;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: opacity .8s ease !important;
    cursor: pointer;
}

a.btn:hover {
    text-decoration: none;
}

@media (min-width: 1025px) {

    a[href^="tel:"] {
        pointer-events: none;
    }

}

::-moz-selection {
    background: var(--color-light);
}

::selection {
    background: var(--color-light);
}

*:focus {
    outline: none;
}

#app {
    overflow-x: clip;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    font-family: var(--font-family-ja);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-basic);
    margin: 0;
    padding: 0;
    overflow: clip;
    overflow-x: visible;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

p {
    line-height: 2;
    margin: 0 0 2rem;
    font-size: 1.4rem;
    font-family: var(--font-family-base);
}

p span {
    font-weight: 600;
}

h1 {
    position: relative;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0;
    margin: 0;
}

h1 span {
    display: block;
    font-family: var(--font-family-en);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .1rem;
}

h2 {
    position: relative;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 1rem 0;
    margin: 0 0 1rem;
}

h2 span {
    display: block;
    font-family: var(--font-family-en);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1rem;
}

h3 {
    position: relative;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 1rem 0;
    margin: 0 0 1rem;
}

h3 span {
    display: block;
    font-family: var(--font-family-en);
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1rem;
}

h4 {
    position: relative;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 1rem 0;
    margin: 0 0 1rem;
}

h4 span {
    display: block;
    font-family: var(--font-family-en);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1rem;
    margin: 0 0 .3rem;
}

.head-block .deco {
    font-family: var(--font-family-num);
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: .05rem;
}

.head-block h1+.deco {
    margin: 3rem 0 1rem;
}

.deco span {
    display: block;
    font-family: var(--font-family-en);
    font-size: clamp(4.6rem, 4.009rem + 2.49vw, 6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04rem;
}

.deco span.font-num {
    font-family: var(--font-family-num);
}

.head-block h1+.deco span {
    font-family: var(--font-family-en);
    font-size: clamp(5rem, 2.889rem + 8.889vw, 10rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02rem;
}

.v1 {
    font-size: 2.2rem;
}

.v1 span {
    font-size: 1.4rem;
    letter-spacing: 0.05rem;
}

.v2 {
    font-size: 2rem;
}

.v2 span {
    font-size: clamp(3.6rem, 3.178rem + 1.78vw, 4.6rem);
}

.v3 {
    border: none !important;
}

.v3 span {
    font-family: var(--font-family-ja);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 .3rem;
}

.v4 {
    font-family: var(--font-family-en);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.v4 span {
    font-family: var(--font-family-en);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
    line-height: 1.2;
    display: block;
}

.responsive {
    display: block;
    margin: auto;
}

.center {
    display: block;
    text-align: center;
}

.right {
    display: block;
    text-align: right;
}

.underline {
    text-decoration: none;
    border-bottom: 2px solid var(--color-basic);
    padding-bottom: 2px;
    font-weight: 400;
}

.link {
    text-decoration: none;
    border-bottom: 2px solid var(--color-basic);
    padding-bottom: 2px;
    font-weight: 400;
}

.tag {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
}

.mxw-600 {
    max-width: 600px !important;
    margin: auto;
}

.mxw-800 {
    max-width: 800px !important;
    margin: auto;
}

.mxw-1000 {
    max-width: 1000px !important;
    margin: auto;
}

.sp {
    display: block !important;
}

.pc {
    display: none !important;
}

@media (min-width: 821px) {

    .sp {
        display: none !important;
    }

    .pc {
        display: block !important;
    }

}

hr {
    border: none;
    border-bottom: 1px solid var(--color-line);
    margin: 2rem 0;
}

a.btn,
span.btn,
button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    vertical-align: middle;
    padding: .8rem 3rem;
    background: var(--color-basic);
    color: var(--color-non);
    text-decoration: none;
    font-family: var(--font-family-ja);
    font-size: 1.5rem;
    font-weight: 400;
    -webkit-transition: background-color 0.5s ease, color 0.5s ease !important;
    -moz-transition: background-color 0.5s ease, color 0.5s ease !important;
    -ms-transition: background-color 0.5s ease, color 0.5s ease !important;
    -o-transition: background-color 0.5s ease, color 0.5s ease !important;
    transition: background-color 0.5s ease, color 0.5s ease !important;
    border: none;
    cursor: pointer;
    justify-content: center;
}

.btn span {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-en);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.05rem;
    line-height: 1;
    transform: translateY(0.06em);
}

.btn::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('../../content/images/icon_arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.btn:hover {
    background-color: var(--color-corporate-dark);
    opacity: 1;
}

.btn.line {
    background: var(--color-non);
    color: var(--color-basic);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--color-basic);
}

.btn.line::after {
    background-image: url('../../content/images/icon_arrow.svg');
    filter: brightness(0);
}

.btn.line:hover {
    background-color: var(--color-corporate-dark);
    border-color: var(--color-corporate-dark);
    color: var(--color-non);
}

.btn.line:hover::after {
    filter: brightness(0) invert(1);
}

.btn.line.white::after {
    background-image: url('../../content/images/icon_arrow.svg');
    filter: brightness(1);
}

.btn.line.white:hover {
    background-color: var(--color-corporate-dark);
    border-color: var(--color-corporate-dark);
    color: var(--color-non);
}

.btn.line.white:hover::after {
    filter: brightness(0) invert(1);
}

.btn.size-s {
    padding: 1rem 2rem;
    font-size: 1.4rem;
}

.btn.size-l {
    padding: 1.5rem 3.5rem;
    font-size: 1.9rem;
}

.btn.size-l span {
    font-size: 1.4rem;
}

.btn.en {
    font-family: var(--font-family-en);
    letter-spacing: .1rem;
    font-weight: 500;
    padding: .6rem 3.6rem;
    ;
}

.btn.en span {
    font-size: inherit;
    font-weight: inherit;
}

.btn.en.size-s {
    padding: .6rem 2.4rem;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.05rem;
    line-height: 1;
}

.btn.en.size-m {
    padding: .8rem 4rem;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05rem;
}

.btn.en.size-l {
    padding: 1.5rem 3.5rem;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.05rem;
}

.btn.en.size-ll {
    padding: 1.8rem 4.5rem;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
}

.btn.w-100 {
    width: 100%;
}

.btn.mw-300 {
    min-width: 300px;
}

.btn.icon-non::after {
    content: none;
}

.btn.back::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('../../content/images/icon_arrowLs.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.btn.back::after {
    display: none;
}

.toastR .btn {
    border-radius: 3px 0 0 3px;
    padding: 3rem 1.5rem;
    background: var(--color-black);
}

.toastR .btn:hover {
    background: var(--color-corporate-dark);
}

/*//////////////////// SCL ////////////////////////*/

.scl {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 100px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 3;
}

/*//////////////////// HOVER ACTION ////////////////////////*/

.ha li a {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.6;
    cursor: pointer;
    width: 100%;
    background: var(--color-non);
    color: var(--color-basic);
    padding: 1.5rem;
    margin: 0;
    font-family: var(--font-family-en);
    text-align: center;
}

@media (min-width: 821px) {

    .ha li a::before {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: var(--color-corporate-dark);
        bottom: -1px;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: transform 0.3s;
    }

    .ha li a:hover {
        color: var(--color-corporate-dark);
    }

    .ha li a:hover::before {
        transform: scale(1, 1);
    }

    .ha li a::after {
        display: none;
    }

}

/*//////////////////// LOADER ////////////////////////*/

.spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background: var(--color-non);
}

.spinner::after {
    content: "";
    height: 60px;
    width: 60px;
    border: 1px solid var(--color-basic);
    border-radius: 50%;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    animation: spinner 0.5s linear infinite;
    -webkit-animation: spinner 0.5s linear infinite;
}

@-webkit-keyframes spinner {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }

}

@keyframes spinner {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }

}

/*//////////////////// WRAPPER ////////////////////////*/

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*//////////////////// LAYOUT ////////////////////////*/

.container {
    width: 100%;
    padding: 0 1.5rem;
    margin: 0 auto;
}

.container.nm {
    padding: 0;
}


@media (min-width: 821px) {

    .container {
        max-width: 1400px;
    }

    .top,
    .page {
        display: flex;
        gap: 5%;
    }

    .top aside,
    .page aside {
        width: 300px;
        order: 1;
    }

    .top article,
    .page article {
        width: calc(95% - 300px);
        order: 2;
        padding: 0 0 10rem;
    }

    .split aside {
        flex: initial !important;
        width: 20%;
    }

    .split article {
        flex: initial !important;
        width: 80%;
    }

}

/*//////////////////// FLEX ////////////////////////*/

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

.dfx>* {
    position: relative;
    flex: 1;
    width: 100%;
}

@media (min-width: 821px) {

    .df {
        display: flex;
    }

    .df>* {
        position: relative;
        flex: 1;
    }

    .dfx {
        flex-direction: row;
    }

    .aic {
        align-items: center;
    }

    .jcc {
        justify-content: center;
    }

    .odd>.df:nth-child(odd),
    .even>.df:nth-child(even) {
        flex-direction: row-reverse;
    }

}

/*//////////////////// X ////////////////////////*/

@media (min-width: 821px) {

    .df>*.x2 {
        flex: 2;
    }

    .df>*.x3 {
        flex: 3;
    }

    .df>*.x4 {
        flex: 4;
    }

}

/*//////////////////// GAP ////////////////////////*/

.g1 {
    gap: var(--gap);
}

.g2 {
    gap: calc(var(--gap) * 2);
}

.g3 {
    gap: calc(var(--gap) * 3);
}

.g4 {
    gap: calc(var(--gap) * 4);
}

.g5 {
    gap: calc(var(--gap) * 5);
}

.g6 {
    gap: calc(var(--gap) * 6);
}

.g10 {
    gap: calc(var(--gap) * 10);
}

/*//////////////////// GRID ////////////////////////*/

.dg {
    display: grid;
}

.dg.c12,
.dg.c123 {
    grid-template-columns: repeat(1, 1fr);
}

.dg.c2,
.dg.c24,
.dg.c234 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 821px) {

    .dg.c12,
    .dg.c123 {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg.c24,
    .dg.c234 {
        grid-template-columns: repeat(4, 1fr);
    }

}

/*//////////////////// FIGURE ////////////////////////*/

figure {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

article figure {
    text-align: center;
}

figcaption {
    text-align: center;
    padding: .5rem 0;
    margin: .5rem 0;
}

figcaption span {
    display: block;
    font-weight: 400;
}

@media (min-width: 821px) {

    figure.left {
        float: left;
        width: 25%;
        margin: 0 3rem 3rem 0;
    }

    figure.right {
        float: right;
        width: 25%;
        margin: 0 0 3rem 3rem;
    }

    figure img {
        max-width: 100%;
        margin: 0 auto;
    }

    .clear {
        clear: both;
    }

    figure.w35 {
        width: 35%;
    }

    figure.w50 {
        width: 50%;
    }

    figure.w100 {
        width: 100%;
    }

}

/*//////////////////// INNER ////////////////////////*/

.inner {
    margin: 6rem auto;
}

.inner-s {
    margin: 4rem auto;
}

.inner.ttl-area {
    margin: 12rem auto 1rem;
}

.inner.w109 {
    width: 100%;
}

.inner.w98 {
    width: 90%;
}

.inner.w987 {
    width: 90%;
}

.inner-s.w987 {
    width: 90%;
}

.inner.w9 {
    width: 90%;
    max-width: 1100px;
}

@media (min-width: 821px) {

    .inner {
        margin: 10rem auto;
    }

    .inner-s {
        margin: 6rem auto;
    }

    .inner.w109 {
        width: 90%;
    }

    .inner.w98 {
        width: 80%;
    }

    .inner.w987 {
        width: 80%;
    }

    .inner-s.w987 {
        width: 80%;
    }

}

@media (min-width: 980px) {

    .inner {
        margin: 12rem auto;
    }

    .inner-s {
        margin: 8rem auto;
    }

    .inner.w987 {
        width: 70%;
    }

    .inner-s.w987 {
        width: 70%;
    }

}

/*//////////////////// GUTTER ////////////////////////*/

.mt {
    margin: var(--n) auto 0;
}

@media (min-width: 821px) {

    .mt {
        margin: calc(var(--n) * 2) auto 0;
    }

    .mt.x2 {
        margin: calc(var(--n) * 4) auto 0;
    }

    .mt.x3 {
        margin: calc(var(--n) * 6) auto 0;
    }

    .mt.x4 {
        margin: calc(var(--n) * 8) auto 0;
    }

    .mt.x5 {
        margin: calc(var(--n) * 10) auto 0;
    }

}

.mtb {
    margin: var(--n) auto;
}

@media (min-width: 821px) {

    .mtb.x2 {
        margin: calc(var(--n) * 2) auto;
    }

    .mtb.x3 {
        margin: calc(var(--n) * 3) auto;
    }

    .mtb.x4 {
        margin: calc(var(--n) * 4) auto;
    }

    .mtb.x5 {
        margin: calc(var(--n) * 5) auto;
    }

    .mtb.x8 {
        margin: calc(var(--n) * 8) auto;
    }

    .mtb.x10 {
        margin: calc(var(--n) * 10) auto;
    }

}

.mb {
    margin-bottom: var(--n) !important;
}

.ml {
    margin-left: var(--n) !important;
}

@media (min-width: 821px) {

    .mb {
        margin-bottom: calc(var(--n) * 2) !important;
    }

    .ml {
        margin-left: calc(var(--n) * 2) !important;
    }

}

.npt {
    padding-top: 0;
}

.nmt {
    margin-top: 0;
}

/*//////////////////// FADE in ////////////////////////*/

@media (min-width: 821px) {

    .fadein {
        opacity: 0;
        transform: translateY(140px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .fadein.visible {
        opacity: 1;
        transform: translateY(0px);
    }

}

/*//////////////////// DL DT DD ////////////////////////*/

dt {
    color: var(--color-basic);
    font-weight: 600;
    padding: 2rem;
    margin: 0;
}

dd {
    padding: 2rem;
    margin: 0;
}

@media (min-width: 821px) {

    dl {
        display: flex;
        flex-wrap: wrap;
        line-height: 1.8;
        margin: 0;
    }

    dt {
        width: 30%;
        border-bottom: 1px solid var(--color-line);
        text-align: left;
    }

    dd {
        width: 70%;
        border-bottom: 1px solid var(--color-line);
    }

    dl.col3 dt {
        width: 30%;
    }

    dl.col3 dd:nth-of-type(2n) {
        width: 10%;
    }

    dl.col3 dd:nth-of-type(2n+1) {
        width: 60%;
    }

    dl.col4 dt {
        width: 30%;
    }

    dl.col4 dd:nth-of-type(3n) {
        width: 10%;
    }

    dl.col4 dd:nth-of-type(3n+1) {
        width: 50%;
    }

    dl.col4 dd:nth-of-type(3n+2) {
        width: 10%;
    }

}

/*//////////////////// AC ////////////////////////*/

dl.ac {
    position: relative;
    width: 100%;
}

dl.ac>dt {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.6;
    cursor: pointer;
    width: 100%;
    background: #fff;
    color: var(--color-basic);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
}

dl.ac>dt>span::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    transition: .2s;
    width: 20px;
    height: 20px;
    background: url(../../content/images/icon_arrowR.svg) no-repeat center center / contain;
    filter: invert(1);
    margin: 0 .5rem 0 0;
    filter: brightness(0%);
}

dl.ac>dt.active::before {
    color: var(--color-non);
}

dl.ac>dt.active>span:after {
    transform: translateY(-50%) rotate(90deg);
    filter: invert(0);
    transition: .2s;
    filter: brightness(0%);
}

dl.ac>dd {
    display: none;
    position: relative;
    line-height: 1.8;
    width: 100%;
    border: none;
    background: var(--color-non);
}

@media (max-width: 821px) {

    dl.ac>dt {
        scroll-margin-top: 70px;
    }

    footer dl.ac>dt {
        scroll-margin-top: 0;
    }

}

dl.ac.pale>dd {
    background: var(--color-pale);
}

dl.ac.pale>dd dt {
    background: var(--color-non);
}

/*//////////////////// AC qa ////////////////////////*/

dl.ac.qa>dt::before {
    content: "Q";
    font-family: var(--font-family-en);
    font-size: 3.6rem;
    font-weight: 400;
    color: var(--color-primary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    line-height: 1;
}

dl.ac.qa>dd::before {
    content: "A";
    font-family: var(--font-family-en);
    font-size: 3.6rem;
    font-weight: 400;
    color: var(--color-attention);
    position: absolute;
    top: 35px;
    transform: translateY(-50%);
    left: 1rem;
    line-height: 1;
}

dl.ac.qa>dt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(0);
    transition: .2s;
    width: 20px;
    height: 20px;
    background: url(../../content/images/icon_arrowR.svg) no-repeat center center / contain;
    filter: invert(1);
    margin: 0 .5rem 0 0;
}

dl.ac.qa>dt.active:after {
    transform: translateY(-50%) rotate(90deg);
    filter: invert(0);
    transition: .2s;
}

dl.ac.qa>dt,
dl.ac.qa>dd {
    padding: 2rem 3rem 2rem 5rem;
}

dl.ac.qa>dt .contents-inner,
dl.ac.qa>dd .contents-inner {
    border-left: 2px solid var(--color-pale);
    height: auto;
}

dl.ac.qa>dd {
    background: var(--color-pale);
}

dl.ac.qa>dd p {
    margin: 0 0 1rem;
}

dl.ac.qa>dd .answer {
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-attention);
    margin: 0 0 1rem;
}

dl.ac.qa>dt .contents-inner {
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 600;
    padding: .5rem 2rem .5rem 1rem;
}

dl.ac.qa>dd .contents-inner {
    font-size: 1.4rem;
    line-height: 1.4;
    padding: .5rem 2rem .5rem 2rem;
}

dl.ac.qa>dd ul.col2 li:nth-child(2n) {
    width: 100%;
    padding: 2rem 1rem 1rem;
    border-bottom: 3px solid #eee;
}

dl.ac.qa>dd ul.col2 li:nth-child(2n+1) {
    width: 100%;
    padding: 2rem 1rem 1rem;
    border-bottom: 1px solid #eee;
    font-weight: 600
}

dl.ac.price-ac-list {
    margin: 0 0 6rem;
}

@media (min-width:600px) {

    dl.ac.qa>dd ul.col2 li:nth-child(2n+1) {
        width: 70%;
    }

    dl.ac.qa>dd ul.col2 li:nth-child(2n) {
        width: 30%;
    }

}

/*//////////////////// FOOTER ////////////////////////*/

footer {
    background: var(--color-non);
    color: var(--color-basic);
    padding: 0;
    text-align: left;
    border-top: 1px solid var(--color-line);
}

footer>ul {
    list-style: none;
    max-width: 1480px;
    padding: 0;
    margin: 0 auto;
}

footer>ul>li {
    width: 100%;
}

footer>ul>li:last-child {
    padding: 2rem;
}

footer>ul>li:first-child img {
    width: 110px;
    padding: 3rem 0 3rem;
}

footer dt {
    border-bottom: 1px solid var(--color-line);
    padding: 2rem 1rem;
    position: relative;
    font-family: var(--font-family-en);
    font-weight: 600;
}

footer dl.ac>dt {
    font-weight: 600;
}

footer dd {
    display: none;
    padding: 2rem 1rem;
}

footer dd li {
    margin: .5rem 0 1rem;
    font-size: 1.3rem;
}

footer dl dt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(0);
    transition: .2s;
    width: 20px;
    height: 20px;
    background: url(../../content/images/icon_arrowR.svg) no-repeat center center / contain;
    filter: invert(1);
    margin: 0 0 0 .5rem;
}

footer dl dt.active::after {
    transform: translateY(-50%) rotate(90deg);
    filter: invert(0);
}

footer li.title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .05rem;
    border-bottom: 1px solid var(--color-line);
}

footer .tel span {
    font-family: var(--font-family-en);
    font-weight: 500;
    font-size: 4rem;
}

footer .tel span::before {
    content: "Tel：";
    font-family: var(--font-family-en);
    font-weight: 500;
    font-size: 1.2rem;
}

footer .profile {
    width: 100%;
    padding: 1rem;
    text-align: center;
}

footer .profile .icon.tel {
    font-family: var(--font-family-en);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 0;
    margin: 2rem 0;
}

footer .copyright {
    width: 100%;
    padding: 1rem 0;
    text-align: center;
    font-family: var(--font-family-en);
    font-size: 1.3rem;
    border-top: 1px solid var(--color-line);
}

@media (min-width: 600px) {
    footer>ul {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        padding: 5rem 2rem;
    }

    footer>ul>li {
        width: calc((100% - 40px) / 2);
        flex: 0 0 calc((100% - 40px) / 2);
        box-sizing: border-box;
    }

    footer>ul>li:last-child {
        padding: 0;
    }

    footer .internal-link {
        flex: 3;
        column-count: 3;
        column-gap: 35px;
    }

    footer .contents-wrap {
        max-width: 1240px;
        margin: auto;
    }

    footer dl {
        display: block;
        margin: 0 0 2rem;
        border: none;
    }

    footer dt {
        font-family: var(--font-family-en);
        color: var(--color-dark);
        font-size: 1.6rem;
        font-weight: 600 !important;
        letter-spacing: .2rem;
        pointer-events: none;
        padding: 0;
        margin: 0 0 0.5rem;
    }

    footer dt:after {
        display: none;
    }

    footer dl.ac dt.active {
        background: transparent !important;
        color: var(--color-dark) !important;
    }

    footer dd {
        display: block !important;
        background: none;
        border-bottom: none;
        width: auto;
        padding: 0;
    }

    footer dd a {
        pointer-events: auto;
    }

    footer dd a:hover {
        color: var(--color-corporate-dark);
    }

    footer .profile {
        flex: 1;
    }
}

@media (min-width: 821px) {
    footer>ul {
        padding: 5rem 2rem;
    }

    footer>ul>li:first-child {
        width: 100%;
        flex: 0 0 100%;
        text-align: center;
    }

    footer>ul>li:first-child img {
        padding: 0 0 2rem;
    }

    footer>ul>li:not(:first-child) {
        width: calc((100% - 80px) / 3);
        flex: 0 0 calc((100% - 80px) / 3);
    }
}

@media (min-width: 941px) {

    footer>ul {
        flex-wrap: nowrap;
        padding: 5rem 0;
    }

    footer>ul>li,
    footer>ul>li:first-child,
    footer>ul>li:not(:first-child) {
        width: calc((100% - 120px) / 4);
        flex: 0 0 calc((100% - 120px) / 4);
    }

    footer>ul>li:first-child {
        text-align: left;
        align-self: center;
    }

    footer>ul>li:first-child img {
        padding: 3rem 0;
    }

}

/*//////////////////// TOAST R ////////////////////////*/

.toastR {
    display: block;
    position: fixed;
    bottom: 20%;
    right: 0;
    z-index: 2;
}

.toastR .inner-contents a:hover {
    text-decoration: none;
}

.toastR .inner-contents ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.toastR .inner-contents li:not(:last-child) {
    border-right: 1px dotted var(--color-light);
    width: 100%;
    margin: 1rem 0;
}

@media (min-width: 821px) {

    .toastR {
        width: auto;
    }

    .toastR .inner-contents {
        width: 100%;
    }

}

.toastR .button.tel {
    background: none;
    border: none;
    color: var(--color-basic);
}

.toastR .inner-contents .button.tel>span {
    display: none;
}

@media (min-width: 821px) {

    .toastR .inner-contents .button.tel {
        flex-wrap: wrap;
    }

    .toastR .inner-contents .button.tel>span {
        display: inline-block;
    }

}

.toastR .button {
    margin: 0;
    padding: 2rem 1.5rem;
    background: var(--color-corporate-dark);
    border-radius: 4px 0 0 4px;
}

.toast-fade {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.toast-fade.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/*//////////////////// BREADCRUMB topicpath ////////////////////////*/

.breadcrumb {
    padding: 1rem 0;
    margin: 6rem 0 0;
}

.breadcrumb ul.topicpath {
    /*display: flex;*/
    justify-content: end;
    flex-wrap: wrap;
    font-size: 1.2rem;
    width: 100%;
    overflow-x: auto;
    word-break: keep-all;
    white-space: nowrap;
    padding: 0 0 .5rem;
    text-align: right;
}

.breadcrumb ul.topicpath li:not(:first-of-type) {
    margin: 0 0 0 0.2rem;
}

/*//////////////////// DITTO ////////////////////////*/

#breadcrumbnav {
    padding: 1rem 0 4rem;
    font-size: 1.2rem;
}

.noresults {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem 0;
    text-align: center;
}

.paginate {
    display: flex;
    justify-content: center;
    margin: 4rem auto;
}

.paginate .ditto_currentpage {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    font-size: 1.4rem;
    color: var(--color-non);
    padding: 1rem;
    margin: 0px .5rem;
    width: 45px;
    text-align: center;
}

.paginate a,
.paginate a:link,
.paginate a:visited {
    border: 1px solid #EEE;
    font-size: 1.4rem;
    color: var(--color-basic);
    padding: 1rem;
    margin: 0px .5rem;
    width: 45px;
    text-align: center;
}

.paginate a.ditto_next_link,
.paginate a.ditto_previous_link {
    color: #444;
    border: none;
    padding: 1rem;
}

/*//////////////////// PAGINATION ////////////////////////*/

.pagination {
    position: relative;
    display: flex;
    justify-content: center;
    font-family: var(--font-family-en);
    text-align: center;
    margin: 5rem 0;
}

.pagination .current {
    font-size: 1.6rem;
    font-weight: 600;
    padding: 1rem;
    margin: 0px .5rem;
    text-align: center;
    background: var(--color-basic);
    color: var(--color-non);
}

.pagination span {
    background: var(--color-basic);
    color: var(--color-non);
    font-size: 1.8rem;
    line-height: 1.8;
    width: 45px;
    padding: 1rem;
    margin: 0px .5rem;
}

.pagination a {
    position: relative;
    color: var(--color-basic);
    font-size: 1.8rem;
    line-height: 1.8;
    width: 45px;
    padding: 1rem;
    margin: 0px .5rem;
}

.prev {
    position: relative;
    color: var(--color-basic);
    font-size: 1.6rem;
    line-height: 1.8;
    padding: 1rem 0 1rem 5rem;
    font-weight: 600;
}

.prev::after {
    content: "PREV";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(10px, -50%);
}

.next {
    position: relative;
    color: var(--color-basic);
    font-size: 1.6rem;
    line-height: 1.8;
    padding: 1rem 5rem 1rem 0;
    font-weight: 600;
}

.next::after {
    content: "NEXT";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-10px, -50%);
}

.btl-block {
    text-align: center;
    border-top: 1px solid var(--color-line);
    padding: 2rem 0 8rem;
}

.btl-block a {
    position: relative;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.8;
}

.btl-block a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../../content/images/icon_arrowLs.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 1rem 0 0;
    filter: brightness(0);
}

/*//////////////////// ASIDE STICKY ////////////////////////*/

@media (min-width: 941px) {

    aside.sticky {
        position: sticky;
        top: 100px;
        height: fit-content;
    }

}

aside .inner-contents {
    margin-left: 0;
}

aside .inner-contents li.current>a {
    background: var(--color-primary);
    color: var(--color-non);
}

aside .inner-contents .category li {
    position: relative;
    border-bottom: 1px solid var(--color-light);
    margin: 0;
}

aside .inner-contents .category li:first-child {
    border-top: 1px solid var(--color-light);
}

@media (min-width: 821px) {

    aside .inner-contents li.parent span {
        display: block;
        font-family: var(--font-family-en);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .03rem;
    }

}



.service .cel.sticky .inner a.btn {
    width: 100%;
    margin: 3rem 0 0;
}

.service .cel.sticky .inner h2 span {
    font-size: 2.4rem;
}

.service .cel.sticky .inner .category li {
    position: relative;
    border-bottom: 1px solid var(--color-light);
    margin: 0;
}

.service .cel.sticky .inner .category li:first-child {
    border-top: 1px solid var(--color-light);
}

@media (min-width: 821px) {

    .service .cel.sticky .inner li.parent span {
        display: block;
        font-family: var(--font-family-en);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .03rem;
    }

}

@media (min-width: 980px) {

    .service .cel.sticky .inner {
        margin: 4rem auto;
    }

}

/*カテゴリーセレクトメニュー用ここから*/
.service .service-block .cel.sticky .inner .sele-container {
    width: 100%;
    margin: 0;
}

.service .service-block .cel.sticky .inner .sele-sp {
    display: block;
    width: 100%;
    margin: 0;
}

.service .service-block .cel.sticky .inner .sele-pc {
    display: none;
}

.service .service-block .cel.sticky .inner .sele-select-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 4.8rem;
    padding: 1rem 4.4rem 1rem 1.6rem;
    border: 1px solid var(--color-line);
    background-color: var(--color-non);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.service .service-block .cel.sticky .inner .sele-select-wrap:focus-within {
    outline: 2px solid var(--color-corporate-dark);
    outline-offset: 2px;
}

.service .service-block .cel.sticky .inner .sele-btn-label {
    display: block;
    font-family: var(--font-family-en);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--color-basic);
    pointer-events: none;
}

.service .service-block .cel.sticky .inner .sele-btn-main {
    display: block;
    margin: 0.4rem 0 0;
    font-family: var(--font-family-ja);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-basic);
    pointer-events: none;
}

.service .service-block .cel.sticky .inner .sele-select {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--color-basic);
    cursor: pointer;
    opacity: 0;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.service .service-block .cel.sticky .inner .sele-select-icon {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    z-index: 1;
    line-height: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.service .service-block .cel.sticky .inner .sele-select-icon img {
    display: block;
    width: 2rem;
    height: auto;
}

@media (min-width: 941px) {

    .service .service-block .cel.sticky .inner .sele-sp {
        display: none !important;
    }

    .service .service-block .cel.sticky .inner .sele-pc {
        display: block !important;
    }

}

/*カテゴリーセレクトメニュー用ここまで*/


/*//////////////////// LIST counter ////////////////////////*/

.counter {
    counter-reset: num 0;
}

.counter>li:not(.nc):not(.col2.counter > li:nth-child(even))::before {
    counter-increment: num 1;
    content: '0' counter(num);
    font-family: var(--font-family-en);
    font-size: 3rem;
    font-weight: 600;
    margin: 0 1.4rem 0 0;
}

.counter>li {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 2px dotted var(--color-light);
    padding: 2rem 0;
}

.counter>li .inner-contents {
    width: 100%;
}

.counter>li .inner-contents h3 {
    padding: 0;
    margin: 0;
}

.service .counter>li {
    font-size: 1.7rem;
}

/*//////////////////// TAG ////////////////////////*/

.tag li a {
    position: relative;
    display: inline-block;
    align-content: center;
    text-decoration: none;
    text-align: center;
    background: var(--color-light);
    color: var(--color-non);
    padding: .5rem 2rem;
    margin: .5rem;
    font-size: 1.3rem;
}

/*//////////////////// HEAD BLOCK ////////////////////////*/

.head-block {
    text-align: right;
    padding: 10rem 0 0;
}

.head-block h1 {
    border-bottom: none;
    padding: 0;
    font-size: clamp(2rem, 1.662rem + 1.422vw, 2.8rem);
}

.service.list .head-block {
    border-bottom: 1px solid var(--color-line);
}

.service .head-block .cel:nth-child(1) {
    position: relative;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.service .head-block .cel:nth-child(1)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
}

.service .head-block .cel:nth-child(1) .deco {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: clamp(2.8rem, 2.462rem + 1.42vw, 3.6rem);
    letter-spacing: .05em;
    text-align: center;
    color: var(--color-non);
    line-height: 1.1;
    font-weight: 500;
    font-family: var(--font-family-en);
    width: 90%;
}

.service .head-block .cel:nth-child(1) .deco span {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
}

.service .head-block .cel:nth-child(2) .deco {
    font-size: clamp(3rem, 2.578rem + 1.78vw, 4rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 4rem;
    font-family: var(--font-family-en);
    letter-spacing: .1rem;
}

.service .head-block .cel:nth-child(2) .deco span {
    display: block;
    font-size: 1.6rem;
}

.service .head-block dl {
    margin: 0 0 3rem;
}

.service .head-block dt,
.service .head-block dd {
    border-bottom: 1px solid var(--color-line);
    padding: 1rem 0;
}

.service .head-block dt {
    padding: 2rem 0 0.5rem;
}

@media (min-width: 821px) {

    .service .head-block .cel:nth-child(1) {
        height: -webkit-stretch;
        height: -moz-available;
        height: stretch;
        width: 50%;
    }

    .service .head-block h1 {
        border-bottom: 1px solid var(--color-line);
    }

    .service .head-block dt {
        width: 20%;
    }

    .service .head-block dd {
        width: 80%;
    }

    .service .head-block dt,
    .service .head-block dd {
        padding: 2rem 0 .5rem;
    }

}

.service .head-block .tag li {
    position: relative;
    padding: 0 0 0 2rem;
    margin: 0 1rem 0 0;
}

.service .head-block .tag>li::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(0);
    transition: .2s;
    background: url(../../content/images/icon_tag.svg) no-repeat center center/contain;
}

.news .head-block {
    text-align: right;
    padding: 10rem 0 0;
    border-bottom: 1px solid var(--color-line);
}

.news .head-block h1 {
    border-bottom: none;
    padding: 0;
}

.news .head-block h1::after {
    content: "NEWS";
    font-size: 4rem;
    font-weight: 600;
    margin: 0 0 0 1rem;
    font-family: var(--font-family-en);
}

.service.single .head-block {
    text-align: left;
    border-bottom: 1px solid var(--color-line);
    padding: 0;
}

.service.single .head-block .dfx.aic {
    align-items: center;
}

.service.single .head-block .dfx>.cel {
    flex: none;
}

.service.single .head-block .cel:nth-child(1) {
    width: 100%;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


@media (min-width: 821px) {

    .service.single .head-block .dfx {
        flex-direction: column;
    }
}

@media (min-width: 941px) {

    .service.single .head-block .dfx>.cel {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .service.single .head-block .dfx {
        flex-direction: row;
        min-height: 85vh;
    }

    .service.single .head-block .cel:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
    }

    .service.single .head-block .cel:nth-child(2) .inner {
        max-width: 600px;
    }

}

.head-block.center {
    text-align: center;
}

/*//////////////////// HEADING ////////////////////////*/

.heading {
    position: relative;
    border-bottom: 1px solid var(--color-line);
}

.heading figure {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 50vh;
}

@media (min-width: 821px) {

    .heading figure {
        background-attachment: fixed;
        height: 80vh;
    }

}

.about .heading figure {
    background-image: url(../../content/images/about/main_s.jpg);
}

.advantage .heading figure {
    background-image: url(../../content/images/about/advantage/main_s.jpg);
}

.company .heading figure {
    background-image: url(../../content/images/company/main_s.jpg);
}

.dx-ai .heading figure {
    background-image: url(../../content/images/company/dx/main_s.jpg);
}

.recruit .heading figure {
    background-image: url(../../content/images/recruit/main_s.jpg);
}

@media (min-width: 821px) {

    .about .heading figure {
        background-image: url(../../content/images/about/main.jpg);
    }

    .advantage .heading figure {
        background-image: url(../../content/images/about/advantage/main.jpg);
    }

    .company .heading figure {
        background-image: url(../../content/images/company/main.jpg);
    }

    .dx-ai .heading figure {
        background-image: url(../../content/images/company/dx/main.jpg);
    }

    .recruit .heading figure {
        background-image: url(../../content/images/recruit/main.jpg);
    }
}

.heading .inner {
    position: relative;
}

.service.single .heading .dfx>.cel:nth-child(1) img {
        margin: 0 auto;
        max-width: 280px;
}

@media (min-width: 821px) {

    .heading .inner h1 {
        font-family: var(--font-family-ja);
        font-weight: 400;
    }

    .heading .inner h1 span {
        display: block;
        font-family: var(--font-family-en);
        font-size: 1.8rem;
    }

    .heading .introtext p {
        line-height: 1.8;
        margin: 2rem 0;
    }

    .heading .introtext p a {
        display: inline-block;
    }

    .service.single .heading .dfx>.cel:nth-child(1) img {
        margin: 0 0 0 auto;
        max-width: 280px;
    }

    .service.single .heading .dfx>.cel:nth-child(2) {
        flex: 1.6;
    }

}

/*//////////////////// CARD ////////////////////////*/

.card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-left: 1px solid var(--color-line);
    margin: 0;
}

@media (min-width: 821px) {

    .card-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

}

.card {
    display: grid;
    grid-template-rows: auto 1fr 1fr auto 30px;
    background: var(--color-non);
    overflow: hidden;
    border-right: 1px solid var(--color-line);
    padding: 2.5rem 2rem 0;
    box-sizing: border-box;
    margin: 0;
    position: relative;
}

.card h3 {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6;
    border-bottom: none;
    flex-grow: 1;
    padding: 0 2rem;
    margin: 2rem 0;
}

.card p {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.7;
}

.service .card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.card .lead {
    font-size: 1.4rem;
    line-height: 1.7;
    margin: 0 0 1rem;
    font-family: var(--font-family-ja);
}

.card a {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
}

.card figure {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
}

.card figure .bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    min-height: auto;
    /*border-radius: 3px;*/
}

.card figure .btn.en {
    font-size: 1.1rem;
    background: #000;
}

.card figure .btn {
    position: absolute;
    bottom: 2rem;
    right: 0;
    z-index: 1;
}

@media (hover: hover) {

    .card a:hover .bg {
        transform: scale(1.12);
    }

}

/*//////////////////// NEWS ////////////////////////*/

.date {
    font-family: var(--font-family-num);
    display: flex;
    flex-direction: column;
    padding: 4rem 0 1rem 2rem;
    margin: 0;
}

.year-month {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    font-family: var(--font-family-num);
    white-space: nowrap;
    margin: 0 0 0 .2rem;
}

.day {
    font-size: clamp(4.4rem, 6vw, 5rem);
    font-weight: 700;
    color: var(--color-basic);
    line-height: 1;
}

.news .news-container {
    max-width: 1400px;
    padding: 0;
    margin: auto;
}

.news .news-container .df {
    display: block;
}

.news .news-container aside {
    padding: 0 1.5rem;
    margin: 0 0 5rem;
}

.news .news-container aside h2 {
    padding: 0;
    margin-top: 5rem;
}

.news .news-container aside h2 span {
    font-size: 2.4rem;
    text-transform: uppercase;
}

.news .news-container .card h3 {
    margin: 2rem 0;
}

@media (min-width: 1024px) {

    .news article {
        flex: initial;
        width: calc(100% - 300px);
    }

    .news .news-container aside {
        flex: initial;
        width: 300px;
    }

    .news .news-container .df {
        display: flex;
    }

}

@media (min-width: 1024px) {

    .news.single article {
        max-width: 1000px;
        margin: auto;
    }

}

/*//////////////////// NEWS list ////////////////////////*/

.news.list .card {
    display: grid;
    grid-template-rows: auto 1fr auto 40px;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    padding: 0;
}

.news.list .card a {
    grid-row: span 4;
}

.news.list .card-wrapper .btn.en.size-s::after {
    content: none;
}

.news-block .card figure,
.news.list .card figure {
    height: 220px;
}

@media (min-width: 600px) {

    .news.list .card-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (min-width: 821px) {

    .news.list .card-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (min-width: 1201px) {

    .news.list .card-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

}

/*//////////////////// NEWS single ////////////////////////*/

.news.single .head-block .deco {
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0 1rem;
    font-family: var(--font-family-en);
}

.news.single article .heading .df {
    display: flex;
}

.news.single article .heading .df>* {
    position: relative;
    flex: 1;
}

.news.single article .heading .date {
    flex: initial;
    text-align: right;
    padding: 2rem;
}

.news.single article .heading ul.category {
    padding: 2rem;
}

.news.single article .heading ul.category li {
    display: inline-block;
}

.news.single article .heading ul.tag {
    display: flex;
    align-items: center;
    padding: 2rem 2rem 0;
}

.news.single .card figure {
    margin: 0;
    width: 100%;
}

.news.single article .heading ul::before {
    font-family: var(--font-family-en);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .1rem;
    margin: 0 1rem 0 0;
}

.news.single article .heading ul.category::before {
    content: "CATEGORY";
}

.news.single article .heading ul.category li:not(:last-child)::after {
    content: ",";
    margin: 0 .5rem 0 0;
}

.news.single article .heading ul.tag::before {
    content: "TAG";
}

.news.single article .heading h1 {
    padding: 4rem 2rem 2rem;
}


@media (min-width: 821px) {

    .news.single article {
        border-right: 1px solid var(--color-line);
        border-left: 1px solid var(--color-line);
        /*
        max-width: 1000px;
        margin: auto;
        */
    }

}

@media (min-width: 980px) {
    .news.single .inner {
        margin: 10rem auto;
    }
}

/*//////////////////// COMMON ////////////////////////*/

.cel.sticky {
    position: relative;
}

@media (min-width: 941px) {

    .cel.sticky {
        position: sticky;
        top: 60px;
        height: fit-content;
        will-change: transform;
    }

}

.s1 .df>.cel:nth-child(1) {
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    min-height: 300px;
}

.s1 .df>.cel:nth-child(1) .deco {
    margin: 5rem 1.5rem;
}

.s1 .df>.cel:nth-child(1) figure {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: auto;
    overflow: hidden;
    background: var(--color-non);
}

.s1 .df>.cel:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.s1 .df>.cel:nth-child(2) .nuc {
    width: 100%;
}

@media (min-width: 821px) {

    .s1 .df>.cel:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        min-height: 100%;
    }

    .s1 .df>.cel:nth-child(2) {
        border-left: 1px solid var(--color-line);
    }

    .s1 .df>.cel:nth-child(2) .nuc:nth-child(2) {
        border-top: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
    }

    .s1 .df>.cel:nth-child(1) .deco {
        margin: 10rem 0;
    }

}

.s2 .cel:nth-child(1) {
    display: none;
}

.s3 .cel:nth-child(2) {
    display: none;
}

@media (min-width: 821px) {

    .s2,
    .s3 {
        border-bottom: 1px solid var(--color-line);
    }

    .s2 .cel:nth-child(2) .df {
        flex-direction: row-reverse;
    }

    .s2 .cel:nth-child(2) .df .nuc:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2;
        padding: 3rem 0;
    }

    .s3 .cel:nth-child(1) .df .nuc:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2;
        padding: 3rem 0;
    }

    .s4 .cel:nth-child(2) {
        display: flex;
        align-items: center;
        border-left: 1px solid var(--color-line);
    }

    .s4 .cel:nth-child(2) .inner {
        padding: 5rem 10%;
        max-width: 800px;
    }

}

@media (min-width: 1201px) {

    .s2 .cel:nth-child(1) {
        display: block;
        flex: initial;
        width: 20%;
        border-right: 1px solid var(--color-line);
    }

    .s3 .cel:nth-child(2) {
        display: block;
        flex: initial;
        width: 20%;
        border-left: 1px solid var(--color-line);
    }

}

/*
.bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    min-height: 300px;
}
*/

.bg {
    /*position: absolute;
    inset: 0;*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    min-height: 200px;
    /*border-radius: 3px;*/
}

.related-block .right {
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.related-block .right .btn {
    padding: 2rem 4rem;
}

/*//////////////////// SERVICE ////////////////////////*/

.service .card .v3 span {
    letter-spacing: 0;
    font-size: 1.3rem;
    line-height: 1.5;
}

.service .head-block {
    text-align: right;
    padding: 10rem 0 0;
}

.service .head-block h1 {
    border-bottom: none;
    padding: 0;
}

.service .head-block h1 span {
    letter-spacing: 0;
    font-size: 1.4rem;
    line-height: 1.6;
    padding: 0 0 .5rem;
}

.service .service-block .card-wrapper .card h2.v3 {
    font-weight: 600;
}

.service .service-block .cel:nth-child(2) {
    background: var(--color-non);
}

.service .service-block .cel:nth-child(2) .card {
    border-bottom: 1px solid var(--color-line);
}

/*
.service .service-block .cel:nth-child(2) .card {
    grid-template-rows: auto 1fr auto auto auto auto;
}

.service .service-block .cel:nth-child(2) .card a {
    grid-row: span 6;
}
*/

.service .service-block .cel:nth-child(2) .card a {
    display: grid;
    height: 100%;
    grid-template-rows: repeat(5, auto) 1fr auto;
}

.service .service-block .cel:nth-child(2) .card a .right {
    grid-row: -1;
}

.service .service-block {
    border-bottom: none;
}

.service .breadcrumb {
    border-top: 1px solid var(--color-line);
    padding: 8rem 0 1rem;
    margin: 0;
}

.service .service-block .cel:nth-child(2) .card-wrapper {
    grid-template-columns: repeat(1, 1fr);
    border-left: none;
}

.service .service-block .df {
    flex-direction: column;
}

@media (min-width: 541px) {
    .service .service-block .cel:nth-child(2) .card-wrapper {
        grid-template-columns: repeat(2, 1fr);
        border-left: none;
    }
}

@media (min-width: 821px) {

    .service .service-block {
        max-width: 1800px;
        margin: auto;
    }

    .service .service-block .cel:nth-child(2) .card-wrapper {
        grid-template-columns: repeat(2, 1fr);
        border-left: none;
    }

}

@media (min-width: 941px) {

    .service .service-block .cel:nth-child(3) {
        border-left: none;
    }

    .service .service-block .df {
        flex-direction: row;
    }

}

.service .service-block .cel:nth-child(2) {
    border-top: 1px solid var(--color-line);
    overflow: hidden;
}

.service .service-block .cel:nth-child(2) li {
    position: relative;
    background: var(--color-non);
    padding: 13%;
}


.service .service-block .cel:nth-child(2) li .deco {
    font-family: var(--font-family-en);
    font-size: 1.8rem;
    font-weight: 600;
}

.service .service-block .cel:nth-child(2) li .deco span {
    display: block;
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--color-light);
}

.service .service-block .cel:nth-child(2) li h3 span {
    display: block;
    font-size: 1.2rem;
    line-height: 1.5;
}

.service .service-block .cel:nth-child(2) li figure {
    height: 200px;
    /*
    width: 100%;
    overflow: hidden;
    position: relative;
    */
}

.service .service-block .cel:nth-child(2) li figure .bg {
    position: absolute;
    inset: 0;
    border-radius: 3px;
}

@media (hover: hover) {

    .service .service-block .cel:nth-child(2) li a:hover .bg {
        transform: scale(1.12);
    }

}

.service .service-block .cel:nth-child(2) li .tab {
    display: inline-flex;
    align-items: center;
    background: var(--color-basic);
    color: var(--color-non);
    line-height: 1;
    padding: .5rem 2rem .5rem 8rem;
    margin: 0;
    font-family: var(--font-family-num);
    font-size: 1.1rem;
    letter-spacing: .1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.service .service-block .cel:nth-child(2) li a:hover .tab {
    background: var(--color-corporate-dark);
}

/*
.service .service-block .cel:nth-child(2) .tab::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../../content/images/icon_arrow.svg) no-repeat center center/contain;
    margin: 0 0 0 .5rem;
}
*/

.service .service-block .cel:nth-child(3) {
    display: none;
}

.service .contact-block {
    background: var(--color-black);
    color: var(--color-non);
    padding: 4rem 0;
}

.service .contact-block .container {
    max-width: 800px;
}

.service .contact-block .btn {
    border: 1px solid var(--color-non);
    background: var(--color-black);
}

@media (min-width: 941px) {

    .service .service-block .cel:nth-child(1) {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .service .service-block .cel:nth-child(2) {
        flex: 2.8;
        border-top: none;
        border-left: 1px solid var(--color-line);
    }

}

@media (min-width: 941px) {

    .service .service-block .cel:nth-child(3) {
        display: block;
        flex: initial;
        width: 5%;
    }

}

.service.single .service-block .cel:nth-child(2) {
    background: var(--color-line);
}

.service.single .recommend-block {
    border-bottom: 1px solid var(--color-line);
}

.service.single .recommend-block .cel:nth-child(1) {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 400px;
}

.service.single .recommend-block .cel:nth-child(2) {
    text-align: center;
}

.service.single .recommend-block .counter {
    text-align: left;
    margin: 0 0 4rem;
}

.service.single .recommend-block h2 {
    font-size: 1.6rem;
}

.service.single .recommend-block h3 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6;
}

.service.single .recommend-block .counter>li::before {
    font-size: clamp(3rem, 2.578rem + 1.78vw, 4rem);
}

@media (min-width: 821px) {

    .service.single .recommend-block .dfx {
        flex-direction: column;
    }

    .service.single .recommend-block .cel:nth-child(1) {
        min-height: 400px;
    }

    .service.single .recommend-block .cel:nth-child(2) {
        flex: 1.8;
        border-left: 1px solid var(--color-line);
    }

    .service.single .recommend-block .cel:nth-child(2) .inner {
        padding: 4rem 6%;
        max-width: 800px;
    }

}

@media (min-width: 941px) {

    .service.single .recommend-block .dfx {
        flex-direction: row;
    }

    .service.single .recommend-block .cel:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

}

.service.single .feature-block .df>.cel:nth-child(1) li {
    margin: 0 0 8rem;
}

.service.single .feature-block .df>.cel:nth-child(2) {
    display: none;
}

.service.single .feature-block .box p {
    margin: 0;
}

.service.single .feature-block .box {
    background: var(--color-basic);
    color: var(--color-non);
    border: 1px solid var(--color-basic);
}

.service.single .feature-block .box .deco span {
    text-transform: uppercase;
    font-size: 2rem;
}

.service.single .feature-block .box .df>.nuc:nth-child(1) {
    display: flex;
    align-items: center;
    background: var(--color-non);
    color: var(--color-basic);
}

.service.single .feature-block .box .df>.nuc:nth-child(1) .inner {
    padding: 4rem;
    margin: 0;
}

.service.single .feature-block .box .df>.nuc:nth-child(1) .inner h2 {
    border-bottom: 1px solid var(--color-line);
    font-size: 2.2rem;
    font-weight: 500;
}

.service.single .feature-block .box .df>.nuc:nth-child(1) .inner h2 span {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
}

.service.single .feature-block .box .df>.nuc:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
}

.service.single .feature-block .box .df>.nuc:nth-child(2) .external {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 600;
    background: var(--color-non);
    color: var(--color-basic);
    line-height: 2;
    border-radius: 100px;
    padding: 0 4rem;
    margin: 1rem 0;
    font-size: 2rem;
    font-family: var(--font-family-en);
    width: 100%;
    justify-content: center;
}

.service.single .feature-block .box .df>.nuc:nth-child(2) .external::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../../content/images/icon_link.svg) no-repeat center/cover;
    margin: 0 .5rem 0 0;
}

.service.single .service-block .cel:nth-child(2) li {
    padding: 4rem;
}

.service.single .service-block .cel .loop .loop-inner li {
    padding: 4rem 10%;
}

@media (min-width: 600px) {
    .service.single .service-block .cel .loop .loop-inner li {
        padding: 4rem 3%;
    }
}

@media (min-width: 821px) {

    .service.single .feature-block .box .df>.nuc:nth-child(1) .inner {
        padding: 3rem;
        margin: 0;
    }

    .service.single .feature-block .box .df {
        flex-direction: row;
    }

    .service.single .feature-block .df>.cel:nth-child(1)>.inner {
        max-width: 1000px;
        padding: 2rem 0;
    }

    .service.single .feature-block .box .df>.nuc:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: initial;
        width: 300px;
    }

}

@media (min-width: 1201px) {

    .service.single .feature-block .df>.cel:nth-child(2) {
        display: block;
        flex: initial;
        width: 100px;
        border-left: 1px solid var(--color-line);
    }

    .service.single .service-block .cel:nth-child(3) {
        border-left: 1px solid var(--color-line);
    }

}

/*SERVICE COUNTER*/
.service.single .recommend-block .counter div.annotation {
    display: block;
    font-size: 1.4rem;
    line-height: 1.6;
    font-family: var(--font-family-base);
    padding: 1rem 0 0;
}

/*//////////////////// SINGLE  article ////////////////////////*/

.single article figure img {
    margin: 1rem auto;
    border-radius: 4px;
}

.news.single article h2 {
    background: #f5f5f5;
    padding: 1.2rem;
    font-weight: 400;
    font-size: 1.7rem;
    margin: 3rem 0 1.5rem;
}

.single article h3 {
    border: 1px solid #ccc;
    padding: 1rem 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    font-size: 1.6rem;
    margin: 3rem 0 1.5rem;
}

@media (min-width: 941px) {
    .single article h3 {
        font-size: 1.6rem;
        margin: 3rem 0 1.5rem;
    }
}

.service.single article .loop h3 {
    margin: 0;
}

.service.single article .loop p.lead {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 1rem 0 1rem;
}

.single article h4 {
    border-bottom: 1px solid var(--color-line);
    padding: 1rem 0 .6rem;
}

/*//////////////////// ABOUT ////////////////////////*/

.about .business-block .inner.w987 {
    max-width: 800px;
}

.about .professional-block figure .bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
}

.about .business-block .df {
    flex-direction: column;
}

.about .business-block {
    border-bottom: 1px solid var(--color-line);
}

.about .business-block .cel:nth-child(1) {
    display: block;
    background: var(--color-pale);
    padding: 3rem 0 0;
}

.about .business-block .cel:nth-child(1).sticky li.current>a {
    background: var(--color-primary);
    color: var(--color-non);
}

.about .business-block .cel:nth-child(1).sticky li {
    position: relative;
    border-bottom: 1px solid var(--color-light);
    margin: 0;
}

.about .business-block .cel:nth-child(1).sticky li:first-child {
    border-top: 1px solid var(--color-light);
}

.about .business-block .cel:nth-child(1).sticky li:last-child a {
    background: var(--color-basic);
    color: var(--color-non);
}

.about .business-block .cel:nth-child(1).sticky li:last-child a:hover {
    background: var(--color-corporate);
}

.about .business-block .cel:nth-child(1) {
    display: block;
    flex: initial;
    width: 100%;
    min-width: 300px;
}

.about .business-block .cel:nth-child(2) .nuc:nth-child(1) {
    border-bottom: 1px solid var(--color-line);
}

.about .business-block .cel:nth-child(2) .nuc:nth-child(1) ul {
    margin: 8rem 0 0;
}

.about .business-block .cel:nth-child(2) li {
    margin: 0 0 8rem;
}

.about .business-block .cel:nth-child(2) .internal li {
    margin: 0 0 2rem;
}

.about .business-block .cel:nth-child(2) .kar {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    min-height: 200px;
    min-width: 200px;
    border-radius: 4px;
}


@media (min-width: 941px) {

    .about .business-block .cel:nth-child(1) {
        display: block;
        flex: initial;
        width: 20%;
        min-width: 300px;
        margin: 0;
        padding: 0;
    }

    .about .business-block .cel:nth-child(1) .inner {
        margin: 6rem auto
    }

    .about .business-block .cel:nth-child(2) {
        border-left: 1px solid var(--color-line);
    }

    .about .business-block .cel:nth-child(2) .kar:nth-child(2) {
        flex: 3;
    }

}

.about .business-block ul.internal {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

.about .business-block ul.internal a {
    width: 100%;
}

@media (min-width: 821px) {

    .about .business-block ul.internal {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 600px;
        margin: 2rem auto;
    }
}

.about .business-block .df.g3 {
    flex-direction: row;
}

@media (min-width: 941px) {
    .about .business-block .df {
        flex-direction: row;
    }
}

.about .service-block .inner {
    margin: 4rem auto;
}

.about .service-block .df>.cel:nth-child(2) .counter {
    text-align: left;
    margin: 0 0 4rem;
}

.nuc.bg {
    border-radius: 4px;
}

/*//////////////////// ADVANTAGE ////////////////////////*/

.advantage .heading {
    border-bottom: none;
}

.advantage .heading .inner {
    text-align: center;
    max-width: 800px;
    margin: 10rem auto 5rem;
}

.advantage .number-block .df {
    border-bottom: 1px solid var(--color-line);
}

.advantage .number-block .inner {
    max-width: 600px;
}

.advantage .number-block .cel {
    display: flex;
    align-items: center;
}

.advantage .number-block {
    counter-reset: num 0;
    margin: 4rem 0 0;
}

.advantage .number-block h2 {
    counter-increment: num 1;
    position: relative;
    padding: 3rem 0;
}

.advantage .number-block h2::after {
    content: '0' counter(num);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    font-family: var(--font-family-en);
    font-size: 16rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-pale);
    z-index: -1;
}

.advantage .service-block .inner {
    margin: 4rem auto;
}

@media (min-width: 821px) {

    .advantage .number-block .cel:nth-child(2) {
        flex: 1.3;
    }

}

/*//////////////////// COMPANY ////////////////////////*/

.company .philosophy-block .deco {
    margin: 4rem 0;
}

.company .overview-block .cel.bg {
    height: 400px;
}

.overview-block .df.g5 {
    flex-direction: column;
}

.company .overview-block .cel:nth-child(2) dt {
    background: var(--color-pale);
    border-bottom: 2px solid var(--color-line);
}

.company .access-block {
    border-top: 1px solid var(--color-line);
}

.company .access-block .df {
    flex-direction: column;
}

.company .access-block .df .inner {
    margin: 6rem auto 2rem;
}

@media (min-width: 821px) {

    .company .overview-block .cel.bg {
        height: 100vh;
    }

    .company .philosophy-block {
        text-align: center;
        border-bottom: 1px solid var(--color-line);
    }

    .company .overview-block {
        border-bottom: 1px solid var(--color-line);
    }

    .company .overview-block .cel:nth-child(2) {
        display: flex;
        align-items: center;
        flex: 3;
    }

    .company .overview-block .cel:nth-child(2) dt {
        background: none;
    }

    .company .access-block {
        border-top: none;
    }

    .company .access-block .cel:nth-child(1) {
        display: flex;
        align-items: center;
    }

    .company .access-block .cel:nth-child(2) {
        flex: 2.2;
    }

    .company .access-block .cel:nth-child(2) iframe {
        vertical-align: middle;
    }

}

@media (min-width: 941px) {
    .overview-block .df.g5 {
        flex-direction: row;
    }
}

@media (min-width: 1201px) {
    .company .access-block .df {
        flex-direction: row;
    }

    .company .access-block .df .inner {
        margin: 6rem auto;
    }
}

/*//////////////////// SUB-MENU ////////////////////////*/

.heading .sub-menu {
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.heading .sub-menu .container {
    padding: 0;
}

.heading .sub-menu ul {
    display: flex;
    justify-content: end;
}

.heading .sub-menu ul li a,
.heading .sub-menu ul li span {
    display: block;
    font-size: 1.5rem;
    padding: 1.6rem 2rem;
    line-height: 1.2;
}

.heading .sub-menu ul li {
    border-left: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
}

.heading .sub-menu ul li:nth-child(2) {
    border-left: none;
}

.heading .sub-menu ul li span {
    position: relative;
    font-weight: 600;
}

.heading .sub-menu .ha li span::before {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: var(--color-basic);
    bottom: -1px;
    transform: scale(1, 1);
    transform-origin: left top;
    transition: transform 0.3s;
}

@media (min-width: 821px) {

    .heading .sub-menu ul li a,
    .heading .sub-menu ul li span {
        display: block;
        font-size: 1.6rem;
        padding: 1.8rem 4rem;
    }

    .heading .sub-menu .container {
        padding: 0 1.5rem;
    }

}

/*//////////////////// RELATED-BLOCK ////////////////////////*/

.related-block .cel:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8rem 0 0;
    text-align: center;
}

.related-block .cel:nth-child(2) h3 {
    font-size: 1.6rem;
    margin: 0;
}

.related-block .cel:nth-child(2) .deco {
    font-family: var(--font-family-en);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.related-block .cel:nth-child(2) .deco span {
    display: block;
    font-size: 1rem;
}

.related-block .cel:nth-child(2) figure {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100px;
}

.related-block .cel:nth-child(2) p {
    font-size: 1.3rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.related-block li {
    max-width: 300px;
    margin: 0 auto 3rem;
}

.related-block .cel:nth-child(2) .inner {
    margin: 2rem auto 0;
}

@media (min-width: 821px) {

    .related-block .df {
        flex-direction: column;
    }

    .related-block .cel:nth-child(1) {
        padding: 8rem 0 0;
    }

    .related-block .cel:nth-child(2) {
        flex: 4;
    }

    .related-block .cel:nth-child(2) .df {
        display: flex;
        flex-direction: row;
        gap: 30px;
    }

}

@media (min-width: 1201px) {
    .related-block .df {
        flex-direction: row;
    }

    .related-block .cel:nth-child(1) {
        padding: 0;
        text-align: left;
    }

    .related-block .cel:nth-child(2) .inner {
        margin: 8rem auto 0;
    }
}

/*//////////////////// DOCUMENT ////////////////////////*/

.document {
    line-height: 2;
    padding: 6rem 0;
}

.document ul>li>span,
.document ol>li>span {
    display: block;
    font-size: 1.6rem;
    margin: 3rem 0 0;
}

.document ol {
    counter-reset: num 0;
    margin-left: 2rem;
}

.document ol>li {
    counter-increment: num 1;
    position: relative;
    padding-left: 1rem;
    margin: 0 0 2rem;
}

.document ol>li::before {
    content: counter(num)'.';
    position: absolute;
    left: -2rem;
    font-size: 1.6rem;
}

.document ol>li>ol>li::before {
    content: '(' counter(num)')';
}

.document ol.maru {
    counter-reset: maru;
    padding: 0;
    margin: 1rem 0;
}

.document ol.maru li {
    line-height: 1.4;
    padding: 0 0 0 2rem;
}

.document ol.maru li:before {
    content: counter(maru);
    counter-increment: maru;
    border: 1px solid var(--color-basic);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14px;
    width: 14px;
    font-size: 1rem;
    margin: .4rem 0 0 0;
}

.document dl {
    max-width: 500px;
}

@media (min-width: 821px) {

    .document dl {
        max-width: 500px;
    }

    .document dl dt,
    .document dl dd {
        border-bottom: none;
        padding: 0;
    }

}

/*//////////////////// POLICY ////////////////////////*/

.policy .head-block {
    border-bottom: 1px solid var(--color-line);
}

/*//////////////////// TERMS ////////////////////////*/

.terms .head-block {
    border-bottom: 1px solid var(--color-line);
}

.terms .document ol.jou>li::before {
    content: '第' counter(num)'条';
    left: -3rem;
}

.terms .document ol>li>ol>li::before {
    content: counter(num)'.';
}

.terms .document ol>li>ol>li>ol>li::before {
    content: '(' counter(num)')';
}

/*//////////////////// CONTACT ////////////////////////*/

.contact-section {
    padding: 0;
    background: var(--color-non);
    border-top: 1px solid var(--color-line);
}

@media (min-width: 821px) {

    .contact-section .contents-wrap {
        display: flex;
        align-items: center;
    }

}

.contact-left {
    width: 100%;
}

.contact-image {
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-right {
    width: 100%;
    padding: 1rem 2rem 6rem;
}

.contact-text {
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 3rem;
}

@media (min-width: 821px) {

    .contact-content {
        flex-direction: row;
        align-items: center;
    }

    .contact-left {
        width: 50%;
    }

    .contact-image {
        height: 400px;
    }

    .contact-right {
        width: 50%;
        padding: 4rem 3rem 8rem;
        max-width: 600px;
        margin: auto;
    }

    .contact-title {
        font-size: 5rem;
    }
}

/*//////////////////// ANIMATION ////////////////////////*/

.mask-reveal {
    overflow: hidden;
}

.mask-reveal img {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/*//////////////////// RECRUIT ////////////////////////*/

.recruit .heading {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: clip;
    text-align: center;
    padding: 0;
}

.recruit .heading .inner {
    padding: 0 0 20rem;
    margin: 0 auto;
}

.recruit .heading .inner p {
    margin: 0;
}

.recruit .heading .inner .deco {
    margin: 4rem 0;
}

.recruit .heading .inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(8px) brightness(1.5);
}

.recruit .heading>* {
    position: relative;
    z-index: 1;
}

.recruit .heading figure.heading-hero-swiper-wrap {
    position: relative;
    height: 500px;
    margin: 0;
    overflow: hidden;
    background-image: none;
    background-attachment: scroll;
}

.recruit .heading .heading-hero-swiper-wrap .heading-hero-swiper {
    width: 100%;
    height: 100%;
}

.recruit .heading .heading-hero-swiper-wrap .heading-hero-swiper .swiper-slide {
    height: 100%;
}

.recruit .heading .heading-hero-slide-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
}

.recruit .heading .heading-hero-slide-1 {
    background-image: url(../../content/images/recruit/main_s.webp);
}

.recruit .heading .heading-hero-slide-2 {
    background-image: url(../../content/images/recruit/main2_s.webp);
}

.recruit .heading .heading-hero-slide-3 {
    background-image: url(../../content/images/recruit/main3_s.webp);
}

.recruit .heading .heading-hero-slide-4 {
    background-image: url(../../content/images/recruit/main4_s.webp);
}

.recruit .heading .heading-hero-slide-5 {
    background-image: url(../../content/images/recruit/main5_s.webp);
}

@media (min-width: 821px) {

    .recruit main {
        position: relative;
        z-index: 0;
    }

    .recruit .head-block {
        position: relative;
        z-index: 2;
        background-color: var(--color-non);
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(18px) brightness(2);
        backdrop-filter: blur(18px) brightness(2);
    }

    .recruit main .heading {
        overflow: visible;
        padding-top: 100vh;
        position: relative;
        z-index: 1;
        border-bottom: none;
        margin-bottom: 0;
    }

    .recruit .heading figure.heading-hero-swiper-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1;
    }

    .recruit .heading>.inner {
        position: relative;
        z-index: 10;
        transform: translateZ(0);
        background-color: var(--color-non);
    }

    .recruit article {
        position: relative;
        z-index: 1;
        background-color: var(--color-non);
        border-top: 1px solid var(--color-line);
        margin-top: 0;
    }

    .recruit .breadcrumb,
    .recruit .contact-section,
    .recruit footer {
        position: relative;
        z-index: 1;
        background-color: var(--color-non);
    }

    .recruit .breadcrumb {
        margin-top: 0;
        padding-top: 7rem;
    }

    .recruit .heading .heading-hero-slide-1 {
        background-image: url(../../content/images/recruit/main.webp);
    }

    .recruit .heading .heading-hero-slide-2 {
        background-image: url(../../content/images/recruit/main2.webp);
    }

    .recruit .heading .heading-hero-slide-3 {
        background-image: url(../../content/images/recruit/main3.webp);
    }

    .recruit .heading .heading-hero-slide-4 {
        background-image: url(../../content/images/recruit/main4.webp);
    }

    .recruit .heading .heading-hero-slide-5 {
        background-image: url(../../content/images/recruit/main5.webp);
    }

}

.recruit .feature-block .df {
    flex-direction: column;
}

.recruit .feature-block .cel:nth-child(1) .bg {
    height: 400px;
}

.recruit .feature-block .cel:nth-child(2) .nuc {
    border-bottom: 1px solid var(--color-line);
}

.recruit .feature-block .cel:nth-child(2) li {
    border-bottom: 1px solid var(--color-line);
}

.recruit .feature-block {
    counter-reset: num 0;
}

.recruit .feature-block h3 {
    counter-increment: num 1;
    position: relative;
    padding: 0 0 0 8rem;
    font-size: 2rem;
}

.recruit .feature-block h3::before {
    content: '0' counter(num);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    font-family: var(--font-family-num);
    font-size: 6rem;
    font-weight: 600;
    line-height: 1;
    z-index: -1;
}


@media (min-width: 941px) {
    .recruit .feature-block .df {
        flex-direction: row;
    }

    .recruit .feature-block .cel:nth-child(2) {
        flex: 3;
    }

    .recruit .feature-block .cel:nth-child(1) .bg {
        height: 100vh;
        min-width: 400px;
    }
}

.recruit .field-block {
    text-align: center;
    margin: 8rem auto 0;
}

.recruit .field-block .card-wrapper .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    padding: 5rem 3rem 3rem;
}

.recruit .field-block .card-wrapper .card .deco span {
    font-size: 2rem;
    margin: 0 0 .2rem;
    letter-spacing: .04rem;
}

.recruit .field-block .card-wrapper .card h3 {
    margin: 1rem 0;
    font-size: 1.6rem;
    font-weight: 600;
}

.recruit .field-block .outer {
    border-top: 1px solid var(--color-line);
}

.recruit .field-block .inner {
    margin: 0 auto;
}

.recruit .field-block .inner.w9 {
    max-width: 1400px;
}

.recruit .field-block .card-wrapper {
    grid-template-columns: repeat(1, 1fr);
}

.recruit .field-block .card-wrapper .card {
    border-bottom: 1px solid var(--color-line);
}

.recruit .field-block .card-wrapper .card:last-child {
    border-bottom: none;
}

@media (min-width: 821px) {

    .recruit .field-block .card-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .recruit .field-block .card-wrapper .card {
        border-bottom: none;
    }

    .recruit .field-block .card-wrapper .card {
        padding: 6rem;
    }

}

.recruit .office-block {
    text-align: center;
    padding: 10rem 0;
}

.recruit .office-block .loop {
    overflow: hidden;
}

.recruit .interview-block .cel:nth-child(1).sticky li:last-child a {
    background: var(--color-basic);
    color: var(--color-non);
}

.recruit .interview-block dl.ac>dt.active {
    background: var(--color-pale);
    color: var(--color-basic);
}

.recruit .interview-block dl.ac.qa>dt.active::before {
    color: var(--color-non);
}

.recruit .interview-block {
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.recruit .interview-block .cel:nth-child(2) .inner {
    margin: 8rem auto;
}

.recruit .interview-block ul li:not(:last-child) {
    border-bottom: 1px solid var(--color-line);
}

.recruit .interview-block .cel:nth-child(2) h4 {
    margin: 0;
}

.recruit .interview-block .cel:nth-child(2) .lead {
    font-size: 1.6rem;
    margin: 0 0 1rem;
}

.recruit .interview-block .cel:nth-child(2) dt {
    justify-content: center;
    border-top: 2px dotted var(--color-light);
    border-bottom: none;
}

.recruit .interview-block .cel:nth-child(2) .nuc:nth-child(1) img {
    border-radius: 4px;
    text-align: center;
    margin: auto;
    width: 100%;
    max-width: 500px;
    padding: 0 0 3rem;
}

.recruit .interview-block .cel:nth-child(2) .nuc:nth-child(2) {
    flex: 1.5;
}


@media (min-width: 821px) {

    .recruit .interview-block .cel:nth-child(2) {
        flex: 3;
    }

}

.recruit .faq-block h2 {
    text-align: center;
}

.recruit li figure .bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
}

.workfield {
    max-width: 700px;
    margin: auto;
}

.recruit .card .workfield figure {
    height: 340px;
}

.workfield .deco {
    margin: 0 0 1rem;
}

.recruit .interview-block .cel ul li .ac dt span {
    font-family: var(--font-family-num);
    font-weight: 600;
}

.recruit .interview-block .inner.w987 img {
    border-radius: 4px;
    margin: 0 0 2rem;
}

.recruit .interview-block .cel:nth-child(1) {
    display: none;
    flex: initial;
    width: 100%;
    min-width: 300px;
}

.recruit .interview-block .cel.sticky {
    position: relative;
    height: auto;
}

.recruit .interview-block ul.ha li a {
    width: 90%;
    margin: 0 auto;
}

.recruit .feature-block .inner.w987 {
    max-width: 600px;
}

@media (min-width: 821px) {

    .recruit .interview-block .dfx {
        flex-direction: column;
    }

    .recruit .interview-block ul.ha li a {
        width: 80%;
        margin: 0 auto;
    }

}

@media (min-width: 941px) {

    .recruit .interview-block .cel.sticky {
        position: sticky;
        top: 60px;
        height: fit-content;
    }

    .recruit .interview-block .dfx {
        flex-direction: row;
    }

    .recruit .interview-block ul.ha li a {
        width: 100%;
        margin: 0;
    }

    .recruit .interview-block .cel:nth-child(1) {
        display: block;
        flex: initial;
        width: 20%;
        min-width: 300px;
        margin: 0;
        padding: 0;
    }

    .recruit .interview-block .cel:nth-child(2) {
        border-left: 1px solid var(--color-line);
    }

}

/*//////////////////// RECRUIT numbers-block ////////////////////////*/

.recruit .numbers-block {
    text-align: center;
}

.recruit .numbers-block h3 {
    text-align: center;
}

.recruit .area-wrap {
    display: grid;
}

.recruit .area-wrap>div {
    border-bottom: 1px solid var(--color-line);
}

.recruit .area-wrap .contents-img {
    padding: 0;
}

.recruit .area-wrap {
    margin: 0 0 2rem;
}

.recruit .area-wrap h3 {
    font-size: 2.6rem;
    letter-spacing: .05rem;
    line-height: 1;
    font-weight: 600;
    color: var(--color-basic);
    padding: 1rem 0;
}

.recruit .area-wrap p {
    text-align: center;
    margin: 2rem 0 0;
}

@media (min-width: 600px) {

    .recruit .area-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-auto-flow: row;
        grid-template-rows: auto;
        border-top: 1px solid var(--color-line);
    }

    .recruit .area1 {
        grid-area: 1 / 1 / 2 / 3;
    }

    .recruit .area2 {
        grid-area: 1 / 3 / 2 / 5;
        border-left: 1px solid var(--color-line);
    }

    .recruit .area3 {
        grid-area: 2 / 1 / 3 / 5;
    }

}

.recruit .count {
    font-family: var(--font-family-en);
    font-size: clamp(6rem, 5.156rem + 3.56vw, 8rem);
    letter-spacing: .05rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
}

.recruit .count.unit1 {
    font-size: clamp(6rem, 5.156rem + 3.56vw, 8rem);
}

.recruit .countup-trigger:nth-child(1) .count.unit1::before {
    content: "男";
}

.recruit .countup-trigger:nth-child(2) .count.unit1::before {
    content: "女";
}

.recruit .countup-trigger:nth-child(1) .count.unit2::before {
    content: "直受け";
}

.recruit .countup-trigger:nth-child(1) .count.unit3::before {
    content: "20代";
}

.recruit .countup-trigger:nth-child(2) .count.unit3::before {
    content: "30代";
}

.recruit .countup-trigger:nth-child(3) .count.unit3::before {
    content: "40代";
}

.recruit .count.unit1::before,
.recruit .count.unit1::after,
.recruit .count.unit2::before,
.recruit .count.unit2::after,
.recruit .count.unit3::before,
.recruit .count.unit3::after {
    color: var(--color-basic);
    font-size: clamp(1.6rem, 1.347rem + 1.07vw, 2.2rem);
    font-weight: 600;
}

.recruit .count.unit1::after,
.recruit .count.unit2::after,
.recruit .count.unit3::after {
    content: "%";
    font-size: clamp(3rem, 2.156rem + 3.56vw, 5rem);
}

.recruit .area1 .contents-inner,
.recruit .area3 .contents-inner {
    display: flex;
    justify-content: center;
    gap: 30px;
}


.recruit .contact-block {
    border-bottom: 1px solid var(--color-line);
}

.recruit .faq-block {
    border-bottom: 1px solid var(--color-line);
}

.recruit-filter {
    background: #111111;
    padding: 8rem 0;
}

.recruit-filter .ttl-area {
    color: var(--color-non);
    margin: 4rem auto;
}

.recruit-filter .recruit-job-cards-inner {
    max-width: 1280px;
    margin: auto;
    display: flow-root;
}

.recruit-filter .recruit-filter-buttons-wrap {
    margin-bottom: 3rem;
}

.recruit-filter .recruit-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.recruit-filter .recruit-filter-btn {
    padding: 1rem 2rem;
    font-family: var(--font-family-ja);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-basic);
    background: var(--color-pale);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.25s var(--easing);
}

.recruit-filter .recruit-filter-btn:hover {
    background: var(--color-here);
    border-color: var(--color-dark);
}

.recruit-filter .recruit-filter-btn.is-active {
    color: var(--color-non);
    background: var(--color-black);
    border: solid 2px #fff;
}

.recruit-filter .recruit-filter-btn:active {
    transform: scale(0.98);
}

.recruit-filter .recruit-job-cards-wrap {
    padding: 0 1rem 4rem;
    display: flow-root;
}

.recruit-filter .recruit-job-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(min-content, auto);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    height: fit-content;
}

.recruit-filter .recruit-job-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
    align-self: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-non);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    color: var(--color-basic);
}

.recruit-filter .recruit-job-card-flip-wrap {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
    min-height: 0;
}

.recruit-filter .recruit-job-card-inner {
    display: contents;
}

.recruit-job-card:focus {
    outline: none;
}

.recruit-job-card:focus-visible {
    outline: 2px solid #333;
    outline-offset: 4px;
}

.recruit-filter .recruit-job-card-head {
    grid-row: 1;
    background: var(--color-non);
    padding: 3rem 1.4rem 1.2rem;
}

.recruit-filter .recruit-job-card-label {
    display: block;
    font-size: 1.2rem;
    font-family: var(--font-family-en);
    font-weight: 600;
    color: var(--color-line);
}

.recruit-filter .recruit-job-card-en {
    display: block;
    font-family: var(--font-family-en);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.recruit-filter .recruit-job-card-img {
    grid-row: 2;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
}

/*リクルートHOVER*/
@media (hover: hover) and (pointer: fine) {
    .recruit-filter .recruit-job-card-flip-wrap {
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .recruit-filter .recruit-job-card-img {
        transition:
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, filter;
        transform-origin: center center;
    }

    .recruit-filter .recruit-job-card:hover .recruit-job-card-flip-wrap,
    .recruit-filter .recruit-job-card:focus-visible .recruit-job-card-flip-wrap {
        transform: translateY(-12px);
    }

    .recruit-filter .recruit-job-card:hover .recruit-job-card-img,
    .recruit-filter .recruit-job-card:focus-visible .recruit-job-card-img {
        transform: translateY(-22px) scale(1.18);
        filter: brightness(150%);
    }
}

/*リクルートHOVERここまで*/

.recruit-filter .recruit-job-card-body {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    min-height: min-content;
    padding: 1rem 1.4rem 3rem;
}

.recruit-filter .recruit-job-card-body h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
}

.recruit-filter .recruit-job-card-body p {
    margin: 0 0 1.2rem;
    font-size: 1.3rem;
    line-height: 1.6;
    flex-shrink: 0;
}

.recruit-filter .recruit-job-card-body .btn {
    flex-shrink: 0;
    align-self: flex-end;
    margin-top: auto;
    max-width: 100%;
}

.recruit-filter .recruit-job-card.is-hidden {
    display: none;
}

html.recruit-modal-open,
body.recruit-modal-open {
    overflow: hidden;
    /*touch-action: none;*/
}

.recruit-job-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 0.35s, opacity 0.35s ease;
}

.recruit-job-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s 0s, opacity 0.35s ease;
}

.recruit-job-modal-backdrop {
    position: absolute;
    inset: 0;
    background: #74BECB;
}

.recruit-job-modal-scroll {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 2rem 0 4rem 2rem;
    scrollbar-color: #333 #111;
    scrollbar-width: thin;
    height: 100dvh;
}


.recruit-job-modal-inner {
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    min-width: 0;
    margin: 0 auto;
    padding: 0 2rem 0 0;
}

/*
.recruit-job-modal-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    min-width: 0;
    margin: 0 auto;
    padding: 0 2rem 0 0;

    flex: 0 0 auto;
    align-self: stretch;
    min-height: auto;
    display: block;
}
*/
.recruit-job-modal-close {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 9999;
    width: 80px;
    height: 80px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.recruit-job-modal-close::before,
.recruit-job-modal-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 2px;
    background: #000;
    transform: translate(-50%, -50%) rotate(45deg);
}

.recruit-job-modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.recruit-job-modal-close:hover {
    opacity: 0.7;
}

@media (max-width: 800px) {
    .recruit-job-modal-close {
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.4);
    }

    .recruit-job-modal-close::before,
    .recruit-job-modal-close::after {
        width: 24px;
        height: 2px;
        background: #ffffff;
    }
}

.recruit-job-modal-panels {
    position: relative;
}

.recruit-job-modal-panel {
    display: none;
    flex-direction: column;
    gap: 0;
}

.recruit-job-modal-panel.is-active {
    display: flex;
}

.recruit-job-modal-img-wrap {
    position: relative;
    width: 100%;
    margin: 0 0 1.5rem;
    overflow: hidden;
}

.recruit-job-modal-join {
    position: absolute;
    top: 1rem;
    right: 1rem;
    left: auto;
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--color-black);
    letter-spacing: 0.05em;
    z-index: 2;
    pointer-events: none;
    text-align: right;
}

.recruit-job-modal-img-wrap::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.recruit-job-modal-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.recruit-job-modal-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recruit-job-modal-ttl-en {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-black);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.recruit-job-modal-ttl-ja {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-black);
}

.recruit-job-modal-body {
    margin: 0;
}

.recruit-job-modal-body p {
    color: var(--color-black);
}

.recruit-job-modal-text .btn {
    align-self: flex-start;
    margin-top: 0.25rem;
}

@media (min-width: 801px) {

    .recruit-job-modal-panel.is-active {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 3rem;
    }

    .recruit-job-modal-panel .df .cel:nth-child(1) {
        min-height: 400px;
    }

    .recruit-job-modal-img-wrap {
        flex: 0 0 45%;
        margin-bottom: 0;
    }

    .recruit-job-modal-img-wrap::before {
        padding-top: 100%;
    }

    .recruit-job-modal-text {
        flex: 1;
        min-width: 0;
    }
}

@media (min-width: 520px) {
    .recruit-filter .recruit-job-cards {
        gap: 5rem 5%;
    }
}

@media (min-width: 768px) {
    .recruit-filter .recruit-job-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 5rem 4%;
    }
}

@media (min-width: 1025px) {
    .recruit-filter .recruit-job-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.recruit-job-modal-panel .inner {
    width: 100%;
    max-width: 900px;
}

.recruit-job-modal-panel .df {
    z-index: 1;
    min-width: 0;
}

.recruit-job-modal-panel .df::before {
    content: "JOIN US";
    position: absolute;
    top: 5px;
    right: 10px;

    font-size: clamp(5rem, 10vw, 12rem);
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    z-index: 2;
}

.recruit-job-modal-panel .df .cel:nth-child(1) {
    flex: 0 0 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    min-height: 300px;
    filter: brightness(150%) grayscale(100%);
    -webkit-filter: brightness(150%) grayscale(100%);
}

.recruit-job-modal-panel .df .cel:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8rem 0;
}

@media (min-width: 821px) {
    .recruit-job-modal-panel .df::before {
        top: 10px;
        left: 40px;
        right: auto
    }
}

.recruit .numbers-block .area-wrap .inner {
    margin: 6rem auto;
}

.anchor-ttl {
    font-size: 4rem;
    line-height: 1;
    padding: 0 0 5rem;
    font-weight: 300;
    text-align: center;
}

.anchor-ttl span {
    font-family: var(--font-family-num);
    font-weight: 600;
    font-size: 10rem;
    padding: 0;
    display: block;
    line-height: 1;
}

@media (min-width: 821px) {
    .anchor-ttl {
        font-size: 5rem;
    }

    .anchor-ttl span {
        font-size: 14rem;
        padding: 0 1.5rem 0 0;
        display: inline-block;
    }
}

/*//////////////////// DX/AI ////////////////////////*/

.dx-ai .field-block {
    border-bottom: 1px solid var(--color-line);
}

.dx-ai ul.area li {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    border: 1px solid var(--color-line);
    padding: 1rem 0 1rem 4rem;
    margin: 0 0 2rem;
}

.dx-ai ul.area li:last-child {
    margin: 0;
}

.dx-ai ul.area li::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(0);
    transition: .2s;
    background: url(../../content/images/icon_dxai.svg) no-repeat center center/contain;
    margin: 0 .5rem;
}

.dx-ai ul.line {
    background: var(--color-pale);
    padding: 2rem;
    margin: 0 0 2rem;
}

.dx-ai ul.line li {
    display: flex;
    align-items: center;
    margin: 0 0 1rem;
}

.dx-ai ul.line li:last-child {
    margin: 0;
}

.dx-ai ul.line li::before {
    content: "";
    height: 2px;
    width: 13px;
    background: var(--color-basic);
    margin: 0 .5rem 0 0;
}

/*//////////////////// CONTACT-BLOCK ////////////////////////*/

.contact-block .inner {
    margin: 4rem auto;
}

/*//////////////////// DECO ////////////////////////*/

.about .professional-block .deco,
.about .future-block .deco,
.dx-ai .quality-block .deco,
.dx-ai .operation-block .deco,
.dx-ai .creation-block .deco,
.dx-ai .company-wide-block .deco {
    margin: 5rem 0;
}

/*//////////////////// 404 ////////////////////////*/

.bg-box {
    background: var(--color-pale);
    padding: 8rem 0;
}


/*//////////////////// ANCHOR ////////////////////////*/

.heading .anchor {
    border-top: 1px solid var(--color-line);
}

.heading .anchor ul {
    counter-reset: num 0;
}

.heading .anchor ul li {
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.heading .anchor ul {
    border-left: 1px solid var(--color-line);
}

.heading .anchor ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.heading .anchor ul li a:hover {
    color: var(--color-corporate);
}

.heading .anchor ul li a span {
    display: block;
    font-family: var(--font-family-en);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    text-align: left;
}

@media (min-width: 821px) {

    .heading .anchor {
        border-bottom: 1px solid var(--color-line);
    }

    .heading .anchor ul li {
        border-bottom: none;
    }

    .heading .anchor .dg {
        max-width: 1200px;
        margin: auto;
    }

}

.recruit .heading .anchor {
    margin: 0 0 10rem;
}

.recruit .heading .anchor ul li a span {
    display: inline-block;
    font-size: 2.4rem;
    margin: 0 .5rem 0 0;
}

/*//////////////////// HOME ////////////////////////*/

body.home.modal-open .hero-glass-object {
    opacity: 0 !important;
    z-index: 1;
}

body.home.modal-open .about-strengths .strengths-image {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

body.home.modal-open .about-strengths {
    position: relative;
    top: auto;
}

/*//////////////////// HOME head-block ////////////////////////*/

.home .head-block {
    position: relative;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.home .head-block .hero-glass-object {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 220px;
    height: 220px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-out !important;
}

@media (max-width: 993px) {

    .home .head-block .hero-glass-object {
        top: 55%;
        max-width: 250px;
        height: 250px;
    }

}

@media (min-width: 994px) {

    .home .head-block .hero-glass-object {
        max-width: 330px;
        height: 330px;
        left: 25%;
    }

}

.home .head-block .hero-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 600px;
    border-bottom: 1px solid var(--color-line)
}

.home .head-block .hero-slider {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 400px;
    order: 2;
    background: #000;
}

.home .head-block .hero-swiper {
    width: 100%;
    height: 100%;
}

.home .head-block .hero-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
}

.home .head-block .hero-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    min-height: 400px;
}

.home .head-block .hero-content {
    position: relative;
    width: 100%;
    padding: 6rem 2rem;
    background: var(--color-non);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    order: 1;
}

.home .head-block .hero-content-inner {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.home .head-block .hero-logo {
    opacity: 0;
}

.home .head-block .hero-logo img {
    width: 120px;
}

.home .head-block .hero-title-wrapper {
    overflow: hidden;
}

.home .head-block .hero-title {
    font-family: var(--font-family-num);
    font-size: clamp(2.4rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    margin: 1rem 0 0;
}

.home .head-block .hero-title-line {
    display: block;
}

.home .head-block .hero-subtitle {
    font-family: var(--font-family-en);
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 600;
    opacity: 0;
    margin: 0.5rem 0 0;
    letter-spacing: 0.03rem;
}

.home .head-block .hero-ja {
    font-size: clamp(1.7rem, 2.1vw, 2.6rem);
    line-height: 1.4;
    /*font-family: var(--font-family-ja);*/
    margin: 2.6rem 0 2rem;
    /*font-weight: 300;*/
}

.home .head-block p.hero-ja span {
    display: block;
    font-size: 1.4rem;
    line-height: 1.4;
    margin: .5rem 0 2rem;
    font-family: var(--font-family-ja);
}

.home .head-block .hero-recruit-line {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.home .head-block .hero-recruit-vertical-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-line);
}

.home .head-block .hero-recruit-btn {
    font-family: var(--font-family-en);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.1rem;
    color: var(--color-basic);
    padding: 1rem 0.5rem;
    transform: rotate(90deg);
    transform-origin: center;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    position: relative;
    top: 120px;
    z-index: 1;
    display: inline-block;
    pointer-events: auto;
    box-sizing: border-box;
    text-align: center;
}

.home .head-block .hero-recruit-btn:hover {
    color: var(--color-corporate);
}

@media (min-width: 994px) {

    .home .head-block .hero-container {
        flex-direction: row;
    }

    .home .head-block .hero-slider {
        width: 50%;
        height: calc(100vh - 60px);
        order: 1;
        min-height: 600px;
    }

    .home .head-block .hero-content {
        width: calc(50% - 60px);
        padding: 4rem;
        order: 2;
    }

    .home .head-block .hero-recruit-line {
        display: flex;
        align-items: start;
    }

    .home .head-block .hero-slide-image {
        width: 100%;
        height: 100%;
        min-height: 800px;
    }

    .home .head-block .hero-logo img {
        width: auto;
        width: calc(26%);
    }

}


.home .head-block .hero-ai-logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 1.5rem 0 0 0;
}

.home .head-block .hero-ai-logo img {
    width: 80px;
    margin: 0;
}

.home .head-block .hero-ai-logo p {
    font-size: clamp(1.4rem, 1.8vw, 1.8rem);
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
    margin: 0;
    font-family: var(--font-family-ja);
}

.home .head-block .btn.en.size-s {
    font-size: 1.3rem;
}

@media (min-width: 994px) {
    .home .head-block .hero-ai-logo img {
        width: 100px;
        margin: 0;
    }
}


/*//////////////////// HOME typo-block-3 ////////////////////////*/

.home .typo-block-3 {
    display: none;
    margin: 7rem 0 0;
}

.home .typo-block-3 .deco {
    font-family: var(--font-family-num);
    font-size: clamp(3rem, 10vw, 10rem);
    color: var(--color-pale);
    font-weight: 800;
    letter-spacing: 0.15rem;
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
}

@media (min-width: 1201px) {

    .home .typo-block-3 {
        position: relative;
        display: block;
        text-align: right;
        bottom: -1.4rem;
        margin: 14rem 0 0;
    }

}

/*//////////////////// HOME typo-block-1 ////////////////////////*/

.home .typo-block-1 {
    position: relative;
    display: block;
    text-align: right;
    bottom: -1rem;
    margin: 7rem 0 0;
}

.home .typo-block-1 .deco {
    font-family: var(--font-family-num);
    font-size: clamp(5rem, 10vw, 10rem);
    color: var(--color-pale);
    font-weight: 800;
    letter-spacing: 0.15rem;
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
}

@media (min-width: 1201px) {

    .home .typo-block-1 {
        position: relative;
        display: block;
        text-align: right;
        bottom: -1.4rem;
        margin: 14rem 0 0;
    }

}

/*//////////////////// NEWS-BLOCK ////////////////////////*/

.news-block {
    position: relative;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.news-block .cel:nth-child(1) {
    display: block;
    border-bottom: 1px solid var(--color-line);
    padding: 4rem;
}

.news-block .cel:nth-child(1) .inner {
    margin: 8rem auto 0;
}

.news-block .card {
    grid-template-rows: auto 1fr auto 40px;
    padding: 0;
}

.news-block .card:nth-child(-n+2) {
    border-bottom: 1px solid var(--color-line);
}

.news-block .card a {
    grid-row: span 4;
}

.news-block .cel:nth-child(2) {
    border-top: none;
}

.news-block .card-wrapper .btn.en.size-s::after {
    content: none;
}

@media (min-width: 821px) {

    .news-block .card:nth-child(-n+2) {
        border-bottom: none;
    }

    .news-block .cel:nth-child(2) {
        border-left: none;
    }

    .news-block .df {
        flex-direction: column;
    }

}

@media (min-width: 1201px) {

    .news-block .df {
        flex-direction: row;
    }

    .news-block .cel:nth-child(1) {
        border: none;
    }

    .news-block .cel:nth-child(1) {
        flex: initial;
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .news-block .cel:nth-child(1) .inner {
        margin: 8rem auto;
    }

    .news-block .cel:nth-child(2) {
        flex: initial;
        width: 76%;
        max-width: 1100px;
        margin-right: 4%;
    }

}

@media (min-width: 1201px) {

    .news-block .cel:nth-child(1) {
        width: 26%;
    }

    .news-block .cel:nth-child(2) {
        width: 70%;
    }

}

/*//////////////////// HOME heading ////////////////////////*/

.home .heading h1 {
    font-size: 1.8rem;
    line-height: 1.4;
    font-family: var(--font-family-ja);
    font-weight: 400;
    margin: 0 0 2rem;
}

.home .heading .lead-company {
    font-family: var(--font-family-num);
    font-size: clamp(4rem, 3.156rem + 3.56vw, 6rem);
    line-height: 1.2;
    font-weight: 600;
    padding: 0 0 2rem;
}

.home .heading .lead-company span {
    font-family: var(--font-family-en);
    font-size: 1.6rem;
    font-weight: 600;
    display: block;
}

/*//////////////////// HOME typo-block-2 ////////////////////////*/

.home .typo-block-2 {
    padding: 8rem 2rem;
    background: var(--color-non);
    overflow: hidden;
}

.home .typo-block-2 .typo-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.home .typo-block-2 .typo-section {
    overflow-x: hidden;
    position: relative;
    padding: 6rem 0;
}

.home .typo-block-2 .typo-container {
    position: relative;
}

.home .typo-block-2 .typo-text-wrapper {
    display: block;
    white-space: nowrap;
    will-change: transform;
    width: fit-content;
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.home .typo-block-2 .typo-text {
    font-family: var(--font-family-num);
    font-size: clamp(3rem, 14vw, 20rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    white-space: nowrap;
    display: inline-block;
    color: var(--color-basic);
    line-height: 1;
}

@media (min-width: 821px) {

    .home .typo-block-2 .typo-section {
        padding: 12rem 4rem;
    }

}

/*//////////////////// HOME about-block ////////////////////////*/

.home .about-block {
    background: var(--color-non);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.home .about-block {
    overflow: visible;
}

.home .about-block .contents-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home .about-block .home-about-lead {
    padding: 0 1.5rem 1rem;
    font-size: 1.4rem;
    max-width: 560px;
    margin: auto;
}

.home .about-block .home-about-lead span {
    font-family: var(--font-family-ja);
    font-size: clamp(1.6rem, 1.431rem + 0.71vw, 2rem);
    line-height: 1.4;
    display: block;
    padding: 1rem 0 1.5rem;
}

.home .about-block .gotoabout {
    border-top: 1px solid var(--color-line);
    padding: 8rem 0 0;
}

@media (min-width: 821px) {

    .home .about-block .about-container {
        position: relative;
        overflow: visible;
    }

    .home .about-block .contents-wrap {
        flex-direction: row;
        align-items: flex-start;
        position: relative;
        overflow: visible;
        height: auto;
        gap: 0;
    }

}

.home .about-block .about-header {
    margin-bottom: 4rem;
    text-align: center;
}

.home .about-block .about-title {
    font-family: var(--font-family-en);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-basic);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1rem;
}

.home .about-block .about-subtitle {
    font-family: var(--font-family-en);
    font-size: 1.6rem;
    color: var(--color-level0);
    letter-spacing: 0.2rem;
}

.home .about-block .cel:nth-child(1) {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
}

.home .about-block .box-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 4rem);
    max-width: 400px;
    max-height: calc(100% - 4rem);
    padding: 3rem 2rem;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px) brightness(1.1);
    -webkit-backdrop-filter: blur(20px) brightness(1.1);
    text-align: center;
    box-sizing: border-box;
}

.home .about-block .box-title {
    font-family: var(--font-family-en);
    font-size: clamp(3rem, 2.156rem + 3.56vw, 5rem);
    line-height: 1;
    font-weight: 600;
    color: var(--color-non);
    letter-spacing: 0.3rem;
    text-align: center;
}

.home .about-block .box-title span {
    font-family: var(--font-family-en);
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-non);
    letter-spacing: 0.1rem;
    display: block;
    padding: 0 0 3rem;
}

.home .about-block .box-lead {
    font-family: var(--font-family-ja);
    color: var(--color-non);
    font-size: 1.4rem;
    letter-spacing: .1rem;
    line-height: 1.6;
    font-weight: 600;
    margin: 0 1.5rem 3rem;
}

.home .about-block .cel:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 6rem auto;
}

.home .about-block .about-item {
    padding: 3rem 2rem;
    background: var(--color-non);
    max-width: 440px;
    margin: auto;
}

.home .about-block .about-item-title {
    font-family: var(--font-family-en);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-basic);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1.5rem;
}

.home .about-block .about-item-text {
    font-size: 1.4rem;
    line-height: 2;
    color: var(--color-basic);
    margin-bottom: 2rem;
}

.home .about-block .df {
    flex-direction: column;
}

.home .about-block .df>* {
    flex: auto;
}

@media (min-width: 941px) {

    .home .about-block .df {
        flex-direction: row;
    }

    .home .about-block .df>* {
        flex: 1;
    }

    .home .about-block .cel:nth-child(1) {
        height: 100vh;
    }

    .home .about-block .about-title {
        font-size: 5rem;
    }

    .home .about-block .about-strengths {
        height: 100vh;
        max-height: 100vh;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        align-self: flex-start;
        z-index: 1;
        flex-shrink: 0;
        margin-right: 0;
    }

    .home .about-block .cel:nth-child(2) {
        flex: 1.5;
        margin: 10rem auto;
        min-height: 100vh;
    }

    .home .about-block .about-item {
        padding: 3rem 2rem;
    }
}

/*//////////////////// HOME service-block ////////////////////////*/

.home .service-block {
    position: relative;
    padding: 6rem 0;
    color: var(--color-basic);
    background: var(--color-non);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 821px) {

    .home .service-block {
        padding: 14rem 0;
    }

}

.home .service-block .container {
    position: relative;
    z-index: 1;
}

@-webkit-keyframes graani {
    0% {
        background-position: 0% 96%
    }

    50% {
        background-position: 100% 5%
    }

    100% {
        background-position: 0% 96%
    }
}

@-moz-keyframes graani {
    0% {
        background-position: 0% 96%
    }

    50% {
        background-position: 100% 5%
    }

    100% {
        background-position: 0% 96%
    }
}

@-o-keyframes graani {
    0% {
        background-position: 0% 96%
    }

    50% {
        background-position: 100% 5%
    }

    100% {
        background-position: 0% 96%
    }
}

@keyframes graani {
    0% {
        background-position: 0% 96%
    }

    50% {
        background-position: 100% 5%
    }

    100% {
        background-position: 0% 96%
    }

}

.home .service-block .service-bg-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.home .service-block .service-bg-text-line {
    font-family: var(--font-family-num);
    font-size: clamp(3rem, 14vw, 20rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    white-space: nowrap;
    display: inline-block;
    color: var(--color-dark);
    line-height: 1;
    opacity: 0.08;
    position: absolute;
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box;
    left: 0;
    will-change: transform;
}

.home .service-block .service-bg-text-left {
    text-align: left;
    top: calc(50% - clamp(1.5rem, 7vw, 10rem));
    transform: translateY(-50%);
}

.home .service-block .service-bg-text-right {
    text-align: right;
    top: calc(50% + clamp(1.5rem, 7vw, 10rem));
    transform: translateY(-50%);
}

@media (min-width: 821px) {

    .home .service-block .service-bg-text-line {
        padding: 0 4rem;
    }

}

.home .service-block .service-header {
    text-align: center;
    margin-bottom: 5rem;
}

.home .service-block .service-title {
    font-family: var(--font-family-en);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-basic);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1rem;
}

.home .service-block .service-subtitle {
    font-size: 1.6rem;
    color: var(--color-level0);
}

.home .service-block .service-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 4rem;
}

.home .service-block .service-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.0);
    overflow: hidden;
    backdrop-filter: blur(10px) brightness(1.0);
    -webkit-backdrop-filter: blur(10px) brightness(1.0);
    max-width: 1200px;
    margin: auto;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.home .service-block .service-item-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.home .service-block .service-item-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.home .service-block .service-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.home .service-block .service-item:hover .service-item-image img {
    transform: scale(1.1);
}

.home .service-block .service-item-content {
    padding: 2rem 1.5rem;
}

.home .service-block .service-item-title {
    font-family: var(--font-family-en);
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.home .service-block .service-item-title span {
    font-size: 1.4rem;
    font-weight: 400;
    padding: 0 1rem .5rem 0;
    display: block;
    line-height: 1.4;
    letter-spacing: 0;
}

.home .service-block p.lead {
    font-size: 1.7rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    font-family: var(--font-family-ja);
}

.home .service-block .service-item-text {
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 2rem;
}

.home .service-block .service-viewall {
    position: relative;
    z-index: 1;
    text-align: center;
}

@media (min-width: 821px) {

    .home .service-block .service-title {
        font-size: 5rem;
    }

    .home .service-block .service-item {
        flex-direction: row;
        align-items: center;
    }

    .home .service-block .service-item-image {
        width: 40%;
        height: 70vh;
        max-height: 800px;
    }

    .home .service-block .service-item-content {
        width: 50%;
        padding: 4rem;
        max-width: 500px;
        margin: auto;
    }

    .home .service-block .service-item {
        min-height: 100vh;
    }

}

/*//////////////////// HOME conduct-block ////////////////////////*/

.home .conduct-block {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-dark);
    background-image: url('../../content/images/home/recruit_01c.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home .conduct-block .conduct-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.home .conduct-block .conduct-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-en);
    color: var(--color-non);
    padding: 2rem 2rem 5rem;
    letter-spacing: .01em;
    text-align: center;
    margin: auto;
}

.home .conduct-block .conduct-inner :nth-child(1) {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .1rem;
}

.home .conduct-block .conduct-inner :nth-child(2) {
    font-size: 1.6rem;
    font-family: var(--font-family-ja);
    font-weight: 600;
    line-height: 1.6;
    padding: 0.5rem;
    letter-spacing: .1rem;
}

.home .conduct-block .conduct-inner :nth-child(3) {
    font-size: clamp(5rem, 16vw, 22rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .05em;
}

/*//////////////////// HOME recruit-block ////////////////////////*/

.home .recruit-block {
    border-bottom: 1px solid var(--color-line);
}

.home .recruit-block .cel:nth-child(2) .nuc:nth-child(3) ul {
    display: flex;
    justify-content: end;
    gap: 2rem;
    text-align: right;
    font-family: var(--font-family-en);
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: .02em;
    padding: 1rem 0;
}

.home .recruit-block.s1 .df>.cel:nth-child(1) .deco span {
    font-weight: 700;
}

/*//////////////////// Block Editor ////////////////////////*/

.wp-block-embed.is-type-video .wp-block-embed__wrapper {
    max-width: 1000px;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
    width: 100% !important;
    height: 100% !important;
}

/*//////////////////// iOS ////////////////////////*/

@supports (-webkit-touch-callout: none) {

    .heading figure {
        background-attachment: scroll;
    }

}

/*//////////////////// WP緊急時お知らせ用 ////////////////////////*/
.home-feature {
    max-width: 1000px;
    margin: 6rem auto 6rem;
    padding: 0 1.5rem 0;
}

.home .home-feature .home-feature-inner h2 {
    font-size: 1.8rem;
    border-bottom: 1px solid #ccc;
    padding: .5rem;
    font-weight: 500;
}

.home .home-feature .home-feature-inner h3 {
    padding: .5rem;
    font-weight: 500;
    font-size: 1.6rem;
    border-bottom: 1px solid #ccc;;
}

.home .home-feature .home-feature-inner figure {
    margin: 0 0 2rem;
}


/*//////////////////// WP ////////////////////////*/

:root :where(article .is-layout-flex) {
    column-gap: 5rem;
}

@media (min-width: 768px) {
    .single article .is-layout-flex.v-center {
        align-items: center !important;
    }
}

.service.single h2.wp-block-heading {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 1rem;
    text-align: center;
}

.service.single h2.wp-block-heading::before {
    content: "SERVICE";
    display: block;
    font-family: var(--font-family-en);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05rem;
}

:where(.wp-block-columns) {
    margin-bottom: 5rem !important;
}

.service.single .mgb8 {
    margin-bottom: 8rem;
}

.service.single .mgb8 a {
    text-decoration: underline;
}



.news.single .news-container article .inner ul {
    list-style-type: disc;
    margin: 1rem 0 2rem 2rem;
}

.news.single .news-container article .inner .wp-block-details {
    margin: 1rem 0 2rem;
}

.single article .inner .wp-block-details summary {
    font-size: 1.6rem;
}

.news.single .news-container article .inner :where(.is-layout-flex.wp-block-gallery) {
    gap: 1.2rem;
    margin: 3rem 0;
}

.news.single .news-container article .inner a {
    text-decoration: underline;
}

.news.single .news-container article .inner a.wp-element-button {
    text-decoration: none;
}

.news.single .news-container article .inner :where(.wp-block-columns) {
    margin-bottom: 2rem !important;
}

.wp-block-separator {
    border: none;
    border-top: 1px solid !important;
}

.wp-block-button a.wp-block-button__link {
    border-radius: 2px;
    line-height: 1.4;
    margin: 1rem 0;
}