@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
ここから追加　メインビジュアル映像（subp-hero）
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

.video-text-small {
    font-size: 0.9em; /* 「動画制作実績」を少し小さく */
}

.konoha-text-large {
    font-size: 1.5em; /* 「KONOHA」を少し大きく */
}

.company-position-small {
    font-size: 0.8em; /* お好みで調整 */
    display: inline-block; 
    margin-top: 0.4em; 
    color: #fff; 
}

/* ユーティリティクラス */
.subp-position-relative { position: relative; }
.subp-position-absolute { position: absolute; }
.subp-overflow-hidden { overflow: hidden; }
.subp-display-block { display: block; }
.subp-flex { display: flex; }
.subp-inline-flex { display: inline-flex; }
.subp-justify-center { justify-content: center; }
.subp-align-items-center { align-items: center; }
.subp-align-items-end { align-items: flex-end; }
.subp-uppercase { text-transform: uppercase; }
.subp-full-width { width: 100%; }
.subp-full-height { height: 100%; }
.subp-boxed-layout {
    max-width: 165rem;
    margin-left: auto;
    margin-right: auto;
}
.subp-margin-bottom-40 { margin-bottom: 4rem; }
.subp-margin-left { margin-left: 2rem; }
.subp-padding-top-180 { padding-top: 18rem; }
.subp-padding-top-none { padding-top: 0; }
.subp-padding-bottom-90 { /* padding-bottom: 9rem; */ }
.subp-padding-horizontal-mobile { padding-left: 2rem; padding-right: 2rem; }

/* フォントサイズ */
.subp-medium-font-size { font-size: 1rem; line-height: 1.3; }
.subp-large-font-size { font-size: 39px; line-height: 0.9; }

/* レスポンシブスタイル */
@media only screen and (min-width: 1024px) {
    .subp-medium-font-size { font-size: 2rem; line-height: 1.3; }
    .subp-large-font-size { font-size: 4.375vw; line-height: 1.1; }
    .subp-padding-top-180 { padding-top: 9.375vw; }
    .subp-padding-bottom-90 { /* padding-bottom: 4.6875vw; */ }
    .subp-margin-bottom-40 { margin-bottom: 2.0833333333vw; }
    .subp-margin-left { margin-left: 1.0416666667vw; }
}

@media only screen and (min-width: 1600px) {
    .subp-large-font-size { font-size: 77px; }
}

@media only screen and (min-width: 1920px) {
    .subp-padding-top-180 { padding-top: 180px; }
    .subp-padding-bottom-90 { padding-bottom: 90px; }
    .subp-margin-bottom-40 { margin-bottom: 40px; }
    .subp-margin-left { margin-left: 20px; }
}

@media only screen and (max-width: 1023px) {
    .subp-responsive-padding-top-30 { padding-top: 30px; padding-bottom: 30px; }
    .subp-responsive-padding-bottom-none { padding-bottom: 0; }
    .subp-responsive-margin-bottom-none { margin-bottom: 0; }
    .subp-padding-horizontal-mobile { padding-left: 2rem; padding-right: 2rem; }
}

/* アニメーション関連 */
[data-js-split-words],
[data-js-split-words] .word { backface-visibility: hidden; transform-style: preserve-3d; }
[data-js-split-words] .word {
    display: inline-block; position: relative; overflow: hidden;
    font-family: 'Cormorant', serif; font-weight: normal;
}
[data-js-split-words] .word .word-main { font-size: 1em; }
[data-js-split-words] .word .word-sub { font-size: 0.4em; letter-spacing: 0.2em; }
[data-js-split-words] .word:after { content: " "; margin-right: 5px; }
[data-js-split-words] .word .word-inner { transform: translate3d(0, 100%, 0); opacity: 1; display: inline-block; }

/* ヒーローセクション */
.subp-hero-section {
    background-color: #000; margin-top: -120px; /*margin-bottom: 7em*/;
    position: relative; overflow: hidden; z-index: 0;
}
.subp-hero-content {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    /* 下に内容を配置するために変更 */
    justify-content: flex-start;
}
.subp-hero-title { line-height: 1.2; color: #fff; }
@media only screen and (min-width: 1024px) { .subp-hero-title { line-height: 1.1; } }
.subp-first-line .word { margin-bottom: -1.5rem; }
.subp-hero-grid { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
@media only screen and (min-width: 1024px) {
    .subp-hero-grid {
        display: grid;
        grid-template-areas: "one one" "three two";
        align-content: end;
        align-items: start;
        margin-left: -200px; /* PC版において文字全体を左に移動 */
    }
}
.subp-hero-grid .subp-hero-services {
    grid-area: two;
    padding-bottom: 100px;
    font-family: 'Cormorant', serif;
    font-weight: normal;
}
.subp-hero-grid .subp-hero-button { grid-area: three; opacity: 1; }
.subp-hero-services {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: block;
    overflow: hidden;
    opacity: 1;
    color: #fff;
}
.subp-subtitle {
    opacity: 1;
    display: block;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.subp-in-view { }

/* ビデオ背景 */
.subp-video-background {
    position: relative; width: 100%; height: 100vh;
    background-color: #000; z-index: 0; overflow: hidden;
}
.subp-video-overlay {
    content: ""; width: 100%; height: 100%; position: absolute;
    top: 0; left: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.1);
    transform-style: preserve-3d; transform: translateZ(0);
}
.postid-9602 .subp-video-overlay { background-color: rgba(0, 0, 0, 0.2); }
.subp-video-background .subp-video-element,
.subp-video-background .subp-video-overlay {
    position: absolute; backface-visibility: hidden; display: block;
}
.subp-video-background .subp-video-element {
    width: 330%; height: auto; max-width: none;
    min-height: 100%; min-width: 100%; z-index: 1;
    transform-style: preserve-3d; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
@media only screen and (min-width: 1024px) {
    .subp-video-background .subp-video-element {
        width: 100%; height: auto; max-width: none;
        min-height: 100%; min-width: 100%; z-index: 1;
        transform-style: preserve-3d; left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* 再生ボタンのスタイル */
.subp-video-play-button {
    display: inline-flex; align-items: center; background: none;
    border: none; cursor: pointer; padding: 0; margin: 0;
    color: inherit; font: inherit; text-transform: uppercase;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.subp-video-play-button__icon {
    width: 6rem; height: 6rem; display: flex;
    align-items: center; justify-content: center; position: relative;
    transition: transform 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}
.subp-video-play-button__svg {
    width: 7.5rem; height: 7.5rem;
    transition: transform 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}
.subp-video-play-button__svg polygon {
    transform-origin: center;
    transform: scale(0.8);
    transition: transform 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
}
.subp-video-play-button__label {
    margin-left: 1.5rem;
    color: #fff;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
@media only screen and (min-width: 1025px) {
    .subp-video-play-button:hover .subp-video-play-button__icon {
        transform: scale(1.2);
    }
    .subp-video-play-button:hover .subp-video-play-button__svg polygon {
        transform: translate3d(200%, 0, 0);
        transition: transform 0.6s cubic-bezier(0.43, 0.195, 0.02, 1);
        animation: slideBack 0.6s forwards;
    }
}
@keyframes slideBack {
    0% { transform: translate3d(200%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* 下部の左右対称で下向きの曲線スタイル */
.subp-hero-curve {
    position: absolute;
    bottom: -210px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
@media (max-width: 1500px) {
    .subp-hero-curve { bottom: -110px; }
}
@media (max-width: 800px) {
    .subp-hero-curve { bottom: -1px; }
}

/* 改行をブロック要素で表現 */
.text-line {
    display: block;
}
.sp-only {
    display: inline;
}
@media (max-width: 767px) {
    .sp-only {
        display: block;
    }
}

/* 余白調整用のクラス */
.text-line.big-margin {
    margin-bottom: 0em;
}
.text-line.small-margin {

    margin-bottom: 0.05em; /* 前回の small-margin をさらに少なく */
}
@media (max-width: 767px) {
    .subp-title-block {
        transform: translateY(100px);
    }
}