@charset "UTF-8";

/* works
---------------------------------------------------------------------------*/
#worksContents .lead {
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
	max-width: 1340px;
	margin: 30px 0 60px;
	padding: 0 60px 0 0;
}

#worksContents .lead h2 {
	float: left;
}

#worksContents .lead .taxonomy-list {
	margin: 10px 0 0;
	font-size: 15px;
	letter-spacing: 0.08em;
}

.tab-nav {
	overflow: hidden;
	margin: 0 0 20px;
}

.tab-nav li {
	float: left;
	margin: 0 20px 0 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.tab-nav li a {
	display: inline-block;
	padding-bottom: 2px;
	padding-left: 1px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.tab-nav li.active a {
	text-decoration: line-through;
}

.tab-content {
	display: none;
	min-height: 14px;
}

.tab-content li {
	float: left;
	position: relative;
	padding: 0 18px 0 0;
	text-align: right;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.tab-content li a{
	text-decoration: underline;
}

.tab-content.txt-num li {
	font-size: 14px;
}

.tab-content li i {
  display: none;
}

.tab-content li.current-cat a {
	text-decoration: line-through;
	color: #888888;
}

/* .footer-img - media query
-----------------------------------*/
@media (max-width: 1500px) {
	#worksContents .lead {
		padding: 0 5% 0 0;
	}	
}

/* works single
---------------------------------------------------------------------------*/
#mainContents #worksContents.single h1 {
	font-size: 21px;
	letter-spacing: 0.1em;
}

/* .works-title
------------------------------------*/
.works-title {
	overflow: hidden;
	width: 100%;
	max-width: 1500px;
	margin: -45px 0 60px;
	letter-spacing: 0.05em;
}

.works-title a {
	text-decoration: underline;
}

/* .works-title-main
------------------------------------*/
.works-title-main {
	float: left;
	width: 50%;
}

.works-title-neme {
	display: inline-block;
	margin: 0 0 4px;
}

.works-title-neme time {
	float: right;
	display: block;
	position: relative;
	margin: 0 -100px 4px 0;
	font-size: 12px;
	text-align: right;
}

.works-title-neme time:before {
	position: absolute;
	top: 14px;
	right: 60px;
	display: block;
	content: '';
	background: #000000;
	width: 35px;
	height: 1px;
	transform: rotate(45deg);
}


.works-title-neme h2 {
	clear: both;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.55;
}

.works-title-main p {
	color: #888888;
	font-size: 15px;
	letter-spacing: 0.05em;
	padding-left: 2px;
}

/* .works-title-sub
------------------------------------*/
.works-title-sub {
	float: right;
	width: 50%;
	margin: 20px 0 0;
	text-align: right;
}

.works-title-sub .sub-client {
	margin-bottom: 10px;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.works-title-sub .sub-client span {
	padding-right: 2px;
	font-size: 12px;
}

.works-title-sub .sub-category {
	color: #666666;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.works-title-sub .sub-category span:before {
	display: inline-block;
	content: ',';
	padding: 0 5px 0 0;
}

.works-title-sub .sub-category span:first-child:before {
	content: none;
}

/* works-content
------------------------------------*/
.works-content {
	overflow: hidden;
	margin: 0 0 40px;
	letter-spacing: 0.02em;
}

/* .works-content-sub
------------------------------------*/
.works-content-sub {
	box-sizing: border-box;
	float: left;
	width: 280px;
	margin: 0 0 80px;
	padding: 0 60px 0 0;
}

.works-content-sub .sub-client {
	margin: 0 0 10px;
	line-height: 1.6;
}

.works-content-sub strong {
	color: #666666;
	font-size: 12px;
	font-weight: 500;
	display: block;
	margin-bottom: 8px;
}

.works-content-sub .sub-client a {
	text-decoration: underline;
}

.works-content-sub .sub-title {
	margin: 0 0 30px;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.works-content-sub .sub-category {
	font-size: 15px;
	line-height: 1.75;
	letter-spacing: 0.02em;
}

.works-content-sub .sub-category span {
	display: block;
}

/* .works-content-main
------------------------------------*/
.works-content-main {
	float: left;
	width: 720px;
	margin: -3px 0 80px;
}

.works-content-main a {
	text-decoration: underline;
}

.works-content-main h3 {
	margin: 0 0 25px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.08em;
}

.works-content-main .detail {
	color: #666666;
	font-size: 15px;
	line-height: 2.2;
}

/* .works-content-sup
------------------------------------*/
.works-content-sup {
	clear: both;
	overflow: hidden;
	position: relative;
}

.works-content-sup .page-nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 270px;
	min-height: 20px;
}

.works-content-sup .page-nav li{
  letter-spacing: 0.15em;
}

.sup {
	overflow: hidden;
	width: 780px;
	margin: 0 0 0 280px;
}

/* .credit
------------------------------------*/
.credit {
	position: relative;
	float: left;
	width: 500px;
	padding: 40px 0 0;
}

.credit dl {
	margin: 0 0 65px;
}

.credit dl:last-child {
	margin: 0 0 55px;
}

.credit dl.nocomment {
	margin: 0 0 25px;
}

.credit dl:last-child.nocomment {
	margin: 0 0 45px;
}

.credit dt {
	overflow: hidden;
	width: 500px;
	margin: 0 0 25px;
}

.credit dd {
	overflow: hidden;
	width: 390px;
	margin: 0 0 20px 110px;
}

.credit figure {
	float: left;
	width: 86px;
}

.credit .txt-set {
	float: right;
	width: 390px;
}

.credit dd .txt-set {
	width: 280px;
}

.credit .txt-set h4 {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	word-break: normal;
	letter-spacing: 0.02em;
}

.credit .txt-set h4.nocomment {
	margin: 20px 0 0;
	/*letter-spacing: 0.12em;*/
}

.credit .txt-set h4 em {
	letter-spacing: 0.1em;
}

.credit .txt-set h4.nocomment em {
	display: block;
	margin: 0 0 2px;
}

.credit .txt-set h4 i {
	position: relative;
	display: inline-block;
	margin: 0 4px 0 0;
	padding: 0 9px 0 12px;
	font-size: 11px;
	font-style: normal;
	letter-spacing: 0.1em;
}

.credit .txt-set h4.nocomment i {
	padding: 0 9px 0 0;
}

.credit .txt-set h4 i:after {
	display: block;
	content: '/';
	position: absolute;
	top: 0;
	right: 0;
}

.credit .txt-set .comment {
	position: relative;
	display: inline-block;
	border-radius: 18px;
	padding: 12px 14px 11px 16px;
	color: #666666;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.credit dt .txt-set .comment { background: #FFFAC9; }
.credit dd .txt-set .comment { background: #EAEAEA; }

.credit .txt-set .comment:after {
	display: block;
	content: '';
	position: absolute;
	top: 7px;
	left: -10px;
	width: 12px;
	height: 14px;
}

.credit dt .txt-set .comment:after {
	background: url(../img/works/bg-comment1.png) no-repeat;
}

.credit dd .txt-set .comment:after {
	background: url(../img/works/bg-comment2.png) no-repeat;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	.credit dt .txt-set .comment:after {
		background: url(../img/works/bg-comment1@2x.png) no-repeat;
		background-size: 12px 14px;
	}
	.credit dd .txt-set .comment:after {
		background: url(../img/works/bg-comment2@2x.png) no-repeat;
		background-size: 12px 14px;
	}
}

/* .client
------------------------------------*/
.credit + .client-wrap {
	float: right;
	width: 240px;
}

.client {
	position: relative;
	margin-bottom: 55px;
	padding: 35px 0 0;
}

.client h4 {
	margin: 0 0 15px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.client.brain h4 {
	margin: 0 0 15px;
	font-size: 14px;
	letter-spacing: 0.05em;
}

.client p,
.client p a {
	color: #666666;
}

.client p {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: 0.08em;
}

.client p a {
	letter-spacing: 0.04em;
	font-size: 12px;
}

.client.brain p {
	margin: 0 0 5px;
	font-size: 13px;
	letter-spacing: 0.1em;
}

.client p a {
	display: block;
	text-decoration: underline;
	line-height: 1.4 !important;
}

.credit:before,
.client:before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: #666666;
	width: 30px;
	height: 1px
}

/* .works-content - media query
-----------------------------------*/
@media (max-width: 1240px) {
	#worksContents.single .innerContents {
		padding: 0 100px 0 60px;
	}
	.works-content-sub {
		width: 240px;
	}
	.works-content-sup .page-nav {
		width: 240px;
	}
	.sup {
		width: 640px;
		margin: 0 0 0 240px;
	}
	.credit {
		width: 400px;
	}
	.credit dt {
		width: 380px;
	}
	.credit dd {
		width: 310px;
		margin: 0 0 20px 70px;
	}
	.credit figure {
		width: 70px;
	}
	.credit figure img {
		width: 100%;
		height: auto;
	}
	.credit .txt-set {
		width: 290px;
	}
	.credit dd .txt-set {
		width: 220px;
	}
	.client {
		width: 210px;
	}
}

@media (max-width: 1180px) {
	.works-content-main {
		width: 600px;
	}	
}

/* .other-works
------------------------------------*/
.other-works {
	box-sizing: border-box;
	width: 100%;
	max-width: 1340px;
	border-top: 1px solid #999999;
	padding: 80px 0 30px 60px;
}

.other-works .works-list ul {
	margin: 0;
}

/* .slider-wrap
---------------------------------------------------------------------------*/
.slider-wrap {
	position: relative;
	margin: 0 0 60px -60px;
	min-width: 1100px;
}

.slider-wrap .slider {
	position: relative;
}

.slider-wrap .slider .inner {
	position: relative;
}

.slider-wrap .slider .inner p {
	position: absolute;
	top: 28px;
	right: 8.3%;
	font-size: 18px;
}

.slider-wrap .slider .inner figure {
	display: block;
	width: 85%;
	padding: 0 0 48px;
}

.slider-wrap .slider .inner figure img {
	width: 100%;
}

.slider-wrap .slider .inner figcaption {
	float: right;
	border-left: 1px solid #666666;
	padding: 16px 20px 18px 18px;
	text-align: right;
	letter-spacing: 0.1em;
}

.slider-wrap .slider .inner .sumo {
	position: absolute;
	bottom: 23px;
	right: 6.8%;
	width: 120px;
	height: 160px;
	z-index: -1;
	transform: translateX(0);
	opacity: 0;
}

.slider-wrap .slider .inner .sumo img {
	position: absolute;
	bottom: 25px;
	left: 300px;
	display: none;
}

.slider-wrap .slider .inner .sumo img.active {
	display: block;
}

.slider-wrap .slider .inner.inner1:last-of-type .txt-num,
.slider-wrap .slider .inner.inner1:last-of-type .sumo,
.slider-wrap .slider .inner.inner1:last-of-type .sumo img {
	display: none !important;
	transform: none !important;
}

/* .slider-num
------------------------------------*/
.slider-num {
	position: absolute;
	top: 30px;
	right: 9.5%;
	width: 42px;
	z-index: 999;
}

.slider-num p {
	position: absolute;
	top: 12px;
	right: 0;
	font-size: 48px;
}

.slider-num p:before {
	display: block;
	position: absolute;
	top: 12px;
	left: -28px;
	content: '';
	border-bottom: 1px solid #000000;
	width: 65px;
	height: 1px;
	transform: rotate(-45deg);
}

/* .slick-prev, .slick-next
------------------------------------*/
.slick-prev,
.slick-next {
	display: block;
	position: absolute;
	background: none;
	border: none;
	width: 38px;
	height: 38px;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	z-index: 999;
	opacity: 0;
}

.slick-prev:before,
.slick-next:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 38px;
	height: 38px;
	-webkit-transition: .2s linear;
  -moz-transition: .2s linear;
  -o-transition: .2s linear;
  -ms-transition: .2s linear;  
  transition: .2s linear;
}

.slick-prev:before {
	background: url(../img/share/btn-slider-prev.png) no-repeat 0 0;
}

.slick-next:before {
	background: url(../img/share/btn-slider-next.png) no-repeat 0 0;
}

.slick-prev:hover:before,
.slick-next:hover:before {
	opacity: .2;
}

.slider-line {
	position: absolute;
	width: 1px;
	z-index: 999;
}

.slider-line span {
	position: absolute;
	display: block;
	background: #dbdbdb;
	width: 1px;
	text-indent: -9999px;
}

.slider-line span.line-next {
	bottom: 70px;
}

.slider-line span.line-prev {
	top: 70px;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	.slick-prev:before {
		background: url(../img/share/btn-slider-prev@2x.png) no-repeat 0 0;
		background-size: 38px 38px;
	}
	.slick-next:before {
		background: url(../img/share/btn-slider-next@2x.png) no-repeat 0 0;
		background-size: 38px 38px;
	}
}

.slider-num.none,
.slider-line.none {
	display: none;
}

/* slick-dotted
------------------------------------*/
.slick-dotted.slick-slider {
	margin-bottom: 30px;
}

.slick-dots {
	display: block;
	position: absolute;
	bottom: 60px;
	width: 8px;
	text-align: center;
	z-index: 999;
}

.slick-dots li {
	position: relative;
	width: 8px;
	height: 8px;
	margin: 0 0 12px !important;
	cursor: pointer;
}

.slick-dots li button {
	display: block;
	background: none;
	border: 0;
	outline: none;
	width: 8px;
	height: 8px;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
	outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
	opacity: 1;
}

.slick-dots li button:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: #000000;
	border-radius: 50%;
	width: 8px;
	height: 8px;
	opacity: .2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
	opacity: .8;
	color: #000000;
}

/* .slider-wrap - media query
-----------------------------------*/
@media (min-width: 1500px) {	
	.slider-wrap {
		margin: 0 0 60px 0;
		width: 100%;
	}
	.slider-wrap .slider .inner {
		margin: 0 200px 0 0;
	}	
	.slider-wrap .slider .inner p {
		top: 28px;
		right: -91px;
	}
	.slider-wrap .slider .inner figure {
		width: 1200px !important;
	}
	.slider-num {
		top: 30px;
		left: 1280px;
	}
	.slick-prev,
	.slick-next {
		left: 1280px;
	}
	.slider-line {
		left: 1298px;
	}
	.slick-dots {
		left: 1294px;
	}
	.slider-wrap .slider .inner .sumo {
		right: -115px;
	}
}

@media (max-width: 1499px) {
	.slider-wrap .slider .inner.inner1:last-of-type {
		transform: translateX(100%) !important;
	}
}

@media (max-width: 1450px) {
	.slider-wrap .slider .inner .sumo {
		right: 6.5%;
	}
}

@media (max-width: 1400px) {
	.slick-dots li {
		margin: 0 0 10px !important;
	}
	.slider-wrap .slider .inner .sumo {
		right: 6.2%;
	}
}

@media (max-width: 1350px) {
	.slider-wrap .slider .inner .sumo {
		right: 5.7%;
	}
}

@media (max-width: 1300px) {
	.slick-dots {
		bottom: 50px;
	}
	.slider-wrap .slider .inner .sumo {
		right: 5.3%;
	}
}

@media (max-width: 1250px) {
	.slider-wrap .slider .inner .sumo {
		right: 4.9%;
	}
}

@media (max-width: 1200px) {
	.slider-num {
		right: 10%;
	}
	.slider-wrap .slider .inner .sumo {
		right: 4.4%;
	}
}

@media (max-width: 1150px) {
	.slider-wrap .slider .inner .sumo {
		right: 4.0%;
	}
}

@media (max-width: 1100px) {
	.slider-wrap .slider .inner .sumo {
		right: 39px;
	}
}