*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
	border: 0;
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

header,
footer,
nav,
section,
article,
main,
aside,
figure,
figcaption {
	display: block;
}

ol,
ul {
	list-style: none;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 0;
}

input,
select,
textarea {
	color: inherit;
	font: inherit;
	vertical-align: top;
}

/*  scssへ記述  */

html {
	scroll-behavior: smooth;
}

body {
	color: #000;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

img {
	margin: auto;
	max-width: 100%;
}

.l-header {
	background: #FFFFFF;
	height: 64px;
	padding-block: 10px 4px;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 20;
}

.l-header__container {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.l-header__logo {
	color: #000;
	font-size: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);
	font-weight: 700;
}

.l-drawer-icon {
	background: #E2F0E6;
	border-radius: 10px;
	height: 40px;
	position: relative;
	width: 40px;
	z-index: 999;
}

.l-drawer-icon.is-checked .l-drawer-icon__bar {
	background: #5CAC75;
	height: 4px;
	width: 30px;
}

.l-drawer-icon.is-checked .l-drawer-icon__bar:nth-child(1),
.l-drawer-icon.is-checked .l-drawer-icon__bar:nth-child(3) {
	top: 17px;
}

.l-drawer-icon.is-checked .l-drawer-icon__bar:nth-child(1) {
	transform: rotate(45deg);
}

.l-drawer-icon.is-checked .l-drawer-icon__bar:nth-child(2) {
	display: none;
}

.l-drawer-icon.is-checked .l-drawer-icon__bar:nth-child(3) {
	transform: rotate(-45deg);
}

.l-drawer-icon__bar {
	background-color: #5CAC75;
	border-radius: 4px;
	height: 4px;
	position: absolute;
	right: 5px;
	transition: left 0.4s, transform 0.4s;
	width: 30px;
}

.l-drawer-icon__bar:nth-child(1) {
	top: 7px;
}

.l-drawer-icon__bar:nth-child(2) {
	top: 17px;
}

.l-drawer-icon__bar:nth-child(3) {
	top: 27px;
}

.l-header__nav.is-checked {
	display: block; /* ドロワーがアクティブなときに表示 */
	right: 0;
}

.l-header__nav {
	background: #FFFFFF;
	height: 100vh;
	max-height: 100vh; /* ビューポートの高さまでに制限 */
	overflow-y: auto; /* 垂直スクロールを許可 */
	padding: 57px 20px 56px;
	position: fixed;
	right: -100%;
	top: 0;
	transition: 0.5s;
	width: 85.6%;
	z-index: 1;
}

.l-header-nav__lists {
	display: flex;
	flex-direction: column;
	gap: 3.125vw;
	justify-content: flex-end;
	margin: 0 auto;
	max-width: 272px;
	text-align: center;
}

.l-header-nav_button {
	margin: 0 auto;
}

.l-header__link {
	color: #000;
	display: inline-block;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding: 10px 50px;
	white-space: nowrap;
	width: 100%;
}

#js-drawer-backdrop {
	background-color: rgba(0, 0, 0, 0); /* 初期状態では透明 */
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	transition: background-color 0.5s; /* 背景色の変化に1秒かける */
	width: 100%;
	z-index: 1; /* ドロワーと重なるようにする */
}

.is-checked + #js-drawer-backdrop {
	background: #000;
	display: block;
	opacity: 0.35;
}

.l-inner {
	margin: 0 auto;
	padding-inline: 5.0666666667%;
}

.l-inner.header,
.l-inner.fv {
	padding-inline: 4.2666666667%;
}

.l-footer {
	background: #5CAC75;
	color: #FFFFFF;
	font-family: "Hiragino Kaku Gothic Pro";
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 16px; /* 100% */
	padding-block: 12px;
	text-align: center;
}

.l-header__link {
	transition: 1s;
}

.c-button__header {
	align-items: center;
	background: #5CAC75;
	border: 1px solid #5CAC75;
	border-radius: 24px;
	border-radius: 25px;
	color: #FFFFFF;
	display: flex;
	font-size: 16px;
	font-weight: 400;
	gap: 8px;
	height: 48px;
	justify-content: center;
	line-height: normal;
	padding: 10px;
	transition: 1s;
	width: 48px;
}

.c-button__header .icon {
	width: 23px;
}

.c-button__header .icon-line {
	transition: 1s;
	fill: #FFFFFF;
}

.c-button__header .visible-xl-header {
	display: none;
}

.c-button__header p {
	display: flex;
	flex-wrap: nowrap;
}

.c-title__mainMessage {
	color: #5CAC75;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	position: relative;
	text-align: center;
}

.c-title__mainMessage.color-white {
	color: #FFFFFF;
}

.c-title__mainMessage.color-white::before {
	background: #FFFFFF;
	height: clamp(0.125rem, 0.081rem + 0.1878vw, 0.25rem);
}

.c-title__mainMessage::before {
	background: #5CAC75;
	bottom: -13px;
	content: "";
	height: clamp(0.1875rem, 0.1655rem + 0.0939vw, 0.25rem);
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 30px;
}

.p-company {
	background: #E2F0E6;
	padding-block: 64px;
}

.p-company__table {
	display: flex;
	flex-wrap: wrap;
	margin-top: 64px;
}

.p-company__table dt:last-of-type {
	border-bottom: 1px solid #5CAC75;
}

.p-company__table dd:last-of-type {
	border-bottom: 1px solid #5CAC75;
}

.p-company__table dt {
	align-items: center;
	background: #E2F0E6;
	border-top: 1px solid #5CAC75;
	color: #000;
	display: flex;
	min-height: 100px;
	mix-blend-mode: multiply;
	padding-block: 40px;
	padding-left: 1.3020833333vw;
	width: 25.5369928401%;
}

.p-company__table dd {
	align-items: center;
	background: #FFFFFF;
	border-top: 1px solid #5CAC75;
	display: flex;
	line-height: 1.5;
	overflow-wrap: break-word;
	padding-block: 28px;
	padding-left: 23px;
	width: 74.4630071599%;
}

.p-company__animationMessage {
	display: flex;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
	width: 100vw;
}

.p-company__animationMessage--text {
	animation: MoveLeft 30s infinite linear;
	color: #FFFFFF;
	flex-shrink: 0;
	font-kerning: none;
	font-size: clamp(5.25rem, 4.4643rem + 3.9286vw, 8rem);
	font-weight: 400;
	letter-spacing: -7.68px;
	line-height: 100%; /* 128px */
	margin-top: 41px;
	text-align: center;
	white-space: nowrap;
}

.p-message {
	padding-block: 53px 133px;
}

.p-message__box {
	background: #E2F0E6;
	padding: 40px max(20px, 2.7777777778vw) 20px;
}

.p-message__container {
	display: flex;
	flex-direction: column;
	gap: 27px;
	margin-top: 47px;
}

.p-message__president {
	text-align: center;
	white-space: nowrap;
}

.p-message__president .company-name {
	color: #5CAC75;
	font-size: 20px;
}

.p-message__president .president-name {
	font-size: clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem);
}

.p-message__textarea {
	flex-grow: 1;
	position: relative;
}

.p-message__textarea p {
	font-size: 16px;
	margin-bottom: 20px;
	text-align: center;
}

.p-message__textarea p strong {
	text-align: center;
}

.p-message__textarea::before {
	content: "";
	position: absolute;
}

.p-message__strongMessage {
	font-size: 20px;
	font-weight: 400;
	line-height: 160%;
}

.p-message__strongMessage .green {
	color: #5CAC75;
	font-size: 20px;
	font-weight: 500;
	line-height: 160%;
}

.p-strength {
	padding-top: 85px;
}

.p-strength__container {
	counter-reset: number 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: 62.5px;
}

.p-strength__message {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 67px;
	position: relative;
}

.p-strength__message::before {
	color: #5CAC75;
	content: counter(number) " ";
	counter-increment: number 1;
	font-family: Lateef;
	font-size: 128px;
	font-weight: 400;
	left: 0;
	line-height: 70%; /* 89.6px */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

.p-strength__main {
	color: #5CAC75;
	font-size: clamp(1.375rem, 1.1964rem + 0.8929vw, 2rem);
	font-weight: 500;
	line-height: normal;
}

.p-strength__sub {
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

.p-fv {
	position: relative;
	width: 100%;
}

.p-fv__container {
	height: -moz-fit-content;
	height: fit-content;
	position: relative;
	width: 100%;
}

.p-fv__message {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: absolute;
	right: clamp(0rem, -6.1818rem + 30.9091vw, 1.0625rem);
	top: 64px;
}

.p-fv__main-message {
	color: #5CAC75;
	flex-wrap: nowrap;
	font-feature-settings: "palt" on;
	font-size: clamp(2.25rem, 1.9859rem + 1.1268vw, 3rem);
	font-weight: 700;
	line-height: normal;
	padding-right: 7px;
}

.p-fv__sub-message {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: right;
}

.bg-message {
	background-color: #FFFFFF;
	color: #5CAC75;
	font-feature-settings: "palt" on;
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	margin-inline: auto 0;
	padding: 4px;
	width: -moz-fit-content;
	width: fit-content;
}

.p-about-company__features {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.p-organize {
	background-image: url(../img/bg-organize-sp.webp);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-top: 64px;
	padding-bottom: 140px;
}

.p-purchase {
	margin-bottom: 80px;
}

.p-features {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.p-features__title {
	font-size: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
	font-weight: 500;
	letter-spacing: 1.28px;
	line-height: 100%; /* 32px */
}

.p-features__title .green {
	color: #5CAC75;
	font-size: 16px;
	font-weight: 500;
	line-height: 100%; /* 16px */
}

.p-features__title .black {
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 100%;
}

.p-features__text {
	background: linear-gradient(104deg, #F1FEF5 7.52%, #E2F0E6 47.47%);
	border-radius: 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%; /* 25.6px */
	margin-inline: auto;
	margin-top: 24px;
	max-width: 552px;
	padding: max(22px, 2.7777777778vw);
	text-align: center;
	width: 100%;
}

.p-flow {
	display: flex;
	flex-direction: column;
	margin-top: 64px;
}

.p-flow__title {
	color: #5CAC75;
	font-size: 20px;
	font-weight: 500;
	line-height: normal;
	margin-inline: auto;
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
}

.p-flow__title::before,
.p-flow__title::after {
	background: #5CAC75;
	content: "";
	height: 1px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
}

.p-flow__title::before {
	left: -68px;
}

.p-flow__title::after {
	right: -68px;
}

.p-flow__boxes {
	counter-reset: number 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 70px;
	margin-inline: auto;
	margin-top: 71px;
}

.p-flow__box {
	background: #FBFDFB;
	border: 1px solid #5CAC75;
	border-radius: 8px;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 20px;
	padding-inline: 29px;
	padding-top: 43px;
	position: relative;
	width: 256px;
}

.p-flow__box::before {
	color: #5CAC75;
	content: counter(number) " ";
	counter-increment: number 1;
	font-family: Lateef;
	font-size: 128px;
	font-weight: 400;
	left: 50%;
	line-height: 70%; /* 89.6px */
	position: absolute;
	top: -47px;
	transform: translateX(-50%);
	z-index: 1;
}

.p-flow__box-title {
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	text-align: center;
}

.p-flow__box-picture {
	margin-inline: auto;
}

.p-flow__box-text {
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

.p-contact {
	background: url(../img/bg-contact-sp.webp) no-repeat center center/cover;
	display: flex;
	flex-direction: column;
	margin-inline: auto;
	padding-block: 52px 64px;
}

.p-contact__message {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-align: center;
}

.p-contact__button {
	align-items: end;
	color: #FFFFFF;
	display: flex;
	font-family: Outfit;
	font-size: clamp(3.125rem, 2.875rem + 1.25vw, 4rem);
	font-weight: 500;
	gap: 17px;
	line-height: 100%; /* 64px */
	margin-inline: auto;
	text-align: center;
	width: -moz-fit-content;
	width: fit-content;
}

.p-contact__button p,
.p-contact__button svg {
	transition: all 0.5s ease;
}

.p-business-introduction {
	background: url(../img/bg-business-introduction-pc.webp) no-repeat center center/cover;
	padding-block: 100px 147px;
}

.p-business-introduction__container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 56px;
}

.p-business-introduction__message {
	background: #E2F0E6;
	border-radius: 8px;
	display: grid;
	grid-template-areas: "title" "lists" "button";
	padding: 20px;
}

.p-business-introduction__title {
	border-bottom: 1px solid #5CAC75;
	font-size: 24px;
	font-weight: 500;
	grid-area: title;
	height: -moz-fit-content;
	height: fit-content;
	line-height: normal;
	padding-bottom: 8px;
}

.p-business-introduction__title .green {
	color: #5CAC75;
	font-size: 16px;
	font-weight: 500;
	line-height: 160%; /* 25.6px */
}

.p-business-introduction__title .black {
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
}

.p-business-introduction__lists {
	display: flex;
	flex-direction: column;
	gap: 10px;
	grid-area: lists;
	margin-top: 20px;
}

.p-business-introduction__list {
	font-size: 16px;
	font-weight: 400;
	line-height: 160%; /* 25.6px */
	padding-left: 20px;
	position: relative;
}

.p-business-introduction__list::before {
	background: url(../img/icon-check.webp) no-repeat center center/cover;
	content: "";
	height: 12px;
	left: 4px;
	position: absolute;
	top: 10px;
	width: 12px;
}

.p-business-introduction__button {
	background: #5CAC75;
	border: 1px solid #5CAC75;
	border-radius: 8px;
	color: #FFFFFF;
	display: inline-block;
	font-family: Avenir;
	font-size: 16px;
	font-weight: 500;
	grid-area: button;
	line-height: 160%; /* 25.6px */
	margin-inline: auto 0;
	margin-top: 24px;
	padding: 8px;
	text-align: center;
	transition: 0.5s;
	width: 214px;
}

.p-policy {
	padding-block: 80px 86px;
}

.p-policy__image {
	display: block;
	margin-inline: auto;
	margin-top: 56px;
	max-width: 336px;
	text-align: center;
}

.p-policy__message {
	color: #5CAC75;
	font-size: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
	font-weight: 500;
	line-height: normal;
	margin-top: 32px;
	text-align: center;
}

@media (hover: hover) {

.l-header__logo:hover {
	opacity: 1;
}

.l-header__link:hover {
	opacity: 0.7;
}

.c-button__header:hover {
	background: #FFFFFF;
	border: 1px solid #5CAC75;
	color: #5CAC75;
}

.c-button__header:hover .icon-line {
	fill: #5CAC75;
}

.p-contact__button:hover p {
	transform: scale(1.05);
}

.p-contact__button:hover p,
.p-contact__button:hover svg {
	opacity: 0.7;
}

.p-contact__button:hover .arrow {
	opacity: 0.7;
	transform: translate(4px, -4px);
}

.p-business-introduction__button:hover {
	background: #FFFFFF;
	border: 1px solid #5CAC75;
	color: #5CAC75;
}

}

@media (min-width: 768px) {

.hidden-md {
	display: none;
}

}

@media screen and (min-width: 768px) {

.l-header__link {
	color: #000;
	font-size: 16px;
	line-height: normal; /* 25.6px */
	padding-inline: 0;
	width: auto;
}

.l-inner {
	padding-inline: 13.8888888889%;
}

.c-button__header {
	border: none;
	min-width: auto;
}

.p-company {
	padding-block: 80px 0;
}

.p-company__table {
	margin-top: 56px;
}

.p-strength__container {
	gap: 53px;
}

.p-fv__container {
	height: 634px;
	height: clamp(34.375rem, 15.6389rem + 31.2268vw, 39.625rem);
}

.p-organize {
	background-image: url(../img/bg-organize-pc.webp);
}

.p-flow__boxes {
	display: grid;
	gap: 70px 40px;
	grid-template-columns: repeat(2, 1fr);
}

.p-contact {
	background: url(../img/bg-contact-pc.webp) no-repeat center center/cover;
	padding-block: 133px;
}

.p-business-introduction__message {
	grid-template-areas: "title lists" "title button";
	padding: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
	grid-template-columns: 135px 1fr;
}

.p-business-introduction__title {
	margin-top: -10px;
}

.p-business-introduction__lists {
	margin-top: 0;
}

.p-business-introduction__list::before {
	top: 7px;
}

.p-policy__image {
	max-width: none;
}

}

@media (min-width: 960px) {

.visible-lg {
	display: none;
}

}

@media screen and (min-width: 960px) {

.l-header {
	height: 115px;
	padding-block: 21px 16px;
}

.l-header__container {
	align-items: stretch;
	height: 100%;
}

.l-header__logo {
	align-items: flex-start;
}

.l-drawer-icon {
	background: none;
}

.l-drawer-icon__bar {
	display: none;
}

.l-header__nav {
	background: transparent;
	height: auto;
	overflow: hidden;
	padding: 0;
	position: static;
	right: 0;
	top: 0;
	width: auto;
}

.l-header-nav__lists {
	align-items: flex-end;
	flex-direction: row;
	height: 100%;
	margin: 0;
	max-width: none;
	text-align: left;
}

.l-header-nav_button {
	margin: 0;
}

.is-checked + #js-drawer-backdrop {
	display: none;
}

.l-inner.header,
.l-inner.fv {
	height: 100%;
	max-width: 1440px;
	padding-inline: 38px 46px;
}

.l-inner.under-top {
	max-width: 1440px;
	padding-inline: 2.7777777778%;
}

.p-company__table dt {
	padding-block: 38px;
	padding-left: clamp(0.625rem, -0.1964rem + 4.1071vw, 3.5rem);
	width: 23.1503579952%;
}

.p-company__table dd {
	padding-block: 38px;
	padding-left: 20px;
	width: 76.8496420048%;
}

.p-message {
	padding-block: 93px;
}

.p-message__container {
	flex-direction: row;
	gap: 60px;
	justify-content: center;
	margin-top: 60px;
}

.p-message__president {
	text-align: left;
}

.p-message__textarea p {
	max-width: 500px;
}

.p-message__textarea p strong {
	font-size: 20px;
}

.p-message__textarea::before {
	background: #5CAC75;
	height: 100%;
	left: -30px;
	width: 1px;
}

.p-fv__message {
	right: 40px;
	top: 40px;
}

.p-business-introduction__message {
	grid-template-columns: 218px 1fr;
	padding-inline: 40px 68px;
}

}

@media (min-width: 1151px) {

.bg-message {
	background: none;
}

}

@media screen and (min-width: 1230px) {

.l-inner {
	max-width: 1440px;
	padding-inline: 13.8888888889vw;
}

.l-inner.message {
	padding-inline: min(281px, 19.5138888889vw);
}

.l-inner.strength {
	padding-inline: min(398px, 27.6388888889vw);
}

.l-inner.business-introduction,
.l-inner.company {
	padding-inline: min(300px, 20.8333333333vw);
}

.c-button__header .visible-xl-header {
	display: block;
}

.c-button__header {
	border-radius: 25px;
	height: 43px;
	min-width: 170px;
}

.p-message__container {
	gap: 132px;
}

.p-fv__container {
	height: 634px;
}

.p-fv__message {
	top: clamp(2.5rem, -123.4286rem + 163.8095vw, 24rem);
}

.p-flow {
	padding-inline: min(148px, 10.2777777778vw);
}

.p-flow__boxes {
	display: flex;
	flex-direction: row;
	gap: 40px;
}

.p-flow__box {
	max-width: 256px;
	width: auto;
}

}

@keyframes MoveLeft {

from {
	transform: translateX(100%);
}

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

}

@keyframes MoveLeft2 {

from {
	transform: translateX(0);
}

to {
	transform: translateX(-200%);
}

}

