@charset "utf-8";

/*
Theme Name: zerotowa
Author: YES-REFORM CO., LTD.
*/
:root {
	/* ブランドカラー */
	--color-primary: #fa5b00;
	--color-secondary: #00a8c6;
	--color-accent: #dbeff2;

	/* テキストカラー */
	--text-primary: #201713;
	--text-secondary: #b3b3b3;

	/* 境界・背景カラー */
	--border-color: #b3b3b3;
	--bg-grey: #f8f9f9;
	--bg-blue: #dbeff2;
	--bg-orange: #fff1e9;
	--bg-green: #249700;

	/* フォントファミリー */
	--font-primary: "Zen Kaku Gothic New", sans-serif;
	--font-secondary: "Oswald", sans-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;

	/* 装飾 */
	--gradation: linear-gradient(135deg, var(--sub-color), var(--point-color));
	--box-shadow: drop-shadow(5px 5px 0 rgba(118, 118, 118, 0.3));
	--box-shadow-blur: drop-shadow(-3.54px 3.54px 10px rgba(118, 118, 118, 0.2));

	/* アンカーリンク */
	--header-offset: 110px;
}

@media (max-width: 860px) {
	:root {
		--header-offset: 30px;
	}
}

/* Body
========================================== */
html, body {
	width: 100%;
	font-size: 62.5%;
	/* scroll-behavior: smooth; */
	scroll-padding-top: var(--header-offset);
}

body {
	line-height: 1.8;
	background-color: var(--c-beige);
	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;
		/* font-size: var(--font-size-sm); */
	}
}

/*pc*/
@media screen and (min-width: 769px) {
	.sp {
		display: none !important;
	}
}

/*sp*/
@media screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
}

/* header
========================================== */
.headerArea {
	position: relative;
	z-index: 1200;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.headerArea.scrolled {
	background-color: rgba(255, 255, 255, 0.75);
}

.headerArea .inner {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 0 30px;
}

.headerLogo {
	padding-top: 10px;
	align-content: center;
}

.headerLogo a {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 1.4rem;
	text-decoration: none;
}

.headerLogo img {
	max-width: 100%;
	height: auto;
}

.headerInfoWrap {
	display: flex;
}

.headerInfo {
	margin-right: 10px;
	filter: drop-shadow(1px 1px 2px #fff);
}
.headerInfo .tel {text-align: center;}
.headerInfo .number {
	line-height: 1;
	display: block;
	font-size: 3rem;
	color: var(--color-primary);
}

.gnav {
	width: 56.25%;
	padding-top: 30px;
}
.gnav ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0 auto;
	padding: 0 3em;
	list-style: none;
	border-radius: 9999px;
	background-color: #fff;
	filter: var(--box-shadow);
}

.gnav ul li a {
	line-height: 1.2;
	display: block;
	width: 100%;
	padding: 1em 0;
	color: var(--text-primary);
	font-size: 1.4rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
	cursor: pointer;
}

.gnav ul li.current a,
.gnav ul li a:hover {
	color: var(--color-primary);
}

.gnav ul li a:hover img {
	opacity: 0.7;
	transition: 0.3s;
}

.gnav .submenu:hover .submenuBox {
	z-index: 1;
	visibility: visible;
	opacity: 1;
}

.gnav .submenuBox {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: 18%;
	transform: translateX(-50%);
	z-index: 0;
	background-color: #fff;
	/* background-color: rgba(255, 255, 255, 0.9); */
	border-radius: 5px;
	padding: 1.2em 0;
	width: 14em;
	display: block;
}

.gnav .submenuBox li {
	margin: 0;
	width: 100%;
}

.gnav .submenuBox li a {
	display: block;
	padding: 5px 0;
	text-align: center;
}
.gnav .submenuBox li+li {margin-top: 0.8em;}
.headerLink {display: flex;}
.headerLink li a {
	position: relative;
	display: inline-block;
	width: 134px;
	height: 104px;
}
.headerLink li a {display: block;}

.spBtn,
.spContact,
.drawerMenu,
.overlay {
	display: none;
}
@media screen and (max-width:1600px) {
	.headerLink li a {
		width: 100px;
		height: 78px;
	}
}

@media screen and (max-width:1450px) {
	.headerArea .inner {padding: 0 0 0 1em;}
	.headerLogo {width: 8%;}

	.gnav ul {
		padding: 0 2em;
		gap: 1em 1em;
	}
	.gnav ul li a {font-size: 1.3rem;}

	.headerInfo {font-size: 1.2rem;}
	.headerInfo .tel {text-align: center;}

	.headerInfo .number {font-size: 2.4rem;}
	.headerLink li a {
		width: 90px;
		height: 70px;
	}
}

@media screen and (max-width:1024px) {
	.gnav {
		padding-top: 10px;
	}

	.gnav ul {
		padding: 0 1em;
		gap: 1em 0.5em;
	}

	.gnav ul li a {
		font-size: 1.2rem;
	}

	.gnav ul li a .text-block {
		display: block;
	}

	.headerInfo {
		font-size: 1rem;
	}

	.headerLink li a {
		width: 70px;
		height: 54px;
	}
}

@media screen and (max-width:840px) {
	.headerArea {
		position: absolute;
		background: none;
	}

	.headerArea .inner {
		padding: 0 10px;
		height: 50px;
	}

	.headerLogo {
		padding-top: 8px;
		width: auto;
	}

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

	.gnav {
		display: none;
	}

	.headerInfoWrap {
		display: none;
	}

	.overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s ease, visibility 0.4s ease;
	}

	.overlay.active {
		opacity: 1;
		visibility: visible;
	}

	.drawerMenu {
		display: block;
		overflow-y: auto;
		position: fixed;
		top: 0;
		right: 0;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		width: 90%;
		height: 100%;
		background-color: var(--bg-orange);
		z-index: 1000;
		padding: 70px 30px 30px;
	}

	.drawerMenu.open {
		transform: translateX(0);
	}

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

	.drawerMenu::-webkit-scrollbar-track {
		background: var(--main-color);
	}

	.drawerMenu::-webkit-scrollbar-thumb {
		background: var(--main-color);
	}

	.gnavSp {
		margin-bottom: 40px;
		padding: 0 10px 10px;
		border-bottom: 1px solid var(--color-primary);
	}

	.gnavSp li {
		margin-bottom: 20px;
		text-align: center;
	}

	.gnavSp li a {
		position: relative;
		color: var(--text-primary);
		font-optical-sizing: auto;
		font-size: 1.6rem;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
	}

	.spHeaderLogo {
		margin-bottom: 20px;
		text-align: center;
	}

	.spHeaderLogo img {
		/* width: 200px; */
		width: 150px;
		height: auto;
	}

	.spAddress {
		margin-bottom: 10px;
		line-height: 1.2;
		text-align: center;
	}

	.spTel {
		text-align: center;
	}

	.spTel a {
		display: block;
		font-weight: 600;
		font-size: 2.6rem;
		text-decoration: none;
		color: var(--color-primary)
	}

	.spBtn {
		position: fixed;
		top: 0;
		right: 0;
		display: inline-block;
		width: 50px;
		height: 50px;
		padding: 20px 13px 15px;
		background-color: var(--color-primary);
		cursor: pointer;
		z-index: 2000;
	}

	.spBtn::after {
		position: absolute;
		left: 0;
		top: 3px;
		content: "MENU";
		text-align: center;
		width: 50px;
		font-size: 8px;
		color: #fff;
	}

	.spBtn.open::after {
		content: "CLOSE";
	}

	.spBtn div {
		position: relative;
	}

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

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

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

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

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

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

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

/* contents
========================================== */
.contents {
	overflow: hidden;
	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) {
	.contentsInner {
		padding: 30px;
	}
}

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

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

.mvAreaSp {
	display: none;
}

@media screen and (max-width:590px) {
	.mvArea {
		display: none;
	}

	.mvAreaSp {
		display: block;
	}
}


/* 冒頭
========================================== */
.introArea {
	position: relative;
	margin-bottom: 50px;
}

.introArea::before {
	z-index: -1;
	position: absolute;
	left: 0;
	top: -180px;
	content: "";
	background: url(images/intro_bg.png) left top/cover no-repeat;
	width: 1600px;
	height: 350px;
}

.introArea .flex {
	display: flex;
	margin-bottom: 100px;
}

.introArea .textBlock {
	width: 50%;
	padding-right: 6%;
}

.introArea .imageBlock {
	position: relative;
	width: 50%;
	text-align: center;
}

.introArea .imageBlock img {
	max-width: 100%;
	height: auto;
}

.introArea .imageBlock .image01,
.introArea .imageBlock .image02 {
	position: absolute;
}

.introArea .imageBlock .image02 {
	right: 0;
	bottom: -50px;
}

.introArea .introCatch {
	margin-bottom: 1em;
	font-weight: 700;
	font-size: 3.6rem;
	font-size: clamp(2.4rem, 2.857vw, 3.6rem);
}

.introArea .introCatch span {
	line-height: 1;
	padding: 0 3px;
	background-color: #fff;
}


@media screen and (max-width:840px) {
	.introArea .flex {
		display: block;
		margin-bottom: 0;
	}

	.introArea .textBlock {
		width: 100%;
		padding-right: 0;
		margin-bottom: 20px;
	}

	.introArea .imageBlock {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.introArea .imageBlock .image01,
	.introArea .imageBlock .image02 {
		position: static;
	}
}

@media screen and (max-width:590px) {
	.introArea {
		margin-bottom: 40px;
	}
}




/* タブ */
.introBusinessWrap {
	margin-top: 50px;
}

.introBusinessWrap .tabs {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.introBusinessWrap .tabs li {}

.introBusinessWrap .tabs li a {
	line-height: 1.2;
	display: block;
	padding: 1em 1.5em;
	text-decoration: none;
	border: 1px solid var(--bg-blue);
	background-color: #fff;
	font-weight: 600;
	font-size: var(--font-size-md);
	color: var(--color-secondary);
	text-align: center;
}

.introBusinessWrap .tabs li a .inline-block {
	display: inline-block;
}

.introBusinessWrap .tabs li a:hover,
.introBusinessWrap .tabs li a.active {
	background-color: var(--bg-blue);
	transition: 0.3s;
}

.introBusinessWrap .panels {
	padding: 3% 5% 5%;
	background-color: var(--bg-blue);
}

.introBusinessWrap .panels .panel {
	display: none;
}

.introBusinessWrap .panels .panel.active {
	display: block;
}

.introBusinessWrap .panels .panel {
	max-width: 1080px;
	margin: 0 auto;
}

.businessText {
	line-height: 2.2;
	margin: 1em 0 2.5em;
	font-weight: 600;
	text-align: center;
}

.businessWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px 3.7037037037037%;
	align-items: stretch;
}

.businessWrap .box {
	width: calc((100% - 3.7037037037037%)/2);
	display: flex;
	/**/
}

.businessWrap .box a {
	flex: 1;
	/**/
	position: relative;
	/* display: block; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px 30px 70px;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid var(--bg-blue);
	text-decoration: none;
}

.businessWrap .box a:hover {
	border-color: var(--color-primary);
	transition: 0.3s;
}

.businessWrap .box .iconBlock {
	margin-bottom: 20px;
	text-align: center;
}

.businessWrap .box .iconBlock img {
	max-width: 180px;
	width: 100%;
	height: auto;
}

.businessWrap .box .title {
	text-align: center;
	margin-bottom: 1em;
	font-weight: 600;
	font-size: var(--font-size-md);
}

.businessWrap .box .title span {
	line-height: 1.2;
	display: block;
	margin: 0 auto 0.6em;
	padding: 0.2em 0.3em;
	width: fit-content;
	background-color: var(--color-primary);
	width: fit-content;
	font-size: var(--font-size-lg);
	color: #fff;
}

.businessWrap .box .list {
	padding: 1.2em 1em;
	border: 1px solid #d5d5d5;
}

.businessWrap .box .list li {
	position: relative;
	padding-left: 1.2em;
}

.businessWrap .box .list li::before {
	position: absolute;
	content: "・";
	left: 0;
}

@media screen and (max-width:840px) {
	.businessText {
		text-align: left;
	}
}

@media screen and (max-width:599px) {
	.businessWrap {
		flex-direction: column;
		gap: 20px;
	}

	.businessWrap .box {
		width: 100%;
	}

	.businessWrap .box a {
		padding: 20px 20px 60px;
	}

	.introBusinessWrap .tabs li a {
		font-size: 1.6rem;
		padding: 1em .6em;
	}
}


@media screen and (max-width:400px) {}

/* サービス内容
========================================== */
.serviceArea {
	margin: 0 auto;
	padding: 50px 0 80px;
	max-width: 1200px;
}

/* サービス */
.serviceMenu {
	display: flex;
	gap: 5%;
	margin-bottom: 80px;
	align-items: stretch;
}

.serviceMenu .box {
	display: flex;
	width: calc((100% - 5% * 2)/3);
}

.serviceMenu .box a {
	position: relative;
	padding: 20px 20px 70px;
	color: var(--text-primary);
	text-decoration: none;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid var(--bg-blue);
	filter: var(--box-shadow-blur);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.serviceMenu .box p {
	margin-bottom: 0;
}

.serviceMenu .box .btnMore_img {
	margin-top: auto;
	/* これで常に最下部へ */
	align-self: flex-start;
	/* 位置を左寄せにしたい場合 */
}

.serviceMenu .box .imageBlock {
	margin-bottom: 20px;
}

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

.serviceMenu .box .title {
	text-align: center;
	color: var(--color-primary);
	margin-bottom: 1em;
	font-size: var(--font-size-lg);
	font-weight: 700;
}

.serviceMenu .box a:hover {
	border-color: var(--color-primary);
	transition: 0.3s;
}

@media screen and (max-width:940px) {
	.serviceMenu {
		gap: 2%;
	}

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

@media screen and (max-width:840px) {
	.serviceMenu {
		flex-wrap: wrap;
		gap: 40px 5%;
	}

	.serviceMenu .box {
		width: calc((100% - 5%) / 2);
	}

	.serviceMenu .box:nth-child(odd):last-child {
		margin-left: auto;
		margin-right: auto;
	}
}

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

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

	.serviceMenu .box {
		width: 100%;
	}
}

/* 対談
========================================== */
.talkBox {
	padding: 30px 50px;
}

.talkArea ul {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding: 10px 50px;
	justify-content: center;
}

.talkArea ul li {
	width: calc(90% / 3 - 40px);
}

.talkArea ul li a {
	display: block;
}

.talkArea ul li a img {
	width: 100%;
	height: auto;
}

.talkArea ul li p {
	font-size: var(--font-size-sm);
	margin-top: 5px;
}

.talkArea .talkItem .talkImg {
	display: block;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	/* 何かが上に被っていてもクリックを勝ち取る */
}

.talkArea .talkItem audio {
	position: static;
	width: 100%;
	margin-top: 5px;
	max-width: 100%;
	display: block;
}

@media screen and (max-width:1024px) {
	.talkBox {padding: 10px 0;}
}


@media screen and (max-width:840px) {
	.talkBox {padding: 30px 50px;}

	.talkArea ul {
		gap: 15px;
		padding: 0;
	}

	.talkArea ul li {width: calc(100% / 2 - 15px);}
}

@media screen and (max-width:599px) {
	.talkArea {padding: 40px 0 0;}
	.talkArea ul li p {font-size: 1rem;}
	.talkArea ul {display: block;}
	.talkArea ul li {
		width: 80%;
		margin: 0 auto;
		padding-bottom: 30px;
	}
	.talkBox {padding: 30px 0;}
}


/* 強み
========================================== */
.strengthArea {
	margin-bottom: 100px;
}

.strengthArea .title {
	line-height: 1.5;
	margin-bottom: 1em;
	font-size: clamp(2.2rem, 3vw, 3rem);
	font-weight: 600;
	text-align: center;
}

.strengthArea .titleText {
	text-align: center;
	margin-bottom: 50px;
}

.strengthBox {
	margin-bottom: 50px;
}

.strengthBox .imageBlock {
	width: 25%;
	text-align: center;
	padding-right: 4%;
}

.strengthBox .imageBlock img {
	max-width: 100%;
	height: auto;
}

.strengthBox .textBlock {
	width: 75%;
}

.strengthBox .strengthWrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 4% 4% 50px;
	color: var(--text-primary);
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid var(--color-secondary);
	background-color: #fff;
	filter: var(--box-shadow-blur);
}

.strengthBox .boxTitle {
	line-height: 1.3;
	margin-bottom: 1em;
	font-weight: 600;
	font-size: var(--font-size-lg);
	color: var(--color-primary);
}

.strengthList {
	display: flex;
	gap: 5%;
	margin-bottom: 60px;
	padding: 30px 60px;
	flex-wrap: wrap;
	align-items: stretch;
}

.strengthList .box {
	width: calc((100% - 5% * 2)/3);
	display: flex;
	filter: var(--box-shadow-blur);
}

.strengthList .box .boxWrap {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 60px 20px 50px;
	color: var(--text-primary);
	text-decoration: none;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid var(--color-secondary);
	/* filter: var(--box-shadow-blur); */
	text-align: center;
}

.strengthList .box .number,
.strengthBox .strengthWrap .number {
	position: absolute;
	top: -1em;
	left: 10px;
	color: var(--color-primary);
	font-weight: 500;
	font-family: var(--font-secondary);
	font-size: 6rem;
	z-index: 5;
}

.strengthList .box .imageBlock {
	margin-bottom: 1.5em;
}

.strengthList .box .imageBlock img {
	max-width: 100%;
	height: auto;
}

.strengthList .box .boxTitle {
	line-height: 1.3;
	font-weight: 600;
	font-size: var(--font-size-lg);
	margin-bottom: 20px;
}

.strengthList .box p {
	text-align: left;
}

@media screen and (max-width:1024px) {
	.strengthList {
		gap: 4%;
		padding: 24px clamp(16px, 4vw, 40px);
	}
}

@media screen and (max-width:840px) {
	.strengthBox {
		margin-bottom: 30px;
	}

	.strengthBox:nth-of-type(1) {
		margin-right: 0;
	}

	.strengthBox:nth-of-type(2) {
		margin-left: 0;
	}

	.strengthBox .title {
		font-size: var(--font-size-md);
	}

	.strengthBox .strengthWrap {
		padding: 20px 20px 50px;
	}

	.strengthList {
		gap: 50px 3.33333%;
	}

	.strengthList .box {
		width: calc((100% - 3.33333%)/2);
	}

	.strengthList .box:nth-child(odd):last-child {
		margin-left: auto;
		margin-right: auto;
	}

	.strengthList .box .imageBlock img {
		max-width: 50%;
		height: auto;
	}

	.strengthList .box .title {
		font-size: 1.6rem
	}
}

@media screen and (max-width:599px) {

	.strengthBox .strengthWrap,
	.strengthList .box .boxWrap {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 30px 1em 40px;
		margin-bottom: 10px;
	}

	.strengthBox .strengthWrap .imageBlock,
	.strengthList .box .imageBlock {
		width: 100%;
		margin-bottom: 20px;
	}

	.strengthBox .strengthWrap .imageBlock img,
	.strengthList .box .imageBlock img {
		max-width: 100px;
		height: auto;
	}

	.strengthBox .strengthWrap .textBlock,
	.strengthList .box .textBlock {
		width: 100%;
	}

	.strengthList .box p,
	.strengthBox .textBlock p {
		text-align: left;
	}

	.strengthList {
		gap: 50px;
		padding: 16px clamp(12px, 4vw, 20px);
	}

	.strengthList .box {
		width: 100%;
	}

}

/* エリア
========================================== */
.areaArea {margin-bottom: 60px;}

.areaArea .flex {display: flex;}
.areaArea .imageBlock {
	width: 50%;
	text-align: center;
}

.areaArea .imageBlock img {
	max-width: 100%;
	height: auto;
}

.areaArea .textBlock {
	width: 50%;
	padding-left: 6%;
}

.areaArea .textBlock .title {
	line-height: 1.5;
	margin-bottom: 1em;
	font-size: clamp(2.2rem, 3vw, 3.6rem);
	font-weight: 600;
}

.areaArea .textBlock .title span {
	line-height: 1.8;
	background-color: var(--bg-orange);
	color: var(--color-primary);
}

.areaContactWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 50px;
	align-items: center;
	margin-top: 20px;
}

.areaContactWrap .tel {
	font-weight: 500;
	text-align: center;
}

.areaContactWrap .tel a {
	line-height: 1.2;
	display: block;
	color: var(--color-primary);
	font-family: var(--font-secondary);
	font-size: min(3.333vw, 3rem);
	font-weight: 500;
	text-decoration: none;
}

.areaContactWrap .link {
	display: flex;
	gap: 20px;
	width: 240px;
}

.areaContactWrap .link li {
	position: relative;
	max-width: 110px;
	width: 50%;
}

.areaContactWrap .link li a {
	display: block;
	width: 100%;
	aspect-ratio: 1/1;
	filter: var(--box-shadow-blur);
}

@media screen and (max-width:840px) {
	.areaArea {margin-bottom: 50px;}
	.areaArea .flex {
		display: block;
		position: relative;
	}

	.areaArea .imageBlock {
		width: 40%;
		position: absolute;
		top: -3%;
		right: 0;
		z-index: 1;
	}

	.areaArea .textBlock {
		width: 100%;
		padding-left: 0;
		position: relative;
		z-index: 2;
	}

	.areaContactWrap .tel a {font-size: 3rem;}
}

@media screen and (max-width:599px) {
	.areaArea {margin-bottom: 40px;}
	.areaArea .imageBlock {width: 50%;}
}

/* 対応実績
========================================== */
.exampleArea {
	padding: 30px 0;
}

.exampleWrap {
	margin: 0 auto 80px;
	max-width: 1200px;
}

.exampleCatTitle {
	line-height: 1.2;
	margin: 2em auto;
	padding: 0 0.2em;
	width: fit-content;
	background-color: var(--color-secondary);
	color: #fff;
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.exampleList.sub {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
}

.exampleList.sub>.list {
	width: calc((100% - 60px * 2)/3);
}


.exampleList .imageBlock {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 30px;
}

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

.exampleList .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;
}

.exampleList a {
	text-decoration: none;
	color: var(--text-primary);
}

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

.exampleList .textBlock {
	position: relative;
	border: 1px solid var(--color-primary);
	background: #fff;
	filter: var(--box-shadow-blur);
	padding: 1em 1em .6em;
	box-sizing: border-box;
}

/* ▲ 矢印部分（外側枠線） */
.exampleList .textBlock::before {
	content: '';
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid var(--color-primary);
}

/* ▲ 矢印部分（内側：背景色で重ねる） */
.exampleList .textBlock::after {
	content: '';
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 14px solid #fff;
}

.exampleList .textBlock .name {
	font-size: var(--font-size-sm);
}

.exampleList .textBlock .category {
	line-height: 1.2;
	display: flex;
	gap: .5em;
	font-weight: 600;
	font-size: 1.4rem;
	margin-bottom: 1em;
}

.exampleList .textBlock .category .cat {
	background-color: var(--color-primary);
	padding: 0 3px;
	color: #fff;
}

.exampleList .textBlock .category .tag {
	background-color: var(--color-accent);
	padding: 0 3px;
}

.exampleList .textBlock .title {
	margin-bottom: 1em;
	font-weight: 600;
}

.exampleList .textBlock .date {
	text-align: right;
	color: var(--border-color);
	font-size: 1.4rem;
}

.exampleList a:hover .textBlock {
	background-color: var(--bg-orange);
	transition: .3s;
}

.exampleList a:hover .textBlock::after {
	border-bottom-color: var(--bg-orange);
	transition: .3s;
}


@media screen and (max-width:1200px) {}

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

	.exampleWrap {
		margin-bottom: 30px;
		padding: 0 10px;
	}
}


/* お客様の声
========================================== */
.voiceArea {
	padding: 40px 0;
}

.voiceWrap {
	margin: 0 auto 80px;
	max-width: 1200px;
}

.voiceList {
	margin: 0;
	padding: 0;
	list-style: none;
}

.voiceList .voiceBox {
	min-width: 0;
	display: block;
	padding: 2em;
	border: 1px solid var(--border-color);
	box-sizing: border-box;
	background-color: #fff;
	text-decoration: none;
	color: var(--txt-color);
	transition: 0.3s;
	font-size: var(--font-size-base);
}

.voiceList .txtBox {
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 1em;
	padding: 0 .5em .8em 0;
	border-bottom: 1px solid var(--border-color);
	font-size: var(--font-size-sp);
}

.voiceList .txtBox .category {
	line-height: 1.2;
	display: block;
	padding: 0.2em 0.3em;
	width: fit-content;
	background-color: var(--color-primary);
	width: fit-content;
	color: #fff;
	margin-bottom: 10px;
}

.voiceList .txtBox .category.biz {
	background-color: var(--color-secondary);
}

.voiceList .txtBox .ttlBox h3 {
	font-size: var(--font-size-md);
	font-weight: 800;
}

.voiceWrap .btnWrap {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 140px;
	height: 50px;
}

.voiceWrap .name {
	text-align: right;
}

.voiceWrap .message {
	margin-bottom: auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.voiceWrap .more{margin-top:1em;text-align:right;}
.voiceWrap .more a{
	line-height: 1.2;
	padding: 0.5em 1em;
	display: inline-block;
	background-color: var(--color-secondary);
	font-size: 1.4rem;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	transition: .3s;
}
.voiceWrap .more a:hover{
	background-color: var(--color-primary);
}


.voiceWrap {
	margin: 0 auto 40px;
}

@media screen and (max-width:599px) {
	.voiceList .voiceBox {
		padding:1.5em;
	}
}

/* ゼロトワとは
========================================== */
.aboutArea {
	margin-bottom: 60px;
}

.aboutInner {
	display: flex;
	gap: 8%;
	margin-bottom: 50px;
}

.aboutInner .boxR {
	width: 46%;
}

.aboutInner .boxL {
	width: 46%;
}


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

.aboutMenuLink {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 30px;
	margin-top: 30px;
}

.aboutMenuLink li {
	width: calc((100% - 30px)/2);
}

.aboutMenuLink li a {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding: .3em 0 .3em 1em;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid var(--border-color);
}

.aboutMenuLink li .arrow {
	margin-left: auto;
}

.aboutMenuLink li .arrow::before {
	content: "";
	display: block;
	background: url(images/img_more_orange.png) right bottom/contain no-repeat;
	width: 80px;
	height: 19px;
}

.aboutMenuLink li a:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
	transition: 0.3s;
}

.aboutLink {
	display: flex;
	gap: 3%;
}

.aboutLink li {
	width: 46%;
}

.aboutLink li a {
	overflow: hidden;
	position: relative;
	display: block;
	padding: 0 0 30px;
	width: 100%;
	text-decoration: none;
	border: 1px solid var(--border-color);
	background-color: #fff;
	filter: var(--box-shadow-blur);
}

.aboutLink li a:hover {
	border-color: var(--color-primary);
	transition: 0.3s;
}

.aboutLink .en {
	display: inline-block;
	line-height: 1;
	padding: 0.4em 0 0.1em;
	background-color: var(--color-secondary);
	color: #fff;
	font-size: 4rem;
	font-size: clamp(3rem, 3.571vw, 4rem);
}

.aboutLink .ja {
	margin-left: 1em;
	font-weight: 600;
	font-size: clamp(var(--font-size-md), 2.619vw, var(--font-size-lg));
}

.aboutLink li a:hover .en {
	background-color: var(--color-primary);
	transition: 0.3s;
}

@media screen and (max-width:840px) {
	.aboutLink li a {
		padding: 0 0 45px;
		width: 100%;
	}

	.aboutLink .ja {
		margin-left: .5em;
	}

}

@media screen and (max-width:599px) {
	.aboutArea {
		margin-bottom: 0;
	}

	.aboutInner {
		flex-direction: column;
	}

	.aboutInner .boxL {
		width: 100%;
		margin-bottom: 20px;
	}

	.aboutInner .boxR {
		width: 100%;
	}

	.aboutMenuLink li a {
		padding: .3em 0 .3em .5em;
	}

	.aboutMenuLink li .arrow::before {
		width: 60px;
		height: 15px;
	}

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

	.aboutLink li {
		width: 100%;
	}
}



/* SDGs
========================================== */
.sdgsArea {
	background: url(images/sdgs_bg.jpg) left top/cover no-repeat;
}

.sdgsAreaInner {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
}

.sdgsAreaInner .boxL {
	width: 50%;
	padding: 60px 30px 60px 0;
}

.sdgsAreaInner .boxR {
	width: 50%;
}

.sdgsArea .title {
	letter-spacing: 2px;
	margin-bottom: 1em;
	font-size: clamp(2.2rem, 3vw, 3.6rem);
	font-weight: 700;
}

.sdgsArea .title span {
	padding: 0 0.3em;
	background-color: var(--color-primary);
	color: #fff;
}

.sdgsArea .btnMore {
	text-align: left;
}

.sdgsArea .sdgsList {
	display: flex;
	gap: 10px;
	margin-top: 50px;
	margin-bottom: 10px;
}

.sdgsArea .sdgsList li img {
	max-width: 100%;
	height: auto;
}

/*スライダー*/
.scroll-container {
	display: flex;
	gap: 20px;
	max-height: 850px;
	overflow: hidden;
}

.column {
	width: 48%;
	position: relative;
	overflow: hidden;
}

.column ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.column li {
	margin: 0;
	padding: 0;
}

.column img {
	display: block;
	width: 100%;
	height: auto;
}

.column.up ul {
	animation: scroll-up 40s linear infinite;
}

.column.down ul {
	animation: scroll-down 40s linear infinite;
}


/* 上方向へスクロール */
@keyframes scroll-up {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

/* 下方向へスクロール */
@keyframes scroll-down {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

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

	.sdgsAreaInner .boxL {
		padding: 30px 20px 30px 0;
	}

	.scroll-container {
		max-height: 700px;
	}
}

@media screen and (max-width:840px) {
	.sdgsAreaInner {
		display: block;
		padding: 0 0 30px;
	}

	.sdgsAreaInner .boxL {
		width: 100%;
		padding: 30px 20px 0;
		margin-bottom: 30px;
		text-align: center;
	}

	.sdgsAreaInner .boxR {
		width: 100%;
	}

	.sdgsArea .btnMore {
		text-align: center;
	}

	.sdgsArea .sdgsList {
		justify-content: center;
	}

	.scroll-container {
		display: block;
		max-height: none;
		gap: 0;
	}

	.column {
		width: 100%;
		display: flex;
	}

	.column ul {
		display: flex;
		flex-direction: row;
	}

	.column.up ul {
		display: none;
	}

	.column.down ul {
		animation: scroll-x 40s linear infinite;
	}

	.column li {
		min-width: 200px;
	}

	/* 横にスライドするアニメーション */
	@keyframes scroll-x {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	/* 下方向バージョン（逆向き）を使いたい場合は： */
	@keyframes scroll-x-reverse {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@media screen and (max-width:599px) {
		.sdgsArea {
			margin: 40px 0;
		}
	}
}


/* ご相談
========================================== */
.consultationArea {
	padding-top: 50px;
}

.consultationArea .consultationTitle {
	margin: 1em 0;
	text-align: center;
	font-size: clamp(2.2rem, 3vw, 3.6rem);
	font-weight: 700;
}

.consultationArea .consultationTitle span {
	display: inline-block;
	background-color: var(--color-primary);
	color: #fff;
}

.consultationList {
	display: flex;
	justify-content: center;
	gap: 5%;
	margin-bottom: 50px;
}

.consultationList .box {
	position: relative;
	width: calc((100% - 5% * 2)/3);
	padding: 30px;
	color: var(--text-primary);
	text-decoration: none;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid var(--color-primary);
	filter: var(--box-shadow-blur);
}

.consultationList .box .imageBlock {
	margin-bottom: 20px;
	text-align: center;
}

.consultationList .box .imageBlock img {
	max-width: 100%;
	height: auto;
}

.consultationList .box .title {
	text-align: center;
	color: var(--color-primary);
	margin-bottom: 1em;
	font-size: clamp(2rem, 2.381vw, var(--font-size-lg));
	font-weight: 600;
}

@media screen and (max-width:840px) {
	.consultationList {
		flex-wrap: wrap;
		gap: 30px;
	}

	.consultationList .box {
		width: calc((100% - 30px)/2);
	}

	.consultationList .box {
		padding: 20px;
	}
}

@media screen and (max-width:599px) {
	.consultationArea {
		padding-top: 10px;
	}

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

	.consultationList .box {
		width: 100%;
	}
}



/* お問い合わせ
========================================== */
.contactArea {
	display: flex;
	align-items: center;
	margin: 60px auto;
	padding: 3% 5%;
	width: 1000px;
	background-color: #fff;
	filter: var(--box-shadow-blur);
	border: 1px solid var(--color-primary);
}

.contactArea .ttlMain {
	margin-bottom: 0;
}

.contactArea .boxL {
	width: 30%;
	padding-right: 50px;
	border-right: 1px solid var(--border-color);
}

.contactArea .boxR {
	width: 70%;
	padding-left: 50px;
}

.contactArea .tel {
	display: flex;
	gap: 1em;
	align-items: center;
	font-size: var(--font-size-md);
}

.contactArea .tel a {
	color: var(--color-secondary);
	font-family: var(--font-secondary);
	font-size: min(5vw, 6rem);
	font-weight: 500;
	text-decoration: none;
}


.contactArea .link {
	display: flex;
	gap: 20px;
}

.contactArea .link li {
	position: relative;
	max-width: 250px;
	width: 50%;
}

.contactArea .link li a {
	display: block;
	max-width: 100%;
	aspect-ratio: 25/10;
	filter: var(--box-shadow-blur);
}

@media screen and (max-width:1000px) {
	.contactArea {
		margin: 0 30px;
		width: calc(100% - 60px);
	}
}

@media screen and (max-width:599px) {
	.contactArea {
		display: block;
		padding: 20px;
		margin: 0 20px;
		width: calc(100% - 40px);
	}

	.contactArea .ttlMain {
		margin-bottom: 20px;
	}

	.contactArea .ttlMain .en,
	.contactArea .ttlMain .ja {
		margin: 0 auto;
	}

	.contactArea .boxL {
		width: 100%;
		padding-right: 0;
		border-right: none;
	}

	.contactArea .boxR {
		width: 100%;
		padding-left: 0;
	}

	.contactArea .tel {
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	.contactArea .tel a {
		display: block;
		font-size: 3.4rem;
	}
}


/* footer
========================================== */
footer {
	padding: 80px 0 20px;
	width: 100%;
	background-color: var(--bg-grey);
}

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

.footerInfoWrap {
	width: 30%;
}

.footerLogo {
	margin-bottom: 20px;
}

.footerLogo a {
	display: block;
	text-align: center;
}

.footerLogo img {
	max-width: 100%;
	height: auto;
}

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

.footerSnsLink {
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px 20px;
	padding: 20px;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}

.footerInfo {
	padding: 20px;
	border-bottom: 1px solid var(--border-color);
	text-align: center;
}

.footerInfo .tel a {
	line-height: 1.3;
	display: block;
	text-decoration: none;
	font-family: var(--font-secondary);
	font-size: 3rem;
	font-weight: 500;
	color: var(--color-secondary);
}

.footerLicense {
	padding: 20px 1em 40px;
	text-align: center;
}

.footerLicense dt {
	line-height: 1.2;
	width: fit-content;
	margin: 0 auto;
	padding: 0 0.3em;
	background-color: var(--color-primary);
	color: #fff;
}

.footerContact {
	position: relative;
	max-width: 250px;
	margin: 0 auto;
}

.footerContact a {
	display: block;
	max-width: 100%;
	aspect-ratio: 25/10;
	filter: var(--box-shadow-blur);
}



.footerNaviWrap {
	width: 70%;
	display: flex;
	justify-content: space-around;
	gap: 50px;
	padding-left: 10%;
}

.footerNavi {
	width: calc((100% - 50px)/2);
}


.footerNavi .fnavTitle a,
.footerNavi .fnavTitle div {
	line-height: 1.3;
	position: relative;
	display: block;
	margin-bottom: 1em;
	padding: .8em .5em .8em 40px;
	border-bottom: 1px solid var(--border-color);
	text-decoration: none;
	font-weight: 600;
}

.footerNavi .fnavTitle a::before,
.footerNavi .fnavTitle div::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	background: url(images/icn_fnav_ttl.svg) left top/contain no-repeat;
	width: 18px;
	height: 18px;
}

.footerNavi .fnavTitle.home a::before {
	background: url(images/icn_home.svg) left top/contain no-repeat;
}

.footerNavi .fnav {
	margin-left: 1.5em;
}

.footerNavi .fnav>li {
	margin-bottom: 1em;
}

.footerNavi .fnav>li a {
	position: relative;
	display: block;
	text-decoration: none;
	padding-left: 20px;
}

.footerNavi .fnav>li.main>a {
	font-weight: 600;
}

.footerNavi .fnav>li a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: url(images/icn_arrow_orange.svg) left top/contain no-repeat;
	width: 12px;
	height: 9px;
}

.footerNavi .fnav>li ul {
	margin-top: 1em;
	margin-bottom: 2em;
	margin-left: 2em;
}

.footerNavi .fnav>li ul li {
	margin-bottom: 1em;
}

.footerNavi .fnavTitle a:hover,
.footerNavi .fnav>li a:hover {
	color: var(--color-primary);
	transition: 0.3s;
}


.footerSpContact {
	display: none;
}

.copyright {
	margin: 0 auto;
	max-width: 1200px;
	text-align: center;
	font-size: 1.2rem;
}

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

@media screen and (max-width: 840px) {
	footer {
		padding: 50px 5% 90px;
	}

	.footerNaviWrap {
		font-size: var(--font-size-sm);
	}

	.footerSpContact {
		z-index: 1000;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		height:55px;
		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-secondary);
		font-size: var(--font-size-sm);
		font-weight: 700;
	}

	.footerSpContact li.line a {
		background-color: #249700;
	}

}

@media screen and (max-width: 599px) {
	.footerWrap {
		display: block;
		margin: 0 auto;
	}

	.footerInfoWrap {
		width: 100%;
		margin-bottom: 30px;
	}

	.footerNaviWrap {
		width: 100%;
		gap: 20px;
		padding-left: 0;
	}

	.footerNavi {
		width: calc((100% - 20px)/2);
	}

	.footerLogo {
		width: 220px;
		margin: 0 auto 20px;
	}

	.footerNavi .fnav {
		margin-left: 1em;
	}

	.footerNavi .fnav>li ul {
		margin-left: .6em;
	}
}

@media screen and (max-width: 320px) {}


/* pageTop
========================================== */
.pagetop {
	position: fixed;
	bottom: 20px;
	right: 0;
	width: 48px;
	height: 48px;
	background: var(--color-secondary) url(images/icn_pagetop.svg) no-repeat center;
	background-size: 30%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 1000;
}

.pagetop:hover {
	background-color: var(--color-primary);
	transition: 0.3s;
}

.pagetop.show {
	opacity: 1;
	pointer-events: auto;
}

@media screen and (max-width: 840px) {
	.pagetop {
		display: none !important
	}
}