@charset "utf-8";
/* CSS Document */
#intro{text-align:center;}
#main_photo{
position:sticky;
top:0;
width:100%;
height:100vh;
background:url(../../img/s11.jpg); center no-repeat;
background-size:cover;
background-position:center 70%;
z-index:-1;
}
#main_copy div{
display:flex;
justify-content:center;
margin-bottom:2rem;
}
#main_copy h2{
display:flex;
flex-direction:column;
align-items: flex-end;
line-height:1.2;
}
#main_copy  h2 > span{
font-size:350%;
font-weight:900;
}
#main_copy h2 small{font-weight:300;}
#main_copy p{
font-size:120%;
line-height:1.8;
font-weight:900;
}
#main_copy i{
display:inline-block;
font-size:150%;
margin-top:1rem;
opacity:0.7;
}
#main_copy{
padding-bottom:100vh;
background-size:cover;
background-position:center bottom;
margin-top:-40vh;
}
#contents{
margin:0 auto 3rem;
width:100%;
}
#contents > div{
border-bottom:3px solid #fff;
background:#000;
}
#contents > div:nth-last-of-type(1){border:none;}
.black_label{
margin-top:-115px;
width:250px;
color:#fff;
padding:1.5rem 0;
background:#000;
text-align:center;
display:block;
position:sticky;
bottom:0;
left:10%;
}
.black_label dt{
position:relative;
font-size:90%;
margin-bottom:0.5rem;
padding-left:0.75rem;
display:inline-block;
}
.black_label dt:before{
position:absolute;
top:0.25rem;
left:0;
content:"";
height:1rem;
width:0.25rem;
background:#d10000;
display:block;
}
.black_label dd:nth-of-type(1){
font-size:60%;
font-weight:400;
margin-bottom:0.25rem;
}
.black_label dd:nth-of-type(2){
font-size:50%;
font-weight:200;
}
#work1{position:relative;z-index:7;}
#work2{position:relative;z-index:6;}
#work3{position:relative;z-index:5;}
#work4{position:relative;z-index:4;}
#work5{position:relative;z-index:3;}
#work6{position:relative;z-index:2;}
#work1_photo{
width:100%;
height:100vh;
background:url(../../img/s29.jpg);
background-size:cover;
background-position:center center;
}
#work2_photo{
width:100%;
height:100vh;
background:url(../../img/s30.jpg);
background-size:cover;
background-position:center center;
}
#work3_photo{
width:100%;
height:100vh;
background:url(../../img/s31.jpg);
background-size:cover;
background-position:center center;
}
#work4_photo{
width:100%;
height:100vh;
background:url(../../img/s44.jpg);
background-size:cover;
background-position:center center;
}
#work5_photo{
width:100%;
height:100vh;
background:url(../../img/s46.jpg);
background-size:cover;
background-position:center center;
}
#work6_photo{
width:100%;
height:100vh;
background:url(../../img/s49.jpg);
background-size:cover;
background-position:center center;
}
#work7_photo{
    width:100%;
    height:100vh;
    background:url(../../img/s145.jpg);
    background-size:cover;
    background-position:center center;
    }
.work_photo{position:relative;}
.work_photo span{
display:inline-block;
position:absolute;
top:2rem;
right:2rem;
text-align:right;
font-size:85%;
}
#work5_photo span{color:#000;}
@media screen and (min-width:1200px){
#work5_photo span{color:#fff;}
}
.work_details{
width:90%;
max-width:1000px;
margin:5% auto;
}
.work_details h3{
display:inline-block;
font-size:70%;
padding:0.5rem 1rem;;
background:#d10000;
}
.work_details p{
font-size:180%;
font-weight:200;
color:#555;
letter-spacing:0.025;
}
.work_details dt{
font-size:140%;
font-weight:900;
line-height:1.2;
margin-top:1rem;
margin-bottom:1rem;
}
.work_details dt small{
display:inline-block;
font-size:60%;
font-weight:300;
}
.work_details dd{
margin-top:0.5rem;
line-height:2;
text-align:justify;
}
.work_details dd small{
display:inline-block;
font-weight:300;
}
.work_details dd:nth-of-type(2){margin-top:1rem;}
.work_details dd ul{
display:flex;
flex-wrap: wrap;
justify-content:space-between;
}
.work_details dd li{
width:49%;
margin-bottom:2%;
}
.work_details dd li img{
width:100%;
height:auto;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
.black_label{margin-top:-114px;}
}
@media screen and (max-width:768px){ 
#main_copy{margin-top:-30vh;}
#main_copy h2{font-size:130%;}
#main_copy p{font-size:100%;}
#contents{margin:0 auto 3rem;}
.black_label{margin-top:-110px;}
}
@media screen and (max-width:480px){
#main_copy{margin-top:-45vh;}
#main_copy  h2{font-size:120%;}
#contents{margin:0 auto 2rem;}
#main_copy i{font-size:150%;}
.black_label{
width:180px;
padding:1rem 0;
position:relative;
left:0;
bottom:0;
margin:-85px auto 0;
}
.black_label dd:nth-of-type(2){
font-size:70%;
font-weight:200;
}
.work_photo span{
text-align:left;
left:2rem;
font-size:100%;
}
#work5_photo span{color:#000;}
.work_details dd:nth-of-type(2){
margin-bottom:1.5rem;
}
.work_details dd ul{display:bllock;}
.work_details dd li{
width:100%;
margin-bottom:2%;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait){
#contents{font-size:130%;}
#main_copy{margin-top:-35vh;}
#main_copy h2{font-size:190%;}
#main_copy p{font-size:170%;}
#main_copy i{
display:inline-block;
font-size:300%;
margin-top:3rem;
opacity:0.5;
}
.black_label{width:350px;}
#work5_photo span{color:#000;}
}