/*
 * base css 
 * pc width 1000px fixed
 */

@media (min-width: 751px) {
}

@media (min-width: 751px) and (max-width:959px) {
}

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

@media (min-width: 1201px) {
}


/* ---------------------------------------- common */

.sp { display: none !important; }

#wrapper { min-width: 1200px; }

#drawer-menu-button, #drawer { display: none !important; }

a[href^="tel:"] {
	pointer-events: none;   /* クリックを無効化 */
	text-decoration: none;  /* 下線を消す（任意） */
	color: inherit;         /* 色を継承（任意） */
	cursor: default;        /* マウスカーソルを普通に（任意） */
}

.greenPaint { color: var( --yellow-green ); }

.pagelink a {
	display: inline-block;
	min-width: 11em;
	color: var( --base-color );
	background: #fff url( ../images/commons/arrow-g.svg ) no-repeat center right 1em;
	background-size: .6em;
	border: 1px var( --yellow-green ) solid;
	text-align: center;
	line-height: 1.2;
	border-radius: 100px;
	padding: .75em 1.5em .75em 1em;
	position: relative;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.pagelink a:hover {
	color: #fff;
	background: var( --yellow-green ) url( ../images/commons/arrow-w.svg ) no-repeat center right 1em;
	background-size: .6em;
}

.pagelink a.greenPaint {
	display: inline-block;
	min-width: 11em;
	color: #fff;
	background: var( --yellow-green ) url( ../images/commons/arrow-w.svg ) no-repeat center right 1em;
	background-size: .6em;
	border: 1px var( --yellow-green ) solid;
	text-align: center;
	line-height: 1.2;
	border-radius: 100px;
	padding: .75em 1.5em .75em 1em;
	position: relative;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.pagelink a.greenPaint:hover {
	color: var( --base-color );
	background: #fff url( ../images/commons/arrow-g.svg ) no-repeat center right 1em;
	background-size: .6em;
}

/* ---------------------------------------- header */

header { 
	background: #fff;
	border-bottom: 8px var( --yellow-green ) solid; 
}
header .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: 1200px;
}

/* headline */

header .inner .headline {
	width: 35%;
	padding: 8px 20px;
}
header .inner .headline h1 {
	font-size: 13px;
	line-height: 1.4;
	margin: 0 0 .5em;
}
header .inner .headline .logo {
	width: 203px;
	height: auto;
}

/* globalnav */

header .globalnav {
	display: flex;
	align-items: center;
	margin: 0 0 0 auto;
}
header .globalnav ul {
	display: flex;
}
header .globalnav ul li { margin: 0 2em 0 0; }
header .globalnav ul li a { 
	display: inline-block;
	font-size: 16px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}
header .globalnav .tels {
	text-align: center;
	line-height: 1.2;
	margin: 0 1.5em 0 0;
}
header .globalnav .tels p { 
	font-size: 34px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: 0.1rem;
}
header .globalnav .tels p a { 
	pointer-events: none;
}
header .globalnav .tels p img {
	width: 16px;
	height: auto;
	margin: 0 .1em 0 0;
}
header .globalnav .tels small { font-size: 13px; }

/* edgebox */

header .edgebox {
	align-self: stretch;
}
header .edgebox a { 
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: #fff;
	background: var( --yellow-green );
	font-size: 16px; 
	padding: 0 2em;
}
header .edgebox img {
	width: 24px;
	height: auto;
	margin: 0 1em 0 0;
}

@media (max-width: 1620px) {
	header .globalnav .tels { display: none; }
}

/* ---------------------------------------- visual */

#visual {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* 親要素の背景は白にしておく */
	background-color: #fff;
	border-bottom: 8px var( --yellow-green ) solid; 
	padding: 13.75em 0 6.25em;
}

/* 背景グラデーション専用の層 */
#visual::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(90deg, #5ab423, #f55931);
	opacity: 0.1; /* filter: opacity(10%) と同等の効果 */
	z-index: 0;
}

/* アニメーションキャンバスの層 */
.canvas-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* 背景の上に載せる */
	pointer-events: none;
}

/* コンテンツ（文字・ボタン）の層 */
#visual .inner {
	position: relative;
	z-index: 2; /* 一番上に載せる */
}

/* ループテキストの基本設定 */
.loops {
	position: absolute;
	display: flex; /* 横並びにする */
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	z-index: 1; /* 粒子の下、または上に合わせて調整（現在は粒子と同じ階層） */
	font-size: 1.2rem;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.1); /* 背景に馴染むよう薄く設定 */
	pointer-events: none;
}

/* 上段と下段の配置（例） */
.num01 { top: 5%; }
.num02 { top: 55%; }

/* アニメーションの中身 */
.loops span {
	display: inline-block;
	padding-right: 50px; /* テキスト間の余白 */
	animation: loop-animation 20s linear infinite;
}

@keyframes loop-animation {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* 速度を変えたい場合は 20s の数字を調整してください */
.num02 span {
	animation-duration: 25s;
}

#visual .inner {
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}
#visual .loops { 
	color: #fff;
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 700;
	font-size: 198px; 
}
#visual h2 { 
	font-family: 'Noto Sans JP';
	font-weight: 900;
	font-size: 130px; 
	line-height: 1.2;
	background-image: linear-gradient(90deg, #5ab423, #f5a031);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0 0 1em;
}
#visual .inside p { 
	font-family: 'Noto Sans JP';
	font-weight: 700;
	font-size: 30px; 
	line-height: 1.6;
	margin: 0 0 1.5em;
}
#visual .inside ul.pagelink {
	display: flex;
	justify-content: center;
}
#visual .inside ul.pagelink li { margin: 0 .75em; }
#visual .inside ul.pagelink a { font-size: 21px; }

/* ---------------------------------------- sec01 */

#sec01 {
	background: url( ../images/home-pc/sec01-back.jpg ) no-repeat center center;
	background-size: cover;
	padding: 6.25em 0;
}
#sec01 .inner {
	width: 1110px;
	margin: 0 auto;
}

#sec01 h2 { 
	color: var( --yellow-green );
	font-size: 53px; 
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
	margin: 0 0 1em;
}

#sec01 li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 75%;
	background: #fff;
	border-radius: 1em;
	box-shadow: 0 0 8px #ddd;
	padding: 1em;
}
#sec01 li:nth-child( 1 ){ margin: 0 auto 1.5em 0; }
#sec01 li:nth-child( 2 ){ margin: 0 auto 1.5em; }
#sec01 li:nth-child( 3 ){ margin: 0 0 0 auto; }

#sec01 li figure { margin: 0 2em 0 0; }
#sec01 li h3 { 
	font-size: 30px; 
	font-weight: 700;
	margin: 0 0 .25em;
}
#sec01 li p { 
	font-size: 18px; 
	line-height: 1.6;
}

/* ---------------------------------------- sec02 */

#sec02 {
	position: relative;
	width: 100%;
	background: #fff;
	padding: 6.25em 0;
	overflow: hidden;
}
#sec02 .inner {
	width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 2; /* 一番上に載せる */
}

#sec02 h2 { 
	color: var( --yellow-green );
	font-size: 53px; 
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
	margin: 0 0 1em;
}

#sec02 .inside {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3.125em;
}
#sec02 .inside.reverse { flex-direction:row-reverse; }

#sec02 .inside > figure { 
	position: relative; 
	overflow: hidden;
}
#sec02 .inside:not(.reverse) > figure { 
	flex: 1;
	min-width: 600px;
	margin-left: calc( 50% - 50vw );
}
#sec02 .inside.reverse > figure { 
	flex: 1;
	min-width: 600px;
	margin-right: calc( 50% - 50vw );
}

@media (max-width: 1199px) {
	#sec02 .inside:not(.reverse) > figure { 
		margin-left: 0;
	}
	#sec02 .inside.reverse > figure { 
		margin-right: 0;
	}
}

#sec02 .inside > figure img { width: 100%; }

#sec02 .inside .detail { width: 50%; }
#sec02 .inside:not(.reverse) .detail { 
	display: flex;
	justify-content: flex-end;
}
#sec02 .inside.reverse .detail { 
	display: flex;
	justify-content: flex-start;
}

#sec02 .detail .num { 
	color: var( --pale-green );
	font-size: 144px; 
	font-family: "Roboto Condensed", sans-serif;
	font-style: italic;
	font-weight: 400;
	line-height: 1;
}
#sec02 .detail h3 { 
	font-size: 34px; 
	font-weight: 700;
	margin: 0 0 .5em;
}
#sec02 .detail p { 
	width: 28em;
	font-size: 18px; 
	line-height: 1.8;
}

#sec02 .pagelink { text-align: center; }
#sec02 .pagelink a { 
	font-size: 18px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

/* ---------------------------------------- sec03 */

#sec03 {
	color: #fff;
	background: var( --yellow-green );
	padding: 3.125em 0;
}
#sec03 .inner {
	width: 1200px;
	margin: 0 auto;
}
#sec03 .inside {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#sec03 .inside > figure { 
	flex: 1;
	width: 50%;
	padding-right: 3em;
	margin-left: calc( 50% - 50vw );
}
@media (max-width: 1199px) {
	#sec03 .inside > figure { 
		margin-left: 0;
	}
}

#sec03 .inside > figure img { width: 100%; }

#sec03 .inside .detail { width: 50%; }

#sec03 .detail h3 { 
	font-size: 33px; 
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 .5em;
}
#sec03 .detail p { 
	font-size: 18px; 
	line-height: 1.8;
	margin: 0 0 2em;
}

#sec03 .pagelink { text-align: right; }
#sec03 .pagelink a { 
	font-size: 18px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}
#sec03 .pagelink a:hover { border-color: #fff; }

/* ---------------------------------------- sec04, sec05 (dailyList) */

#sec05 { background: var( --pale-green ); }

.dailyList { 
	position: relative;
	padding: 4.375em 0 3.125em; 
}
.dailyList .inner {
	width: 1160px;
	margin: 0 auto;
}

.dailyList h2 span {
	font-size: 57px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

@media (max-width: 1399px) {

	.dailyList h2 { 
		text-align: center; 
		margin: 0 0 2em;
	}
	.dailyList h2 span {
		display: block;
	}
	.dailyList h2 i {
		display: inline-block;
		width: 1px;
		height: 32px;
		background: #333;
	}

	.dailyList .inside { padding: 0 1em; }

}

@media (min-width: 1400px) {

	.dailyList h2 span {
		background: #fff;
		position: absolute;
		top: 50%;
		left: 1em;
		z-index: 3;
		-webkit-transform: translate(-55%,-50%) rotate(-90deg);
		transform: translate(-55%,-50%) rotate(-90deg);
		transform-origin: center;
	}
	#sec05.dailyList h2 span { background: var( --pale-green ); }
	.dailyList h2 i {
		display: block;
		width: 50vw;
		height: 1px;
		background: #333;
		position: absolute;
		top: 50%;
		left: 2em;
		z-index: 2;
	}

}

.dailyList .inside {
	background: #fff;
	position: relative;
	z-index: 10;
}
#sec05.dailyList .inside { background: var( --pale-green ); }

.dailyList .inside ul li {
	border-bottom: 1px #ddd solid;
	padding: 0 1em 1em;
	margin: 0 0 2em;
}
.dailyList .inside ul li a {
	display: table;
	width: 100%;
}
.dailyList .inside ul li a span {
	display: table-cell;
	vertical-align: middle;
	font-size: 18px;
}
.dailyList .inside ul li a span.date {
	width: 7em;
	color: var( --yellow-green );
}

.dailyList .inside .pagelink { text-align: right; }
.dailyList .inside .pagelink a { font-size: 16px; }

/* ---------------------------------------- sec06 */

#sec06 {
	color: #fff;
	background-image: linear-gradient(90deg, #5ab423, #f5a031);
	text-align: center;
	padding: 3.75em 0;
}

#sec06 h2 { 
	font-size: 45px; 
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 .2em;
}
#sec06 h2 + p { 
	font-size: 21px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	margin: 0 0 .5em;
}
#sec06 h2 + p + p { 
	font-size: 18px; 
	line-height: 1.6;
	margin: 0 0 3em;
}
#sec06 .inside ul {
	display: flex;
	justify-content: center;
}
#sec06 .inside ul li { 
	display: flex;
	min-width: 400px;
	margin: 0 1em; 
}
#sec06 .inside ul li a {
	display: flex;
	flex-direction: column;   /* 要素を縦に並べる */
    justify-content: center;  /* 【主軸方向の中央】縦並びなので「上下中央」になる */
    align-items: center;
	border: 1px #fff solid;
	padding: 1em;
	width: 100%;
    flex-grow: 1;
	text-align: center;
}
#sec06 .inside ul li a.tels { pointer-events: none; }

#sec06 .inside ul li a.tels p { 
	font-size: 38px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: 0.1rem;
}
#sec06 .inside ul li a.tels p img {
	width: 20px;
	height: auto;
	margin: 0 .1em 0 0;
}
#sec06 .inside ul li a.tels small { font-size: 16px; }
#sec06 .inside ul li a.inquiry { 
	font-size: 21px; 
}
#sec06 .inside ul li a.inquiry img { 
	width: 32px;
	height: auto;
	margin: 0 1em 0 0;
	vertical-align: bottom;
}

/* ---------------------------------------- footer */

footer {
	background: var( --pale-green );
	padding: 3.125em 1em 2em; 
}
footer .inner {
	width: 1170px;
	margin: 0 auto;
}
footer div.inner {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
}

footer .inner .footline .logo { margin: 0 0 1em; }
footer .inner .footline p {
	line-height: 1.6; 
	margin: 0 0 1em;
}
footer .inner .footline .sns a { display: inline-block; }

footer .inner .inside {
	display: flex;
	gap: 4em;
}
footer .inner .inside dl dt {
	color: var( --yellow-green ); 
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 1em;
}
footer .inner .inside dl dd {
	line-height: 2.4; 
}
footer .inner .inside dl dd a:hover {
	color: var( --yellow-green ); 
}
footer .cregit { 
	text-align: center;
	font-size: 14px; 
	padding: 3em 0 0;
}