@charset "utf-8";

@font-face {
	font-family: "SourceHanSansJP";
	src: url("./fonts/SourceHanSansJP.woff2") format("woff2");
}

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	/*outline: 1px solid red;*/
}

html {
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	font-family: heisei-kaku-gothic-stdn, sans-serif;
	font-weight: 500;
	font-style: normal;
}

@media (max-width: 767px) {
	html {
		font-size: 50%;
	}
}

body {
	margin: 0;
}

img {
	vertical-align: bottom;
}

p,
button,
a {
	font-size: 1.6rem;
	color: inherit;
	text-decoration: none;
}
a:hover {
	color: inherit!important;
	text-decoration: none;
}
.text-center{
	text-align: center;
}
.block-center {
	margin: auto;
}

video {
	max-width: 100%;
	vertical-align: bottom;
}

.sp {
	display: none;
}
.pc {
	display: block;
}
@media screen and (max-width: 1100px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}

/*== ここから下に書いてください ==*/

body {
	position: relative;
	line-height: 2.0;
	letter-spacing: 0.1em;
	color: #333;
	line-break: strict;
	word-break: normal !important;
	word-wrap: break-word;
	font-family: din-2014, heisei-kaku-gothic-stdn, sans-serif;
	/*
	background: url("./images/project-e.png");
	background-attachment: fixed;
	background-size: cover;
	*/
}
body::before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: url("./images/project-e.png");
	background-size: cover;
	z-index: -1;
}
body::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgb(0 0 0 / 60%);
	z-index: -1;
}

/* header ここから */

.header-logo {
	width: 200px;
}
.nav-button {
	display: none;
}
.header-nav {
	display: flex;
	list-style: none;
	color: #fff;
}
.header-navItem {
	padding-right: 40px;
}
.nav-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.nav-text {
	cursor: pointer;
}
.nav-subtext {
	font-size: 10px;
	line-height: 1.2;
}
/* header ここまで */

/* footer ここから */
.footer {
	padding: 120px 0;
	background-color: #fff;
}
.footer-flex {
	display: flex;
	flex-wrap: wrap;
	width: 1080px;
	max-width: 100%;
	margin: auto;
}
.footer-left,
.footer-center,
.footer-right {
	flex: 1;
}
.footer-nav {
	list-style: none;
}
.footer-navlink,
.address {
	font-size: 14px;
}
.footer-navItem,
.address {
	margin-top: 30px;
}

.footer-logo {
	margin: auto;
	margin-top: 30px;
	width: 93px;
}

/* footer ここまで */
.js-word-split_item {
	display: block;
	overflow: clip;
}
.js-word-split_inner {
	display: inline-block;
	transform: translate(0px, 100%) rotate(0.001deg) scale(1.1);
	transition: 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-word-split_item.active .js-word-split_inner {
	transform: translate(0px, 0%) rotate(0.001deg) scale(1);
}
.js-fadeUp {
	opacity: 0;
	transform: translatey(30px);
	transition: 0.8s;
}
.js-fadeUp.active {
	opacity: 1;
	transform: translatey(0px);
}

.swiper-slide {
	padding-right: 82px;
	padding-top: 5rem;
}
.swiper-button-prev,
.swiper-button-next {
	width: 40px;
	height: 40px;
	background: rgba(0,0,0,0.33);
	border-radius: 50%;
}
.swiper-button-prev {
	left: 30px;
}
.swiper-button-next{
	right: 30px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev:after {
	width: 35%;
	height: 35%;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(45deg) translate(2px,-2px);
}
/* 次への矢印カスタマイズ */
.swiper-button-next:after {
	width: 35%;
	height: 35%;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg) translate(-2px,2px);
}
@media screen and (max-width: 479px) {
	.swiper-button-prev,
	.swiper-button-next {
		width: 30px;
		height: 30px;
	}
	.swiper-button-prev {
		left: 10px;
	}
	.swiper-button-next{
		right: 10px;
	}
}
.mask-image {
	overflow: hidden;
	position: relative;
}
.mask-image::after {
	content: '';
	position: absolute;
	background: #ddd;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	transform: translate(100%, 0);
}
.mask-image img {
	opacity: 0;
	transition-duration: 0.4s;
	transition-delay: 0.8s;
}
.mask-image.active img {
	opacity: 1;
}

.mask-image.active::after {
	animation: mask 1.2s cubic-bezier(0.9, 0, 0, 1);
}
@keyframes mask {
	0% {
		transform: translate(-100%, 0%)
	}
	40%, 60% {
		transform: translate(0, 0%)
	}
	100% {
		transform: translate(100%, 0%)
	}
}

.page-titleWrapper {
	width: 88%;
	max-width: 1200px;
	margin: auto;
	height: 560px;
	padding-top: 30vh;
	color: #fff;
}
.page-title {
	font-size: 40px;
	text-shadow: 0 5px 10px rgb(0 0 0 / 60%);
}
.page-subTitle {
	font-size: 20px;
	text-shadow: 0 5px 10px rgb(0 0 0 / 60%);
}

.properties {
	padding: 120px 0 0 0;
}

.properties-title {
	font-size: 40px;
	padding: 15px 0;
	text-align: center;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.6);
	margin-top: 0px;
}
.properties-swiper {
	list-style: none;
}

.swiper-bg {
	position: relative;
	background: url(./images/bg-baige-02.webp);
    background-repeat: repeat;
	padding: 3rem 0rem;
	max-width: 1300px;
	margin: 60px auto;
}
.swiper-bg::before {
	content: "";
	position:absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 247, 213, 0.3);
	top: 0;
	left: 0;
}
.swiper {
	max-width: 1200px;
}

.properties-flex {
	display: flex;
	flex-direction: column;
	line-height: 1.0;
}
.swiper-wrapper {
	/* wrapperのサイズを調整 */
	width: 100%;
	margin-bottom: 6rem;
}
.properties-images {
	width: 100%;
	height: 300px;
}

.properties-info {
	padding-top: 1.2rem;
	padding-bottom: 30px;
}
.properties-itemTitle {
	font-size: 24px;
}
.properties-infoDataTitle {
	font-size: 18px;
}
.properties-infoData {
	font-size: 18px;
}
.properties-relative {
    position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
}
.properties-relative::before,
.properties-relative::after{
	content: "";
	width: 40%;
	height: 2px;
	background-color: #fff;
}
.properties-absolute {
	position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.2rem;
}
.panel{
	display:none!important;
	background-color: transparent;
}
.tab.is-active{
	background-color: #EAEAEA;
	transition: all 0.2s ease-out;
}
.panel.is-show{
	display:block!important;
}

.properties-inner {
	position: relative;
	max-width: 1000px;
	margin: auto;
	margin-top: 90px;
	padding-left: 3rem;
	padding-right: 3rem;
}
.branch-imageWrapper {
	width: 100%;
	height: 150px;
	margin-top: 60px;
	position: relative;
	box-shadow: 15px 15px rgb(0 0 0 / 40%);
	cursor: pointer;
}
.branch-imageWrapper.z {
	z-index: 1;
}
.branch-imageWrapper::before,
.works-imageWrapper::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	top: 0;
	left: 0;
}

.branch-p,
.works-p {
	width: 100%;
	height: 100%;
}

.branch-image,
.works-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.works-flex {
	display: flex;
	flex-wrap: wrap;
}
.works-imageWrapper {
	width: calc(50% - 40px);
	height: 135px;
	margin-top: 60px;
	margin-right: 40px;
	position: relative;
	cursor: pointer;
}
.works-imageWrapper.z{
	z-index:1;
}

.works-microcopy {
	font-size: 25px;
	text-align: center;
	color: #fff;
	margin-top: 100px;
}

.works-title,
.branch-title {
	position: absolute;
	width: 100%;
	text-align: center;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-size: 35px;
	letter-spacing: 0.12em;
	text-shadow: 0 5px 10px rgb(0 0 0 / 60%);
}

.works-contact {
	text-align: center;
}

.contact-us {
	font-size: 18px;
	color: #fff;
}

.viewMore-wrapper {
	padding: 50px 0;
	text-align: center;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.6);
	margin-top: 90px;
}
.viewMore-title  {
	font-size: 25px;
}

.view-more {
	font-size: 18px;
}
.modal-branchTitle{
	font-size: 26px;
	text-align: center;
	padding: 2rem 0;
}

.modal-works{
	background-color: #EAEAEA;
	max-width: 1200px;
	padding: 4rem;
}
.modal-branch {
	display: none;
	background-color: #fff;
	width: 860px;
	max-width: 100%;
	padding: 4rem;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0px);
	z-index: 9999;
}
.modal-branch::-webkit-scrollbar,
.modal-works-bg::-webkit-scrollbar {
	width: 4px;
}
.modal-branch::-webkit-scrollbar-track,
.modal-works-bg::-webkit-scrollbar-track {
	background-color: #ccc;
}
.modal-branch::-webkit-scrollbar-thumb,
.modal-works-bg::-webkit-scrollbar-thumb {
	background-color: #666;
}
.works-imageWrapper:nth-child(2n+1) .modal-works-bg {
	display: none;
	background-color: #fff;
	width: 900px;
	max-width: calc(100vw - 8rem);
	padding: 4rem;
	position: absolute;
	top: 0;
	left: calc(100% + 20px);
	transform: translate(-50%, 0);
	height: 75vh;
	overflow-y: scroll;
	z-index: 9999;
}
.works-imageWrapper:nth-child(2n) .modal-works-bg {
	display: none;
	background-color: #fff;  
	width: 900px;
	max-width: calc(100vw - 8rem);
	padding: 4rem;
	position: absolute;
	top: 0;
	left: -20px;
	transform: translate(-50%, 0);
	height: 75vh;
	overflow-y: scroll;
	z-index: 9999;
}
.modal-branch.active,
.modal-works-bg.active {
	display: block!important;
}
.close-btn {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 50px;
	top: 60px;
	border: 2px solid #000;
	cursor: pointer;
}
.close-btn::before,
.close-btn::after {
	content: "";
	position: absolute;
	width: 80%;
	height: 2px;
	background-color: #000;
	left: 50%;
	top: 50%;
}
.close-btn::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
.close-btn::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
.modal-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	margin-top: 40px!important;
}
.modal-worksImage {
	width: 100%;
	height: auto;
	object-fit: cover;
	margin-bottom: 20px;
}
.modal-itemWrapper {
	width: 46%;
	height: 340px;
	position: relative;
}

.modal-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.modal-title {
	position: absolute;
	max-width: 100%;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	/*color: #fff;*/
	font-size: 24px;
	margin-left: 2rem;
	letter-spacing: 0.12em;
	display: flex;
	align-items: center;
	min-height: 200px;
	/*text-shadow: 0 5px 10px rgb(0 0 0 / 60%);*/
}
.modal-title.-right {
	text-align: right;
	left: auto;
	right: 0;
	margin-left: 0;
	margin-right: 2rem;
}
.modal-worksWrapper {
	width: calc((100% - 80px)/3);
}

.modal-worksTitle {
	font-size: 20px;
}

.modal-byYear {
	background: linear-gradient(180deg, #A3A3A3, #110909);
	text-align: center;
	padding: 40px 0;
	margin-top: 20px;
	color: #fff;
}
.under-line-white {
	padding-bottom: 10px;
	border-bottom: 1px solid;
	width: 90%;
	margin: auto;
	margin-bottom: 20px;
}
.modal-byYear p {
	line-height: 3em;
}

.switch-flex {
	display: flex;
	flex-wrap: wrap;
}

.switch-tab {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	width: calc(25% - 15px);
	margin-right: 20px;
}
.switch-tab:last-child {
	margin-right:0px;
}
.switch-tab.active {
	background-color: #EAEAEA;
}
.switch-item {
	text-align: center;
	padding: 0.6rem 0;
	font-size: 14px;
	line-height: 1.4;
}

.w-max {
	width: 100%;
	height: 100%;
}
@media (hover: hover) {
	.hover-effect:hover::before,
	.read-more:hover::before {
		left: 0;
		width: 100%;
	}
	.contact-us:hover {
		color: #fff!important;
	}
}


@media screen and (max-width: 1100px) {
	.properties-itemTitle {
		font-size: 21px;
	}
	.properties-infoDataTitle {
		font-size: 12px;
	}
	.properties-infoData {
		font-size: 14px;
	}
	.properties-relative {
		gap: 10px;
	}
	.properties-relative::before,
	.properties-relative::after {
		width: 20%;
	}
	.modal-worksImage {
		height: 130px;
	}
	.footer {
		padding: 50px 0;
		position: relative;
	}
	.footer::before {
		content: "";
		width: calc(100% - 80px);
		height: 1px;
		position: absolute;
		top: 0;
		left: 40px;
		background-color: #333;
	}
	.footer-left, .footer-center, .footer-right {
		flex: auto;
	}
	.footer-left, .footer-center {
		width: 50%;
	}
	.footer-right {
		width: 100%;
		padding: 0 40px;
	}
	.header {
		padding-right: 0;
	}
	.nav-button {
		display: block;
		width: 48px;
		height: 100%;
		border: none;
		color: #fff;
		background-color: black;
	}
	.header-nav {
		display: none;
	}
	.header-nav.active{
		display: block;
		position: fixed;
		width: 100vw;
		height: auto;
		top: 0;
		padding: 120px 0 0 0;
		margin: 0 0 0 -40px;
		background: rgba(255, 255, 255, 0.9);
		min-height: 100vh;
		animation: fadeUp 0.3s ease forwards;
		opacity: 0;
		transform: translateY(30px);
	}
	@keyframes fadeUp {
		0%{
			opacity: 0;
			transform: translateY(30px);
		}
		100%{
			opacity: 1;
			transform: translateY(0px);
		}

	}
	.nav-subtext {
		font-size: 16px;
		letter-spacing: 0.15em;
	}
	.header-navItem{
		padding: 24px;
		color: #000;
	}
	.sns-group {
		display: flex;
		justify-content: center;
	}
	.cls-1 {
		fill: transparent;
	}
	.sns-item {
		display: flex;
		width: 55px;
		justify-content: center;
		height: 100%;
	}
	#twitterLogo{
		width: 42px;
	}
	#instagramLogo{
		width: 24px;
	}
	#facebookLogo{
		width: 30px;
		margin-bottom: 6px;
	}
	.branch-imageWrapper {
		height: 150px;
	}
	.branch-title,
	.works-title {
		font-size: 26px;
	}
	.works-imageWrapper {
		width: 100%;
		margin-right: 0;
	}
	.modal-itemWrapper {
		width: 100%;
		height: 320px;
	}
	.modal-works-bg {
		width: 100%!important;
		left: calc(50vw - 3rem)!important;
	}
	.modal-title {
		line-height: 1.6;
		min-height: 170px;
		font-size: 24px;
	}
	.switch-tab {
		width: 50%;
		margin-right: 0px;
	}
	.modal-worksWrapper {
		width: 100%;
	}
	.works-microcopy,
	.viewMore-title {
		font-size: 18px;
	}
	.close-btn {
		width: 40px;
		height: 40px;
		top: 45px;
		right: 31px;
	}
}