@charset "UTF-8";
/* CSS Document */


/* -------------------------------- PC版のスタイルここから ------------------------------------*/

@media print, screen and (min-width: 751px) {
    
    
    .photo-category{
        width: 100%;
        max-width: 1198px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .photo-category ul{
        width: 100%;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-inline-start: 0;
        padding: 0;
        margin-bottom: 0;
    }
    
    .photo-category ul > li{
        cursor: pointer;
        width: 18.8%;
        text-align: center;
        position: relative;
        margin-bottom: 24px;
    }
    
    .photo-category ul > li+li{
        margin-left: 1.5%;
    }
    
    .photo-category ul > li:nth-child(5n+1){
        margin-left: 0;
    }
    
    .photo-category ul > li.active a,
    .photo-category ul > li.active span{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .photo-category ul > li.active > .sub-cate-list span,
    .photo-category ul > li.active > .sub-cate-list a{
        background: none;
        color: #333;
        border: none;
    }
    
    .photo-category ul > li > a,
    .photo-category ul > li > span{
        width: 100%;
        background: #F2F2F2;
        border: 1px solid #898989;
        border-radius: 100px;
        display: block;
        padding: 8px 0;
        transition: 0.3s;
        font-weight: bold;
        font-size: 16px;
        line-height: 26px;
        position: relative;
        color: #898989;
    }
    
    .photo-category ul > li > a:hover,
    .photo-category ul > li > span:hover{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .photo-category ul > li > span.is-show{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .photo-category ul > li.sub-cate > span:before{
        position: absolute;
	    top: 50%;
	    right: 24px;
	    margin-left: -30px;
	    content: ' ';
	    border-top: 8px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
	    border-top-color: #898989;
        z-index: 1;
        transform: translateY(-50%);
    }
    
    .photo-category ul > li.sub-cate.active > span:before{
        border-top-color: #fff;
    }
    
    .photo-category ul > li.sub-cate > span:hover:before{
	    border-top-color: #fff;
    }
    
    .photo-category ul > li > span.is-show:before{
        border-top-color: #fff;
    }
    
    .photo-category li .sub-cate-list{
        position: absolute;
	    z-index: 2;
	    top: 148%;
	    left: 50%;
	    display: none;
	    width: auto;
        height: auto;
	    white-space: nowrap;
	    padding: 24px;
	    transition: 0.3s;
	    text-align: center;
	    border-radius: 6px;
	    background: #fff;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
        transform: translateX(-50%);
        border: 1px solid #CCCCCC;
    }
    
    .photo-category li.sub-cate:hover .sub-cate-list{
        display: block;
    }
    
    .photo-category li.sub-cate:hover span{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .photo-category li.sub-cate:hover span:before{
        border-top-color: #fff;
    }
    
    .photo-category li .sub-cate-list .box-arrow{
        width: 100%;
        height: 21px;
        overflow: hidden;
        z-index: -1;
        position: absolute;
        left: 0;
        top:-21px;
    }
    
    .photo-category li .sub-cate-list .box-arrow:after {
	    position: absolute;
	    bottom: 0;
	    left: 50%;
	    margin-left: -20px;
	    content: ' ';
	    border: 20px solid transparent;
	    border-bottom-color: #fff;
        z-index: 2;
    }
    
    .photo-category li .sub-cate-list .box-arrow:before{
	    position: absolute;
	    bottom: 0;
	    left: 50%;
	    margin-left: -21px;
	    content: ' ';
	    border: 21px solid transparent;
	    border-bottom-color: #CCCCCC;
        z-index: 1;
    }
    

    
    .photo-category .sub-cate-list ul{
        display: block;
    }
    
    .photo-category .sub-cate-list li{
        text-align:left;
        margin-bottom: 0;
    }
    
    .photo-category .sub-cate-list li+li{
        margin-left: 0;
        margin-top: 8px;
    }
    
    .photo-category .sub-cate-list a{
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        font-size: 15px;
    }
    
    .photo-category .sub-cate-list a:hover{
        background: none;
        border: 0;
        color:#1D315A;
    }
    
    .photo-list-wrap{
        margin-top: 80px;
    }
    
    .photo-list-wrap h3{
        font-weight: bold;
        font-size: 24px;
        line-height: 1em;
        margin-bottom: 48px;
    }
    
    .photo-list-wrap ul{
        width: 100%;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-inline-start: 0;
        padding: 0;
    }
    
    .photo-list-wrap ul+ul{
        margin-top: 2%;
    }
    
    .photo-list-wrap ul+.moreread{
        margin-top: 80px;
    }
    
    .photo-list-wrap li{
        width: 32%;
        height: auto;
        position: relative;
        overflow: hidden;
        margin-left: 2%;
        margin-bottom: 2%;
    }
    
    .photo-list-wrap li:nth-child(3n+1){
        margin-left: 0;
    }
    
    .photo-list-wrap li:nth-child(3n):nth-last-child(-n+4) ~ li {
        margin-bottom: 0;
    }
    
    .photo-list-wrap li+li{
        margin-left: 2%;
    }
    
    .photo-list-wrap li.box-1x1:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    
    .photo-list-wrap li.box-1x1 .inner{
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .photo-list-wrap li .img-box{
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    .photo-list-wrap li .img-box img{
        width: auto;
        height: 100%;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    
    .photo-list-wrap li .txt-box{
        position: absolute;
        z-index: 3;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(110, 110, 110, 0) 0%, #000000 99.98%, #C4C4C4 99.99%, rgba(0, 0, 0, 0) 100%);
        padding: 24px 40px 24px 16px;
    }
    
    .photo-list-wrap li .caption-txt{
        font-weight: bold;
        font-size: 16px;
        line-height: 18px;
        color: #fff;
        margin-bottom: 0;
    }
    
    .photo-list-wrap li span.modal-btn{
        position: absolute;
        right: 16px;
        bottom: 16px;
        width: 21px;
        height: 21px;
        border: 2px solid #fff;
        border-radius: 50%;
        text-align: center;
    }
    
    .photo-list-wrap li span.modal-btn i{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
    
    
    .photo-list-wrap li span.modal-btn i:before{
        content: '';
        width: 2px;
        height: 10px;
        background: #fff;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
    
    .photo-list-wrap li span.modal-btn i:after{
        content: '';
        width: 10px;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
    
    .photo-list-wrap li span.download-btn{
        position: absolute;
        right: 50px;
        bottom: 16px;
        width: 21px;
        height: 21px;
        text-align: center;
        z-index: 4;
        transition: 0.3s;
    }
    
    .photo-list-wrap li span.download-btn i{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
    
    
    .photo-list-wrap li span.download-btn i:before{
        content: '';
        width: 100%;
        height: 100%;
        background: url(../svg/icon_download_wh.svg) no-repeat center center;
        background-size: cover;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
    
    .photo-list-wrap li a:hover span.download-btn{
        opacity: 0.7;
    }
    

}


/* -------------------------------- SP版のスタイルここから ------------------------------------*/

@media screen and (max-width: 750px) {
    
    .photo-category{
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        overflow-x: scroll;
        position: relative;
    }
    
    .photo-category ul{
        width: max-content;
        padding-inline-start: 0;
        padding:0;
        margin-bottom: 0;
    }
    
    .photo-category ul > li{
        cursor: pointer;
        width: 125px;
        text-align: center;
        position: relative;
        margin-bottom: 24px;
        float: left;
    }
    
    .photo-category ul > li+li{
        margin-left: 8px;
    }
    
    
    .photo-category ul > li.active a,
    .photo-category ul > li.active span{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .photo-category ul > li.active > .sub-cate-list span,
    .photo-category ul > li.active > .sub-cate-list a{
        background: none;
        color: #333;
        border: none;
    }
    
    .photo-category ul > li > a,
    .photo-category ul > li > span{
        width: 100%;
        background: #F2F2F2;
        border: 1px solid #898989;
        border-radius: 100px;
        display: block;
        padding: 4px 8px;
        transition: 0.3s;
        font-weight: bold;
        font-size: 12px;
        line-height: 22px;
        position: relative;
        color: #898989;
    }

    
    .photo-category ul > li.sub-cate > span:before{
        position: absolute;
	    top: 50%;
	    right: 8px;
	    margin-left: -30px;
	    content: ' ';
	    border-top: 8px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
	    border-top-color: #898989;
        z-index: 1;
        transform: translateY(-50%);
    }
    .photo-category ul > li.sub-cate.active > span:before{
        border-top-color: #fff;
    }
    
    .photo-category ul > li.sub-cate > span.is-show{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .photo-category ul > li.sub-cate > span.is-show:before{
        border-top-color: #fff;
    }
    

    
    .photo-category li .sub-cate-list{
        position: relative;
	    z-index: 2;
	    top: 10px;
	    left: 50%;
	    display: none;
	    width: 160%;
        height: auto;
	    padding: 16px;
	    text-align: center;
	    border-radius: 6px;
	    background: #fff;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
        transform: translateX(-50%);
        border: 1px solid #CCCCCC;
    }
    
    .photo-category li .sub-cate-list .box-arrow{
        width: 100%;
        height: 20px;
        overflow: hidden;
        z-index: -1;
        position: absolute;
        left: 0;
        top:-20px;
    }
    
    .photo-category li .sub-cate-list .box-arrow:after {
	    position: absolute;
	    bottom: 0;
	    left: 50%;
	    margin-left: -10px;
	    content: ' ';
	    border: 10px solid transparent;
	    border-bottom-color: #fff;
        z-index: 2;
    }
    
    .photo-category li .sub-cate-list .box-arrow:before{
	    position: absolute;
	    bottom: 0;
	    left: 50%;
	    margin-left: -11px;
	    content: ' ';
	    border: 11px solid transparent;
	    border-bottom-color: #CCCCCC;
        z-index: 1;
    }
    
    .photo-category .sub-cate-list ul{
        width: 100%;
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
    
    .photo-category .sub-cate-list li{
        text-align:left;
        margin-bottom: 0;
        float: none;
        width: 100%;
    }
    
    .photo-category .sub-cate-list li+li{
        margin-left: 0;
        margin-top: 8px;
    }
    
    .photo-category .sub-cate-list a{
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        font-size: 12px;
    }
    
    .photo-list-wrap{
        margin-top: 40px;
    }
    
    .photo-list-wrap h3{
        font-weight: bold;
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 24px;
    }
    
    .photo-list-wrap ul{
        width: 100%;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-inline-start: 0;
        padding: 0;
    }
    
    .photo-list-wrap ul+.moreread{
        margin-top: 40px;
    }
    
    .photo-list-wrap ul+ul{
        margin-top: 3%;
    }
    
    .photo-list-wrap li{
        width: 48.5%;
        height: auto;
        position: relative;
        overflow: hidden;
        margin-left: 3%;
        margin-bottom: 3%;
    }
    
    .photo-list-wrap li:nth-child(2n+1){
        margin-left: 0;
    }
    
    .photo-list-wrap li:nth-child(2n):nth-last-child(-n+3) ~ li {
        margin-bottom: 0;
    }
    
    .photo-list-wrap li+li{
        margin-left: 3%;
    }
    
    .photo-list-wrap li.box-1x1:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    
    .photo-list-wrap li.box-1x1 .inner{
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .photo-list-wrap li .img-box{
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    .photo-list-wrap li .img-box img{
        width: auto;
        height: 100%;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    
    .photo-list-wrap li .txt-box{
        position: absolute;
        z-index: 3;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(110, 110, 110, 0) 0%, #000000 99.98%, #C4C4C4 99.99%, rgba(0, 0, 0, 0) 100%);
        padding:16px 50px 16px 8px;
    }
    
    .photo-list-wrap li .caption-txt{
        font-weight: bold;
        font-size: 10px;
        line-height: 18px;
        color: #fff;
        margin-bottom: 0;
    }
    
    .photo-list-wrap li span.modal-btn{
        position: absolute;
        right: 8px;
        bottom: 8px;
        width: 16px;
        height: 16px;
        border: 1px solid #fff;
        border-radius: 50%;
        text-align: center;
    }
    
    .photo-list-wrap li span.modal-btn i{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
    
    
    .photo-list-wrap li span.modal-btn i:before{
        content: '';
        width: 1px;
        height: 10px;
        background: #fff;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
    
    .photo-list-wrap li span.modal-btn i:after{
        content: '';
        width: 10px;
        height: 1px;
        background: #fff;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
    
    .photo-list-wrap-inner .btn-basic{
        max-width: 90%;
    }
    
     .photo-list-wrap li span.download-btn{
        display: none;
    }
    
    .photo-list-wrap li .lity-btn+a{
        display: none;
    }
    

}