@charset "utf-8";
/* 
**********************************************
共通
**********************************************
*/

.display-pc{
	display:block !important;
	}
	.display-pc-inline{
		display:inline !important;
		}
	.display-sp,
	.display-sp-inline{
		display:none !important;
		}

a{
	color: #2a6cb1;
	text-decoration: none;
	transition: 0.5s;
	}
	/*hover時*/
	a:hover{
		color:#007df5;
		transition: 0.5s;
		}
	
/*textを右寄せにする*/
.textright{
	text-align: right;
	}
	.textcenter{
		text-align: center;
		}

/*改行*/
br.br-pc{
	display: block;
	}
	br.br-sp{
		display: none;
		}

	html, body {
  overscroll-behavior: none; /* iOSの弾むスクロールを無効化 */
  touch-action: manipulation; /* タップ挙動の高速化・安定化 */
  overflow-x: hidden; /* 横スクロール防止 */
}
/* ==========================================================================
グローバル
========================================================================== */
#header{
	position:fixed;
	z-index:100;
	width:100%;
	display: flex;
	background-color: rgba(0, 0, 0, 0.3);
	}

	/*ロゴ*/
	.header-logo{
		margin-right: auto;
		padding: 15px 0 15px 15px;
		display: flex;
		}
		.header-logo img{
			width: 50px;
			}
		.header-logo .logo-txt{
			color: #fff;
			padding-left: 10px;
			}
		.site-title{
			font-size: 24px;
			padding:3px 0 5px;
			}
		.header-logo a{	
			color: #fff;
			}

	#global{
		display: flex;
		padding:15px 20px 0 0;
		}
		#global li{
			position: relative;
			}
		#global li a{
			display: block;
			line-height: 55px;
			color: #fff;
			font-size: 14px;
			padding: 0 15px;
			transition: 0.5s;
			text-align: center;
			}
			/*グローバル区切り*/
			#global li a:after{
				content: '|';
				position: relative;
				left: 17px;
				color: rgba(255,255,255,0.7)
				}
				/*グローバル区切り　最後はなし*/
				#global li:nth-last-of-type(3) a:after,
				#global li:nth-last-of-type(2) a:after,
				#global li:nth-last-of-type(1) a:after{
					display: none;
					}
			
			#global li:nth-last-of-type(3) a{
				padding-right: 30px !important;
				}
				#global li a:hover{
					background-color:rgba(154, 51, 52, 0.5);
					}
	
			#global li.webreserve a{
				background-color:rgba(154, 51, 52, 1);
				color: #fff;
				width: 110px;
				}
				#global li.webreserve a:hover{
					background-color:rgba(51, 51, 51, 0.5);
					color: #fff;
					}
			#global li.mem a{
				background-color:#fff;
				color: rgba(154, 51, 52, 1);
				width: 110px;
				}
				#global li.mem a:hover{
					background-color:rgba(154, 51, 52, 0.5);
					color: #fff;
					}
					
			/*サブメニュー*/
			#global .submenu{
				position: absolute;
				top:70px;
				right: 0;
				white-space: nowrap;
				display: none;
				z-index: 100;
				}
				#global .submenu li a{
					padding:0 30px !important;
					line-height:50px !important;
					border-bottom:dashed 1px #ccc;
					text-align: left !important;
					background-color: rgba(0, 0, 0, 0.5);
					}
					#global ul.submenu li a:hover{
						background-color:rgba(154, 51, 52, 0.5);
						}
					#global .submenu li:first-child{
						padding-top:10px;
						background:url(../images/icn-triangle.png) no-repeat right 40px top 2px;
						}
					#global .submenu li:last-child a{
						border-bottom: none;
						}
					#global .submenu li a:after{
						display: none;
						}

				#global .mem .submenu li a{
					background-color:rgba(154, 51, 52, 1);
					}
					#global .mem .submenu li:first-child{
						background:url(../images/icn-triangle-red.png) no-repeat right 40px top 2px;
						}


				#global li:hover .submenu,
				#global li .submenu:hover{
					display: block;
					}	
		/*1280px以下*/
		@media screen and (max-width:1530px) {
			.header-logo p{
				font-size: 11px;
				}
			.header-logo .site-title{
				font-size: 20px;
				}
			#global li a{
				font-size: 12px;
				padding: 0 5px;
				}
			#global li a:after{
				content: none;
				}
			#global li.webreserve a{
				width: 100px;
				}
			#global li.mem a{
				width: 100px;
				}
				
		}

	/* WEB予約ボタンの最終調整 */
#global li.webreserve a {
    /* 既存のline-height: 55px; を強制的に上書きし、行間を適切に設定 */
    line-height: 1.2 !important; 
    width: 140px !important; 
    height: 55px;
    display: flex; 
    align-items: center; /* 垂直中央揃え */
    justify-content: center; /* 水平中央揃え */
    padding: 0 !important;
    font-size: 13px; 
}

#global li.webreserve a:hover{
			background-color:rgba(154, 51, 52, 0.5);
			color: #fff;
			}

/* pc-common-nippon202510.css の該当箇所を修正 */

#global li.mem a{
		background-color:#fff;
		color: rgba(154, 51, 52, 1);
		/* 画面サイズに関わらず110pxを強制適用 */
		width: 140px !important; 
		padding: 0;
		font-weight: 700;
		}
		#global li.mem a:hover{
			background-color:rgba(51, 51, 51, 0.5);
			color: #fff;
			}

	/*スマホのみ表示*/
	#humbergar,
	#sp-global-area{
		display: none;
		}

/* ==========================================================================
フッタ
========================================================================== */
#footer{
	background-color:#666;
	padding:100px 0 20px;
	z-index: 60;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	}
	#footer a{
		position: relative;
		display: inline-block;
		text-decoration: none;
		color:#fff;
		}
		#footer a::after {
			position: absolute;
			bottom: 0px;
			left: 0;
			content: '';
			width: 100%;
			height: 1px;
			background: #fff;
			transform: scale(0, 1);
			transform-origin: left top;
			transition: transform .3s;
			}
		#footer	a:hover::after {
			transform: scale(1, 1);
			}

	/*フッタ〜イメージエリア*/
	#footer .image-area{
		padding-left:80px ;
		padding-bottom: 25px;
		display: flex;
		}
	#footer .image-area p + p{
		padding-left: 30px;
	}
	#footer .image-area a{
		transition: .3s;
	}
	#footer .image-area a:hover{
		opacity: .7;
	}
	#footer .image-area a::after{
		content: none;
	}

	/*フッタ〜右エリア*/
	.footer-right{
		width: 70%;
		}
		.footer-right h2,
		.footer-right h3{
			padding-left: 80px;
			padding-bottom: 10px;
			color:#fff;
			}
		.footer-right address{
			font-style: normal;
			display: flex;
			padding-left: 80px;
			color:#fff;
			}
			.footer-right address p{
				padding-right: 20px;
				}
			#footer .btn-area{
				padding:10px 0  50px 80px;
				justify-content: flex-start;
				}
				#footer .footer-right .btn-area a{
					padding: 5px 0;
					width: 200px;
					min-width: 200px;
					}
					#footer .footer-right .btn-area a:hover{
						color: #666;
						}

		/*リンク*/			
		.footer-right ul{
			padding-left: 80px;
			padding-bottom: 50px;
			}
			.footer-right li{
				display:inline-block;
				vertical-align:top;
				text-align:left;
				background:url(../images/icn-footer-list.png) no-repeat 9px 5px;
				padding-bottom: 50px;
				}
				.footer-right ul li{
					padding-right:50px;
					}
					.footer-right ul li:last-child{
						padding-right:0px;
						}

				.footer-right li dt{
					line-height:2 !important;
					font-weight: 600;
					}
				.footer-right li dd{
					line-height:2 !important;
					}

	/*コピーライト*/
	#footer .corp-copy{
		width: 100vw;
		text-align:center;
		color:#999;
		font-size:12px !important;
		}
		#footer .corp-copy span{
			color:#999;
			}
			

/* ==========================================================================
ボタン
========================================================================== */

.btn-area{
	display: flex;
	text-align: center;
	justify-content: center;
	width: 100%;
	}
	.btn-area a{
		display: inline-block;
		max-width: 50%;
		min-width:350px;
		border:solid 1px #ccc;
		padding:10px 10px;
		margin: 0 10px;
		color: #666;
		transition: 0.5s;
		}
		.btn-area a:hover{
			background-color: #f5f5f5;
			transition: 0.5s;
			}

/*戻るボタン*/
.btn-pageback{
	text-align:center;
	padding:50px 0;
	clear:both;
	}
	.btn-pageback a img{
		opacity:0.4;
		transition : all 500ms;
		}
	.btn-pageback a:hover img{
		opacity:0.6;
		transition : all 500ms;
		}

/*スクロールでTOPへ戻るボタン*/
#page_top{
	width: 75px;
	height: 75px;
	position: fixed;
	right: 50px;
	bottom: 50px;
	background: #000;
	border-radius: 50%;
	z-index: 100;
	opacity: 0.3;
	transition: 0.3s;
	}
	#page_top a{
		position: relative;
		display: block;
		width: 75px;
		height: 75px;
		}
	#page_top a::before{
		font-family: FontAwesome;
		content: '\f106';
		font-size: 50px;
		font-weight: normal;
		color: #fff;
		position: absolute;
		width: 50px;
		height: 50px;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		text-align: center;
		}
	#page_top:hover{
		opacity:0.7;
		}


/* ==========================================================================
リスト
========================================================================== */	
.ul-dot li:before{
	content:"※";
	margin-left:-1em;
	width: 1em; 
	}
	.ul-dot li{
		padding-left:1em;
		font-size: 14px;
		}

/*ol,li表示*/
.demical{
	padding-left: 30px !important;
	}
	.demical li{
		display: list-item !important;
		list-style-type: decimal !important;
		padding: 0 0 10px;
		font-size: 14px;
		}

/*ol.li表示(括弧付き)*/
.bracketsdecimal{
	margin-left: 2em;
	}
	.bracketsdecimal li{
		counter-increment: cnt;
		padding: 10px 0;
		font-size: 14px;
		}
	.bracketsdecimal li:before{
		display: inline-block;
		content: "(" counter(cnt) ") ";
		margin-left: -2em;
		width: 2em;
		}

/* ==========================================================================
タイトル
========================================================================== */
/*画像タイプタイトル*/
.pagetitle{
	height:313px;
	text-align:center;
	background-size:cover;
	}
	.pagetitle-inn{
		background-color: rgba(0,0,0,0.4);
		height:313px;
		}
		.pagetitle h1{
			padding:150px 0 10px;
			color:#fff;
			font-size:30px;
			text-shadow: 0 0 5px #000;
			}
		.pagetitle p{
			color:#fff;
			text-shadow: 0 0 5px #000;
			font-size: 18px;
			}

/*文字なしページタイトル*/
.pagetitle-noimg{
	font-size: 30px;
	text-align:center;
	text-transform:capitalize;/*頭文字を大文字に*/
	padding-top:180px;
	padding-bottom:80px;
	}
	.pagetitle-noimg span{
		display:block;
		font-size: 18px;
		padding-top:5px;
		}
			
/*ページ内サブタイトル*/
.subtitle{
	font-size:24px;
	text-align:center;
	padding-bottom: 30px;
	}
	.subtitle-sub{
		font-size: 18px;
		text-align:center;
		font-weight: 400;
		}


/* ==========================================================================
table
========================================================================== */

/*table外枠*/
.table-common{
	border: solid 1px #ccc;
	width: 100%;
	}

	/*tableタイトル部分*/
	.table-common th{
		background-color: #f5f5f5;
		text-align: left;
		vertical-align: middle;
		padding: 10px 15px;
		border: 1px solid #ccc;
		font-size: 14px;
		}

	/*横行タイトル部分*/
	.table-common thead th{
		text-align: center;
		vertical-align: middle;
		font-size: 14px;
		}
		
		/*横行タイトル二列目部分*/
		.table-common thead td{
			background-color: #ccc;
			}
		
	/*縦列タイトル部分*/
	.table-common tbody th{
		width: 10%;
		font-size: 14px;
		}
		
	/*table中身部分*/
	.table-common td{
		border: 1px solid #ccc;
		text-align: left;
		vertical-align: middle;
		padding: 10px 20px;
		font-size: 14px;
		}

.title-table{
	display: flex;
	padding-bottom: 5px;
	}
	.title-table h3{
		font-weight: 400;
		margin-right: auto;
		}
	.title-table caption{
		display: block;
		}

/* ==========================================================================
部品
========================================================================== */
.gray-area{
	background-color:#f5f5f5;
	padding: 10px 20px;
	border: solid 1px #ccc;
	}

/* ==========================================================================
お知らせ
========================================================================== */
.news-area{
	position: relative;
	z-index: 40;
	padding-top: 50px;
	}	
	.news-area-inn{
		padding-top:50px;
		background-color: #fff;
		}
	.news-area h2{
		padding-bottom: 30px;
		}
	.news-area ul{
		width: 800px;
		margin: 0 auto 30px;
		}
		.news-area ul a{
			color: #000;
			}
			.news-area ul li{
				border-bottom: solid 1px #ccc;
				padding: 15px 0;
				font-size: 14px;
				transition: 0.5s;
				display:flex;
				}
				.news-area ul a:hover li{
					background-color: #f9f9f9;
					transition: 0.5s;
					}
			.news-area ul li span{
				padding-right: 25px;
				display: block;
				}
	.news-area .btn-area{
		padding-bottom: 30px;
		}

/* ==========================================================================
印刷設定
========================================================================== */
@media print{
		#header,
		#footer{
			display: none !important;
		}
	}