@charset "UTF-8";

/* 共通部分 */
html{
    font-size:100%;
}

body{
    /*---
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;  ---*/
    font-family: dnp-shuei-mincho-pr6n, sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.9;
    color: #432 ;
    margin: 0;
    word-break: normal;
    padding:0rem;
}

.sub-body{
    max-width: 1200px;
    margin:auto;
    padding:8rem 2rem 2rem;
}

a {
    text-decoration: none;
    color: #432 ;
}

img{
    max-width: 100%;
}

h1{
    text-align:left;
    font-size:3rem;
    margin: 0 0 2rem;
    line-height: 1.3;
    font-weight: 800;
}

h2{
    text-align:left;
    font-size:2rem;
    margin: 1.5rem 0 0.8rem;
    line-height: 1.4;
    font-weight: 800;
}

h3{
    margin:0rem;
    font-weight: 550;
    line-height:1.3;
    font-size:1rem;
}

h4{
    margin:0;
    font-weight: 500;
    font-size:0.8rem;
    line-height:1.2;
    color: #ababab ;
}

p{
    font-size: 1rem;
    margin:0 0 1rem;
    text-align:justify;
}

/* オリジナル設定 */
.ps-br{
    display: block; /* モバイルサイトにおいて改行 */
}

.sp-br{
    display: none; /* モバイルサイトにおいて改行しない */
}


/* レイアウト */
.align-center{
    text-align: center;
    margin: 0rem;
}

.font-english{
    font-family: "Roboto Slab", serif;
    font-weight: normal;
}


/* ヘッダー */
header{
    position: fixed;
    top:0px;
    left:0px;
    padding: 0 0rem;
    box-sizing: border-box;
    width:100%;
    background-color: #fff;
    padding: 0.3rem 0 0.5rem;
    border-bottom: 1px solid black;
}


.header-logo {
    display:flex;
    justify-content: center;
    align-items: center;
}

.header-logo p{
    font-size: 32px;
    font-weight: 800;
    margin:0;
}

.header-logo img{
    height:28px;
    margin:0.4rem 0.3rem 0 0;
}

.header-inner a{
    color: black;
    margin:0;
    line-height: 1.6;
}

.header-nav {
    margin-left: auto;
}

.header-nav ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.header-nav li {
    list-style-type: none;
    margin: 0 1rem;
}

.header-nav a {
    display: block; 
    text-decoration: none;
    font-weight: 600;
}


/* ヘッダー2 */
.header2{
    position: absolute;
    top:0px;
    left:0px;
    padding: 0 0rem;
    box-sizing: border-box;
    width:100%;
    padding: 0.3rem 0 0.5rem;
    background-color:rgba(0, 0, 0, 0.0);
    z-index: 10;
}


.header2 a{
    color: rgb(255, 255, 255);
    line-height: 1.6;
}


/* トップ */
.wrap{
    position: relative;
    text-align: center;
    background-color: #fff;
    width: 100%;
}

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

.img-frame{
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   margin: 0 auto;
}

.main-img-01, .main-img-02, .main-img-03{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.main-img-01{
    background-image: url('../images/works/america-3.jpg');
    animation: slide-animation-01 24s infinite;
}

.main-img-02{
    background-image: url('../images/works/map/newyork.jpg');
    animation: slide-animation-02 24s infinite;
}

.main-img-03{
    background-image: url('../images/works/buratamare3-4.jpg');
    animation: slide-animation-03 24s infinite;
}

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
    30% {opacity: 1;}
    40% {opacity: 0; transform: scale(1.15);}
    90% {opacity: 0}
    100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02 {
    0% {opacity: 0;}
      30% {opacity: 0; transform: scale(1.1);}
      40% {opacity: 1;}
      60% {opacity: 1;}
      70% {opacity: 0; transform: scale(1.0);}
    100% {opacity: 0;}
}

@keyframes slide-animation-03 {
    0% {opacity: 0;}
      60% {opacity: 0;  transform: scale(1.0);}
      70% {opacity: 1;}
      90% {opacity: 1;}
    100% {opacity: 0; transform: scale(1.1);}
}

.color {
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    background: #e22400;
    width: 100%;
    height: 100vh;
}

.top-text {
    position:absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #fff;
    text-align: center;
    margin:0;
    line-height:1.1;
    font-weight:600;
}

.main-h1{
    font-size: 6rem;
    margin:0;
    padding: 0 0rem 1.5rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin:auto;
    display: inline-block;
    border-bottom: 1.5px solid #fff;
    font-feature-settings: "palt";
}

.main-h2{
    font-size:2rem;    
    text-align:center;
    line-height:1.25;
}

.main-h3{
    font-size:1rem;    
    font-weight: 600;
    text-align:center;
    line-height:1.5;
}

.main p{
    text-align:center;
}


/* about */
.about{
    max-width: 800px;
    padding: 0 2rem;
    margin: 10rem auto 4rem;
}

.sentense {
    margin: 0rem;
    text-align: left;
}

.logo-img-container{
    width: 100%;
    text-align: center;
}

.logo2{
    height:300px;
    margin-bottom: 1rem;
}

.myname{
    margin: 0rem auto 0rem;
    font-size:3rem;
    font-weight: 800;
    line-height:1.1;
}

.sub-myname{
    font-size:1.3rem;
    margin:0 0 1rem;
}


/* SNS link */
.sns-container{
    display: flex;
    justify-content: left;
    gap:40px;
    margin: 2.5rem 0 0;
}

.sns{
    text-align: center;
    margin:0rem;
    line-height: 1.5rem;
}

.sns-btn{
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 100px
}

.sns h3{
    margin:0.2rem 0 0rem;
    line-height: 1.3rem;
}

.sns p{
    font-size: 0.8rem;
    margin:0.4rem 0 0rem;
    line-height: 0.8rem;
}


/* activity */
.skills{
    max-width: 800px;
    margin:0 auto 4rem;
    padding: 0 2rem;
    text-align: left;
}

.skills h1{
    margin: 10rem 0 1rem;

}

.skills-h2-container{
    display:flex;
    align-items: center;
}

.skills-h2-img{
    height:2.2rem;
    margin-top: 1rem;
    margin-right:0.4rem;
    min-width: 35.19px;
}

.skills-img-container{
    display:grid;
    grid-template-columns: 1fr;
    gap:2rem 2rem;
    list-style: none;
    padding: 0rem;
    margin:1.5rem 0 3rem;
}

.skills-img-container img{
    border-radius: 0px;
    border: 1px solid #c2c2c2;
}

.skills-img-map img{
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.skills-button-container{
    text-align: center;
    margin-bottom: 5rem;
}

.skills-button{
    display: inline-block;
    padding: 1rem 3rem;
    text-decoration: none;
    border: solid 2px #e22400;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}


/* works */
.works-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:2.5rem 1.5rem;
    list-style: none;
    align-items: start;
    margin:1rem 0 5rem;
}

.works-container img{
    max-width: 100%;
    object-fit: cover;
    width: 100%;
    margin:0;
    aspect-ratio: 1 / 1.414210356;
    background-color: #ffffff;
    border:1px solid #c2c2c2;
    display: block;
}

.works-container h3{
    margin-top:0.5rem;
    line-height: 1.5;
}

.works-container h4{
    margin-top:0.4rem;
}

.works-map img{
	aspect-ratio: 1 / 1;	
    object-fit: contain;
}


/* worksdescription */
.worksdescription-gallery {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 5rem;
}

.worksdescription-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0rem;
    width: 100%;
}

.worksdescription-img-wrapper{
    display: flex;
    justify-content: center;
}

.worksdescription-img{
    width:auto;
    height:100%;
    object-position:center;
    object-fit: contain;
}

.worksdescription-title{
    margin-bottom: 3rem;
}

.worksdescription-title h2{
    margin:0 0 0.8rem;
    line-height: 1.4;
}

.worksdescription-title h3{
    margin:0rem 0 0.2rem;
    align-items: center;
    display: flex;
}

.worksdescription-title h4{
    line-height:1.2;
    font-size: 1rem;
}

.worksdescription-container p{
    margin:0rem 0 1rem;
}

.worksdescription-gallery p{
    font-size: 1rem;
    color:#ababab;
    margin:0rem;
    text-align:right;
}

.worksdescription-gallery img{
    border-radius:0px;
    border:1px solid #c2c2c2;
}

.worksdescription-detail{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    max-width: 350px;
    padding: 0.4rem 0;
    border-top: 1px solid #c2c2c2;
    border-bottom: 1px solid #c2c2c2;
}

.worksdescription-detail h3{
    font-size: 1.1rem;
}

.worksdescription-detail h4{
    margin-bottom: 0;
}

.worksdescription-img-wrapper.cover{
    width: 100%;
    height: auto;
    object-fit: contain;
}

.worksdescription-img-wrapper.content{
    width: 100%;
}


/* background */
.history{
    max-width: 605px;
    margin:0 auto 4rem;
    text-align: center;
}

.year{
    text-align: left;
    margin: 4rem 0 0.5rem;
    font-size: 2rem;
    font-weight: 450;
}

.history-container{
    display: flex;
    justify-content:left;
    gap:15px;
    margin: 0rem 0 1.6rem;
}

.history-container p{
    line-height: 1.4;
    align-content: center
}

.history-month{
    min-width: 40px;
    padding-right:15px;
    text-align: center;
    font-size: 1.5rem;
    margin:0 0;
    border-right: 1px solid black;
}

.history-description-main{
    text-align: left;
    margin:0;
    font-size: 1.2rem;
    font-weight: 600;
}

.history-description-sub{
    text-align: left;
    font-size: 0.9rem;
    margin:0.3rem 0 0;
}


/*blog*/
.blog-box{
    border: 1px solid #c2c2c2;
    margin: 3rem 0 3rem;
}

.blog-sentence{
    padding: 0.5rem 1.2rem 1.2rem 1.2rem;
}

.blog-container img{
    aspect-ratio: 4/3;
    object-fit: cover;
    margin: 0;
}

.blog-container h3{
    font-size: 1.2rem;
    margin: 0.3rem 0 0.4rem 0;
}

.blog-container h4{
    font-size: 1rem;
}


/*blog-article*/
.blog-article{
    max-width: 600px;
}

.blog-article-title{
    margin-bottom: 1rem;
}

.blog-article-sentence h3{
    font-size: 1.3rem;
    font-weight: 600;
    margin: 5rem 0 0.7rem;
    line-height: 1.4;
}

.blog-article-title h4{
    font-size: 1rem;
}

.blog-article-sentence p{
    margin-bottom: 3rem;
    line-height: 2;
    font-weight: 400;
}


/* Tablet / Desctop*/
@media screen and (min-width:800px){
    .sub-body{
        padding-top:10rem;
    }

    h1{
    margin: 0 0 5rem;
    }

    header{
        padding: 0;
    }

    .header2{
        padding: 0;
        box-sizing: border-box;
    }

    .header2 a{
        border-bottom: 1px solid rgb(255, 255, 255);
    }

    .header-inner {
        display: flex;
        align-items: center; 
        height: 4rem;
        padding:0 2rem;
    }

    .header-inner2 {
        display: flex;
        align-items: center; 
        height: 4rem;
        padding:0 2rem;
    }
    
    .top-text {
        top: 82%;
        left: 45%;
    }

    .main-h1{
        font-size:6.5rem;
        padding: 0 0rem 3rem;
        writing-mode: horizontal-tb;
        text-align: center;
    }

	.main-h2{
        font-size:3rem;	
        text-align: right;
        border-bottom:1.5px solid #fff;
        padding-bottom: 0.7rem;
        margin-bottom: 0.4rem;
	}

	.main-h3{
        font-size:1.42rem;	
        text-align: right;
        font-weight: 500;
	}

    .ps-br{
        display: none;
    }

    .sp-br{
        display: block;
    }

    .container{
        gap:50px;
    }
    
    .container2{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap:3rem 3rem;
    }

    .about{
        padding-top:8rem;
    }

    .about-container{
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap:3rem 4rem;
        list-style: none;
        padding: 0rem;
        place-items: center;
    }

    .logo2{
        height:440px;
        margin:0;
    }


    .works-container{
        grid-template-columns: 1fr  1fr 1fr 1fr;
        gap:3.5rem 2.5rem;
        margin-bottom: 8rem;
    }

    .skills-img-container{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:1.5rem 1.5rem;
        list-style: none;
        padding: 0rem;
        border-radius:5px;
    }

    .skills-img-map img{
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }


    .worksdescription-gallery {
        gap: 5rem;
        margin-top: 0rem;
    }

    .worksdescription-gallery-item {
        gap: 1rem;
    }

    .worksdescription-container{
        display: grid;
        grid-template-columns: minmax(250px, 2fr) 5fr;
        gap:1rem 5rem;
        list-style: none;
        align-items: start;
        min-width: 150px;
    }

    .worksdescription-sentence{
        /*
        position: sticky;
        top: 10rem;
        z-index: 10;
        */
        line-height: 1.7;
        border-right: 1px solid #ababab;
        padding-right: 2.5rem;
    }

    .worksdescription-img-wrapper {
        display: flex;
        justify-content: start;
    }

    .worksdescription-img-wrapper.cover{
        width: 100%;
        height: 40rem;
        object-fit: contain;
    }

    .worksdescription-img-wrapper.content{
        width: 100%;
    }


    .blog-container{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2.5rem 2.5rem;
    }

    .blog-article-title{
    margin-bottom: 7rem;
}
}