@charset "UTF-8";
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 100;
	src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 200;
	src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.otf) format('opentype');
 }
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 500;
	src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format('opentype');
 }
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 600;
	src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf) format('opentype');
 }
@font-face {
	 font-family: 'Noto Serif Japanese';
	 font-style: normal;
	 font-weight: 700;
	src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf) format('opentype');
 }
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 900;
	src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Black.otf) format('opentype');
 }

/*================================================
 *	CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
html{
	overflow-y:scroll;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: #fff;
	color: #333;
}
main, .main-content {
	/* margin-topではなく、padding-topを使うことで背景画像などのズレを防ぎます */
	padding-top: 85px; /* 【PC時】ヘッダーの高さ（100px）分の余白を上部に確保 */
	box-sizing: border-box;
}
.inner {
	clear:both;
	position:relative;
	width:1100px;
	margin:0 auto;
}
#contents {
	overflow:hidden;
	width:100%;
	margin:0px auto 0 auto;
}

#main {
	box-sizing:border-box;
	overflow:hidden;
	margin-top:0px;
	width:100%;
}
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
/* ==========================================================================
	 タブレット・スマートフォン向けのスタイル（画面幅 1024px 以下）
	 ========================================================================== */
@media (max-width: 1024px) {
	main, .main-content {
		padding-top: 45px; /* 【スマホ・タブレット時】ヘッダーの高さ（60px）分の余白に自動切り替え */
	}
}



/* フェードインと無効化をコントロール */
/* ===================================================
	 ベース設定
=================================================== */
/* 最初は透明にして下にずらす（通常時のみ適用） */
.anim-fade .fade-block {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 画面内に入ったら表示する */
.anim-fade .fade-block.is-active {
	opacity: 1;
	transform: translateY(0);
}

/* ===================================================
	 ★ 後から一括で「フェードイン」させたい場合
=================================================== */
/* JSを使わず、あとから特定のタイミングで一括表示させたい時は、
	 bodyに .is-ready などのクラスをつければ一斉に表示されます */
.anim-fade.is-ready .fade-block {
	opacity: 1;
	transform: translateY(0);
}

/* ===================================================
	 ★ アニメーションを一括で「無効化」したい場合
=================================================== */
/* bodyのクラスが .anim-none の時は、最初から100%表示（動きなし） */
.anim-none .fade-block {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/*================================================
 *	ハンバーガーメニュー
 ================================================*/
/* ==========================================================================
	 共通・PC向けのベーススタイル（画面幅 1025px 以上）
	 ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px; /* ヘッダーの高さを100pxに固定 */
	padding: 0 0 0 40px; /* 右端をピッタリくっつけるため、右のpaddingを0に */
	background-color: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	z-index: 100;
}

.logo {
	display: flex;
	align-items: center;
	height: 100%;
}

.logo a {
	display: block;
	line-height: 0;
}
.logo a img {
	height: 45px !important;
	width: auto;
}

/* ヘッダー右側のエリア（余白調整） */
.header-right {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 30px; /* テキストメニューと画像ボタンの間の隙間 */
}

.pc-nav {
	height: 100%;
	display: flex;
	align-items: center;
}

.pc-nav .nav-list {
	display: flex;
	align-items: center;
	gap: 28px; /* メニュー項目同士の隙間を半分に縮小 */
	list-style: none !important;
	list-style-type: none !important;
	margin: 0;
	padding: 0;
	br { display: none; }

}

.pc-nav .nav-list > li {
	position: relative; /* アニメーション下線の配置基準 */
}

/* 親メニューのテキストスタイル */
.pc-nav .nav-list > li > a {
	display: block;
	color: #333333;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	padding: 10px 0;
	position: relative; 
	transition: none; /* マウスオーバー時に文字色を変えないためtransitionを無効化 */
}

/* --- PC向け：サブメニュー（企業情報） --- */
.pc-nav .has-submenu {
	position: relative;
}

.pc-nav .submenu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	width: 220px;
	background-color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	padding: 10px 0;
	list-style: none !important;
	list-style-type: none !important;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
	z-index: 10;
}

/* サブメニューのテキストスタイル */
.pc-nav .submenu a {
	display: block;
	padding: 12px 24px;
	font-size: 0.9rem;
	color: #333333;
	text-decoration: none;
	text-align: left;
	font-weight: normal;
	position: relative; /* 下線の基準点 */
	width: fit-content; /* 下線が文字の長さにぴったり合うように設定 */
}

/* ホバー時にドロップダウン背景をグレーにしない（線を美しく見せるため） */
.pc-nav .submenu a:hover {
	background-color: transparent;
}

/* ホバー時にサブメニューを表示 */
.pc-nav .has-submenu:hover .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
	 PC向け：メニューのマウスオーバーアンダーライン（文字色変更なし）
	 ========================================================================== */
/* 【共通】親メニューとサブメニューの赤ライン初期状態（幅0） */
.pc-nav .nav-list > li > a::after,
.pc-nav .submenu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px; /* テキストの5px下に配置 */
	width: 0;
	height: 2px; /* 線の太さ */
	background-color: #ff6b6b; /* 赤色のライン */
	transition: width 0.3s ease; /* 0.3秒かけて滑らかに伸びる */
}

/* サブメニューの線の位置をパディングの内側に微調整 */
.pc-nav .submenu a::after {
	left: 24px; /* aタグの左padding(24px)の位置に合わせる */
	bottom: 4px; /* ドロップダウン内の縦幅に合わせて調整 */
}

/* 【ホバー時】文字色は変えず、ラインだけを100%に伸ばす */
.pc-nav .nav-list > li > a:hover,
.pc-nav .submenu a:hover {
	color: #333333; /* マウスオーバー時も文字色は元のまま変化なし */
}

/* ホバー時に親メニューの線を伸ばす */
.pc-nav .nav-list > li > a:hover::after {
	width: 100%;
}

/* ホバー時にサブメニューの線を伸ばす */
.pc-nav .submenu a:hover::after {
	width: calc(100% - 48px); /* 左右のpadding(24px×2)を引いた、文字ぴったりの幅 */
}

/* --- 画像ボタンのスタイル（右端ぴったり・隙間0を徹底） --- */
.header-img-buttons {
	display: flex;
	align-items: center;
	gap: 0 !important; /* 画像ボタン同士の隙間を確実に0にする */
	list-style: none !important;
	list-style-type: none !important;
	margin: 0;
	padding: 0;
	height: 100%; /* ヘッダーの高さ100%に広げる */
}

.header-img-buttons .nav-img-btn {
	height: 100%;
	display: block;
}

.header-img-buttons .nav-img-btn a {
	display: block;
	height: 100%;
	line-height: 0; /* HTML上の改行やスペースによる隙間を消去 */
}

.header-img-buttons .nav-img-btn img {
	width: auto;
	height: 100px; /* 画像ボタンの高さを100pxに指定 */
	display: block; /* ブロック要素にして画像下・横の隙間を完全に排除 */
	object-fit: cover;
	margin: 0;
	padding: 0;
	border: none;
	transition: opacity 0.3s ease;
}

.header-img-buttons .nav-img-btn img:hover {
	opacity: 0.85;
}

/* 初期状態ではスマホ用のボタンとダイアログを強制非表示 */
.menu-trigger, .menu-dialog {
	display: none !important;
}

/* ダミーのメインコンテンツ（ヘッダー固定の確認用） */
.main-content {
	padding-top: 140px; /* ヘッダーが高くなった分、コンテンツの余白を調整 */
	text-align: center;
}


/* ==========================================================================
	 PC向け：タブレットサイズ（1024px）未満になる前のナビゲーション調整
	 ========================================================================== */
@media (min-width: 1025px) {
	.pc-nav .nav-list {
		display: flex;
		align-items: center;
		justify-content: flex-end; /* メニューを右寄せに配置 */
		flex-wrap: wrap;           /* 画面幅が狭くなったら綺麗に自動改行させる */
		gap: 14px 20px;            /* 【調整可】「上下の行間 14px」「左右のメニュー間 20px」に設定 */
		max-width: 700px;          /* ロゴや右側の画像ボタンと衝突しないよう最大幅を制限（環境に合わせて調整） */
	}

	.pc-nav .nav-list > li > a {
		padding: 6px 0;            /* 改行された時に上下が窮屈にならないよう内側余白を微調整 */
		white-space: nowrap;       /* メニューテキストの単語の途中での意図しない改行を防止 */
	}
}


/* ==========================================================================
	 タブレット・スマートフォン向けのスタイル（画面幅 1024px 以下）
	 ========================================================================== */
@media (max-width: 1024px) { /* 【変更】767pxから1024pxへ引き上げ */
	.site-header {
		height: 60px; /* タブレット・SP時のヘッダー高さを60pxに縮小 */
		padding: 0 0 0 16px; /* 右端ぴったりにするため右paddingは0 */
	}

	.pc-nav {
		display: none;
	}

	/* ロゴの画像を32pxにする */
	.logo {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.logo a img {
		height: 28px !important;
		width: auto;
	}

	/* 右側エリア（画像ボタンと3本線）の隙間 */
	.header-right {
		gap: 4px; 
		height: 100%;
	}

	/* 画像ボタンエリア（隙間と改行による余白を完全にゼロにする） */
	.header-img-buttons {
		display: flex !important;
		align-items: center;
		gap: 0 !important; /* ボタン同士の隙間を確実に0にする */
		height: 100%; /* ヘッダーの高さ100%（60px）に広げる */
		padding: 0;
		margin: 0;
	}

	.header-img-buttons .nav-img-btn {
		height: 100%;
	}

	.header-img-buttons .nav-img-btn a {
		display: block;
		height: 100%;
		line-height: 0;
	}

	.header-img-buttons .nav-img-btn img {
		height: 60px !important; /* 60px高で固定 */
		width: auto;
		display: block; /* ブロック要素にして隙間を完全に排除 */
		margin: 0;
		padding: 0;
		border: none;
	}

	/* 【位置固定】スマホ・タブレット用ハンバーガーボタン */
	.menu-trigger {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 44px;
		height: 100%; /* 60pxのヘッダー高さいっぱいに広げてタップ領域を確保 */
		align-self: center;
		margin: 0 8px 0 0; /* 右端からの距離を8pxに固定 */
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		box-sizing: border-box;
	}

	.menu-trigger .bar {
		display: block;
		width: 22px;
		height: 2px;
		background-color: #1a1a1a;
		border-radius: 2px;
	}

	/* 【位置固定】ダイアログ内の閉じるボタン（三本線と位置・サイズを完全同期） */
	.menu-close {
		position: absolute;
		top: 0;
		height: 60px; /* 開くボタンと同じく60px高に統一 */
		right: 8px; /* 開くボタンの右マージン(8px)と完全に位置を一致させる */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 44px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		z-index: 120;
	}

	.menu-close .bar {
		display: block;
		width: 24px;
		height: 2px;
		background-color: #1a1a1a;
		position: absolute;
		border-radius: 2px;
	}

	.menu-close .bar:nth-child(1) { transform: rotate(45deg); }
	.menu-close .bar:nth-child(2) { transform: rotate(-45deg); }

	/* 全画面メニュー（右側スライドイン仕様） */
	.menu-dialog {
		width: 100vw;
		height: 100vh;
		max-width: 100%;
		max-height: 100%;
		margin: 0;
		padding: 0;
		border: none;
		background-color: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		
		/* 【変更】初期状態：画面の右外側（100%右）に完全に隠しておく */
		transform: translateX(100%);
		visibility: hidden;
		
		/* JS側で指定された秒数（--menu-speed）を読み込んで適用 */
		transition: transform var(--menu-speed) cubic-bezier(0.16, 1, 0.3, 1), 
								visibility var(--menu-speed) ease;
	}

	/* 【変更】メニューが開いた状態：元の位置（0）へスライドバックさせる */
	.menu-dialog.is-animating {
		transform: translateX(0);
		visibility: visible;
	}

	/* display属性の設定（構造維持のため分離） */
	.menu-dialog[open] {
		display: flex !important;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.menu-inner {
		width: 100%;
		max-height: 100vh;
		overflow-y: auto;
		padding: 76px 24px 40px 24px; /* ヘッダーが60pxになったので上部余白を76pxに */
		box-sizing: border-box;
	}

	/* メニュー内のメインリスト：マークを完全に消去 */
	.sp-nav .nav-list {
		list-style: none !important;
		list-style-type: none !important;
		padding: 0;
		margin: 0;
		text-align: left;
	}

	.sp-nav .nav-list > li {
		margin: 0;
		padding: 16px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	.sp-nav .nav-list > li > a {
		font-size: 1.15rem;
		color: #1a1a1a;
		text-decoration: none;
		font-weight: 600;
		letter-spacing: 0.05em;
		display: block;
		width: 100%;
	}

	/* サブメニューを持つ企業情報のプラスマーク（デフォルトで展開状態の見た目にしておく） */
	.sp-nav .has-submenu > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sp-nav .has-submenu > a::after {
		content: "+";
		font-size: 1.3rem;
		font-weight: 300;
		color: #999;
		transition: transform 0.3s ease;
		transform: rotate(135deg); /* 最初からマイナス（展開）状態に回転 */
		color: #ff6b6b;
	}

	/* タップして閉じられた時（.is-closedが付いた時）はプラスに戻す */
	.sp-nav .has-submenu.is-closed > a::after {
		transform: rotate(0deg);
		color: #999;
	}

	/* メニュー内のサブメニュー：マークを完全に消去（デフォルトで表示状態[block]） */
	.sp-nav .submenu {
		list-style: none !important;
		list-style-type: none !important;
		position: static;
		transform: none;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.02);
		margin: 12px -24px -16px -24px;
		padding: 14px 24px;
		display: block; /* 最初から開いておく */
	}

	/* タップして閉じられた時（.is-closedが付いた時）は非表示にする */
	.sp-nav .has-submenu.is-closed .submenu {
		display: none;
	}

	.sp-nav .submenu li {
		margin: 0;
		padding: 12px 0;
		border-bottom: 1px dashed rgba(0, 0, 0, 0.04);
	}

	.sp-nav .submenu li:last-child {
		border-bottom: none;
	}

	.sp-nav .submenu a {
		font-size: 1.0rem;
		color: #555555;
		text-decoration: none;
		font-weight: 500;
		display: block;
	}
}

/*================================================
 * フッター
 ================================================*/

/* 全体共通のリセット（必要に応じて調整してください） */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* フッター全体 */
.site-footer {
	background-color: #0b3a6d; /* 深みのある紺色 */
	color: #ffffff;
	padding-top: 50px;
	font-size: 14px;
	position: relative; /* ボタンの絶対配置の基準にする */
}

/* コンテナレイアウト（幅一杯に広げず中央配置） */
.footer-container {
	clear:both;
	width: 1100px;
	margin: 0 auto;
	display: block;
}

/* --- 左側セクション --- */
.footer-left {
	width: 320px;
	margin-bottom: 30px;
	display: block;
	float:left;
}

.footer-logo img {
	width: 260px;
	height: auto;
	margin-bottom: 20px;
	float:left;
}

.footer-company-name {
	clear:both;
	font-size: 30px;			 /* 文字の大きさ */
	font-weight: bold;		 /* 太字にする */
	color: #ffffff;				/* 文字の色 */
	letter-spacing: 0.1em;/* 文字の間隔を少し広げる */
	margin-bottom: 10px;
}
.footer-address {
	font-style: normal;
	line-height: 1.6;
	margin-bottom: 25px;
	color: #ffffff;
}

.footer-sns {
	display: flex;
	gap: 30px;
}

.footer-sns .sns-icon {
	display: inline-block;
	width: 40px;
	height: 40px;
}

.footer-sns .sns-icon:hover {
	opacity: 0.8;
}
.footer-middle {
	width: 360px;
	display: block;
	float:left;
}
/* --- 真ん中セクション --- */

/* 電話番号ブロック */
.footer-tel-wrap {
	width: 360px;
	height: auto;
	text-align: right;
	margin:0 0 20px 20px;
	float:left;

}

/* --- 右側セクション --- */
.footer-right {
	width: 320px;
	display: block;
	float:right;
}


/* お問い合わせボタン群 */
.footer-buttons {
	gap: 5px;
	width: 321px;
	margin-bottom: 40px;
}

.btn {
	display: block;
	margin-bottom: 5px;
}

.btn:hover {
	opacity: 0.7;
}

/* メインナビゲーション */
.footer-nav {
	width: 100%;
	margin-top: 20px; /* 上部との間隔調整 */
	margin-bottom: 20px;
}

.footer-nav ul {
	display: flex;
	justify-content: center; /* 右寄せ(flex-end) から 中央揃え(center) に変更 */
	flex-wrap: wrap;
	list-style: none;
	gap: 0 20px; /* メニュー間の余白を均等に */
}

.footer-nav ul li {
	position: relative;
}

/* 各メニューの間の区切り線「|」 */
.footer-nav ul li:not(:last-child)::after {
	content: "|";
	color: #7fa4cc;
	margin-left: 20px;
}

.footer-nav ul li a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	white-space: nowrap; /* 文字の途中で意図せず改行されるのを防ぐ */
}

/* サブナビゲーション */
.footer-sub-nav {
	width: 100%;
	margin-bottom: 30px;
}

.footer-sub-nav ul {
	display: flex;
	justify-content: center; /* 右寄せ(flex-end) から 中央揃え(center) に変更 */
	flex-wrap: wrap;
	list-style: none;
	gap: 25px;
}

.footer-sub-nav ul li a {
	color: #d1dfed;
	text-decoration: none;
	font-size: 12px;
}

/* --- コピーライトエリア --- */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background-color: #082d54;
	padding: 15px 0;
	text-align: center;
}

.copyright {
	font-size: 11px;
	color: #7fa4cc;
	letter-spacing: 0.5px;
}

/* --- レスポンシブ対応（スマホ向け） --- */
@media (max-width: 1024px) {
	/* 
		画面幅が狭くなった時にナビゲーションを綺麗に中央に収めるため、
		コンテナを縦並び(column)の構成に切り替えます。
	*/
	.footer-container {
		width:100%;
		align-items: center;
		text-align: center;
	}

	.footer-left {
		clear:both;
		width:100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}
	.footer-logo img {
		width: 60%;
		margin:0 20%;
		height: auto;
		margin-bottom: 20px;
		float:left;
	}
	/* 電話番号ブロック */
	.footer-tel-wrap {
		width: 50%;
		margin:0 25%;
		text-align: center;
	}
	.footer-middle {
		clear:both;
		width:100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.footer-right {
		clear:both;
		width: 100%;
		align-items: center; /* スマホ時は電話やボタンも中央寄せに */
	}

	.footer-company-name {
		clear:both;
		font-size: 20px;			 /* 文字の大きさ */
		font-weight: bold;		 /* 太字にする */
		color: #ffffff;				/* 文字の色 */
		letter-spacing: 0.05em;/* 文字の間隔を少し広げる */
		margin-bottom: 10px;
	}
	.footer-buttons {
		gap: 5px;
		width: 40%;
		margin:0 30%;
		margin-bottom: 20px;
		align-items: center; /* スマホ時は電話やボタンも中央寄せに */
	}


	.footer-nav {
		display:none;
	}
	.footer-sub-nav {
		display:none;
	}

}

/* --- 画面幅1025px以上（PC）のとき --- */
@media (min-width: 1025px) {
  .footer-tel-sp { display: none !important; } /* スマホ用リンクを隠す */
  .footer-tel-pc { display: block; }           /* PC用画像を表示 */
}

/* --- 画面幅1024px以下（スマホ・タブレット）のとき --- */
@media (max-width: 1024px) {
  .footer-tel-pc { display: none !important; } /* PC用画像を隠す */
  .footer-tel-sp { display: block; }           /* スマホ用リンクを表示 */
}
 /* To Top ボタンのスタイル */
.to-top-btn {
  position: absolute;
  top: 0; /* フッターの上辺に合わせる */
  right: 40px; /* 右端からの余白（デザインに合わせて調整） */
  transform: translateY(-50%) rotate(45deg); /* 半分上にずらし、ひし形に回転 */
  width: 40px;
  height: 40px;
  background-color: #333333; /* ボタンの背景色 */
  border: 2px solid #ffffff; /* 白い境界線 */
  border-radius: 6px; /* 緩やかな角丸 */
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.to-top-btn:hover {
  background-color: #555555;
}

/* 矢印アイコンのスタイル（ひし形に対して逆回転させて真っ直ぐにする） */
.to-top-btn::after {
  content: "↑";
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  transform: rotate(-45deg); /* ひし形の回転を打ち消す */
}