@charset "UTF-8";

/* ====================
common
======================= */

html {
    font-size: 62.5%;
}

body {
    font-family:"Helvetica Neue","dnp-shuei-gothic-kin-std",sans-serif;
    font-style: normal;
    color: #004BED;
    background-color: #F3F3F3;
    line-height: 1.5;
}

.textBoxTitle,
.textBoxWork,
.bannerTitle,
.aboutTitle,
.aboutText {
    font-family: "dnp-shuei-gothic-kin-std";
}

img {
    max-width: 100%;
    height: auto;
}

.section {
    padding: 140px var(--contentPadding) 0;
    max-width: 769px;
    margin: 0 auto;
}

.sectionTitle {
    font-size: 2.6rem;
    font-weight: 500;
}

.worksTitle {
    font-size: 1.4rem;
    font-weight: 500;
}

.pcBr {
    display: none;
}

/* ====================
common pc
======================= */
@media screen and (min-width:769px) {

    .section {
        padding: 340px var(--contentPaddingPc) 0;
        max-width: 2560px;
    }

    .sectionTitle {
        font-size: 6.6rem;
    }
    
    .pcBr {
        display: block;
    }

    .spBr {
        display: none;
    }
    
}

/* ==============================
header
================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 45px var(--contentPadding) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: transparent;
}

.headerLogoSp img {
    width: 37px;      /* 幅を指定 */
    height: auto;      /* 高さは自動で縦横比維持 */
    max-width: 100%;   /* 画面幅より大きくならないように */
    object-fit: contain; /* 枠内で縦横比を維持 */
}
    
.headerLogoPc {
    display: none; /* SPでは非表示 */
}

/* メニューボタン */  
.menuBtn {
    height: auto;
    display: flex;
    width: 31px;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

/* =====================
header pc
========================*/

@media screen and (min-width: 769px) {
    .headerLogoPc {
        display: block;
        width: 77px;
        height: 77px;
    }

    .headerLogoPc img {
        width: 77px;
        height: 77px;
        object-fit: contain;
        transition: transform 0.3s ease;
    }
    /* ホバーで拡大 */
    .headerLogoPc img:hover {
        transform: scale(1.1);
    }

    .headerLogoSp {
        display: none; /* SPロゴ非表示 */
    }

    #works, #about, #contact {
        scroll-margin-top: -270px;
    }
}

/* =========================
nav
========================= */
nav {
    padding: 40px var(--contentPadding);
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #004BED;
    color: #fff;
    transition: transform 0.4s ease;
    z-index: 999;
}

nav.active {
    transform: translateX(-100%);
}

.navBox {
    padding-top: 90px;
    display: flex;
    justify-content: space-between;
}

.nav__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topBtn {
    color: #F3F3F3;
    text-align: right;
    font-size: 3.4rem;
    font-weight: 400;
}

.navBtn {
    width: 37px;
}

.navLogo {
    width: 160px;
    height: 160px;
}

.nav__list {
    list-style: none;
    text-align: center;
}

.nav__item {
    padding-top: 90px;
}

.nav__item:first-child {
    padding-top: 0;
}

.navTitle {
    color: #F3F3F3;
    font-size: 1.8rem;
}

.navTitle:hover {
    opacity: 0.7;
}

/* ========================
PCスタイル
======================== */
@media screen and (min-width: 769px) {
    
    /* ハンバーガーを消す */
    .navBtn { 
        display: none;
    }
    
    /* ナビを固定配置に変更 */
    nav {
        position: static;
        background: transparent;
        transform: none; /* スライドイン解除 */
        height: auto;
        display: flex;
        justify-content: flex-end; /* 右寄せ */
        align-items: center;
        padding: 0;
    }
    
    .nav__list {
        display: flex;
        gap: 40px;          /* 間隔 */
    }
    
    .nav__item {
        padding: 0;
    }
    
    .navTitle {
        font-size: 1.6rem;
        font-weight: 500;
        color: #004BED;
        text-decoration: none;
    }
    
    .navTitle:hover {
        opacity: 0.7;
    }

    .navLogo {
        display: none;
    }

    .navBox {
        padding-top: 0;
    }

    .topBtn {
        display: none;
    }
}

/* =====================
main visual 
========================*/
.mainVisualSp {
    padding-top: 180px;
}

.mainVisualPc {
    display: none;
}


/* =====================
main visual pc
========================*/
@media screen and (min-width:769px) {

    .mainVisualSp {
        display: none;
    }
    
    .mainVisualPc {
        display: block;
        padding-top: 300px;
    }
}

/* =====================
works
========================*/
.imgWrapper {
    overflow: hidden;       /* 拡大してもはみ出さない */
    position: relative;     /* 必要に応じて */
}

.worksImg {
    width: 100%;
    height: auto;
    object-fit: cover;      /* 画像を枠いっぱいに収める */
    transition: transform 0.3s ease;
    padding-top: 60px;
}

.worksImgPc {
    display: none;
}

.imgWrapper:hover .worksImg {
    transform: scale(1.1);  /* 枠内で拡大 */
}

.textInfoNumber {
    display: flex;
    padding-top: 40px;
    justify-content: space-between;
}

.worksNumber,.bannerNumber,.bannerYear,.bannerWork {
    font-size: 1.4rem;
    font-weight: 400;
}

.textBoxText {
    padding-top: 20px;
}

.textBoxTitle {
    font-size: 2rem;
    font-weight: 500;
}

.textBoxWork {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2;
}

.textBoxEng {
    color: rgba(0, 75, 237, 0.40);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8; 
    padding-top: 50px;
}

.button {
    margin-left: auto;    /* 左の余白を自動にして右端に寄せる */
    margin-top: 25px;
    width: fit-content;   /* ボタン幅に合わせる */
}

.viewMore {
    display: inline-block;
    padding: 9px 30px;
    border-radius: 30px;
    border: 1px solid #004BED;
    color: #004BED;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    font-size: 1.4rem;
    font-weight: 400;
}

.viewMore:hover {
    background: #004BED;
    color: #fff;
}  

.bannerTitle {
    font-family: "dnp-shuei-gothic-kin-std";
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2;
}

/* =====================
works pc
========================*/
@media screen and (min-width:769px) {

    .worksBoxItem {
        display: flex;
        justify-content: space-between;
        gap: 140px;
        padding-top: 210px;
    }

    .worksBoxItem:first-child {
        padding-top: 70px;
    }

    .imgFlex {
        flex: 2;
        display: flex;
    }

    /* imgWrapper を Flexbox アイテムとして設定 */
    .imgWrapper {
        display: flex;
        width: 100%; /* 親要素の幅いっぱいに広げる */
        height: 100%; /* 親要素の高さいっぱいに広げる */
    }
    
    .worksImg {
        display: none;
    }

    .worksImgPc {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;      /* 画像を枠いっぱいに収める */
        transition: transform 0.3s ease;
    }

    .imgWrapper:hover .worksImgPc {
        transform: scale(1.1);  /* 枠内で拡大 */
    }
    

    .workRightBox {
        flex: 2;
    }

    .worksNumber {
        font-size: 1.6rem;
    }

    .textBoxTitle {
        font-size: 2.9rem;
    }

    .textBoxWork {
        font-size: 1.6rem;
    }

    .textBoxEng {
        padding-top: 120px;
        width: 330px;
    }

    .textInfoNumber {
        padding-top: 0;
    }

    .bannerBox {
        display: flex;
        padding-top: 230px;
        gap: 30px;
    }

    .bannerNumber {
        padding-top: 20px;
    }

    .bannerYear {
        display: none;
    }

    .bannerTitle {
        font-size: 2.2rem;
    }

    .padding {
        padding-top: 0;
    }

}

/* =====================
artwork
========================*/
.artworkImg {
    padding-top: 20px;
}

.artworkBtn {
    text-align: center;
    width: auto;
}
/* =====================
artwork　pc
========================*/
@media screen and (min-width:769px) {
    .artworkImgBox {
        display: flex;
        gap: 15px;
        justify-content: center; /* 画像を中央に配置 */
        align-items: stretch; /* 画像を垂直方向の中央に配置 */
    }
    
    .artworkImg {
        /* 画像のサイズを固定する */
        max-width: 21vw;
        height: auto; /* 高さは元の比率を維持 */
    }
    
   .artworkBtn {
        margin-top: 70px;
   }
}

/* =====================
about
========================*/
.aboutTitle {
    font-family: "dnp-shuei-gothic-kin-std";
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    padding-top: 50px;
}

.aboutText {
    font-family: "dnp-shuei-gothic-kin-std";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2; 
    padding-top: 25px;
}

/* =====================
about box
========================*/
@media screen and (min-width:769px) {
    .aboutTextBox {
        display: flex;
        justify-content: space-between;
        gap: 110px;
        padding-top: 110px;
    }

    .aboutTitle {
        font-size: 3.4rem;
        font-weight: 700;
        flex: 3;
        line-height: 2;
        padding-top: 25px;
    }

    .aboutText {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2.5; /* 222.222% */
        flex: 3;
    }

    .aboutBtn {
        padding-top: 35px;
    }
}
/* =====================
contact
========================*/

.address {
    display: block;
    font-size: 2.6rem;
    font-weight: 400;
    text-decoration: underline;
    padding-top: 35px;
    text-align: center;
}

/* =====================
contact　pc
========================*/
@media screen and (min-width:769px) {

    .address {
        font-size: 6rem;
        font-weight: 400;
        padding-top: 100px;
    }
}
/* =====================
footer
========================*/

.footer {
    background: #004BED;
    margin-top: 150px;
    padding: 30px var(--contentPadding) 15px;
}

.footerContent {
    display: flex;
    justify-content: space-between;
}

.footerLogo {
    width: 149px;
    height: 149px;
}

.footerLogoPc {
    display: none;
}

.footerBox {
    text-align: right;
}

.footerList {
    padding-top: 85px;
}

.footerBtn {
    color: #F3F3F3;
    text-align: right;
    font-size: 3.4rem;
    font-weight: 400; 
    text-decoration: none; /* 下線をなくす */
    transition: color 0.3s ease; /* スムーズに色が変わるようにする */
}

.footerBtn:hover {
    color: #c9c9c9; /* ホバー時の色 */
}

.footerItem {
    display: block;
    color: #F3F3F3;
    font-size: 1.6rem;
    font-weight: 400;
    padding-top: 40px;
    text-align: right;
    text-decoration: none; /* 下線をなくす */
    transition: color 0.3s ease; /* スムーズに色が変わるようにする */
}

/* マウスがホバーした時のスタイル */
.footerItem:hover {
    color: #c9c9c9; /* ホバー時の色 */
}


.copy {
    color: #F3F3F3;
    text-align: right;
    font-size: 2rem;
    font-weight: 400;
    padding-top: 90px;
}

/* =====================
footer pc
========================*/
 @media screen and (min-width:769px) {

    .footer {
        margin-top: 300px;
        padding: 40px 2.4%;
    }

    .footerContent {
        display: flex;
        flex-direction: column; /* 縦に並べる */
        justify-content: space-between;
        height: 100%; /* 必要なら親に高さ指定 */
    }
        
    .footerPcTop,.footerPcBottom {
        display: flex;
        justify-content: space-between; /* 左右に振り分け */
    }

    .footerPcBottom {
        align-items: baseline;
        padding-top: 170px;
    }

    .footerLogo {
        display: none;
    }

    .footerLogoPc {
        display: block;
        width: 289px;
        height: 289px;
    }
    
    .footerList {
        display: flex;
        gap: 40px;
        padding-top: 0;
    }

    .footerItem {
        font-size: 1.8rem;
        padding-top: 0;
        color: #F3F3F3; /* 現在の色 */
    }

    .footerBtn {
        display: none;
    }

    .footerBtnPc {
        color: #F3F3F3;
        font-size: 6.8rem;
        font-weight: 400;
        display: block;
        text-decoration: none; /* 下線をなくす */
        transition: color 0.3s ease; /* スムーズに色が変わるようにする */
    }

    .footerBtnPc:hover {
        color: #c9c9c9; /* ホバー時の色 */
    }


    .footerPcTop,.footerPcBottom {
        display: flex;
        justify-content: space-between;
    }

    .copy {
        padding-top: 0;
    }
    
}