@charset "utf-8";

#loader {
    /* 画面いっぱいに固定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: #ffffff; 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* JSで読み込み完了時に付与 */
#loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 
}

/* メインビジュアル */
.hero {
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing:border-box;
    padding: 0px 10%;
    color: white;
}

.hero-copy {
    writing-mode: vertical-rl;
    font-size: 3rem;
    letter-spacing: 0.5rem;
    font-weight: bold;
    /*text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);*/
    opacity: 0;
}

/* 親要素に .is-show がついた時の動き */
.hero-sidebar.is-show .hero-copy {
    /* 0.5秒かけてフェードイン / 待機時間は背景スライドと合わせて0.8秒〜1.0秒程度がおすすめ */
    animation: text-fadein 0.5s ease-out 0.8s forwards;
}

/* フェードイン用のアニメーション定義 */
@keyframes text-fadein {
    0% {
        opacity: 0;
        transform: translateY(10px);
        /* 少し下から上に浮き上がる動き（不要なら削除可） */
    }

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

.hero {
    display: flex;
    /* テキストと画像エリアを横並びに */
    align-items: stretch;
    gap: 2rem;
    padding: 1rem 5%;
    max-width: 100%;
    margin: 0 auto 70px auto;

    box-sizing: border-box;
}

/* 左側：全体の40%に設定 */
.hero-sidebar {
    flex: 0 0 43%;
    /* 伸びない、縮まない、幅40%固定 */
    /*background: url('../../images/p_main1.jpg') center/cover no-repeat; */
    /*min-height: 780px;*/
    display: flex;
    align-items: center;
    padding: 0 4rem;
    gap: 0rem;
    overflow: hidden;
    /* はみ出た背景や白ボックスを隠す */
}

/* 背景画像を擬似要素として配置 */
.hero-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../images/p_main1.jpg') center/cover no-repeat;
    z-index: 1;
    /* 白ボックス(z-index:2)より下に配置 */
    opacity: 0;
    /* 最初は隠す */
}

/* .is-show がついたら背景画像を表示 */
.hero-sidebar.is-show::before {
    animation: img-appear 0.01s 0.6s both;
}

/* 縦書きテキストのスタイル */
.hero-copy {
    position: relative;
    z-index: 3;
    /* 背景(1)と白ボックス(2)より上に置く */
    writing-mode: vertical-rl;
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 1.2rem;
    color: var(--main-color);
    /*padding-top: 10rem;*/
    flex-shrink: 0;
    /* テキストが潰れないように固定 */
}

/* 右側のメインビジュアルエリア（伸び縮みの要） */
.hero_visual {
    flex-grow: 1;
    /* 残りの幅をすべて使う */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0px;
}

/* 画像グリッド（横並び） */
.visual-grid {
    display: flex;
    gap: 2rem;

}

.visual-img {
    flex: 1;
    /* 均等に伸び縮み */
}

.visual-img img {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
    /* 画像の比率を保ったまま枠を埋める */
    display: block;
}

.visual-grid.custom .visual-img img {
    max-height: 160px;
}

/* 下段の右側だけ少し広く見せたい場合などの調整用 */
.visual-img.-wide {
    flex: 1.5;
}

/* メッセージ部分 */
.visual-message {
    padding-left: 3rem;
}

.visual-message h3 {
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    color: #222;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.visual-message p {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
    font-weight: 400;
}

.visual-message h3,
.visual-message p {
    opacity: 0;
}

.visual-message.is-show h3,
.visual-message.is-show p {
    /* 0.5秒かけてフェードイン*/
    animation: text-fadein 0.5s ease-out 0.8s forwards;
}

.visual-grid2 {
    display: none;
}

@media screen and (max-width:1100px) {
    .visual-message p br {
        display: none;
    }

    .visual-message h3 br {
        display: none;
    }

    .visual-message {
        padding-left: 0rem;
    }
}

/* スマホ対応（768px以下） */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        /* 縦並びにする */
        gap: 2rem;
        padding: 0rem;

        margin: 0 auto 50px auto;
    }

    .visual-message {
        padding-left: 30px;
        padding-right: 30px;
    }

    .visual-message h3 {
        font-size: var(--spmidashi);
        margin-bottom: 1.3rem;
    }

    .visual-message h3 br,
    .visual-message p br.spview {
        display: none;
    }

    .visual-message p {
        font-size: var(--spfontsize);
    }

    .hero-sidebar {
        width: 100%;
        min-height: 300px;
        height: 60vh;
        padding: 0 3rem;
    }

    .hero-copy {
        writing-mode: horizontal-tb;
        /* スマホでは横書きの方が読みやすい場合が多い */
        font-size: 2rem;
        letter-spacing: 0.5rem;
    }

    .visual-grid {
        display: none;
    }

    .visual-grid2 {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }

    .visual-grid2 .visual-img {
        width: 100% !important;
        min-width: 150px;
    }
    .btn__.catalogbtn .cta-button {
        background: var(--main-teal) url(../../images/i_search.png) 20px center no-repeat;
        background-size: 16px auto;
        padding: 20px 30px 20px 60px;
        margin-top: 20px;
    }
}

/*Animation*/

.reveal-box {
    position: relative;
    overflow: hidden;
    /* はみ出た白ボックスを隠す */
    background-color: #fff;
}

/* スライドする白ボックス（疑似要素） */
.reveal-box.is-show::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 2;
    /* fill-modeをbothにすることで、待機中も白ボックスで隠れるようにします */
    animation: reveal-slide 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
}



/* 中の画像：最初は隠しておき、少し遅れて出すとかっこいい */
.reveal-box.is-show img {
    opacity: 0;
    animation: img-appear 0.01s 0.6s both;
}

/* アニメーションの定義 */
@keyframes reveal-slide {
    0% {
        transform: translateX(-100%);
        /* 左側に隠れている状態 */
    }

    50% {
        transform: translateX(0);
        /* 画像を完全に覆った状態 */
    }

    100% {
        transform: translateX(101%);
        /* 右側へ突き抜ける状態 */
    }
}

@keyframes img-appear {
    to {
        opacity: 1;
    }
}

/* 1番目：0.3秒遅れ */
.reveal-box.is-show.delay-1::after {
    animation-delay: 0.1s;
}

.reveal-box.is-show.delay-1 img {
    animation-delay: 0.7s;
}

/* 0.6s + 0.3s */

/* 2番目：0.6秒遅れ */
.reveal-box.is-show.delay-2::after {
    animation-delay: 0.2s;
}

.reveal-box.is-show.delay-2 img {
    animation-delay: 0.8s;
}

/* 0.6s + 0.6s */

/* 3番目：0.9秒遅れ */
.reveal-box.is-show.delay-3::after {
    animation-delay: 0.3s;
}

.reveal-box.is-show.delay-3 img {
    animation-delay: 0.9s;
}

/* 0.6s + 0.9s */

/* 3番目：0.9秒遅れ */
.reveal-box.is-show.delay-4::after {
    animation-delay: 0.4s;
}

.reveal-box.is-show.delay-4 img {
    animation-delay: 1s;
}

section {
    padding: 80px 5%;
    max-width: 1200px;
    margin: 0 auto;
}







section#com {
    position: relative;
    max-width: 100%;
    padding: 0px;
    margin: 0px 0 80px 0;

    overflow: hidden;
    padding-top: 0px;
    display: none;
    opacity: 0;
}

body.on section#com {
    display: block;
    opacity: 1;
}

section#com::before {
    content: "";
    background: url(../../images/bg_office.jpg) center top no-repeat;
    height: 300px;
    display: block;
    position: absolute;
    object-fit: cover;
    width: 100%;

    z-index: -1;
}

section#com .com__inner {
    max-width: 1200px;
    margin-top: 180px;
    margin-right: auto;
    margin-left: auto;
    background: #fff;
    /*min-height:200px;*/
    display: flex;
}

section#com .com__inner .com__main_txt {
    width: 65%;
    box-sizing: border-box;
    text-align: left;
}

section#com .com__inner .com__main_img {
    width: 35%;
    box-sizing: border-box;
    text-align: center;
}

section#com .com__inner .com__main_img img {
    margin-top: -90px;
}




/*事例ケース*/

#cases {
    opacity: 0;
    display: none;
}

body.on #cases {
    opacity: 1;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

#cases .section-title {
    text-align: left;
    margin-bottom: 30px;
}

.cases__inner {
    display: flex;
    flex-wrap: wrap;
    width:100%;
    min-height: 70vh;
    height:auto;
    overflow:hidden;
    align-items:flex-start;
    justify-content: space-between;
}

.cases__inner h3 {
    font-weight: 400;
    letter-spacing: 0.25em;
    font-size: 1.6rem;
    line-height: 1.5;
}

.cases__main_img {
    width: 50%;
    height: 100%;
}

.cases__main_img img {
    width: 100%;
        min-height: 70vh;
    height:auto;
    object-fit: cover;
}

.cases__main_txt {
    text-align: left;
    width: 50%;
    /*flex:1;*/
    box-sizing: border-box;
    padding-left: 50px;
}

.cases__main_txt p {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
    font-weight: 400;
}

.cases__inner .btn__ {
    text-align: left;
}

.btn__layout.spview {
    display: none;
}

.com__inner .section-title {
    text-align: left;
    margin-bottom: 30px;
}

dl.com__w_txt {
    display: flex;
    /* align-items:end;*/
    justify-content: space-around;
    margin-bottom: 30px;
    flex-direction: column;
    width: 100%;
}

dl.com__w_txt dt {
    /*width:500px;*/

}
dl.com__w_txt dd{
    padding-left:0px;
    margin-left:0px;
    padding-top:30px;
}

.com__main_txt__inner {
    display: inline-block;
    margin-left: 70px;
    margin-top: 50px;
}

dl.com__w_txt h3 {
    font-weight: 400;
    letter-spacing: 0.25em;
    font-size: 1.6rem;
    padding: 0px;
    margin: 0px;
    line-height: 1.5;
}

dl.com__w_txt p {
    padding: 0px 0 3px 0;
    margin: 0px;
}

section#topics {
    background: #F8F8F8;
    margin-bottom: 90px;
    padding-top: 50px;
    padding-bottom: 20px;
    display: none;
    opacity: 0;
}

body.on section#topics {
    display: block;
    opacity: 1;
}
#home section#topics{
    padding-top: 50px!important;
     margin-bottom: 90px!important;
     padding-bottom: 20px!important;
     box-sizing:border-box!important;
}

section#topics .btn__ {
    margin-top: 30px;
}



.scrollmove {
    opacity: 0;
}

.striked {
    animation: fadein1 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
section#lineup {
    position: relative;
    width: 100%;
    padding: 0px 30px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0px;
    display: none;
    opacity: 0;
}

body.on section#lineup {
    display: block;
    opacity: 1;
}

body.on footer {
    display: block;
    opacity: 1;
}


@media screen and (max-width:1024px) {
    .cases__inner h3 {
        font-size: 2.4vw;
    }

    .cases__main_txt p br {
        display: none;
    }

    /*section#com .com__inner .com__main_img{
        width:40%;
        text-align:center;
    }
    section#com .com__inner .com__main_img img{
        width:26vw;
        height:auto;
    }*/

    dl.com__w_txt dt,
    dl.com__w_txt dd {
        /*width:auto;*/
        padding: 0px;
        margin: 0px;
    }

    dl.com__w_txt dt {
        width: 360px;
    }
}

@media screen and (max-width:768px) {
    #cases {
        padding-right: 0px;
        padding-left: 0px;
        padding-top:40px;
    }
    section#cases,
    section#lineup {
        padding-bottom:50px;
    }
    section#com .com__inner .com__main_img img {
        margin-top: 0px;
    }
    section#com .com__inner .com__main_img{
        width:100%;
    }
    .cases__main_img {
        width: 100%;
        height: 160px;
    }
    section#com .com__inner .com__main_txt {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }

    .cases__main_img img {
        width: 100%;
        min-height:160px;
        height: 100%;
        object-fit: cover;
    }


    .cases__main_txt {
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        padding-left: 30px;
        padding-top: 20px;
        padding-right: 30px;
    }
    .cases__main_txt p {
        font-size:var(--spfontsize);
    }
    .cases__inner h3 {
        font-size: var(--h3size);
    }

    .cases__main_txt .btn__ {
        display: flex;
        justify-content: center;
    }
    section#com .com__inner {
        flex-direction: column-reverse;
        margin-top: 180px;
        display:inline;

    }
    section#com .com__inner .com__main_img {
        height:230px;
        width:160px;
        float:right;
    }

    section#com .com__inner .com__main_img img {
        width: 160px;
         height:230px;
        object-fit: cover;
    }

    .cases__inner {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        overflow: hidden;
        align-items: center;
        justify-content: space-between;
    }

    section#com::before {
        content: "";
        background: url(../../images/bg_office.jpg) center top no-repeat;
        height: 160px;

    }
    section#com .com__inner .com__main_txt {
        padding-right: 0px;
        box-sizing: border-box;
        text-align: left;
    }
    section#lineup .section-title{
        margin-left:30px;
        margin-right:30px;
        width:auto;
    }
    
    section#lineup,
    section#com {
        padding-bottom:0px;
        margin-bottom:30px;
    }
    #home section#topics{
        margin-bottom: 50px!important;
    }
    .btn__layout.spview {
        display:flex;
        padding:0px;
        margin-top:30px;
    }

}





@keyframes fadein1 {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@media screen and (max-width:1200px) {
    dl.com__w_txt p br {
        display: none;
    }

    dl.com__w_txt {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-around;
        margin-bottom: 30px;
    }
    dl.com__w_txt h3 {
        margin-bottom: 16px;
        min-width:600px;
    }
    
    dl.com__w_txt dd {
        margin: 0px;
        padding: 0px;
    }
}

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

    section#com::before {
        content: "";
        background: url(../../images/bg_office.jpg) center top no-repeat;
        background-size: cover;

    }
    section#com .com__inner {
       /* flex-wrap: wrap;
        flex-direction: column-reverse;*/
        position:relative;
        display:block;

    }
    .com__main_txt__inner {
        display: block;
        margin-left: 20px;
        margin-top: 0px;
        width:auto;
        margin-right:20px;
        padding-top:0px;
        border:solid 1px rgba(0,0,0,0);
    }
    dl.com__w_txt{
        width:auto;
         margin-bottom: 10px;
    }
    dl.com__w_txt dt {
        width:auto;
    }
    dl.com__w_txt h3 {
        font-size: var(--h3size);
         width:100%;
         min-width:100%;
    }
    .com__main_img.spview{
        position:absolute;
        right:0px;
        top:-160px;       
        width:160px;
        height:250px;
        display:block;
    }
    dl.com__w_txt p {
        font-size: var(--spfontsize);
        padding-left: 0px;
    }

    section#topics .topics__inner {
        flex-direction: column;
    }

    section#topics .topics__main_title {
        width: 100%;
    }

    section#topics .topics__main_txt {
        width: 100%;
        box-sizing: border-box;
        padding-left: 0px;
        border-left: none;
    }

}

@media screen and (max-width:468px) {


    section#com .com__inner .com__main_txt,
    section#com .com__inner .com__main_img {
        width: 100%;
    }

    section#com .com__inner .com__main_img img {
        margin-top: 0px;
        width: 45%;
        height: auto;
    }

    section#com .com__inner .com__main_img {
        margin-top: 0px;
        text-align:right;
    }

    .btn__layout {
        flex-direction: column;
    }

    .btn__layout div {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .btn__layout div a{
        min-width:240px;
        box-sizing:border-box;
        margin:0px;
    }
    .btn__layout.spview div:nth-child(1){
        margin:0px!important;
        padding:0px!important;
    }
    .btn__layout div:nth-child(1) a {
        float: none;
        margin-right: 0px;
        margin-bottom:10px;
    }

    .btn__layout div:nth-child(2) a {
        margin-left: 0px;
    }

    .btn__layout div:nth-child(1) {
        margin-bottom: 10px;
    }
    .com__main_txt__inner {
        margin-left: 0px;
        margin-right:30px;
        width:auto;
    }
    .com__main_txt{
        padding-right:30px;
        padding-left:30px;
    }
}