@charset "UTF-8";

/*============================
	works 共通
============================*/

@media screen and (max-width:1024px) {}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {}


/*============================
page__mv
============================*/
.page__mv {
    background: url(../img/works/mv_works_bg.jpg) no-repeat center center/cover;
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {}



/*============================
	contents
============================*/
.contents {
    padding: 90px 0 50px;
}

.cnt__tabwrap{
    margin: 0 auto 60px;
}
.cnt__tab{
    width: 135px;
    margin: 5px;
    line-height: 35px;
    background: #0e5ca7;
    border: solid 1px #0e5ca7;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0;
    text-align: center;
    cursor: pointer;
    transition: .5s;
}
.cnt__tab a{
    color: #fff;
    display: block;
}
.cnt__tab.active{
    background: #fff;
    color: #0e5ca7;
}
.cnt__tab.active a{
    color: #0e5ca7;
}
.cnt__atc {
	width: 240px;
	margin: 0 10px 40px 10px;
    margin-bottom: 40px;
}

.cnt__atc.atc05 {
    margin-bottom: 50px;
}

.cnt__img {
    flex: 0 1 200px;
}

.cnt__txtwrap {
    padding: 0 0 0 0;

}

.cnt__date {
    font-size: 1.3rem;
    color: #424242;
    letter-spacing: 0;
}

.cnt__ctg {
    font-size: 1.3rem;
    color: #424242;
    letter-spacing: 0;
    margin-bottom: 20px;
}
.ctg-box{
    display: inline-block;
    white-space: nowrap;
    min-width: 80px;
    line-height: 22px;
    text-align: center;
    background: #0e5ca7;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0;
    padding: 0 10px;
    margin: 0 1px;
}
.cnt__txt {
    font-size: 1.6rem;
    letter-spacing: 0;
   
}
.cnt__txt a{
    color: #0e5ca7;
    text-decoration: underline;
}

/* pagenation */
.pagenation{margin-top: 60px;}
.pgn__ul {
    max-width: 420px;
    margin: 0 auto;
}

.pgn__prev {
    margin-right: 10%;
}

.pgn__prev a {
    display: block;
    line-height: 30px;
    width: 70px;
    background: #0e5ca7;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: .1em;
    border: solid 2px #0e5ca7;

}

.pgn__prev img {
    width: 7px;
    margin-right: 5px;
    vertical-align: middle;
}

.pgn__next {
    margin-left: 10%;
}

.pgn__next a {
    display: block;
    line-height: 30px;
    width: 70px;
    background: #0e5ca7;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: .1em;
    border: solid 2px #0e5ca7;

}

.pgn__next img {
    width: 9px;
    margin-left: 5px;
    vertical-align: middle;
}

.pgn__num {
    padding: 0 2.5px;
}

.pgn__num a {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    width: 30px;
    line-height: 30px;
    background: #0e5ca7;
    color: #fff;
    border: solid 2px #0e5ca7;
}

.pgn__num.active a {
    background: #fff;
    color: #0e5ca7;
}

.pgn__back a {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    width: 70px;
    line-height: 30px;
    background: #0e5ca7;
    color: #fff;
    border: solid 2px #0e5ca7;
}

@media screen and (max-width:1024px) {
    .contents {
        padding: 60px 0 30px;
    }

    .cnt__atc {
        padding: 0 0 25px;
        margin-bottom: 25px;
    }

    .cnt__atc.atc05 {
        margin-bottom: 30px;
    }

    .cnt__img {
        flex: 0 1 200px;
    }

    .cnt__txtwrap {
        padding: 0 0 0 0;
        flex: 1 1 auto;

    }

    .cnt__date {
        font-size: 1.2rem;
    }

    .cnt__ctg {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    .ctg-box{
        min-width: 60px;
        line-height: 20px;
        font-size: 1rem;
         padding: 0 10px;
    }

    .cnt__txt {
        font-size: 1.4rem;
    }

    /* pagenation */
    .pgn__ul {
        max-width: 420px;
        margin: 0 auto;
    }

    .pgn__prev {
        margin-right: 10%;
    }

    .pgn__prev a {
        line-height: 30px;
        width: 70px;
        font-size: 1.4rem;
    }

    .pgn__prev img {
        width: 7px;
        margin-right: 5px;
    }

    .pgn__next {
        margin-left: 10%;
    }

    .pgn__next a {
        line-height: 30px;
        width: 70px;
        font-size: 1.4rem;
    }

    .pgn__next img {
        width: 9px;
        margin-left: 5px;
        vertical-align: middle;
    }

    .pgn__num {
        padding: 0 2.5px;
        font-size: 1.4rem;
    }

    .pgn__num a {
        width: 30px;
        line-height: 30px;
        font-size: 1.4rem;
    }

    .pgn__back a {
        line-height: 30px;
        width: 70px;
        font-size: 1.4rem;
    }

}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {
    .contents {
        padding: 60px 0 30px;
    }
    .contents .flex{
        display: flex;
    }
    .cnt__tabwrap{
        max-width: auto;
        margin: 0 auto 30px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .cnt__tab{
        width: 28.6vw;
        line-height: 8vw;
        margin-bottom: 5px;
        font-size: 3vw;
    }
    .cnt__atc {
    	width: 45vw;
        padding: 0 0 0 0;
        margin: 0 2vw 4vw 0;
    }
    .cnt__atc:nth-child(2n) {
        margin: 0 0 15px 0;
    }

    .cnt__atc.atc05 {
        margin-bottom: 30px;
    }

    .cnt__img {

    }

    .cnt__txtwrap {
        padding: 0 0 0 0;
        flex: 1 1 auto;
    }

    .cnt__date {
        font-size: 1rem;
        line-height: 1;
        display: block;
        margin: 0 0 5px;
    }

    .cnt__ctg {
        font-size: 1rem;
        line-height: 1;
        margin-bottom: 10px;
        display: inline-block;
    }
    .ctg-box{
        font-size: 1rem;
        line-height: 18px;
    }

    .cnt__txt {
        font-size: 1.2rem;
    }


    /* pagenation */
    .pgn__ul {
        max-width: 420px;
        margin: 0 auto;
        display: flex;
    }

    .pgn__prev {
        margin-right: 5%;
    }

    .pgn__prev a {
        line-height: 30px;
        width: 75px;
        font-size: 1.2rem;
    }

    .pgn__prev img {
        width: 5px;
        margin-right: 5px;
    }

    .pgn__next {
        margin-left: 5%;
    }

    .pgn__next a {
        line-height: 30px;
        width: 70px;
        font-size: 1.2rem;
    }

    .pgn__next img {
        width: 7px;
        margin-left: 5px;
    }

    .pgn__num {
        padding: 0 2.5px;
        font-size: 1.4rem;
    }

    .pgn__num a {
        width: 25px;
        line-height: 25px;
        font-size: 1.2rem;
    }

    .pgn__back a {
        line-height: 30px;
        width: 70px;
        font-size: 1.2rem;
    }
}

/*============================
works__detail
============================*/
.works__detail {
    padding: 40px 0 120px;
}

.detail__date {
    font-size: 1.6rem;
    color: #424242;
    margin: 0 10px 20px 0;
    line-height: 1;
    letter-spacing: 0;
    display: inline-block;

}

.detail__ctg {
    display: inline-block;
    min-width: 135px;
    line-height: 23px;
    background: #0e5ca7;
    color: #fff;
    text-align: center;
    padding: 0 10px;
    letter-spacing: 0;
}

.detail__ttl {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0;
    padding-bottom: 20px;
    border-bottom: solid 1px #222;
    margin-bottom: 30px;
}

.post-slider{
	width: 768px;
	margin: 0 auto;
	}
.post-slider .works-slider{
	width: 768px;
	}
.post-slider .works-slider div{
	width: 768px;
	height: 576px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
	}
.post-slider .works-thumbnail .slick-list .slick-track{
	transform: unset !important;
	}

.post-slider .works-thumbnail .slick-list .slick-track .slide{
	width: 76px;
	height: 76px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.5;
  transition: opacity 0.3s linear;
	}
.post-slider .works-thumbnail .slick-list .slick-track .slide.slick-current{
  opacity: 1;
  
	}

.slick-prev,
.slick-next{
	width: 30px;
	height: 30px;
	}

.slick-next {
    right: -40px;
}
.slick-prev {
    left: -40px;
}

.slick-prev:before,
.slick-next:before{
	color:#0e5ca7;
	font-size:30px;
	}

.post-spec{
	width: 768px;
	margin: 30px auto 0 auto;
	}

.post-spec dl{
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	border: 1px solid #ccc;
	border-bottom: none;
	}
.post-spec dl dt{
	background: #f5f5f5;
	padding: 10px;
	width: 150px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}
.post-spec dl dd{
	background: #fff;
	padding: 10px;
	width: calc(100% - 150px);
	border-bottom: 1px solid #ccc;
	}
.post-txt {
        margin-top: 30px;
        font-size: 1.5rem;
        line-height: 1.5;
    }

.post-txt p{
	margin: 1.5em 0;
	line-height: 1.5;
	}
.post-txt img {
    margin: 15px 0;
}

.post-txt h2 {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0;
    padding: 0 0 10px 10px;
    border-left: solid 5px #333;
    border-bottom: solid 1px #333;
    margin: 20px 0;
}

.post-txt h3 {
    font-size: 1.8rem;
    letter-spacing: 0;
    margin: 20px 0;
    font-weight: bold;
}

@media screen and (max-width:1024px) {
	
	.post-slider{
		width: 740px;
		margin: 0 auto;
	}
	.post-slider .works-slider div{
	width: 740px;
	height: 555px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
	}
.post-slider .works-thumbnail .slick-list .slick-track .slide{
	width: 74px;
	height: 74px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
	}
	
	.slick-next {
	    right: 45px;
	    z-index: 10000;
	}
	.slick-prev {
	    left: 20px;
	    z-index: 10000;
	}
	
    .works__detail {
        padding: 40px 0 80px;
    }

    .detail__date {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    .detail__ctg {
        min-width: 100px;
        line-height: 23px;
        padding: 0 10px;
        font-size: 1.4rem;
    }

    .detail__ttl {
        font-size: 1.8rem;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    
    .post-txt p {
        font-size: 1.4rem;
    }

    .post-txt img {
        margin-bottom: 40px;
    }

    .post-txt h2 {
        font-size: 1.6rem;
        padding: 0 0 10px 10px;
        margin: 15px 0;
    }

    .post-txt h3 {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }

}

@media screen and (max-width:768px) {
	
	.post-slider{
		width: 740px;
		margin: 0 auto;
	}
	.post-slider .works-slider div{
	width: 740px;
	height: 555px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
	}
.post-slider .works-thumbnail .slick-list .slick-track .slide{
	width: 74px;
	height: 74px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
	}
  
	
	}

@media screen and (max-width:767px) {
    .works__detail {
        padding: 40px 0 60px;
    }

    .detail__date {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .detail__ctg {
        min-width: 80px;
        line-height: 23px;
        padding: 0 10px;
        font-size: 1.2rem;
    }

    .detail__ttl {
        font-size: 1.6rem;
        line-height: 1.6;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .detail__img {
        margin-bottom: 30px;
    }

    .post-txt h2 {
        font-size: 1.4rem;
        padding: 0 0 5px 5px;
        margin: 20px 0;
    }
    
    .post-slider{
	width: 94vw;
	margin: 0 auto;
	}
	.post-slider .works-slider div{
	width: 94vw;
	height: 79.5vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
	}
.post-slider .works-thumbnail .slick-list .slick-track .slide{
	width: 9.4vw;
	height: 9.4vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
	}
	
	.slick-prev,
	.slick-next{
		display: none;
		}
	
	.slick-prev:before,
	.slick-next:before{
		color:#0e5ca7;
		font-size:30px;
		display: none;
	}
	
	.post-spec{
		width: 94vw;
		}
	
	.post-spec dl{
		display: -webkit-flex;
	    display: -moz-flex;
	    display: flex;
		flex-wrap: wrap;
		align-items: stretch;	
		width: 100%;
		border: 1px solid #ccc;
		border-bottom: none;
	}
	.post-spec dl dt{
		background: #f5f5f5;
		padding: 5px;
		width: 150px;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	.post-spec dl dd{
		background: #fff;
		padding: 5px;
		width: calc(100% - 150px);
		border-bottom: 1px solid #ccc;
	}

.post-txt p {
        font-size: 1.4rem;
        margin: 20px 0;
    }
	
    .post-txt h3 {
        font-size: 1.4rem;
        margin: 20px 0;
    }

}