@charset "UTF-8";

/* 共通 */

html {
    scroll-behavior: smooth;

}


h1,h2,h3,h4,ul{
    margin: 0;
    padding: 0;

}

body{
    margin: 0;
    font-size: clamp(18px,2vw,20px);
    background-image: url(../img/bgi.png);
    background-repeat: no-repeat;
    background-size: cover;                
    background-position: right center;    
    background-attachment: fixed; 
    min-height: 100%;    /* ← 画面全体に表示されるように */

} 

body::before {
    content: "";
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(175, 238, 255, 0.297);  */
    background:linear-gradient(90deg,#fff,rgba(175, 238, 255, 0.297));
    z-index: -2; 
}

.w-container{
    width: min(92%,1166px);
    margin: auto;

}

.w-container-2{
    width: min(70%,1000px);
    margin: auto;
    
}

a{
    text-decoration: none;
    margin: 0;
    padding: 0;
    color: inherit;

}

li{
    list-style-type: none;
    font-family: "Noto Serif JP", serif;

}

p{
    font-family: "Noto Serif JP", serif;
    color: #323232;
    margin: 0;
    padding: 0;

}

h2,h3{
    font-family: "Noto Serif JP", serif;
    color: #296fbf; 

}

img{
    display: block;

}

/* header */
.header{
    height: 124px;

}

.header-container{
    display: flex;
    justify-content:space-between;
    align-items: start;
    height: auto;
    margin-top: 25px;

}

/* ロゴ */
.site img{
    width: clamp(50px,2vw,100px);
    height: auto;

}

.site a {
    display:block; 

}


/* navbtn */
.navbtn{
    padding: 0;
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #aaa;
    font-size: 30px;

}

.open .navbtn{
    z-index: 110;
    color: #fff

}

.navbtn .fa-bars{
    display: revert;

}

.open .navbtn .fa-bars{
    display: none;

}

.navbtn .fa-times{
    display: none;

}

.open .navbtn .fa-times{
    display: revert;

}

#sp_navi_check{
    display: none;

}

/* sp 767以下の場合 */
@media(max-width:767px){
    .nav{
        position: fixed;
        inset: 0 -100% 0 100%;
        z-index: 100;
        background-color: #4e483ae6;
        transition: transform 0.3s;

    }

    .nav ul{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 40px;
        color: #fff;
        z-index: 300;

    }

    .open .nav{
        transform: translate(-100%,0);

    }

    .open body{
        position: fixed;
        overflow: hidden;

    }

}


/* ｐｃ768以上の場合 */
@media(min-width:768px){
    .navbtn{
        display: none;

    }

    .nav ul{
        display: flex;
        gap:40px;
        color: #707070;

    }
}


/* hero 動き */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 2s ease, transform 2s ease;

}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);

}

/* 青の話 */
.hero{
    margin-top: 70px;

}


.hero p{
    line-height:2;
    margin-top: 30px;
    font-size: clamp(14px,2vw,18px);

}

/* 青 */
.big-font{
    font-size: clamp(30px,2vw,40px);
    color: #043795;

}

.cc{
    color: #043795;
}

/* About */
.title {
    margin-top: 4em;
    margin-bottom: 80px;
    /* line-height:2; */
    position: relative;

}

.title::after{
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: -23%;
    left: -50%;
    background-color:#296fbf ;

}

.title1{
    margin-top: 20%;

}

.title h2 {
    font-size: clamp(24px,2vw,32px);

}

.about h2{
    margin-top:40px ;
    font-size: clamp(18px,2vw,24px);

}

.about p{
    line-height: 1.5;
    margin-top: 5px;
    font-size: clamp(14px,2vw,16px);

}

/* .gallery */
.title2{
    margin-bottom: 1em;

}

.title2 p{
    font-size: 0.8em;
    margin-top: 1em;
}



/* index-gallery */
.gallery-container{
    display: flex;
    flex-direction: column;
    align-items: center;

    
}

.gallery img{
    width: clamp(300px,2vw,600px);
    border-radius: 8px;

}

.gallery{
    display: block;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 40px;
    transition: transform 0.5s ease; /* スムーズなアニメーション */

}

.gallery:hover {
  transform: scale(1.1); /* 1.1倍に拡大 */
}

.gallery p{
    color: #296fbf; 
    font-weight:bold;
    margin-top:2vh;
    
}

/* ｐｃ768以上の場合 */
@media(min-width:768px){

    .gallery-container {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 20px;
        max-width: 1000px; /* コンテナの最大幅を設定 */
        margin-left: auto;
        margin-right: auto;

    }


    .gallery img {
        width: 100%;  /* 画像の幅を親の90%に縮小 */
        max-width: 300px; /* 最大幅を300pxに制限 */
        height: auto;
        display: block;
        margin: 0 auto; /* 画像を中央寄せ */

    }

}

/* light-box */

.lightbox-overlay {
  /* 初期状態では非表示 */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s; /* フェードイン・アウトのアニメーション */

  /* オーバーレイの基本スタイル */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 半透明の背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* :target擬似クラスで表示状態を切り替える */
.lightbox-overlay:target {
    visibility: visible;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.8); /* ポップアップ時の初期サイズ */
    transition: transform 0.3s ease-out;
    background-color: #ffffff;

}


.lightbox-content p {
    font-size: 0.8em;
    color: #043795;
    padding: 10px;

}

.lightbox-overlay:target .lightbox-content {
  transform: scale(1); /* ポップアップ時に元のサイズに */
}

.lightbox-content img {
    display: block; /* 余白をなくす */
    max-width: 100%;
    height: auto;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 40px;
    text-decoration: none;
    line-height: 1;
    z-index: 1001; /* 画像より手前に表示 */
}

.lightbox-close:hover {
    color: #ccc;
}

/* オーバーレイクリックで閉じるための設定 (HTMLのa href="#_") */
    .lightbox-overlay .lightbox-close-area { /* オーバーレイ全体をクリックで閉じるための要素を別途用意する場合 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

/* CSSは上記の基本サンプルに加えて以下を追加・変更 */
/* .lightbox-caption {
    color: #333;
    text-align: center;
    margin-top: 10px;
    font-size: 0.6em;

} */
/* その他のCSSは上記の基本サンプルを参照 */

.gallery1 {
    display: flex;
    flex-direction: column;
    align-items: center;  /* 中央揃え */
    gap: 1.5em;
    }

.gallery1 img {
    width: 100%;         /* スマホ画面に収まるように調整 */
    height: auto;
}

.gallery1 p{
    margin-top: 1em;
    text-align: center;
    color: #043795;

}




/* pc */
@media(min-width:768px){
    .gallery1{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 2em;
        width: 100%;
        box-sizing: border-box;

    }

    .gallery1 img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }
    }

/* light-box end */

/* work-gallery */
.work-img {
    width: 100%;
    width: (400px,2vw.500px);  /* PCでの最大表示サイズ */
    height: auto;

}

.work-container{
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;

}

.work-container img {
    width: 100%;
    height: auto;
    display: block;

}

.work-container h2{
    font-size: clamp(20px,2vw,30px);
    margin: 20px 0;

}

.work-container h3{
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: clamp(18px,2vw,20px);

}

.work-container p{
    line-height: 2em;
    font-size: clamp(14px,2vw,16px);
    margin-bottom: 30px;

}

.coco-sonota{
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;

}

.kotyou{
    font-weight: bold;

}

.work-posters{
    display: flex;
    flex-direction: column;
    gap: 2em;

}

.rogo{
    margin-top: 3em;
    margin-bottom: 1em;

}


@media(min-width:768px){
    .work-container{
        flex-direction: row;
        gap: 72px;
        align-items: center;

    }

    /* .work-container.reverse{
        flex-direction: row-reverse;

    } */

    .work-container h2{
        margin-top: 0;

    }

    .work-posters{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 12px;
        margin-top:2em ;

}

}

.me {
    text-align: center;
    cursor: pointer;
    background-color: #296fbf;
    color: #fff;
    padding: 12px 24px;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
    transition: background-color 0.3s;
    font-family: "Noto Serif JP", serif;
    margin-top: 3em;
    
}

.me:hover {
    background-color: #043795;
}

/* work-gallery end */

/* gallery.html */
.grid{
    display: flex;

}

/* ｐｃ768以上の場合 */
@media(min-width:768px){
    .grid{
        display: grid;
        flex-direction: row;
    }
}



/* footer */
.footer-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 120px;

}

.footer-container img{
    width: 50px;
    height: auto;

}

.footer-container ul{
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;

}

.footer-container ul li{
    color: #515151;
}


#copyright{
    text-align: center;
    margin: 40px 0;

}

/* ｐｃ768以上の場合 */
@media(min-width:768px){
    .footer-container{
        gap: 40px;
        align-items: center;


    }

    .footer-container ul{
        flex-direction: row;
        gap: 15px;

}

}

.lightbox-content{
    text-align: center;
}

#toTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #296fbf;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    z-index: 250;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

#toTopBtn:hover {
    background-color: #043795;
}