/*--------------------------------------------
	グローバルリセット
--------------------------------------------*/
html, body, h1, h2, h3, p{
	margin: 0;
	padding: 0;
}

/*--------------------------------------------
	共通要素
--------------------------------------------*/
body{
	font-family: "Zen Kaku Gothic New",
	             -apple-system, BlinkMacSystemFont, "Segoe UI",
	             "Hiragino Kaku Gothic ProN",
	             "Noto Sans JP", "Meiryo", sans-serif;

	color: #222;
	text-align:center;
}

strong {
	font-weight: inherit;
}

a{
	color: #ffffff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;

	transition: color 0.15s ease;
}

a:hover,
a:active{
	color: rgba(255, 255, 255, 0.8);
}





#wrapper{
	padding:20px;
	background: #f2f3f5;
}

#layout{
	max-width:720px;
	background-color: #ffffff;
	min-height: 100vh;
	margin:0 auto;
	border-radius:20px;
}

.pdf-link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ffffff;
	text-decoration: underline;
}

.pdf-icon{
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 1.6;
}

.pdf-icon text{
	fill: #ffffff;
	font-size: 6px;
	font-weight: 700;
	letter-spacing: .5px;
}



/*--------------------------------------------
	ヘッダー
--------------------------------------------*/
header{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:20px;
	border-bottom:1px solid #498F57;
	color:#fff;
}

header p{
	color:#fff;
}

.header-left,
.header-right{
	width:50%;
}

.header-left{
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-left img{
	width:150px;
}

.header-right{
	background: #498F57;
	border-radius:0 20px 0 0;
	padding:30px 20px;

}

.header-right h1{
	font-size: 26px;
}

.header-right h2{
	font-size:16px;
	margin:30px 0;
}

header .cta-btn{
	margin-bottom:20px;
}




/*--------------------------------------------
	メイン	
--------------------------------------------*/
main img{
	width:90%;
	margin-top:30px;
	border-radius:20px;
}

.img_oth{
	border-radius: 0;
	margin-bottom:40px;
}


.topText{
	color:#000;
	background:#fff;
	font-size:26px;
	margin-top:50px;
}

main h2{
	font-size: 18px;
	background: #498F57;
	color: #fff;
	padding:5px;
	border-radius:10px 10px 0 0;
	margin-top:50px;
}

main h3{
	background:rgba(73, 143, 87, 0.1);
	margin:0 20px 30px;
	padding:5px 0;
	
}



.contents{
	position: relative;
	border-radius: 0 0 10px 10px;
	border:2px solid #498F57;
	padding: 30px 0;
}


p{
	margin-bottom:10px;
	font-size: 14px;
	color: #498F57;
	font-weight:600;
}

.contents ul{
	margin: 16px auto;
	padding: 14px 50px;
	max-width: 250px;
	background: rgba(73, 143, 87, 0.08);
	border-radius: 10px;
	text-align: left;
	font-size:14px;
	color: #498F57;
	font-weight:600;
}

.contents ul li{
	margin: 6px 0;
}



/* pdfダウンロードリンク */
.pdf-area{
	margin-top:40px;
}


a.pdf-conts{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;

	width:320px;
	margin:0 auto 12px;
	padding:12px 14px;

	background:#498F57;
	color:#fff;
	border-radius:14px;

	text-decoration:none;
	font-weight:600;
	box-shadow:0 2px 6px rgba(0,0,0,0.18);
}

a.pdf-conts .pdf-icon{
	width:20px;
	height:20px;
	flex-shrink:0;
	fill:none;
	stroke:currentColor;
	stroke-width:1.6;
}

a.pdf-conts .pdf-icon text{
	fill:currentColor;
	stroke:none;
}



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

footer{
	margin-top: 48px;
	padding-bottom: 24px;
	font-size: 0.875rem;
	color: #666;
}



/*--------------------------------------------
	CTA 
--------------------------------------------*/
.links{
	margin-top:30px;
}


.cta-btn {
	display: inline-block;
	background-color: #E29F3F; /* base */
	color: #fff;
	border: none;
	border-radius: 18px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;

	text-decoration: none;
	cursor: pointer;

	/* subtle shadow only */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;

	margin:10px 0 20px;

}

.cta-btn:hover {
	background-color: #D89233; /* slightly darker */
	color: #3B2A12;            /* readable dark brown */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.cta-btn:active {
	background-color: #CF882B; /* pressed */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}


/*--------------------------------------------
	レスポンシブ
--------------------------------------------*/

@media (min-width: 768px) {
	main {
		padding: 0 24px;
	}
}