/* CSS Document */

/* header.php ----------*/
.first-view-main {
	width: 100%;
	padding-inline: 8.4vw;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 16vw;
	left: 50%;
	transform: translateX(-50%);
}
.first-view-texts-wrap {
	padding-top: min(5.5vw, 80px);
}
.first-view-text,
.first-view-text2 { /*他ページとレイアウトが違うためリセット*/
	position: static;
	line-height: normal;
	letter-spacing: normal;
	color: initial;
	transform: none;
}
.first-view-text .text01 {
	/* width: 560px; */
	width: 39vw;
	display: block;
}
.first-view-text .text02 {
	/* width: 593px; */
	width: 41.2vw;
	display: block;
	margin: 16px 0 0 -11px;
}
.first-view-text2 {
	font-size: 24px;
	font-size: max(20px, 1.67vw);
	font-weight: 600;
	color: #fff;
	text-shadow: 0px 0px 11px rgba(0, 108, 2, 0.7);
	margin-top: 6px;
}
.first-view-image {
	/* width: 543px; */
	width: 37.7vw;
	margin-right: 11px;
}
@media (max-width: 750px) {
	.first-view-main {
		padding-inline: 4vw;
		top: 100px;
		left: 0;
		transform: none;
		flex-direction: column;
		align-items: center;
	}
	.first-view-text .text01 {
		width: 74vw;
	}
	.first-view-text .text02 {
		width: 79vw;
	}
	.first-view-image {
		width: 72vw;
	}
}
@media (max-width: 575px) {
	.first-view-texts-wrap {
			padding-top: 0;
	}
}


/* page-environment.php ----------*/
#environment {
	background-color: #fff;
	color: #333;
	font-size: 18px;
	font-weight: 500;
}

:where(#environment) p {
	margin: 0;
}

.inner {
	width: 100%;
	max-width: 1260px;
	margin-inline: auto;
	padding-inline: 30px;
}

.bg-beige {
	background-color: #EFE9D6;
}

.f-gothic {
	font-family: "Yu Gothic", "YuGothic", "Hiragino Sans", "Meiryo", sans-serif;
	font-weight: normal;
}

.section {
	padding: 98px 0;
}

.sec-head {
	margin-bottom: 50px;
}
.sec-head .title {
	font-size: clamp(30px, 5vw, 40px);
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.sec-head .text {
	font-size: clamp(17px, 3vw, 20px);
	line-height: 2;
	margin-top: 0.8em;
}

@media (max-width:750px) {
	#environment {
		font-size: 16px;
	}
	.inner {
		padding-inline: 4vw;
	}
	.section {
		padding: 60px 0;
	}
	.sec-head {
		margin-bottom: 40px;
	}
}


/* section */
#highlight {
	background-color: #C7B274;
	padding: 16px 0;
}
#highlight p {
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 500;
	color: #fff;
	text-align: center;
	margin: 0;
}

.intro-list {
	display: grid;
	grid-template-columns: repeat(3, 30.4%);
	justify-content: space-between;
}
.intro-item {
	background-color: #fff;
	padding: 40px 8% 34px;
}
.intro-item h3 {
	color: #C7B274;
	font-weight: bold;
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 8px;
}
.intro-item h3::after {
	content: "";
	width: 1em;
	height: 2px;
	background-color: currentColor;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
@media (max-width:750px) {
	.intro-list {
		grid-template-columns: 1fr;
		row-gap: 1rem;
		width: 100%;
		max-width: 465px;
		margin-inline: auto;
	}
}

.reason-content {
	border: 1px solid #C7B274;
	padding: 80px min(5.6vw, 80px);
	display: flex;
	justify-content: space-between;
	gap: 2em;
}
.reason-col1 {
	width: 46%;
}
.reason-col2 {
	width: 48%;
}
.img-wrap {
	margin: -36px 0 0 auto;
  max-width: 467px;
}
.circle-list {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 38px;
}
.circle {
	font-size: clamp(17px, 3vw, 20px);
	font-weight: 600;
	line-height: 1.3;
	color: #C7B274;
	width: min(8vw, 110px);
	height: min(8vw, 110px);
	border: 1px solid currentColor;
	border-radius: 50%;
	display: grid;
	place-content: center;
}
.reason-item {
	text-align: start;
}
.reason-item + .reason-item {
	margin-top: 20px;
}
.reason-item h3 {
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 600;
	line-height: 1.7;
	color: #C7B274;
	display: grid;
	grid-template-columns: 64px 1fr;
	column-gap: 12px;
	align-items: center;
	margin-bottom: 0;
}
.reason-item p {
	padding-left: 76px;
}
@media (max-width: 991px) {
	.reason-content {
		flex-direction: column;
		align-items: center;
	}
	.reason-col1,
	.reason-col2 {
		width: 100%;
	}
	.img-wrap {
		margin: 0 auto;
	}
	.circle {
		width: min(18vw, 110px);
		height: min(18vw, 110px);
	}
}
@media (max-width: 750px) {
	.reason-content {
		padding: 40px 5.6vw;
	}
	.reason-item h3 {
		grid-template-columns: 50px 1fr;
	}
	.reason-item p {
    padding-left: 62px;
	}
}

.mechanism-list {
	counter-reset: num;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: space-between;
	padding: 0;
}
.mechanism-item {
	position: relative; /*::afterの基準*/
	padding-inline: 0.5em;
	margin: 0;
}
.mechanism-item::before {
	counter-increment: num;
	content: counter(num);
	font-family: "Lora", serif;
	font-size: clamp(28px, 5vw, 36px);
	font-style: italic;
	font-weight: 500;
	color: #C7B274;
	display: grid;
	place-content: center;
	/* width: 84px; */
	width: 2.33em;
	height: 2.33em;
	background-color: #fff;
	border-radius: 50%;
	margin-bottom: 24px;
	margin-inline: auto;
	position: relative;
  z-index: 1;
}
.mechanism-item::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #C7B274;
	position: absolute;
	top: 42px;
  left: 50%;
}
.mechanism-item:last-child::after {
  content: none;
}
.mechanism-item h3 {
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 600;
	line-height: 1.7;
	margin-bottom: 8px;
}
@media (max-width:750px) {
	.mechanism-list {
		grid-template-columns: 1fr;
		row-gap: 2em;
	}
	.mechanism-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 20px;
		text-align: start;
	}
	.mechanism-item::before {
		margin: 0;
	}
	.mechanism-item::after {
		width: 1px;
		height: 100%;
		top: 40%;
		left: max(6.6vw, 40px);
	}
	.mechanism-item h3 {
		margin-bottom: 0;
	}
	.mechanism-item p {
		padding-left: max(14vw, 88px);
		width: 100%;
	}
	.mechanism-item p br {
		display: none;
	}
}

.feelings-list {
	display: grid;
	grid-template-columns: repeat(3, 31.7%);
	justify-content: space-between;
}
.feelings-item {
	text-align: start;
	background-color: #F8F5EA;
	padding: 46px 50px;
}
.feelings-item h3 {
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 600;
	line-height: 1.7;
	color: #C7B274;
	margin-bottom: 8px;
	position: relative;
}
.feelings-item h3 .num {
	font-family: "Lora", serif;
	font-style: italic;
	font-weight: normal;
	font-size: clamp(44px, 7vw, 56px);
	position: absolute;
	left: 0;
	top: -1.6em;
}
@media (max-width: 991px) {
	.feelings-list {
		grid-template-columns: 1fr;
		row-gap: 3rem;
		max-width: 600px;
		margin-inline: auto;
	}
}
@media (max-width: 750px) {
	.feelings-item {
		padding: 30px 5%;
	}
	.feelings-item h3 .num {
		top: -66px;
	}
}

.diff-content {
	background-color: #fff;
	padding: 52px 5.3% 42px;
}
#diff table,
#diff table th,
#diff table td {
	border: unset;
	border-bottom: 1px solid #C6C6C6;
}
#diff table * {
	font-family: "Yu Gothic", "YuGothic", "Hiragino Sans", "Meiryo", sans-serif;
	font-weight: bold;
}
#diff table thead tr th.airdog,
#diff table thead tr th.other {
	width: 35.5%;
	text-align: center;
	color: #fff;
	padding: 6px;
}
#diff table thead tr th.airdog {
	font-size: clamp(22px, 4vw, 28px);
	background-color: #02273B;
	border-left: 3px solid #02273B;
	border-right: 3px solid #02273B;
	position: relative;
}
#diff table thead tr th.airdog::before {
	content: "";
	display: inline-block;
	width: calc(100% + 6px);
	height: 10px;
	background-color: #02273B;
	position: absolute;
	left: -3px;
	top: -10px;
}
#diff table thead tr th.other {
	font-size: clamp(18px, 3vw, 20px);
	background-color: #C7B274;
}
#diff table thead tr th,
#diff table tbody tr th {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
#diff table tbody tr th {
	font-size: clamp(18px, 3vw, 20px);
	letter-spacing: normal;
	padding: 16px 16px 16px 3%;
}
#diff table tbody tr td {
	background-color: #F8F5EA;
}
#diff table tbody tr td:nth-child(2) {
	border-left: 3px solid #02273B;
	border-right: 3px solid #02273B;
}
#diff table tbody tr:last-child td:nth-child(2) {
	border-bottom: 3px solid #02273B;
}
#diff table img {
	vertical-align: middle;
}
#diff table .maru_red {
	width: 24px;
}
#diff table .maru {
	width: 20px;
}
#diff table .batsu {
	width: 16px;
}
#diff table .sankaku {
	width: 22px;
}
@media (max-width:750px) {
	#diff table {
		width: 100%;
		min-width: 449px;
		table-layout: fixed;
	}
	#diff .table-wrap {
		overflow-x: scroll;
	}
	#diff table thead tr th.airdog,
	#diff table thead tr th.other {
		width: auto;
		min-width: 152px;
	}
	#diff table tbody tr th {
		min-width: 145px;
		padding: 12px;
	}
}

.space-list {
	display: grid;
	grid-template-columns: repeat(4, 23.4%);
	justify-content: space-between;
}
.space-item {
	background-color: #F8F5EA;
	border-top: 8px solid #C7B274;
	padding: 34px 6%;
}
.space-item img {
	width: 100px;
	margin-bottom: 30px;
}
.space-item h3 {
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 600;
	line-height: 1.3;
	color: #C7B274;
}
@media (max-width: 991px) {
	.space-list {
		grid-template-columns: repeat(2, max(40%, 250px));
		justify-content: center;
		gap: 25px;
	}
}
@media (max-width: 575px) {
	.space-list {
		grid-template-columns: 1fr;
		max-width: 300px;
		margin-inline: auto;
	}
	.space-item img {
		width: 80px;
		margin-bottom: 20px;
	}
}

.voice-item {
	display: grid;
	grid-template-columns: 90px 1fr;
	column-gap: 14px;
	padding: 25px 3.3%;
	background-color: #fff;
}
.voice-item + .voice-item {
	margin-top: 20px;
}
.voice-text {
	font-size: 20px;
	line-height: 1.8;
	padding-top: 10px;
	text-align: start;
}
@media (max-width: 575px) {
	.voice-item {
		grid-template-columns: 80px 1fr;
	}
	.voice-text {
		font-size: 17px;
	}
}

#message {
	background-color: #02273B;
	color: #C7B274;
}
#message.section {
	padding: 90px 0;
}
#message .message-head {
	font-size: clamp(30px, 5vw, 40px);
	font-weight: 500;
	line-height: 1.5;
	/* letter-spacing: 0.04em; */
	letter-spacing: 0.1em;
}
#message .message-text {
	font-size: clamp(17px, 3vw, 20px);
	line-height: 2;
	margin-top: 0.6em;
}
@media (max-width:750px) {
	#message .message-head {
		letter-spacing: 0.04em;
	}
}