/* ========================================
   DESIGN TOKENS & BASE STYLES
   ======================================== */
:root {
    /* Colors */
    --color-mocha: #e1dcd9;
    --color-dark: #272727;
    --color-black: #000000;
    --color-white: #f7f7f7;
    /* --color-white: #ffffff; */
    --color-gray: #ececec;
    --color-greige: #c4c3b7;
    --color-sand: hsl(37, 27%, 81%);
    --color-pink: #c5b2ab;

    /* Typography */
    --font-family: 'Noto Sans JP', sans-serif;

    /* Font Sizes */
    --size-xs: 11px;
    --size-s: 13px;
    --size-m: 15px;
    --size-l: 26px;
    --size-xl: 54px;
    --size-xxl: 91px;

    /* Line Heights */
    --lh-normal: 26px;
    --lh-title: 28px;
    --lh-heading: 55px;
    --lh-large: 137.784%;
    --lh-xl: 1.2;

    /* Spacing */
    --space-normal: 3.5vw;
    /* --space-normal: 4vw; */

    /* elem */
    --header-height: 70px;
    /* --header-large: 3.6vw;
    --header-normal: 70px;
    --header-small: 60px; */
}

@media (min-width: 1920px) {
    :root {
        --header-height: 3.6vw;
    }
}

@media (max-width: 576px) {
    :root {
        --header-height: 60px;
    }
}

* {
    font-family: var(--font-family);
}

/* html {
    scroll-behavior: smooth
} */

body {
    background-color: var(--color-mocha);
    /* background-color: brown; */
    color: var(--color-dark);
    line-height: 1.6;

    /* padding-top: 25px; */

    font-size: var(--size-m);
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
}

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

span {
    display: inline-block;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

button:hover {
    cursor: pointer;
}

.overflow-hidden {
    overflow: hidden;
}

/* ========================================
   LAYOUT & UTILITIES
   ======================================== */
/* .header-content,
.scroll-indicator,
.works,
.message,
.service,
.news,
.recruit,
.footer {
    padding-left: 6vw !important;
    padding-right: 6vw !important;
} */

.container {
    margin: 0 auto;
    padding: 0 20px;
}

.outlink::after {
    content: url("../img/common/icon-outlink.svg");
    display: inline-block;
    margin-left: .5em;
    vertical-align: middle;
    line-height: 1em;
    width: 1em;
    height: 1em;
}

.btn-primary {
    position: relative;
    display: inline-block;
}

.btn-primary span {
    display: flex;
    /* height: 36px; */
    padding: 8px 27px 8px 19px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--color-dark);
    background: var(--color-mocha);
    text-decoration: none;
    height: 100%;

    color: var(--color-dark);
    text-align: center;
    font-family: "Noto Sans JP";
    /* font-size: 14px; */
    font-size: var(--size-m);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 5.18px;
    /* width: fit-content; */
    width: 100%;

    position: relative;
}

.btn-primary span img {
    max-height: 16px;
    margin-top: 1px;
}

.btn-primary::before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--color-dark);
    /* border: 1px solid var(--color-dark); */
    z-index: -1;
    opacity: .3;
    transition: transform 0.3s ease;
}

.btn-primary:hover {
    text-decoration: none !important;
}

.btn-primary:hover::before {
    transform: translate(6px, 6px);
}

.btn-primary::after {
    position: absolute;
    content: "";
    display: block;
    width: 7px;
    height: 100%;
    background-image: url("../img/triangle.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    bottom: 5px;
    right: 5px;
    transform-origin: bottom right;
    transition: transform 0.3s ease;
    z-index: 1;
}

.btn-primary:hover::after {
    transform: translate(2px, 2px);
}

.btn-primary.white-btn span {
    border: 1px solid var(--color-white);
    color: var(--color-white);
    background: var(--color-dark);
}

.btn-primary.white-btn::before {
    background: var(--color-white);
}

.btn-primary.white-btn::after {
    background-image: url("../img/triangle-white.svg");
}

.btn-primary.bg-gray-btn span {
    background: var(--color-gray);
}

.btn-primary.bg-white-btn span {
    background: var(--color-white);
}

.btn-primary img {
    width: 23px;
}

.slider-section .splide__track {
    overflow: visible !important;
    padding-bottom: 10px;
}

.splide:not(#staffVoicesSlider) {
    padding-right: 15px;
}

.splide__slide:last-child .btn-panel {
    /* margin-right: 15px; */
}

.btn-panel {
    position: relative;
}

.btn-panel:hover {
    /* border: 1px solid var(--color-white); */
}

.btn-panel img {
    transition: transform 0.3s ease;
}

.btn-panel:hover img {
    transform: scale(1.07);
}

.btn-panel::after {
    content: "";
    position: absolute;
    display: block;
    width: 7px;
    height: 7px;
    background-image: url("../img/triangle.svg");
    bottom: 8px;
    right: 8px;
    z-index: 10;
    transition: transform 0.3s ease;
}

.btn-panel:hover::after {
    transform: translate(4px, 4px);
}

.btn-primary,
.btn-panel {
    transition: transform .3s ease;
}

.btn-primary:hover,
.btn-panel:hover {
    transform: scale(1.05);
    z-index: 500;
}

.gray-btn span {
    background: var(--color-gray);
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
.title-xxl {
    font-size: var(--size-xxl);
    font-weight: 900;
    line-height: var(--lh-xl);
    /* color: var(--color-dark); */
}

.title-xl {
    font-size: var(--size-xl);
    font-weight: 700;
    line-height: var(--lh-large);
}

.title-l {
    font-size: var(--size-l);
    font-weight: 700;
    line-height: var(--lh-heading);
    /* color: var(--color-dark); */
}

.title-m {
    font-size: var(--size-l);
    font-weight: 700;
    /* line-height: var(--lh-heading); */
    line-height: 1.5em;
}

.title-s {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 55.16px;
    /* 306.444% */
}

.text-l {
    font-size: 18px;
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 500;
    line-height: 55.16px;
}

.text-m {
    font-size: var(--size-m);
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
}

.text-s {
    font-size: var(--size-s);
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    line-height: 2.15em;
}

@media (min-width: 1920px) {

    :root {
        --scale: 1.2;
    }

    .title-xxl {
        font-size: calc(var(--size-xxl) * var(--scale));
        /* line-height: var(--lh-xl); */
    }

    .title-xl {
        font-size: calc(var(--size-xl) * var(--scale));
        /* line-height: var(--lh-large); */
    }

    .title-l {
        font-size: calc(var(--size-l) * var(--scale));
    }

    .title-m {
        font-size: calc(var(--size-l) * var(--scale));
    }

    .title-s {
        font-size: calc(18px * var(--scale));
    }

    .text-m {
        font-size: calc(var(--size-m) * var(--scale));
        /* line-height: 1.8; */
    }

    .text-s {
        font-size: calc(var(--size-s) * var(--scale));
        /* line-height: 2.15em; */
    }

    .btn-primary span {
        font-size: calc(var(--size-m) * var(--scale));
    }
}

@media (max-width: 1024px) {
    .title-xxl {
        font-size: 46px;
        line-height: 115%;
    }

    .title-xl {
        font-size: 32px;
    }

    .title-l {
        font-size: 17px;
        line-height: 24px;
    }

    .title-m {
        font-size: 21px;
    }

    .title-s {
        font-size: 17px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
    }

    .text-l {
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
    }

    .text-m {
        /* line-height: 150%; */
        line-height: 173%;
    }

    .text-s {
        /* line-height: 150%; */
        line-height: 26px;
        /* 200% */
    }
}

/* ========================================
   HAMB MENU
   ======================================== */

body:has(#hamburgerMenu.show) {
    overflow: hidden;
}

#hamburgerMenu {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100lvh;
    margin: 0;
    z-index: 2000;
    pointer-events: none;
}

#hamburgerMenu.show {
    pointer-events: auto;
}

#hamburgerMenu .bg-glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0);
    z-index: -1;
    transition: backdrop-filter .5s ease, background-color .5s ease;
}

#hamburgerMenu.show .bg-glass {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
}

#menuContent {
    width: 50%;
    height: 100%;
    overflow-y: scroll;
    background: var(--color-dark);
    position: absolute;
    top: 0;
    right: -50%;
    transition: right .5s ease;
}

#hamburgerMenu.show #menuContent {
    right: 0;
}

#menuContent .close-btn {
    position: fixed;
    top: calc(var(--space-normal) / 2);
    right: var(--space-normal);
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transition: opacity .3s ease;
}

#hamburgerMenu.show .close-btn {
    opacity: 1;
}

#menuContent .close-btn .line {
    position: absolute;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--color-white);
    top: 0px;
}

#menuContent .close-btn .line:first-child {
    transform: translateY(17.5px) rotate(45deg);
}

#menuContent .close-btn .line:last-child {
    transform: translateY(17.5px) rotate(-45deg);
}

#menuContent .footer {
    padding-top: 120px;
    padding-left: calc(var(--space-normal) * 1);
    padding-right: var(--space-normal);
}

#menuContent .footer .footer-logo {
    max-width: 450px;
    width: 90%;
}

/* #menuContent .footer .footer-info, */
#menuContent .footer .footer-copyright,
#menuContent .footer .back-to-top {
    display: none;
}

@media (max-width: 756px) {
    #menuContent {
        width: 100%;
        right: -100%;
    }
}

@media (max-width: 576px) {
    #menuContent .footer {
        padding-top: 100px;
    }
}

/* HEADER */
.header {
    /* position: sticky; */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* background: var(--color-mocha); */
    /* padding: 20px 0; */
    padding: 0;
    /* height: var(--header-normal); */
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: absolute;
    top: 25px;
}

.header.cloned-header {
    position: fixed;
    /* transform: translateY(calc(var(--header-normal) * -1)); */
    transform: translateY(calc(var(--header-height) * -1));
    background: var(--color-mocha);
    transition: transform 0.3s;
    top: 0;
    /* z-index: 1000; */
}

.header.cloned-header.show {
    transform: translateY(0);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* max-width: 1280px; */
    margin: 0 auto;
    padding: 1.07em var(--space-normal);
    /* padding: 1em var(--space-normal); */
    /* height: 38px; */
    height: 100%;
    width: 100%;
    /* background-color: aquamarine; */
}

.header .logo {
    /* height: 38px; */
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: 900;
    font-size: 20px;
    color: var(--color-dark);
    text-decoration: none;
}

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

.header .nav-right {
    display: flex;
    align-items: center;
    gap: 47px;
}

/* .recruit-btn {
    z-index: 1;
    position: fixed;
} */

/* .menu-icon {
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} */

.header .hamb {
    position: relative;
    cursor: pointer;
    width: 35px;
    height: 22px;
    overflow: hidden;
}

.header .animation {
    transition: all .6s;
}

.header .line {
    position: absolute;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--color-dark);
    top: 0px;
}

.header .line:nth-child(2) {
    /* width: 66%; */
    top: 10px;
    left: 33%;
}

.header .line:nth-child(3) {
    /* width: 33%; */
    top: 20px;
    left: 66%;
}

#hamb:hover .line:nth-child(1) {
    animation: line01 .75s forwards;
}

#hamb:hover .line:nth-child(2) {
    animation: line02 .75s forwards;
}

#hamb:hover .line:nth-child(3) {
    animation: line03 .75s forwards;
}

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

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

    50.1% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}

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

    66.7% {
        transform: translateX(-133%);
    }

    66.8% {
        transform: translateX(133%);
    }

    100% {
        transform: translateX(0%);
    }
}

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

    83.4% {
        transform: translateX(-166%);
    }

    83.5% {
        transform: translateX(166%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* HERO SECTION */
.hero {
    position: relative;
    /* overflow: hidden; */
    /* aspect-ratio: 1470 / 800; */
    aspect-ratio: 1280 / 950;
    width: 100%;
    /* min-height: 1000px; */
    /* height: calc(100svh + 95px); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding-top: 120px; */
    /* padding-bottom: 80px; */

    /* margin-top: calc(-25px + -70px); */
    /* ヘッダー分のマイナス余白 */
    pointer-events: none;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, var(--color-mocha) 0%, rgba(225, 220, 217, 0.9) 100%); */
    /* background:#c5b2ab; */
    z-index: 0;
    overflow: hidden;
}

.hero-element {
    position: absolute;
    overflow: hidden;
}

/* オリジナルスライド */
.box {
    overflow: hidden;
}

.box .boxInner {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;
    /* background-color: aqua; */
}

/* 「boxInner」をスライドインする */
@keyframes play-toRight {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes play-toLeft {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes play-toUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes play-toDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* マスク要素をスライドアウトする */
@keyframes maskOut-toRight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes maskOut-toLeft {
    from {
        transform: translateX(0);
    }

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

@keyframes maskOut-toUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes maskOut-toDown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

.isPrev {
    z-index: 5 !important;
}

@keyframes move-photo-toRight {
    from {
        transform: scale(1.1) translateX(-4%);
    }

    to {
        transform: scale(1.1) translateX(4%);
    }
}

@keyframes move-photo-toLeft {
    from {
        transform: scale(1.1) translateX(4%);
    }

    to {
        transform: scale(1.1) translateX(-4%);
    }
}

@keyframes move-photo-toUp {
    from {
        transform: scale(1.1) translateY(4%);
    }

    to {
        transform: scale(1.1) translateY(-4%);
    }
}

@keyframes move-photo-toDown {
    from {
        transform: scale(1.1) translateY(-4%);
    }

    to {
        transform: scale(1.1) translateY(4%);
    }
}

.isMove.forRecruitPage img {
    animation-duration: 8s !important;
}

.isMove img {
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    transform: translateZ(0);
}

.isMove.toRight img {
    animation-name: move-photo-toRight;
}

.isMove.toLeft img {
    animation-name: move-photo-toLeft;
}

.isMove.toUp img {
    animation-name: move-photo-toUp;
}

.isMove.toDown img {
    animation-name: move-photo-toDown;
}

/* スライドインを動作するclass */
.isPlay {
    animation-duration: .35s;
    animation-fill-mode: forwards;
    /* animation-timing-function: cubic-bezier(.8,0,.5,1); */
    position: relative;
    opacity: 1 !important;
    display: block !important;
    z-index: 10;
    transform: translateZ(0);
}

.isPlay.toRight {
    animation-name: play-toRight;
}

.isPlay.toLeft {
    animation-name: play-toLeft;
}

.isPlay.toUp {
    animation-name: play-toUp;
}

.isPlay.toDown {
    animation-name: play-toDown;
}

/* isPlayの疑似要素にマスクとマスクを外すアニメーションを設定  */
.isPlay:before {
    animation-duration: .35s;
    animation-delay: .35s;
    animation-fill-mode: forwards;
    /* animation-timing-function: cubic-bezier(.8,0,.5,1); */
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    z-index: 1;
    width: 120%;
    height: 120%;
}

.isPlay.toRight:before {
    animation-name: maskOut-toRight;
}

.isPlay.toLeft:before {
    animation-name: maskOut-toLeft;
}

.isPlay.toUp:before {
    animation-name: maskOut-toUp;
}

.isPlay.toDown:before {
    animation-name: maskOut-toDown;
}

.isPlay.greige:before {
    background-color: var(--color-greige);
}

.isPlay.pink:before {
    background-color: var(--color-pink);
}

.isPlay.sand:before {
    background-color: var(--color-sand);
}

.isPlay.dark:before {
    background-color: var(--color-dark);
}

.isPlay.white:before {
    background-color: var(--color-white);
}

.isPlay.gray:before {
    background-color: var(--color-gray);
}

/* Decorative elements (Rounded Rectangles) */
.hero-deco-1 {
    left: 8.9%;
    top: 15.4%;
    width: 32.1%;
    aspect-ratio: 411.3 / 207.2;
    background-color: #c4c3b7;
    opacity: 0.7;
}

.hero-deco-2 {
    left: 65%;
    top: 18.8%;
    width: 32.1%;
    aspect-ratio: 411.3 / 207.2;
    background-color: #c5b2ab;
    opacity: 0.7;
}

.hero-deco-3 {
    left: 28.2%;
    top: 32.5%;
    width: 32.1%;
    aspect-ratio: 411.3 / 207.2;
    background-color: #dbd1c1;
    opacity: 0.7;
}

/* Image placements based on Figma coordinates (scaled proportionally) */
.hero-element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-img-1 {
    left: 0;
    top: 20%;
    width: 15.5%;
    aspect-ratio: 199 / 265;
}

.hero-img-2 {
    left: 19.9%;
    top: 0;
    width: 31.4%;
    /* height: 56%; */
    /* height: calc(100% - 95px - 180px); */
    aspect-ratio: 402 / 536;
}

.hero-img-3 {
    left: 57%;
    top: 25%;
    /* top: calc(25% - 1%); */
    width: 20.4%;
    aspect-ratio: 5 / 3.2;
}

.hero-img-4 {
    right: 0;
    top: 14%;
    /* top: calc(14% - 1%); */
    width: 20.4%;
    aspect-ratio: 5 / 3.2;
}

.hero-img-5 {
    right: 0%;
    top: 47.5%;
    width: 45.5%;
    aspect-ratio: 583 / 389;
}

.hero-content {
    position: absolute;
    z-index: 10;
    margin: 0 auto;
    /* padding: 0 112px; */
    padding: 0 10.6%;
    width: 100%;
    /* top: 52%; */
    top: 48%;
}

.hero-title {
    /* margin-bottom: 1.5%; */
    /* margin-bottom: 3%; */
    margin-bottom: 2%;
    font-size: 7vw;
    transform: translateZ(0);
    filter: drop-shadow(0 0 20px var(--color-mocha));
}

.hero-title .shadow {
    transform: translateZ(0);
    filter: drop-shadow(0 0 30px var(--color-mocha));
}

.hero-description {
    font-size: 1.15vw;
    max-width: 34vw;
    /* text-shadow: 0 0 1px var(--color-mocha), 0 0 2px var(--color-mocha), 0 0 3px var(--color-mocha), 0 0 4px var(--color-mocha), 0 0 5px var(--color-mocha); */
    /* background: linear-gradient(transparent 0%, var(--color-mocha) 0%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone; */
}

/* SCROLL INDICATOR */
.scroll-indicator {
    position: absolute;
    bottom: 11.4%;
    left: var(--space-normal);
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--color-dark);
    flex-direction: column;
    /* height: 26.1%; */
    height: 30%;
    max-width: 1em;
}

.scroll-indicator span {
    font-size: var(--size-xs);
    font-weight: 500;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    min-height: fit-content;
}

.scroll-line {
    width: 1px;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin-left: -2px;
}

.scroll-line::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-dark);
    animation: scrollLineMove 1.8s ease infinite;
}

@keyframes scrollLineMove {
    0% {
        height: 0%;
        top: 0;
    }

    50% {
        height: 100%;
        top: 0;
    }

    100% {
        top: 100%;
    }
}

/* ブラシストロークアニメーション */
.none {
    /* display: none !important; */
    opacity: 0 !important;
}

.brush-stroke-effect img.sketch {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    overflow: hidden;
    mix-blend-mode: multiply;
}

.brush-stroke-effect img.photo {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    overflow: hidden;

    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    transform: translateZ(0);
}

/* WORKS SECTION */
.slider-section {
    position: relative;
}

.slider-section .slider-mask {
    position: relative;
    padding: 56px var(--space-normal) 70px calc(var(--space-normal) * 2) !important;
    overflow: hidden;
    transform: translateZ(0);
}

.slider-section .slider-mask::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-normal);
    background: var(--color-dark);
    width: calc(100% - var(--space-normal));
    height: 100%;
    z-index: -1;
}

.slider-section::after {
    content: "";
    position: absolute;
    top: 72px;
    bottom: 0;
    left: 0;
    background: var(--color-greige);
    width: 100%;
    height: calc(100% - 72px);
    z-index: -2;
}

/* .slider-section .title-header {
    color: var(--color-white);
} */
.title-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.color-light {
    color: var(--color-white) !important;
}

.title-wrapper>* {
    display: inline-block;
}

.title-wrapper>*:first-child {
    margin-right: 25px;
}

.title-wrapper>*:last-child {
    margin-bottom: .5em;
}

.title-m-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.title-m-wrapper>* {
    display: inline-block;
}

.slider {
    margin-top: 75px;
    margin-bottom: 80px;
    width: calc(100% + var(--space-normal));
    /* padding-right: 10vw; */
    /* margin-right: calc(calc(50% - calc(57.5px + 0.625em)) - 50vw); */
}

.splide__arrow[disabled] {
    /* display: none; */
}

.splide__arrow {
    mix-blend-mode: difference;
}

.splide__arrow img {
    width: 23px;
    height: 108px;
}

.custom-arrow-prev,
.custom-arrow-next {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.custom-arrow-prev {
    left: calc(var(--space-normal) * -2 + .5vw);
}

.custom-arrow-next {
    right: .5vw;
    transform: rotate(180deg);
}

.work-card {
    /* background: var(--color-white); */
    /* transition: transform 0.3s ease; */
    /* aspect-ratio: 1; */
    /* background: linear-gradient(rgba(255, 255, 255, 0) 80%, var(--color-white) 20%); */
    position: relative;
    /* display: block; */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
    padding-bottom: 21px;
    background: var(--color-white);
}

.work-card-image {
    width: 100%;
    /* height: 65.7%; */
    aspect-ratio: 100 / 65.7;
    object-fit: cover;
    /* background: var(--color-gray); */
    /* opacity: .3; */
}

.work-card-content {
    /* background: var(--color-white); */
    display: flex;
    /* padding: 13px 10px 0 15px; */
    padding: 13px 15px 0;
    flex-direction: column;
    /* gap: .75em; */
    gap: 1em;
    /* justify-content: space-between; */
    /* background-color: #065f46; */
    flex: 1;
    /* align-items: flex-start; */
    /* gap: 12px; */
    /* align-self: stretch; */
    /* height: max-content; */
    /* height: fit-content; */
}

.work-card-title {
    /* margin-bottom: .5em; */
    /* margin-bottom: .75em; */
    line-height: 1.65em;
}

.work-card-sub-title,
.work-card-date {
    opacity: .6;
    line-height: 1.5em;
    font-size: 13px;
}

.work-card-text {
    opacity: .6;
    line-height: 1.5em;
    font-size: 13px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    /* ここを2や3に変更することで、行数を指定 */
    max-height: calc(1.5em * 3);
}

.work-card-tag {
    /* opacity: .6;
    line-height: 1.5em; */
    line-height: 1.5em;
    color: var(--color-white);
    background: var(--color-dark);
    padding: .25em .75em;
    text-align: center;
    /* width: max-content; */
    width: fit-content;
    font-size: 11px;
    /* margin-top: .75em; */
    margin-top: auto
}

.works-note {
    color: var(--color-white);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sideline {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5em;
}

.sideline::before,
.sideline::after {
    content: "";
    display: inline-block;
    max-width: 80px;
    width: 10vw;
    height: 1px;
    background-color: var(--color-white);
    margin: 0 22px;
}

.sideline::before {
    margin-left: 0;
}

.sideline::after {
    margin-right: 0;
}

/* MESSAGE SECTION */
.message {
    /* overflow: hidden; */
}

.message-image {
    background: var(--color-greige);
    width: 100%;
    /* aspect-ratio: 1280 / 700; */
    aspect-ratio: 1280 / 760;
    position: relative;
    overflow: hidden;
}

.message-images-wrapper {
    /* z-index: 100; */
    /* margin-bottom: 100px; */
}

.message-img {
    position: absolute;
    /* overflow: hidden; */
    /* border-radius: 8px; */
}

.message-img img {
    object-fit: cover;
    /* aspect-ratio: 453 / 302; */
    aspect-ratio: 453 / 290;
    width: 100%;
}

.message-img-1 {
    left: 0%;
    top: 15%;
    width: 35%;
}

.message-img-2 {
    left: 42.5%;
    top: 20%;
    width: 18.5%;
    z-index: 10;
}

.message-img-3 {
    left: 66%;
    top: 12%;
    width: 18.5%;
}

.message-img-4 {
    left: 85%;
    top: 17.1%;
    width: 21.1%;
}

.message-img-5 {
    left: 3%;
    top: 52%;
    width: 24%;
    opacity: .9;
}

.message-img-6 {
    left: 34%;
    top: 44%;
    width: 18.5%;
    z-index: 10;
}

.message-img-7 {
    left: 59.6%;
    top: 37%;
    width: 33.5%;
}

.nishimoto-text {
    opacity: 0.25;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    transform: scale(2);
    transform-origin: bottom left;
}

.nishimoto-text-slider {
    display: flex;
    width: fit-content;
    animation: scrollLeft 30s linear infinite;
}

.nishimoto-text-item {
    /* safariのちらつき不具合に対応 */
    /* 幅を狭めてスケールアップすることで、translateX(0)時のちらつきが起こらなくなった*/
    width: calc(152vw / 2);
    flex-shrink: 0;
}

.nishimoto-text-item img {
    width: 100%;
    display: block;
    -webkit-user-select: none;
    user-select: none;
}

@keyframes scrollLeft {
    from {
        transform: translateX(0);
    }

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

.description-area {
    position: relative;
    padding: 102px calc(var(--space-normal) * 5) 114px calc(var(--space-normal) * 1) !important;
    overflow: hidden;
    color: var(--color-white);
    display: flex;
    align-items: flex-start;
    gap: 23px;
}

.description-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: calc(var(--space-normal) * 4);
    background: var(--color-dark);
    width: calc(100% - calc(var(--space-normal) * 4));
    height: 100%;
    z-index: -1;
}

.description-area::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 253px;
    right: 0;
    background: var(--color-greige);
    width: 100%;
    height: 50%;
    z-index: -2;
}

/* .message-text-wrapper, */
.description-area-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: max-content;
    gap: 35px;
}

.description-area-title {
    color: var(--color-white);
}

.description-area-label,
.label-bar {
    display: flex;
    align-items: center;
}

.description-area-label::before,
.label-bar::before {
    content: "";
    display: inline-block;
    width: 106px;
    height: 1px;
    margin-right: 10px;
    background: var(--color-dark);
}

.label-bar.bar-white::before {
    background: var(--color-white);
}

.description-area-buttons {
    display: flex;
    gap: 30px;
}

.message-illust {
    max-width: clamp(171px, 18vw, 253px);
    margin-top: 41px;
}

.message-video-section {
    position: relative;
    z-index: 100;
    pointer-events: none;
    /* height: calc(100svh - var(--header-height)); */
}

/* .pin-spacer {
    pointer-events: none;
} */

.spacer-video-manual {
    height: calc(220vh);
    /* height: calc(100vh * 2.5); */
    /* end の値と合わせる */
}

.message-video-wrapper {
    /* position: sticky; */
    /* top: 70px; */
    width: 100%;
    /* height: calc(100vh - 70px); */
    height: calc(100svh - var(--header-height));
    /* ヘッダー高さ分を引く */
    padding: 10vh var(--space-normal);
    display: flex;
    justify-content: flex-end;
    z-index: 10;
    /* background-color: #facc15; */
}

video.movie-short {
    object-fit: cover;
}

.staff-frame {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 40vh;
    z-index: 100;
}

.staff-frame-top {
    top: 0;
    padding: 0 calc(var(--space-normal) * 4) 0 calc(var(--space-normal) * 3);
    /* position: fixed !important; */
    left: 0;
    z-index: 100 !important;
    /* background-color: turquoise; */
}

/* .frame-staff-1 {
    transform: translateY(200px);
    opacity: 0.5;
} */

.frame-staff-1,
.frame-staff-2,
.frame-staff-3,
.frame-staff-4 {
    height: 100%;
    pointer-events: none;
}

.staff-frame-bottom {
    /* bottom: 0; */
    bottom: calc(calc(100vh - 100svh) * -1);
    padding: 0 calc(var(--space-normal) * 2);
}

.staff-frame img {
    height: 100%;
    transform-origin: center bottom;
    animation: sway 2.5s ease-in-out infinite;
}

.staff-frame img.revers-sway {
    animation: sway-2 2.5s ease-in-out infinite;
}

@keyframes sway {

    0%,
    100% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }
}

@keyframes sway-2 {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}

.message-strengths-bar {
    /* position: sticky; */
    /* top: 70px; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    z-index: 10;
    /* background-color: #16a34a66; */
}

.message-strengths-bar p {
    /* font-size: max(148px, 8vw); */
    /* font-size: max(110px, 5.5vw); */
    font-size: max(74px, 7vw);
    font-weight: 900;
    color: var(--color-white);
    display: inline-block;
    z-index: 100;
    white-space: nowrap;
}

.section {
    /* min-height: calc(100vh - 70px); */
    min-height: calc(100svh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--color-white);
}

.section.normal {
    background: linear-gradient(135deg, #202020, #303030);
}

.section.normal h1 {
    font-size: 3rem;
    margin: 0 0 10px;
    text-align: center;
}

.section.normal p {
    max-width: 600px;
    text-align: center;
    line-height: 1.7;
    opacity: 0.9;
}

/* 横スクロールセクション */
.h-section {
    position: relative;
    height: calc(100vh - 70px);
    /* min-height ではなく height 固定に */
    padding: 0;
    overflow: hidden;
    /* background: #151515; */
}

.h-inner {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
}

.panel {
    /* flex: 0 0 100%; */
    /* 1パネル = ビューポート幅 */
    /* height: 100%; */
    width: 30vw;
    height: 30vh;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 3vw, 3.5rem);
    font-weight: 700;
    text-align: center;
}

.panel-title {
    margin-bottom: 16px;
}

.panel-desc {
    max-width: 500px;
    font-size: 0.9rem;
    line-height: 1.7;
    opacity: 0.9;
}

/* 1つ目の横スクロール用デザイン */
.h-section--1 .panel:nth-child(1) {
    background: linear-gradient(135deg, #1b5cff, #3b9dff);
}

.h-section--1 .panel:nth-child(2) {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.h-section--1 .panel:nth-child(3) {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.h-section--1 .panel:nth-child(4) {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

/* 2つ目の横スクロール用デザイン */
.h-section--2 .panel:nth-child(1) {
    background: radial-gradient(circle at top, #facc15, #854d0e);
}

.h-section--2 .panel:nth-child(2) {
    background: radial-gradient(circle at top, #22c55e, #065f46);
}

.h-section--2 .panel:nth-child(3) {
    background: radial-gradient(circle at top, #38bdf8, #0f172a);
}

.scroll-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    opacity: 0.8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* SERVICE SECTION */

.service {
    /* overflow: hidden; */
    /* width: 100vw; */
    position: relative;
}

.service::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 0;
    background: var(--color-dark);
    width: 100%;
    height: 30%;
    z-index: -1;
}

.service .description-area {
    /* padding-top: 170px !important; */
    padding-top: 24vh !important;
    padding-left: calc(var(--space-normal) * 2) !important;
    padding-right: calc(var(--space-normal) * 2) !important;
    justify-content: space-between;
    gap: 50px;
    /* background-color: #7622c5; */
}

.service .description-area::before {
    right: 0;
    width: 100%;
}

.service .description-left-area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 85px;
    width: 100%;
}

.service .title-header {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
}

.service .service-illust-wrapper img {
    display: inline-block;
    height: 100%;
    object-fit: contain;
    height: 56px;
    /* margin-top: 51px; */
    animation: sway-b 3s ease-in-out infinite;
}

.service .service-illust-wrapper img:nth-child(2n) {
    animation: sway-b-2 3s ease-in-out infinite;
}

@keyframes sway-b {

    0%,
    100% {
        transform: rotate(8deg);
    }

    50% {
        transform: rotate(-8deg);
    }
}

@keyframes sway-b-2 {

    0%,
    100% {
        transform: rotate(-8deg);
    }

    50% {
        transform: rotate(8deg);
    }
}

.service .service-illust-wrapper img:not(:last-child) {
    margin-right: 51px;
}

.service .description-area-wrapper {
    align-items: flex-end;
}

.service .description-area-text {
    text-align: right;
}

#service01 {
    z-index: 30;
}

#service02 {
    z-index: 20;
}

#service03 {
    z-index: 10;
}

.service-item {
    position: relative;
    padding-left: calc(var(--space-normal) * 2);
    padding-right: 0;
    padding-top: 50px;
    padding-bottom: 80px;
    max-height: 648px;
    height: calc(100svh - var(--header-height));
    /* height: calc(100svh - var(--header-normal)); */
    /* background-color: #16a34a; */
    display: flex;
    flex-direction: column;
    gap: 40px;
    overflow: hidden;
}

.service-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-greige);
    width: calc(100% - calc(var(--space-normal) * 1));
    height: 100%;
    z-index: -1;
}

.service-item.bg-color-greige::after {
    background: var(--color-greige);
}

.service-item.bg-color-sand::after {
    background: var(--color-sand);
}

.service-item.bg-color-pink::after {
    background: var(--color-pink);
}

/* @media (min-width: 1920px) {
    .service-item {
        height: calc(100vh - var(--header-large));
    }
}

@media (max-width: 576px) {
    .service-item {
        height: calc(100vh - var(--header-small));
    }
} */

.service-header {}

@media (max-height: 648px) {
    .service-item {
        padding-top: 25px;
        padding-bottom: 40px;
        gap: 20px;
    }

    .service-header {
        zoom: .75;
    }

}

@media (max-height: calc(648px * .75)) {
    .service-item {
        padding-top: 12.5px;
        padding-bottom: 20px;
        gap: 10px;
    }

    .service-header {
        zoom: .4;
    }

    .service-panel-content {
        padding: 15px 30px !important;
    }
}

.service-panels {
    flex: 1;
    min-height: 0;
    /* ← flex子要素のオーバーフロー抑制 */
    display: flex;
    width: max-content;
    gap: 30px
}

.service-panel {
    background: var(--color-white);
    display: flex;
    height: 100%;
    max-width: 790px;
    width: fit-content;
}

.service-panel-image {
    max-width: 317px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-panel-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.service-panel-title {
    margin-bottom: 11px;
}

.service-panel-description {
    margin-bottom: 24px;
    line-height: 150% !important;
}

.service-panel-content .btn-primary {
    flex-shrink: 1;
}

.spacer-service-manual {
    /* height: calc(648px * 3); */
    /* end の値と合わせる */
}

/* gsapが自動生成する要素のスタイル */
/* .service-panel内の要素がクリックできなくなる不具合を防ぐため */
/* .pin-spacer {
    z-index: -1 !important;
} */

/* NEWS SECTION */

.text-item-area {
    position: relative;
    padding: 50px calc(var(--space-normal) * 3) 75px calc(var(--space-normal) * 2);
    transform: translateZ(0);
}

.text-item-area::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    right: var(--space-normal);
    background: var(--color-gray);
    width: calc(100% - var(--space-normal));
    height: 100%;
    z-index: -1;
}

.news {
    margin-top: 100px;
}

.news::after {
    content: "";
    position: absolute;
    top: -200px;
    bottom: 0;
    left: 0;
    right: calc(var(--space-normal) * 2);
    background: var(--color-white);
    width: calc(100% - calc(var(--space-normal) * 2));
    height: 135%;
    z-index: -2;
}

.text-item-wrapper {
    display: flex;
    gap: min(125px, 9vw);
    align-items: flex-start;
}

.text-item-area .title-header {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    width: fit-content;
}

.text-item-list {
    flex: 1;
    /* padding-top: 45px; */
    padding-top: 30px;
}

.text-item {
    display: flex;
    /* gap: 8vw; */
    padding: 37px 0;
    border-top: 1px solid var(--color-dark);
    transition: opacity 0.3s ease;
}

.text-item:last-child {
    border-bottom: 1px solid var(--color-dark);
}

.text-item-title {
    opacity: 0.6;
    white-space: nowrap;
    min-width: 160px;
    max-width: 180px;
    width: 20%;
}

.text-item>*:last-child {
    flex: 1;
}

/* SNS SECTION */

.sns {
    margin-top: 90px;
    padding-right: var(--space-normal);
    position: relative;
}

.sns::after {
    content: "";
    position: absolute;
    top: -90px;
    bottom: 0;
    left: 0;
    background: var(--color-white);
    width: calc(100% - calc(var(--space-normal) * 2));
    height: calc(100% + 90px);
    z-index: -2;
}

.sns-wrapper {
    display: flex;
    gap: 23px;
    /* flex-wrap: wrap; */
}

.instagram-section {
    flex: 1;
    padding: 50px 50px 70px calc(var(--space-normal) * 2);
    background-image: url(../img/home/instagram-bg.avif);
    background-position: center;
    background-size: 110%;
    background-color: var(--color-white);
    /* border: 1px solid #2727272f; */
    border-left: none;
}

.instagram-section .title-header {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    width: fit-content;
    /* color: var(--color-white); */
}

.instagram-section .title-header .title-m-wrapper {
    filter:
        /* drop-shadow(0 0 20px var(--color-white))  */
        drop-shadow(0 0 20px var(--color-white)) drop-shadow(0 0 30px var(--color-white));
}

.blog-section {
    flex: 1;
    background-color: var(--color-sand);
    padding: 50px calc(var(--space-normal) * 2) 70px 50px;
    background-image: url(../img/home/blog-bg.webp);
    background-position: center;
    background-size: cover;
    background-color: var(--color-white);
    background-repeat: no-repeat;
    /* border: 1px solid #2727272f; */
}

.blog-section .title-header {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    width: fit-content;
}

.blog-section .title-header .title-m-wrapper {
    filter:
        drop-shadow(0 0 5px #d0cfc7) drop-shadow(0 0 5px #d0cfc7) drop-shadow(0 0 10px #d0cfc7) drop-shadow(0 0 10px #d0cfc7);
}


/* RECRUIT SECTION */

.recruit {
    position: relative;
    padding: 53px calc(var(--space-normal) * 2) 165px calc(var(--space-normal) * 2);
    /* overflow: hidden; */
    transform: translateZ(0);
    margin-top: 100px;
}

.recruit::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-normal);
    background: var(--color-dark);
    width: calc(100% - var(--space-normal));
    height: 100%;
    z-index: -1;
}

.recruit::after {
    content: "";
    position: absolute;
    top: -100px;
    bottom: 0;
    left: 0;
    background: var(--color-white);
    width: calc(100% - calc(var(--space-normal) * 2));
    height: 60%;
    z-index: -2;
}

.recruit-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 2;
}

.recruit .title-header {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
}

.recruit-subtitle {
    flex: 1;
    text-align: right;
    color: var(--color-white);
    margin-bottom: .25em;
}

.recruit-images-wrapper {
    position: absolute;
    width: fit-content;
    top: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    gap: 16px;
    opacity: 0.4;
    z-index: 1;
}

.recruit-images {
    /* top: 50%; */
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.recruit-bgimg-left {
    transform: translateY(-34.5%);
}

.recruit-bgimg-right {
    transform: translateY(-17%);
}

.recruit-image {
    width: 195px;
    height: 125px;
    object-fit: cover;
}

/* STAFF VOICES SECTION */

.staff-voices {
    width: 100%;
    pointer-events: none;
    overflow: hidden;
    transform: translateY(-90px);
    margin-bottom: -90px;
}

.splide__slide {
    /* max-width: 400px; */
}

.staff-card {
    background: var(--color-white);
    display: flex;
    flex-direction: column;
}

.staff-card-image-wrapper {
    display: flex;
    gap: 25px;
    align-items: center;
    padding: 20px 25px;
}

.staff-card-quote {
    font-size: 19px;
    font-weight: 400;
    flex: 1;
}

.staff-card-image {
    /* width: 100%; */
    max-height: 190px;
    height: 100%;
    animation: sway 2.5s ease-in-out infinite;
}

.staff-card-image.sway-2 {
    animation: sway-2 2.5s ease-in-out infinite
}

.staff-card-name {
    color: var(--color-white);
    background: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 100%;
}

/* FOOTER */
footer {
    margin-top: 110px;
}

.form-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
}

@media (max-width: 1180px) {
    .form-links br.mobile {
        display: none;
    }
}

.form-links::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--color-dark);
    width: 100%;
    height: 50%;
    z-index: -1;
}

.form-link {
    width: 48%;
    padding: 60px var(--space-normal);
    background: var(--color-white);
    display: flex;
    gap: 25px;
    position: relative;
    color: var(--color-dark);
    transition: transform 0.3s ease;
    z-index: 10;
    text-decoration: none !important;
}

.form-contact {
    transform-origin: center left;
}

.form-biz-partner {
    transform-origin: center right;
}

.form-contact:hover,
.form-biz-partner:hover {
    transform: scale(1.03);
}

.form-link::after {
    position: absolute;
    content: "";
    display: block;
    width: 7px;
    height: 100%;
    background-image: url("../img/triangle.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    bottom: 10px;
    right: 10px;
    transform-origin: bottom right;
}

.form-icon {
    max-width: 67px;
    max-height: 67px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    /* background-color: #3b9dff; */
    align-items: center;
    margin-top: 5px;
}

.form-contact .form-icon img {
    max-width: 55px;
    width: 100%;
}

.form-biz-partner .form-icon img {
    max-width: 49px;
    width: 100%;
}

.form-header {
    flex: 1;
    display: flex;
    gap: 29px;
    flex-direction: column;
}

.footer {
    position: relative;
    background-color: var(--color-dark);
    padding: 144px var(--space-normal) 51px calc(var(--space-normal) * 2);
    color: var(--color-white);
    container-type: inline-size;
    container-name: footer;
}

.footer a:not(.btn-primary) {
    color: var(--color-white);
    transition: opacity 0.3s ease;
}

.footer a:hover:not(.btn-primary) {
    /* opacity: 0.5; */
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 100px;
    align-items: flex-start;
}

.footer-logo img {
    max-height: 40px;
    height: 100%;
}

.footer-content {
    max-width: 570px;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    /* 4列をつくる */
    column-gap: 60px;
    /* 左端を揃えるための列間スペース */
    row-gap: 25px;
    /* 行間 */
}

.footer-content a {
    white-space: nowrap;
    /* 改行防止 */
}

.footer-wrapper .btn-primary {
    flex: 0 0 auto;
    /* opacity: 0; */
}

/* .footer-info ul li br.pc { */
br.pc {
    display: none;
}

.footer-info ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2em;
    row-gap: .5em;
    padding-left: 0;
    margin-left: 0;
    margin: .5em 0;
}

.footer-info ul li {
    list-style: none;
}

.footer-info ul a {
    text-decoration: underline;
}

.footer-copyright {
    width: 100%;
    font-size: 9px;
    text-align: right;
}

.back-to-top {
    position: absolute;
    bottom: 294px;
    right: calc(var(--space-normal) * 2);
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----------------------------------- */

/* RECRUIT-PAGE */

.recruit-page .header.cloned-header {
    background-color: var(--color-dark);
}

.recruit-page .header .logo {
    color: var(--color-white);
    font-family: "Noto Sans JP";
    font-size: 13.175px;
    font-style: normal;
    font-weight: 700;
    line-height: 137.784%;
}

.recruit-page .header .logo img {
    max-height: 19px;
    margin-right: 14px;
}

.recruit-page .header .line {
    background-color: var(--color-white);
}

/* HERO SECTION */

.recruit-page .hero {
    width: 100%;
    height: 100lvh;
    background-color: var(--color-dark);
    z-index: -1;
    overflow: hidden;
    position: sticky;
    top: 0;
}

.recruit-page .hero-background {
    overflow: visible;
    top: auto;
    left: auto;
    opacity: 0.15;
    height: auto;
    aspect-ratio: 1470 / 725 !important;
    object-fit: cover;
}

.recruit-page .hero .hero-element {
    aspect-ratio: 497 / 331;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
}

.recruit-page .hero .hero-element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recruit-page .hero .hero-img-0 {
    left: 9%;
    top: -29%;
    width: 20%;
}

.recruit-page .hero .hero-img-1 {
    left: -4%;
    top: 12%;
    width: 39%;
}

.recruit-page .hero .hero-img-2 {
    left: 47%;
    top: 16%;
    width: 20%;
    z-index: 10;
}

.recruit-page .hero .hero-img-3 {
    right: 7%;
    top: 0%;
    width: 20%;
}

.recruit-page .hero .hero-img-4 {
    left: 42%;
    top: -42%;
    width: 33%;
}

.recruit-page .hero .hero-img-5 {
    left: 4%;
    top: 74%;
    width: 17%;
}

.recruit-page .hero .hero-img-6 {
    left: 33%;
    top: 58%;
    width: 24%;
    z-index: 10;
}

.recruit-page .hero .hero-img-7 {
    right: -4%;
    top: 41%;
    width: 39%;
}

.recruit-page .hero .hero-img-8 {
    left: 8%;
    bottom: -63%;
    width: 39%;
}

.recruit-page .hero .hero-img-9 {
    left: 58%;
    bottom: -45%;
    width: 21%;
}

.recruit-page .hero .hero-img-10 {
    right: -6%;
    bottom: -32%;
    width: 20%;
}

.recruit-page .hero-content {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    /* width: 47%; */
    /* width: max(47%, 600px); */
    width: max(40%, 600px);
    color: var(--color-white);
    gap: 19px;

    margin: auto;
    top: auto;

    /* background-color: #16a34a; */
}

.recruit-page .hero-title {
    width: 100%;
    margin-bottom: 0;
    font-size: min(12vw, var(--size-xl));
    filter: none;
    text-align: center;
}

.recruit-page .hero-title img {
    width: 100%;
    height: auto;
    display: block;
}

.recruit-page .hero-description {
    font-size: var(--size-m);
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-direction: column;
    width: 100% !important;
}

.recruit-page .hero-description img {
    max-width: 45px;
    width: 100%;
}

.recruit-page .scroll-indicator {
    color: var(--color-white);
    height: 25%;
    bottom: auto;
    left: auto;
    bottom: 0;
}

.recruit-page .scroll-line::after {
    background: var(--color-white);
}

/* recruit-page message section */

.recruit-page .message {
    /* background: var(--color-gray) !important; */
    position: relative;
    overflow: hidden;
    /* background-color: rgb(0, 64, 255)!important; */
    background-color: transparent !important;
    pointer-events: none;
}

.recruit-page .message::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-gray);
    /* background: #16a34a; */
    width: 100%;
    height: 100%;
    z-index: -1;
}

.recruit-page .message-brush-section {
    /* background-color: yellow; */
    position: relative;
    /* z-index: 100; */
    width: 100%;
    /* height: calc(100svh - var(--header-height)); */
    height: calc(100svh - var(--header-height));
    /* overflow: hidden; */
    /* background: var(--color-gray); */
}

.recruit-page .message-brush-wrapper {
    width: 100%;
    height: 100%;
    /* transform: scale(2); */
    overflow: hidden;
    padding: 10vh var(--space-normal);
    transform: translateZ(0);
}

.recruit-page .message-brush-wrapper .brush-images {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.recruit-page .brush-stroke-effect img.sketch {
    /* position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    overflow: hidden;
    mix-blend-mode: multiply; */
    /* object-position: center bottom; */
    object-position: center;
}

.recruit-page .brush-stroke-effect img.photo {
    /* position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    overflow: hidden;

    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    transform: translateZ(0); */
    /* object-position: center bottom; */
    object-position: center;
}

.recruit-page .message-strengths-bar {
    justify-content: center;
    /* background-color: turquoise; */
    filter: drop-shadow(0 0 20px #00000033);
}

.recruit-page .message-strengths-bar p {
    display: block;
    font-size: 6.2vw;
    text-align: center;
}

.recruit-page .message-content {
    width: 100%;
    height: max(calc(100svh - var(--header-height)), 770px);
    /* height: 100svh; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px var(--space-normal);
    z-index: 50;
    position: relative;
    /* background: #065f46; */
}

.recruit-page .message-content-wrapper {
    display: flex;
    gap: 47px;
    flex-direction: column;
}

.recruit-page .staff-board-spacer {
    height: calc(50svh + var(--header-height));
    /* height: 50svh; */
}

.recruit-page .staff-board {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100vh - var(--header-height));
    position: relative;
    overflow: hidden;
    padding: 0 calc(var(--space-normal) * 1.5);
    /* padding: 0 calc(var(--space-normal) * 1) 0 calc(var(--space-normal) * .5); */
}

.recruit-page .staff-board.staff-1 {
    background: var(--color-greige);
}

.recruit-page .staff-board.staff-2 {
    background: var(--color-sand);
}

.recruit-page .staff-board.staff-3 {
    background: var(--color-pink);
}

.recruit-page .staff-board.staff-4 {
    background: var(--color-mocha);
}

.recruit-page .staff-board.staff-5 {
    background: var(--color-gray);
}

.recruit-page .staff-board.staff-6 {
    background: var(--color-white);
}

.recruit-page .staff-board.staff-6 .nishimoto-text {
    mix-blend-mode: difference;
    opacity: 0.025;
}

.recruit-page .staff-board.staff-6 .staff-card-name {
    /* mix-blend-mode: difference; */
    background: #00000005;
}

.recruit-page .staff-board .staff-content-wrapper {
    z-index: 10;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    /* gap: min(7vw, 120px); */
    /* gap: min(calc(var(--space-normal) * 1.5), 70px); */
    /* gap: min(calc(var(--space-normal) * .5), 40px); */
    gap: min(calc(var(--space-normal) * 1.5), 40px);
    /* gap: 70px; */
    max-width: 830px;
    width: 100%;
    /* background-color: #16a34a; */
}

.recruit-page .staff-board .staff-content-wrapper .staff-ill {
    /* max-width: 200px; */
    /* max-height: 387px; */
    /* width: 17vw; */
    max-width: 37.5%;
    width: 25vw;
    /* max-height: 500px; */
    object-fit: contain;
    animation: sway 2.5s ease-in-out infinite;
}

.recruit-page .staff-board .staff-content-wrapper .staff-content {
    display: flex;
    flex-direction: column;
    gap: 33px;
    /* max-width: 50%; */
}

.recruit-page .staff-board .staff-message {
    /* font-size: 38px; */
    font-size: 36px;
    line-height: 137.8%;
    width: 100%;
    /* word-break: auto-phrase; */
}

.recruit-page .staff-board .staff-card-name {
    color: var(--color-dark);
    background: var(--color-white);
    padding: 5px 20px;
    height: auto;
    width: fit-content;
    display: inline-block;
}

.recruit-page .staff-board .nishimoto-text {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) scale(2);
    transform-origin: center left;
}

.recruit-page .staff-board .pager {
    position: absolute;
    bottom: var(--space-normal);
    left: var(--space-normal);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    width: fit-content;
}

.recruit-page .staff-board .pager a {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-dark);
    display: inline-block;
    opacity: 0.15;
    /* cursor: pointer; */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.recruit-page .staff-board .pager a.active {
    opacity: 1;
    pointer-events: none;
}

.recruit-page .staff-board .pager a:hover {
    opacity: 0.5;
}

.recruit-page .entry {
    background: var(--color-dark);
    width: 100%;
    /* height: calc(100svh - var(--header-height)); */
    padding: 163px calc(var(--space-normal) * 2);
    display: flex;
    justify-content: flex-start;
    /* align-items: center; */
    flex-direction: column;
    gap: 127px;
    position: relative;
}

.recruit-page .entry .entry-list {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    gap: 25px;
}

.recruit-page .entry .entry-list .entry-card {
    gap: 25px;
    padding: 30px;
    /* gap: min(2vw, 25px);
    padding: min(2.5vw, 30px) min(4vw, 50px); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background: var(--color-white);
    color: var(--color-dark);
    position: relative;
}

.recruit-page .entry-list .entry-card:nth-child(6n+1) .btn-primary span,
.recruit-page .entry-list .entry-card:nth-child(6n+1) {
    background: var(--color-greige);
}

.recruit-page .entry-list .entry-card:nth-child(6n+2) .btn-primary span,
.recruit-page .entry-list .entry-card:nth-child(6n+2) {
    background: var(--color-sand);
}

.recruit-page .entry-list .entry-card:nth-child(6n+3) .btn-primary span,
.recruit-page .entry-list .entry-card:nth-child(6n+3) {
    background: var(--color-pink);
}

.recruit-page .entry-list .entry-card:nth-child(6n+4) .btn-primary span,
.recruit-page .entry-list .entry-card:nth-child(6n+4) {
    background: var(--color-mocha);
}

.recruit-page .entry-list .entry-card:nth-child(6n+5) .btn-primary span,
.recruit-page .entry-list .entry-card:nth-child(6n+5) {
    background: var(--color-gray);
}

.recruit-page .entry-list .entry-card:nth-child(6n+6) .btn-primary span,
.recruit-page .entry-list .entry-card:nth-child(6n+6) {
    background: var(--color-white);
}

.recruit-page .entry-list .entry-card .entry-card-title {
    line-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.recruit-page .entry-list .entry-card .btn-primary {
    width: 70%;
}

.recruit-page footer {
    margin-top: 0;
    border-top: 1px solid var(--color-white);
}

.footer-logo a {
    display: flex;
    align-items: flex-end;
    column-gap: 25px;
    /* row-gap: 15px; */
    row-gap: min(2.5vw, 10px);
    font-size: 21px;
    flex-wrap: wrap;
}

.recruit-page .footer .footer-content {
    max-width: 800px;
    grid-template-columns: repeat(5, max-content);
}

/* ----------------------------------- */

/* RESPONSIVE DESIGN */

@container footer (max-width: calc(1024px - calc(3.5vw * 3))) {
    .recruit-page .footer .footer-content {
        grid-template-columns: repeat(3, auto);
        column-gap: 40px;
        row-gap: 17.5px;
    }
}

@container footer (max-width: calc(768px - calc(3.5vw * 3))) {
    .footer-content {
        grid-template-columns: repeat(3, auto);
        column-gap: 40px;
        row-gap: 17.5px;
    }
}

@container footer (max-width: calc(576px - calc(3.5vw * 3))) {
    .footer-wrapper {
        gap: 60px;
    }

    .footer-content {
        grid-template-columns: auto !important;
        column-gap: 0 !important;
        /* row-gap: 10px !important; */
        row-gap: 1em !important;
    }
}

@media (min-width: 1920px) {
    /* .header {
        height: var(--header-large);
    } */

    /* .header.cloned-header {
        transform: translateY(calc(var(--header-large) * -1));
    } */

    .header-content {
        padding: .75vw var(--space-normal);
    }

    .splide__slide {
        zoom: 1.25;
    }

    .recruit-page .staff-board .staff-content-wrapper {
        zoom: 1.25;
    }

    .recruit-page .entry .entry-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    body {
        /* padding-top: 70px; */
        padding-top: var(--header-height);
        /* line-height: 273% !important; */
    }

    .header {
        position: fixed;
        background: var(--color-mocha);
        top: 0;
    }

    .header.cloned-header {
        display: none;
    }

    .nav-right {
        gap: 5vw;
    }

    /* .hero {
        margin-top: 0;
    } */

    .hero-title {
        font-size: min(8.5vw, 70px);
    }

    .hero-description {
        font-size: 12px;
        max-width: min(75vw, 350px);
        padding: 8px;
        background: var(--color-mocha);
    }

    .description-area {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 35px;
        /* background-color: #22c55e; */
        /* padding: 56px calc(var(--space-normal) * 5) 70px calc(var(--space-normal) * 1) !important; */
    }

    .service .description-area {
        padding-top: 10vh !important;
    }

    .service .description-area-wrapper {
        min-width: auto !important;
        width: 100%;
        align-items: flex-start;
    }

    .service .description-area-text {
        text-align: left;
    }

    .service br.mobile {
        display: none;
    }

    .service .description-left-area {
        /* min-width: max-content; */
        gap: 35px;
    }

    .title-header {
        /* background-color: #065f46; */
        gap: 35px !important;
    }

    .message-illust {
        margin-top: 0;
    }

    .staff-frame {
        height: 27vh;
    }

    /* ----------------------------------- */

    /* RECRUIT-PAGE */

    body.recruit-page {
        padding-top: 0;
    }

    .recruit-page .header {
        background: none !important;
        position: absolute;
    }

    .recruit-page .header.cloned-header {
        position: fixed;
        display: block;
        background: var(--color-dark) !important;
    }

    .recruit-page .hero-content {
        max-width: 600px;
        width: 100%;
        padding: 0 var(--space-normal);
    }

    .recruit-page .hero-description {
        background: none;
        padding: 0;
    }

    .recruit-page .staff-board .staff-content-wrapper {
        gap: min(calc(var(--space-normal) * 1), 40px);
        max-width: 765px;
        /* background-color: #1b5cff; */
    }
}

@media (max-width: 768px) {

    /* スマホ向け表示 */

    br.mobile {
        display: none;
    }

    /* WORKS SECTION */

    .hero {
        margin-bottom: 25px;
    }

    .slider-section .slider-mask {
        padding: 40px var(--space-normal) 40px calc(var(--space-normal) * 2) !important;
    }

    .title-header {
        display: block;
    }

    .title-header>*:not(:first-child) {
        margin-top: 25px;
    }

    .title-wrapper>*:first-child {
        margin-right: 10px;
    }

    .title-wrapper>*:last-child {
        margin-bottom: .15em;
    }

    .slider {
        margin-top: 45px !important;
        margin-bottom: 30px;
    }

    .works-note {
        text-align: center;
        max-width: 340px;
        /* width: 340px; */
        width: 93%;
        margin: 0 auto;
    }

    .sideline::before,
    .sideline::after {
        margin: 0 14px;
    }

    .fade-center-open.show:before,
    .fade-center-open.show:after {
        animation: revealText 1.5s !important;
        animation-fill-mode: forwards !important;
        animation-timing-function: ease-out !important;
    }

    /* MESSAGE SECTION */
    .message-image {
        /* aspect-ratio: 360 / 692; */
        aspect-ratio: 360 / 600;
    }

    .message-img-1 {
        left: 0%;
        top: 11%;
        width: 63%;
    }

    .message-img-2 {
        left: 8%;
        top: 40%;
        width: 40%;
    }

    .message-img-3 {
        left: auto;
        right: 0%;
        top: 9%;
        width: 30%;
    }

    .message-img-4 {
        left: 85%;
        top: 20%;
        width: 40%;
    }

    .message-img-5 {
        left: -12%;
        top: 57%;
        width: 55%;
    }

    .message-img-6 {
        left: 56%;
        top: 29%;
        width: 40%;
    }

    .message-img-7 {
        left: 44%;
        top: 50%;
        width: 63%;
    }

    .nishimoto-text {
        transform: scale(4.7);
    }

    .description-area {
        padding: 44px calc(var(--space-normal) * 2) 126px calc(var(--space-normal)) !important;
        display: flex;
        flex-wrap: wrap;
    }

    .service .description-area {
        padding: 10vh calc(var(--space-normal) * 1) 60px calc(var(--space-normal)) !important;
    }

    .service .service-illust-wrapper img:not(:last-child) {
        margin-right: 8vw;
    }

    .description-area::before {
        right: calc(var(--space-normal) * 1);
        width: calc(100% - calc(var(--space-normal) * 1));
    }

    .description-area-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    .description-area-wrapper {
        min-width: auto !important;
    }

    .message-video-wrapper {
        /* ヘッダー高さ分を引く */
        padding: 10vh 0px;
    }

    /* news */

    .text-item-area {
        padding: 35px calc(var(--space-normal) * 2) 44px calc(var(--space-normal) * 1);
    }

    .news {
        margin-top: 60px;
    }

    .text-item-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .text-item-area .title-m-wrapper {
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: flex-end;
        gap: 10px;
    }

    .text-item-area .title-m-wrapper p {
        margin-bottom: 3px;
    }

    .text-item-list {
        padding-top: 0;
        width: 100%;
    }

    .text-item {
        flex-direction: column;
        /* gap: .5em; */
        gap: 10px;
        padding: 20px 0;
    }

    /* FOOTER */


    /* ----------------------------------- */

    /* RECRUIT-PAGE */

    body.recruit-page {
        padding-top: 0;
    }

    .recruit-page .header .logo .long {
        display: none;
    }

    .recruit-page .header .logo .short {
        display: block !important;
    }

    .recruit-page .header .logo img {
        max-height: 28px;
    }

    .recruit-page .staff-board .nishimoto-text {
        transform: translateY(-50%) scale(4.7);
    }

    .recruit-page .entry {
        padding: 100px calc(var(--space-normal) * 1);
        gap: 100px;
    }

    .recruit-page .entry .entry-list {
        grid-template-columns: repeat(2, 1fr);
    }

}

/** mobile 判定 **/
@media screen and (max-width: 1400px) and (hover: none) and (pointer: coarse) {

    /* スマホ・タブレットではリンクのアニメーション無効 */
    .btn-primary:hover::before,
    .btn-primary:hover::after,
    .btn-primary:hover,
    .form-contact:hover,
    .form-biz-partner:hover,
    .btn-panel:hover,
    .btn-panel:hover::before,
    .btn-panel:hover::after,
    .btn-panel:hover img {
        animation: none;
        transform: none;
        transition: unset;
        /* display: none; */
    }

    a:hover {
        animation: none;
        transform: none;
        transition: unset;
    }
}

@media (max-width: 576px) {
    :root {
        --space-normal: 4.5vw;
    }

    /* body {
        padding-top: var(--header-small);
    } */

    body {
        overflow-wrap: anywhere; /* 収まらない場合に折り返す */
        word-break: normal; /* 単語の分割はデフォルトに依存 */
        line-break: strict; /* 禁則処理を厳格に適用 */
    }

    .header {
        position: fixed;
        /* height: var(--header-small); */
    }

    .recruit-btn {
        position: fixed;
        /* bottom: 17px; */
        bottom: 20px;
        height: 42px !important;
        left: 50%;
        transform: translateX(-50%);
        width: 72.2%;
        /* width: calc(100% - calc(var(--space-normal) * 2)); */
        /* z-index: 100; */
    }

    .recruit-btn:hover {
        transform: translateX(-50%);
    }

    .recruit-btn::before {
        display: none;
    }

    .hero {
        /* margin-top: 0; */
        aspect-ratio: 360 / 600;
        margin-bottom: 45px;
    }

    /* Decorative elements (Rounded Rectangles) */
    .hero-deco-1 {
        left: 14.2%;
        top: 28%;
        width: 40.8%;
    }

    .hero-deco-2 {
        left: 85.6%;
        /* top: 20.5%; */
        top: calc(20.5% - 5%);
        width: 40.8%;
    }

    .hero-deco-3 {
        left: 42.7%;
        top: calc(10.2% - 5%);
        width: 40.8%;
    }

    /* Image placements based on Figma coordinates (scaled proportionally) */
    .hero-element img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .hero-img-1 {
        left: 0;
        /* top: 14%; */
        top: 13%;
        width: 24.4%;
    }

    .hero-img-2 {
        left: 30.2%;
        top: 0;
        width: 45.5%;
    }

    .hero-img-3 {
        left: 81.4%;
        top: 12.8%;
        top: calc(12.8% - 5%);
        width: 28.8%;
    }

    .hero-img-4 {
        left: 90.3%;
        /* top: 26.6%; */
        top: calc(26.6% - 5%);
        width: 28.8%;
    }

    .hero-img-5 {
        right: 0%;
        top: 39.2%;
        width: 78.3%;
    }

    .hero-content {
        padding: 0 calc(var(--space-normal) + 4px);
        /* top: 67.3%; */
        top: 65%;
        /* background-color: aqua; */
    }

    .hero-title {
        margin-bottom: 2.5%;
        font-size: 12.8vw;
    }

    .hero-description {
        font-size: 3.25vw;
        max-width: none;
        padding: 0;
    }

    /* SCROLL INDICATOR */
    .scroll-indicator {
        bottom: 36.3%;
        gap: 10px;
        height: 24.5%;
    }

    .scroll-line {
        margin-left: 2px;
    }

    .message-video-wrapper {
        /* height: calc(100svh - 60px); */
        /* ヘッダー高さ分を引く */
    }

    .staff-frame {
        padding: 0 calc(var(--space-normal) * 1);
    }

    /* service */

    .service-item {
        padding-top: 30px;
        padding-bottom: 44px;
        gap: 24px;
    }

    .service-item .label-bar::before {
        width: 30px;
    }

    .service-panels {
        gap: 20px;
    }

    .service-panel {
        flex-direction: column;
        max-width: 317px;
    }

    .service-panel-image {
        height: 220px;
        /* max-width: 317px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; */
    }

    .service-panel-content {
        padding: 20px 25px 25px 25px;
    }

    .service-panel-title {
        margin-bottom: 13px;
    }

    .service-panel-description {
        margin-bottom: 24px;
    }

    /* sns */

    .sns {
        margin-top: 30px;
    }

    .sns .title-m-wrapper * {
        margin: .05em;
    }

    .sns-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .instagram-section {
        padding: 35px calc(var(--space-normal) * 1) 44px;
    }

    .instagram-section .title-header {
        gap: 25px;
    }

    .blog-section {
        padding: 35px calc(var(--space-normal) * 1) 44px;
    }

    .blog-section .title-header {
        gap: 25px;
    }

    /* recruit */

    .recruit {
        padding: 53px calc(var(--space-normal) * 2) 165px calc(var(--space-normal) * 2);
        margin-top: 60px;
    }

    .recruit::after {
        top: -60px;
    }

    .recruit-content {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 48px;
    }

    .recruit-subtitle {
        text-align: left;
        margin-bottom: 0;
    }

    .recruit-bgimg-left {
        display: none;
    }

    .recruit-image {
        zoom: .8;
    }


    /* STAFF VOICES SECTION */

    .staff-voices {
        transform: translateY(-110px);
        margin-bottom: -110px;
    }

    .staff-card-image {
        max-height: 150px;

    }

    .staff-card-quote {
        font-size: 18px;
    }

    /* footer */

    footer {
        margin-top: 66px;
    }

    .form-links {
        justify-content: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .form-links::before {
        height: 10%;
    }

    .form-link {
        align-items: center;
    }

    .form-link.form-contact {
        width: calc(100% - calc(var(--space-normal) * 1));
        padding: 45px 10px 49px calc(var(--space-normal) * 3);
        gap: 20px;
    }

    .form-link.form-biz-partner {
        width: calc(100% - calc(var(--space-normal) * 1));
        padding: 45px 10px 49px calc(var(--space-normal) * 2);
        gap: 20px;
        margin-left: auto;
    }

    .form-icon {
        max-width: 41px;
        max-height: 47px;
    }

    .form-contact .form-icon img {
        max-width: 41px;
        width: 100%;
    }

    .form-biz-partner .form-icon img {
        max-width: 41px;
        width: 100%;
    }

    .form-header {
        gap: 0;
    }

    .form-description {
        display: none;
    }

    .footer {
        padding: 65px var(--space-normal) 90px;
    }

    /* .footer-info ul li br.pc { */
    br.pc {
        display: inline
    }

    .footer-info ul {
        flex-direction: column;
        row-gap: 1em;
        margin: 1em 0;
    }

    .footer-copyright {
        text-align: left;
    }

    .back-to-top {
        bottom: 121px;
        right: calc(var(--space-normal) * 1);
    }

    /* ----------------------------------- */

    /* RECRUIT-PAGE */

    .recruit-page .header.cloned-header .enter-btn {
        display: none;
    }

    .recruit-page .header .enter-btn {
        position: fixed;
        /* bottom: 20px; */
        bottom: calc(var(--space-normal) * 2);
        right: var(--space-normal);
        height: 42px !important;
        width: 33%;
        transition: all 0.3s ease;
    }

    .recruit-page .header .enter-btn.bottom-btn-mobile.active {
        width: 72.2%;
        right: 50%;
        transform: translateX(50%);
    }

    .recruit-page .hero {
        margin-bottom: 0;
    }

    .recruit-page .hero-content {
        padding: 0 var(--space-normal);
        top: auto;
        /* padding: 0 calc(var(--space-normal) + 4px); */
        /* top: 65%; */
    }

    .recruit-page .message-strengths-bar p {
        font-size: 11vw;
        line-height: 1.5em;
    }

    .recruit-page .staff-board {
        padding: 0 calc(var(--space-normal) * 1) 0 calc(var(--space-normal) * .5);
    }

    .recruit-page .staff-board .staff-content-wrapper {
        gap: calc(var(--space-normal) * .5);
    }

    .recruit-page .staff-board .staff-content-wrapper .staff-ill {
        max-width: 40%;
        width: 100vw;
    }

    .recruit-page .staff-board .staff-message {
        /* font-size: 27px; */
        font-size: min(6vw, 27px);
    }

    .recruit-page .staff-board .staff-card-name {
        font-size: var(--size-s);
        padding: 5px 15px;
    }

    .recruit-page .entry {
        padding: 75px calc(var(--space-normal) * 1) 65px;
        gap: 51px;
    }

    .recruit-page .entry .entry-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .recruit-page .entry-list .entry-card .btn-primary {
        width: 100%;
    }

    .recruit-page footer .footer-logo a {
        font-size: max(13px, 3vw);
    }
}

/* 画面が縦長の場合 */
@media screen and (orientation: portrait) {

    /* recruit-page */

    .recruit-page .hero-background {
        width: auto;
        height: 50%;
        transform: translateY(-8%);
    }
}

/* LOADING SCREEN */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e1dcd9;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity .5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(39, 39, 39, 0.2);
    border-top: 4px solid #272727;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

/* Character fade-in animation with slide-up effect */
@keyframes fadeInCharSlideUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

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

.char-fade-in {
    color: transparent;
    /* opacity: 0; */
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: anywhere;
    white-space: normal;
}

.char-fade-in.show {
    color: inherit;
    /* opacity: 1 */
}

.char-fade-in span {
    opacity: 0;
    display: inline-block;
    animation: fadeInCharSlideUp 0.6s ease-out forwards;
}

/* Fade-in animation */
.fade-in {
    opacity: 0;
}

.fade-in.show {
    animation-name: fade-in;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* Fade-up animation */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* Fade-center open animation */
.fade-center-open {
    position: relative;
}

.fade-center-open:before {
    left: 0;
}

.fade-center-open:after {
    right: 0;
}

.fade-center-open:before,
.fade-center-open:after {
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    background: var(--color-dark);
}

.fade-center-open.show:before,
.fade-center-open.show:after {
    animation: revealText 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes revealText {
    0% {
        width: 50%
    }

    100% {
        width: 0%
    }
}

body.font-loaded {
    font-family: 'Noto Sans JP', sans-serif;
}