@charset "UTF-8";
/* base.css */

/* break point
tab 560px以上 @media screen and (min-width: 560px) {…}
pc  960px以上 @media screen and (min-width: 960px) {…}*/

/* works/index.html
#works
/* works/id_20xxxx.html,
#works_detail

footer
------------------------------------------ */
.breadcrumbs {
	text-align: center;
	position: relative;
	padding-top: 100px;
}

.breadcrumbs::before {
	position: absolute;
	content: '';
	top: 0;
	left: 50%;
	width: 1px;
	height: 80px;
	background-color: rgba(22, 22, 21, 0.3);
}

.breadcrumbs ul {
	padding-bottom: 1em;
	display: flex;
	justify-content: center;
}

.breadcrumbs li:first-child::before {
	display: none;
}

.breadcrumbs li:before {
	content: '>';
}

.breadcrumbs li {
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	font-smoothing: subpixel-antialiased;
}

.breadcrumbs li a {
	padding: 0 0.5em;
}

.breadcrumbs li.current a {
	color: #999;
}

.page-nation {
	margin-top: 2.5em;
	display: flex;
	justify-content: space-between;
}

.page-nation p a {
	font-family: "Karla", sans-serif;
	letter-spacing: 0.05em;
	color: #161615;
	font-weight: 500;
}

footer .note {
	padding-bottom: 50px;
	font-size: 1.1rem;
	text-align: center;
	position: relative;
	padding-top: 100px;
}

footer .note::before {
	position: absolute;
	content: '';
	top: 0;
	left: 50%;
	width: 1px;
	height: 80px;
	background-color: rgba(22, 22, 21, 0.3);
}

@media screen and (min-width: 560px) {
	.page-nation {
		margin: 2.5em auto 0 auto;
		width: 80%;
		max-width: 800px;
	}

	.page-nation p a {
		font-size: 1.6rem;
	}
}

/* works/index.html
#works
------------------------------------------ */
/* effect */
#works .fadein-title {
	animation: fadein-title 800ms cubic-bezier(0.77, 0, 0.11, 1) 200ms both;
}

@keyframes fadein-title {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#works .fadein-content {
	animation: fadein-content 2s ease 0s both;
}

@keyframes fadein-content {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#works .fadein-content ul>li {
	overflow: hidden;
}

#works .fadein-content ul>li img {
	transform: scale(1);
	transition: 0.5s ease-out;
}

#works .fadein-content ul>li:hover img {
	transform: scale(1.05);
}

#works .opening>section {
	margin: 150px 30px 30px 30px;
}

#works .title h1 {
	text-align: center;
}

#works .title h1 img {
	margin-bottom: 40px;
}

#works .opening ul>li {
	padding: 0 25px 60px 25px;
	width: 88.2352%;
	height: 65.0725%;
}

#works .opening ul>li a img.border {
	border: 1px solid #f5f5f5;
	box-sizing: border-box;
}

#works .opening .btn-area {
	margin-bottom: 65px;
	text-align: center;
}

#works .btn-arr {
	position: relative;
	display: inline-block;
	padding: .5em .5em .55em;
	text-align: center;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .1em;
	white-space: nowrap;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#works .btn-arr::after {
	position: absolute;
	content: '';
	top: 50%;
	right: -1.2em;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	background-image: url(../img/common/icon_arr.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	transition: right .2s;
}

#works .btn-arr:hover::after {
	right: -1.9em;
}

#works .opening .note {
	text-align: left;
	font-size: 1.1rem;
	line-height: 1.6;
}

@media screen and (min-width: 560px) {
	#works .opening>section {
		width: 76.3020%;
		margin: 135px auto 65px auto;
	}

	#works .opening ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
	}

	#works .opening ul>li {
		width: 47.3214%;
		height: 46.1819%;
		padding: 0 0 65px 0;
	}
}

@media screen and (min-width: 960px) {
	#works .opening>section {
		margin: 250px auto 65px auto;
	}

	#works .title h1 img {
		width: 118px;
		height: 51.19px;
	}

	#works .opening ul>li {
		width: 29.1208%;
		height: 21.427%;

	}

	#works .opening ul:after {
		content: "";
		display: block;
		width: 29.1208%;
		height: 0;
	}
}

@media screen and (min-width: 1400px) {
	#works .opening>section {
		width: 960px;
	}

	#works .opening .note {
		text-align: center;
	}

	#works .opening ul>li {
		width: 265px;
		height: 195px;
	}

	#works .opening ul:after {
		content: "";
		display: block;
		width: 265px;
		height: 0;
	}
}

/* works/id_20xxxx.html
#works_detail
------------------------------------------ */
/* effect */
#works_detail .fadein-title {
	animation: fadein-title 800ms cubic-bezier(0.77, 0, 0.11, 1) 200ms both;
}

@keyframes fadein-title {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#works_detail .fadein-content {
	animation: fadein-content 2s ease 0s both;
}

@keyframes fadein-content {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#works_detail {
	background: url(../img/common/bg_fabric.png) #fff;
}

#works_detail .first {
	padding: 135px 30px 30px 30px;
}

#works_detail .second {
	padding: 50px 30px 30px 30px;
	background-color: #f1f1f1;
}

#works_detail .title {
	margin-bottom: 40px;
	text-align: center;
	line-height: 1.4;
}

#works_detail .title h1 {
	color: #000;
	font-size: 1.8rem;
	font-weight: 600;
}

#works_detail .title h1>span {
	font-size: 1.6rem;
}

#works_detail .title p {
	font-size: 1.1rem;
}

#works_detail .title p>a {
	position: relative;
	text-decoration: underline !important;
}

#works_detail .title p>a::after {
	position: absolute;
	content: '';
	top: 0.1rem;
	right: -1.5rem;
	width: 10px;
	height: 10px;
	background-image: url(../img/common/icon_window.svg);
	background-repeat: no-repeat;
	background-position: center center;
}

#works_detail .thumb-list ul li {
	margin-bottom: 30px;
	text-align: center;
	line-height: 1.4;
}

#works_detail .thumb-list ul.box_three li {
	margin-bottom: 0;
	line-height: 0;
}

#works_detail .thumb-list ul.box_slide li>img,
#works_detail .thumb-list ul.box_border li>img {
	border: 1px solid #f5f5f5;
}

#works_detail .thumb-list ul li>small {
	font-size: 1.1rem;
}

#works_detail .detail {
	background-color: #f1f1f1;
}

#works_detail .detail dl {
	line-height: 1.6;
}

#works_detail .detail dl dt {
	font-size: 1.1rem;
	color: #666;
}

#works_detail .detail dl dd {
	margin-bottom: 1.3rem;
	font-size: 1.3rem;
}

#works_detail .detail dl dd:last-child {
	margin-bottom: 35px;
}

#works_detail .detail p {
	font-size: 1.3rem;
}

#works_detail .detail p .atten {
	color: #cc0000;
	font-size: 1.2rem;
}

#works_detail p.external>a {
	position: relative;
	margin-right: 1.5rem;
	color: #999;
	text-decoration: underline !important;
}

#works_detail p.external>a::after {
	position: absolute;
	content: '';
	top: 0.1rem;
	right: -1.5rem;
	width: 10px;
	height: 10px;
	background-image: url(../img/common/icon_window.svg);
	background-repeat: no-repeat;
	background-position: center center;
}

#works_detail p.internal>a {
	color: #999;
	text-decoration: underline !important;
}

#works_detail footer {
	background-color: #f1f1f1;
}

@media screen and (min-width: 560px) {
	#works_detail .first {
		padding: 0;
		margin: 135px auto 30px auto;
		width: 60.6060%;
	}

	#works_detail .detail {
		width: 60.6060%;
		margin: 0 auto;
	}

	#works_detail .thumb-list {
		margin: 0 auto;
		width: 100%;
		max-width: 800px;
	}

	#works_detail .thumb-list ul li {
		margin-bottom: 50px;
	}

	#works_detail .thumb-list ul.box {
		padding: 0 5%;
		display: flex;
		justify-content: space-between;
	}

	#works_detail .thumb-list ul.box_sec {
		padding: 0;
	}

	#works_detail .thumb-list ul.box li {
		width: 100%;
		max-width: 320px;
	}

	#works_detail .thumb-list ul.box_sec li {
		width: 100%;
		max-width: 360px;
	}

	#works_detail .thumb-list ul.box li:first-child,
	#works_detail .thumb-list ul.box_photo li:first-child {
		padding-right: 8%;
	}

	#works_detail .thumb-list ul li:last-child {
		margin-bottom: 50px;
	}

	#works_detail .detail p {
		font-size: 1.6rem;
		line-height: 2;
		letter-spacing: 0.1em;
	}

	#works_detail .thumb-list ul.box_photo {
		display: flex;
		justify-content: space-between;
	}

	#works_detail .thumb-list ul.box_photo li {
		width: 100%;
	}

	@media screen and (min-width: 960px) {
		#works_detail .first {
			margin: 250px auto 50px auto;
			width: 76.3020%;
		}

		#works_detail .title {
			line-height: 1.6;
		}

		#works_detail .title h1 {
			font-size: 2.2rem;
		}

		#works_detail .title h1.sec {
			font-size: 3.2rem;
		}

		#works_detail .title p {
			font-size: 1.3rem;
		}

		#works_detail .thumb-list ul li>small {
			font-size: 1.3rem;
			line-height: 2.5;
		}

		#works_detail .thumb-list ul li .sp {
			display: none;
		}

		/* start 3column */
		#works_detail .thumb-list ul.box_three {
			padding: 0 5%;
			display: flex;
			justify-content: space-between;
		}

		#works_detail .thumb-list ul.box_three li {
			width: 100%;
			max-width: 245px;
			padding-right: 4%;
		}

		#works_detail .thumb-list ul.box_three li:last-child {
			padding-right: 0;
			margin-bottom: 50px;
		}

		#works_detail .thumb-list ul.box_slide {
			padding: 0 5%;
			display: flex;
			justify-content: space-between;
		}

		#works_detail .thumb-list ul.box_slide li {
			width: 100%;
			max-width: 320px;
		}

		/* end 3column */
		#works_detail .detail {
			width: 60.6060%;
			max-width: 600px;
		}

		#works_detail .detail dl {
			width: 100%;
			margin: 0 auto 35px auto;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			line-height: 2.2;
		}

		#works_detail .teams dl {
			align-items: flex-start;
		}

		#works_detail .detail.single dl {
			justify-content: center;
		}

		#works_detail .detail dl dt {
			padding-right: 3%;
			width: 27%;
		}

		#works_detail .detail dl dd {
			margin-bottom: 0;
			width: 70%;
			font-size: 1.4rem;
		}

		#works_detail .detail.single dl dt,
		#works_detail .detail.single dl dd {
			padding-right: 1rem;
			width: auto;
		}

		#works_detail .detail_sec dl dt {
			padding-right: 3%;
			width: 32%;
		}

		#works_detail .detail_sec dl dd {
			width: 65%;
		}

		#works_detail .detail dl dd:last-child {
			margin-bottom: 0;
		}
	}

	@media screen and (min-width: 1400px) {
		#works_detail .first {
			width: 960px;
		}
	}