@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-LYX */
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
.jost {
	font-weight: 400;
	font-family: "Jost", sans-serif;
}
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
	margin: 0 auto;
	max-width: 105.7rem;
}
@media all and (max-width: 896px) {
	.content {
		padding: 0 2rem;
	}	
}

/*------------------------------------------------------------
	fixedBox
------------------------------------------------------------*/
.fixedBox {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	transform: translateY(-100%);
	transition: all 0.6s 0.3s;
}
.fixedBox.active {
	transform: translateY(0);
}
@media all and (max-width: 896px) {
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	margin-bottom: 7rem;
	width: fit-content;
	color: #292929;
	text-align: center;
	font-weight: 400;
}
.headLine01 .en {
	display: block;
	font-size: 4.5rem;
	font-family: "Jost", sans-serif;
	letter-spacing: 0.1em;
	line-height: 1.6;
}
.headLine01 .jp {
	font-size: 1.4rem;
	letter-spacing: 0.15em;
}
@media all and (max-width: 896px) {
	.headLine01 {
		margin-bottom: 4.5rem !important;
	}
	.headLine01 .en {
		font-size: 3rem;
		line-height: 1.35;
	}
	.headLine01 .jp {
		font-size: 1.2rem;
		letter-spacing: 0.09em;
	}
}
/*------------------------------------------------------------
	pageTitle
------------------------------------------------------------*/
.pageTitle {
	padding-top: 14.8rem;
	min-height: 65.15rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(../img/concept/page_img.jpg) no-repeat center center / cover;
}
.pageTitle .headLine01 {
	color: #fff;
}
@media all and (max-width: 896px) {
	.pageTitle {
		padding-top: 8.7rem;
		min-height: 33.35rem;
		background-image: url(../img/concept/page_img_sp.png);
	}
} 
/*------------------------------------------------------------
	main
------------------------------------------------------------*/
#main {
	padding-top: 1.5rem;
}
@media all and (max-width: 896px) {
	#main {
		padding-top: 0;
	}
}
/*------------------------------------------------------------
	pageOther
------------------------------------------------------------*/
.pageOther {
	padding: 21.5rem 0 10rem;
}
.pageOther .headLine01 {
	margin: 0 auto !important;
}
@media all and (max-width: 896px) {
	.pageOther {
		padding: 9.8rem 0 3.3rem;
	}
}
/*------------------------------------------------------------
	conPhotoList
------------------------------------------------------------*/
.comPhotoList {
	margin-top: -2rem;
}
.comPhotoList li {
	position: relative;
	margin-top: 2rem;
	width: 24rem;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 2rem 2rem 1rem -1rem rgba(41, 41, 41, 0.1);
}
.comPhotoList li a {
	display: block;
}
.comPhotoList li .pho {
	position: relative;
	overflow: hidden;
}
.comPhotoList li .pho img {
	width: 100%;
	transition: transform ease 0.3s;
	-webkit-transition: transform ease 0.3s;
}
.comPhotoList li .pho::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(41, 41, 41, 0.4);
	transition: .3s all;
}
.comPhotoList li:not(:nth-child(4n)) {
	margin-right: 3.2rem;
}
.comPhotoList p {
	text-align: center;
	width: 100%;
	color: #fff;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	position: absolute;
	top: 50%;
	transform: translateY(-70%);
}
@media all and (min-width: 897px) {
	.comPhotoList a:hover .pho::after {
		background-color: rgba(0, 0, 0, 0.7);
	}
	.comPhotoList a:hover .pho img {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	}
} 
@media all and (max-width: 896px) {
	.comPhotoList li {
		width: calc(50% - 1.1rem);
	}
	.comPhotoList li:not(:nth-child(4n)) {
		margin-right: 0;
	}
	.comPhotoList p {
		font-size: 1.3rem;
		transform: translateY(-50%);
	}
}
/*------------------------------------------------------------
	comContactBox
------------------------------------------------------------*/
.comContactBox {
	padding: 6rem 0 8rem;
	background: url(../img/common/bg02.jpg) no-repeat left top / cover;
}
.comContactBox .content .headLine01 {
	margin: 0 auto 7rem;
}
.comContactBox .innerBox {
	color: #292929;
	padding: 5rem 5rem 6.2rem;
	text-align: center;
	background-color: #fff;
	border-radius: 0.5rem;
}
.comContactBox .ttl {
	margin-bottom: 1rem;
	font-size: 2.5rem;
	letter-spacing: 0.1em;
	line-height: 1.8;
}
.comContactBox .tel {
	margin-bottom: 0.6rem;
	font-size: 6rem;
	letter-spacing: 0.035em;
}
.comContactBox .tel a {
	color: #292929;
}
.comContactBox .date {
	margin-bottom: 4.9rem;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
}
.comContactBox .btnList li {
	margin: 0 2rem;
	width: 33.6rem;
	border: 0.1rem solid #292929;
	border-radius: 0.5rem;
	overflow: hidden;
}
.comContactBox .btnList a {
	padding: 1rem;
	color: #fff;
	height: 100%;
	min-height: 7.8rem;
	font-size: 1.7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #3E3E3E;
}
.comContactBox .btnList .li01 a {
	color: #292929;
	background-color: #fff;
}
.comContactBox .btnList a:hover {
	opacity: 0.7;
}
@media all and (max-width: 896px) {
	.comContactBox {
		padding: 4.2rem 0 5rem;
		background-image: url(../img/common/bg02_sp.png);
	}
	.comContactBox .headLine01 {
		margin-bottom: 3.6rem !important;
	}
	.comContactBox .innerBox {
		padding: 3rem 1.6rem;
	}
	.comContactBox .ttl {
		margin-bottom: 0.3rem;
		font-size: 1.3rem;
		letter-spacing: 0.03em;
	}
	.comContactBox .tel {
		font-size: 4rem;
		letter-spacing: 0.05em;
	}
	.comContactBox .date {
		margin-bottom: 2.7rem;
		font-size: 1.2rem;
		line-height: 1.83;
	}
	.comContactBox .btnList {
		margin: 0 auto;
		width: 29.4rem;
		display: block;
	}
	.comContactBox .btnList li {
		margin: 0;
		width: auto;
	}
	.comContactBox .btnList li:not(:last-child) {
		margin-bottom: 1.9rem;
	}
	.comContactBox .btnList a {
		min-height: 7.1rem;
		font-size: 1.5rem;
	}
}
/*------------------------------------------------------------
	comWorkList
------------------------------------------------------------*/
.comWorkList {
	margin: -4.6rem 0 7.5rem;
}
.comWorkList li {
	margin: 4.6rem 4.8rem 0 0;
	width: 32rem;
	text-align: center;
}
.comWorkList li:nth-child(3n) {
	margin-right: 0;
}
.comWorkList li a {
	display: block;
	height: 100%;
}
.comWorkList li .pho {
	margin-bottom: 2.4rem;
	position: relative;
	overflow: hidden;
	height: 21rem;
}
.comWorkList li .pho img {
	position: absolute;
	left: 0;
	top: 0;	transition: .3s;
	width: 100%;
	transition: transform ease 0.3s;
	-webkit-transition: transform ease 0.3s;
}
.comWorkList li .ttl .sml {
	margin-top: 0.4rem;
	display: block;
	font-size: 1.2rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
}
.comWorkList li a:hover {
	opacity: 0.7;
}
@media all and (min-width: 897px) {
	.comWorkList li a:hover .pho img {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	}
}
@media all and (max-width: 896px) {
	.comWorkList {
		margin: -2.8rem 0 4.5rem;
		justify-content: space-between;
	}
	.comWorkList li {
		margin: 2.8rem 0 0;
		width: calc(50% - 1rem);
	}
	.comWorkList li .pho {
		margin-bottom: 1rem;
		height: 0;
		padding-bottom: 66%;
	}
	.comWorkList li .ttl {
		margin: 0 2rem;
		font-size: 1.3rem;
		line-height: 1.65;
	}
	.comWorkList li .ttl .sml {
		font-size: 1rem;
	}
}
/*------------------------------------------------------------
	comTagList
------------------------------------------------------------*/
.comTagList {
	margin: -1rem 0 8rem;
}
.comTagList li {
	margin: 1rem 0.5rem 0;
}
.comTagList li a {
	display: block;
	min-width: 7.9rem;
	padding: 0.2rem 1rem 0.3rem;
	border-radius: 1.3rem;
	letter-spacing: 0.1em;
	text-align: center;
	background-color: #DFDCD4;
}
.comTagList li a:hover {
	opacity: 0.7;
}
@media all and (max-width: 896px) {
	.comTagList {
		margin: -1.3rem 0.7rem 5.2rem;
		justify-content: flex-start;
	}
	.comTagList li {
		margin: 1.3rem 1rem 0 0;
	}
	.comTagList li a {
		padding: 0.2rem 1rem 0.3rem;
		min-width: 7rem;
		letter-spacing: 0em;
		font-size: 1.257rem;
	}
}
/*------------------------------------------------------------
	comPageLink
------------------------------------------------------------*/
.comPageLink {
	max-width: 67rem;
	margin: 0 auto;
	position: relative;
}
.comPageLink a {
	display: inline-block;
	letter-spacing: 0.15em;
	text-align: center;
}
.comPageLink .back a:hover {
	opacity: 0.7;
}
.comPageLink .back a {
	margin: 0 auto;
	height: 5rem;
	padding-bottom: 0.3rem;
	width: 19rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	border: 0.1rem solid #D4D4D4;
	border-radius: 0.9rem;
}
.comPageLink .next,
.comPageLink .prev {
	min-width: 18.4rem;
	position: absolute;
	left: 0;
	bottom: 0.2rem;
}
.comPageLink .next {
	left: inherit;
	right: 0;
}
.comPageLink a {
	padding-bottom: 1.3rem;
	display: block;
	letter-spacing: 0.15em;
}
.comPageLink .prev a {
	padding-left: 3rem;
}
.comPageLink .next a {
	padding-right: 1rem;
}
.comPageLink span {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #D4D4D4;
    width: 100%;
    height: 1px;
}
.comPageLink span:before {
    width: 3rem;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(40deg);
    transform-origin: right bottom;
    background-color: #D4D4D4;
    content: '';
}
.comPageLink .prev span:before {
	left: 0;
	right: auto;
	transform: rotate(-40deg);
    transform-origin: left bottom;
}
@media all and (min-width: 897px) {
	.comPageLink .next a:hover span {
		animation: move 0.5s infinite alternate;
	}
	@keyframes move {
		0% {
			transform: translatex(0);
		}
		100% {
			transform: translatex(2rem);
		}
	}	
	.comPageLink .prev a:hover span {
		animation: move01 0.5s infinite alternate;
	}
	@keyframes move01 {
		0% {
			transform: translatex(0);
		}
		100% {
			transform: translatex(-2rem);
		}
	}	
}
@media all and (max-width: 896px) {
	.comPageLink {
		max-width: inherit;
	}
	.comPageLink .prev,
	.comPageLink .next {
		min-width: 10.5rem;
	}
	.comPageLink .prev {
		transform: translateX(-16.7rem);
		left: 50%;
	}
	.comPageLink .next {
		transform: translateX(16.7rem);
		right: 50%;
	}
	.comPageLink a {
		width: auto;
		padding-bottom: 0.6rem;
		font-size: 1.1rem;
	}
	.comPageLink .back a {
		height: 2.9rem;
		width: 10.8rem;
		border-radius: 0.5rem;
	}
	.comPageLink .next,
	.comPageLink .prev {
		bottom: 0.1rem;
	}
	.comPageLink a {
		font-size: 1.2rem;
		letter-spacing: 0.1em;
	}
	.comPageLink .prev a {
		padding-left: 1.5rem;
	}
	.comPageLink .next a {
		padding-right: 0.5rem;
	}
	.comPageLink span:before {
		width: 1.7rem;
	}
}
/*------------------------------------------------------------
	comInteviewList
------------------------------------------------------------*/
.comInteviewList {
	margin: -3rem 0 8rem;
}
.comInteviewList li {
	margin: 3rem 3.2rem 0 0;
	width: 24rem;
	position: relative;
}
.comInteviewList li:nth-child(4n) {
	margin-right: 0;
}
.comInteviewList li a {
	display: block;
	height: 100%;
	background-color: #DFDCD4;
}
.comInteviewList .tag {
	padding: 0.3rem 0.3rem 0.2rem;
	text-align: center;
	width: 7.3rem;
	min-height: 2.3rem;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	color: #fff;
	font-size: 1.2rem;
	font-family: "Jost", sans-serif;
	letter-spacing: 0.1em;
	background-color: #292929;
}
.comInteviewList li .pho {
	overflow: hidden;
}
.comInteviewList li .pho img {
	width: 100%;
	transition: transform ease 0.3s;
	-webkit-transition: transform ease 0.3s;
}
.comInteviewList .textBox {
	padding: 1.2rem 1.7rem 2rem;
	line-height: 1.73;
}
.comInteviewList .textBox .txt {
	margin-bottom: 2.4rem;
}
.comInteviewList .textBox .sml {
	font-size: 1.2rem;
	letter-spacing: 0.084em;
}
.comInteviewList a:hover {
	opacity: 0.7;
}
@media all and (min-width: 897px) {
	.comInteviewList a:hover .pho img {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	}
}
@media all and (max-width: 896px) {
	.comInteviewList {
		margin-bottom: 3.5rem;
	}
	.comInteviewList li {
		margin-right: 0;
		width: calc(50% - 1.1rem);
	}
	.comInteviewList .tag {
		width: 6.1rem;
		min-height: 1.9rem;
		font-size: 1rem;
	}
	.comInteviewList .textBox {
		padding: 1rem 1.3rem 1.4rem;
	}
	.comInteviewList .textBox .txt {
		margin-bottom: 1.4rem;
		font-size: 1.3rem;
	}
	.comInteviewList .textBox .sml {
		font-size: 1rem;
	}
}

/*------------------------------------------------------------
	comBlogList
------------------------------------------------------------*/
.comBlogList {
	margin: -3rem 0 7.8rem;
}
.comBlogList li {
	margin: 3rem 4.8rem 0 0;	
	width: 32rem;
}
.comBlogList li:nth-of-type(3n) {
	margin-right: 0;
}
.comBlogList li a {
	display: block;
	height: 100%;
}
.comBlogList .pho {
	margin-bottom: 2.7rem;
	overflow: hidden;
}
.comBlogList .pho img {
	width: 100%;
	transition: transform ease 0.3s;
	-webkit-transition: transform ease 0.3s;
}
.comBlogList .textBox .inner {
	margin-bottom: 1.5rem;
	align-items: center;
}
.comBlogList .textBox .tag {
	margin-right: 1.4rem;
	padding: 0.3rem 0.3rem 0.2rem;
	width: 5.6rem;
	min-height: 2.3rem;
	display: inline-block;
	text-align: center;
	font-size: 1.2rem;
	color: #fff;
	font-family: "Jost", sans-serif;
	letter-spacing: 0.1em;
	background-color: #292929;
	border-radius: 0.5rem;
}
.comBlogList .textBox .date {
	font-size: 1.3rem;
	letter-spacing: 0.18em;
}
.comBlogList .textBox .rBox {
	padding: 0.3rem 1.2rem 0.2rem 1.4rem;
	display: inline-block;
	font-size: 1.2rem;
	letter-spacing: 0.088em;
	border-left: 0.1rem solid #292929;
	border-right: 0.1rem solid #292929;
}
.comBlogList li a:hover {
	opacity: 0.7;
}
@media all and (min-width: 897px) {
	.comBlogList a:hover .pho img {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
	}
}
@media all and (max-width: 896px) {
	.comBlogList {
		margin-bottom: 3.9rem;
	}
	.comBlogList li {
		margin-right: 0;
		width: calc(50% - 1rem);
	}
	.comBlogList .pho {
		margin-bottom: 1.5rem;
	}
	.comBlogList .textBox {
		padding-bottom: 3.5rem;
		position: relative;
	}
	.comBlogList .textBox .inner {
		margin-bottom: 0.6rem;
		display: block;
	}
	.comBlogList .textBox .lBox {
		align-items: center;
	}
	.comBlogList .textBox .tag {
		margin-right: 1rem;
		width: 4.6rem;
		min-height: 1.9rem;
		font-size: 1rem;
	}
	.comBlogList .textBox .date {
		font-size: 1rem;
	}
	.comBlogList .textBox .rBox {
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 1rem;
	}
	.comBlogList .textBox .txt {
		font-size: 1.3rem;
	}
}
/*------------------------------------------------------------
	comBtn
------------------------------------------------------------*/
.comBtn {
    position: relative;
    width: 26.9rem;
    margin: 0 auto;
    text-align: center;
}
.comBtn a {
	padding-bottom: 1.4rem;
	display: block;
	letter-spacing: 0.15em;
}
.comBtn span {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #D4D4D4;
    width: 100%;
    height: 1px;
}
.comBtn span:before {
    width: 3rem;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(40deg);
    transform-origin: right bottom;
    background-color: #D4D4D4;
    content: '';
}
@media all and (min-width: 897px) {
	.comBtn a:hover span {
		animation: move 0.5s infinite alternate;
	}
	@keyframes move {
		0% {
			transform: translatex(0);
		}
		100% {
			transform: translatex(2rem);
		}
	}
}
@media all and (max-width: 896px) {
	.comBtn {
		width: 22.9rem;
	}
	.comBtn a {
		padding-bottom: 1.2rem;
		font-size: 1.2rem;
	}
	.comBtn span:before {
		width: 2.5rem;
	}
}
/*------------------------------------------------------------
	comNewsList
------------------------------------------------------------*/ 
.comNewsList li {
	padding: 2.5rem 0 2.3rem;
	border-bottom: 0.1rem solid #D4D4D4;
}
.comNewsList li:first-child {
	border-top: 0.1rem solid #D4D4D4;
}
.comNewsList li a {
	display: block;
}
.comNewsList .topTxt {
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
}
.comNewsList .mark {
	margin-right: 2.5rem;
	padding: 0.5rem;
	width: 11.1rem;
	height: 3.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#BFB8AA;
	font-size: 1.3rem;
	color: #fff;
	border-radius: 0.5rem;
}
.comNewsList .date {
	letter-spacing: 0.18em;
}
.comNewsList .txt {
	letter-spacing: 0.05em;
}
.comNewsList a:hover {
	opacity: 0.7;
}
@media all and (max-width: 896px) {
	.comNewsList li {
		padding: 1.8rem 0 1.3rem;
	}
	.comNewsList .topTxt {
		margin-bottom: 1.4rem;
	}
	.comNewsList .mark {
		margin-right: 1.8rem;
		width: 8.9rem;
		height: 2.6rem;
		font-size: 1.1rem;
	}
	.comNewsList .date {
		font-size: 1.2rem;
	}
}

/*------------------------------------------------------------
	clip
------------------------------------------------------------*/
.clip {
	animation: clip 1s !important;
}
@keyframes clip {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	100%{
		clip-path: inset(0 0 0 0);
	}
}
/*------------------------------------------------------------
	fadeIn
------------------------------------------------------------*/
.pageActive {
	opacity: 0;
	transition: all 1s;
}
.pageActive.on {
	opacity: 1;
}
.fadeIn {
	opacity: 0;
	transition: all 1s;
}
.fadeIn.on {
	opacity: 1;
}
.fadeInUp {
	opacity: 0;
	transform: translateY(3rem);
	transition: all 1s;
}
.fadeInUp.on {
	opacity: 1;
	transform: translateY(0);
}
.delay01 {
	transition-delay: .5s;
}
.delay02 {
	transition-delay: 1s;
}
.delay03 {
	transition-delay: 1.5s;
}
.delay04 {
	transition-delay: 2s;
}
.delay05 {
	transition-delay: 2.5s;
}
.animation .fadeTxt {
	clip-path: inset(0 100% 0 0);
}
.animation.on .fadeTxt {
	animation: clip 2s forwards;
}
@keyframes clip {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	100%{
		clip-path: inset(0 0 0 0);
	}
}
.animation .fade {
	opacity: 0;
	transition: all 1s;
}
.animation.on .fade {
	opacity: 1;
}
.animation .fadeUp {
	opacity: 0;
	transform: translateY(3rem);
	transition: all 1s;
}
.animation.on .fadeUp {
	opacity: 1;
	transform: translateY(0);
}
.animation .delay01 {
	transition-delay: 0.5s;
}
.animation .delay02 {
	transition-delay: 1s;
}
.animation .delay03 {
	transition-delay: 1.5s;
}
.animation .delay04 {
	transition-delay: 2s;
}
.animation .delay05 {
	transition-delay: 2.5s;
}
.animation .fadeTxt.txtDelay01 {
	animation-delay: 0.5s;
}

/* ユーティリティークラス */

/* レスポンシブユーティリティクラス */
/* ブレイクポイント: xs(0px+), sm(576px+), md(768px+), lg(992px+), xl(1200px+) */

/* 基本の表示・非表示 */
.hidden { display: none !important; }
.visible { display: block !important; }

/* xs (0px以上) */
@media (min-width: 0px) {
	.visible-xs { display: block !important; }
	.hidden-xs { display: none !important; }
}

/* sm (576px以上) */
@media (min-width: 576px) {
	.visible-sm { display: block !important; }
	.hidden-sm { display: none !important; }
}

/* md (768px以上) */
@media (min-width: 768px) {
	.visible-md { display: block !important; }
	.hidden-md { display: none !important; }
}

/* lg (992px以上) */
@media (min-width: 992px) {
	.visible-lg { display: block !important; }
	.hidden-lg { display: none !important; }
}

/* xl (1200px以上) */
@media (min-width: 1200px) {
	.visible-xl { display: block !important; }
	.hidden-xl { display: none !important; }
}

/* 最大幅での制御 (max-width) */
@media (max-width: 575.98px) {
	.visible-xs-down { display: block !important; }
	.hidden-xs-down { display: none !important; }
}

@media (max-width: 767.98px) {
	.visible-sm-down { display: block !important; }
	.hidden-sm-down { display: none !important; }
}

@media (max-width: 991.98px) {
	.visible-md-down { display: block !important; }
	.hidden-md-down { display: none !important; }
}

@media (max-width: 1199.98px) {
	.visible-lg-down { display: block !important; }
	.hidden-lg-down { display: none !important; }
}

/* 576px以下の時だけbrタグを表示 */
.br-mobile {
	display: none;
}

@media (max-width: 576px) {
	.br-mobile {
		display: block;
	}
}