@charset  "utf=8";
html {
	height: 100%;
	scroll-behavior: smooth;  
}
body {
	overflow-y: scroll;
	line-height: 1.70;
	letter-spacing: 0.05em;
	font-feature-settings: "palt" 1;
	background-color: #ffffff;
	font-family: "Noto Serif JP", serif;
	font-size: 1rem;
	font-weight: 500;
	color: #21252e;
	overflow-x: hidden;
  width: 100%;
	scrollbar-gutter: stable;
	-webkit-font-smoothing: antialiased;
}
*, *::before, *::after {
	box-sizing: border-box;
}
a {
	text-decoration: none;
}
li {
	list-style-type: none;
}
img{
	vertical-align:top;
}
.container{
	max-width: 1200px;
	margin: 0 auto;
}
@media screen and (max-width: 1370px){
	.container{
		width: calc((1100 / 1360) * 100%);
	}
}
@media screen and (max-width: 925px){
	.container{
		width: 100%;
		padding: 0 16px;
	}
}

/*ヘッダー-----------------*/
.usual-header{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 74px;
	height: 100vh;
	background-color: #21252e;
	transition: background-color 0.3s ease;
}
.usual-header h1 img{
	width: 161px;
	margin-left: 33px;
	margin-top: 20px;
}
.usual-header__menu{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 37px;
	width: 100%;
	height: 621px;
	background-color: #21252e;
	transition: background-color 0.3s ease;
}
.contact-menu li{
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1.3;
}
.contact-menu li a{
	padding: 15px 15px;
	color: #ffffff;
	transition: all 0.3s ease; 
}
.contact-menu li a:hover{
	filter: alpha(opacity=70);
	opacity: 0.70;
}
.contact-mail{
	position: relative;
}
.contact-mail::after{
	position: absolute;
	content: "";
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: #ffffff;
	bottom: 0;
	left: -10px;
}
.contact-mail img{
	width: 22px;
}
.contact-line img{
	width: 22px;
}
.contact-text{
	letter-spacing: 0.15em;
}

/*スクロールにより固定メニューのスタイル変更-----*/
.is-scroll .usual-header{
	background-color: transparent;
}
.is-scroll .usual-header__menu{
	border: 1px solid #21252e;
	background-color: #ffffff;
}
.is-scroll .openbtn span{
	background-color: #21252e;
}
.is-scroll .contact-menu li a{
	color: #21252e;
}
.is-scroll .contact-mail::after{
	background-color: #21252e;
}
.is-scroll .contact-mail img{
	filter: invert(1); 
}

/*ハンバーガーメニュー開時固定メニュー---------------------*/
body.panelactive{
	overflow: hidden;
}
.panelactive .usual-header{
	background-color: #ffffff;
}
.panelactive .usual-header__menu{
	background-color: #ffffff;
	border: 1px solid #ffffff;
}
.panelactive .openbtn span{
	background-color: #21252e;
}
.panelactive .usual-header__menu li {
	visibility: hidden;
}

/*ハンバーガーボタンで表示されるナビゲーション-------------------------*/
#g-nav{
	position:fixed;
	z-index: 9998;
	top:0;
	transform: translateX(-120%);
	width: 56.25%;
	height: 100vh;
	background: #ffffff;
	transition: transform 0.6s ease;
}
#g-nav.panelactive{
	transform:translateX(0)
}
#g-nav.panelactive #g-nav-list{
	width: 100%; ;
	height: 100vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
#g-nav ul {
	display: inline-block;
	margin-top: 160px;
	margin-left: 176px;
}
#g-nav li{
	list-style: none;
}
#g-nav li:last-child {
	margin-top: 48px;
}
#g-nav li a{
	display: block;
	padding:10px;
	text-decoration: none;
	font-weight: 700;
	line-height: 34px;
	color: #21252e;
}

/*ハンバーガーメニュー開時の背景--------------*/
/* スモーク背景のスタイル */
.nav-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9997;
	opacity: 0;
	visibility: hidden;
	transition: all 0.6s;
	cursor: pointer;
}
/* メニューが開いたら表示 */
body.panelactive .nav-mask {
	opacity: 1;
	visibility: visible;
}

/*ハンバーガーメニューのボタン--------------------*/
.openbtn{
	display: block;
	position:relative;
	z-index: 9999;
	cursor: pointer;
	width: 50px;
	height:50px;
	flex-shrink: 0;
	transition: all 0.3s ease; 
}
.openbtn:hover{
	filter: alpha(opacity=70);
	opacity: 0.70;
}
.openbtn span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: #ffffff;
	width: 45%;
}
.openbtn span:nth-of-type(1) {
	top:15px;	
}
.openbtn span:nth-of-type(2) {
	top:23px;
}
.openbtn span:nth-of-type(3) {
	top:31px;
}
.openbtn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}

/*SPナビゲーション------------------------*/
@media screen and (max-width: 925px){
	.usual-header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 60px;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #21252e;
	}
	.usual-header__menu{
		display: flex;
		flex-direction: row-reverse;
		flex-shrink: 1;
		min-width: 0;
		align-items: center;
		gap: 13px;
		width: auto;
		height: 100%;
	}
	/*ハンバーガーメニューのボタン*/
	.openbtn{
		top: 0;
		right: 15px;
		left: auto;  
	}
	/*ハンバーガーボタンで表示されるナビゲーション*/
	#g-nav{
		top:0;
		left: 0;
		transform: translateX(-100%);
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: transform 0.6s ease;
	}
	#g-nav.panelactive{
		transform: translateX(0);
	}
	#g-nav.panelactive #g-nav-list{
		width: 100%;
		height: auto;
	}
	#g-nav ul {
		padding: 153px 0 40px;
		margin: 0 auto;
		text-align: left;
	}
	#g-nav li {
		width: 100%;
	}
	#g-nav li:last-child {
		margin-top: 32px;
	}
	#g-nav li a {
		margin-left: 75px;
		padding: 4px 0;
	}
	.contact-menu li a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		width: 30px;
		height: 30px;
		color: #ffffff !important;
	}
	.contact-menu {
		display: flex; 
		gap: 13px;
	}
	.contact-menu li {
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	}
	.contact-mail::after,
	.contact-text {
		display: none;
	}
	.usual-header h1 {
		flex-shrink: 1; 
		min-width: 0;
	}
	.usual-header h1 img {
		margin: 14px 0 0 20px;
		max-width: 109px;
		width: 100%;
		height: auto;
	}
	.openbtn img {
		width: 28px;
		height: auto;
		filter: none !important;
	}
	.contact-mail img {
		width: 24px;
		height: auto;
		filter: none !important;
	}
	.contact-line img {
		width: 24px;
		height: auto;
	}
	/*ハンバーガーメニュー開時固定メニュー*/
	.panelactive .usual-header{
		background-color: #21252e;
	}
	.panelactive .usual-header__menu{
		background-color: #21252e;
		border: 1px solid #21252e;
	}
	.panelactive .openbtn span{
		background-color: #ffffff;
	}
	.panelactive .usual-header__menu li {
		visibility: visible;
	}
}

/*FV---------------------*/
#top{
	width: 100%;
	background-color: #21252e;
}
.fv{
	position: relative;
	width: calc(100% - 74px);
	height: 760px;
	margin-left: 74px;
	background-image: url(../../img/lp-images/fv/toppic.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.fv__text{
	position: absolute;
	bottom: 45px;
	width: 100%;
	padding-left: 46px;
	padding-right: 15px;
	box-sizing: border-box;
	color: #ffffff;
}
.fv__text h1{
	font-family: "Playfair Display", serif;
	font-size: 3.75rem;
	font-weight: 400;
	letter-spacing: 0.05em;
}
.fv__text h2{
	font-size: 2.25rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
#top .catch{
	width: 100%;
	text-align: center;
	padding: 43px 0;
	background-color: #21252e;
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 0.1em;
}
#top .text-main {
  border-right: 1px solid #ffffff; 
  padding-right: 10px;
  margin-right: 8px;
}
@media screen and (max-width: 925px){
	#top{
		padding-top: 74px;
	}
	.fv{
		width: 100%;
		height: 475px;
		margin: 0;
		background-image: url(../../img/lp-images/fv/toppic-sp.webp);
	}
	.fv__text {
		padding-left: 20px;
		bottom: 30px;
	}
	.fv__text h1 {
		font-size: 2.5rem; 
		line-height: 1.2;
	}
	.fv__text h2 {
		font-size: 1.5rem; 
		margin-top: 10px;
	}
}
@media screen and (max-width: 620px){
	.fv__text {
		padding-left: 20px;
		bottom: 75px;
	}
	.fv__text h1 {
		width: 70%;
		font-size: 1.25rem; 
		line-height: 1.44;
	}
	.fv__text h2 {
		font-size: 0.875rem; 
		margin-top: 10px;
	}
	#top .catch{
		width: 231px;
		margin: 0 auto;
		padding: 30px 0;
		font-size: 0.875rem;
	}
}

/*お悩み------------------------*/
#worry{
	position: relative;
	background-color: #e5e5e5;
	padding-top: 80px;
	padding-bottom: 80px;
}
#worry::after{
	position: absolute;
	content: "";
	display: inline-block;
	width: 125px;
	height: 50px;
	background-image: url(../../img/lp-images/worry-resolve/sb-triangle.svg);
	background-size: contain;
	background-repeat: no-repeat;
	bottom: -49px;
	left: 23.5%;
}
#worry h2{
	margin-bottom: 40px;
	text-align: center;
	font-size: 1.75rem;
	letter-spacing: 0.05em;
}
.worries{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	max-width: 1000px;
  width: 100%;
	margin: 0 auto;
}
.worries__card{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; 
	flex: 0 1 calc((100% - 120px) / 4);
	width: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1; 
	background-color: #b0957d;
	min-width: 0;
}
.worries__card p{
	position: relative;
	padding-top: 46px;
	color: #ffffff;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
  margin: 0;
}
.worries__card p::before {
	position: absolute;
	content: "";
	display: block;
	width: 36px;
	height: 36px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: 0;
	left: 50%;
	transform: translateX(-50%); /* 常に中央に配置 */
}
.hands-icon::before { 
	background-image: url(../../img/lp-images/worry-resolve/handshake.svg);
 }
.stationery-icon::before {
	 background-image: url(../../img/lp-images/worry-resolve/stationery.svg);
 }
.yen-icon::before {
	 background-image: url(../../img/lp-images/worry-resolve/yen-circle.svg);
	}
.talk-icon::before {
	 background-image: url(../../img/lp-images/worry-resolve/talk-bubbles.svg);
	}
@media screen and (max-width: 1170px){
	.worries{
		gap: 30px;
		width: calc(100% - 160px);
		max-width: none;
		margin: 0 80px;
	}
	.worries__card {
		flex: 0 1 calc((100% - 90px) / 4);
	}
	.worries__card p{
		font-size: 1rem;
	}
}
@media screen and (max-width: 925px) {
	#worry::after{
		left: calc(50% - 15%);
	}
	.worries{
		gap: 6px 6px;
		width: 100%;
		margin: 0;
		max-width: 600px;
		margin-inline: auto;
	}
	.worries__card {
			flex: 0 0 calc((100% - 6px) / 2);
			min-width: 0; 
		}
}
@media screen and (max-width: 620px) {
	#worry h2{
		font-size: 1rem;
	}
	.worries__card p{
		font-size: 0.875rem;
		line-height: 1.7;
	}
}

/*解消ポイント-------------------*/
#resolve{
	display: flex;
	justify-content: space-between;
}
.point-wrap{
	width: 39.1%;
	min-width: 562px;
	margin: 0 0 0 8.3%;
}
.point-wrap h2{
	position: relative;
	padding-top: 130px;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.point-wrap h2 .sp-br,
.point-wrap h3 .sp-br,
.point-wrap p .sp-br{
	display: none;
}
.point-wrap h2::after{
	position: absolute;
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 562px; 
	height: 3px;
	background-color: #b0957d;
	bottom: -5px;
	left: 0px;
}
.points{
	margin-top: 70px;
	margin-bottom: 70px;
}

.points__card{
	position: relative;
	margin-top: clamp(30px , 5vw , 70px);
	margin-bottom: 0;
	margin-left: 102px;
}
.points__card .num-deco{
	position: absolute;
	bottom: -50px;
	left: -102px;
	font-style: italic;
	font-size: 6rem;
	font-family: "DM serif Display", serif;
	font-weight: 400;
	color: #b0957d;
}
.points__card .point-title{
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.area{
	width: 48.4%;
	margin-top: 36px;
	align-self: flex-end;
}
.area img{
	width: 100%;
}
.area-text{
	display: flex;
	flex-direction: column;
	justify-content: right;
  width: 100%;
	max-width: 602px;
	margin: -130px 0 90px auto;
}
.area-text h3{
	font-family: "Playfair Display", serif;
	font-size: 6.25rem;
	color: #e5e5e5;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: right;
	overflow-wrap: break-word;
}
.area-text p{
	width: 65%;
  margin-left: 0%;
	background-color: #ffffff;
	letter-spacing: 0.05em;
}
@media screen and (max-width: 1260px) {
		.area{
		margin-top: 150px;
	}
	.area-text{
		max-width: 433px;
	}
	.area-text h3{
		font-size: 4.5rem;
	}
	.area-text p{
		width: 100%;
	}
}
@media screen and (max-width: 1020px) {
	#resolve{
		flex-direction: column;
	}
	.point-wrap{
		width: calc(100% - 8.3%);
		margin: 0 0 0 8.3%;
	}
	.area{
		width: 91.7%;
		margin-top: 0;
		margin-left: 8.3%;
	}
	.area-text{
		width: 100%;
		max-width: 602px;
	}
		.area-text h3{
		font-size: 6.25rem;
	}
	.points{
		width: fit-content;
    	margin-inline: 7% auto;
	}
}
@media screen and (max-width: 925px) {
	#resolve{
		width: 100%;
		margin: 0;
		padding: 0 0 0 16px;
		background-color: #f3f3f3;
	}
	.point-wrap{
		width: 100%;
		min-width: auto;
		margin: 0;
	}
	.points__card{
		margin-left: 50px;
	}
	.points__card .num-deco{
		bottom: -50px;
		left: -60px;
	}
	.area-text{
		width: 360px;
		margin: -130px 0 90px auto;
	}
	.area-text h3{
		font-size: 3.75rem;
	}
	.area-text p{
		width: 100%;
		padding-left: 0;
		background-color: transparent;
		font-size: 0.875rem;
	}
}
@media screen and (max-width: 620px) {
	#resolve h2{
		padding-top: 130px;
		font-size: 1.25rem;
	}
	#resolve h2::after{
		width: 390px;
		height: 3px;
		bottom: -5px;
		left: 0px;
	}
	/* .points{
		width: 100%;
	} */
	.points__card .point-title{
		font-size: 1.25rem;
	}
	.points__card p{
		font-size: 0.875rem;
	}
}
@media screen and (max-width: 475px) {
	.points__card{
		margin-left: 80px;
	}
	.points__card .num-deco{
		bottom: -35px;
		left: -70px;
	}
	.area-text{
		width: 322px;
	}
	.area-text h3{
		font-size: 3.375rem;
	}
	.points__card p{
		font-size: 0.875rem;
	}
	.point-wrap h3 .sp-br,
	.point-wrap p .sp-br{
		display: block;
	}
}
@media screen and (max-width: 415px) {
	#resolve h2{
		text-align: center;
	}
	#resolve h2::after{
		width: 56%;
		height: 3px;
		bottom: -5px;
		left: 22%;
	}
	.points{
		width: 302px;
		margin: 0 auto;
	}
	.point-wrap h2 .sp-br{
		display: block;
	}
}

/*外構工事メニュー------------------*/
#const-menu{
	background-color: #21252e;
}
#const-menu h3{
	position: relative;
	padding-top: 80px;
	padding-bottom: 77px;
	text-align: center;
}
#const-menu h3 .en-title{
	font-family: "Playfair Display", serif;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #b0957d;
}
#const-menu h3 .jp-title{
	position: absolute;
	top: 150px;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content; 
	letter-spacing: 0.05em;
	color: #ffffff;
}
.menus{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:24px;
	width: 100%;
	padding-bottom: 80px;
}
.menus__card{
	display:flex;
	flex-direction: column;
	flex: 0 1 calc((100% - 48px) / 3);
	width: 100%;
	min-width: 0;
	min-height: 385px;
	color: #ffffff;
}
.menus__card img{
	display: block;
	width: 100%;
	height: auto;
}
.menus__card dt{
	padding-top: 10px;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.menus__card dd{
	padding-top: 10px;
}
@media screen and (max-width: 1370px){
	.menus{
		width: calc(100% - 160px);
		margin: 0 auto; 
	}
}
@media screen and (max-width: 1253px) {
  .menus__card {
		flex: 0 1 343px; 
		width: 100%;
		max-width: 343px; 
  }
}
@media screen and (max-width: 925px) {
	.menus{
		width: 100%;
		margin: 0 auto; 
	}
}
@media screen and (max-width: 620px) {
	#const-menu h3 .en-title{
		font-size: 1.5rem;
	}
	#const-menu h3 .jp-title{
		top: 120px;
		font-size: 0.875rem;
	}
	.menus__card dt{
		font-size: 1.25rem;
	}
	.menus__card dd{
		font-size: 0.875rem;
	}
}

/*人気相談TOP3-------------------*/
#top3{
	width: 100%;
	background-image: 
    linear-gradient(rgba(33, 37, 46, 0.8), rgba(33, 37, 46, 0.8)),
    url(../../img/lp-images/top3/entrance.webp);
	background-position: top, top;
	background-size: 100% 67.8%, 100% 67.8%;
	background-repeat: no-repeat, no-repeat;
	background-color: #ffffff;
	padding-top: 70px;
	box-sizing: border-box;
}
.top3__title-box{
	width: 78.2%;
	margin: 0 auto;
	background-color: rgba(33, 37, 46, 0.8);
}
.top3__title-box h3{
	padding-top: 20px;
	padding-bottom: 35px;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.top3__title-box h3 .top3-title{
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #b0957d;
}
.top3__title-box h3 .sub-title{
	color: #ffffff;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.top3__list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:24px;
	width: 100%;
	padding-top: 32px;
	padding-bottom: 80px;
}
.top3__card{
	display:flex;
	flex-direction: column;
	flex: 0 1 calc((100% - 48px) / 3);
	width: 100%;
	min-width: 0;
	min-height: 356px;
	color: #ffffff;
}
.top3__card img{
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover; 
}
.top3__card p{
	padding: 8px 0;
	background-color: #21252e;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
@media screen and (max-width: 1370px){
	.top3__list{
		width: calc(100% - 160px);
	}
}
@media screen and (max-width: 1253px) {
	.top3__list{
		padding-bottom: 0px;
	}
	.top3__card p{
		font-size: 1.25rem;
	}
}
@media screen and (max-width: 830px) {
	#top3{
		background-image: 
    linear-gradient(rgba(33, 37, 46, 0.8), rgba(33, 37, 46, 0.8)),
    url(../../img/lp-images/top3/entrance-sp.webp);
		background-size: cover, cover;
		background-position: center, center;
	}
	.top3__list{
		flex-direction: column;
		justify-content: center;
		flex-wrap: wrap;
		gap:24px;
		width: 100%;
		padding-top: 32px;
		padding-bottom: 80px;
	}
	.top3__card{
		min-height: auto;
	}
	.top3__card img{
		display: block;
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 620px) {
	.top3__title-box h3 .top3-title{
		font-size: 1.25rem;
	}
	.top3__title-box h3 .sub-title{
		width: 195px;
		margin: 0 auto;
		font-size: 0.875rem;
	}
}

/*施工事例---------------------*/
#works{
	width: 100%;
	min-height: 1136px;
	background-image: linear-gradient(#21252e,#21252e);
	background-size: calc(1320 / 1440 * 100%) 1136px;
	background-position: left top;
	background-repeat: no-repeat;
	background-color: #ffffff;
}
#works h3{
	position: relative;
	padding-top: 80px;
	padding-bottom: 60px;
	text-align: center;
}
#works h3 .en-title{
	font-family: "Playfair Display", serif;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #b0957d;
}
#works h3 .jp-title{
	position: absolute;
	top: 150px;
	left: calc((100% - 80px) / 2);
	letter-spacing: 0.05em;
	color: #ffffff;
}
.explain{
	padding-bottom: 50px;
	text-align: center;
	letter-spacing: 0.05em;
	color: #ffffff;
}
.scroll-hint {
  	display: none;
}
.works__list{
	width: 1260px;
	margin: 0 auto;
}
.slide{
	display: flex;
	gap: 32px;
	margin-bottom: 32px;
}
.slide a{
	display: block;
	width: 100%;
}
.works__card{
	position: relative;
	display: flex;
  flex-direction: column;
	width: auto;
  height: 500px;
	background-color: #ffffff;
	color: #21252e;
}
.works__img-wrapper {
	width: 100%;
	overflow: hidden;
}
.works__list a{
	transition: all 0.3s ease; 
}
/* .works__list a:hover{
	filter: alpha(opacity=70);
	opacity: 0.70;
} */
.works__card img{ 
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.works__card:hover img{ 
	transform: scale(1.1);
}
.works__card dl{
	margin: 10px;
}
.works__card dt{
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding-bottom: 8px;
}
.works__card dd{
	font-size: 0.875rem;
}
.catbg{
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.875rem; 
	font-weight: 600;
	background-color: #ffffff; 
	color: #21252e;
	border: 1px solid #21252e;
	border-radius: 100px;
	text-align: center;
}
@media screen and (max-width: 1420px) {	
	.scroll-hint {
		display: block;
		padding-right: 9%;
		font-size: 0.73rem;
		font-weight: 700;
		text-align: right;
		color: #ffffff;
	}
	.works__list{
		width: 84%;
		margin: 0 auto;
	}
	.slide{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		padding-bottom: 20px;
	}
	.slide a{
		width: auto;
		flex: 0 0 400px;
	}
	.works__card{
		width: 100%;
		height: 500px;
	}
	.works__card img{
		height: 290px;
		object-fit: cover;
	}
}
@media screen and (max-width: 925px) {
	#works{
		width: 100%;
		min-height: 0;
		margin-top: 60px;
		background-image: linear-gradient(#21252e,#21252e);
		background-size: cover;
		background-position: left top;
		padding-bottom: 32px;
	}
	.scroll-hint {
		padding-right: 1%;
	}
	.works__list{
		width: 100%;
		padding: 0 16px;
	}
	.slide{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	} 
	.slide a{
		flex: 0 0 400px;
		width: auto;
	}
	.works__card{
		width: 100%;
	}
}
@media screen and (max-width: 620px) {
	#works h3{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	#works h3 .en-title{
		font-size: 1.5rem;
	}
	#works h3 .jp-title{
		top: 100px;
		left: calc((100% - 60px) / 2);
		font-size: 0.875rem;
	}
	.explain{
		display: none;
	}
}
@media screen and (max-width: 432px) {
	.slide a{
		flex:0 0 343px;
	}
}

/*モーダルウィンドウのスタイル--------------------*/
.modal-content-inner {
	padding: 20px;
	background: #fff;
}
.modal-content-inner img {
	width: 100%;
	height: auto;
}
.modal-text-box {
	padding: 20px 0;
}
.modal-title {
	margin: 10px 0;
	font-size: 1.25rem;
	font-weight: 700;
}
.modal-description {
	font-size: 1rem;
	font-weight: 500;
}
.modal-text-box .catbg {
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
}
.modaal-inner-wrapper {
	position: relative !important;
	padding-top: 40px;
}
.modaal-close {
	top: 0 !important;
	right: 5px !important;
	position: absolute !important;
}
.modaal-close:after,
.modaal-close:before {
    background: #000 !important;
}
@media screen and (max-width: 620px) {
	.modal-content-inner {
		padding: 15px 0 5px;
		background: #fff;
	}
	.modal-text-box {
		padding: 10px 0 5px;
	}
	.modal-title {
		margin: 5px 0;
		font-size: 1rem;
		font-weight: 700;
	}
	.modal-description {
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.3;
	}
	.modal-text-box .catbg {
		font-size: 0.73rem;
		font-weight: 700;
	}
}

/*中間CTA--------------------*/
#cta{
	padding-top: 48px;
	padding-bottom: 80px;
}
#cta .catch{
	width: 100%;
	padding-bottom: 22px;
	text-align: center;
	background-color: #ffffff;
	color: #21252e;
	font-size: 1.25rem;
	letter-spacing: 0.05em;
}
#cta .text-main {
	border-right: 1px solid #21252e; 
	padding-right: 13px;
	margin-right: 7px;
}
#cta .text-main .sp-br{
	display: none;
}
#cta ul{
	text-align: center;
}
.btns{
	display: flex;
	justify-content: center;
	gap: 16px;
	list-style: none;
	padding: 0;
}
.btn{
	text-align: center;
}
.line-btn {
	width: 285px;
	height: 51px;
	display: flex;
	justify-content: center; 
	align-items: center;
	box-sizing: border-box; 
	padding: 0 10px;
	font-weight: 700;
	background-color: #ffffff;
	border: 1px solid #21252e;
	border-radius: 5px;
	color: #21252e; 
	text-decoration: none;
	transition: all 0.3s ease; 
}
.line-btn:hover{
	opacity: 0.70;
}
.icon-group {
	display: flex;
	align-items: center;
	gap: 1px;
	margin-right: 1px;
}
.icon-item {
	width: 30px;
	height: auto;
	display: block;
}
.icon-line {
	width: 25px;
	height: auto;
	display: block;
}
@media screen and (max-width: 925px) {
	.btns{
		flex-direction: column;
		align-items: center;
	}
}
@media screen and (max-width: 620px) {
	#cta .catch{
		font-size: 1rem;
	}
}
@media screen and (max-width: 520px) {
	#cta .text-main .sp-br{
		display: block;
	}
}

/*選ばれる理由----------------------*/
#why{
	position: relative;
	width: 100%;
	height: 909px;
	background-image:
		linear-gradient(#21252e,#21252e),
		linear-gradient(#e5e5e5,#e5e5e5);
	background-size: 
		calc(1320 / 1440 * 100%) 738px,
		100% 741px;
	background-position:
		right top,
		bottom;
	background-repeat: no-repeat;
	background-color: #ffffff;
}
#why::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(588 / 1440 * 100%);
	height: 741px; 
	background-image: url('../../img/lp-images/why-choose/why_choose_us_pic.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}
#why h3{
	position: relative;
	padding-top: 0;
	padding-bottom: 0;
	text-align: right;
}
#why h3 .en-title{
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 7.875rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: #e5e5e5;
}
#why h3 .jp-title{
	position: absolute;
	top: 120px;
	left: calc(180 / 1440 * 100%);
	font-size: 2rem;
	letter-spacing: 0.05em;
	color: #ffffff;
}
.reasons{
	margin-top: 0px;
	color: #ffffff;
}
.reasons__card{
	position: relative;
	margin-top: 0;
	margin-bottom: 46px;
	margin-left: calc(180 / 1440 * 100%);
}
.reasons__card .reason-title{
	padding-left: 10%;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.reasons__card .num-deco{
	position: absolute;
	top: -50px;
	left: 0;
	font-style: italic;
	font-size: 6.125rem;
	font-family: "DM serif Display", serif;
	font-weight: 400;
	color: #b0957d;
}
.reasons__card p{
	width: calc(670 / 1440 * 100%);
	padding-left: 10%;
	font-weight: 500;
}
.company-name{
	position: absolute;
	bottom: 30px;
	left: 120px;
	z-index: 1;
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 6.875rem;
	letter-spacing: 0.05em;
	line-height: 1;
	color: #ffffff;
}
@media screen and (max-width: 1385px) {
	#why h3{
		padding-top: 10px;
		padding-bottom: 0;
	}
	#why h3 .en-title{
		line-height: 1.3;
	}
	#why h3 .jp-title{
		top: 150px;
	}
	.reasons{
		margin-top: 45px;
		color: #ffffff;
	}
	.reasons__card{
		margin-bottom: 20px;
		margin-left: calc(180 / 1440 * 100%);
	}
	.reasons__card .reason-title{
		padding-left: 5%;
	}
	.reasons__card .num-deco{
		top: -30px;
		left: -30px;
		font-size: 3.75rem;
	}
	.reasons__card p{
		width: calc(750 / 1440 * 100%);
		padding-left: 5%;
	}
}
@media screen and (max-width: 830px) {
	#why{
		width: 100%;
		height: 1317px;
		background-image:
			linear-gradient(#21252e,#21252e),
			linear-gradient(#e5e5e5,#e5e5e5);
		background-size: 
			100% 1227px,
			100% 1317px;
		background-position:
			top,
			bottom;
	}
	#why::after {
		content: "";
		position: absolute;
		right: 0;
		top: 90px;
		width: 100%;
		height: 473px;
		background-image: url('../../img/lp-images/why-choose/why_choose_us_pic.webp');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 0;
	}
	#why h3 .en-title{
		font-size: 3rem;
	}
	#why h3 .jp-title{
		top: 598px;
		left: 16px;
		font-size: 1.25rem;
	}
	.reasons{
		width: 100%;
		padding: 0 16px;
		margin-top: 658px;
	}
	.reasons__card{
		width: 100%;
		margin-bottom: 80px;
		margin-left: 0;
	}
	.reasons__card .reason-title{
		padding-left: 0;
		font-size: 1.125rem;
		font-weight: 500;
	}
	.reasons__card .num-deco{
		position: absolute;
		top: -100px;
		left: 0;
		font-size: 4.5rem;
	}
	.reasons__card p{
		width: 100%;
		padding-left: 0;
		font-size: 0.875rem;
	}
	.company-name{
		bottom: 25px;
		left: 0;
		font-size: 3rem;
		line-height: 1;
		color: #ffffff;
	}
}
@media screen and (max-width: 620px) {
	#why{
		height: 1407px;
		background-image:
			linear-gradient(#21252e,#21252e),
			linear-gradient(#e5e5e5,#e5e5e5);
		background-size: 
			100% 1317px,
			100% 1407px;
	}
}

/*施工までの流れ---------------------*/
#process h3{
	position: relative;
	padding-top: 80px;
	padding-bottom: 60px;
	text-align: center;
}
#process h3 .en-title{
	font-family: "Playfair Display", serif;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #b0957d;
}
#process h3 .jp-title{
	position: absolute;
	top: 150px;
	left: calc((100vw - 235px) / 2);
	letter-spacing: 0.05em;
	color: #21252e;
}
.process-list{
	width: calc(934 / 1440 * 100%);
	margin: 0 auto;
	padding-bottom: 80px;
}
.process-list__card{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 46px;
}
.process-title{
	position: relative;
	background-color: #ffffff;
	color: #21252e;
	border: 1px solid #21252e;
	border-radius: 50%;
	width: 112px;
	height: 112px;
	font-weight: 700;
	text-align: center;
	padding-top: 10px;
}
.process-title::after{
	position: absolute;
	content: '';
	width: 4px;
	height: 30px;
	background-image: url(../../img/lp-images/process/conect-line.png);
	background-size: cover;
	background-repeat: no-repeat;
	bottom: -40px;
	left: 53px;
}
.process-list__card:nth-of-type(5) .process-title::after {
	display: none;
}
.process-title span{
	padding-top: 5px;
	display: block;
	width: 95%;
	margin: 0 auto;
	line-height: 1.3;
}
.bk-paint{
	background-color: #21252e;
	color: #ffffff;
}
.process-text{
	position: relative;
	display: grid;
	align-content: center;
	width: calc(760 / 934 * 100%);
	height: 112px;
	padding-left: 32px;
	background-color: #e5e5e5;
	text-align: left;
}
.process-text .num-deco{
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 0;
	font-family: "DM serif Display", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 5rem;
	color: #f3f3f3;
	line-height: 1;
}
.process-text .pt-deco{
	z-index: 1;
}
@media screen and (max-width: 925px) {
	.process-list{
		width: 100%;
		padding: 0 16px;
	}
	.process-text{
		width: calc(760 / 934 * 100%);
		padding: 1% 3%;
	}
	.process-text .pt-deco{
		width: auto;
	}
}
@media screen and (max-width: 620px) {
	#process h3 .en-title{
		font-size: 1.5rem;
	}
	#process h3 .jp-title{
		top: 120px;
		left: calc((100vw - 180px) / 2);
		font-size: 0.875rem;
	}
	.process-list__card{
		flex-direction: column;
		margin-bottom: 46px;
	}
	.process-title::after{
		top: -40px;
	}	
	.process-list__card:nth-of-type(1) .process-title::after {
		display: none;
	}
	.process-list__card:nth-of-type(5) .process-title::after {
		display: block;
	}
	.process-text{
		width: 100%;
		margin-top: 10px;
		padding: 0 32px
	}
	.process-text .pt-deco{
		font-size: 0.875rem;
	}
}

/*LINEで相談----------------------*/
#line-consul{
	width: 100%;
	background-image: url(../../img/lp-images/line/line_back.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: 79px;
	padding-bottom: 81px;
}
.consol-content{
	width: calc(1200 / 1440 * 100%);
	background-color: rgba(33, 37, 46, 0.95);
	color: #ffffff;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
}
.consol-content h3{
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 10px;
}
.consol-content h3 .sp-br{
	display: none;
}
.consol-content .consol-ex .sp-br{
	display: none;
}
.consol-content ul{
	width: fit-content;
	margin: 36px auto 15px;
	padding-left: 20px; 
}
.consol-content li{
	margin-bottom: 25px;
	text-align: left;
}
.consol-content .pic-ok{
	position: relative;
}
.consol-content .pic-ok::before{
	position: absolute;
	content: '';
	background-image: url(../../img/lp-images/line/pic.svg);
	width: 50px;
	height: 36px;
	background-size: cover;
	background-repeat: no-repeat;
	top: -5px;
	left: -70px;
}
.consol-content .consider-ok{
	position: relative;
}
.consol-content .consider-ok::before{
	position: absolute;
	content: '';
	background-image: url(../../img/lp-images/line/time.svg);
	width: 36px;
	height: 36px;
	background-size: cover;
	background-repeat: no-repeat;
	top: -5px;
	left: -62px;
}
.consol-content .consul-free{
	position: relative;
}
.consol-content .consul-free::before{
	position: absolute;
	content: '';
	background-image: url(../../img/lp-images/line/yen.svg);
	width: 32px;
	height: 36px;
	background-size: cover;
	background-repeat: no-repeat;
	top: -5px;
	left: -61px;
}
.frost-paint{
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid #ffffff;
	color: #ffffff;
}
.consol-content p a{
	margin: 0 auto;
	transition: all 0.3s ease; 
}
.consol-content p a:hover{
	filter: alpha(opacity=70);
	opacity: 0.70;
}
@media screen and (max-width: 830px) {
	.consol-content h3{
		font-size: 1.25rem;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.consol-content p{
		font-size: 0.875rem;
	}
	.consol-content p a{
		font-size: 1rem;
	}
}
@media screen and (max-width: 620px) {
	.consol-content{
		width: 100%;
	}
}
@media screen and (max-width: 400px) {
	.consol-content h3 .sp-br{
		display: block;
	}
	.consol-content .consol-ex .sp-br{
		display: block;
	}
}

/*コンタクトフォーム---------------------*/
#contact-form{
	padding: 80px 0;
	background-color: #e5e5e5;
}
.form-box{
	width: calc(890 / 1440 * 100%);
	margin: 0 auto;
	background-color: #ffffff;
}
#contact-form h3{
	position: relative;
	padding-top: 80px;
	padding-bottom: 60px;
	text-align: center;
}
#contact-form h3 .en-title{
	font-family: "Playfair Display", serif;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #b0957d;
}
#contact-form h3 .jp-title{
	display: block;
	margin-top: 10px;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.05em;
	color: #21252e;
}
.form-box .center{
	text-align: center;
	color: #21252e;
}
.form-list{
	width: calc(690 / 890 * 100%);
	margin: 0 auto;
}
.form-list dl{
	width: 100%;
}
.form-list dt{
	margin-top: 28px;
	font-size: 1rem;
	font-weight: 700;
}
.form-list dt .required{
	display: inline-flex;
	margin-left: 10px;
	padding: 4px 10px;
	align-items: center;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	background-color: #b0957d;
	border-radius: 3px;
	color: #ffffff; 
}
.form-list dd{
	margin-top: 16px;
}
input[type="checkbox"] {
	margin-right: 6px;
	vertical-align: middle;
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 1px solid #21252e;
	border-radius: 2px;
	background-color: #ffffff;
	cursor: pointer;
}
input[type="checkbox"]:checked {
	background-color: #b0957d;
	border-color: #b0957d;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='2,8 6,12 14,4' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
}
.inquiry-cat{}
.input-frame,
.textarea-frame{
	display: block;
	width: 100%;
	cursor: text;
}
.input-frame input,
.textarea-frame textarea {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #21252e;
	border-radius: 3px;
	resize: none;
}
.textarea-frame textarea{
	height: 139px;
}
.privacy{
	margin-top: 40px;
	text-align: left;
}
.privacy .p-link{
	position: relative;
	margin-right: 25px;
	color: #21252e;
	text-decoration: underline;
}
.privacy .p-link::after{
	position: absolute;
	content: '';
	background-image: url(../../img/lp-images/form/link.svg);
	background-size: cover;
	background-repeat: no-repeat;
	width: 18px;
	height: 18px;
	top: 3px;
	right: -22px;
}
.privacy a:hover{
	filter: alpha(opacity=70);
	opacity: 0.70;
}
.submit-area{
	margin-top: 40px;
}
.submit-area .submit{
	display: block;
	margin: 0 auto;
	padding: 15px 103px;
	font-size: 1.375rem;
	color: #ffffff;
	border: none;
	cursor: pointer;
	background: linear-gradient(to right, #b0957d 50%, #21252e 50%);
	background-size: 200% 100%;
	background-position: right;
	transition: background-position 0.3s ease;
}
.submit-area .submit:hover{
	background-position: left;
}
/* CF7出力の余分なp・brを吸収 */
.form-list dt p,
.form-list dd p {
	margin: 0;
	padding: 0;
}
.input-frame br,
.textarea-frame br {
	display: none;
}
.submit-area p {
	margin: 0;
}
.inquiry-cat p {
	margin: 0;
	display: contents;
}
.inquiry-cat .wpcf7-form-control-wrap {
	display: contents;
}
.inquiry-cat .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 0;
}
.inquiry-cat .wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: center;
	font-size: 15px;
}
.wpcf7-form{
	padding-bottom: 80px;
	
}
@media screen and (max-width: 1385px) {
	.form-box{
		width: calc(1180 / 1440 * 100%);
	}
}
@media screen and (max-width: 1180px) {
	.inquiry-cat .wpcf7-checkbox {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 580px) {
	.inquiry-cat .wpcf7-checkbox {
		grid-template-columns: repeat(1, 1fr);
	}
}
@media screen and (max-width: 925px) {
	#contact-form{
		padding: 0;
	}
	.form-box{
		width: 100%;
	}
}
@media screen and (max-width: 830px) {
	.form-box .center{
		font-size: 0.875rem;
	}
	.form-list{
		width: 100%;
		padding: 0 16px;
	}
	.form-list dt{
		font-size: 0.875rem;
	}
	.form-list dd{
		margin-top: 15px;
	}
	.inquiry-cat{
		flex-wrap: nowrap;
		height: auto;
	}
	.submit-area .submit{
		padding: 10px 90px;
	}
}
@media screen and (max-width: 620px) {
	#contact-form h3{
		padding-top: 60px;
		padding-bottom: 40px;
	}
	#contact-form h3 .en-title{
		font-size: 1.5rem;
	}
	#contact-form h3 .jp-title{
		margin-top: 0;
		font-size: 0.875rem;
	}
	.privacy{
		font-size: 0.875rem;
	}
}

/*フッター------------------------*/
footer{
	padding-top: 50px;
	background-color: #21252e;
	color: #ffffff;
}
.insta-btn{
	display: block;
}
.insta-btn a{
	color: #ffffff;
	transition: all 0.3s ease; 
}
.insta-btn a:hover{
	filter: alpha(opacity=70);
	opacity: 0.70;
}
.icon-insta{
	width: 30px;
	height: 30px;
}
.insta-text{
	font-family: "Playfair Display", serif;
	font-weight: 700;
}
.footer-logo{
	margin-top: 29px;
}
.footer-logo img{
	width: 230px;
	height: 51px;
}
.footer-text{
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-bottom: 20px;
}
address {
	font-style: normal; 
	font-size: 0.875rem;
}
address .c-name{
	margin-bottom: 10px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.info-other{
	font-size: 0.875rem;
}
.info-other p{
	margin-bottom: 7px;
}
.info-other a{
	color: #ffffff;
	transition: all 0.3s ease; 
}
.info-other a:hover{
	filter: alpha(opacity=70);
	opacity: 0.70;
}
.copy{
	display: block;
	width: 100%;
	text-align: center;
	padding: 15px 0;
}
@media screen and (max-width: 670px) {
	.footer-text{
		flex-direction: column;
	}
	.info-other{
		padding-top:16px;
	}
}

/*フェードアップ-----------------------------------*/
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1.8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}

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

  /*375pxより小さい端末への対応---------------------*/
@media screen and (max-width:374px) {
	body{
		transform-origin: top left;
		transform: scale(calc(100vw / 375));
		width: 375px;
		overflow-x:hidden;
	}
}

.grecaptcha-badge{
	visibility: hidden;
}