@charset "utf-8";

.wrapper {
	padding-top: 170px;
}

/***************
FOOTER*/
footer {
	background: #1a1a1a;
}



/*************************
 * works一覧ページ
 */
#works-more h2 {
	position: relative;
	font-size: 3rem;
	text-align: center;
	font-family: 'Playfair Display SC', serif;
	/* color: #b1986a; */
	/* color: #4984c5; */
	letter-spacing: 3px;
	font-weight: normal;
}

#works-more h5 {
	font-size: 1.4rem;
	color: #e1e0e0;
	padding-bottom: 5px;
	font-weight: normal;
}

#works-more .contents {
	padding: 80px 0 150px;
	margin: auto;
	width: 75%;
	max-width: 1100px;
}

/* ギャラリー */
#gallery-more {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

#gallery-more-list {
	margin-right: -2%;
}

#gallery-more dl {
	vertical-align: top;
	display: inline-block;
	width: 23%;
	margin-right: 2%;
	margin-bottom: 10%;
	min-width: 205px;
}

#gallery-more dt {
	height: 188px;
	border: solid 1px #aaa;
	background-position: center center;
	background-size: cover;
}

#gallery-more dt a {
	display: block;
	transition: 1s;
	height: 100%;
}

#gallery-more dt a:hover {
	background-color: #fff;
	opacity: 0.3;
}

#gallery-more dt a span {
	display: none;
}

#gallery-more dd {
	font-size: 1.2rem;
	padding: 5px 0;
	line-height: 1.3;
	color: #4984c5;
}

/* ギャラリー写真設定 */
/*
*/
#gallery-more-list dl:nth-last-child(10) dt {
	background-image: url(../images/202111_haku.jpg);
}

#gallery-more-list dl:nth-last-child(9) dt {
	background-image: url(../images/202110_jwave.jpg);
}

#gallery-more-list dl:nth-last-child(8) dt {
	background-image: url(../images/202108_netamichan.jpg);
}

#gallery-more-list dl:nth-last-child(7) dt {
	background-image: url(../images/202108_hypnosismic.jpg);
}

#gallery-more-list dl:nth-last-child(6) dt {
	background-image: url(../images/202103_kasama.jpg);
}

#gallery-more-list dl:nth-last-child(5) dt {
	background-image: url(../images/202012_yamatoxr.jpg);
}

#gallery-more-list dl:nth-last-child(4) dt {
	background-image: url(../images/201911interbee.jpg);
}

#gallery-more-list dl:nth-last-child(3) dt {
	background-image: url(../images/201903notch.JPG);
}

#gallery-more-list dl:nth-last-child(2) dt {
	background-image: url(../images/201808private_show.jfif);
}

#gallery-more-list dl:nth-last-child(1) dt {
	background-image: url(../images/201806dsj.png);
}

/*************************
 * works一覧ページ
 */




/*************************
 DetailPage*/
/**************************/
/* .main-imgWrap{

} */
.main-img {
	width: 100vw;
	height: 45vh;
	max-height: 460px;
	margin: 0 auto 2%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.main-img span {
	display: none;
}


.con-descliption,
.con-imgbox {
	vertical-align: top;
	display: inline-block;
	width: 50%;
	padding-bottom: 5%;
}

/* コンセプト */
.concept {
	padding-bottom: 2vh;
	font-size: 1.8rem;
	color: #4984c5;
	/* color: #b1986a; */
	line-height: 1.3;
}

/* -------------Description------------ */
.con-descliption {
	padding-right: 60px;
}

.btn-official-web {
	margin: 35px 0;
	width: 220px;
}

.btn-official-web a {
	display: block;
	border: solid 1px #fff;
	background-color: #111;
	font-size: 1.4rem;
	text-align: center;
	line-height: 60px;
	transition: .8s;
}

.btn-official-web a:hover,
.con-img-tool li:nth-child(1):hover {
	border: solid 1px #4984c5;
	background-color: #4984c5;
	transition: .8s;
	color: #fff;
}


/* ----------------Image--------------- */

.con-imgbox div {
	/* width: 100%; */
	position: relative;
	/* overflow: hidden; */
}

.con-img {
	position: absolute;
	width: 100%;
	transition: 0.55s;
	top: 0;
	left: 0;
}

.con-img:first-child {
	position: relative;
}

/* 初期　2枚目以降の画像非表示 */
.con-img:nth-child(n+2) {
	opacity: 0;
}

.switching-img-list {
	padding-top: 20px;
}

.switching-img-list li {
	width: 35px;
	height: 24px;
	display: inline-block;
	overflow: hidden;
	margin-right: 4px;
	position: relative;
}

.switching-img-list li:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 35px;
	height: 24px;
	background-color: #000;
}

.switching-img-list li img {
	position: relative;
	border: solid 1px #6d6d6d;
	cursor: pointer;
	width: 100%;
}

.switching-img-list .selected img {
	border: solid 1px #4984c5;
	opacity: 0.5;
}

.con-img-tool {
	/* overflow: hidden; */
	margin: 20px 0;
}

.con-img-tool li {
	width: 220px;
	height: 60px;
	background-color: #1a1a1a;
	border: solid 1px #ddd;
	/* ボタンアイコン設定 */
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 25px 50%;
	transition: .8s;
}

.con-img-tool li:nth-child(1) {
	/* 文字装飾 */
	padding-left: 80px;
	font-size: 1.2rem;
	color: #fff;
	line-height: 60px;
	cursor: pointer;
}

/* ----------------Video--------------- */

.youtube {
	position: relative;
	width: 100%;
	max-width: 550px;
	margin: 20px auto;
	padding-top: 56.25%;
	clear: both;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.video {
	max-width: 640px;
	margin: 20px auto;
	clear: both;
}

.video_wrap {
	padding-top: 56.25%;
	width: 100%;
	position: relative;
}

.video_wrap iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}

/* ボタンアイコン挿入 */
.btn-big {
	background-image: url(../images/more-works/icon-big.png);
}

.btn-movie {
	background-image: url(../images/more-works/icon-movie.png);
}

.btn-pdf {
	background-image: url(../images/more-works/icon-pdf.png);
}

.back {
	text-align: center;
	clear: both;
}

/*;
 *	PCデザイン（css）
 */
@media only screen and (min-width: 641px) {

	/*************************
     * 事例紹介
     */
	.more-works {
		padding: 100px 0;
		background-color: #1a1a1a;
	}

	/* タイトル */
	.more-works h2 {
		position: relative;
		font-size: 2.0rem;
		text-align: center;
	}

	.more-works h2:after {
		content: '';
		position: absolute;
		bottom: -7px;
		left: 50%;
		transform: translateX(-50%);
		width: 10px;
		height: 4px;
		background-color: #5daaff;
		/* background-color: #b1986a; */
	}

	/*************************
     * 事例紹介-画像リスト
     */

	/* アニメーションに関する設定 */
	.works-img-list *,
	.works-img-list *:before,
	.works-img-list *:after {
		-webkit-transition: all 0.55s ease;
		transition: all 0.55s ease;
	}

	.works-img-list {
		padding: 80px 0;
		width: 980px;
		margin: 0 auto;
		overflow: hidden;
	}

	/* 各レイアウト設定 */
	/* 最背景 */
	.works-img-list figure {
		float: left;
		position: relative;
		margin-right: 34px;
		margin-bottom: 60px;
		/* ボーダー分引いてる */
		width: 302px;
		height: 168px;
		border: solid 1px #989898;
		box-sizing: content-box;
		overflow: hidden;
		/* ちらつき防止 */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.works-img-list figure:nth-child(3n) {
		margin-right: 0;
	}

	.works-img-list figure:nth-last-child(-n+3) {
		margin-bottom: 0;
	}

	/* 画像設定 */
	.works-img-list figure img {
		width: 100%;
		height: 100%;
	}

	/* 詳細テキスト */
	.works-img-list figcaption {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 15px 10px;
		width: 250px;
		/* ちらつき防止 */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.works-img-list figcaption li {
		text-align: center;
		/* 初期透明に */
		opacity: 0;
	}

	.work-update-date {
		font-size: 1.2rem;
		line-height: 2.0;
	}

	.work-project-name {
		font-size: 1.2rem;
		line-height: 2.0;
	}

	.work-project-date {
		font-size: 1.2rem;
		line-height: 2.0;
	}

	/* ライン */
	.works-img-list figcaption:before,
	.works-img-list figcaption:after {
		content: '';
		position: absolute;
		width: 290px;
		height: 2px;
		background-color: #fff;
	}

	.works-img-list figcaption:before {
		top: 0;
		left: 0;
		transform: translateX(100%);
	}

	.works-img-list figcaption:after {
		bottom: 0;
		right: 0;
		transform: translateX(-100%);
	}

	/* リンク */
	.works-img-list figure a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* アニメーション（hover）設定 */
	.works-img-list figure:hover img {
		opacity: 0.3;
	}

	.works-img-list figure:hover figcaption li {
		opacity: 1.0;
	}

	.works-img-list figure:hover figcaption:before,
	.works-img-list figure:hover figcaption:after {
		transform: translateX(0);
	}

	/* 事例紹介リンクボタン */
	.btn-more-works {
		margin: 0 auto;
		width: 250px;
		height: 70px;
	}

	.btn-more-works a {
		display: block;
		width: 100%;
		height: 100%;
		border: solid 1px #fff;
		background-color: #111;
		font-size: 1.4rem;
		color: #fff;
		text-align: center;
		line-height: 70px;
		transition: .8s;
	}

	.btn-more-works a:hover {
		/* border: solid 1px #b1986a; */
		border: solid 1px #5daaff;
		background-color: #5daaff;
		/* background-color: #b1986a; */
		transition: .8s;
	}
}




/*************************
 * 画像モーダルウィンドウ
 */

/* 初期設定 */
.modal-overlay,
.modal-wrapper {
	display: none;
}

/* オーバーレイ */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	width: 100%;
	height: 120%;
	background-color: rgba(0, 0, 0, 0.75);
}

/* モーダル全体管理 */
.modal-wrapper {
	position: fixed;
	margin: 0 auto;
	/* width: 1200px; */
	max-width: 1200px;
	/* width: 100vw; */
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 100%;
	height: 850px;
	background-color: #222;
	z-index: 600;
}

.modal-content {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 80px 0;
	max-width: 1200px;
	/* max-height: 800px; */
	background-color: #222;
	z-index: 600;
}

/* 画像 */
.modal-content .modal-imgbox {
	position: relative;
	/* max-width: 1000px; */
	height: 700px;
	margin: 0 auto;
}

.modal-imgbox img {
	width: 100%;
	max-width: 1000px;
	object-fit: contain;
	position: absolute;
	transition: 1s;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.modal-imgbox img:nth-child(n+2) {
	opacity: 0;
}

/* モーダル用画像切り替えボタン */
.modal-switching-btn {
	position: absolute;
	width: 65%;
	min-width: 300px;
	bottom: 18px;
	left: 52%;
	transform: translateX(-50%);
	margin-top: 10px;
}

.modal-switching-btn p {
	display: inline-block;
	margin: 0 10px 10px 0;
	width: 40px;
	/* height: 40px; */
	background-color: #222;
	/* クリックできるようなカーソル */
	cursor: pointer;
	transition: .8s;
}

.modal-switching-btn p img {
	transition: .8s;
	width: 100%;
}

.modal-switching-btn .selected img {
	opacity: 0.5;
	transition: .8s;
}

/* 閉じるボタン */
.modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	/* アイコン設定 */
	background-image: url(../images/more-works/icon-close.png);
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: 50%;
	transition: .8s;
	cursor: pointer;
}

.modal-close:hover {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background-color: #aaa;
	transition: background-color .8s;
}

.modal-close span {
	display: none;
}



/* 2019/04 */
.prevnext-box li {
	background-color: unset;
}

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

	/* works一覧 */
	#gallery-more dl {
		width: 30.3%;
		margin-right: 3%;
	}
}

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

	/* works一覧 */
	#gallery-more dl {
		width: 47%;
	}
}

/* タブレット以下 */
@media only screen and (max-width: 768px) {
	.con-body {
		width: 100%;
		padding: 4vh 8vw 0;
	}

	.project-name {
		color: #4984c5;
	}

	.more-detail dl dt {
		font-weight: bold;
	}

	.con-img {
		width: 100%;
		padding: 0 0vw 2vh;
	}

	.con-img:first-child {
		position: relative;
	}

	/* モーダル */
	.modal-wrapper {
		height: 100vh;
	}

	.modal-imgbox img {
		top: 50%;
		transform: translate(-50%, -50%);
		left: 50%;
		max-height: 100vh;
		max-width: 80vw;
		width: auto;
	}

	.prevnext-box li {
		background-size: 20px auto;
		margin: 0 1%;
	}

	.modal-content,
	.modal-content .modal-imgbox {
		height: 100vh;
		padding-top: 0;
	}

	.modal-switching-btn {
		bottom: 2%;
		top: auto;
		width: 80vw;
	}

	.modal-close {
		top: 90px;
	}
}

@media (orientation: landscape) {
	.modal-wrapper {
		height: 100vh;
	}

	.modal-content {
		padding: 0;
	}

	.modal-content .modal-imgbox {
		height: 100%;
	}

	.modal-imgbox img {
		height: 95%;
	}
}

/*
 *	スマートフォンデザイン（css）
 */
@media only screen and (max-width: 768px) {
	.wrapper {
		padding-top: 80px;
	}
}

/*
 *	スマートフォンデザイン（css）
 */
@media only screen and (max-width: 640px) {
	#gallery-more-list {
		margin: 0;
	}

	#works-more .contents {
		width: 80%;
	}

	/* works一覧 */
	#gallery-more dl {
		width: 100%;
		margin-right: 0;
	}

	/*************************
     * 事例紹介-画像リスト
     */
	/* アニメーションに関する設定 */
	.works-img-list *,
	.works-img-list *:before,
	.works-img-list *:after {
		-webkit-transition: all 0.55s ease;
		transition: all 0.55s ease;
	}

	.works-img-list {
		padding: 5vh 2vw;
		margin: 0 auto;
	}

	.works-img-list figure {
		padding-bottom: 5vh;
	}

	/* 画像設定 */
	.works-img-list figure img {
		width: 100%;
		height: 100%;
	}

	/* リンク */
	.works-img-list figure a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* 事例紹介リンクボタン */
	.btn-more-works {
		margin: 0 auto;
		width: 250px;
		height: 70px;
	}

	.btn-more-works a {
		display: block;
		width: 100%;
		height: 100%;
		border: solid 1px #fff;
		background-color: #111;
		font-size: 1.4rem;
		color: #fff;
		text-align: center;
		line-height: 70px;
		transition: .8s;
	}

	.btn-more-works a:hover {
		/* border: solid 1px #b1986a; */
		border: solid 1px #5daaff;
		background-color: #5daaff;
		/* background-color: #b1986a; */
		transition: .8s;
	}
}

@media only screen and (max-width: 460px) {
	.con-imgbox {
		width: 100%;
	}
}

@media only screen and (min-width: 1150px) {
	.prevnext-box .prev {
		left: -90px;
	}

	.prevnext-box .next {
		right: -90px;
	}
}


.concept {
	display: none;
}

.pankuzu-list ul li {
	display: inline-block;
	font-size: 1.2rem;
	color: #e5e5e5;
}

.pankuzu-list ul li:nth-last-child(n+2):after {
	content: ' > ';
	font-size: 1.5rem;
}

.contents .con-title {
	padding: 4vh 0;
	background-color: #333333;
}

.more-detail dl {
	position: relative;
	padding: 0;
	overflow: hidden;
	/* clear: left; */
	margin-bottom: 5px;
}

.more-detail dl dt {
	width: 22%;
}

.more-detail dl dd {
	width: 77%;
}

.more-detail dl dt:before {
	content: ':';
	position: absolute;
	left: 17%;
	font-size: 1.2rem;
}

.more-detail dl dt,
.more-detail dl dd {
	font-size: 1.2rem;
	color: #cbcbcb;
	float: left;
}

/* 次へ戻るボタン */
.prevnext-box li {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	line-height: 300px;
	color: #aaa;
	cursor: pointer;
}

.prevnext-box i {
	display: block;
	font-size: 5rem;
}

.prevnext-box .prev {
	left: 3%;
}

.prevnext-box .next {
	right: 3%;
}

.catTitle {
	display: block;
	text-align: center;
	margin: 50px 0;
	padding-right: 6px;
	font-weight: bold;
	color: #5f5f5f;
	font-size: 2rem;
	border-top: 2px solid #2d5075;
	border-bottom: 2px solid #2d5075;
}


@media (min-width: 768px) {
	.catTitle {
		display: none;
	}
}