/* ProjectIndex */
#project_index { position:relative; width:80%; height:auto; min-height:80vh; left:50%; margin-top:110px; padding-top:40px; padding-bottom:80px; transform:translateX(-50%); }
.project_index_inner, .project_unit_inner { position:relative; width:100%; height:auto; }

.project_unit a { position:absolute; top:0; left:0; width:100%; height:100%; }

.project_unit { position:relative; width:100%; height:auto; margin-bottom:60px; }
.project_unit_ph { position:relative;	width:100%; height:0; padding-top: 70.7%; overflow: hidden; margin-bottom:20px; }
.project_unit_ph img { position: absolute; width:100%; top:50%; left:50%; transform:translate(-50%,-50%); transform-origin: center,center; transition:transform .6s cubic-bezier(0, 0.55, 0.45, 1); }

.project_unit h3, .project_unit h6 { transition:opacity .4s cubic-bezier(0, 0.55, 0.45, 1); }
.project_unit h3 { margin-bottom:10px; }

.project_unit_arw { position:absolute; bottom:0; right:5px; opacity:0; width:24px; transition:all .4s cubic-bezier(0, 0.55, 0.45, 1); }
.project_unit_arw svg { width:100%; }

.project_unit:hover img { transform:translate(-50%,-50%) scale(1.1); transform-origin: center,center;  }
.project_unit:hover h3, .project_unit:hover h6 { opacity:0.6; }
.project_unit:hover .project_unit_arw { opacity:1; right:0; }

/* ProjectDetail */
#project_detail { position:relative; width:100%; height:auto; left:50%; margin-top:110px; padding-top:10px; padding-bottom:120px; transform:translateX(-50%); }

.project_detail_ph_main { position:relative; width:100%; margin-bottom:40px; }
.ph_layout_a, .ph_layout_b, .ph_layout_c, .ph_layout_d, .ph_layout_e { position:relative; left:50%; transform:translateX(-50%); margin-bottom:40px; }
.project_detail_ph_main img, .ph_layout_a img, .ph_layout_b img, .ph_layout_e img { width:100%; height:auto; }

.ph_layout_a { width:90%; }
.ph_layout_b { width:70%; margin:80px 0; }
.ph_layout_c, .ph_layout_d { display:flex; flex-wrap:wrap; margin:80px 0; }
.ph_layout_c { width:80%; }
.ph_layout_c img { width:65%; height: auto;}
.ph_layout_c img:nth-of-type(2) { margin-left:35%; margin-top:20px; }
.ph_layout_d { width:90%; justify-content: space-between; align-items: flex-start; }
.ph_layout_d img { width:49%; height: auto; padding-bottom:2%; }
.ph_layout_e { width:100%; margin-top:80px; }
.project_video { position: relative; width: 100%; padding-top: 56.25%; }
.project_video iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

#project_detail p { margin-bottom:20px; }

.project_detail_ttl, .project_detail_intro, .project_detail_credit, .project_detail_block { position:relative; width:80%; height:auto; left:50%; transform:translateX(-50%); }
.project_detail_intro { border-bottom:1px solid #dedede; padding-bottom:20px; margin-bottom:40px; }
.project_detail_ttl, .project_detail_block { margin-bottom:40px; }
.project_detail_ttl { display:flex; flex-wrap:nowrap; justify-content: space-between; }
.project_detail_ttl_txt { position:relative; width:calc(100% - 80px ); }
.project_detail_ttl_icon_v, .project_detail_ttl_icon_h { position:relative; width:60px; height:60px; border-radius:100%; background-color: #fff; }
.project_detail_ttl_icon_v svg, .project_detail_ttl_icon_h svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.project_detail_ttl_icon_v svg { width:50%; }
.project_detail_ttl_icon_h svg { width:80%; }

.project_detail_ttl_txt h1 { margin-bottom:10px; }
.project_detail_ttl_txt h3 { margin:0; }
.project_detail_block h3 { line-height: 160%; margin-bottom:10px;}
.project_detail_block > .txt_jp { margin-bottom:50px; }
.project_detail_block a { color:#0022ff; text-decoration: underline; transition:opacity .3s ease; }
.project_detail_block a:hover { opacity:0.6; }

.project_detail_credit { margin-bottom:100px; }
.project_detail_credit dl { font-size:1.2rem; display:flex; flex-wrap:wrap; width:100%; box-sizing: border-box; }
.project_detail_credit dt { width:40%; margin:0; padding:10px 0; border-bottom:1px solid #dedede; }
.project_detail_credit dd { width:60%; margin:0; padding:10px 0; border-bottom:1px solid #dedede; }

#project_link { position:relative; width:100%; }
.project_link_inner { position:relative; width:80%; height:auto; left:50%; transform:translateX(-50%); margin-top:40px; display:flex; flex-wrap:nowrap; justify-content: space-between; }
.project_link_inner span { font-size:1rem; }
.project_index_back, .project_prev, .project_next { position:relative; width:36px; height:50px; text-align:center;}
.project_prev_arw, .project_next_arw, .project_index_icon { position:relative; width:100%; height:40px; }
.project_prev_arw::before, .project_next_arw::before { content:''; position:absolute; top:50%; width:100%; height:2px; background-color: #000; transform:translateY(-50%); transition:width .4s cubic-bezier(0.22, 1, 0.36, 1); }
.project_prev_arw::before { left:0; }
.project_next_arw::before { right:0; }
.project_prev_arw::after, .project_next_arw::after { content:''; position:absolute; top:50%; width:10px; height:2px; background-color: #000; }
.project_prev_arw::after { left:0; transform:translateY(-50%) rotate(-45deg); transform-origin:left bottom; }
.project_next_arw::after { right:0; transform:translateY(-50%) rotate(45deg); transform-origin:right bottom; }
.project_index_icon span, .project_index_icon span::before, .project_index_icon span::after { content:''; position:absolute; top:50%; left:50%; width:4px; height:4px; background-color: #000; border-radius:2px; transform:translate(-50%,-50%); transition:width .3s cubic-bezier(0.22, 1, 0.36, 1), height .3s cubic-bezier(0.22, 1, 0.36, 1); }
.project_index_icon span::before { margin-top:-8px; transition-delay: .1s; }
.project_index_icon span::after { margin-top:8px; transition-delay: .2s; }
.project_index_back a, .project_prev a, .project_next a { position:absolute; width:100%; height:100%; top:0; left:0; cursor:pointer;  }

.project_prev:hover .project_prev_arw::before, .project_next:hover .project_next_arw::before  { width:75%; }
.project_index_back:hover .project_index_icon span, .project_index_back:hover .project_index_icon span::before, .project_index_back:hover .project_index_icon span::after { width:24px; height:2px; }

#night .project_detail_intro { border-bottom:1px solid #565656; }
#night .project_detail_ttl_icon_v, #night .project_detail_ttl_icon_h { background-color: #000;}
#night .project_prev_arw::before, #night .project_next_arw::before { background-color: #fff; }
#night .project_prev_arw::after, #night .project_next_arw::after { background-color: #fff; }
#night .project_index_icon span, #night .project_index_icon span::before, #night .project_index_icon span::after { background-color: #fff; }
#night .project_detail_credit dt, #night .project_detail_credit dd { border-bottom:1px solid #565656; }
#night .project_detail_block a { color:#dda200; }


@media screen and (min-width:740px) {
    .project_index_inner { display:flex; flex-wrap:wrap; justify-content: space-between; }
    .project_unit { width:46%; }
}

@media screen and (min-width:960px) {

    #project_index { width:70%; margin-top:160px; padding-bottom:140px; }
    .project_unit { width:48%; margin-bottom:80px; }


    #project_detail { padding-top:0; padding-bottom:60px; margin-top:0; }
    .project_detail_ttl, .project_detail_intro, .project_detail_credit, .project_detail_block { width:55%; }

    .project_detail_block { margin-bottom:80px; }
    .project_detail_block h3 { margin-bottom:15px; }
    .project_detail_block > .txt_jp { margin-bottom:50px; }

    .project_detail_ph_main { margin-bottom:100px; }

    .ph_layout_a { width:65%; margin-bottom:60px; }
    .ph_layout_b { width:40%; margin:160px 0; }
    .ph_layout_c { justify-content: space-between; align-items: flex-start; margin:160px 0; }
    .ph_layout_c { width:85%; }
    .ph_layout_c img { width:46%; height: auto; }
    .ph_layout_c img:nth-of-type(2) { padding-top:60px; margin:0; }
    .ph_layout_d { width:65%; margin:160px 0 }
    .ph_layout_e { margin-top:160px; }

    .project_link_inner { margin-top:60px; }


}

@media screen and (min-width:1500px) {

    #project_index { margin-top:10vw; padding-top:2vw; padding-bottom:14vw; }
    .project_unit_arw { right:0.3vw; width:2vw; }

    .project_detail_ph_main { margin-bottom:8vw; }

    #project_detail { padding-bottom:4vw; }
    #project_detail p { margin:1.5vw 0; }

    .project_detail_ttl, .project_detail_intro, .project_detail_credit, .project_detail_block { width:45%; }

    .project_detail_ttl { margin-bottom:3vw; }
    .project_detail_ttl_txt h1 { margin-bottom:0.8vw; }
    .project_detail_ttl_icon_v, .project_detail_ttl_icon_h { width:6vw; height:6vw; }
    
    .project_detail_credit { margin-bottom:8vw; }
    .project_detail_credit dl { font-size:0.8vw; }
    .project_detail_credit dt, .project_detail_credit dd { padding:1.2vw 0; }
    .project_detail_credit dt { width:35%; }
    .project_detail_credit dd { width:65%; }

    .project_detail_block { margin-bottom:8vw; }
    .project_detail_block h3 { margin-bottom:1vw; }
    .project_detail_block > .txt_jp { margin-bottom:4vw; }


    .ph_layout_a { width:55%; margin-bottom:4vw; }
    .ph_layout_b { width:36%; margin:14vw 0; }
    .ph_layout_c { width:80%; margin:14vw 0; }
    .ph_layout_c img:nth-of-type(2) { padding-top:8vw; }
    .ph_layout_d { width:65%; margin:14vw 0 }
    .ph_layout_e { margin-top:18vw; }
    
    
    
    .project_link_inner { margin-top:3vw; }
    .project_link_inner span { font-size:0.8vw; }
    .project_index_back, .project_prev, .project_next { width:2.5vw; height:4vw; }
    .project_prev_arw, .project_next_arw, .project_index_icon { height:3vw; }
    .project_prev_arw::before, .project_next_arw::before { height:0.2vw; }
    .project_prev_arw::after, .project_next_arw::after { width:1vw; height:0.2vw; }
    .project_index_icon span, .project_index_icon span::before, .project_index_icon span::after { width:0.3vw; height:0.3vw; border-radius:0.15vw; }
    .project_index_icon span::before { margin-top:-0.5vw; }
    .project_index_icon span::after { margin-top:0.5vw; }
    .project_index_back:hover .project_index_icon span, .project_index_back:hover .project_index_icon span::before, .project_index_back:hover .project_index_icon span::after { width:1.6vw; height:0.2vw; }

    #night .project_detail_intro { border-bottom:0.1vw solid #565656; }
    #night .project_detail_credit dt, #night .project_detail_credit dd { border-bottom:0.1vw solid #565656; }



}