@charset "utf-8";
/* *************************************
 * トップページ
 * *************************************/
/* リセット＋ベース */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
}
body {
	font-family: 'Kosugi Maru', 'Noto Sans JP', "Yu Gothic", sans-serif;
	line-height: 1.8;
	font-size: 1rem;
	/* = 16px（PC） / 14px（スマホ） */
	background-color: #fdfdfd;
	color: #333;
}
a {
	color: #0071c2;
	text-decoration: none;
}
img {
	max-width: 100%;
	display: block;
}
main {
	min-height: calc(100vh - 235px);
	height: auto;
}
/* コンテナ */
.container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 1rem;
}
/* ヘッダー */
header {
	background: #ffffff;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #ddd;
}
.top-nav {
	text-align: center;
}
h1.logo {
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
}
@media (max-width: 768px) {
	h1.logo {
		font-size: 1.6rem;
	}
}
.nav {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.nav a {
	padding: 0.25rem 0.5rem;
	font-size: 0.9rem;
}
/* ヒーロー */
.hero {
	border-radius: 8px;
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.hero .title {
	font-size: 1.6rem;
	font-weight: 700;
}
.hero .subtitle {
	font-size: 1rem;
}
.button {
	display: inline-block;
	background: #1395ea;
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: 6px;
	font-weight: 600;
	margin-top: 0.5rem;
	transition: background-color 0.5s ease;
}
.button:hover {
	background: #f09cb4;
}
/* セクションカード */
.grid {
	display: grid;
	gap: 1rem;
	margin: 1rem 0;
}
.card {
	background: #fff;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.card h2 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}
.card p {
	font-size: 1rem;
	margin-bottom: 0.75rem;
}
.small {
	font-size: 0.75rem;
	color: #555;
}
/* フッター */
footer {
	margin-top: 2rem;
	padding: 1rem;
	background: #fff;
	border-top: 1px solid #ddd;
	font-size: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}
/* レスポンシブ */
@media (min-width: 768px) {
	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.hero {
		flex-direction: row;
		align-items: center;
	}
	.hero-text {
		flex: 1;
	}
}
.text-link {
	padding-bottom: 3px;
	/* テキストと下線の間隔 */
	background-image: linear-gradient(#0071c2, #0071c2);
	background-repeat: no-repeat;
	background-position: bottom right;
	/* 下線の初期位置 */
	background-size: 0 1px;
	/* 下線のサイズ（横幅、高さ） */
	transition: background-size 0.3s;
}
.text-link:hover {
	background-position: bottom left;
	/* 下線のホバー時位置 */
	background-size: 100% 1px;
	/* 下線の横幅を100%にする */
}
.img-wrapper {
	display: inline-block;
	overflow: hidden;
	line-height: 0;
	border: 3px solid #000;
	border-radius: 10px;
}
.img-wrapper img {
	display: block;
	transition: transform 0.3s ease;
}
.img-wrapper a img {
	margin: 0;
	padding: 0;
}
.img-wrapper img:hover {
	transform: scale(1.2);
}
.color-red {
	color: #dd5549;
}
.color-green {
	color: #8CC466;
}
.color-blue {
	color: #1395ea;
}
.color-navyblue {
	color: #141419;
}
.color-lightblue {
	color: #c4e4f5;
}
.color-orange {
	color: #f8b547
}
/*
    --color-logo-C: #f7b647;
    --color-logo-I: #f09cb4;
    --color-logo-T: #99cb77;
    --color-logo-Y: #ee847d;
    --color-red: #dd5549;
    --color-green: #8CC466;
    --color-blue: #1395ea;
    --color-navyblue: #141419;
    --color-lightblue: #c4e4f5;
    --color-link: #f2638c;
    --color-alert: #e84646;
    --color-white: #FFF;
*/
.bubble {
	position: absolute;
	border-radius: 50%;
	opacity: 0.3;
	animation: float 20s linear infinite;
}
.bubble:nth-child(1) {
	width: 100px;
	height: 100px;
	background: #ffcccb;
	left: 10%;
	top: 80%;
	animation-duration: 25s;
}
.bubble:nth-child(2) {
	width: 80px;
	height: 80px;
	background: #add8e6;
	left: 50%;
	top: 90%;
	animation-duration: 30s;
}
@keyframes float {
	0% {
		transform: translateY(0) scale(1);
	}
	100% {
		transform: translateY(-120vh) scale(1.2);
	}
}
/* オレンジ	#f8b547
   ピンク	#f09cb4
   みどり	#9aca78
   あか		#f0837f
*/