@charset "UTF-8";

html{
    font-size: 62.5%;
    scroll-behavior: smooth;

}
body{
    font-family:
    "Noto Sans JP",
    "Climate Crisis",
    sans-serif;
    font-style: normal;
    color: black;
    background-color: white;
    line-height: 1;
}
img{
    max-width: 100%;
    height: auto;
}
a {
  position: relative;
  overflow: hidden;
}
a::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
a:hover::after{
    opacity: 1;
}
.nav__cell a::after,
h1 a::after{
    display: none;
}

.button::after{
    background: rgba(255, 255, 255, 0.25);
    transition: opacity 0.25s ease;

}



/* ================  preload  =============== */

.preloader{
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
}

/* 名字样式：把里面文本改成你的名字就好 */
.preloader__logo img{
    display:block;
    width: clamp(120px, 20vw, 240px);
    height:auto;

}
.preloader__logo{
  opacity: 0;
  animation: logo-in .3s ease forwards;
}
/* 先淡入 */
@keyframes logo-in{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 后淡出 */
/* 先让名字淡出，再让黑底淡出 */
.preloader.play .preloader__logo{
  animation: logo-out .4s ease forwards;

}
@keyframes logo-out {
  from   { opacity: 1;    transform: translateY(0);   }
  to { opacity: 0;    transform: translateY(-6px); }
}
.preloader.play{
    animation-name: overlay-out;
    animation-duration: .2s;
    animation-fill-mode: forwards;
    animation-delay: .2s; /* 等名字先淡出 */
}
@keyframes overlay-out{ 
    from { opacity:1; } 
    to { opacity:0; } 
}





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

.header{
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 48px 3.3%;
}
h1{
    width: 8.13%;
    min-width: 117px;
}
.logomark__top--img{
    width: 100%;
    height: auto;

}
.nav__ul{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 36px;
}
.nav__cell{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 24px;
    font-weight: 900;
}
.menu,
.menu__close{
    display: none;
}

    /*+++++++++++++++++++      sp size     ++++++++++++++++++++++ */
@media(max-width:768px){
    .header{
        width: 100%;
        padding: 16px 3.3%;
        position: relative;
    }
    h1{
        width: 49px;
        min-width: 0;
    }
    .nav__ul{
        position: absolute;
        top: 72px;
        right: 3.3%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 36px;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px); 

        transition:
            opacity .35s ease,
            transform .35s ease,
            visibility 0s linear .35s; 
    }
    .nav__ul.active{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition:
            opacity .35s ease,
            transform .35s ease,
            visibility 0s;    
    }

    .nav__cell{
        color: #000;
        font-family: "Noto Sans JP";
        font-size: 24px;
        font-weight: 900;
    }
    .menu{
        display: block;
        width: 8.8%;
    }
    .menu--line{
        width: 100%;
        height: auto;
    }
    .menu.active{
        display: none;

    }
    .menu__close{
        display: none;
    }
    .menu__close.active{
        display: flex;
        width: 8.8%;
        justify-content: center;
        align-items: center;

    }
    .menu__close--line{
        width: 75%;
        height: auto;
    }
    
}
    
/*==================  mainvisual  ================= */

.mainvisual__picture {
    display: block;
    width: 100%;
    aspect-ratio: 3200 / 2000;
    overflow: hidden;
    background: white;
    position: relative;

    margin-top: -264px;
}

/* 图片本身填满容器并裁切（常用 hero 行为） */
.mainvisual__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 768px) {
  .mainvisual__picture {
    aspect-ratio: 1200 / 1882;
    margin-top: -50px;

  }
}


/*====================== about =====================*/
.about{
    padding: 90px 15.2%;
    background-color: #EFEFEF;
}
.title__h2{
    color: #000;
    font-family: "Climate Crisis";
    font-size: 128px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.about__content{
    display: flex;
    margin: 0 auto;
    margin-top: 123px;
    max-width: 1004px;
}
.about__text{
    width: 48.9%;
    height: 489px;
    display: flex;
    flex-direction: column;
    gap: 48px;

}
.about__text--topic{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 64px;
    font-style: normal;
    font-weight: 900;
    line-height: 80%; /* 51.2px */
}
.about__text--text{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 36px */
}
.about__span{
    font-weight: 900;
}
.button__box{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: center;
}
.about__button{
    background-color: black;
    color: white;
    width: 65.1%;
    padding: 12px 0;

    display: flex;
    justify-content: center;
    align-self: center;
}
.button__text{
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.more--arrow{
    width: 16px;
    height: 16px;
    align-self: center;
    margin-left: 12px;
}

.about__photo{
    margin-left: 24px;
    background-color: #000;
    width: 48.9%;
    display: flex;

}
.about__photo--img{
    margin: auto 12px;
}
    /*+++++++++++     sp size     +++++++++++*/
@media(max-width:768px){
    .about{
    padding: 90px 6.4%;
    background-color: #EFEFEF;
    }
    .title__h2{
        font-size: 64px;
    }
    .about__content{
        display: flex;
        flex-direction: column-reverse;
        margin: 0 auto;
        margin-top: 103px;
    }
    .about__text{
        width: 100%;
        height: auto   ;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 36px;

    }
    .about__text--topic{
        font-size: 36px;
        line-height: 80%; /* 51.2px */
    }
    .about__text--text{
        font-size: 16px;
    }
    .button__box{
        margin-top: 36px;
    }
    .about__button{
        width: 100%;
    }
    .about__photo{
        margin: 0;
        padding: 12px;
        width: 100%;
        display: flex;

    }
    .about__photo--img{
        margin: auto;
    }
}
/*================= works ===================*/
.works{
    max-width: 1440px;
    margin: 0 auto;
}
.works__title{
    padding: 90px 15.2%;
}
.works__gallery{
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gallery__01{
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 24px;
    max-width: 1440px;
}
.gallery__01--cell{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-self: start;

    flex: 1;
    aspect-ratio: 1/1;
    padding: 24px;
    width: 100%;
}
.gallery__01--01{
    background: url(../image/index/works__01--01.png) lightgray 50% / cover no-repeat;
}
.gallery__01--02{
    background: url(../image/index/works--photo--02.png) lightgray 50% / cover no-repeat;
}
.gallery--01--textbox{
    background:rgba(255, 255, 255, 0.75);
    padding: 24px;
}

.gallery__01--subtitle{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.gallery__01--title{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 10px;
}
.gallery__02{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    gap: 24px;
    margin-top: 24px;
}
.gallery__02--cell{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;

    flex: 1;
    aspect-ratio: 318/220;
    padding: 12px;
}
.gallery--02--textbox{
    background:rgba(255, 255, 255, 0.75);
    width: 100%;
    padding: 12px;
}
.gallery__02--subtitle{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.gallery__02--title{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.gallery__02--01{
    background: url(../image/index/works--photo--03.png)lightgray 50% / cover no-repeat;
}
.gallery__02--02{
    background: url(../image/index/works--photo--04.png)lightgray 50% / cover no-repeat;
}
.gallery__02--03{
    background: url(../image/index/powerpoint-redesign-show.png)lightgray 50% / cover no-repeat;
}
.gallery__02--04{
    background: url(../image/index/works--photo--06.png)lightgray 50% / cover no-repeat;
}
.works__button__box{
    width: 100%;
    height: auto;
    margin-top: 100px;
}
.works__button{
    background-color: #000;
    width: 22.2%;
    display: flex;
    justify-content: center;
    align-self: center;

    padding: 12px;
}
.button__text{
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

        /*+++++++++++     sp size     +++++++++++*/
@media(max-width:768px){
    .works{
    max-width: 1440px;
    margin: 0 auto;
}
.works__title{
    padding: 90px 3.2%;
}
.works__gallery{
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gallery__01{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}
.gallery__01--cell{
    padding: 12px;
}

.gallery--01--textbox{
    padding: 12px;
}

.gallery__01--subtitle{
    font-size: 16px;

}
.gallery__01--title{
    font-size: 24px;
    margin-top: 10px;
}
.gallery__02{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
.gallery__02--cell{
    flex: 0 0 calc((100% - 12px) / 2); 
    height: 100%;
    padding: 6px;
}
.gallery--02--textbox{
    padding: 6px;

}
.gallery__02--subtitle{
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.gallery__02--title{
    font-size: 14px;
}

.works__button__box{
    width: 100%;
    height: auto;
    margin-top: 40px;
    padding: 24px;
}
.works__button{
    background-color: #000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: center;

    padding: 12px;
}
.button__text{
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
}
 /*=============== footer =================*/

.footer{
    background-color: #000;
    color: white;
    padding-left: 171px;
    margin-top: 192px;
}
.contact{
    display: flex;
    flex-direction: column;
    gap: 72px;
    padding: 48px;
}
.contact__title{
    color: #FFF;
    font-family: "Climate Crisis";
    font-size: 128px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%; /* 102.4px */
}
.contact__mail{
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 36px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;

    width: auto;
}
.footer__logomark{
    width: 168px;
    height: 115px;
    aspect-ratio: 168/115;

    margin-left: 48px;
}
small{
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;

    display: block;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 12px;
}
    /*+++++++++++     sp size     +++++++++++*/

    @media(max-width:768px){
    .footer{
        padding-left: 24px;
        margin-top: 40px;
        padding-top: 72px;
    }
    .contact{
        width: 100%;
        flex-direction: column;
        gap: 40px;
        padding: 0;
    }
    .contact__title{
        color: #FFF;
        font-family: "Climate Crisis";
        font-size: 64px;
        font-style: normal;
        font-weight: 400;
        line-height: 80%; /* 102.4px */
    }
    .contact__mail{
        color: #FFF;
        font-family: "Noto Sans JP";
        font-size: 20px;
        font-style: normal;
        font-weight: 900;
        line-height: normal;

        width: auto;
    }
    .footer__logomark{
        width: 168px;
        height: 115px;
        aspect-ratio: 168/115;

        margin: 48px auto 0;
    }
    small{
        color: #FFF;
        font-family: "Noto Sans JP";
        font-size: 12px;
        font-style: normal;
        font-weight: 900;
        line-height: normal;

        display: block;
        text-align: center;
        padding-top: 24px;
        padding-bottom: 12px;
    }

    .span--title{
        font-size: 36px;
    }
    }