@charset "utf-8";

/*
Theme Name: rise-renovation
Author: YES-REFORM CO., LTD.
Version: 1.0.0
*/

:root {
	/* ブランドカラー */
	--color-primary: #4896bf;
	--color-secondary: #232a33;
	--color-accent: #68c2f1;

	/* テキストカラー */
	--text-primary: #232a33;
	--text-secondary: #797979;

	/* 境界・背景カラー */
	--border-color: #e5e5e5;
	--bg-grey: #f3f4f5;
	--bg-beige: #ded0bd;
	--bg-blue: #f3f7fc;
	--bg-darkblue: #194e69;

	/* フォントファミリー */
	--font-primary: "Zen Kaku Gothic New", sans-serif;
	--font-secondary: "EB Garamond", serif;
	;

	/* フォントサイズ */
	--font-size-sm: 1.4rem;
	--font-size-base: 1.6rem;
	--font-size-md: 1.8rem;
	--font-size-lg: 2.2rem;
	--font-size-xl: 2.6rem;

	/* 装飾 */
	--shadow-primary: 14.14px 14.14px 30px 1px rgba(35, 42, 51, 0.15);
	--shadow-light: drop-shadow(0 0 1px #fff);
}

/* Body
========================================== */
html {}

html, body {
	width: 100%;
	font-size: 62.5%;
	overflow-x: clip;
	/*sticky用*/
}

body {
	line-height: 1.8;
	font-size: var(--font-size-base);
	font-family: var(--font-primary);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--text-primary);
}

@media screen and (max-width: 599px) {
	body {
		word-wrap: break-word;
	}
}

/* header
========================================== */
.headerArea {
	z-index: 1200;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(35, 42, 51, 1);
	transition: background-color 0.5s ease;
}

#top .headerArea {
	background-color: transparent;
}

#top .headerLogo a {
	color: var(--text-primary);
}

#top .headerArea.scrolled {
	background-color: rgba(35, 42, 51, 1);
}

#top .headerArea.scrolled .headerLogo a {
	color: #fff;
}

.headerArea .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 90px;
}

.headerLogo {
	padding-left: 2rem;
}

.headerLogo a {
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 1em;
	font-size: 1.4rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: #fff;
}

.headerLogo a br {
	display: none;
}

.headerLogo .logo img {
	max-width: 70px;
	height: auto;
}

.headerLogo a:hover {
	opacity: 0.7;
	transition: 0.3s;
}

.headerInfo {
	display: flex;
	align-items: center;
	height: 90px;
	gap: 0 30px;
}

.headerNavi {
	position: relative;
	z-index: 100;
}

.headerNavi>ul {
	display: flex;
	justify-content: center;
	gap: 1em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.headerNavi>ul>li {
	position: relative;
	/*white-space: nowrap;*/
}

.headerNavi>ul>li>a {
	line-height: 1.2;
	display: block;
	padding: 2rem 1rem;
	color: #fff;
	font-weight: 600;
	font-size: var(--font-size-sm);
	text-decoration: none;
}

.headerNavi>ul>li>a:hover {
	text-decoration: underline;
}

.headerNavi .subMenu>a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.headerNavi .subMenu>a::after {
	display: block;
	top: 48%;
	right: 5px;
	content: "";
	width: 8px;
	border-top: 5px solid #fff;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.headerNavi .subMenu>a:hover {
	text-decoration: none;
}

.subMenuBox {
	position: fixed;
	top: 90px;
	left: 0;
	width: 100vw;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 3000;
	padding: 30px 10vw;
	will-change: opacity, transform;
	backface-visibility: hidden;
	/* フォントの残像対策 */
}

/* JSで.openを付けたときだけ表示 */
.subMenu.open>.subMenuBox {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 閉じる瞬間だけトランジション無効化 */
.subMenuBox.no-anim {
	transition: none !important;
}

.subMenuList {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2em;
	width: calc(100% - 30px);
}

.subMenuList li {
	width: calc((100% - 2em * 3)/4);
	border-bottom: 1px solid var(--border-color);
}

.subMenuList li a {
	display: block;
	position: relative;
	padding: 1em 1em 1em 30px;
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 500;
	transition: 0.3s;
}

.subMenuList li a::before {
	content: "";
	position: absolute;
	top: 1.5em;
	left: 5px;
	background: url(images/arrow_blue.svg) left top / contain no-repeat;
	width: 12px;
	height: 9px;
}

.subMenuList li:hover {
	border-bottom-color: var(--color-secondary);
}

.headerTel {
	display: flex;
	flex-direction: column;
	color: #fff;
	align-items: center;
}

.headerTel .tel {
	line-height: 1.2;
	color: #fff;
	font-size: 3rem;
	text-decoration: none;
	white-space: nowrap;
}

.headerContact {
	line-height: 1;
	text-align: center;
}

.headerContact a {
	display: flex;
	align-items: center;
	height: 90px;
	padding: 2.5rem 3rem;
	background-color: var(--color-primary);
	color: #fff;
	font-family: var(--font-secondary);
	letter-spacing: 2px;
	text-decoration: none;
}

.headerContact a:hover {
	background-color: var(--color-accent);
	transition: .3s;
}

.spMenuWrap {
	display: none;
}

.spBtn,
.spMenu,
.overlay {
	opacity: 0;
	pointer-events: none;
}

@media screen and (max-width: 1300px) {
	.headerLogo .logo img {
		max-width: 50px;
	}

	.headerLogo a br {
		display: block;
	}

	.headerInfo {
		display: flex;
		gap: 0 1em;
	}

	.headerNavi>ul>li>a {
		padding: 2rem 0.8rem;
	}

	.headerContact a {
		padding: 2rem 1.5rem;
	}

	.headerTel .tel {
		font-size: 2.6rem;
	}
}

@media screen and (max-width:1100px) {
	.headerNavi>ul {
		gap: 1em 0.5em;
	}

	.headerNavi>ul>li>a {
		padding: 2rem 0.5rem;
		font-size: 1.4rem;
	}

	.headerTel .tel {
		font-size: 2rem;
	}

	.headerContact a {
		font-size: 1.4rem;
	}

	.headerLogo a {
		font-size: 1.3rem;
	}

	.subMenuBox {
		padding: 30px;
	}
}

@media screen and (max-width:840px) {
	.headerArea {
		/* position: absolute; */
		position: fixed;
		background: none;
		z-index: 100;
	}

	.headerArea .inner {
		padding: 0 10px;
		height: 65px;
		background-color: var(--color-secondary);
	}

	/* #top .headerArea .inner {
		background: none;
	} */

	.headerLogo {
		padding: 5px 0 0;
	}

	.headerLogo img {
		width: 45px;
		height: auto;
	}

	.headerLogo a {
		font-size: 1.2rem;
		gap: 1em;
		color: #fff;
	}

	#top .headerLogo a {
		color: #fff;
	}

	.headerNavi,
	.headerInfo {
		display: none;
	}

	.spMenuWrap {
		display: block;
	}

	.spBtn {
		opacity: 1;
		pointer-events: auto;
		position: fixed;
		top: 10px;
		right: 10px;
		display: inline-block;
		width: 45px;
		height: 45px;
		padding: 13px 10px 15px;
		background-color: var(--color-primary);
		cursor: pointer;
		z-index: 2000;
	}

	.spBtn div {
		position: relative;
	}

	.spBtn span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background: #fff;
		left: 0;
		transition: .3s ease;
	}

	.spBtn span:nth-child(1) {
		top: 0;
	}

	.spBtn span:nth-child(2) {
		top: 9px;
	}

	.spBtn span:nth-child(3) {
		top: 18px;
	}

	.spBtn.active span:nth-child(1) {
		top: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.spBtn.active span:nth-child(2) {
		width: 0;
		left: 50%;
	}

	.spBtn.active span:nth-child(3) {
		top: 8px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.overlay.active {
		opacity: 1;
		pointer-events: auto;
	}

	.spMenu {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* iOSで慣性スクロール */
		position: fixed;
		top: 10px;
		right: 10px;
		width: calc(100% - 20px);
		height: 100%;
		z-index: 1000;
		transition: transform 0.3s ease;
		padding: 80px 3em 60px;
		background-color: rgba(255, 255, 255, 0.9);
	}

	.spMenu.active {
		opacity: 1;
		pointer-events: auto;
	}

	.spMenu::-webkit-scrollbar {
		width: 10px;
	}

	.spMenu::-webkit-scrollbar-track {
		background: transparent;
	}

	.spMenu::-webkit-scrollbar-thumb {
		background: transparent;
	}

	.spNavi {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(4, 1fr);
		gap: 2.5em 5em;
		width: fit-content;
		margin: 0 auto 50px;
	}

	.spNavi li a {
		line-height: 1.2;
		display: block;
		font-size: 1.5rem;
		font-weight: 600;
		word-wrap: normal;
		color: var(--text-primary);
		text-decoration: none;
	}

	.spInfo {
		margin-bottom: 30px;
		text-align: center;
		font-size: 1.4rem;
	}

	.spInfo .spLogo a {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
		text-decoration: none;
		font-weight: 600;
	}

	.spInfo .spTel {
		font-family: var(--font-secondary);
	}

	.spInfo .spTel a {
		line-height: 1.3;
		display: block;
		letter-spacing: 2px;
		width: fit-content;
		margin: 0 auto;
		text-decoration: none;
		font-size: 3rem;
		color: var(--color-primary);
	}

	.spNaviSub {
		margin-bottom: 3em;
	}

	.spNaviSub li {
		position: relative;
		padding-left: 18px;
	}

	.spNaviSub li::before {
		position: absolute;
		left: 0;
		top: .6em;
		content: "";
		width: 6px;
		height: 6px;
		border-top: 2px solid var(--color-primary);
		border-right: 2px solid var(--color-primary);
		transform: rotate(45deg);
	}

	.spNaviSub li a {
		display: block;
		font-size: 1.4rem;
		font-weight: 500;
		color: var(--text-primary);
		text-decoration: none;
	}
}

@media screen and (max-width:599px) {
	.spNavi {
		gap: 1.5em 2em;
	}
}

/* contents
========================================== */
/*.wrap{overflow: hidden;}*/
.contents {
	margin: 0 auto;
	width: 100%;
}

.contents p+p {
	margin-top: 1.5em;
}

.contentsInner {
	margin: 0 auto;
	padding: 30px 0 60px;
	width: 1200px;
}

@media screen and (max-width:1200px) {
	.contentsInner {
		width: 100%;
		padding: 30px 30px 60px;
	}
}

@media screen and (max-width:599px) {
	.spMenu {
		padding: 80px 1.8em 60px;
	}

	.contentsInner {
		padding: 50px 20px;
	}
}

/* mv
========================================== */
.mvArea {
	position: relative;
	width: 100%;
	padding-bottom: 50px;
}

.mvArea::before {
	z-index: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	content: "";
	width: 60%;
	height: 80%;
	background-color: var(--color-secondary);

}

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

.mvArea .imageBlock {
	z-index: 2;
	position: relative;
	padding-left: 22%;
}

.mvArea .mvText {
	z-index: 10;
	position: absolute;
	top: 56%;
	left: 10%;
	transform: translate(0, -50%);
	width: 100%;
	color: #fff;
	animation-name: mvfade;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	text-shadow: 2.12px 2.12px 10px rgba(35, 42, 51, 0.4);
}

.mvArea .mvText .ja {
	font-size: min(2.619vw, 4rem);
	font-weight: 400;
}

.mvArea .mvText .ja span {
	color: #68c2f1;
}

.mvArea .mvText .en {
	display: block;
	letter-spacing: 2px;
	font-weight: 400;
	font-size: min(7.5vw, 4rem);
	font-family: var(--font-secondary);
	color: #68c2f1;
}

@keyframes mvfade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media screen and (max-width:840px) {
	.mvArea {
		padding: 0;
	}

	.mvArea::before {
		display: none;
	}

	.mvArea .imageBlock {
		padding-left: 0;
	}

	.mvArea .mvText {
		top: auto;
		bottom: 50px;
		left: 30px;
		transform: translate(0);
	}

	.mvArea .mvText .ja {
		font-size: 3.8rem;
		font-size: min(6.344vw, 3.8rem);
	}

	.mvArea .mvText .en {
		font-size: min(6.678vw, 4em);
	}
}

/* 導入
========================================== */
.introArea {
	padding: 100px 0;
}

.introWrap {
	display: flex;
	gap: 60px;
	margin: 0 0 100px calc((100% - 1200px)/2);
}

.introWrap .textBlock {
	width: 50%;
}

.introWrap .imageBlock {
	width: 50%;
	text-align: center;
}

.introWrap .imageBlock img {
	max-width: 100%;
	height: auto;
	filter: drop-shadow(14.14px 14.14px 20px rgba(35, 42, 51, 0.3));
}

.introWrap.reverse {
	max-width: 1200px;
	margin: 0 auto 100px;
}

.introTitle {
	margin-bottom: 2em;
	font-size: 2rem;
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 1px;
	text-underline-position: under;
	text-underline-offset: 4px;
}

@media screen and (max-width:1200px) {
	.introArea {
		padding: 80px 30px;
	}

	.introWrap {
		display: flex;
		gap: 60px;
		margin: 0 auto 80px;
	}
}

@media screen and (max-width:840px) {
	.introArea {
		padding: 60px 20px;
	}

	.introWrap {
		flex-direction: column;
		gap: 30px;
	}

	.introWrap .textBlock,
	.introWrap .imageBlock {
		width: 100%;
	}

	.introWrap.reverse {
		flex-direction: column-reverse;
	}
}


/* 事業案内
========================================== */
.businessArea {
	padding: 100px 0;
}

.businessMainMenu {
	display: flex;
	align-items: flex-start;
	margin-bottom: 60px;
	max-width: 1200px;
	margin: 0 auto 60px;
}

.businessMainMenu .titleBlock {
	position: relative;
	width: 20%;
	margin-top: 30px;
	padding: 4em 2em 6em 0;
}

.businessMainMenu .titleBlock::after {
	z-index: -1;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 100vw;
	height: 100%;
	background-color: var(--color-secondary);
}

.businessMainMenu .titleBlock .ttlMain {
	margin-bottom: 0;
}

.businessMenuWrap {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
}

.businessMenu {
	position: relative;
	padding: 0 30px 30px 0;
}

.businessMenu .imageBlock img {
	width: 100%;
	height: auto;
}

.businessMenu a {
	color: #fff;
	text-decoration: none;
}

.businessMenu dl {
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: rgba(25, 78, 105, 0.8);
	backdrop-filter: blur(5px);
	color: #fff;
	width: 60%;
	transition: 0.3s;
}

.businessMenu dl::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: url(images/arrow_white.svg)left top/contain no-repeat;
	width: 23px;
	height: 17px;
}

.businessMenu dl dt {
	margin-top: -30px;
	padding: 0 0 0 30px;
}

.businessMenu dl dt .en {
	line-height: 1;
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-bottom: 15px;
	color: var(--color-primary);
	font-size: 7rem;
	font-weight: 400;
	overflow-wrap: break-word;
}

.businessMenu dl dt .ja {
	font-size: 2.2rem;
}

.businessMenu dl dd {
	padding: 30px 30px 50px;
}

.businessMenuWrap>.businessMenu {
	width: calc((100% - 60px)/2);
}

.businessMenuWrap>.businessMenu dl dt .en {
	font-size: 4.4rem;
}

.businessMenu a:hover dl {
	background-color: rgba(35, 42, 51, 0.95);
	backdrop-filter: blur(5px);
}

.businessMenu a:hover dl::after {
	right: 5px;
	transition: 0.3s;
}

@media screen and (max-width:1200px) {
	.businessMainMenu .titleBlock {
		width: 45%;
		padding: 4em 2em 4em 30px;
	}

	.businessMenuWrap {
		gap: 50px 30px;
		padding: 0 30px;
	}

	.businessMenu {
		padding: 0;
	}

	.businessMenuWrap>.businessMenu {
		width: calc((100% - 30px)/2);
	}

	.businessMenu dl {
		position: relative;
		margin-left: 20px;
		display: block;
		width: calc(100% - 40px);
	}

	.businessMenu dl dt {
		position: relative;
		padding-top: 1.8em;
	}

	.businessMenu dl dt .en {
		position: absolute;
		right: 0;
		top: -1em;
		font-size: 4rem;
	}

	.businessMenuWrap>.businessMenu dl dt .en {
		top: -0.5em;
		font-size: 3.6rem;
	}

}

@media screen and (max-width:840px) {
	.businessMenu dl dt .ja {
		font-size: 1.8rem;
	}

}

@media screen and (max-width:599px) {
	.businessArea {
		padding: 60px 0;
	}

	.businessMainMenu {
		flex-direction: column;
		margin-bottom: 30px;
	}

	.businessMainMenu .titleBlock {
		width: 100%;
		padding: 2em 20px;
	}

	.businessMainMenu>.businessMenu {
		padding: 0 20px;
	}

	.businessMenuWrap {
		gap: 30px;
		padding: 0 20px;
	}

	.businessMenuWrap>.businessMenu {
		width: 100%;
	}

	.businessMenu dl {
		margin-left: 0;
		width: 100%;
	}

	.businessMenu dl dt {
		padding: 20px 0 0 20px;
	}

	.businessMenu dl dd {
		padding: 30px 20px 40px;
	}
}

/* 強み
========================================== */
.strengthArea {
	margin: 80px 0;
	background-color: var(--bg-blue);
}

.strengthWrap {
	display: flex;
	gap: 10%;
	max-width: 1200px;
	margin: 0 auto;
}

.strengthWrap .titleBlock {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5em 2em 5em 0;
	width: 40%;
}

.strengthWrap .titleBlock::after {
	z-index: 1;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 100vw;
	height: 100%;
	background-color: var(--color-secondary);
}

.strengthWrap .titleBlock .ttlMain {
	position: relative;
	z-index: 2;
	margin-bottom: 0;
}

.strengthSliderMenu {
	padding: 4em 0 3em;
	position: relative;
}

.strengthSliderMenu li {
	line-height: 1.2;
	display: flex;
	gap: 1em;
	padding: 0 0.3em 0.5em;
}

#strengthSlider {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

#strengthSlider .swiper-slide {
	display: flex;
	gap: 10%;
}

#strengthSlider .swiper-slide .imageBlock {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 40%;
}

#strengthSlider .swiper-slide .imageBlock img {
	max-height: 100%;
	height: auto;
	width: auto;
	object-fit: cover;
}

#strengthSlider .swiper-slide .textBlock {
	width: 50%;
	padding: 5em 0;
}

.strengthNumber {
	font-size: 3rem;
	color: var(--color-primary);
	font-family: var(--font-secondary);
}

.strengthTitle {
	margin-bottom: 2em;
	font-size: clamp(2rem, 1.502rem + 1.33vw, 2.5rem);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 1px;
	text-underline-position: under;
	text-underline-offset: 4px;
}

@media screen and (max-width:1200px) {
	.strengthWrap {
		gap: 5%;
	}

	.strengthWrap .titleBlock {
		padding: 5em 2em 5em 30px;
	}

	.strengthSliderMenu {
		padding: 4em 30px 3em 0;
	}

	#strengthSlider .swiper-slide {
		gap: 5%;
	}
}

@media screen and (max-width:840px) {
	#strengthSlider .swiper-slide .textBlock {
		padding: 2em 0;
	}
}

@media screen and (max-width:599px) {
	.strengthArea {
		margin: 50px 0 30px;
	}

	.strengthWrap {
		flex-direction: column;
		gap: 20px;
	}

	.strengthWrap .titleBlock {
		padding: 2em 20px;
		width: 100%;
	}

	.strengthSliderMenu {
		padding: 20px 20px 50px 20px;
	}

	#strengthSlider .swiper-slide {
		flex-direction: column-reverse;
	}

	#strengthSlider .swiper-slide .imageBlock {
		width: 100%;
		display: block;
	}

	#strengthSlider .swiper-slide .imageBlock img {
		display: block;
		width: 100%;
		height: auto;
	}

	#strengthSlider .swiper-slide .textBlock {
		padding: 20px;
		width: 100%;
	}
}


/* 施工事例
========================================== */
.exampleArea {
	padding: 100px 0;
}

#exampleSlider {
	position: relative;
	padding: 30px 0 80px;
}

#exampleSlider > p {
	text-align: center;
}

.exampleList>li {}

.exampleList>li>a {
	text-decoration: none;
}

.exampleList .imageBlock {
	margin-bottom: 20px;
}

.exampleList .imageBlock a {
	overflow: hidden;
	position: relative;
	display: block;
	aspect-ratio: 4/3;
}

.exampleList .imageBlock a::before {
	content: "";
	display: block;
}

.exampleList .imageBlock a img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: 0.3s;
}

.exampleList>li .title a {
	text-decoration: none;
	color: var(--text-primary);
	font-weight: 600;
}

.exampleList .category {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.4em;
	column-gap: 0.4em;
}

.exampleList .category li a {
	line-height: 1.2;
	padding: .3em .5em .4em;
	text-decoration: none;
	background-color: var(--bg-darkblue);
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	transition: 0.3s;
}

.exampleList .category li a:hover {
	background-color: var(--color-primary);
}

.exampleList .imageBlock a:hover img {
	transform: scale(1.2);
}

.exampleList .title a:hover {
	color: var(--color-primary);
}

@media screen and (max-width:599px) {
	.exampleArea {
		padding: 50px 0;
	}
}

/* 会社案内
========================================== */
.companyArea {
	position: relative;
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	gap: 60px;
	padding: 60px 0;
}

.companyArea::before {
	z-index: 0;
	content: "";
	position: absolute;
	top: 0;
	right: 20%;
	width: 200%;
	height: 85%;
	background-color: var(--color-secondary);
}

.companyArea .textBlock {
	z-index: 2;
	position: relative;
	width: 40%;
}

.companyArea .textBlock p {
	color: #fff;
}

.companyArea .comapnyLinkWrap {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 50px;
}

.companyArea .comapnyLinkWrap li {
	overflow: hidden;
	position: relative;
	width: calc((100% - 30px)/2);
	filter: drop-shadow(14.14px 14.14px 20px rgba(35, 42, 51, 0.3));
}

.companyArea .comapnyLinkWrap li a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 6em 2em;
	text-decoration: none;
	color: var(--text-primary);
	background-color: #fff;
	transition: 0.5s;
}

.companyArea .comapnyLinkWrap li a::after {
	z-index: 3;
	content: "";
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: url(images/arrow_white.svg) left top/contain no-repeat;
	width: 23px;
	height: 17px;
}

.companyArea .comapnyLinkWrap li a .title {
	z-index: 2;
	position: relative;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 2rem;
	font-weight: 600;
	text-shadow:
		0 0 5px rgba(255, 255, 255, 1),
		0 0 5px rgba(255, 255, 255, 1),
		0 0 10px rgba(255, 255, 255, 1),
		0 0 10px rgba(255, 255, 255, 1),
		0 0 15px rgba(255, 255, 255, 1),
		0 0 15px rgba(255, 255, 255, 1),
		0 0 20px rgba(255, 255, 255, 1),
		0 0 20px rgba(255, 255, 255, 1),
		0 0 25px rgba(255, 255, 255, 1),
		0 0 25px rgba(255, 255, 255, 1);
}

.companyArea .comapnyLinkWrap li .imageBlock {
	overflow: hidden
}

.companyArea .comapnyLinkWrap li .imageBlock:before {
	content: "";
	display: block;
}

.companyArea .comapnyLinkWrap li .imageBlock img {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
	transition: 0.5s;
	opacity: 0.5;
}

.companyArea .comapnyLinkWrap li a:hover {
	color: var(--color-primary);
}

.companyArea .comapnyLinkWrap li a:hover .imageBlock img {
	opacity: 1;
}

.companyArea .comapnyLinkWrap li a:hover::after {
	right: 5px;
	transition: 0.5s;
}

@media screen and (max-width: 1200px) {
	.companyArea {
		padding: 60px 30px;
	}
}

@media screen and (max-width: 840px) {
	.companyArea {
		flex-direction: column;
		gap: 30px;
	}

	.companyArea .textBlock {
		width: 100%;
	}

	.companyArea::before {
		right: 0;
		width: 100%;
	}

	.companyArea .comapnyLinkWrap {
		margin-top: 0;
	}

	.companyArea .comapnyLinkWrap li a {
		padding: 5em 1.5em;
	}

	.companyArea .comapnyLinkWrap li a .title {
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 599px) {
	.companyArea {
		gap: 20px;
		padding: 60px 20px;
	}

	.companyArea .comapnyLinkWrap {
		gap: 20px;
	}

	.companyArea .comapnyLinkWrap li {
		width: 100%;
	}
}


/* footer
========================================== */
footer {
	width: 100%;
}

.footerWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 100px 0;
	max-width: 1200px;
}

.footerWrap a:hover img {
	opacity: .6;
	transition: .3s;
}

.footerInfoWrap {
	width: 30%;
	text-align: center;
}

.footerLogo a {
	display: block;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: fit-content;
	margin: 0 auto 30px;
	gap: 20px;
	text-decoration: none;
	text-align: left;
	font-weight: 600;
}

.footerNaviWrap {
	display: flex;
	justify-content: space-between;
	gap: 1em 2em;
	width: 65%;
}

.footerNavi {
	width: calc((100% - 2em *2)/3);
}

.footerNavi>li {
	position: relative;
}

.footerNavi>li::before {
	content: "";
	position: absolute;
	top: 1.5em;
	left: 5px;
	background: url(images/arrow_blue.svg) left top/contain no-repeat;
	width: 12px;
	height: 9px;

}

.footerNavi>li>a {
	display: block;
	padding: 1.2em 1em 1.2em 30px;
	line-height: 1.2;
	text-decoration: none;
	font-weight: 600;
	color: var(--text-primary);
}

.footerNavi>li>a {
	border-bottom: 1px solid var(--border-color);
}

.footerNavi>li>a:hover {
	text-decoration: underline;
}

.footerNavi li ul {
	margin-top: 1.2em;
	margin-left: 1em;
}

.footerNavi li ul li {
	position: relative;
	padding-left: 30px;
}

.footerNavi li ul li::before {
	content: "";
	position: absolute;
	top: .8em;
	left: 5px;
	background: url(images/arrow_gray.svg) left top/contain no-repeat;
	width: 12px;
	height: 9px;
	;
}

.footerNavi li ul li a {
	line-height: 1.2;
	display: block;
	padding: .5em 0;
	font-weight: 400;
	text-decoration: none;
	color: var(--text-primary);
}

.footerNavi li ul li a:hover {
	text-decoration: underline;
}

.footerTel {
	margin: 1em auto;
	padding: 1em 0;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}

.footerTel a {
	line-height: 1.3;
	display: block;
	letter-spacing: 2px;
	width: fit-content;
	margin: 0 auto;
	text-decoration: none;
	font-size: clamp(3rem, 3.333vw, 4rem);
	font-family: var(--font-secondary);
	color: var(--color-primary);
}

.footerContact a {
	display: block;
	margin: 1em auto 0;
	max-width: 260px;
	padding: 1em;
	background-color: var(--color-primary);
	color: #fff;
	text-decoration: none;
	font-family: var(--font-secondary);
}

.footerContact a:hover {
	background-color: var(--color-accent);
	transition: 0.3s;
}

.footerSpContact {
	display: none;
}

.copyright {
	margin: 0 auto;
	padding: 2rem 1rem;
	text-align: center;
	font-size: 1.4rem;
	font-family: var(--font-secondary);
	color: var(--color-primary);
}

@media screen and (max-width: 1200px) {
	footer {
		padding-bottom: 60px;
	}

	.footerWrap {
		padding: 60px 30px;
	}

	.footerNavi li a {
		font-size: 1.4rem;
	}

}

@media screen and (max-width: 840px) {
	footer {
		padding-bottom: 60px;
	}

	.footerWrap {
		flex-direction: column;
		gap: 30px;
	}

	.footerInfoWrap {
		width: 100%;
	}

	.footerNaviWrap {
		width: 100%;
	}

	.footerInfo {
		display: none;
	}

	.footerSpContact {
		z-index: 1000;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		height: 60px;
		width: 100%;
	}

	.footerSpContact li {
		width: 50%;
		list-style-type: none;
	}

	.footerSpContact li a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		text-decoration: none;
		text-align: center;
		color: #fff;
		background-color: var(--color-primary);
		font-family: var(--font-secondary);
		font-size: 1.8rem;
	}

	.footerSpContact li.tel a,
	.footerSpContact li.contactSp a {
		position: relative;
		display: block;
	}

	.footerSpContact li.tel a {
		background-color: var(--bg-darkblue);
	}

	.footerSpContact li.tel a::after {
		content: "";
		background: url(images/tel_white.svg) no-repeat center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 25px;
		height: 25px;
		z-index: 100;
	}

	.footerSpContact li.contactSp a::after {
		content: "";
		background: url(images/mail_white.svg) no-repeat center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 25px;
		height: 25px;
		z-index: 100;
	}
}

@media screen and (max-width: 599px) {
	.footerWrap {
		padding: 60px 20px 0;
	}

	.footerNaviWrap {
		flex-wrap: wrap;
		gap: 2em 1em;
		margin-bottom: 30px;
	}

	.footerNavi {
		width: calc((100% - 1em)/2);
	}

	.footerNavi li ul {
		margin-top: .6em;
	}

	.footerNavi li a {
		font-size: 1.4rem;
	}

	.footerNavi>li>a {
		border-bottom: none;
	}

	.footerNavi li+li {
		margin-top: .6em;
	}

	.footerNavi:last-child {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1em;
		width: 100%;
	}

	.footerNavi:last-child li {
		width: calc((100% - 1em)/2);
	}

	.footerNavi:last-child li+li {
		margin: 0;
	}

	.footerNavi li ul li {
		padding-left: 1em;
	}

	.footerNavi li ul li::before {
		display: none;
	}
}


/* pageTop
========================================== */
#pageTop {
	display: none;
	position: fixed;
	line-height: 1;
	right: 10px;
	bottom: 20px;
	z-index: 100;
}

#pageTop a {
	display: block;
	position: relative;
	box-sizing: border-box;
	font-size: 1.2rem;
	text-decoration: none;
	transition: all .3s;
	width: 48px;
	height: 48px;
	background: var(--color-primary) url(images/pagetop.svg) no-repeat center;
	background-size: 30%;
}

#pageTop:hover a {
	background-color: var(--color-accent);
}

@media screen and (max-width: 840px) {
	#pageTop {
		bottom: 70px;
	}
}

@media screen and (max-width: 599px) {
	#pageTop {
		display: none !important
	}
}

.pagenation {
	max-width: 1200px;
	margin: 60px auto 0;
}

.wp-pagenavi span.current {
	color: #fff;
	font-weight: bold;
	background-color: var(--bg-darkblue);
}

@media screen and (max-width: 1200px) {
	.pagenation {
		padding: 0 30px;
	}
}

@media screen and (max-width: 599px) {
	.pagenation {
		padding: 0 20px;
	}
}

.grecaptcha-badge {
	bottom: 140px!important;
}