@charset "utf-8";
/* サイト全体で使うwebフォント設定 */
/* Webフォント 読み込み */
/* ゴシック系 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
*/ /* 明朝系 */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
/* 共通 --------------------------*/
/* ページ全体に関わるCSSの設定 ここから*/
html *, ::before, ::after {
	box-sizing: border-box;
}
/* ページ内リンクを時間をかけてながら表示する */
html {
	9 scroll-behavior: smooth;
}
/* フォント */
html {
	font-size: 14px;
}
/* フォント設定 */
body {
	font-family: 'Noto Sans JP', sans-serif; /* ゴシック 200 400 700 900 */
	font-weight: 400; /* 太さを指定 */
	line-height: 1.6;
	background-color: #fff;
	color: #333;
}
/* おもな太字タグのフォントウェイトと余白設定 */
h1, h2, h3, h4, h5, h6, h7, h8, th, strong {
	font-weight: 700;
	margin: 0;
	padding: 0;
}
/* 段落タグの余白設定 */
p {
	margin: 0;
	padding: 0;
}
/* ベースのリンクカラー */
a {
	color: #333;
}
/* レスポンシブイメージと画像下スペース防止 */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom; /* 画像下のスペースを消す */
}
/* /ページ全体に関わるCSSの設定 ここまで*/
/* モバイルメニュー ここから ---------------------------- */
@media (max-width: 767px) { /* モバイル */
	.navbtn {
		display: block; /* ハンバーガーボタンを表示 */
		width: 60px;
		height: 60px;
		background-image: url(../images/nav-mobile-open.svg); /* アイコン画像 */
		background-repeat: no-repeat;
		background-size: 60px 60px;
		background-position: center center;
		position: fixed;
		top: 0px; /*left: 0px;ボタンの位置-左*/
		right: 0px; /*ボタンの位置-右*/
		z-index: 1;
	}
	.navbtn.close {
		background-image: url(../images/nav-mobile-close.svg);
	}
	.header-container {
		height: 60px;
	}
	.header-nav {
		display: none; /* 初期状態で非表示 */
		position: fixed;
		top: 60px;
		width: 100vw;
		z-index: 2;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	#0f78fd .header-nav.collapse {
		display: none; /* メニューを閉じた状態 */
	}
	.header-nav li a {
		display: block;
		padding: 20px 30px;
		border-top: 1px solid #d8d8d8;
		background: #efefef;
		color: #000;
		text-decoration: none;
	}
	.header-nav li a:hover {
		background: #b8e5ea;
	}
}
@media (min-width: 768px) { /* pc */
	.navbtn {
		display: none;
	}
	.header-nav {
		display: flex !important;
		flex-direction: row;
		justify-content: center;
		list-style-type: none;
		font-size: 1.5em;
		font-color: #0f78fd; /* 青色 */
	}
	.header-nav li a {
		margin: 6px 10px 2px 10px;
		padding: 0px 0px 0px 0px;
		border-top: none;
		border-bottom: 4px solid transparent;
		background: none;
		text-decoration: none;
		font-size: 0.6em;
	}
	.image-container {
		position: relative;
		display: inline-block;
		text-align: center;
	}
	.image-container img {
		width: 100%; /* 画像を親要素の幅に合わせる */
		max-width: 600px; /* 画像の最大幅を設定 */
		height: auto; /* アスペクト比を維持 */
		display: block;
	}
	.text-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); /* ど真ん中に配置 */
		color: white; /* テキストの色 */
		font-size: 24px; /* 文字サイズ */
		font-weight: bold;
		background: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
		padding: 10px 20px;
		border-radius: 5px;
	}
	.header-nav li a:hover {
		border-bottom: 4px solid #87CEEB; /* マウスオーバーした時の下線の色　青 */
		background: none;
	}
}
/* /モバイルメニュー ここまで ---------------------------- */
/* ヘッダーのロゴ画像を小さくする */
.logo img {
	max-width: 250px; /* 画像の最大幅を150pxに設定 */
	height: auto; /* 縦横比を保持 */
	margin-left: 10%; /* 🔥 画面幅の90%の位置に配置 */
}
/* ヘッダーのロゴ画像を小さくする。スマホ対応（さらに小さく） */
@media (max-width: 767px) { /* モバイル */
	.logo img {
		max-width: 200px; /* スマホでは120pxに調整 */
	}
}
/* ヘッダーのロゴ画像を小さくするここまで -------------------- */
/* ヘッダーのタイトルの指定--------------------------------- */
.title h1 {
	text-align: center; /* 中央寄せ */
	font-size: 2.0em; /* 文字サイズを大きく */
	font-weight: bold; /* 文字を太く */
	margin-top: 10px; /* 上の余白を追加（必要なら調整） */
}
@media (max-width: 767px) { /* モバイル */
	.title h1 {
		text-align: center; /* 中央寄せ */
		font-size: 1.5em; /* 文字サイズを大きく */
		font-weight: bold; /* 文字を太く */
		margin-top: 10px; /* 上の余白を追加（必要なら調整） */
	}
}
/* ヘッダーのタイトルの指定ここまで-------------------------- */
/* アコーディオンメニュー全体 */
aside {
	width: 90%;
	max-width: 800px; /* 横幅を適切に制限 */
	margin: 20px auto;
	padding: 10px;
	background: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
/* ラベル（アコーディオンのタイトル部分） */
aside label {
	display: block;
	cursor: pointer;
	padding: 12px;
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	background: #3F9FFF; /* 青色（変更可） */
	margin-top: 5px;
	border-radius: 5px;
	transition: background 0.3s ease;
}
/* ホバー時のラベルの色変更 */
aside label:hover {
	background: #005bb5; /* 少し暗い青 */
}
/* チェックボックスは非表示にする */
aside input[type="checkbox"] {
	display: none;
}
/* 初期状態のメニュー */
aside ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0; /* 初期状態では非表示 */
	overflow: hidden;
	transition: max-height 0.4s ease-out;
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 5px;
}
/* チェックが入ったときにメニューを開く */
aside input[type="checkbox"]:checked + ul {
	max-height: 200px; /* 高さを適切に調整 */
	padding: 10px 0;
}
/* 各メニュー項目 */
aside li {
	padding: 8px 15px;
	border-bottom: 1px solid #ddd;
}
/* 最後のメニュー項目のボーダーを削除 */
aside li:last-child {
	border-bottom: none;
}
/* メニュー内のリンク */
aside a {
	text-decoration: none;
	color: #333;
	font-size: 1em;
	display: block;
	transition: background 0.3s;
}
/* ホバー時のメニュー項目 */
aside a:hover {
	background: #f0f0f0;
}
/* section8 ご利用案内の全体をボックスで囲む---------------------------- */
.section8 .custom-style {
	width: 90%;
	margin: 0 40 0 40px; /* ここで左側の余白を設定。必要に応じて値を調整してください。 */
	font-weight: bold;
	font-size: 1.4em;
	color: black; /* 見出しを青色に */
	border-bottom: 2px solid #0f78fd;
	display: inline-block;
	padding: 10px; /* 全体に10pxのパディングを設定 */
}
.section8 .container-group { /* `.container` をグリッドにする */
	width: 90%;
	margin: 0 auto; /* 中央寄せにする場合 */
	display: grid;
	grid-template-columns: 1fr; /* グリッドだが、今は右側を０％にして消している。 */
	gap: 10px; /* 必要に応じて隙間を調整 */
}
.section8 .container p {
	text-align: left; /* テキストを左寄せ */
	font-size: 1.2em; /* 少し大きめに（必要に応じて値を調整） */
	text-indent: 1em; /* 最初の行の先頭を1em分インデント */
	padding: 10px; /* 全体に10pxのパディングを設定 */
}
.section8 .container {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
}
.section8 img {
	height: 250px; /* 例として200pxに設定。必要に応じて値を調整してください */
	width: auto;
	object-fit: contain; /* 画像の縦横比を保持 */
	display: block; /* 不要な余白を消す */
	
	
	/* 幅は自動で調整されますが、必要ならwidthも設定可能 */
}
@media (min-width: 768px) {
	.section8 .custom-style {
		width: 70%;
		margin-left: 40px; /* ここで左側の余白を設定。必要に応じて値を調整してください。 */
		font-weight: bold;
		font-size: 1.4em;
		color: black; /* 見出しを青色に */
		border-bottom: 2px solid #0f78fd;
		display: inline-block;
		padding-bottom: 5px;
	}
	.section8 .container-group { /* `.container` をグリッドにする */
		width: 90%;
		margin: 0 auto; /* 中央寄せにする場合 */
		display: grid;
		grid-template-columns: 1fr 1fr; /* グリッドだが、今は右側を０％にして消している。 */
		gap: 20px; /* 必要に応じて隙間を調整 */
	}
	.section8 .container p {
		text-align: left; /* テキストを左寄せ */
		font-size: 1.2em; /* 少し大きめに（必要に応じて値を調整） */
	}
	.section8 img {
		height: 300px; /* 例として200pxに設定。必要に応じて値を調整してください */
		width: auto;
		object-fit: contain; /* 画像の縦横比を保持 */
		display: block; /* 不要な余白を消す */
		align-self: flex-start; /* 上寄せ */
		/* 幅は自動で調整されますが、必要ならwidthも設定可能 */
	}
}
/* section8 ここまで------------------------------------------------ */
/* 自己紹介---------------------------------------------------- */
/* 下記は不要---------------------------------- */
/* 下記は不要---------------------------------- */
/* 下記は不要---------------------------------- */
/* 下記は不要---------------------------------- */
/* キャッチフレーズの指定---------------------------------- */
.box {
	background-color: #FFB366; /* 背景色をオレンジ (#fd780f) に設定 */
	color: white; /* 文字色を白に設定 */
	text-align: center; /* 文字を中央寄せ */
	padding: 15px; /* 内側の余白を追加して見やすく */
	font-size: 1.2em; /* 文字サイズを少し大きく */
	font-weight: bold; /* 文字を太く */
	border-radius: 5px; /* 角を少し丸くする（必要なら調整） */
	margin: 20px auto; /* 上下に余白をつけ、中央配置 */
	width: 80%; /* 横幅を調整してバランスを取る（必要なら変更） */
}
/* キャッチフレーズの指定ここまで---------------------------- */
/* コンセプトの指定---------------------------------------- */
.section1 h2 {
	background-color: #FFB366; /* 背景色をオレンジ (#fd780f) に設定 */
	color: white; /* 文字色を白に */
	text-align: center; /* テキストを中央寄せ */
	padding: 5px; /* 内側の余白を追加 */
	font-size: 1.8em; /* 文字サイズを少し大きく */
	font-weight: bold; /* 文字を太く */
	border-radius: 5px; /* 角を丸くする（必要なら調整） */
	width: 80%; /* 横幅を調整してバランスを取る（必要なら変更） */
	margin: 20px auto; /* 上下に余白をつけ、中央配置 */
}
/* スライダー全体のスタイル */
.slider-container {
	position: relative;
	width: 100%;
	max-width: 500px; /* 必要に応じて調整 */
	margin: 0 auto;
	overflow: hidden; /* スライドの枠を超えないように */
}
/* スライドを横並びに配置 */
.slider {
	display: flex;
	transition: transform 0.5s ease-in-out;
	width: 100%; /* スライド3枚分 */
}
/* 各スライドの設定 */
.slide {
	min-width: 100%;
	position: relative;
	text-align: center;
}
.slide img {
	width: 90%;
	height: auto;
	object-fit: cover; /* 画像の比率を保ちつつ拡大・縮小 */
}
/* テキストオーバーレイ */
.text-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 1.8em;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.5);
	padding: 10px 20px;
	border-radius: 5px;
	width: 80%;
	text-align: center;
}
/* ナビゲーションボタン */
.prev, .next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px 15px;
	cursor: pointer;
	font-size: 24px;
}
.prev {
	left: 10px;
}
.next {
	right: 10px;
}
.prev:hover, .next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}
.section1 h2, .section3 h2, .section4 h2, .section5 h2, .section6 h2, .section7 h2, .section8 h2 {
	background-color: #FFB366;
	color: white;
	text-align: center;
	padding: 5px;
	font-size: 1.8em;
	font-weight: bold;
	border-radius: 5px;
	width: 80%;
	margin: 20px auto;
}
/* section1 コンセプトの全体をボックスで囲む---------------------------- */
.section1 .float-box {
	background-color: white; /* 背景色を白 */
	border: 1px solid #FFB366; /* オレンジ色 (#fd780f) の枠線 */
	padding: 10px; /* 内側の余白 */
	border-radius: 5px; /* 角を少し丸くする */
	width: 80%; /* 横幅を調整 */
	margin: 10px auto; /* 上下に余白をつけ、中央配置 */
}
.section1 .float-box .coment p {
	font-weight: bold;
	font-size: 1.5em; /* 文字サイズを大きく */
}
/* 59行目以降の <p> や <ol> 内のテキストを左寄せにする */
.section1 .float-box p:not(:first-of-type), .section1 .float-box ol {
	text-align: left; /* 左寄せ */
}
/* <mark>タグの装飾（下半分を青のグラデーションに） */
.section1 .float-box mark {
	background: linear-gradient(transparent 80%, #87CEEB 20%);
}
/* section1 のみ適用 */
.section1 > .float-box > p {
	text-indent: -0.5em; /* ドットを左に寄せる */
	padding-left: 0.5em; /* 文章を適切な位置に配置 */
	margin: 0;
}
/* オレンジ色のボックスのスタイル */
.section1 .container {
	display: flex;
	flex-direction: column; /* モバイルでは縦一列 */
	gap: 5px;
	padding: 10px;
}
/* section1 コンセプトのfloat-box のスタイル-------------------------- */
/* スマホ・PC共通：float-boxの幅を画面の90%に */
.section1 .container {
	display: flex;
	flex-wrap: wrap; /* スマホ時は縦並び、PCでは横並び */
	justify-content: center; /* PC時の中央配置 */
}
.section1 .float-box {
	background-color: #f9f9f9;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	flex: 1;
	position: relative; /* 画像の配置用 */
	overflow: hidden; /* はみ出し防止 */
	width: 90%; /* 初期状態では90% (スマホ対応) */
	max-width: 90%; /* PC時も90%を維持 */
	margin-bottom: 5px; /* ボックス間の余白 */
}
/* 🔥 2文字空ける（全角スペース相当） */
.indent-1 {
	text-indent: 1em;
}
/* 画像のサイズと配置 */
.section1 .float-box img {
	max-width: 50px !important; /* 画像を小さく */
	height: auto;
	float: right; /* 右上に配置 */
	margin: 0 0 10px 10px; /* 余白を調整 */
}
/* PC表示（横3列） */
@media (min-width: 768px) {
	.section1 .container {
		flex-direction: row; /* PCでは横並び */
		width: 90%; /* コンテナ自体も90%に */
		margin: 0 auto; /* 中央揃え */
	}
	.section1 .float-box {
		width: 30%;
	}
}
/* section1 ここまで------------------------------------------------ */
/* 他の就活サイトとの違い　タイトル------------------------------------- */
/* section2 のみ適用 */
.section2 > .coment > .coment-text p {
	text-align: center; /* 中央寄せ */
	font-size: 1.8em; /* 文字サイズを大きく */
	font-weight: bold; /* 文字を太く */
	margin-top: 0px; /* 上の余白を追加（必要なら調整） */
}
/* 他の就活サイトとの違い　タイトルここまで------------------------------- */
/* 他の就活サイトとの違い　表------------------------------------------- */
/* テーブルの全体デザイン */
.table-container {
	width: 90%; /* 左右に余白を作る */
	margin: 5px auto; /* 上下のマージンを調整 */
	text-align: center;
	overflow-x: auto; /* スマホでスクロール可能に */
}
/* テーブルのデザイン */
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	font-size: 12px; /* 文字を小さくする */
}
/* セルのデザイン */
th, td {
	border: 1px solid #333; /* 罫線の色 */
	padding: 4px; /* セルの内側の余白 */
	text-align: center;
}
/* ヘッダーのスタイル（通常） */
th {
	background-color: #fFFB366; /* ヘッダーをオレンジ色に */
	color: #000;
	font-weight: bold;
	font-size: 13px; /* ヘッダーの文字を少し大きく */
}
/* 1列目（項目）の幅を固定 */
th:first-child, td:first-child {
	width: 20%; /* 項目列の幅を指定 */
}
/* 他の列を均等にする */
th:not(:first-child), td:not(:first-child) {
	width: 17.5%; /* 残りの列を均等に */
}
/* MIRAINAVIの列（データ部分）だけ背景色を変更 */
td:nth-child(3) {
	background-color: #ffe4b5; /* 薄いオレンジ */
	font-weight: bold; /* 文字を太字に */
}
/* MIRAINAVIの項目のヘッダーだけオレンジに */
th:nth-child(3) {
	background-color: #FFB366; /* オレンジ */
	color: white;
	font-weight: bold;
}
/* 偶数行の背景色を変えて見やすく */
tbody tr:nth-child(odd) {
	background-color: #f9f9f9;
}
.section2 .notice-text {
	width: 80%; /* 幅を調整（中央付近に持ってくる） */
	margin: 10px auto; /* 上下の余白 + 中央寄せ */
	text-align: center; /* 文字を左揃え */
	padding: 0px; /* 最初の文字の位置を揃える */
	font-weight: bold; /* 文字を太字に */
}
/* スマホ対応（フォントサイズを小さくし、スクロール可能に） */
@media (max-width: 767px) { /* モバイル */
	.table-
}
/* 他の就活サイトとの違い　表ここまで------------------------------------- */
/* ご利用案内--------------------------------------------------------- */
/* section3 ご利用案内の全体をボックスで囲む---------------------------- */
.section3 {
	margin: 0 auto;
	padding: 0px 0;
	text-align: center;
}
.container-group { /* `.container` をグリッドにする */
	width: 90%; /* 左右に余白を作る */
	margin: 5px auto; /* 上下のマージンを調整 */
	text-align: center;
	justify-content: center;
}
/* Gridレイアウトを適用 */
.section3 .container {
	padding: 0 0 0 0px;
	justify-content: center;
}
/* 画像のスタイル */
.section3 .container img {
	max-width: 200px; /* 画像サイズ固定 */
	height: auto;
	margin-bottom: 0px;
	margin: 0 auto; /* 🔥 左右中央揃え */
	padding: 0 20 0 20px;
}
.menu-title {
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 10px;
	border: none;
}
.pricing-title {
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 0px;
	border: none;
}
.menu-text {
	text-align: left;
	font-size: 1.3em;
	font-weight: bold;
	margin: 0px 0px 10px 0px;
	padding: 20px 0px 25px 30px;
	width: 90%; /* グリッド幅に合わせる */
	border: 1px solid black;
	border-radius: 3px;
	background-color: #fff;
}
.center-text {
	text-align: center;
	font-weight: bold;
	margin: 0px 0px 10px 0px;
	padding: 5px 15px 5px 15px;
	width: 90%; /* グリッド幅に合わせる */
	border: 1px solid black;
	border-radius: 3px;
	background-color: #fff;
}
.indent {
	margin-left: 20px;
}
/* PC（768px以上）の場合、3列レイアウトにする */
@media (min-width: 768px) {
	.section3 .container-group { /* `.container` をグリッドにする */
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 3列レイアウト */
		gap: 10px; /* カード同士の余白 */
		justify-content: center;
		align-items: start;
	}
	.section3 .container img {
		max-width: 200px; /* 画像サイズ固定 */
		height: auto;
		margin-bottom: 0px;
		margin: 30px auto; /* 🔥 左右中央揃え */
		padding: 0 20 0 20px;
	}
}
/* section3 ここまで------------------------------------------------ */
/* section4実績セクションの調整------------------------------------------ */
/* 画像を中央配置 */
.jisseki-container {
	display: flex;
	justify-content: center; /* 水平方向の中央配置 */
	align-items: center; /* 垂直方向の中央配置（必要なら） */
	width: 100%;
	margin: 20px auto;
}
/* 画像の最大幅を調整 */
.jisseki-container img {
	max-width: 80%; /* 画像の最大幅を80%に */
	height: auto;
	display: block;
	margin: 0 auto; /* 🔥 左右中央揃え */
}
/* 実績セクションの調整ここまで--------------------------------------- */
/* 利用者の声------------------------------------------------------ */
/* セクション全体を調整 */
.section4 .float-box-container {
	width: 90%;
	margin: 20px auto;
}
/* 利用者の声のコンテンツ（スマホ時は1列） */
.section4 .float-box {
	display: flow-root;
	margin: 30px 0;
	border: 1px solid #FFB366; /* オレンジ色 (#fd780f) の枠線 */
	padding: 5px; /* 内側の余白 */
	border-radius: 5px; /* 角を少し丸くする */
	width: 80%; /* 横幅を調整 */
	margin: 10px auto; /* 上下に余白をつけ、中央配置 */
	flex-direction: column; /* スマホ時は縦配置 */
	text-align: left;
}
.section4 .float-box .float-right {
	float: right;
	margin: 10px 0 3px 5px;
	width: 60px; /* 画像サイズを統一 */
	height: auto;
}
.section4 .float-box p {
	padding: 15px;
	border-radius: 8px;
}
/* PC（768px以上）の場合、3列レイアウトにする */
@media (min-width: 768px) {
	.section4 {
		margin: 0 auto;
	}
	/* 3列レイアウトを適用 */
	.section4 .float-box-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 3列 */
		gap: 5px; /* カード同士の余白 */
		justify-content: center;
	}
	/* 各float-boxの調整 */
	.section4 .float-box {
		width: 100%; /* グリッド幅に合わせる */
		flex-direction: row; /* PC時は横並び */
		align-items: flex-start;
		text-align: left;
	}
	/* PC時の画像配置調整 */
	.section4 .float-box .float-right {
		width: 100px; /* 画像サイズを固定 */
		margin-right: 10px; /* 右の余白 */
	}
}
/* 利用者の声ここまで-------------------------------------------- */
/* 申し込みここから---------------------------------------------- */
/* フォーム全体のスタイル */
/* セクション全体のデザイン */
.section5 {
	margin: 0 auto; /* 中央揃え */
	padding: 0px; /* 余白を追加 */
}
/* 申し込みフォームのコンテナ */
.mousikomi-container {
	width: 90%; /* 画面幅の90% */
	max-width: 90%;
	max-width: 500px;
	margin: 0 auto;
	background: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	text-align: left;
}
/* フォーム内のラベル */
.mousikomi-container label {
	font-weight: bold;
	display: block;
	margin-top: 10px;
}
/* 入力フィールド（テキスト・メール・テキストエリア） */
.mousikomi-container input[type="text"], .mousikomi-container input[type="email"], .mousikomi-container textarea {
	width: 95%;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
}
/* 送信ボタン */
.mousikomi-container input[type="submit"] {
	background-color: #808080;
	color: white;
	border: none;
	padding: 12px;
	cursor: pointer;
	border-radius: 5px;
	display: block;
	width: 100%;
	font-size: 16px;
	margin-top: 15px;
}
/* 送信ボタンのホバーエフェクト */
.mousikomi-container input[type="submit"]:hover {
	background-color: #D9D9D9;
}
/* 🔹ラジオボタンのデザイン追加🔹 */
/* フォーム内のラジオボタンエリア */
fieldset {
	border: 1px solid #ccc; /* お名前と同じ枠線 */
	border-radius: 5px; /* 角を丸く */
	background-color: white; /* 背景を白に統一 */
	padding: 5px 15px; /* 内側の余白を調整 */
	margin-top: 5px;
	text-align: left; /* テキストを左揃え（お名前と統一） */
}
/* 見出し（質問部分） */
legend {
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 14px; /* お名前のラベルと同じくらいのサイズに */
	padding: 0 5px;
	color: #333;
}
/* 🔹ラジオボタンを横並び＋中央寄せ */
.radio-container {
	display: flex;
	justify-content: center; /* 🔥中央寄せ🔥 */
	align-items: center;
	gap: 30px; /* ボタン同士の間隔を調整 */
}
/* ラジオボタンのラベル */
.radio-label {
	display: flex;
	align-items: center;
	gap: 5px; /* ラジオボタンとテキストの間隔を調整 */
	margin-bottom: 5px;
	cursor: pointer;
}
/* ラジオボタン自体のデザイン */
input[type="radio"] {
	accent-color: #808080; /* 選択時の色を統一 */
	transform: scale(1.2); /* 少し大きくしてタップしやすく */
}
/* 申し込みここまで---------------------------------------------- */
/* ＦＡＱ------------------------------------------------------ */
/* チャット全体のスタイル */
.chat {
	margin: 0px 150px 20px 150px;
}
.chat-1st, .chat-2nd {
	display: flex;
	margin: 10px 40px 0 40px;
	align-items: flex-end;
}
.chat-2nd {
	display: flex;
	flex-direction: row-reverse;
}
/* アイコンのサイズと配置 */
.chat-1st .face {
	flex: 0 0 70px;
	margin: 0 10px 0 0;
}
.chat-2nd .face {
	flex: 0 0 70px;
	margin: 0 0 0 10px;
}
/* 吹き出しデザイン */
.talk {
	flex: 1 1 auto;
	padding: 1.5rem;
	border-radius: 10px;
	max-width: 60%; /* 吹き出しの最大幅を制限 */
	word-wrap: break-word; /* 長い単語でも折り返し */
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影をつけて立体感を出す */
}
.chat-1st .talk {
	background: #ffecdd; /* 背景を白に */
	color: #333; /* テキスト色 */
}
/* 質問者のテキストに下線を追加 */
.chat-1st .talk p {
	display: inline-block;
	border-bottom: 2px solid #FFC285; /* 白色の下線 */
	padding-bottom: 2px;
	font-weight: bold;
}
.chat-2nd .talk {
	background: #BFD7ED;
}
/* 回答者のテキストを太字に */
.chat-2nd .talk p {
	font-weight: bold;
}
@media screen and (max-width: 767px) {
	/* アイコンを小さくする */
	.chat {
		margin: 0px 0px 20px 0px;
	}
	.chat-1st .face, .chat-2nd .face {
		flex: 0 0 35px; /* 画像サイズを縮小 */
	}
	.chat-1st .face img, .chat-2nd .face img {
		width: 100%; /* 画像を親要素の幅に合わせる */
	}
	/* 吹き出しの幅を広げる */
	.talk {
		max-width: 95%; /* モバイルでは吹き出しをより広くする */
	}
}
/* ＦＡＱ---------------------------------------------------- */
/* 自己紹介---------------------------------------------------- */
.section7 .float-box {
	display: flow-root;
	margin: : 30px 0;
	width: 90%; /* 画面の90%の幅にする */
	max-width: 800px; /* 最大幅を設定し、PCでも見やすく */
	margin: 20px auto; /* 上下の余白を確保し、中央揃え */
	background-color: #f9f9f9; /* 背景を薄いグレーに */
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 20px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* 軽い影をつけて立体感を出す */
}
.section7 .float-right {
	float: right;
	margin: 0 0 1rem 1rem;
	width: 20%;
}
.section7 .float-box p {
	margin: : 0;
	color: #333;
	font-size: 1em;
	line-height: 1.5; /* 行間を広げて読みやすく */
	margin-bottom: 15px;
}
/* section7 内の「■自己紹介■」だけに適用 */
.section7 p:first-of-type {
	font-weight: bold;
	font-size: 1.2em;
	color: #0f78fd; /* 見出しを青色に */
	border-bottom: 2px solid #0f78fd;
	display: inline-block;
	padding-bottom: 5px;
	margin-bottom: 15px;
}
.section7 .float-box ul {
	list-style-type: disc; /* 箇条書きを黒丸に */
	margin-left: 20px;
	padding-left: 15px;
}
.section7 .float-box ul li {
	color: #333;
	font-size: 1em;
	margin-bottom: 5px;
}
.section7 .float-box strong {
	color: #d9534f; /* 重要なポイントを赤系の色に */
	font-weight: bold;
}
/* 自己紹介---------------------------------------------------- */
/* フッター----------------------------------------- */
.bottom-container {
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
	align-items: center; /* 垂直方向の中央揃え */
	flex-direction: column; /* 縦方向に配置 */
	text-align: center; /* テキストを中央揃え */
}
.footer-logo img {
	max-width: 100%; /* 画像が親要素をはみ出さないように */
	height: auto;
}
.copyright {
	margin-top: 10px; /* 画像とテキストの間隔を調整 */
}
/* フッター----------------------------------------- */
/* ホームに戻るボタン（半透明）------------------------------------------ */
.back-to-home {
	position: fixed; /* 画面の固定位置 */
	bottom: 20px; /* 下からの距離 */
	right: 20px; /* 右からの距離 */
	background-color: #BFBFBF; /* オレンジ (半透明 70%) */
	color: white; /* 文字色 */
	padding: 10px 15px; /* 内側の余白 */
	border-radius: 5px; /* 角を丸く */
	text-align: center;
	text-decoration: none; /* 下線を消す */
	font-size: 14px; /* 文字サイズ */
	font-weight: bold;
	transition: background 0.3s, opacity 0.3s; /* スムーズな変化 */
	opacity: 0.7; /* 初期状態で半透明 */
}
/* ホバー時の効果（完全不透明） */
.back-to-home:hover {
	background-color: #BFBFBF; /* 完全なオレンジ */
	opacity: 1; /* 完全に表示 */
}
/* スマホ対応 */
@media (max-width: 767px) { /* モバイル */
	.back-to-home {
		bottom: 15px;
		right: 15px;
		padding: 8px 12px;
		font-size: 12px;
	}
}
/* トップに戻るボタン（半透明）ここまで---------------------------------- */
/* 申し込みボタン---------------------------------- */
/* 申し込みボタンを画面の最前面に表示（スクロールしても常に表示） */
.apply-button {
	display: inline-block;
	background-color: rgba(15, 120, 253, 0.9); /* 青色 (#0f78fd) */
	color: white; /* 文字色 */
	padding: 10px 30px; /* 横幅を広げてタップしやすく */
	border-radius: 20px; /* 角を丸く */
	text-decoration: none; /* 下線を消す */
	font-size: 16px; /* 文字サイズ */
	font-weight: bold; /* 文字を太字に */
	position: fixed; /* 🔥 画面に固定（スクロールしても動かない） */
	bottom: 10px; /* 🔥 画面上部からの距離を10pxに */
	left: 30%; /* 🔥 画面の中央に配置 */
	transform: translateX(-50%); /* 🔥 中央揃え */
	text-align: center;
	white-space: nowrap; /* 文字を折り返さない */
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 軽い影を追加 */
	z-index: 9999; /* 🔥 すべての要素の最前面に表示 */
	width: auto; /* 自然な幅 */
	text-align: center; /* 文字を中央揃え */
}
/* マウスホバー時の効果 */
.apply-button:hover {
	background-color: #87CEEB; /* ホバー時の背景色を少し濃く */
}
/* 申し込みボタン---------------------------------- */
/* 申し込みボタンの後に出るメッセージ------------------------- */
.success-message {
	font-size: 28px; /* 文字サイズを大きく */
	color: green; /* 文字色を緑に */
	font-weight: bold; /* 太字にする */
	text-align: center; /* 中央寄せ */
	margin-top: 20px; /* 上の余白を追加 */
	padding: 15px; /* 内側の余白を追加 */
	background-color: #f0fff0; /* 薄い緑の背景色 */
	border: 2px solid green; /* 緑の枠をつける */
	border-radius: 10px; /* 角を丸くする */
	display: inline-block; /* ボックスの幅を文字のサイズに合わせる */
}
/* 申し込みボタンの後に出るメッセージ------------------------- */
.social-links {
    margin-top: 10px;
}

.social-icon {
    margin: 0 10px;
    font-size: 24px;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.social-icon:hover {
    color: #ffcc00; /* ホバー時に色を変える */
}