@charset "UTF-8";

/* ===============================
    Loading
=============================== */

#loading{

    position:fixed;
    inset:0;

    width:100vw;
    height:100dvh;
    box-sizing:border-box;

    background:#1b202b;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:40px;

    z-index:99999;

    transition:1s;

    overflow:hidden;
}

#loading img{

    width:280px;

}

#loading.hide{

    opacity:0;
    visibility:hidden;

}

.loading-text{

    position:relative;

    font-size:.9rem;
    letter-spacing:.3em;

    text-align:center;

    margin:0;
}

.dots{

    position:absolute;

    left:100%;
    top:0;

    width:3ch;

    text-align:left;

    letter-spacing:0;
}

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

.dots::after{

    content:"";

    animation:dots 1.2s steps(4) infinite;

}

@keyframes dots{

    0%{

        content:"";

    }

    25%{

        content:".";

    }

    50%{

        content:"..";

    }

    75%{

        content:"...";

    }

    100%{

        content:"";

    }

}

/* ===============================
    Base
=============================== */

body{
    background:#1b202b;
    color:#fff;
    font-family:
    "kinkakuji",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
    line-height:1.8;
    letter-spacing: .1rem;
    overflow-x:hidden;
}

img{
    width:100%;
    display:block;
}

a{
    color:#fff;
    transition:.3s;
}

a:hover{
    opacity:.7;
}

/* ===============================
    Common
=============================== */

.section{
    padding:120px 0;
    position:relative;
    border-bottom:none;
    /* border-bottom: 1px solid #7f8ba0; */
    overflow:hidden;
}

.section::after{

    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    height:1px;

    background:#7f8ba0;

}

.section::before{

    content:"";

    position:absolute;
    bottom:-1px;
    left:-30%;

    width:30%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #ff00ff,
        #00ffff,
        transparent
    );

    filter:blur(2px);

    animation:borderMove 5s linear infinite;

}

@keyframes borderMove{

    from{

        left:-30%;

    }

    to{

        left:100%;

    }

}

.container{
    width:min(1200px,90%);
    margin:0 auto;
}

.section-title{
    font-size:3.6rem;
    font-weight:bold;
    letter-spacing:.2em;
    text-align:center;
    margin-bottom:60px;
    text-transform:uppercase;
    color:#fff;
    text-shadow:
    -2px 0 #ff00ff,
     2px 0 #00ffff;
}

.works-number{
    text-align:center;
    font-size:.9rem;
    letter-spacing:.2em;
    margin-bottom:10px;
}

.section-subtitle{
    text-align:center;
    margin-top:-50px;
    margin-bottom:60px;
    font-size:.95rem;
}

a:hover {
    color: #ff00ff;
    /* background:linear-gradient(90deg,#ff00ff,#00ffff);
	
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent; */
}

.btn{
    text-align:center;
    margin-top:50px;
}

.btn a{
    position:relative;
    width:220px;
    padding:15px 0;
    display:inline-block;
    border:1px solid #00ffff;
}

.btn a::before{
    content:"";
    position:absolute;
    inset:-6px 6px 6px -6px;
    border:1px solid #ff00ff;
    pointer-events:none;
}

.btn a:hover{
    background: #1b202b;
    box-shadow:
        0 0 10px #00ffff,
        0 0 20px #ff00ff;
}

.img-box{
    overflow:hidden;
    aspect-ratio:1;
}

.img-box img{
    width:110%;
    height:110%;
    object-fit:cover;
    transition:.5s;
}

.img-box:hover img{
    transform:scale(1.05);
}

.pink {
    color: #ff00ff;
}

.skyblue {
    color: #00ffff;
}

/* ===============================
    Header
=============================== */

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    transition:.4s;
    z-index:1000;
}

.header.small{
    height:65px;
    padding:0 40px;
}

.header.small .logo{
    width:180px;
}

main{
    padding-top:90px;
}

.logo{
    width:250px;
}

.nav ul{
    display:flex;
    align-items:center;
    gap:40px;
}

.nav a{
    font-size:.8rem;
    letter-spacing:.15em;
}

/* humberger menu */
.hamburger{
    display:none;
    width:42px;
    height:42px;
    background:none;
    border:none;
    cursor:pointer;
    position:relative;
    z-index:1001;
}

.hamburger span{
    display:block;
    height:2px;
    background:#fff;
    margin:8px 0;
    transition:.3s;
}

.hamburger.open span:nth-child(1){

    transform:
        translateY(10px)
        rotate(45deg);

}

.hamburger.open span:nth-child(2){

    opacity:0;

}

.hamburger.open span:nth-child(3){

    transform:
        translateY(-10px)
        rotate(-45deg);

}

/* スクロール後のナビ */
.header.small .nav{

    position:fixed;
    top:0;
    right:0;

    width:40%;
    min-width:350px;
    height:100vh;

    background:rgba(27,32,43,.97);

    transform:translateX(100%);
    opacity:0;
    visibility:hidden;

    transition:none;

}

.header.small .nav ul{
    border-top:1px solid rgba(255,255,255,.2);
    margin-top:70px;
    padding-top: 40px;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    text-align: center;
    
}

.header.small .nav ul li{
    display: block;
    width: 100%;
}

.header.small .nav a{
    font-size:1.2rem;
    letter-spacing:.1em;
    display:block;
    width:100%;
    margin-top: -40px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom:1px solid rgba(255,255,255,.2);
}

.header.small .nav a:hover{
    color: #FFF;
    background-image: linear-gradient(to right, #ff00ff, #00ffff);
    opacity: 1;
}

.header.small .hamburger{
    display:block;
}

.header.small .nav.open{

    transform:translateX(0);
    opacity:1;
    visibility:visible;

}

body.menu-open{

    overflow:hidden;

}

/* bg */

.bg-video{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;

    opacity:.6;

    pointer-events:none;
}

.bg-overlay{
    position:fixed;
    inset:0;

    background:#1b202b;

    opacity:.85;

    z-index:-1;

    pointer-events:none;
}

/* animation */

/*
    観測対象(.fade-left/.fade-right/.fade-up)自体はopacityのみを変化させる。
    実際の移動(transform)は中の .fade-inner が担当する。
    height/widthを100%にして、img-box等の height:100% の連鎖が
    途切れないようにしている（これが崩れると画像の高さがズレる）。
*/

.fade-left,
.fade-right,
.fade-up{

    opacity:0;
    transition:opacity .9s;

}

.fade-left.show,
.fade-right.show,
.fade-up.show{

    opacity:1;

}

.fade-inner{

    display:block;
    width:100%;
    height:100%;

    transition:transform .9s;
    will-change:transform;

}

.fade-left .fade-inner{

    transform:translateX(-80px);

}

.fade-right .fade-inner{

    transform:translateX(80px);

}

.fade-up .fade-inner{

    transform:translateY(80px);

}

.fade-left.show .fade-inner,
.fade-right.show .fade-inner,
.fade-up.show .fade-inner{

    transform:none;

}

/* ===============================
    Hero
=============================== */

.hero{
    width:100%;
    overflow:hidden;
}

.hero-slider{
    position:relative;
    width:100%;
    aspect-ratio:16 / 7;
}

.hero-slide{
    position:absolute;
    inset:0;

    opacity:0;

    transition:
        opacity 1.5s ease,
        transform 6s linear;

    transform:scale(1);
}

.hero-slide.active{
    opacity:1;
    transform:scale(1.05);
}

.hero-slide img{
    width:100%;
    height:100%;

    object-fit:cover;

    cursor:zoom-in;
}

/* ===============================
    Lightbox（画像クリックで拡大）
=============================== */

.lightbox{

    position:fixed;
    inset:0;

    background:rgba(27,32,43,.95);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    cursor:pointer;

    z-index:99998;

}

.lightbox.open{

    opacity:1;
    visibility:visible;

}

.lightbox img{

    width:auto;
    height:auto;

    max-width:90vw;
    max-height:90vh;

    object-fit:contain;

    box-shadow:0 0 40px rgba(0,0,0,.6);

    cursor:default;

}

.lightbox-close{

    position:absolute;
    top:24px;
    right:32px;

    width:44px;
    height:44px;

    border:none;
    background:none;

    color:#fff;
    font-size:2.2rem;
    line-height:1;

    cursor:pointer;
    z-index:100000;

    transition:.2s;

}

.lightbox-close:hover{
    opacity:.6;
}

.lightbox-arrow{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:56px;
    height:56px;

    border:none;
    background:none;

    color:#fff;
    font-size:3rem;
    line-height:1;
    font-weight:bold;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    z-index:100000;

    transition:.2s;

}

.lightbox-arrow:hover{
    opacity:.6;
}

.lightbox-arrow.prev{ left:20px; }
.lightbox-arrow.next{ right:20px; }

/* ===============================
    ABOUT
=============================== */

.about{
    margin:auto;
}

.about-text{
    text-align: center;
    align-items:center;
    display:grid;
    grid-template-columns:1fr 500px;
    grid-template-areas:
        "text image"
        "button button";
    gap:60px 80px;

}

.text-box{
    grid-area:text;
}

.about .img-box{
    grid-area:image;
}

.about .btn{
    grid-area:button;
    text-align:center;
    margin-top:20px;
}

/* ===============================
    Archive
=============================== */

.archive{
    margin:auto;
}

.archive-wrap{
    overflow:hidden;
    width:100%;
    max-width:100vw;
}

.archive-track{
    display:flex;
    width:max-content;
    gap:24px;
    animation:scroll 35s linear infinite;
}

.archive article{
    flex:none;
    width:320px;
}

.archive-track:hover{
    animation-play-state:paused;
}

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

to{
transform:translateX(calc(-324px * 4));
}
}

/* ===============================
    Works
=============================== */

.works{
    margin:auto;
}

.works-grid{
    display:grid;
    grid-template-columns:58% 20% 20%;
    gap:20px;
    align-items:stretch;
}

.works-grid li{
    overflow:hidden;
}

.works .img-box{
    width:100%;
    height:100%;
    aspect-ratio:auto;
}

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

.large{
    grid-row:1 / span 2;
}

.medium{
    grid-column:2 / span 2;
}

/* ===============================
    Contact
=============================== */

.contact{
    text-align:center;
}

.contact-icon{
    width:auto;
}

.contact-icon a{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:25px;
}

.contact-icon img{
    width:150px;
}

.contact-icon p {
    font-size: 3rem;
    font-weight: bold;
    color:#fff;
    letter-spacing: 1rem;
    text-shadow:
    -2px 0 #ff00ff,
     2px 0 #00ffff;
}

.contact-text{
    margin-top:40px;
    font-size:.9rem;
}

/* ===============================
    SNS
=============================== */

.sns{
    padding:80px 0;
}

.sns-list{
    display:flex;
    justify-content:center;
    gap:60px;
}

.sns-list a{
    display:flex;
    align-items:center;
    gap:10px;
}

.sns-list img{
    width:42px;
    height:42px;
}

/* ===============================
    Footer
=============================== */

/* Pagetop */
.pagetop{

    position:fixed;

    right:40px;
    bottom:40px;

    width:70px;
    height:70px;

    border:1px solid #00ffff;
    border-radius:50%;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    backdrop-filter:blur(10px);

    color:#fff;

    opacity:0;
    visibility:hidden;

    transition:.4s;

    z-index:900;

}

.pagetop.show{

    opacity:1;
    visibility:visible;

}

@media (hover:hover) and (pointer:fine){

.pagetop:hover{

    color:#fff;

    border-color:#ff00ff;

    box-shadow:
        0 0 12px #ff00ff,
        0 0 25px #00ffff;

    transform:
        translateY(-5px)
        rotate(8deg);

}

}

/* Footer */

.footer{
    padding:120px 0 40px;
    text-align:center;
}

.footer-logo{
    width:400px;
    margin:0 auto 40px;
}

.footer-nav ul{
    display:flex;
    justify-content:center;
    gap:40px;
    padding-bottom:120px;    
    margin-bottom:40px;    
    border-bottom: 1px solid #7f8ba0;
}

.copyright{
    font-size:.8rem;
    opacity:.7;
}

/* ===============================
    SP
=============================== */

@media(max-width:768px){
    
body,.contact-text {
    font-size: .8rem;
}

.section {
    padding: 80px 0;
}

.header {

    padding:0 20px;

}

.about-text{

    grid-template-columns:1fr;

    grid-template-areas:

        "text"
        "image"        
        "button";

}

.works-grid{

    grid-template-columns:1fr;

}

.large,
.medium{

    grid-row:auto;
    grid-column:auto;

}

.sns-list{

    flex-wrap:wrap;

    gap:30px;

}

.header.small .nav{

    width:100%;
    min-width:0;

}

main{
    padding-top:65px;
}

.hero-slider{
    aspect-ratio:3 / 4;
}

.hero-slide img{
    object-fit:cover;
}

.img-box{

    transition:transform .2s;

}

.works-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

}

.large{

    grid-column:1 / 3;
    aspect-ratio:16/9;

}

.medium{

    grid-column:1 / 3;
    aspect-ratio:4/4;

}

.small{

    aspect-ratio:1;

}

.section-title{

    font-size:2rem;
    letter-spacing:.08em;
    margin-bottom:30px;

}

.section-subtitle{

    margin-top:-20px;
    font-size:.8rem;

}

.nav{

    position:fixed;
    top:0;
    right:0;

    width:100%;
    height:100vh;

    transform:translateX(100%);
}

.nav.open{

    transform:translateX(0);

}

.contact-icon img{
    width:100px;
}

.contact-icon p {
    font-size: 1.8rem;
    letter-spacing: .5rem;
}

.contact-text{
    margin-top:40px;
    font-size:.7rem;
}

.sns{
    padding:40px 0;
}

.sns-list{
    display:flex;
    flex-wrap:wrap;

    justify-content:center;

    gap:20px;
}

.sns-list li{
    width:calc(50% - 10px);
}

.sns-list a{
    display:flex;

    justify-content:center;
    align-items:center;
    flex-direction:column;

    gap:10px;

    padding: 20px 0;

    text-align:center;
}

.sns-list img{
    width:42px;
    height:42px;
}

.pagetop{
    right:20px;
    bottom:20px;

    width:60px;
    height:60px;
}

.footer{
    padding: 80px 0 0px;
    text-align:center;
}

.footer-logo{
    width:60%;
    margin:0 auto 40px;
}

.footer-nav ul{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:0;
    width:90%;
    margin:0 auto 40px;
    padding-bottom:60px;
}

.footer-nav li{
    width:100%;
}

.footer-nav a{
    display:block;
    padding:18px 10px;
    text-align:center;
}

}
/* ===============================
    投稿本文（ブロックエディタ）用の装飾クラス
    ブロックの「追加CSSクラス」に入力して使う
=============================== */

/* 見出し(H2)ブロックに"section-title"を付けると、CONCEPTのようなネオン見出しになる */
.single-works-body .section-title,
.wp-block-heading.section-title{
    margin-top:80px;
    margin-bottom:40px;
}

/* 区切り線(Separator)ブロックに"content-divider"を付けると使える */
.wp-block-separator.content-divider{
    border:none;
    height:1px;
    background:#7f8ba0;
    max-width:700px;
    margin:60px auto;
}

/* ===============================
    ブロックスタイル（見出しツールバーの「スタイル」から選べるもの）
=============================== */

.is-style-neon-title{
    font-size:3.6rem;
    font-weight:bold;
    letter-spacing:.2em;
    text-align:center;
    text-transform:uppercase;
    color:#fff;
    text-shadow:
        -2px 0 #ff00ff,
         2px 0 #00ffff;
    margin-top:80px;
    margin-bottom:40px;
}

.is-style-content-divider{
    border:none;
    height:1px;
    background:#7f8ba0;
    max-width:700px;
    margin:60px auto;
}


/* ===============================
    Hero Slider ドットナビゲーション
=============================== */

.hero-slider{
    position:relative; /* すでにposition:relativeのはずだが念のため */
}

.hero-slider-dots{

    position:absolute;
    left:0;
    right:0;
    bottom:20px;

    display:flex;
    justify-content:center;
    gap:10px;

    z-index:10;

}

.hero-slider-dot{

    width:10px;
    height:10px;
    border-radius:50%;

    border:1px solid #fff;
    background:transparent;

    padding:0;
    cursor:pointer;

    transition:.3s;

}

.hero-slider-dot.active{

    background:#ff00ff;
    border-color:#ff00ff;
    box-shadow:0 0 8px #ff00ff;

}

/* ===============================
    Works Slider（メイン画像＋サムネイル）
=============================== */

.works-slider{
    margin-bottom:40px;
}

.works-slider-main{
    position:relative;
    width:100%;
    aspect-ratio:297 / 210; /* A4横比率 */
    overflow:hidden;
    background:#000;
}

.works-slider-main img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;
    transition:opacity .5s ease;

    cursor:zoom-in;
}

.works-slider-main img.active{
    opacity:1;
}

.works-slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:40px;
    height:40px;

    border:none;
    background:none;

    color:#000;
    font-size:2.4rem;
    line-height:1;
    font-weight:bold;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    z-index:5;

    transition:.2s;
}

.works-slider-arrow:hover{
    opacity:.6;
}

.works-slider-arrow.prev{ left:20px; }
.works-slider-arrow.next{ right:20px; }

.works-slider-thumbs-wrap{
    position:relative;
    margin-top:12px;
}

.works-slider-thumbs{
    display:flex;
    gap:12px;
    padding:0 40px;

    overflow-x:auto;
    scroll-behavior:smooth;
}

.works-thumbs-arrow{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:32px;
    height:32px;

    border:none;
    background:none;

    color:#fff;
    font-size:2rem;
    line-height:1;
    font-weight:bold;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    z-index:5;

    transition:.2s;

}

.works-thumbs-arrow:hover{
    opacity:.6;
}

.works-thumbs-arrow.prev{ left:0; }
.works-thumbs-arrow.next{ right:0; }

.works-slider-thumb{
    flex:0 0 calc(20% - 10px);
    aspect-ratio:16 / 9;

    padding:0;
    border:2px solid transparent;
    background:none;

    overflow:hidden;
    cursor:pointer;

    opacity:.55;
    transition:.3s;
}

.works-slider-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.works-slider-thumb:hover{
    opacity:.85;
}

.works-slider-thumb.active{
    border-color:#ff00ff;
    opacity:1;
}

@media(max-width:768px){

    .works-slider-thumb{
        flex:0 0 calc(38% - 8px);
    }

    .works-slider-arrow{
        width:38px;
        height:38px;
        font-size:1.4rem;
    }

}

/* ===============================
    実績ページ本文のフォント（読みやすいゴシック体に）
=============================== */

.single-works-body-gothic{
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
}

/* ===============================
    Contactページ
=============================== */

.contact-page{
    text-align:center;
}

.contact-page-lead{
    max-width:600px;
    margin:0 auto 60px;
    font-size:.9rem;
}

.contact-page-form{
    max-width:600px;
    margin:0 auto;
    text-align:left;
}

/* Contact Form 7 のフォーム部品をサイトのデザインに合わせる */

.contact-page-form .wpcf7-form p{
    margin-bottom:24px;
}

.contact-page-form label{
    display:block;
    margin-bottom:8px;
    font-size:.85rem;
    letter-spacing:.05em;
}

.contact-page-form input[type="text"],
.contact-page-form input[type="email"],
.contact-page-form input[type="tel"],
.contact-page-form textarea{

    width:100%;
    padding:14px 16px;

    background:rgba(255,255,255,.04);
    border:1px solid #7f8ba0;

    color:#fff;
    font-family:inherit;
    font-size:1rem;

    transition:.3s;

}

.contact-page-form input[type="text"]:focus,
.contact-page-form input[type="email"]:focus,
.contact-page-form input[type="tel"]:focus,
.contact-page-form textarea:focus{

    outline:none;
    border-color:#00ffff;
    box-shadow:0 0 8px rgba(0,255,255,.4);

}

.contact-page-form textarea{
    min-height:160px;
    resize:vertical;
}

.contact-page-form .wpcf7-submit{

    position:relative;
    width:220px;
    padding:15px 0;
    margin-top:10px;

    display:block;

    background:none;
    border:1px solid #00ffff;
    color:#fff;

    font-family:inherit;
    font-size:1rem;
    letter-spacing:.1em;

    cursor:pointer;
    transition:.3s;

}

.contact-page-form .wpcf7-submit:hover{
    background:#1b202b;
    box-shadow:
        0 0 10px #00ffff,
        0 0 20px #ff00ff;
}

.contact-page-form .wpcf7-spinner{
    margin-left:16px;
}

.contact-page-form .wpcf7-not-valid-tip{
    color:#ff6b9d;
    font-size:.8rem;
    margin-top:6px;
}

.contact-page-form .wpcf7-response-output{
    border-radius:0;
    border-color:#7f8ba0;
    color:#fff;
    margin-top:24px;
}

/* ===============================
    ジャンル・制作内容・使用ソフト欄の横はみ出し対策
    （flexアイテムはデフォルトで縮まないため、はみ出しの原因になる）
=============================== */

.works-detail div,
.about-skills div{
    min-width:0;
}

.works-detail p,
.about-skills p{
    min-width:0;
    word-break:break-word;
    overflow-wrap:break-word;
}