@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root {
	--red: #742e34;
}

.worksIndexWrapper ul li .overlay {
	backdrop-filter: blur(2px);
}

.works.new {

}

article > header {
	margin: 0 auto 20px;
}

article > header > h1 {
	font-size: 24px; 
	font-weight: bold; 
	display: block; 
}

article > header em {
	display: block; 
	font-weight: bold; 
	font-size: 12px; 
}

/* カテゴリ別記事リスト */

.worksIndex.new nav.conditional {
	background-color: #f4f4f4; 
	padding: 1em; 
	border-radius: 3px;
}

.worksIndex.new nav * {
	font-size: 14px; 
}

.worksIndex.new nav .depth1 {
	justify-content: flex-start;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: top; 
}

.worksIndex.new nav .depth1 > h2 {
	width: 100%; 
	color: var(--red); 
	font-weight: 700; 

}

.worksIndex.new nav .depth1 > h2 span {
	display: inline-block; 
	border-bottom: 1px solid #000;
	padding-bottom: 0.25em; 
	margin-bottom: 0.25em;
	border-color: var(--red); 
}

.worksIndex.new nav .depth1 > .depth2 {
	width: 100%; 
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
}

.worksIndex.new nav .depth2 > * {
	font-size: 14px; 
}

.worksIndex.new nav .wrapper {
	margin: 0;
	padding: 0px 5px 5px 0; 
	position: relative; 
	flex: 1 1 auto;
	min-width: 25%; 
	flex-basis: calc((100%) / 3); 
	max-width: 100%; 
}

.worksIndex.new nav .wrapper > span,
.worksIndex.new nav .wrapper > h3,
.worksIndex.new nav .wrapper h4 {
	cursor: pointer; 
	display: block; 
	line-height: 2.25; 
	color: var(--red); 
	font-size: 14px; 
	font-weight: 500; 
	padding: 0 0.5em; 
	position: relative; 
}

.worksIndex.new nav .wrapper > h3:after {
	content: ""; 
	position: absolute; 
	border-bottom: 1px solid #000;
	height: 1px; 
	width: 100; 
	bottom: 0px; 
	left: 0px; 

}

.worksIndex.new nav .wrapper > span:before,
.worksIndex.new nav .wrapper > h3:before {
	content: "\f105"; 
	font-family: fontAwesome;
	display: inline-block; 
	margin: 0 0.5em 0 0;
	transition: transform .2s ease;
}

.worksIndex.new nav .wrapper:hover > span:before,
.worksIndex.new nav .wrapper:hover > h3:before {
		transform: rotate(90deg);
}

.worksIndex.new nav .wrapper .depth3 {
	width: 100%; 
	position: absolute; 
	top: 32px; 
	left: 0px; 
	border-radius: 5px;
	background: #fff; 
	z-index: 10000; 
	display: none; 
	overflow: hidden; 
	box-shadow: 0 5px 10px -5px rgba(0,0,0,0.4);
}



.worksIndex.new nav .wrapper .depth3 > a,
.worksIndex.new nav .wrapper .depth3 > span {
	display: block; 
	line-height: 1.6; 
	padding: 0.5em 1em; 
	font-size: 14px; 
}

.worksIndex.new nav .wrapper .depth3 span {
	color: #ccc; 
}

.worksIndex.new nav .wrapper .depth3 a:hover {
	background-color: var(--red); 
	color: #fff; 
}

.worksIndex.new nav .wrapper .depth3 a:before,
.worksIndex.new nav .wrapper .depth3 span:before {
	content: "\f101"; 
	font-family: fontAwesome;
	display: inline-block; 
	margin: 0 0.5em 0 0;
}

.worksIndex.new nav .wrapper h4 {
	font-size: 14px; 
	line-height: 1.6; 
	padding: 0; 
	color: #333 !important; 
}

.worksIndex.new nav .wrapper h4 span {
	padding: 0.5em 1em; 
	display: block; 
	color: #333 !important; 
}

.worksIndex.new nav .wrapper h4 span:before {
	content: "−" !important; 
	display: inline-block; 
	margin: 0 0.25em 0 0;
}

.worksIndex.new nav .wrapper .depth3 > .depth4 {
	margin: 0;
	width: auto; 
}

.worksIndex.new nav .wrapper .depth4 a,
.worksIndex.new nav .wrapper .depth4 span {
	display: block; 
	line-height: 1.6; 
	padding: 0.5em 1em 0.5em 2em; 
	font-size: 14px; 
}

.worksIndex.new nav.conditional .archivesLink {
	text-align: right; 
	margin: 10px 0 0;
}

.worksIndex.new nav.conditional .archivesLink a {
	display: inline-block; 
	background: var(--red); 
	color: #fff; 
	padding: 1em 1em 1em 1.5em; 
	border-radius: 30px;
	line-height: 1; 
	position: relative; 
	border: 1px solid var(--red); 
	transition: all .2s ease;
}

.worksIndex.new nav.conditional .archivesLink a:hover {
	background: #fff; 
	color: var(--red); 
	box-shadow: 0 0 3px rgba(0,0,0,0.4);
}

.worksIndex.new nav.conditional .archivesLink a span {
	display: block; 
}

.worksIndex.new nav.conditional .archivesLink a span:before {
	content: "\f18e"; 
	font-family: fontAwesome;
	display: inline-block; 
	margin: 0 0.5em 0 0;
}

/* カルーセル */


.works article .itemPh {
	position: relative; 
}

.works article .itemPh .slide {

}

.works article .itemPh .slide　.phWrapper  {
	
}

.itemPh .slide .phWrapper .item {
	position: relative;
	width: 100%;



	height: calc((100vw) * (400 / 900)); 
}

.itemPh .slide .phWrapper .item img {


	height: 100%; 
	width: auto; 

	opacity: 0.5;
	transition: opacity .7s ease;

height: 100%; 
position: relative; 
}

.itemPh .slide .phWrapper.slick-active .item img { 
	opacity: 1;
}

 

.itemPh .slide .phWrapper .item .caption {
    position: absolute;
    display: block;
    bottom: -100%;
    left: 0;
	z-index: 100; 
	width: 100%; 
	color: #fff; 
	background-color: rgba(0, 0, 0, 0.2);
	padding: 10px; 
	transition: bottom .5s ease;
	backdrop-filter: blur(20px);
	line-height: 1.6; 
}

.itemPh .slide .phWrapper.slick-current .caption {
	bottom: 0px; 
}

.itemPh .slide .phWrapper.slick-active .item .caption em {
	font-size: 16px; 
	display: block; 
	font-weight: bold; 
}

.itemPh .slide .phWrapper.slick-active .item .caption p {
	font-size: 14px; 
}

.itemPh .slideNav {
	width: 100%; 
	background: #f4f4f4; 
}

.itemPh .slideNav .phWrapper {
	margin: 10px 5px;
}

.itemPh .slideNav .phWrapper .item  {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: calc((100 / 100) * 100%);
	overflow: hidden;
	cursor: pointer; 
}

.itemPh .slideNav .phWrapper .item img {
    width: 100%;
    height: auto;
    position: absolute;
    display: block;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    margin: auto;

	opacity: 0.7;
	transition: opacity .7s ease;
}

.itemPh .slideNav .phWrapper.slick-current {
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.itemPh .slideNav .phWrapper.slick-current .item img {
	opacity: 1;
}

section.dataWrapper {
	margin: 100px auto 0;
}

section.dataWrapper h2 {
	font-family: helvetica;
	font-weight: bold; 
	font-size: 18px; 
	margin: 0 0 2em;
}

section.dataWrapper .en {
	font-family: 'Antonio', sans-serif;
	font-weight: 300; 

	font-family: 'Barlow Semi Condensed', sans-serif;
	font-weight: 500; 
	font-size: 16px; 
	color: #666; 
}

section.dataWrapper h2 span {
	display: inline; 
	position: relative; 
	padding: 0 0 1em; 
}

section.dataWrapper h2 span:before {
	content: ""; 
	position: absolute; 
	width: 30px; 
	height: 1px; 
	border-bottom: 1px solid #888;
	left: 0px; 
	bottom: 3px; 
}

section.dataWrapper h2 span:after {
	content: ""; 
	position: absolute; 
	width: 5px; 
	height: 5px; 
	border: 1px solid #000;
	border-color: var(--red);
	border-radius: 50%;
	background: #fff; 
	left: 0px; 
	bottom: 0px; 
}



.contentsArea {
	margin: 60px 0 0;
	font-size: 16px; 
}

.contentsArea > div {
	margin: 0 0 60px;
}

/* 2カラム */
.twoColumn {
	justify-content: space-between;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
}

.twoColumn .leftBlock {
	width: 100%; 
}

.twoColumn .rightBlock {
   width: 100%; 
}

/* エントリーtext */

.entryText {

}

.entryText h3 {
	font-weight: bold; 
	display: block; 
	margin: 1em 0 .5em;
}

.entryText h3:first-of-type {
margin-top: 0;
}

.entryText p {
	display: block; 
	margin: 0 0 1em;
}

.entryText img {
	width: 100%; 
	height: auto; 
}






/* PROJECT DATA */

.projectData dl {
	justify-content: flex-start;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
}

.projectData dt, 
.projectData dd {
	padding: 0; 
	font-size: 14px; 
}

.projectData dt {
	width: 100%; 
	font-weight: bold; 
}

.projectData dd {
	width: 100%; 
}



/* introduction */

.introduction p {
	display: block; 
	margin: 0 0 1em;
}


/* お客様の声 */



/* タグ */

.tags {
	justify-content: flex-start;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
}

.tags span {
	margin: 0 10px 10px 0;
	flex: 1 1 auto;
	min-width: calc(20% - 10px); 
	max-width: calc(50% - 10px); 
}

.tags span a {
	font-size: 12px; 
	padding: 0 0.5em; 
	display: block; 
	text-align: center; 
	border: 1px solid #ddd;
	border-radius: 30px;
	background-color: #fff; 
	color: #333; 
	transition: background-color .2s ease;
}

.tags span a:before {
	content: "#"; 
	display: inline-block; 
	margin: 0 0.25em 0 0;
}

.tags span a:hover {
	color: #fff; 
	background-color: var(--red);
}

/* ページャ */

.pager {

}

.pager ul {
	justify-content: space-between;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
}

.pager ul a {
	justify-content: space-between;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center; 
}

.pager ul a span {

}

.pager ul .prev a:before,
.pager ul .next a:after {
	content: ""; 
	display: inline-block; 
	width: 40px; 
	height: 20px; 
	border-width: 1px;
	border-style: solid; 
	border-color: var(--red);
	border-radius: 100px; 

	background-image: url('../images/prev_next_arrow.svg'); 
	background-repeat: no-repeat; 
	background-size: 80px 40px;
}

.pager ul .prev a:before {
	margin: 0 10px 0 0;
	background-position: 0 0;
}

.pager ul .prev a:hover:before {
	margin: 0 10px 0 0;
	background-position: 0 -20px;
	background-color: var(--red);

}

.pager ul .next a:after {
	margin: 0 0 0 10px;
	background-position: -40px 0;

}

.pager ul .next a:hover:after {
	background-position: -40px -20px;
	background-color: var(--red);
}



/* ==================================================
= Media Queries
================================================== */

/* 480px未満 */
@media only screen and (max-width: 479px) {


}

/* 480px以上 */
/* スマホ */
@media only screen and (min-width: 480px) {


}

/* 568px以上 */
/* タブレット */
@media only screen and (min-width: 568px) {


}

/* 667px以上 */
/* タブレット */
@media only screen and (min-width: 667px) {




	/* 2カラム */
	
	.twoColumn .leftBlock {
		width: 250px; 
	}

	.leftBlock h2 {
		transform: rotate(90deg) translate(0, -100%);
		transform-origin: top left;
	}
	
	.twoColumn .rightBlock {
	width: calc((100% - 270px)); 
	}

}

/* 768px以上 */
/* タブレット */
@media only screen and (min-width: 768px) {

	.projectData dt, 
	.projectData dd {
		padding: 0.75em 0; 
	}

	.projectData dt {
		width: 14em; 
		border-bottom: 1px solid #666;
	}
	
	.projectData dd {
		width: calc(100% - 14em); 
		border-bottom: 1px solid #ccc;
	}

	.projectData dl:first-of-type dt {
		border-top: 1px solid #666;
	}
	
	.projectData dl:first-of-type dd {
		border-top: 1px solid #ccc;
	}

	.entryText img.mt-image-right,
	.entryText img.mt-image-left {
		width: calc((100% - 40px) / 2); 
	}


	.worksIndex.new nav .depth1 > h2 {
		width: 18em; 
	}
	
	.worksIndex.new nav .depth1 > .depth2 {
		width: calc((100% - 18em)); 
	}



}

/* 1024px以上 */
/* PC */
@media only screen and (min-width: 1024px) {



}