@charset "utf-8";
/*
Theme Name:北海道ホテル旅館生活衛生同業組合
Theme URI: https://hokkaido-yado.net/
Author: tocci
Version: 1.0
*/

/*リセットCSS（sanitize.css）の読み込み*/
@import url("https://unpkg.com/sanitize.css");

/*slick.cssの読み込み*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*Font Awesomeの読み込み*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--primary-color: #82709f;
	--secondary-color: #3B3641;
	--primary-inverse-color: #fff;

}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
/*html,body {height: 100%;}*/

body {
	margin: 0;padding:0;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: none;
	background: #fff;
	color: #444;
	line-height: 2;
	border-top: 5px solid var(--primary-color);
	animation: opa1 0.2s 0.3s both;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #444;
	transition: 0.3s;
}

a:hover {
	filter: brightness(1.1);
}


.lightbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/*コンテナ
---------------------------------------------------------------------------*/
#container {
	/*
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	*/
	max-width: 1800px;
	margin: 0 auto;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	padding: 0 3% 30px;	/*上、左右、下への余白。下の余白は、ここのbackgroundの画像読み込み分に、適当な余白をプラスして指定しています。*/
	/*background: url(../images/footer_bg.jpg) repeat-x center bottom / auto 130px;	*//*下部の背景画像の読み込み。最後の50pxというのが画像の高さの指定部分です。*/
}


/*header
---------------------------------------------------------------------------*/

header {
	padding: 10px 0;
	position: relative;
	min-height: 80px;
	background-color: #e8defa;
}

	@media screen and (min-width:900px) {

	header {
		display: flex;
		align-items: center;
		background-color: #e8defa;
	}
	
	}

#logo {
	margin: 0;
	margin-bottom: 10px;
}

	@media screen and (max-width:650px) {
	
	#logo {
		width: calc(100% - 90px);
	}
	
}


	@media screen and (min-width:650px) {
	
	#logo {
		margin-bottom: 0;
		margin-right: 3%;
		width: 500px;	/*幅*/
	}
}


/*ヘッダーの中央に配置するブロック*/
#header-center {
	display: none;
	text-align: center;
}

	@media screen and (min-width:900px) {
	
	/*ヘッダーの中央に配置するブロック*/
	#header-center {
		display: flex;
		align-items: center;
		width: calc(100% - 300px);
	}
	#header-center * {
		margin: 3px;
	}
	
	}


/*ヘッダー右側
---------------------------------------------------------------------------*/
#header_info {
	margin: 0;
	padding: 0 1em 0 0;
	position: absolute;
	right: 0px;
	bottom: 10px;
	font-size: 0.85rem;
	line-height: 1.35em;
	text-align: right;
}

#header_info i {
	margin-right: 0.8em;
}



/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ドロップダウンの親メニューのカーソル表示を変更*/
a.ddmenu {cursor: default;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";
	content: "\f078";
	font-weight: bold;
	margin-right: 1em;
	font-size: 0.9rem;
}


/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
	padding: 0.5rem 0;	/*上下、左右へのメニュー内の余白*/
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;
	justify-content: space-between;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li {
	flex: 1;
	position: relative;
	text-align: center;
}
.large-screen #menubar li a {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/*「大」の文字の選択時のメニューブロック*/
/*
.f-large #menubar nav ul {
	flex-wrap: wrap;
}
*/
/*「大」の文字の選択時のメニュー１個あたり*/
/*
.f-large #menubar nav > ul > li {
	flex: auto;
	width: 33%;
}
*/

/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 100;
	width: 100%;
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 101;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 90px;
	background: var(--primary-color);
	animation: animation1 0.2s both;
}

/*メニュー１個あたりの設定*/
.small-screen nav > ul:not(.submenu) > li {
	border: 1px solid #ccc;
	margin: 1rem;
	border-radius: 5px;
	padding: 0 2rem;
}

.small-screen #menubar, .small-screen #menubar a {
	color: #fff;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	animation: opa1 0.2s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 22px;
	top: 22px;
	padding: 16px 14px;
	width: 46px;
	height: 46px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: rgba(0,0,0,0.5);
	border-radius:5px;
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	border-top: 1.5px solid #000;
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background: #d5c1f5;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;
	width: 20px;
}

#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);
}

#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);
}

#menubar_hdr.ham span:nth-of-type(2){
	display: none;
}


/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	margin: 2rem 0;
}

	@media screen and (min-width:900px) {

	main.c2 {
		display: flex;
		justify-content: space-between;
	}
	
	/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
	main.c2 .main {
		width: calc(100% - 260px);
		order: 1;
	}
	
	/*2カラムの中にある.sub要素*/
	main.c2 .sub {
		width: 230px;
	}

	}


/*mainブロック内のh2タグ*/
main h2 {
	margin: 0 0 1rem;
	padding-left: 1rem;
	letter-spacing: 0.1em;
	background: var(--secondary-color);
	color: var(--primary-inverse-color);
	font-size: 1.3em;
}

main h2 i {
	padding-right: 10px;
}

/*h3タグ*/
main h3 {
	margin: 0 0 1rem;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #ccc;
}

/*h3の左側のアクセントライン*/
main h3::before {
	content: "";
	border-left: 3px solid var(--primary-color);
	padding-right: calc(1rem - 3px);
}

/*h4タグ*/
main h4 {
	margin: 0 1rem 1rem;
}

/*pタグ*/
main p {
	margin: 0 1rem 2rem;
}

/*微調整*/
main p + p {
	margin-top: -1rem;
}


/*subブロック設定
---------------------------------------------------------------------------*/
.sub h3::before {border: none;padding: 0;}
/*ブロック内のh3タグ*/
.sub h3 {
	margin: 0;border: none;
	font-weight: normal;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	text-align: center;
	padding: 0.5em;
}
.sub h3 a {color: inherit;}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;
}

/*メニュー１個あたり*/
.submenu li {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.submenu a {
	display: block;text-decoration: none;
	background: #fff;
	padding: 0.2rem 1rem;
}

/*アイコン（Font Awesome）*/
.submenu a::before {
	transition: 0.3s;
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	color: #ABABAB;
	padding-right: 0.8em;
	font-weight: bold;
}

/*マウスオン時のアイコン設定*/
.submenu a:hover::before {
	color: var(--primary-color);
}


/*box1設定（このテンプレートでは、2カラム時のsubブロックでのみ使用しています）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1 {
	background: rgba(0,0,0,0.05);
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 1rem;
}

.sub .box1 .submenu {
	margin-bottom: 0;
}



/*フッターのコンテンツ（役場住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
#footer-frame {
	background: #444;
	color: #fff;
	padding: 10px 3% 10px;
}

/*ブロック全体*/
#footer-contents {
	background: #444;
	color: #fff;
	padding: 10px 3% 20px;
}
#footer-contents a {
	color: inherit;
}

/*左側のブロック*/
#footer-contents .left {
	margin-bottom: 50px;
}

	@media screen and (min-width:900px) {
	
	#footer-contents {
		display: flex;
		justify-content: space-between;
	}
	
	/*左側のブロック*/
	#footer-contents .left {
		margin-bottom: 0;
		width: 50%;
	}
	#footer-contents .right {
		width: 50%;
		padding-left: 3%;
	}

	}


/*テーブル
---------------------------------------------------------------------------*/
.week caption {
	border: 1px solid #ccc;
	border-bottom: none;
	background: #333;
	padding: 0.5rem 1rem;
}

.week {
	width: 100%;
	table-layout: fixed;
	text-align: center;
}
.week, .week td, .week th {
	border: 1px solid #ccc;
}


/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
/*
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
*/

/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	background: #333;
	color: #fff;
	font-size: 0.8em;
	padding: 20px 3%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	color: inherit;
}

/*ulタグ（メニューの１列あたり）*/
#footermenu ul {
	margin: 0;list-style: none;
	padding: 0 0.3rem;
	flex: 1;
}

/*メニューの見出し(title)*/
#footermenu .title {
	font-size: 1.1em;
	color: #ccc;
	padding-bottom: 5px;
}


/*フッター設定
---------------------------------------------------------------------------*/
footer {
	font-size: 0.8rem;
	background: #000;
	color: #fff;
	text-align: center;
	padding: 20px;
}

footer a {color: inherit;text-decoration: none;}



/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
.new {
	margin: 0;
	padding: 0 1rem;
}

.new dt,
.new dd {
	padding: 5px 0;
	border-bottom: 1px dotted #999;
}

.new dt span {
	display: none;
}

	@media screen and (min-width:900px) {

	.new {
		display: flex;
		flex-wrap: wrap;
	}

	.new dt {
		width: 8em;
		display: flex;
		justify-content: space-between;
	}
	
	.new dt span {
		display: inline-block;
		width: 7em;
		background: #999;
		color: #fff;
		font-size: 0.8em;
		text-align: center;
		margin-right: 1em;
		align-self: flex-start;
		line-height: 1.8;
		position: relative;top: 0.4em;
		border-radius: 2px;
	}

	.new dd {
		width: calc(100% - 8em);
	}

	}


/*.listブロック共通
---------------------------------------------------------------------------*/
.list {
	position: relative;
}

.list .list-icon {
	font-size: 0.6rem;
	background: #ff0000;
	color: #fff;
	width: 50px;
	line-height: 50px;
	border-radius: 50%;
	text-align: center;
	position: absolute;
	left: -10px;
	top: -10px;
}

.list figure {
	margin-bottom: 2rem;
}


/*２列タイプのボックス
---------------------------------------------------------------------------*/
.list-grid2 .list {
	margin-bottom: 30px;
	padding: 20px;
	background: #fff;
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
}

.list-grid3  {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}

.list-grid3 > .list3 {
	margin: 5px 0px 0px;
	padding: 0px;
	background: #fff;
/*	border: 1px solid #eee;*/
	width: calc(50% - 5px);
}

.list-grid3 > .list3:first-child {
	margin-right: 10px;
}

.list-grid3 > .list4 {
/*	margin: 10px 10px 0px;*/
	margin: 0px;
	padding: 0px;
	background: #fff;
/*	border: 1px solid #eee;*/
	width: calc(100% - 0px);
}

.list-grid2 .list h4 {
	margin: 0;
	padding: 0.6rem;
	margin-bottom: 0.8rem !important;
	font-size: 1.15em;
}

.list-grid2 .list h4 img {
	padding-right: 12px;
}

.list-grid2 .list h4.s-color {
/*	background-color: #ddd;*/
/*	background-color: #c6baae;*/
/*	background-color: #e7a6d5;*/
/*	color: #fff;*/
	border-bottom: 4px solid #08a52d;
	position: relative;
}

.list-grid2 .list h4.s-color::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 3em;
  height: 4px;
  background: #31d257;
}

/*
.list-grid2 .list h4.s-color a {
	color: #fff;
}
*/

.list-grid2 .list h5 {
/*	background-color: #eee;*/
/*	background-color: #dfd3c7;*/
/*	background-color: #efd0e6;*/
	background-color: #55ce70;
/*	border-bottom: 2.5px solid #08a52d;*/
	margin: 0.7em 0;
	padding: 5px 10px;
	font-size: 1em;
/*	color: #fff;*/
}

.list-grid2 .list .sub_title {
/*	background-color: #eee;*/
/*	background-color: #dfd3c7;*/
/*	background-color: #efd0e6;*/
	background-color: #55ce70;
/*	border-bottom: 2.5px solid #08a52d;*/
	margin: 0;
	padding: 5px 10px;
	font-size: 1em;
	font-weight: bold;
/*	color: #fff;*/
}

p.sub_text, div.sub_text {
	margin: 0;
	padding:5px;
}


/*２列タイプ　振興局リスト
---------------------------------------------------------------------------*/
.i-list-flex {
	display: flex;
}

.list-grid2 .list .i-list-name {
	margin-bottom: 10px;
	width: calc(50% - 0px);

}

.list-grid2 .list .i-list-name div {
	margin: 5px;
}

.list-grid2 .list .i-list-name div a {
	padding: 8px 10px;
	border: 1px solid #eee;
	border-radius: 4px;
  display: block;
	background-image: linear-gradient(#4D98BF, #4D98BF);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 0 100%;
	transition: color 0.4s, background-size 0.4s;
/*
	color: transparent;
	background: linear-gradient(to right, rgb(49, 170, 226) 50%, #000 50%) 100%;
  background-clip: text;
  background-size: 200% 100%;
  transition: background-position 0.3s;
*/
}

.list-grid2 .list .i-list-name div a:hover{
	color: #FFF;
	background-position: bottom left;
	background-size: 100% 100%;
  transition: .2s;
/*
  background-position: 0 100%;
  transition: .3s;
 */
}


/*３列タイプのボックス
---------------------------------------------------------------------------*/
.list-grid .list {
	margin-bottom: 30px;
	padding: 20px;
	background: #fff;
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
}

.list-grid .list dl {
	height: 10em;
	overflow: auto;
}

.list-grid .list dl dt {
	color: #333;
	font-weight: bold;
}

.list-grid .list dl dd {
	margin-bottom: 0.5em;
}

.list-grid .list h4 {
	margin: 0;
	padding: 1rem;
}

.list-grid .list h4 i {
	transform: scale(1.5);
	margin-right: 1rem;
}

.bg-color0, .bg-color1, .bg-color2, .bg-color3, .bg-color4, .bg-color5, .bg-color6, .bg-color7 {
	color: #fff;	/*文字色*/
	margin-bottom: 1rem !important;
}
.bg-color0 a, .bg-color1 a, .bg-color2 a, .bg-color3 a, .bg-color4 a, .bg-color5 a, .bg-color6 a, .bg-color7 a {
	display: block;
	color: inherit;
}

.bg-color0 { background: var(--primary-color); }
.bg-color1 { background: #2c2d68; }
.bg-color2 { background: #4b4c9b; }
.bg-color3 { background: #7788c0; }
.bg-color4 { background: #a5a6d9; }
.bg-color5 { background: #d1c7e1; }

/*
.bg-color6 { background: #6F839F; }
.bg-color7 { background: #6F969F; }
*/

.list-grid .list p {
	margin: 0;
	padding: 0px 1em;
}

.list-grid .list figure {
	margin-bottom: 1rem;
}

	.list_map {
		display: none;
	}


	@media screen and (min-width:900px) {

	.list-grid, .list-grid2,  .list-grid3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.list-grid .list {
		width: 32%;
		margin-right: 2%;
	}
	
	.list-grid2 .list, .list-grid3 .list {
		width: 48%;
		margin-right: 2%;
	}

	.list-grid.c1 .list {
		width: 100%;
		margin-right: 0;
	}

	.list-grid.c1 .list dl {
		height: auto;
	}

	.list-grid .list:nth-of-type(3n) {
		margin-right: 0;
	}

	.list-grid2 .list:nth-of-type(2n) {
		margin-right: 0 !important;
		margin-left: 2%;
	}

	.list-grid .list .text, .list-grid2 .list .text {
		flex: 1;
	}

	.list_map {
		display: block;
	}

	}


/*btnの設定（「btn1」と「btn2」）
---------------------------------------------------------------------------*/
/*ボタン共通*/
a.btn1, a.btn2 {
	display: inline-block;text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 3px;
	padding: 0.3rem 2rem;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
	transition: 0.3s;
}

a.btn1 i, a.btn2 i {
	margin-left: 20px;
}

a.btn1 {
	background: #7788c0;
	color: #fff;
	border: 1px solid #2c2d68;
}

a.btn1 i {
	color: #fff;
}

a.btn2 {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}


/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
.mainimg {
	margin-bottom: 30px;
}

ul.slick-dots {
	margin:0;padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: -30px;
}

ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

ul.slick-dots li button {
	border: none;padding: 0;
	display: block;
	text-indent: -9999px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	cursor: pointer;
	background: #ccc;
}

ul.slick-dots li.slick-active button {
	background: var(--primary-color);
}


/*トップページの「キャンペーン中」ボタン
---------------------------------------------------------------------------*/
#message a {
	text-decoration: none;display: block;
	writing-mode: vertical-rl;
	text-orientation: upright;
	background: #239a10;
	color: #fff;
	position: fixed;
	z-index: 100;
	right: 0px;
	top: 170px;
	padding: 20px 15px;
	border-radius: 10px 0px 0px 10px;
	letter-spacing: 0.1rem;
}

#message i {
	transform: scale(1.3);
	margin-bottom: 10px;
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
.ta1 caption {
	font-weight: bold;
	padding: 10px 5px;
	background: #555;
	color: #fff;
	margin-bottom: 15px;
	border-radius: 5px;
}

.ta1 {
	border-top: 1px solid #999;
	width: 100%;
	margin: 0 auto 2rem;
}

.ta1 tr {
	border-bottom: 1px solid #999;
}

.ta1 th, .ta1 td {
	padding: 10px 5px;
	word-break: break-all;
}

.ta1 th {
	width: 30%;
	text-align: left;
	background: #eee;
}

	@media screen and (min-width:900px) {

		.ta1 caption {
			padding: 5px 15px;
		}

		.ta1 th, .ta1 td {
			padding: 20px 15px;
		}

		.ta1 th {
			width: 20%;
		}

	}


/*PAGE TO TOP
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5em;
	background: rgba(0,0,0,0.2);
	width: 60px;
	line-height: 60px;
	border-radius: 50%;
}


/*etc
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.color-theme, .color-theme a {color: var(--primary-color) !important;}
.c {text-align: center !important;}
.r {text-align: right !important; margin-top: 10px; }
.ws {width: 98%;display: block;}
.wl {width: 98%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 3em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.img {margin: 0 0 1rem;}
.block {display: block !important;}

	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}



.top_str p {
	text-indent: 1em;
}

#footer-frame h2 {
	margin: 0 0 1rem;
	padding-left: 1rem;
	letter-spacing: 0.1em;
}


/* トップページ */

.h2_awesome {
	border-radius: 5px;
}

main h2.h2_special {
	margin: 0 0 1rem;
	padding-left: 1rem;
	letter-spacing: 0.1em;
	font-size: 1.3em;
	background: #fff;
	color: #000;
	border-radius: 5px;
}

.top_str img {
	float: right;
	width: 300px;
	height: auto;
	margin: 0px 0px 1em 1em;
	border-radius: 3px;
}

/* フッター　バナー */

	.banner-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		margin: auto;
	}

	.banner-grid .banner_area {
		width: 20%;
		margin-bottom: 1em;
		padding: 0 5px;
	}

@media screen and (max-width:900px) {

	.banner-grid .banner_area {
		width: 33.333%;
	}
}

@media screen and (max-width:600px) {

	.banner-grid .banner_area {
		width: 50%;
	}
}

.h2_awesome i, .footer_info i {
	margin-right: 0.8em;
}

@media screen and (max-width:480px) {

	.banner-grid .banner_area {
		width: 100%;
		margin-right: 0;
	}

}

@media screen and (max-width:600px) {
.footer_menu_area {
	display: none;
}

.top_str img {
	display: none;
}

}

/* フッター　Imformation */

.footer_info {
	font-size: 16px;
	color: #fff;
}
.footer_info span {
	font-weight: bold;
}




/* タグ内１行目のみ字下げ */
.jisage {
   text-indent:1em;
}

/* タグ内１行目以外字下げ */
.jisage2 {
   padding-left: 1em;
   text-indent: -1em;
}

/*
.about01 {
	background: url(./images/about/image01.jpg) no-repeat center center / cover !important;
}
*/

/* 加盟施設一覧テーブル */

.i-list {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    background: #fff;
    border: none;
    margin-bottom: 2.2rem;
}

.i-list caption {
	text-align:left;
	margin-bottom: 0.3rem;
  padding: 0.25em 0.5em;
  color: #494949;
  background: transparent;
  border-left: solid 5px #6e6cb5;
  margin-left: 5px;
  font-weight: 700;
}

.i-list th, .i-list td {
    font-size: 14px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: left;
}

.i-list th {
    font-weight: 700;
}

.i-list thead th {
    color: #fff;
    background: #6e6cb5;
    text-align: center;
}

.i-list thead th:nth-of-type(2) {
  width: 7em;
}

.i-list thead th:nth-of-type(4), .i-list thead th:last-child {
  width: 10em;
}

.i-list i {
	padding-left: 5px;
}

@media screen and (max-width: 900px) {
	.listmap {
		display: none;
	}
}


@media screen and (max-width: 768px) {

  .i-list thead {
    display:none;
  }

  .i-list tr {
    background-color: unset;
  }

  .i-list th, .ex_i-list td {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
  }

  .i-list tbody th, .i-list tbody th a {
    background: #ccc;
    color:#333;
    text-align: center;
    font-size: 1.1rem;
  }

  .i-list tbody tr td {
    display: flex;
    gap: 5px;
  }

  .i-list tbody tr td::before{
    content: attr(data-label);
    width: fit-content;
    padding: 0.2em 1em;
    border-radius: 5px;
    font-size: 12px;
    background: #eee;
  }

  .i-list tbody td::before{
    content: attr(data-label);
    display: inline-block;
    margin-right: 10px;
  }
}




/* 加盟施設一覧テーブル2 */

.table_wrap {
    overflow-x : auto; /* 横スクロール */
    margin-bottom: 2.2rem;
}

.i-list2 {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    min-width: 768px;
    background: #fff;
    border: none;
}

.i-list2 caption {
	text-align:left;
	margin-bottom: 0.3rem;
  padding: 0.25em 0.5em;
  color: #494949;
  background: transparent;
  border-left: solid 5px #6e6cb5;
  margin-left: 5px;
  font-weight: 700;
}

.i-list2 th, .i-list2 td {
    font-size: 14px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: left;
}

.i-list2 th {
    font-weight: 700;
}

.i-list2 thead th {
    color: #fff;
    background: #6e6cb5;
    text-align: center;
}

.i-list2 thead th:nth-of-type(2) {
  width: 7em;
}

.i-list2 thead th:nth-of-type(4), .i-list2 thead th:last-child {
  width: 10em;
}

.i-list2 i {
	padding-left: 5px;
}

@media screen and (max-width: 600px) {

	.table_wrap {
	    position: relative;
	}

	/* 幅が768px以下になったら矢印を表示 */

	.table_wrap::before {
	    content: 'スクロール';
	    font-size: 12px;
	    color: #ccc;
	    position: absolute;
	    bottom: 10px;
	    left: 30px;
	}

	.table_arrow {
	    display: block;
	    position: relative;
	}
	.table_arrow::before {
	    content: '';
	    position: absolute;
	    top:20px;
	    left:5px;
	    width: 100px;
	    height: 1px;
	    background:#ccc;
	}
	.table_arrow::after {
	    content: '';
	    position: absolute;
	    top:15px;
	    left:90px;
	    width: 15px;
	    height:1px;
	    background:#ccc;
	    transform: rotate(35deg);
	}

}

/* 投稿データ用 */

.alignleft { margin: 7px 24px 7px 0; float: left; }
.alignright { margin: 7px 0px 7px 24px; float: right; }
.aligncenter { margin: 7px auto; display: block; clear: both; }


/* 個別投稿データ用　ページネーション */
.single_pn .nav-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.single_pn, .nav-previous, .single_pn .nav-next {
    display: -webkit-box;
}

@media (min-width: 768px) {
    .single_pn .nav-links {
        flex-direction: row;
        justify-content: space-between;
    }

    .single_pn .nav-previous, .single_pn .nav-next {
		    background-color: #eee;
		    padding:0.5px 6px;
		    border-radius: 3px;
    }

}

/* カテゴリーデータ用　ページネーション */
.cat_pn {
	display: flex;
	justify-content: center;
}

.cat_pn .nav-links{
	display:flex;
}

.cat_pn .page-numbers{
	display:inline-block;
	margin-right:10px;
	padding:4px 15px;
	color:#666666;
	border-radius:3px;
	background:#ffffff;
	border: 1px solid #666666;
}

.cat_pn .page-numbers.current{
	padding:4px 15px;
	background:#db7093;
	color:#ffffff;
}

.page-numbers.prev,
.page-numbers.next{
	background:transparent;
	box-shadow:none;
	border:none;
	color:#666666;
}

.page-numbers.dots{
	background:transparent;
	box-shadow:none;
	border:none;
	color:#666666;
}


@media (max-width: 600px) {
.page-numbers,
.page-numbers.current    {
     padding:4px 10px;
  }
}

/* 推奨業者一覧ページ */

main .s-list_area p {
	margin: 0 0.5rem 0.5rem;
}

/* fancybox title非表示 */

.fancybox-title-over #fancybox-title {
	display: none !important;
}