*,
*::before,
*::after {
    box-sizing: border-box;
}

a,
a:hover,
a:visited,
a:active {
    text-decoration: none;
}

:root {
    /* Color var for Root */
    --or: #EA5504;
    --lt-or: #EC8B56;
    --blk: #000000;
    --dk-blk: #231815;
    --lt-blk: #4D4341;
    --dk-gr: #B5B5B6;
    --gr: #EFEFEF;
    --wt: #FFFFFF;

    /* Font var for Root */
    --f_ns: "Noto Sans JP", sans-serif;
}

body {
    position: relative;
}



.negative,
.negative-2,
.positive,
.number,
.interview,
.work_environment,
.message,
.company,
.entry{
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
}

.tanagi{
    position: sticky;
    z-index: 12;
    width: 100%;
    picture{
    width: 100%;
    img{
    width: 100%
    }
    }
}

.js-hover-img {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.js-hover-img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}


.business_model_content_right picture {
    opacity: 0;
    transform: translateX(50px);
    /* 変化を滑らかにする設定 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.business_model_content_right.is-show picture {
    opacity: 1;
    transform: translateX(0);
}

.business_model_content_right.is-show picture:nth-child(1) {
    transition-delay: 0.2s;
}

.business_model_content_right.is-show picture:nth-child(2) {
    transition-delay: 0.4s;
}

.business_model_content_right.is-show picture:nth-child(3) {
    transition-delay: 0.6s;
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.laf_ttl {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 32px;
    font-family: var(--f_ns);
    font-weight: 600;
    text-align: left;
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 8%;
    h2{
    display: flex;
    justify-content: flex-end;
    }
}

.ttl_blank{
    width: 8px;
    height: 100px;
    background-color: var(--blk);
}
@media (max-width: 768px) {

.laf_ttl {
    max-width: 1000px;
    font-size: 20px;
    font-family: var(--f_ns);
    font-weight: 600;
}

}

/* ------------ header area ------------ */
.header_wrap {
    width: 100%;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_btn {
    font-family: var(--f_ns);
    font-weight: 600;
    background-color: var(--or);
    color: var(--wt);
    transition: background-color 0.3s ease;
}

.header_btn:hover {
    background-color: var(--dk-blk);
}

.header_btn_text {
    display: block;
    padding: 3px 70px;
    font-size: 28px;
    color: var(--wt);
}

@media (max-width: 768px) {
    .header_wrap {
        padding: 40px 0px 0px 20px;
        align-items: flex-start;
    }

    .header_btn {
        writing-mode: vertical-rl;
        text-orientation: upright;
    }

    .header_btn_text {
        font-size: 20px;
        padding: 4px 0px;
    }
}

/* ------------ header area end------------ */


/* ------------ kv area ------------ */
.kv {
    height: 80vh;
    width: 100%;
    position: relative;
    top: 0;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 20vh;
}

.kv_main {
    margin: 2vh auto;
    display: flex;
    max-width: 600px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
}

.kv_sub {
    position: absolute;
    bottom: 0px;
}

.ticker-container {
    width: 100%;
    overflow: hidden;
}

.ticker-text-wrapper {
    display: flex;
    width: max-content;
    animation: loop-animation 25s linear infinite;
}

.ticker-text {
    white-space: nowrap;
    font-size: 1.5rem;
    font-weight: bold;
    padding-right: 50px;
}

.ticker-container:hover .ticker-text-wrapper {
    animation-play-state: paused;
}

@keyframes loop-animation {
    0% {
        transform: translateX(0);
    }

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

@media (max-width: 768px) {
    .kv {
        height: 70vh;
        margin-bottom: 8vh;
    }

    .kv_main {
        padding: 20px;
    }

    .ticker-text {
        font-size: 1rem;
    }
}


/* ------------ kv area end------------ */


/* ------------ negative area------------ */
.negative {
    background-color: var(--dk-blk);
    align-items: center;
    /* z-index: 2; */
    display: flex;
    min-height: 100vh;
}

.negative_content {
    max-width: 800px;
    display: grid;
    justify-content: center;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px
}

@media (max-width: 768px) {
    .negative_content {
        padding: 20px;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* ------------ negative area end------------ */


/* ------------ negative2 area------------ */
.negative-2 {
    background-color: var(--lt-blk);
    align-items: center;
    /* z-index: 3; */
    display: flex;
    min-height: 100vh;
}

/* ------------ negative2 area end------------ */

/* ------------ positive area------------ */

.positive {
    background-color: var(--or);
    align-items: center;
    /* z-index: 3; */
    display: flex;
    min-height: 100vh;
}


.positive_content {
    max-width: 800px;
    display: grid;
    justify-content: center;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px
}

@media (max-width: 768px) {
    .positive_content {
        padding: 20px;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}


/* ------------ positive area end------------ */
/* ------------ business_model area------------ */
.business_model {
    position: relative;
    z-index: 10;
    background-color: var(--gr);
    margin: 0 auto;
    text-align: center;
    padding:  0px 20px 20%;
    width: 100%;
}

.business_model_content {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    gap: 20px;
}

.business_model_content_left {
    width: 8%;

    img {
        width: 100%;
    }

    picture {
        img {
            width: 100%;
        }
    }
}

@media (max-width: 768px) {
    .business_model_content_left {
        width: 10%;
    }
}

.business_model_content_right {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;

    img {
        width: 100%;
    }

    picture {
        img {
            width: 100%;
        }
    }
}

.is-show{
overflow: visible;
}

/* ------------ business_model area end------------ */



/* ------------ number area------------ */
.number {
    background-color: var(--or);
    align-items: center;
    /* z-index: 4; */
    position: relative;
    display: flex;
    min-height: 100vh;
}

.number_content {
    max-width: 800px;
    display: grid;
    justify-content: center;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px
}

@media (max-width: 768px) {
    .number_content {
        padding: 20px;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* ------------ number area end------------ */


/* ------------ interview area------------ */

.interview {
    background-color: var(--wt);
    position: relative;
    justify-content: center;
    margin: 0 auto;
    padding: 0px 20px 16%;
}

.interview_content {
    max-width: 1000px;
    display: grid;
    margin: 0 auto;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
    .interview_content {
        grid-template-columns: 1fr;
    }
}


/* ------------ interview area end------------ */


/* ------------ work_environment area ------------ */

.work_environment {
    display: flex;
    background-color: var(--gr);
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.work_environment_content {
    max-width: 800px;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
    .work_environment_content {
        padding: 20px;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* ------------ work_environment area end------------ */


/* ------------ message area ------------ */

.message {
    background-color: var(--wt);
    align-items: center;
    position: relative;
    padding: 0px 20px 16%;
}

.message_content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ------------ message area end ------------ */


/* ------------ company area ------------ */
.company {
    background-color: var(--dk-blk);
    position: relative;
}

.company_content {
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    align-items: center;
    justify-content: center;
}

/* ------------ company area end ------------ */

/* ------------ entry area ------------ */

.entry {
    background-color: var(--wt);
    align-items: center;
    display: flex;
    min-height: 100vh;
    position: relative;
}

.entry_content {
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:20px;
}

.entry_text {
    font-size: 20px;
    text-align: center;
    font-family: var(--f_ns);
    font-weight: 600;
    margin-bottom: 8%;
}

@media (max-width: 768px) {
.entry_text {
    font-size: 16px;
}
}


/* 基準点と、枠外にはみ出た光を隠す設定 */
.entry_btn a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    /* ボタンの枠外の光を隠すための超重要プロパティ */
    overflow: hidden; 
    
    /* ※画像が角丸の場合は、光もそれに合わせる必要があります。
       例： border-radius: 10px; */
}

/* 画像自体の設定 */
.entry_btn img {
    display: block;
    width: 100%;
    height: auto;
}

/* 通過する光の帯を作成 */
.entry_btn a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* 初期位置はボタンの左外側 */
    width: 50%;  /* 光の帯の幅 */
    height: 100%;
    
    /* 光のグラデーション（左端は透明、中央が白、右端が透明） */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    
    /* 光の帯を少し斜めにする */
    transform: skewX(-25deg);
    
    /* アニメーション：3秒サイクルで光が通過する */
    animation: shine-sweep 3s infinite;
    
    z-index: 1; /* 画像の前に光を出す */
}

/* 光が通過するアニメーション定義 */
@keyframes shine-sweep {
    0% {
        left: -150%; /* スタート位置 */
    }
    20% {
        left: 150%;  /* 全体の20%の時間（0.6秒）で右へサッと通り過ぎる */
    }
    100% {
        left: 150%;  /* 残りの80%の時間（2.4秒）は待機して間隔をあける */
    }
}



/* ------------ entry area end ------------ */


/* ------------ modal area ------------ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease; /* ふんわり表示 */
}

/* JavaScriptでこのクラスを付与して表示させる */
.modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* 黒い半透明の背景 */
.modal_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

/* モーダルの中身 */
.modal_content {
    position: relative;
    z-index: 1;
    background-color: var(--gr);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto; /* 縦にはみ出た場合はスクロール */
    padding: 40px;
    border-radius: 10px;
    font-family: var(--f_ns);
}

/* 閉じるボタン */
.modal_close_btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    color: var(--or);
    line-height: 1;
    transition: color 0.3s ease;
}

.modal_close_btn:hover {
    color: var(--or);
}

/* インタビュー画像のホバーエフェクト（クリックできることを伝えるため） */
.js-modal-trigger {
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.js-modal-trigger:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.mdl{
margin: 40px 0px;
}