@charset "utf-8";
/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* CSSカスタムプロパティ（変数）の定義 */
:root {
    --primary-color: #ba0d0d; /* 主要なアクセントカラー（赤） */
    --secondary-color: #2b392c; /* 背景の暗い色 */
    --text-color: #666; /* 主要なテキスト色 */
    --header-bg-start: #4c584d; /* ヘッダー背景グラデーション開始色 */
    --header-bg-end: #2b392c; /* ヘッダー背景グラデーション終了色 */
    --main-bg-start: #525d53; /* メインコンテンツH2グラデーション開始色 */
    --main-bg-end: #242f24; /* メインコンテンツH2グラデーション終了色 */
    --border-color: #ccc; /* 一般的なボーダー色 */
    --header-height: 50px; /* header.gifの実際の高さに合わせて調整してください */
}

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	color: var(--text-color);
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px; /* やや現代的なフォントサイズに調整 */
	line-height: 1.7; /* 行間を調整 */
	background: var(--secondary-color);
	background: radial-gradient(circle 400px at 25% 50px, var(--header-bg-start), var(--header-bg-end)) no-repeat var(--secondary-color);
	border-top: 4px solid var(--primary-color);
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure {margin: 0;padding: 0;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: var(--text-color);
	transition: 0.3s; /* マウスオン時の移り変わるまでの時間を短縮 */
}
a:hover {
	color: var(--primary-color);
	text-decoration: none;
}

/*containerブロック
---------------------------------------------------------------------------*/
#container {
	max-width: 1300px;
	padding: 0 3%;
	margin: 0 auto;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
	position: relative;
	color: #fff;
	height: var(--header-height); /* 変数で高さを管理 */
	display: flex; /* Flexboxで内容を中央寄せなど調整可能 */
	align-items: center; /* 垂直方向中央寄せ */
	justify-content: flex-start; /* 水平方向左寄せ */
}
header a {
	color: #fff;
}
#mainimg {
	/* 必要に応じて画像配置を調整 */
}

/*コンテンツ（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	display: flex; /* Flexboxでメインとサイドバーを配置 */
	gap: 3%; /* mainとsubの間の余白 */
	background: #fff;
	padding: 3%;
	box-shadow: 0px 0px 50px rgba(0,0,0,0.5);
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
#main {
	flex: 1; /* 残りのスペースを全て占める */
}
#main h1 {
	clear: both;
	margin-bottom: 20px;
	font-size: 20px; /* やや大きめに調整 */
	letter-spacing: 0.1em;
	color: #000;
	padding: 8px 15px; /* 余白を調整 */
	border-bottom: 4px solid var(--primary-color);
}
#main h2 {
	clear: both;
	margin-bottom: 15px; /* 下にスペースを調整 */
	font-size: 18px;
	letter-spacing: 0.1em;
	color: #fff;
	background: var(--main-bg-end);
	background: linear-gradient(var(--main-bg-start), var(--main-bg-end));
	padding: 8px 15px;
	border-bottom: 4px solid var(--primary-color);
	border-radius: 10px 0px;
}
#main h3 {
	clear: both;
	margin-bottom: 10px;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: #fff;
	background: #0000c0;
	background: linear-gradient(#0064ff, #0000c0);
	padding: 8px 25px;
	border-bottom: 4px solid #c0c000;
	border-radius: 10px 10px 0px 0px;
}
#main h4 {
	clear: both;
	margin-bottom: 10px;
	font-size: 18px;
	background: #fff;
	background: linear-gradient(#FFF, #eee);
	padding: 4px 25px;
	border: 1px solid var(--border-color);
	color: #333;
}
#main p {
	padding: 0 20px 15px;
}
#main h1 + p,
#main h2 + p,
#main h3 + p,
#main h4 + p {
	margin-top: -5px; /* 見出しとの間隔を調整 */
}

#main section+section {
	margin-top: 50px;
}

/*SERVICEページの各ブロック (既存スタイルの調整)
---------------------------------------------------------------------------*/
#main .list {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	background: linear-gradient(#FFF, #e3e3e3);
	box-shadow: 0px 0px 0px 1px #fff inset;
	color: #333;
	border-radius: 5px; /* 角丸を追加 */
}
#main .list a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 20px;
	margin: -20px;
	color: #333;
}
#main .list a:hover {
	background: #f8f8f8; /* ホバー時の背景色を調整 */
}
#main .list a::before {
	content: "→";
	font-size: 14px; /* やや大きめに */
	display: block;
	position: absolute;
	right: 15px; /* 位置を調整 */
	bottom: 15px; /* 位置を調整 */
	width: 30px;
	line-height: 30px;
	text-align: center;
	background: rgba(0,0,0,0.2);
	color: #fff;
	border-radius: 50%; /* 円形にする */
}
#main .list a:hover::before {
	background: var(--primary-color);
}
#main .list h4 {
	padding-left: 10px;
 	border-bottom: 1px solid var(--border-color);
	border-left: 3px solid var(--primary-color);
	margin-bottom: 0.5em;
	color: var(--primary-color);
}
#main .list p {
	padding: 0;
}
#main .list figure {
	float: left;
	width: 30%;
	background: #FFF;
	padding: 1%;
	border: 1px solid var(--border-color);
	margin-right: 15px; /* 余白を調整 */
	border-radius: 3px;
}
.list.option2 a:hover figure img,
.list.option2 figure img {
	opacity: 0.3 !important;
}

/*SERVICEページの各ボックス内のテーブル (既存スタイルの調整)
---------------------------------------------------------------------------*/
#main .list table {
	font-size: 13px; /* 少し大きめに調整 */
	width: 63%;
	margin-bottom: 5px;
	background: #fff;
}
#main .list table,
#main .list table td,
#main .list table th{
	border: 1px solid var(--border-color);
}
#main .list table td,
#main .list table th{
	padding: 1%;
}
#main .list table th{
	width: 20%;
	text-align: center;
	font-weight: normal;
	background: #edf0f5;
}
#main .list table td {
	width: 30%;
}

/*subコンテンツ
---------------------------------------------------------------------------*/
#sub {
	width: 280px; /* 固定幅を仮設定。Flexbox/Gridで調整する場合はflex-basisなどを使用 */
	flex-shrink: 0; /* 縮まないようにする */
}
#sub h2 {
	padding: 8px 10px; /* 余白を調整 */
	background: #555;
	color: #FFF;
	border-radius: 5px; /* 角丸を追加 */
	margin-bottom: 15px; /* 下に余白 */
}

/*subコンテンツのbox (既存スタイルの調整)
---------------------------------------------------------------------------*/
#sub .box {
	border: 1px solid var(--border-color);
	padding: 15px; /* 余白を調整 */
	background: #e2e2e2 url(../images/bg.png);
	margin-bottom: 25px; /* 余白を調整 */
	border-radius: 5px;
}

/*subコンテンツ内のメニュー (既存スタイルの調整)
---------------------------------------------------------------------------*/
#sub ul.submenu {
	margin: 20px 0;
}
#sub ul.submenu li a {
	text-decoration: none;display: block;
	border-bottom: 1px solid var(--border-color);
	padding: 5px 15px; /* 余白を調整 */
	background: #FFF;
	transition: 0.3s;
}
#sub ul.submenu li a:hover {
	background: #f5f5f5; /* ホバー時の背景色を調整 */
	color: #333;
}
#sub .box ul.submenu {
	margin-bottom:  0;
}

/*サブコンテンツ内の一覧ブロック (既存スタイルの調整)
---------------------------------------------------------------------------*/
#sub .list {
	position: relative;overflow: hidden;
	font-size: 12px; /* 少し大きめに調整 */
	line-height: 1.4;
	background: #fff;
	border-radius: 3px;
	margin-bottom: 10px; /* 下に余白 */
}
#sub .list a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 10px;
	border-bottom: 1px solid var(--border-color);
}
#sub .list a:hover {
	background: #f5f5f5;
	color: #333;
}
#sub .list h4 {
	color: var(--secondary-color);
	font-size: 13px;
}
#sub .list figure img {
	float: left;
	width: 25%; /* 画像幅を調整 */
	margin-right: 10px; /* 余白を調整 */
}

/*フッター設定 (既存スタイルの調整)
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;
	padding: 20px 0; /* 上下の余白を調整 */
	color: #fff;
	font-size: 14px; /* フォントサイズを調整 */
}
footer a {
	text-decoration: none;
	color: #fff;
}
footer .pr {
	display: block;
	font-size: 80%;
	margin-top: 5px;
}


/*テーブル（ta1） (既存スタイルの調整)
---------------------------------------------------------------------------*/
.ta1 {
	width: 95%;
	margin: 0 auto 20px;
	border: 1px solid var(--border-color); /* テーブル全体のボーダーを追加 */
	border-collapse: collapse;
}
.ta1, .ta1 td, .ta1 th {
	border: 1px solid var(--border-color);
	padding: 10px 15px;
	word-break: break-all;
}
.ta1 .tamidashi {
	width: auto;
	text-align: center;
	background: #eee;
}
.ta1 th {
	width: 140px;
	text-align: center;
	font-weight: normal;
	background-color: #f7f7f7; /* 背景色を追加 */
}
.ta1 th img {
	width: 100%;
}

/*ページの上部へ「↑」ボタン (既存スタイルの調整)
---------------------------------------------------------------------------*/
@keyframes scroll {
0% {opacity: 0;}
100% {opacity: 1;}
}
body .nav-fix-pos-pagetop a {display: none;}
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: flex; /* Flexboxで内容を中央寄せ */
	align-items: center;
	justify-content: center;
	text-decoration: none;
	z-index: 100;
	width: 45px; /* サイズを微調整 */
	height: 45px; /* サイズを微調整 */
	position: fixed;
	bottom: 30px; /* 下からの位置を調整 */
	right: 30px; /* 右からの位置を調整 */
	background: rgba(0,0,0,0.7); /* 透明度を調整 */
	color: #fff;
	border: 1px solid #fff;
	border-radius: 50%; /* 円形にする */
	animation-name: scroll;
	animation-duration: 1S;
	animation-fill-mode: forwards;
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #666; /* ホバー時の色を調整 */
}

/*一覧ページのボックス内のアイコン (既存スタイルの調整)
---------------------------------------------------------------------------*/
span.option1, span.option2 {
	text-align: center;
	display: block;
	font-size: 10px;
	width: 120px;
	position: absolute;
	right: 0px;
	top: 0px;
	transform: rotate(45deg) translate(36px,-15px);
	color: #FFF;
	background: #999;
	padding: 2px 0; /* 上下パディングを追加 */
}
span.option1 {
	color: #FFF;
	background: var(--primary-color); /* 変数を適用 */
}
h2 span.option1, h2 span.option2 {
	width: auto;
	position: static;
	transform: none;
	display: inline-block;
	font-size: 15px;
	margin-left: 10px;
	padding: 0 5px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #ccc;color: #333;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.p0 {padding:0 !important;}
.clear {clear: both;} /* Flexbox/Gridを使うと不要になる場合が多いですが、念のため残します */
ul.disc {padding: 0em 25px 15px;list-style: disc;}
.color1, .color1 a {color: var(--primary-color);}
.bg1 {background: #f6f5f2;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr,img.fl {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 20px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
    height: auto; /* 高さを自動調整にする */
    padding: 0px 0; /* 必要に応じて上下のパディングで調整 */
}

/*メインコンテンツとサイドバーの配置変更 */
#contents {
    flex-direction: column; /* 縦並びにする */
    gap: 20px; /* 縦の余白 */
}
#main, #sub {
	width: auto; /* 幅を自動調整 */
}
#sub {
	width: 100%; /* サイドバーも全幅に */
	order: 1; /* 必要に応じてサイドバーをメインコンテンツの下に移動 */
}
#main {
	order: 2; /* メインコンテンツをサイドバーの下に移動 */
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}

}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){