@charset "UTF-8";

/*　基本
*******************************/

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

:root {
	/*表示幅の設定*/
	--main-width: ;
	
	/*フォントの設定*/
	--ja-font: "Noto Sans JP", sans-serif;
	--en-font: ;
	
	/*文字サイズの設定*/
	--text-size: 1.6rem;
	
	
	/*色の設定*/
	--bg-color-main: ;
	--bg-color-sub: ;

	--text-color-main: ;
	--text-color-sub: ;
	
}

html {
    font-size: 62.5%;
}

body {
	background-color: var(--bg-color-main);
	color: var(--text-main);
	font-family: var(--ja-font);
	font-size: var(--text-size);
}

img {
	/*display: block;*/
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

ul, ol {
	list-style: none;
}


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

/*　共通
*******************************/
.c-btn {
	display: flex;
	justify-content: center;
	width: 160px;
	align-items: center;
	padding: 0.4rem 1rem 0.6rem;
	border-radius: 10px;
	text-align: center;
	text-transform: uppercase;
	background-color: #218A66;
	color: #fff;
	transition: all 0.3s ease;
}

.btn-arrow {
	width: 2rem;
	height: 2rem;
	text-align: center;
	margin-left: 1rem;
	margin-top: 0.2rem;
}

.section-title__wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.section-title {
	font-size: 3rem;
	font-weight: 500;
	text-align: center;
}

.title-deco {
	width: 80px;
	margin-top: 0.4rem;
}

.l-container {
	max-width: 1440px;
	margin: 0 auto;
}

.pc-only {
	display: inline;
}

.sp-only {
	display: none;
}

/* -------------------- ヘッダー -------------------- */

.l-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 1000;
}

.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.6rem 6rem;
	background-color: #fff;
}

.logo {
	width: 300px;
}

.header-nav {
	display: flex;
	font-size: 1.6rem;
}

.header-nav__list {
	display: flex;
	padding: 1.6rem 6rem;
	gap: 4rem;
	margin-right: 4rem;
	border-radius: 10px;
	background-color: #218A66;
	color: #fff;
}

.hover-line {
    position: relative;
	width: fit-content;
}

.hover-line::after {
    content: "";
    position: absolute;
    bottom: -4px; /* 文字から下線をどれくらい離すか */
    left: 0;
    width: 0; /* ★ 最初は幅0（見えない） */
    height: 1px; /* 下線の太さ */
    background-color: #fff;
    transition: width 0.3s ease;
}

.hover-line2::after {
	 background-color: #218A66;
}

.header-contact-btn {
	padding: 1.6rem 6rem;
	border-radius: 10px;
	background-color: #218A66;
	color: #fff;
	transition: all 0.3s ease;
}

@media screen and (max-width: 1439px) {
	.logo {
        width: 260px;
	}
	.header-nav {
	font-size: 1.4rem;
	}
	.header-nav__list {
		padding: 1.6rem 5rem;
		gap: 3rem;
	}
	.header-contact-btn {
		padding: 1.6rem 3rem;
	}
}

/* -------------------- ハンバーガーメニュー -------------------- */
.drawer-toggle {
    display: none;
}

@media screen and (max-width: 1023px) {
	.header__inner {
        padding: 1.6rem 2rem; 
    }
	.logo {
        width: 180px;
		padding-bottom: 1rem;
    }
	/* 1. ボタン全体の枠組み（タップしやすいサイズにする） */
    .drawer-toggle {
        display: block;
        width: 44px;
        height: 44px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2000;
    }

    /* 2. 3本線の基本設定 */
    .drawer-toggle__bar {
        position: absolute;
        left: 7px;
        width: 36px; /* 線の長さ */
        height: 3px; /* 線の太さ */
        background-color: #218A66;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* 3本線のそれぞれの縦位置 */
    .drawer-toggle__bar:nth-of-type(1) { top: 12px; } /* 上の線 */
    .drawer-toggle__bar:nth-of-type(2) { top: 24px; } /* 真ん中の線 */
    .drawer-toggle__bar:nth-of-type(3) { top: 36px; } /* 下の線 */

    /* -------------------------------------
       3. ボタンが押された時（is-active）のアニメーション
    ------------------------------------- */
    /* 上の線：真ん中に下がってきて、45度傾く */
    .drawer-toggle.is-active .drawer-toggle__bar:nth-of-type(1) {
        top: 24px;
        transform: rotate(45deg);
    }
    /* 真ん中の線：透明になって消える */
    .drawer-toggle.is-active .drawer-toggle__bar:nth-of-type(2) {
        opacity: 0;
    }
    /* 下の線：真ん中に上がってきて、逆45度傾く */
    .drawer-toggle.is-active .drawer-toggle__bar:nth-of-type(3) {
        top: 24px;
        transform: rotate(-45deg);
    }
	/* 2. ナビゲーションを「右からスライドする引き出し」に変更 */
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 初期状態は画面の右外に隠す */
        width: 100%; /* 引き出しの幅 */
        height: 100vh; /* 画面いっぱいの高さ */
        background-color: #fff; /* 背景を白に */
        flex-direction: column; /* 中身を縦並びに */
        padding: 60px 2rem 2rem; /* 上部にボタンを避ける余白をとる */
        transition: right 0.3s ease; /* 0.3秒かけてスライドするアニメーション */
        z-index: 1500;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* 左側に薄く影をつけて立体感を出す */
    }
	/* ▼ JSで「is-active」クラスが付いた時、画面内にスライドインする */
    .header-nav.is-active {
        right: 0; 
    }

    /* 3. ナビの中身のスマホ用デザイン変更 */
    .header-nav__list {
        flex-direction: column;
        background-color: transparent; /* PCの緑背景を解除 */
        color: #333;
        padding: 0;
        margin-right: 0;
        margin-bottom: 3rem;
        gap: 2rem;
		font-size: 2rem;
    }
    
    .header-nav__item {
		text-align: center;
        border-bottom: 1px solid #ddd;
        padding: 2rem 0;
    }

	.header-nav__item a {
		margin: 0 auto;
	}

    .header-contact-btn {
        text-align: center; /* ボタンの文字を中央に */
		font-size: 2rem;
		margin-top: 2rem;
    }
}

/* -------------------- トップページ -------------------- */
/* -------------------- ヒーロー -------------------- */

.l-hero {
	padding: 2rem;
	margin-top: 88px;
}

.l-hero__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 1440px;
	height: auto;
	margin: 4rem auto;
}

.hero-text-area {
	max-width: 560px;
	margin-bottom: 16rem;
}

.hero-title {
	font-family: Inter, "Noto Sans JP", sans-serif;
	font-size: 4rem;
	font-weight: 340;
	letter-spacing: 6px;
	color: #218A66;
}

.hero-title span {
	font-size: 5.8rem;
	font-weight: 700;
	vertical-align:-8px;
}

.hero-text {
	margin-top: 4rem;
	letter-spacing: 0.4rem;
	line-height: 2;
}

.hero-img {
	width: 700px;
}

@media screen and (max-width: 1439px) {
	.hero-title {
		font-size: 3.4rem;
		letter-spacing: 8px;
	}
	.hero-text-area {
		max-width: clamp(100px,  48vw, 560px);
		min-height: 0vw;
	}
}

@media (max-width: 767px) {
	.l-hero__inner {
		flex-direction: column;
		height: auto;
	}
	.hero-title {
		font-size: 3rem;
		letter-spacing: 6px;
	}
	.hero-text-area {
		max-width: 560px;
		margin-bottom: 0;
	}
	.hero-image-area {
		margin: 4rem 0 2rem;
	}
}

/* -------------------- トップ私たちについて -------------------- */

.l-top-about {
	padding: 10rem 2rem;
	background-color: #CBE9DE;
}

.l-top-about .l-container {
	position: relative;
}

.section-title__wrap,
.about-wrap1,
.about-wrap2 {
    position: relative;
    z-index: 10; /* 画像より上に重ねる */
}

.about-wrap1 {
	max-width: 700px;
	margin: 14rem 2rem 0 auto;
}

.sub-title {
	display: flex;
	flex-direction: column;
	font-size: 2.4rem;
	font-weight: 400;
}

.sub-title::before {
	content: attr(data-title);
	margin-bottom: 1rem;
	font-size: 1.6rem;
	font-weight: 500;
	color: #F87E0A;
}

.about-wrap-text {
	margin: 4rem 0;
	line-height: 2;
}

.ex-about__list {
	display: flex;
	gap: 3rem;
}

.ex-about__item {
	flex: 1;
	width: 0;
}

.ex-about__item p {
	margin-top: 1rem;
	font-size: 1.4rem;
}

.ex-about-text {
	margin: 2rem 0;
	font-weight: 500;
}

.ex-about-img {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border-radius: 10px;
}

.about-btn1 {
	margin: 3rem 0 0 auto;
}

.about-wrap2 {
	max-width: 700px;
	margin: 16rem auto 20rem 2rem;
}

.about-btn2 {
	margin: 3rem 0 0 auto;
}

.about-img-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.about-img1 {
	position: absolute;
	width: 46%;
	height: auto;
	bottom:clamp(50px, 40vw, 500px);
	min-height: 0vw;
	left: -2%;
	z-index: 2;
}

.about-img2 {
	position: absolute;
	width: 50%;
	height: auto;
	left: 30%;
	top: 58%;
}

.about-img3 {
	position: absolute;
	width: 40%;
	height: auto;
	right: 0;
	top: 1000px;
}

@media (max-width: 1439px) {
	/* .about-wrap1 {
		max-width: clamp(300px,  48vw, 700px);
		min-height: 0vw;
		margin: 14rem 2rem 0 auto;
	} */
	.about-wrap2 {
		margin-top: calc(76rem - 40vw);
	}
	.about-img2 {
		top: calc(72% - 14vw);
	}
}

@media (max-width: 1024px) {
	.about-wrap2 {
		margin: 40rem auto 4rem;
	} 
	.about-img1 {
		width: 42%;
		bottom: 400px;
		left: -2%;
	}
	.about-img3 {
		width: 38%;
	}
}
@media (max-width: 767px) {
	.about-wrap1 {
		max-width: 700px;
		margin-right: 0;
	}
	.about-wrap-text {
		font-size: 1.4rem;
	}
	 .ex-about {
		max-width: 340px;
		margin: 0 auto;
	}

	.ex-about__list {
		flex-direction: column;
		gap: 3rem;
	}

	.ex-about__item {
		width: 100%;
	}

	.about-img1 {
		width: 180px;
		bottom:calc(700px - 20vw);
	}
	.about-img2 {
		width: calc(140px * 42vw);
		left: calc(38% - 10vw);
		top: calc(1880px - 50vw);
	}
	.about-img3 {
		width: 180px;
		right: 0;
		top: calc(1820px - 18vw);
	}
}

/* -------------------- トップお知らせ -------------------- */

.l-top-news {
	padding: 10rem;
}

.news-wrap {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	max-width: 1000px;
	margin: 10rem auto 0;
	padding: 4rem;
	text-align: center;
	border: solid 2px #218A66;
	border-radius: 10px;
}

.news-info {
	font-weight: 400;
	font-size: 3rem;
}

.news-list {
	width: 98%;
}

.news-item {
	margin-top: 4rem;
	padding-bottom: 1rem;
	border-bottom: solid 1px #CBE9DE;
}

.news-item__link {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
}

.news-date {
	flex-shrink: 0;
	padding: 0.4rem 1.6rem;
	border-radius: 4px;
	background-color: #218A66;
	color: #fff;
}

.news-text {
	flex: 1;
	min-width: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding: 0.4rem 0;
	text-align: left;
	line-height: 1.6;
	transition: all 0.3s ease;
}

.news-empty {
    /* text-align: center; */
    padding: 6rem 0; 
    color: #666;
    line-height: 1.8;
}

.news-btn {
	width: fit-content;
	margin: 2rem 0 0 auto;
	background-color: transparent;
	color: #218A66;
	padding: 0;
}

@media (max-width: 767px) {
	.l-top-news {
		padding: 10rem 2rem;
	}
	.news-wrap {
		padding: 2rem;
	}

	.news-item__link {
		flex-direction: column;
		gap: 0.8rem;
	}

	.news-date {
		font-size: 1.2rem;
	}
	.news-text {
		font-size: 1.4rem;
	}
}

/* -------------------- トップ採用情報 -------------------- */

.l-top-recruit {
	padding: 10rem 2rem;
	background-color: #CBE9DE;
	height: 730px;
}

.recruit-info {
	max-width: 700px;
	margin: 8rem 2rem 0 auto;
}

.recruit-info p {
	margin: 4rem 0;
	line-height: 2;
}

.recruit-btn {
	margin: 3rem 0 0 auto;
}

.recruit-img-wrap {
	position: relative;
}

.recruit-img {
	position: absolute;
	width: calc(36% - 2vw);
	top: 100px;
	left: 6%;
}

@media (max-width: 1439px) {
	.recruit-info {
		max-width: calc(52% - 20px);
	}
	.recruit-img {
		position: absolute;
		width: 34%;
		/* top: calc(420px - 20vw); */
		left: 6%;
	}
}

@media (max-width: 767px) {
	.l-top-recruit {
		padding: 10rem 2rem;
		height: auto;
	}
	.recruit-info {
		max-width: 700px;
	}
	.recruit-img {
		width: calc(140px + 6vw);
		top: 58px;
		left: calc(70% - 14vw);
	}
	.sp-only {
		display: inline;
	}

	.recruit-info {
		margin: 4rem 0 0;
	}

	.recruit-info .sub-title {
		line-height: 2;
	}
}

/* -------------------- トップお問い合わせ -------------------- */

.l-top-contact {
	padding: 10rem 2rem;
}

.top-contact-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 6rem;
}

.top-contact-wrap p {
	line-height: 2;
	font-size: 2rem;
}

.contact-btn {
	width: auto;
	padding: 1.2rem 10rem;
	margin-top: 6rem;
	font-size: 2.4rem;
}

@media (max-width: 767px) {
	.top-contact-wrap p {
		line-height: 2;
		font-size: 1.6rem;
		text-align: left;
	}
	.contact-btn {
		padding: 1.2rem 3rem;
		margin-top: 6rem;
		font-size: 2rem;
	}
	.pc-only {
		display: none;
	}
}

/* -------------------- フッター -------------------- */

.l-footer {
	padding: 4rem 0 0;
}

.l-footer .l-container {
	display: flex;
	flex-direction: column;
}

.footer-bg__img {
	width: 100%;
	aspect-ratio: 1920 / 260;
	background-image: url(../image/footer-bg01.png);
	background-repeat: no-repeat;
	background-size: 120% auto;
	background-position: 100% 110%;
	margin-top: 6rem;
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	padding: 0 6rem;
	height: auto;
}

.footer-logo {
	width: 300px;
}

.footer-info__text {
	margin-top: 2rem;
}

.footer-info__text:first-child {
	margin-top: 3rem;
}

.footer-nav {
	margin-top: 2rem;
}

.footer-nav__item {
    display: inline-block;
}

.footer-nav__item:not(:last-child) {
	margin: 0 4rem 3rem 0;
}

.copy {
	text-align: center;
	padding: 2rem 0;
	background-color: #60B897;
}

@media (max-width: 1439px) {
	.footer-nav__item:not(:last-child) {
		margin-right: 3rem;
	}
}
@media (max-width: 1170px) {
	.footer-nav {
		width: auto;
		margin-left: 10rem;
	}
}

@media (max-width: 767px) {
	.l-footer {
		padding: 2rem 0 0;
	}
	.footer-bg__img {
		background-size: 120%;
		background-position: 100% 100%;
		margin-top: 2rem;
	}
	.footer-inner {
		flex-direction: column;
		padding: 0 2rem;
		margin: 0 auto;
	}
	.footer-logo {
		width: calc(100vw * (200 / 300));
	}
	.footer-nav__list {
		display: flex;
		flex-direction: column;
	}
	.footer-nav {
		margin-top: 6rem;
		margin-left: 0;
	}
}

/* -------------------- 事業内容 -------------------- */

.page-top {
	display: grid;
	align-items: center;
	width: 100%;
	height: 100%;
	margin-top: 88px;
	background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("../image/business-top.png");
	background-position: 50% 88%;
	background-repeat: no-repeat;
	aspect-ratio: 16 / 4;
	background-size: 120%;
}

.page-top-title {
	text-align: center;
	font-size: 4rem;
	font-weight: 500;
}

.l-business {
	padding: 10rem 2rem;
	background-color: #CBE9DE;
}

.business__list {
	display: flex;
	flex-direction: column;
	gap: 8rem;
	margin: 0 auto;
	max-width: 1240px;
}

.business__item {
	height: 800px;
	background-color: #fff;
	align-content: center;
	border-radius: 10px;
}

.business__item__inner {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 72%;
	margin: 0 auto;
}

.business__item__title {
	font-size: 2.8rem;
}

.business__item__text1 {
	font-size: 2rem;
	margin-top: 3%;
}

.business__item__img__wrap {
	width: 66%;
	height: 100%;
	align-content: center;
	aspect-ratio: 3 / 2;
	margin: 3rem auto;
}

.business__item__text2 {
	text-align: left;
	line-height: 2;
}

@media (max-width: 767px) {
	.l-business {
		padding: 6rem 2rem;
	}
	.page-top-title {
		font-size: 2.6rem;
	}
	.business__item {
		height: auto;
		padding: 3rem 1rem;
	}
	.business__item__inner {
		width: 90%;
	}
	.business__item__title {
		font-size: 2rem;
	}

	.business__item__text1 {
		font-size: 1.6rem;
		margin-top: 6%;
	}

	.business__item__text2 {
		font-size: 1.4rem;
	}
}

/* -------------------- 優雅産業について -------------------- */

.about-top {
	display: grid;
	align-items: center;
	width: 100%;
	height: 100%;
	margin-top: 88px;
	background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("../image/about-top.png");
	background-position: 50% 86%;
	background-repeat: no-repeat;
	aspect-ratio: 16 / 4;
	background-size: 100%;
}

.l-message {
	padding: 10rem 2rem;
	background-color: #CBE9DE;
}

.message-wrap {
	margin-top: 10rem;
}

.message__list {
	max-width: 800px;
	margin: 0 auto;
}

.message__title {
	font-size: 2rem;
	font-weight: 500;
}

.message__text {
	margin-top: 4rem;
	line-height: 2;
}

.message__name {
	margin-top: 1rem;
	text-align: right;
	line-height: 2;
}

.l-overview {
	padding: 10rem 2rem;
}

.overview-table {
	margin: 10rem auto 0;
	border-collapse: collapse;
}

.overview-table__head,
.overview-table__data{
	padding: 2rem 3rem;
	border-bottom: 1px solid #218A66;
}

.overview-table__head {
	width: 20%;
	font-weight: 500;
	text-align: left;
	vertical-align: top;
}

.overview-table__row:last-child .overview-table__head,
.overview-table__row:last-child .overview-table__data {
	border-bottom: none;
}

.table__data__item {
    padding-left: 1em;
    text-indent: -1em;
}

.overview-map {
	width: 100%;
	max-width: 1340px;
	margin: 10rem auto 0;
	aspect-ratio: 1340 / 450;
}

.overview-map iframe {
	width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
	.overview-table__head,
	.overview-table__data{
		padding: 2rem 2rem;
		font-size: 1.4rem;
	}
	.overview-table__head {
		width: 30%;
	}
	.overview-map {
		aspect-ratio: 1;
	}
}

/* -------------------- プライバシーポリシー -------------------- */

.l-policy {
	padding: 10rem 4rem;
}

.policy-top {
	display: grid;
	align-items: center;
	width: 100%;
	height: 100%;
	margin-top: 88px;
	background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("../image/policy-top.png");
	background-position: 50% 0;
	background-repeat: no-repeat;
	aspect-ratio: 16 / 4;
	background-size: 100%;
}

.policy-blck__wrap {
	max-width: 1000px;
	margin: 0 auto;
}

.policy-block {
	margin-top: 8rem;
}

.policy-block__title {
	padding-bottom: 1.6rem;
	font-size: 2rem;
	border-bottom: solid 1px #000;
}

.block__firsttitle {
	font-weight: 400;
	border-bottom: none;
}

.policy-block__list {
	margin-top: 2rem;
}

.policy-block__item {
	margin-top: 2rem;
	line-height: 2;
}

.policy-block__text {
	margin-top: 2rem;
	line-height: 2;
}

.block__firsttext {
	margin-top: 0;
}

@media (max-width: 767px) {
	.l-policy {
		padding: 0 4rem 10rem;
	}
	.policy-block__title {
		font-size: 1.8rem;
	}
}

/* -------------------- 新着情報リスト -------------------- */

.news-top {
	display: grid;
	align-items: center;
	width: 100%;
	height: 100%;
	margin-top: 88px;
	background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("../image/newslist-top.png");
	background-position: 50% 72%;
	background-repeat: no-repeat;
	aspect-ratio: 16 / 4;
	background-size: 120%;
}

.newslist-wrap {
	display: flex;
	flex-direction: column;
	max-width: 1000px;
	margin: 0 auto;
	padding: 4rem;
	text-align: center;
}

.newslist-date {
	margin-right: 2rem;
	padding: 0.4rem 1.6rem;
	border: solid 1px #218A66;
	border-radius: 4px;
	color: #218A66;
}

/* .newslist-btn {
	width: fit-content;
	padding: 1.2rem 4rem;
	margin: 6rem auto;
	font-size: 2rem;
}

@media (max-width: 767px) {
	.newslist-btn {
		margin-top: 0;
	}
} */

/* --------------------
   ページネーション
-------------------- */
.pagination {
    margin: 8rem 0 6rem;
}

.pagination__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
}

/* ボタンの基本設定 */
.pagination__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* ★ 現在いるページのボタン（is-current） */
.pagination__link.is-current {
    background-color: #218A66;
    color: #fff;
    pointer-events: none; /* 現在のページなので、クリックできないようにする */
}

/* 「前へ」「次へ」など文字が入るボタンの特例処理 */
.pagination__item:first-child .pagination__link,
.pagination__item:last-child .pagination__link {
    width: auto;
    padding: 0 2rem;
    border-radius: 10px;
}

@media (max-width: 767px) {
	.pagination {
    	margin: 4rem 0 8rem;
	}
}

/* -------------------- 個別記事 -------------------- */

.l-article {
	padding: 10rem 4rem;
	margin-top: 88px;
	background-color: #CBE9DE;
}

.article-wrap {
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
}

.article__list {
	max-width: 1000px;
	margin: 0 auto;
	height: auto;
	padding: 10rem;
}

.article__title {
	margin-top: 1.6rem;
	padding: 1rem 0;
	font-size: 2.6rem;
	font-weight: 700;
	border-bottom: solid 1px #000;
}

.article__text {
	margin-top: 2rem;
	line-height: 2;
}

@media (max-width: 767px) {
	.article__list {
		padding: 6rem 3rem;
	}
	.article__title {
		font-size: 2rem;
	}
}

/* --------------------
   前後の記事ナビゲーション
-------------------- */
.article-nav {
    margin-top: 8rem;
    padding-top: 4rem;
    border-top: 1px solid #ddd; /* 記事本文との区切り線 */
}

.article-nav__list {
    display: flex;
    /* justify-content: space-between; / */
    align-items: center;
    gap: 2rem;
}

.article-nav__item {
	flex: 1;
	display: flex;
}

.article-nav__item--next {
	justify-content: flex-start;
}

.article-nav__item--back {
	justify-content: center;
}

.article-nav__item--prev {
	justify-content: flex-end;
}

/* ボタンの基本スタイル */
.article-nav__link {
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
    padding: 1.2rem 3rem;
    background-color: #218A66;
    color: #fff;
    border-radius: 6px;
    font-size: 1.4rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/* 前の記事の矢印（<）は左端に固定 */
.article-nav__item--next .article-nav__link .arrow {
    left: 1rem;
}

/* 次の記事の矢印（>）は右端に固定 */
.article-nav__item--prev .article-nav__link .arrow {
    right: 1rem;
}

/* 「一覧に戻る」ボタン */
.article-nav__item--back .article-nav__link {
    background-color: transparent;
    color: #218A66;
    border: 1px solid #218A66;
}

@media (max-width: 767px) {
    .article-nav__list {
        flex-direction: column; /* スマホでは縦並びにする */
        gap: 1.6rem;
    }

    /* スマホではボタンを横幅いっぱいに広げて押しやすくする */
    .article-nav__item {
        width: 100%;
		flex: auto;
    }
    .article-nav__link {
        width: 100%;
        padding: 1.6rem;
    }
	.article-nav__item--next .article-nav__link .arrow {
    	left: 2rem;
	}
	.article-nav__item--prev .article-nav__link .arrow {
		right: 2rem;
	}
    /* 「一覧に戻る」を一番下に移動させる */
    .article-nav__item--back {
        order: 3; 
        margin-top: 2rem;
    }
    .article-nav__item--next { order: 1; }
    .article-nav__item--prev { order: 2; }
	
}

/* -------------------- お問い合わせ -------------------- */

.l-contact {
	padding: 0 4rem;
}

.contact-top {
	display: grid;
	align-items: center;
	width: 100%;
	height: 100%;
	margin-top: 88px;
	aspect-ratio: 16 / 4;
	background-color: #CBE9DE;
}

.contact-wrap {
	max-width: 1000px;
	height: auto;
	padding: 4rem 10rem;
	margin: 10rem auto;
	border: solid 1px #218A66;
	border-radius: 10px;
}

.form-title {
	font-weight: 400;
	font-size: 2rem;
	text-align: center;
}

.form__list {
	width: 100%;
	margin-top: 1rem;
}

.form__item {
	display: flex;
	flex-direction: column;
	margin-top: 3rem;
}

.form__item__name {
	text-align: left;
	font-weight: 400;
	margin-bottom: 0.8rem;
}

.required {
    display: inline-block;
    margin-left: 1rem;
	margin-bottom: 0.4rem;
    padding: 0.2rem 0.8rem 0.4rem;
    background-color: #E05252; 
    color: #fff;
    font-size: 1.2rem;
    border-radius: 4px;
    vertical-align: middle; /* 文字の縦位置の中央に合わせる */
}

.optional {
    display: inline-block;
    margin-left: 1rem;
	margin-bottom: 0.4rem;
    padding: 0.2rem 0.8rem 0.4rem;
    background-color: #ccc;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 4px;
    vertical-align: middle;
}

.form__item__box {
	width: 100%;
	height: 4.8rem;
	padding: 0 1.6rem;
	background-color: #F8F8F8;
	border: solid 1px #218A66;
	border-radius: 10px;
	font-size: 1.6rem;
	color: #333;
	outline: none; /* クリックしたときの青い太枠線を消す */
}

.form__item__box--textarea {
    height: 20rem; 
    padding: 1.6rem;
    resize: vertical; /* ユーザーが上下方向にだけサイズをマウスで広げられるようにする設定 */
}

.send-btn {
	width: fit-content;
	padding: 1.2rem 4rem;
	margin: 6rem auto;
	font-size: 2rem;
}

.contact-tel {
	width: 100%;
	background-color: #CBE9DE;
	padding: 4rem;
}

.contact-tel__list {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-tel__item1 {
	font-size: 2.6rem;
}

.contact-tel__item2 {
	margin-top: 4rem;
}

.contact-tel__item3 {
	margin-top: 1rem;
}

.phone {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	line-height: 1;
}

.phone-icon {
	width: auto;
	height: 30px;
	margin-right: 1.2rem;
	margin-top: 1rem;
}

.phone-number {
	font-size: 5rem;
	margin: 0;
}

@media (max-width: 767px) {
	.l-contact {
		padding: 0 2rem;
	}
	.contact-wrap {
		padding: 4rem 0 1.6rem;
		border: none
	}
	.form__item__name {
		font-size: 1.4rem;
	}
	.phone-icon {
		height: 22px;
		margin-top: 0.6rem;
	}
	.phone-number {
		font-size: 3rem;
	}
	.contact-tel__item1 {
		font-size: 2.2rem;
		text-align: center;
	}
	.send-btn {
		width: 100%;
		font-size: 1.6rem;
	}
}

/* ==============================================
   404ページ
============================================== */
.notfound-top {
	margin-top: 88px;
	padding-top: 100px;
}

.l-notfound {
    padding: 10rem 2rem;
    text-align: center;
}

.notfound__title {
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.notfound__text {
    line-height: 1.8;
    margin-bottom: 4rem;
}

.notfound__btn-wrap {
    display: flex;
    justify-content: center;
}

.notfound__btn-wrap .c-btn {
    width: auto;
    padding: 2rem 4rem;
}

@media (max-width: 767px) {
	.notfound__text {
		text-align: left;
		padding: 0 3rem;
	}
}

/* -------------------- ホバー -------------------- */

@media (hover: hover) {
	.c-btn:hover {
 		transform: scale(110%);
		transition: all 0.3s ease;
	}
	.hover-line:hover::after {
    	width: 100%; /* 幅を100%（端まで）伸ばす */
	}
	.header-contact-btn:hover {
		background-color: #CBE9DE;
    	color: #218A66;
	}
	.news-item__link:hover {
		color: #aaa;
	}
	.contact-btn:hover {
		background-color: #CBE9DE;
    	color: #218A66;
		transform: none;
	}
	/* マウスを乗せた時の動き（現在のページ以外） */
	.pagination__link:not(.is-current):hover {
    	background-color: #CBE9DE;
    	color: #218A66;
	}
	.article-nav__link:hover {
    	background-color: #CBE9DE;
    	color: #218A66;
	}
	.article-nav__item--back .article-nav__link:hover {
		background-color: #218A66;
    	color: #fff;
	}
	.send-btn:hover {
    	background-color: #CBE9DE;
    	color: #218A66;
		transform: none;
	}
	.back-btn:hover {
		background-color: #CBE9DE;
    	color: #218A66;
		transform: none;
	}
}