@charset "shift_jis";

:root {
	--theme-color :#00B2EC;
	--theme-dark-color :#2E74A7;
	--theme-background :#f3fdff;
	--accent-color :#ff8800;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝基本設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 *{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
    box-sizing: border-box;
}

a {/*リンクされた文字*/
    color:#0000ff;
    font-style:normal;
    text-decoration:underline;
}
a:link,
a:visited {
    color:#0D4154;
    font-style:normal;
	font-weight:normal;
    text-decoration:underline;
}
a:hover {/*マウスをのせたとき*/
    color:#ff0000;
    font-style:normal;
    text-decoration:underline;
}
a:active {/*クリック中*/
    text-decoration:none;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝全体＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*=============================================*/
/* 見出しの標準的なスタイル */
/*=============================================*/
h1 {
	font-size: 2em;
}
h1, h2, h3, h4, h5 {
	font-weight: bold;
}
h2 {
	font-size: 1.5em;
	margin-bottom: 1.3em;
}
h2, h3 {
	padding-left: 0.5em;
}
h3 {
	font-size: 1.3em;
	margin: 1.1em 0;
}
h4 {
	font-size: 1.1em;
	margin: 1.3em 0;
}
h5 {
	font-size: 1em;
	margin-bottom: 0.67em;
}
.font-s {
	font-size: 10pt;
	margin: 1.5em 0;
}
.btn- {
	text-indent: .5em;
	border-bottom: 1px solid #bcbcbc;
	color: var(--theme-dark-color);
}
.bold {
	font-weight: bold;
	color: var(--accent-color);
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
	h1 {
		font-size: 1.6em;
	}
	h2 {
		font-size: 1.4em;
	}
	h3 {
		font-size: 1.2em;
	}
	h4 {
		font-size: 1em;
	}
	h5 {
		font-size: 0.9em;
	}
}
/*=============================================*/




/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝リンク関連＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 基本設定 */
/*======================================================*/
body {
	color: #333;
	line-height: 1.4;
}

.wrapper {
	width: 960px;
	margin: 0 auto;
	text-align: left;
}
.wrapper table {
	border-collapse: collapse;
	font-size: 14px;
}

ul { /*余白と本来あるマークを消します*/
	margin:0;
	padding:0;
	list-style:none;
}
sup,sub {
	font-size: 0.5em;
}

/*======================================================*/
/* ページの先頭へ */
/*======================================================*/
.to-top {
	float: right;
	margin-top: 3em;
	padding-bottom:5px;
	width:fit-content;
	height:23px
}

/*======================================================*/
/* 新着情報 */
/*======================================================*/
.grid-groupe.-news {
	display: grid;
}
.grid-groupe.-news {
	grid-template-columns: auto 82px;
	grid-template-rows: auto;
	gap: 1em;
}
.-news > .grid.-two {
	grid-area: 1/2/2/3;
	width: 82px;
} 

.news {
	width:96px;
	text-align:center;
	padding-top:5px;
	background: var(--theme-color);
	color:#ffffff;
}
.news-box {
	background: var(--theme-background);
	width: 100%;
	border-top: 1px solid #bbb;
	border-right: 1px solid #bbb;
}

/*======================================================*/
/* お知らせ　スクロール */
/*======================================================*/
.update-scroll-frame {
	width: 100%;
}
ul.update-scroll {
	box-sizing: border-box;
	list-style-type: none;
	width: 100%;
	max-height: 4em;
	min-height: 2em;
	overflow: auto;
	border: 1px solid #bbb;
	padding-left: 0.1em;
	padding-top: 3px;
}
ul.update-scroll li {
	font-size:10pt;
}
ul.update-scroll a {
	text-decoration: none;
}

/*======================================================*/
/* 資料請求 */
/*======================================================*/
.shiryou {
	display: block;
	width: 82px;
}

/*======================================================*/
/* 見出し */
/*======================================================*/
.section-title {
    background-image: url(../images/bar-back.png);
    color: #fff;
	line-height: 42px;
	height: 40px;
}

/*======================================================*/
/* NETIS */
/*======================================================*/
.netis {
	background-color: #0071BC;
	color: #fff;
	width: fit-content;
	margin-left: 1.5em;
	padding: 2px 5px 0;
	font-size: 11pt;
	font-weight: bold;
}
/*======================================================*/
/* ヘッダー画像 */
/*======================================================*/
.header > a {
	display: block;
	float: right;
	height: 43px;
}

/*======================================================*/
/* フレックス, グリッド */
/*======================================================*/
.flex {
	display: flex;
	width: 100%;
	justify-content: space-evenly;
}
.flex.start-end {
	justify-content: space-between;
}
.flex img {
	display: block;
	width: 100%;
}

.grid-groupe {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
}
.grid.-one {
	grid-area: 1/1/2/2;
}
.grid.-two {
	grid-area: 2/1/3/2;
}
.grid.-three {
	grid-area: 1/2/2/3;
}
.grid.-four {
	grid-area: 2/2/3/3;
}


.gap {
	gap: 20px;
}
.clear {
	clear: both;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝/全体＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* メニューバー */
/*======================================================*/
.global-navi {
    clear: both;
	margin: 0;
    letter-spacing: 0.1em;
}
.global-navi ul{
  list-style-type: none;
  background-color: #efefef;
  display: flex;
  margin: 0;
  padding: 0;
}

.global-navi li {
	margin: 0;
	padding: 0;
	border-left: 1px solid #fff;
}
.global-navi li:last-child {
	border-right: 1px solid #fff;
}

.global-navi a{
	text-align: center;
	display:block;
	width: 100%;
    padding: 10px 1em;
	font-size: 1em;
    background-color: #EFEFEF;
}
.global-navi a:hover {
	background-color: var(--theme-background);
	color: var(--theme-color);
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝/メニューバー関連＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝table＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.simple-table thead {
	background-color: #efefef;
}
.simple-table th,
.simple-table td {
	border: 1px solid #333;
	text-align: left;
	padding: 2px 5px;
}

.top {
	vertical-align: top;
}

.table-block {
	display: block;
	width: fit-content;
	margin:0 auto;
}



/* お問い合わせ */
/*　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝タイトルバー＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　*/
.inquery-title {
	clear: both;
	background-color: var(--theme-dark-color);
	color: #ffffff;
	text-align: center;
	font-weight:bold;
	margin-bottom: 0;
}

.address{
	text-align: center;
	font-style: normal;
	border: var(--theme-dark-color) solid 1px;
	line-height: 145%;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝その他調整＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



/* ここから　写真関連 */
figure {
	padding: 5px;
}
figcaption {
	font-weight: bold;
	text-align: center;
	margin-top: 10px;
}

figure img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

.company {
	width: fit-content;
	margin-right: 0;
	margin-left: auto;
}

/* ここまで　写真関連 */





/* セル内の余白を完全に削除 */
#topBar td img {
	display: block;
	margin: 0;
}

@media screen and (max-width: 768px) {
	/* -------------------------------------------------------------
	ヘッダー
	---------------------------------------------------------------- */
	#topBar {
		max-width: 100% !important;
		overflow-x: scroll;
	}
	
	.inc-head-div {
		width: 100% !important;
	}




	/*-------------------------------------------------------------
	メニューバー
	-------------------------------------------------------------*/
	.global-navi ul{
		flex-wrap: wrap;
	}
	.global-navi li {
		width: auto;
		border-bottom: 1px solid #fff;
	}
	.global-navi a {
		padding: 10px;
	}
	.global-navi a:hover {
		background-color: #efefef;
		color: #0d4154;
	}
	.global-navi a:active {
		background-color: var(--theme-background);
		color: var(--theme-color);
	}

	
	/* -------------------------------------------------------------
	全体
	------------------------------------------------------------- */
	body,
	html,
	.wrapper {
		overflow-x: hidden;
	}

	h1 {
		font-size: 24px;
	}
	h2 {
		font-size: 20px;
	}
	h3 {
		font-size: 18px;
	}
	h4 {
		font-size: 16px;
	}
	h5 {
		font-size: 15px;
	}

	.wrapper {
		width: 95%;
	}

	.title-image img {
		max-width: 100%;
	}

	.flex.mobile {
		flex-direction: column;
		margin-bottom: 1em;
	}

	.grid-groupe.-news {
		gap: 1em 0;
		grid-template-columns: 1fr;
	}
	.-news > .grid.-two {
		width: 100%;
	}
	.shiryou {
		margin: 0 auto;
	}
	.grid-groupe {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.grid.-one {
		grid-area: 1/1/2/2;
	}
	.grid.-two,
	.-news > .grid.-two {
		grid-area: 2/1/3/2;
	}
	.grid.-three {
		grid-area: 3/1/4/2;
	}
	.grid.-four {
		grid-area: 4/1/5/2;
	}

	
}