/*
----------------------------------------
works
----------------------------------------
*/

.page-header {
	background: url( ../img/works/2x/header-bg.png ) center center / cover no-repeat;
}

.single .page-header {
	background-image: url( ../img/works/2x/header-bg.png );
	background-position: center 10%;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.single .page-header::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: -moz-linear-gradient( to right, #9dc419, #0bb84a );
	background: -webkit-linear-gradient( to right, #9dc419, #0bb84a );
	background: linear-gradient( to right, #9dc419, #0bb84a );
	opacity: .5;
}

.single .page-header .wrap {
	position: relative;
	z-index: 1;
}

.single .info-box {
	padding: 2.8rem 0 9.8rem;
	margin-bottom: 3.5rem;
}

.info-box .block-03 {
	margin: 0;
}

.info-box .block-03 .img img {
	width: 100%;
	height: 510px;
}

.info-box .block-03.img-right .img {
	left: calc( 50% + 55px );
}

.slick-dots {
	text-align: left;
	padding: 0 12px;
}

.info-box .block-03.img-right .txt {
	padding: 20px 15px 0 0;
}

.block-table {
	margin-top: 1.5rem;
}

.block-table .flex > div {
	width: 50%;
}

.block-table .flex > div:nth-child( even ) {
	border-right: none;
}

.block-table h4 {
	border: none;
}

.block-table .flex > div:first-child h4,
.block-table .flex > div:nth-child( 2 ) h4 {
	border-top: solid 2px #8fc31f;
}

.block-table .flex p {
	-js-display: flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
}

.block-table .flex.column {
	display: block;
	border-bottom: solid 2px #8fc31f;
}

.block-table .flex.column > div {
	width: 100%;
	-js-display: flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	border: none;
	border-top: dashed 1px #8fc31f;
}

.block-table .flex.column > div:first-child {
	border-top: solid 2px #8fc31f;
}

.block-table .flex.column > div h4 {
	width: 45%;
	border: none !important;
}

.block-table .flex.column p {
	width: 55%;
}

.works-box {
	padding: 4rem 0 1rem;
}

.cont-block {
	margin-bottom: 9.5rem;
}

.cont-block .works-img {
	line-height: .5;
}

.cont-block .works-img img {
	width: 100%;
	height: 500px;
}

.cont-ttl + .cont-block .works-img {
	margin-top: -34px;
}

.cont-block .works-read {
	margin-top: 3rem;
	line-height: 2.4;
	letter-spacing: .8px;
}

.point-list {
	padding-bottom: 7rem;
}

.point-list .block-list .block-03 .mov-ttl .en {
	letter-spacing: 4px;
	margin-bottom: 12px;
}

.point-list .block-list .block-03 .img + .wrap .txt {
	padding: 1rem 0;
}

.block-list .block-03 .txt h3 {
	margin: 0 0 28px 0;
}

.block-list .block-03:last-child {
	margin-bottom: 0;
}

.point-list .mov-ttl .mov-txt {
	line-height: 1.4;
}

.ttl-block {
	margin: 2rem 0 4.2rem;
}

.txt-block {
	margin-bottom: 6rem;
}

.dl-block {
	margin-bottom: 4rem;
}

.nav-wrap {
	padding-bottom: 7.5rem;
}

.works-list-box {
	padding: 0 0 11rem;
}

.single .works-list-box {
	padding: 0 0 14.5rem;
}

.works-list-box .heading-01 {
	margin-bottom: 30px;
}

.pagination {
	margin-top: 33px;
}

/* archive */

.archive .info-box {
	margin: 5rem 0 2rem;
}

.archive .info-box .read {
	text-align: center;
	margin: 3rem 0 7.5rem;
	letter-spacing: 1.2px;
}

.archive .info-box .img {
	line-height: .5;
	margin-bottom: 4rem;
}

.archive .info-box .img img {
	width: 100%;
	max-height: 500px;
}

.archive .cat-box {
	background: #f2f2f2;
	padding: 3rem 0 1rem;
	margin-bottom: 4rem;
}

.archive .cat-box .flex li {
	width: calc( ( 100% - 60px ) / 3 );
	margin-right: 30px;
	margin-bottom: 20px;
}

.archive .cat-box .flex li:nth-child( 3n ) {
	margin-right: 0;
}

.archive .cat-box select {
	width: 100%;
	background: #fff url( ../img/works/2x/arrow-select.png ) right 20px center / 10px no-repeat !important;
	margin: 0 !important;
	border: solid 1px #ccc !important;
	padding: 20.5px 40px 20.5px 20px !important;
	letter-spacing: .8px;
}


/*
----------------------------------------
1400
----------------------------------------
*/

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

	.info-box .block-03.img-right .img {
		left: calc( 50% + 25px );
	}

	.info-box .block-03 .img img {
		height: 450px;
	}

	.block-list .block-03 .txt .num {
		font-size: 16rem;
		top: 0;
	}

	.cont-block .works-img img {
		height: 450px;
	}

}


/*
----------------------------------------
1200
----------------------------------------
*/

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

	.block-03 .txt p {
		line-height: 2;
		margin-bottom: 10px;
	}

	.info-box .block-03 .img img {
		height: 360px;
	}

	.info-box .block-03.img-right .img {
		left: calc( 50% + 15px );
	}

	.cont-ttl + .cont-block .works-img {
		margin-top: -25px;
	}

	.cont-block .works-img img {
		height: 400px;
	}

	.archive .cat-box .flex li {
		width: calc( ( 100% - 40px ) / 3 );
		margin-right: 20px;
	}

}


/*
----------------------------------------
1000
----------------------------------------
*/

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

	.cont-block .works-img img {
		height: 35vw;
	}

}


/*
----------------------------------------
768
----------------------------------------
*/

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

	.single .info-box {
		padding: 1.5rem 0 0;
		margin-bottom: 3rem;
	}

	#contents .slick-dotted.slick-slider {
		margin-bottom: 50px;
	}

	.slick-dots {
		text-align: center;
	}

	.info-box .block-03.img-right .img {
		left: 0;
	}

	.info-box .block-03.img-right .txt {
		padding: 0;
	}

	.info-box .block-03 .txt h3 {
		font-size: 2.4rem;
	}

	.block-table {
		margin-top: 10px;
	}

	.cont-ttl + .cont-block .works-img {
		margin-top: -20px;
	}

	.cont-block {
		margin-bottom: 4rem;
	}

	.cont-block .works-img img {
		height: 50vw;
	}

	.cont-block .works-read {
		margin-top: 2rem;
		line-height: 2;
		letter-spacing: .4px;
	}

	.works-box {
		padding: 1rem 0;
	}

	.puzzle-01 .inversion img:nth-child( 1 ) {
		top: -25px;
		right: 16vw;
	}

	.puzzle-01 .inversion img:nth-child( 2 ) {
		top: 20px;
		right: 6vw;
	}

	.ttl-block {
		margin-bottom: 3rem;
	}

	.txt-block {
		margin-bottom: 4rem;
	}

	.txt-block p {
		font-size: 1.5rem;
	}

	.dl-block {
		margin-bottom: 2rem;
	}

	.nav-wrap {
		margin-top: 1rem;
		padding-bottom: 4rem;
	}

	.point-list {
		padding-bottom: 2rem;
	}

	.post-nav {
		margin: 3rem 0 1rem;
	}

	.works-list-box .heading-01 {
		margin-bottom: 20px;
	}

	.archive .info-box {
		margin: 1.5rem 0;
	}

	.archive .info-box .ttl-02 .jp {
		margin-bottom: 20px;
	}

	.archive .info-box .read {
		letter-spacing: .4px;
		text-align: left;
		margin: 0 0 3rem;
	}

	.archive .info-box .img {
		margin-bottom: 2rem;
	}

	.archive .info-box .img img {
		height: 50vw;
	}

	.archive .cat-box {
		padding: 2rem 0 1rem;
		margin-bottom: 2rem;
	}

	.archive .cat-box .flex li {
		width: 100%;
		margin: 0 0 10px;
	}

	.archive .cat-box select {
		padding: 15.5px 40px 15.5px 20px !important;
	}

	.works-list-box {
		padding: 0 0 4rem !important;
	}

}


/*
----------------------------------------
hover
----------------------------------------
*/

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