﻿/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////// bootstrap外のcss設定 //////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ↓適応範囲について要見直し　*/
p, a, li, dt, td, th{
	/* 両端ぞろえ */
	text-align:justify;
	text-justify: inter-ideograph;
}

/* ブラウザで画面がぼやける不具合の処置 */
img{
	-webkit-backface-visibility: hidden;
}

/*//////////////////////////////////////////////////////////// scroll-hint.cssの書き換え ////////////////////////////////////////////////////////////*/

/* 縦に長い表に対応するためのアイコン掲載位置の変更 */
/* scroll-hint.jsについても調整済み(207行をコメント化→208行を挿入) */
.scroll-hint-icon{
	position: absolute;
	top: 1rem;
	left: calc(50% - 60px);
}


/*//////////////////////////////////////////////////////////// スマホ～タブレット時ドロワー ////////////////////////////////////////////////////////////*/

/* メインコンテンツ */
.wrapper {
	position: relative;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 2;
}

/* ドロワーオープン時にメインコンテンツを覆う部分 */
.wrapper-overlay {
	content: '';
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 3;
	background: rgba(0,0,0,0);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
}

/* サイドメニューを囲むwrapper */
.wrapper-drawer {
	display: none;
	z-index: 1;
}

/* ドロワーオープン時の変形 */
.is-drawer_active .wrapper, .is-drawer_active .wrapper-overlay {
	-webkit-transform: translate3d(-90%, 0, 0);
	-ms-transform: translate3d(-90%, 0, 0);
	transform: translate3d(-90%, 0, 0);
}

/* ドロワーオープン時のオバーレイ設定 */
.is-drawer_active .wrapper-overlay {
	visibility: visible;
	background: rgba(0,0,0,.7);
}

/*//////////////////////////////////////////////////////////// スマホ～タブレット時ドロワー内メニュー ////////////////////////////////////////////////////////////*/

/* サイドメニュー ※リストのスタイルは省略 */
.nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 90%;
	height: 100%;
}

/*サイドメニューリスト 1階層目/2階層目*/
.area-drawer-layer_01, .sec-drawer-layer_02{
	background-color: #455A64;
	position: absolute;
	top:0;
	right:0;
	width: 100%;
	overflow: scroll;
	padding-bottom: 10rem;
}

/*サイドメニューリスト 文字色とリンクの設定*/
.area-drawer-layer_01, .area-drawer-layer_01 a{
	color: #ECEFF1;
	text-decoration: none;
}

.area-drawer-layer_01{
	height: 100%;
}

.sec-drawer-layer_02{
	display: none;
	transition: .25s ease-out .25s;
	-ms-overflow-style:none;
}

.sec-drawer-layer_02::-webkit-scrollbar{
	width:0;
}

/*サイドメニューリスト内見出し*/
.ttl-drawer-01 , .ttl-drawer-02{
	font-weight: 100;
	text-align: center;
	background-color: #263238;
}

.ttl-drawer-01 {
	font-size: 1.5rem;
	line-height: 1;
	padding-top:1rem;
	padding-bottom:1rem;
}

.ttl-drawer-02 {
	line-height: 1.25;
	padding-top: .5rem;
	padding-bottom: .5rem;
	margin-top:2rem;
}

.txt_drawer-hr {
	margin-top: 2rem;
	border-top: 2px solid #263238;
	padding-top: .5rem;
}

/*行のボタン化*/
/*リスト構造の違いからサブメニューと共用化できず*/
.list-drawer > li:not(.ttl-drawer-01) > a{
	display:flex;
	justify-content: space-between;
	margin-left: 1rem;
	margin-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	/*border-bottom: 1px dotted #263238;*/
	align-items:baseline;
}

/*行のボタン化(hover) タイトル行は除く*/
.area-drawer-layer_01 > li:hover , .sec-drawer-layer_02 > li:hover{
	background-color: #37474F; /* #263238;*/
}
.area-drawer-layer_01 > li.ttl-drawer-01:hover , li.ttl-drawer-02:hover{
	background-color:  #263238;
}

/* スマホメニューの問合せフォームブロック用 */
.area-drawer_util{
	position: fixed;
	bottom:0;
	left:10%;
	right:calc(100vw - 100%);
	width:100%;
	height:9rem;
	padding: 1rem;
	background-color: #263238;
	z-index: 0;
}


/*他フォームと共用化 要考慮必要 */
.form-drawer_util_search{
	padding:0 1rem;
	line-height:1;
	font-size:1rem;
	width:100%; 
	height:3rem;
	border: 0;
}





/*//////////////////////////////////////////////////////////// PC幅以上時ヘッダーナビゲーション ////////////////////////////////////////////////////////////*/

/*ヘッダーナビゲーションのレイアウトとマージン*/
.header-util, .nav-glb{
	/* スマホ時の余白を作るため左右に7pxを指定。containerが.5remのためあわせて15pxの余白 */
	padding: 1rem 7px;
}

.list-header_util, .btn-header_search, .form-header_search, .list-glb {
	font-size: .875rem;
	line-height: 1;
}

.list-glb
{
	font-size: 1rem;
}

.list-header_util, .btn-header_search, .form-header_search
{
	height:2rem;
	padding-top: auto;
	padding-bottom: auto;
}

/* コーポレートロゴ*/
/*サイズ*/
@media (min-width: 768px) {
	.header_logo {
		height:2rem;
		/* width指定をしないとIEでくずれる */
		width:7.8125rem;
		vertical-align:bottom;
	}
}
@media (max-width: 767.98px) {
	.header_logo {
		height:1.5rem;
		/* width指定をしないとIEでくずれる */
		width:5.859375rem;
		vertical-align:bottom;
	}
}

/*スキン*/
.header_logo_blue {
	fill: #009FDE;
}
/*検索フォーム-文字色*/
.form-header_search::-webkit-input-placeholder {
	color: #455A64;/*#6c757d;*/
	opacity: 1;
}
.form-header_search::-moz-placeholder {
	color: #455A64;/*#6c757d;*/
	opacity: 1;
}
.form-header_search:-ms-input-placeholder {
	color: #455A64;/*#6c757d;*/
	opacity: 1;
}
.form-header_search::-ms-input-placeholder {
	color: #455A64;/*#6c757d;*/
	opacity: 1;
}
.form-header_search::placeholder {
	color: #455A64;/*#6c757d;*/
	opacity: 1;
}





/*//////////////////////////////////////////////////////////// PC幅以上時グローバルナビゲーション ////////////////////////////////////////////////////////////*/

/*グローバルナビ/メガメニューの横並びボタン左の区切り線 */
.link-glb +li, .link-mega_menu-util +li{
	border-left: 1px solid #CFD8DC;
}

/****************************************** メガメニュー ****************************************/

/*メガメニュー枠*/
.area-mega_menu {
	/* メガメニューの表示位置とアニメーション*/
	display: none;
	position: absolute;
	top: 2rem;
	width: 100%;
	left: 0;
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
	/*枠内の設定*/
	font-size: .875rem;
	line-height: 1.5;
	background-color: rgba(255,255,255,0.97);
	padding: 1.5rem 1.5rem;
}

/* メガメニュー 見出し*/
.link-mega_menu-top, .ttl-mega_menu {
	font-size:1rem;
	font-weight: 700;
}

/* 見出し(各TOPへのリンク)*/
/*.link-mega_menu-top {
	line-height: 1;
}*/
.link-mega_menu-top {
	font-size:1.25rem;
}

.ttl-mega_menu {
	color: #455964;
	border-left:.25rem solid #0091EA;
	padding:0 0 0 .5rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	background: transparent;
	font-weight:500;
	vertical-align:middle;
	line-height: 1.25;
}

.btn-mega_menu-open{
	position: relative;
}

.btn-mega_menu-open:hover {
	text-decoration:none;
}

/* グローバルナビ hover時の下線表示 */
.btn-mega_menu-open:after {
	position: absolute;
	top: 2.25rem;
	left:0;
	height:1px;
	width: 100%;
	content: "";
	background-color: #0091EA;
	z-index:100;
	transition: all .3s ease;
	transform: scaleX(0);
}

.btn-mega_menu-open:hover:after {
transform: scaleX(1);
}

/* メガメニュー内のリンクのリスト*/
.list-mega_menu>li{
	margin-bottom: .875rem;
}

.list-mega_menu>li:nth-last-of-type(1){
	margin-bottom: 0;
}

/* メガメニューの横並びリンクの行高さ-区切り線の高さにも依存*/
.list-mega_menu-util{
	line-height:1;
	padding-top: 1.5rem;
}

/* メガメニュー展開時の該当ナビゲーションメニュー表示 */
.is-active-mega_menu {
	color: #01579B;
	padding-bottom: .75rem;
	border-bottom: 1px solid #0091EA;
	z-index: 100;
}

.is-active-mega_menu:before {
	position: absolute;
	top: 1.35rem;
	left:50%;
	height: .5rem;
	width: 1rem;
	transform: translateX(-50%);
	content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNiA4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMDE1NzlCO30NCjwvc3R5bGU+PHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI4LDAgMCw4IDE2LDggIi8+PC9zdmc+');
	z-index:100;
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

/* 閉じるボタン */
/*.btn-mega_menu-close
{
	font-size:1.25rem;
	line-height: 1;

}
*/

/*//////////////////////////////////////////////////////////// メイン(コンテンツ領域) ////////////////////////////////////////////////////////////*/


@media (min-width: 992px) {
	.contents {padding-top:7rem;}
}

@media (max-width: 991.98px) {
	.contents {padding-top:4rem;}
}

.contents-main{
	/* スマホ時の余白を作るため左右に7pxを指定。containerが.5remのためあわせて15pxの余白 */
	padding-left:7px;
	padding-right:7px;
}

.contents-header {
	/* スマホ時の余白を作るため左右に7pxを指定。containerが.5remのためあわせて15pxの余白 */
	padding-left:7px;
	padding-right:7px;

}

/************************************ ボックスユーティリティ?(下部余白) ************************************/

@media screen and (min-width: 768px){
	.contents{padding-bottom:4rem;}
	.area-h2{padding-bottom:4rem;}
	.area-h3{padding-bottom:2.75rem;}
	.area-h4{padding-bottom:2rem;}
	.area-h5{padding-bottom:1.5rem;}
}

@media screen and (max-width: 767.98px) {
	.contents{padding-bottom:2.75rem;}
	.area-h2{padding-bottom:2.75rem;}
	.area-h3{padding-bottom:2rem;}
	.area-h4{padding-bottom:1.5rem;}
	.area-h5{padding-bottom:1.25rem;}
}





/*//////////////////////////////////////////////////////////// フッダーナビゲーション ////////////////////////////////////////////////////////////*/

.footer{
	color:#FFF;
	background-color:#263238;
	font-size: .875rem;
}
.footer a, .footer a:hover{
	color:#fff;
}
.footer-util{
	padding-top:1rem;
}

/*サイズ*/
@media (min-width: 992px) {
	.footer {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	.img-logo-youtube {
		height:2rem;
		/* width指定をしないとIEでくずれる */
		width:8.96235294117647rem;
		vertical-align:bottom;
	}
	.img-logo-facebook {
		height:2rem;
		/* width指定をしないとIEでくずれる */
		width:2rem;
		vertical-align:bottom;
	}
}
@media (max-width: 991.98px) {
	.footer {
		padding-top: 1.5rem;
		padding-bottom: 1rem;
	}
	.img-logo-youtube {
		height:1.5rem;
		/* width指定をしないとIEでくずれる */
		width:6.72176470588235rem;
		vertical-align:bottom;
	}
	.img-logo-facebook {
		height:1.5rem;
		/* width指定をしないとIEでくずれる */
		width:1.5rem;
		vertical-align:bottom;
	}
}
@media (max-width: 575.98px) {
	.footer {
		padding-bottom: 6rem;
	}
}




/*//////////////////////////////////////////////////////////////// 2カラム用 レイアウト サブメニュー ////////////////////////////////////////////////////////////////*/

/******** 2カラム用 サブメニュー ********/

.list-sub_menu-layer_01{
	border:1px solid #CFD8DC;
	padding: 1.5rem 1rem 2rem;
	background-color: #fff;
}
@media screen and (min-width: 768px) {
	.list-sub_menu-layer_01:nth-of-type(1){
		margin-top:1rem;
	}
}
@media screen and (max-width: 767.98px) {
	.list-sub_menu-layer_01:nth-of-type(1){
		margin-top:2.75rem;
	}
}

.list-sub_menu-layer_01:nth-of-type(n+2){
	margin-top:2rem;
}

.list-sub_menu-layer_01 > dt{
	color: #455964;
	font-size: 1.25rem;
	font-weight: 300;
	text-align: center;
	border-bottom: 1px solid #CFD8DC;
	padding-bottom: .875rem;
	margin-bottom: .5rem;
}

.list-sub_menu-layer_01 > dd {
	border-bottom: 1px dotted #CFD8DC;
	/* rebootの打消 */
	margin-bottom: 0;
}

.list-sub_menu-layer_01 > dd > a {
	display: flex;
	justify-content: space-between;
	align-items:baseline;
	padding-top: 1rem;
	padding-bottom: 1rem;
	height: 100%;
	width:100%;
	font-weight: 400;
}

.list-sub_menu-layer_02{
	padding: 1rem 0;
	background-color: #fff;
	/* rebootの打消 */
	margin-bottom: 0;
}

.list-sub_menu-layer_02 > dt{
	font-weight: 400;
}

.list-sub_menu-layer_02 > dd{
	margin-bottom: 0;
	padding-left:1.5rem;
	padding-top: 1rem;
	display: none;
}

.list-sub_menu-layer_02 > dd:nth-child(2) {
	padding-top: 1.5rem;
}

.list-sub_menu-layer_02 > dd:last-child {
	padding-bottom: 1rem;
}

.list-sub_menu-layer_02 > dd >a{
	display: block;
	height: 100%;
	width:100%;
	font-weight: 400;
	padding: 0
	
}

.list-sub_menu-layer_02 > dd > a > span:first-child {
	margin-right: .5rem;
}





/*/////////////////////////////////////////////////////////////////// ユーティリティ ///////////////////////////////////////////////////////////////////*/

/************************************* ユーティリティ レイアウトボックス用 *****************************************/

.area-full_width{
	/* スマホ時の余白を作るための左右に7pxを指定をなくす */
	margin-left:-7px;
	margin-right:-7px;
}

.area-dst_width{
	/* スマホ時の余白を作るための左右に7pxを再指定 */
	margin-left:7px;
	margin-right:7px;
}

/********************************************* ボタン共有化 *******************************************/

.btn-low,.btn-high{
	width:100%;
	border:0;
}

.btn-low > a {
	height: 100%;
	width:100%;
	line-height:1;
	display:block;
	text-align: center;
	padding: .5rem 0;
}

.btn-high > a{
	height: 100%;
	width:100%;
	line-height:1;
	display:block;
	text-align: center;
	padding: 1rem 0;
}

.btn-page_top {
position: fixed;
bottom: 2rem;
right: 5%;
z-index: 999;
display: block;
border-radius: 50%;
width: 4rem;
height: 4rem;
}


.btn-page_top > a {
padding: .3rem 0 1.2rem 0 ;
display: block;
border-radius: 50%;
width: 4rem;
height: 4rem;
text-align: center;
}

/************************************* ユーティリティ スキン/背景色・文字色 ************************************/

/* 背景色 */

.bg-light{
	background-color:#ECEFF1;
}

.bg-dark_grey{
	background-color:#455A64;
}

.bg-dark{
	background-color:#263238;
}

.bg-white{
	background-color:#FFF;
}

.bg-light-75{
	background-color:rgba(236,239,241,0.75);
}

.bg-light-50{
	background-color:rgba(236,239,241,0.5);
}

.bg-light-25{
	background-color:rgba(236,239,241,0.25);
}

.bg-dark_grey-75{
	background-color:rgba(69,90,100,0.75);
}

.bg-dark_grey-50{
	background-color:rgba(69,90,100,0.5);
}

.bg-dark_grey-25{
	background-color:rgba(69,90,100,0.25);
}

.bg-dark-75{
	background-color:rgba(38,50,56,0.75);
}

.bg-dark-50{
	background-color:rgba(38,50,56,0.5);
}

.bg-dark-25{
	background-color:rgba(38,50,56,0.25);
}

.bg-white-75{
	background-color:rgba(255,255,255,0.75);
}

.bg-white-50{
	background-color:rgba(255,255,255,0.5);
}

.bg-white-25{
	background-color:rgba(255,255,255,0.25);
}

/*
.bg-white-80{
	background-color:rgba(255,255,255,0.8);
}

.bg-white-60{
	background-color:rgba(255,255,255,0.6);
}

.bg-white-40{
	background-color:rgba(255,255,255,0.4);
}

.bg-white-20{
	background-color:rgba(255,255,255,0.2);
}
*/



.s-bg-purple_accent{
	background-color:#C51162;
}

.s-bg-enji_accent{
  background-color:#ae3846;
}

.s-bg-blue_accent{
	background-color:#0091EA;
}

.s-bg-green_accent{
	background-color:#00C853;/*#00BFA5;*/
}

.s-bg-yellow_accent{
	background-color:#ffd600;
}

.s-bg-orange_accent{
	background-color:#ea9800;
}



/* ユニバーサルデザイン的にこの色に白文字は微妙かも
.s-bg-red_accent{
	background-color:#D50000;
}
*/

/* 文字色 */

.s-color-light{
	color:#ECEFF1;
}


.s-color-dark_grey{
	color:#455A64;
}

.s-color-yellow_accent{
	color:#ffd600;
}

.s-color-blue_accent{
	color:#0091EA;
}

.s-color-purple_accent{
	color:#C51162;
}

.s-color-green_accent{
	color:#00C853;
}


/* リンクボタン用 */

.s-btn-blue{
	background-color: #0288D1;
}
.s-btn-blue > a {
	color: #ECEFF1;
}
.s-btn-blue > a:hover {
	text-decoration: none;
	background-color:#01579B;
}

.s-btn-purple{
	background-color: #C2185B;
}
.s-btn-purple > a {
	color: #ECEFF1;
}
.s-btn-purple > a:hover {
	text-decoration: none;
	background-color:#880E4F;
}







/* 共有化 ボタンアクティブ */
/* フィルタ切替え用ボタン */
.is-active-btn_blue > a {
	background-color: #0288D1;
	color: #ECEFF1; 
}







/******************************************* フィルタ機能 ****************************************/

.area-filter_ctl{
	margin-top: 1rem;
}

.sec-filter_menu{
	display: none;
}

.list-filter_key{
	/*display: none;*/
	border:1px solid #CFD8DC;
	padding-top:.5rem;
	padding-bottom:.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 0;
}

.list-filter_key li/*, .list-filter_key dt, .list-filter_key dd*/ {
	margin-top: .5rem;
	margin-bottom: .5rem;
}
@media (min-width: 992px) {
	.list-filter_key >li/*, .list-filter_key >dt,.list-filter_key >dd*/{line-height: 1; vertical-align: middle; border-right: 1px solid #CFD8DC; margin-right:1rem; padding-right:1rem;}
	.list-filter_key >li >a >span +span/*, .list-filter_key >dd >a >span +span, .list-filter_key >dd >a >span +span*/{display:none;}
}
@media (max-width: 991.98px) {
	.list-filter_key >li >a span{display:block;}
	.list-filter_key >li >a {display:flex;justify-content: space-between; align-items: baseline;}
	.list-filter_key >li{border-right:none; width:100%; padding-bottom:1rem; border-bottom:1px dotted #cfd8dc;}
	.list-filter_key{flex-direction:column; width:100%; padding-top:1.5rem; padding-bottom:2rem;}
}





/********************************************** 見出しデザイン **********************************************/

/* 見出しデザイン汎用 */
/* font-sizeについてはbootstrap_alter.cssにて */

.ttl-tpl-h2,.ttl-tpl-h3,.ttl-tpl-h4,.ttl-tpl-h5{
	color:#455a64;
}

.ttl-tpl-h6{
	color:#607D8B;/*#78909c;*/
	position: relative;
	padding-left:1.5rem;
	margin-left: -.25rem;
}

.ttl-tpl-h1, .ttl-tpl-h2{
	display: flex;
	flex-direction: column;
}

.ttl-tpl-h1{
	justify-content: center;
	font-weight: 700;
	/*背景画像に沈むのを防ぐ*/
	text-shadow: 1px 1px 1rem #455A64;/*#263238;*//*#0091EA;*/
}
@media (min-width: 768px) {
	.ttl-tpl-h1{
		/*  (h1*2+h3)*1.25+2rem(余白分)  */
		/*height: 14.5rem;*/
		
		/*  (h1*2+h3*2)*1.25+2rem(余白分)  */
		height: 17rem;
	}
}
@media (max-width: 767.98px) {
	.ttl-tpl-h1{
		
		/*  (h1*2+h3)*1.25+2rem(余白分)  */
		/*height: 12.625rem;*/
		
		/*  (h1*2+h3*3)*1.25+2rem(余白分)  */
		height: 14.5rem;
	}
}

.ttl-tpl-h2{
	text-align: center;
	font-weight: 300;
	border-bottom: 1px solid #455A64;
	padding-bottom: 1.5rem;
	color: #455A64;
}
@media (min-width: 768px) {
	.ttl-tpl-h2{
		margin-top: 4rem;
		margin-bottom: 2.75rem;
	}
}
@media (max-width: 767.98px) {
	.ttl-tpl-h2{
		margin-top: 2.75rem;
		margin-bottom: 2rem;
	}
}

.ttl-tpl-h3{
	padding-left: .75rem;
	line-height: 1.25;
	position: relative;
}

.ttl-tpl-h3:before {
	content: "";
	position: absolute;
	top:.125em;
	left:0;
	background-color: #0091EA;
	width: .25rem;
	height:calc(100% - .25em);
}
@media screen and (min-width: 768px) {
	.ttl-tpl-h3{
		margin-top: 2.75rem;
		margin-bottom: 2rem;
	}
}
@media screen and (max-width: 767.98px) {
	.ttl-tpl-h3{
		margin-top: 2rem;
		margin-bottom: 1.5rem;
	}
}

.ttl-tpl-h4{
	line-height: 1.5;
}
@media screen and (min-width: 768px) {
	.ttl-tpl-h4{
		margin-top: 2rem;
		margin-bottom: 1.5rem;
	}
}
@media screen and (max-width: 767.98px) {
	.ttl-tpl-h4{
		margin-top: 1.5rem;
		margin-bottom: 1.25rem;
	}
}
.ttl-tpl-h5,.ttl-tpl-h6{
	line-height: 1.5;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	.ttl-tpl-h5,.ttl-tpl-h6{
		margin-top: 1.5rem;
		margin-bottom: 1rem;
	}
}
@media screen and (max-width: 767.98px) {
	.ttl-tpl-h5,.ttl-tpl-h6{
		margin-top: 1.25rem;
		margin-bottom: 1rem;
	}
}
.ttl-tpl-h6:before{
	content: "";
	position: absolute;
	background: #0091EA;
	top: .5rem;
	left: .5rem;
	height: .5rem;
	width: .5rem;
}





/*************************************************** 表(table)デザイン **************************************************/

/* tableデザイン 汎用 */
table{
	width:100%;
  /* 2020/10/09 modified rexius corporation */
  width:auto !important;
}

thead{
	background-color: #ECEFF1;
	border-bottom: 1px solid #CFD8DC;
}

th, td{
	/*2018/7/02 変更*/
	padding: 1rem;/*1rem .5rem;*/
  /* 2020/10/09 modified rexius corporation */
  padding:10px 20px;
  font-size:14px;
}

th{
	color:#455A64;
	/*2018/5/20 追記*/
	background-color: #ECEFF1;
	border-bottom: 1px dotted #CFD8DC;
	/*2018/7/02 追記*/
	white-space: nowrap;
  /* 2020/10/09 modified rexius corporation */
  border-bottom:1px solid #aaa;
  width:initial !important;
  width:auto !important;
}

td{
	border-bottom: 1px dotted #CFD8DC;
  /* 2020/10/09 modified rexius corporation */
  border-bottom:1px solid #aaa;
  width:initial !important;
  width:auto !important;
}


/********************* スマホ時表 可変 *********************/
/*tr毎で別表として表示するクラス*/
/* 表の列数と項目名が違うため、項目の個別設定はHTMLのheaderに記載 */
@media screen and (max-width: 767.98px){
	.table-var-md {
		width: 100%;
		border:none;
		padding: .5rem;
	}
	.table-var-md thead {
		display: none;
		text-align: center;
		width:100%;
	}
	.table-var-md th{
		width:100%;
	}
	.table-var-md tr {
		display: block;
	}
	.table-var-md td {
		border-bottom: 1px dotted #cfd8dc;
		display: block;
		padding-left: .5rem;
	}
	.table-var-md td:before {
		display: block;
	}
}


/* 表をスクロール表示させるクラス */
@media screen and (max-width: 767.98px){
	.box-scroll-md {
		overflow-x: auto;
		white-space: nowrap;
		display:block;
		width:auto;
	}
/*tableにスクロールバーを追加*/
	.box-scroll-md::-webkit-scrollbar {
		height: .5rem;
	}
/*tableにスクロールバーを追加*/
	.box-scroll-md::-webkit-scrollbar-track {
		background: #ECEFF1;
	}
/*tableにスクロールバーを追加*/
	.box-scroll-md::-webkit-scrollbar-thumb {
		background: #CFD8DC;
	}
}




/************************************************** 囲み/区切り用ユーティリティ **************************************************/
/*主にh3/h4以下の使用を想定*/

/*囲み*/
.box-border-narrow{
	border-style: solid;
	border-width: 1px;
	border-color: #CFD8DC;
	/*padding:1rem 1rem;*/  /*1.5rem;*/  /*スマホ幅時要確認*/
	width: 100%;
}

.box-border-bold{
	border-style: solid;
	border-width: .5rem;
	border-color: #CFD8DC;
	/*padding:.5rem 1rem;*/ /*スマホ幅時要確認*/
}

.box-border-dotted{
	border-style: dotted;
	border-width: 1px;
	border-color: #CFD8DC;
	/*padding:1rem 1.5rem;*/ /*スマホ幅時要確認*/
}




.box-quotation {
	position: relative;
	padding: .5rem 1rem;/*.25rem .5rem;*//*.375rem .5rem*/;
}
.box-quotation:before,.box-quotation:after{ 
	content:'';
	width: .75rem;
	height: .75rem;
	position: absolute;
	display: inline-block;
}
.box-quotation:before{
	border-left: solid 1px #CFD8DC;
	border-top: solid 1px #CFD8DC;
	top:0;
	left: 0;
}
.box-quotation:after{
	border-right: solid 1px #CFD8DC;
	border-bottom: solid 1px #CFD8DC;
	bottom:0;
	right: 0;
}





/*区切り*/
.sec-border_nallow{
	border-style:solid;
	border-width: 1px 0 0 0;
	border-color: #CFD8DC;
}

.sec-border_bold{
	border-style:solid;
	border-width: .25rem 0 0 0;
	border-color: #CFD8DC;
}

.sec-border_dotted{
	border-style:dotted;
	border-width: 1px 0 0 0;
	border-color: #CFD8DC;
}

.sec-border_bold_dotted{
	border-style:dotted;
	border-width: .25rem 0 0 0;
	border-color: #CFD8DC;
}

/************************************************** リンクリスト用ユーティリティ **************************************************/
/*主に各topページやニュース一覧などの使用を想定*/

/************ 各topページ用 バナーリンクリスト ************/
/* 横並びでタイル状に表示させるクラス 各liに"col-×-×"を合わせて設定し使用する */
.list-tile_layout > li {
	margin-bottom: 1rem;
}

.list-tile_layout > li{
	position: relative;
}


.list-tile_layout > li > a img {
	width:100%;
}

.is-hover-banner_link:hover {
	opacity: .65;
	transition: .5s ease;
	-webkit-transform: scale(1.05);
	transform: scale(1.03);
}

/* 横並びでタイル状に表示させた要素をカード化する */
/* flexboxの孫要素まで高さをそろえるために必要なクラス */
/* 内容はbootstrap-grid.cssの".d-flex"".justify-content-between"".flex-column"を組み合わせたもの */
/* 内容はbootstrap.cssの".card"から装飾に関する部分を取り除いたものに近い */

.sec-card{
	position: relative;
	/*
	display: -webkit-box;
	display: -ms-flexbox;
	*/
	display: flex;
	/*
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	*/
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;

	width: 100%;

}

.box-card-img_tmb{
	flex-shrink:0;
}



/* テスト用 　不要になる予定 */
.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
/*  padding: 1.25rem;*/
}


/************ 各topページ用 テキストリンクリスト ************/
/* リンクの箇条書きを表示するクラス*/
.list-text_link >li{
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px dotted #CFD8DC;
}

.list-text_link >li:last-child{
	padding-bottom: 1rem;/*1rem;*/
	margin-bottom: 0;
	border-bottom: none;
}



/************ 各topページ用 テキストリンクリスト/バナーリンクリスト最下部一覧リンク ************/

.link-list_end{
	padding-top: 1rem;
	margin-bottom: 0;
	text-align: right;
	border-top: 1px dotted #455A64;
}



/************ [金子作成ユーティリティ] テキストリンクリスト用アイコン ************/
.ico-tag,.ico-tag-small{
	display:inline-block;
	text-align: center;
	line-height: 1;
	color:#ECEFF1;
}

.ico-tag{
	padding: .5rem 1.5rem;
}

.ico-tag-small{
	font-size: .75rem;
	padding: .25rem .5rem;
}

/************ 画面初期表示時のアニメーション ************/
.is-load{
	animation: fadeIn 3s ease 0s 1 normal;
	-webkit-animation: fadeIn 3s ease 0s 1 normal;
}

/************ ユーティリティ アニメーション共用設定 ************/

	@keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}

	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}


















/**************************** 作成時CHECK用 **********************************/

.check{
	color:red;
	}

.check_border_1{
	border: 1px solid red;
}

.check_border_2{
	border: 1px solid blue;
}

.check_border_3{
	border: 1px solid green;
}

.check_border_4{
	border: 1px solid orange;
}

.check_bgcolor_1{
	background-color: aquamarine;
}

.check_bgcolor_2{
	background-color:burlywood; 
}

.check_bgcolor_3{
	background-color: cadetblue;
}

.check_bgcolor_4{
	background-color: darkolivegreen;
}



ul.sidelist{
  padding-left:0;
  list-style:none;
}

ul.sidelist > li{
  border-bottom: 1px dotted #CFD8DC;
  margin-bottom: 15px;
  position:relative;
}

ul.sidelist > li:last-child{
  border-bottom:0;
}

ul.sidelist > li > button{
  position:absolute;
  right:0;
  top: 8px;
  
}

ul.sidelist > li > button:hover{
  background-color: #0288D1;
  color: #ECEFF1;
}



ul.sidelist > li > a{
  display:inline-block;
  padding-top: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 0rem;
  padding-left:3px;
  width:100%;
  position:relative;
}

ul.sidelist > li > a:after {
/*
  font:normal normal normal 20px/1 FontAwesome;
  content: "\f101";
  position:absolute;
  right:2px;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
*/
}



ul.sidelist > li.current-cat > a{
  color:#FFF;
  background-color:#0288D1;
}

ul.sidelist > li > ul{
  padding-left:10px;
  list-style:none;
}

ul.sidelist > li > ul > li{
  border-bottom: 1px dotted #CFD8DC;
  margin-bottom: 0;
}

ul.sidelist > li > ul > li > a{
  display:inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left:10px;
  padding-left:3px;
  width:100%;
  font-size:90%;
}


ul.sidelist > li > ul > li.current-cat > a{
  color:#FFF;
  background-color:#0288D1;
}


/**************************** Googleサイト内検索用 **********************************/
#cse-search-box .form-control{
  width:initial !important;
  width:auto !important;
  width:1% !important;
  height:initial !important;
  height:auto !important;
}

#cse-search-box .btn-header_search{
  margin-left:5px;
}

/**************************** 店舗案内用 **********************************/
.parent-pageid-18 #map{
  height:30rem;
  border:1px solid #CFD8DC;
  max-width:100%;
}


/**************************** フッターお問い合わせ **********************************/
div.contactbox {
  margin:40px auto 40px !important;
  padding:20px 0px !important;
  background-color:#edf5fa;
  text-align:center;
  box-sizing:border-box;
}

div.contactbox img{
  max-width:100%;
}

div.contactbox a:hover img{
  opacity:0.8;
  transition:.3s;
}

div.contactbox .col-md-6{
  padding:0px 20px !important;
  box-sizing:border-box;
}



.area-filter_list > div{
  margin-top:-100px;
  padding-top:100px;
}


.fsns1 img{
  height:40px;
}
.fsns2 img{
  height:50px;
  margin-left:12px;
}
.fsns3 img{
  height:65px;
  margin-left:8px;
}
.fsns4 img{
  margin-left:15px;
  height:50px;
}
