@charset "utf-8";



/*リセット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");


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');


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

--primary-color: #424f7a;	/*テンプレートのメインまたはアクセントとなる色*/
--primary-inverse-color: #fff;	/*primary-colorの対として使う色*/

}


/*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;
	-webkit-text-size-adjust: none;
	color: #333;	/*文字色*/
	line-height: 2;	/*背景色*/
	background-attachment: fixed;
}

/*リセット*/
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;
}


/*文字サイズの設定。
もしデフォルトを「大」にしたい場合は、js/fontSizeChanger.jsの中のコメント箇所を読んで下さい。
---------------------------------------------------------------------------*/
/*「大」ボタンを押した時の文字サイズ*/
html.f-large {
font-size: 24px;
}

/*「小」ボタンを押した時の文字サイズ*/
html.f-small {
font-size: 16px;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/

/*マウスオン時*/
a:hover {
text-decoration: none;
filter: brightness(1.1);	/*少しだけ明るくする*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
height: 100%;
display: flex;	/*flexボックスを使う指定*/
flex-direction: column;	/*子要素を縦並びにする*/
justify-content: space-between;	/*並びかたの種類の指定*/
background: #fff;	/*背景色*/
}

.wrap{
max-width: 1200px;	/*サイトの最大幅。これ以上広がらない。*/
margin: 0 auto;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	padding: 0 0% 100px;	/*背景色*/
	background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-position:80% 300px;
	background-color: #fff;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
padding: 20px 0 0;	/*上下、左右へのブロック内の余白*/
position: relative;	/*文字サイズボタンや、言語ボタンを絶対配置する為に必用な指定*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

/*ヘッダーブロック*/
header {
padding: 10px 0;	/*上下、左右へのブロック内の余白*/
display: flex;	/*flexボックスを使う指定*/
align-items: space-between;	/*垂直揃えの指定。天地中央に配置されるように。*/
}

}/*画面幅900px以上の追加指定ここまで*/


/*ロゴ*/
#logo {
margin:0%  1%;
width:400px;	/*幅*/
}

/*大きな端末用のロゴを非表示に*/
.pc-logo {
display: none;
}


/*画面幅500px「以下」の追加指定。言語バーにロゴが重ならないようにする為。*/
@media screen and (max-width:900px) {

/*ロゴ*/
#logo {
margin:1%  3% 1% 5px;
padding:1%;
width: calc(100% - 170px);	/*ロゴの幅。220pxというのは、言語サイズのボックスと、ハンバーガーアイコンを合わせたおおよその幅で、それを差し引いたサイズをロゴの幅とします。*/
}

header {
padding: 0px 0;	/*上下、左右へのブロック内の余白*/
}

}/*画面幅500px「以下」の追加指定ここまで*/


/*画面幅650px以上の追加指定*/
@media screen and (min-width:650px) {

/*ロゴ*/
#logo {
width: 400px;	/*幅*/
}

/*小さな端末用のロゴを非表示に*/
.sh-logo {
display: none;
}

/*大きな端末用のロゴを表示する*/
.pc-logo {
display: block;
}

}/*画面幅650px以上の追加指定ここまで*/


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

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
#contents {
padding: 0px;
	background-color: #fff;
}
/*ヘッダーの中央に配置するブロック*/
#header-center {
display: flex;	/*flexボックスを使う指定*/
align-items: right;	/*垂直揃えの指定。天地中央に配置されるように。*/
}
#header-center * {
margin: 0px;	/*サンプルテンプレートでは、バナー同士に空けるスペースで使っています。*/
}

}/*画面幅900px以上の追加指定ここまで*/

/*ヘッダー右側の言語ボタン
---------------------------------------------------------------------------*/
/*言語ブロック全体*/
.lang {
margin: 0;padding: 0;
list-style: none;
position: absolute;	/*headerに対して絶対配置する*/
right: 50px;	/*右からの配置場所*/
bottom: 10px;	/*下からの配置場所*/
display: flex;	/*flexボックスを使う指定*/
font-size: 0.85rem;	/*文字サイズ。85%*/
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#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::after {
font-family: "Font Awesome 6 Free";	/*Font Awesome Free版を使う指定*/
content: "\f078";	/*使いたいアイコン名（Font Awesome）をここで指定*/
font-weight: bold;	/*この手の設定がないとアイコンが出ない場合があります*/
margin-left: .7em;	/*アイコンとテキストとの間に空けるスペース*/
font-size: 0.7rem;
color:#fc0;
}


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


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

/*メニュー１個あたりの設定*/
.large-screen #menubar li {
flex: 1;	/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
text-align: center;	/*テキストをセンタリング*/
border-left: 1px solid #ccc;	/*枠線の幅、線種、色*/
}
.large-screen #menubar li:last-child {
border-right: 1px solid #ccc;	/*枠線の幅、線種、色*/
}
.large-screen #menubar li a {
padding:1em 0;
background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul,
{
animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}
.large-screen #menubar ul ul li,
.large-screen #menubar ul ul li:last-child
{
border: 0px ;	/*枠線の幅、線種、色*/
}

.large-screen #menubar nav ul li ul li a
{
	font-size:90%;
	padding:.5em;
	background: rgba(0,0,0,0.8);	/*背景色*/
	font-weight: normal;
}
.large-screen #menubar nav ul li ul li a:hover
{
	color: #fc0;
}

/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
position: absolute;z-index: 100;
width: 100%;
border-left: 0px solid #ccc;	/*枠線の幅、線種、色*/
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
position: fixed;
overflow: auto;
z-index: 101;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
padding-top: 46px;
background: rgba(0,0,0,0.9);	/*背景色*/
animation: animation1 0.1s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen nav > ul:not(.submenu) > li {
border-bottom: 1px solid #ccc;	/*枠線の幅、線種、色*/
margin: 0rem;	/*メニューの外側に空けるスペース*/
padding: 0 2rem;	/*メニュー内の余白。上下、左右へ。*/
}

/*文字色*/
.small-screen #menubar, .small-screen #menubar a {
color: #fff;
}
.small-screen #menubar a:hover {
color: #f00;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
position: fixed;z-index: 101;
cursor: pointer;
right: 0px;	/*右からの配置場所指定*/
top: 0px;	/*上からの配置場所指定*/
padding: 16px 14px;	/*上下、左右への余白*/
width: 46px;	/*幅（３本バーが出ている場合の幅になります）*/
height: 46px;	/*高さ*/
display: flex;	/*flexボックスを使う指定*/
flex-direction: column;	/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
justify-content: space-between;	/*並びかたの種類の指定*/
background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
display: block;
transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
border-top: 1.5px solid #fff;	/*線の幅、線種、色*/
}

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

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#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);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
display: none;	/*２本目は使わないので非表示にする*/
}



/*パンくずリスト
---------------------------------------------------------------------------*/
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin:0;
  padding:,7em 0 0 0.5em;
  background-color:#f5f5f5;
}

.breadcrumb li:not(:last-of-type)::after {
  content: "›";
  margin: 0 .6em; /* 記号の左右の余白 */
  color: #777; /* 記号の色 */
}



/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
margin:  0;	/*ブロックの外側に空けるスペース*/
padding:1em;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {


.breadcrumb {
  background-color:#fff;
}


/*2カラムで使う為の指定*/
main.c2 {
display: flex;	/*flexボックスを使う指定*/
justify-content: space-between;	/*並びかたの種類の指定*/
}

/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
main.c2 .main {
width: calc(100% - 330px);	/*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/
order: 1;
}

/*2カラムの中にある.sub要素*/
main.c2 .sub {
width: 320px;	/*幅*/
}

}/*画面幅900px以上の追加指定ここまで*/


/*mainブロック内のh2タグ*/
main h1 {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	border: 1px solid #CCC;
	margin-top:0px;
	padding:1em;
	color: #FFF;
	background-image: url(../images/h1.png);
	background-repeat: no-repeat;
	background-position: right center;
	line-height: 120%;
	font-size:140%;
	background-color: #003;
}
/*mainブロック内のh2タグ*/
main h2 {
	padding: .3em 1rem;	/*左側に１文字分の余白を作る*/
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	clear: both;
	margin: 2em 0 1em 0;
	font-size:120%;
	border-radius:3px;
background: #424F7A;
background: linear-gradient(90deg,rgba(66, 79, 122, 1) 0%, rgba(27, 28, 33, 1) 100%);
}

/*h3タグ*/
main h3 {
margin: 0 0 1rem;	/*h2の外側にとるスペース。上、左右、下への順番。*/
border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}

/*h3の左側のアクセントライン*/
main h3::before {
content: "";
border-left: 3px solid var(--primary-color);	/*左側のアクセントラインの幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
padding-right: calc(1rem - 3px);	/*右側への余白。上の3pxの線幅を変更する場合は、ここの3pxも合わせて変更して下さい*/
}

/*h4タグ*/
main h4 {
margin: 0 1rem 1rem;	/*h4の外側にとるスペース。上、左右、下への順番。*/
}

/*pタグ*/
main p {
margin: 1rem 0;	/*pの外側にとるスペース。上、左右、下への順番。*/
}

/*微調整*/
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);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
text-align: center;
padding: 0.5em;
background: #424F7A;
background: linear-gradient(180deg,rgba(66, 79, 122, 1) 0%, rgba(27, 28, 33, 1) 100%);
}
.sub h3 a {color: inherit;}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
padding: 0;
margin: 0px 0 1rem;	/*上、左右、下へのマージン*/
}

/*メニュー１個あたり*/
.submenu li {
border-bottom: 1px solid rgba(0,0,0,0.1);	/*下線の幅、線種、色。0,0,0は黒の事で0.1は色が10%出た状態。*/
}
.submenu a {
display: block;text-decoration: none;
background: #fff;	/*背景色*/
padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
color:#333;
}
.submenu a:hover {
	background-color: #C9D4FF;
}




/*アイコン（Font Awesome）*/
.submenu a::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f0da";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #000000;	/*アイコンの色*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;	/*この設定がないとアイコンが出ない場合があります*/
}

/*マウスオン時のアイコン設定*/
.submenu a:hover::before {
color: red;	/*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*box1設定（このテンプレートでは、2カラム時のsubブロックでのみ使用しています）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1 {
background: rgba(0,0,0,0.05);	/*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
padding: 10px;	/*ボックス内の余白*/
border-radius: 5px;	/*角を丸くする指定*/
margin-bottom: 1rem;	/*ボックスの下に空けるスペース*/
}

/*box1内で使った場合、下のマージンをなくす*/
.sub .box1 .submenu {
margin-bottom: 0;
}

 .box1 h3 a{
	text-decoration: none;
}


/*フッターのコンテンツ（役場住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
background: #444;	/*背景色*/
color: #fff;	/*文字色*/
padding: 1em 3%;	/*上下、左右へのボックス内の余白*/
font-size:14px;
}
#footer-contents a {
color: inherit;
}

/*左側のブロック*/
#footer-contents .left {
margin-bottom: 50px;	/*下に空けるスペース*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

#footer-contents {
display: flex;	/*flexボックスを使う指定*/
justify-content: space-between;	/*並びかたの種類の指定*/
align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
}

/*左側のブロック*/
#footer-contents .left {
margin-bottom: 0;	/*下のマージンをリセット*/
width: 100%;	/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
}
#footer-contents .right {
width: 0%;	/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
padding-left: 3%;	/*左側に空ける余白。左右ブロックの間の隙間です。*/
}

}/*画面幅900px以上の追加指定ここまで*/


/*テーブル（week）footer-contents内で使っています。
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.week caption {
border: 1px solid #ccc;	/*枠線の幅、線種、色*/
border-bottom: none;	/*下線だけ消す*/
background: #333;	/*背景色*/
padding: 0.5rem 1rem;	/*caption内の余白。上下、左右に１文字分ずつとる。*/
}

/*weekテーブルブロック設定*/
.week {
width: 100%;
table-layout: fixed;
text-align: center;	/*テーブル内のテキストをセンタリング*/
}
.week, .week td, .week th {
border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色。*/
}


/*  Greeting
----------------------------------------------------*/
#gre_area{
display:flex;
justify-content: flex-end;
align-items: flex-end;
margin-bottom:2em;
}
.gre_dl strong{
font-size:2rem;
}


@media(max-width:768px){
#gre_area{
flex-wrap: wrap;
}
}

img.greeting{
min-width: 110px;
max-width: 50%;
border-radius: 4px;
order:1;
margin-right:1em;
}

/* スクリーンサイズが768px以下の場合に適用 */
@media(max-width:768px){
img.greeting{
order: 1;
margin: 0 auto 0;
max-width: 50%;

}
}

.gre_dl{
text-align: left;
order: 1;
justify-content: center;
margin-right: 1em;
}

/* スクリーンサイズが768px以下の場合に適用 */
@media(max-width:768px){
.gre_dl{
width:100%;
text-align: center;
order: 2;
margin-right: 0;
}

}



/*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: #999;	/*文字色*/
font-size: 0.8em;	/*文字サイズ。*/
padding: 20px 3%;	/*上下、左右へのボックス内の余白*/
display: flex;	/*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-weight: bold;	/*太字にする*/
color: #ccc;	/*文字色*/
padding-top: 15px;	/*下に空けるスペース*/
}


/*フッター設定
---------------------------------------------------------------------------*/
footer {
font-size: 0.8rem;	/*文字サイズ*/
background: #000;	/*背景色*/
color: #fff;	/*文字色*/
text-align: center;	/*内容をセンタリング*/
padding: 20px;	/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}


/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
margin: 0;
padding: 0 1rem;	/*上下、左右へのボックス内の余白*/
}

/*日付(dt)、記事(dd)共通設定*/
.new dt,
.new dd {
padding: 5px 0;	/*上下、左右へのボックス内の余白*/
}

/*日付の横のマーク（共通設定）*/
.new dt span {
display: none;	/*小さな端末では非表示にしておく。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

/*お知らせブロック*/
.new {
display: flex;	/*flexボックスを使う指定*/
flex-wrap: wrap;	/*折り返す指定*/
}

/*日付(dt)設定*/
.new dt {
width: 14em;	/*幅。14文字(em)分。アイコン分も含んだ幅にします。*/
display: flex;	/*flexボックスを使う指定*/
justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
}

/*日付の横のマーク（共通設定）*/
.new dt span {
display: inline-block;	/*表示させる*/
width: 7em;	/*幅。7文字(em)分。*/
background: #999;	/*背景色*/
color: #fff;	/*文字色*/
font-size: 0.8em;	/*文字サイズを親要素の80%に。*/
text-align: center;	/*文字をセンタリング*/
margin-right: 1em;	/*アイコンの右側に空けるスペース*/
align-self: flex-start;	/*高さを間延びさせない指定*/
line-height: 1.8;	/*行間を少し狭く*/
position: relative;top: 0.4em;	/*上下の配置バランスの微調整*/
border-radius: 2px;	/*角を丸くする指定*/
}

/*icon-bg1設定。サンプルテンプレートでは「重要」と書いてあるマーク*/
.new dt span.icon-bg1 {
background: #cd0000;	/*背景色*/
}

/*icon-bg2設定。サンプルテンプレートでは「サービス」と書いてあるマーク*/
.new dt span.icon-bg2 {
background: #006acd;	/*背景色*/
}

/*記事(dd)設定*/
.new dd {
width: calc(100% - 14em);	/*「14em」は上の「.new dt」のwidthの値です。*/
}

}/*画面幅900px以上の追加指定ここまで*/


/*.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;	/*親のブロックのrelative（この場合は.list）に対して絶対配置する*/
left: -10px;	/*listブロックに対して左からの配置場所の指定*/
top: -10px;	/*listブロックに対して上からの配置場所の指定*/
}

/*figure画像*/
.list figure {
margin-bottom: 2rem;	/*下に空けるスペース。２文字分。*/
}


/*３列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid .list {
margin-bottom: 30px;	/*ボックス同士の上下間に空けるスペース*/
padding: 20px;	/*ボックス内の余白*/
background: #fff;	/*背景色*/
box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*dl（下のdtとddを囲むブロック）*/
.list-grid .list dl {
height: 10em;	/*高さ*/
overflow: auto;	/*高さを超えるコンテンツである場合に、自動でスクロールバーを出す*/
}

/*dt（タイトル、日付が入っている所）*/
.list-grid .list dl dt {
color: #333;	/*文字色*/
font-weight: bold;	/*太字にする*/
}

/*dd（サンプルテキストが入っている所）*/
.list-grid .list dl dd {
margin-bottom: 0.5em;	/*下に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-grid .list h4 {
margin: 0;
padding: 1rem;	/*余白。１文字分。*/
}

/*ボックス内のh4タグ内のiタグ（アイコンの事）*/
.list-grid .list h4 i {
transform: scale(1.5);	/*デフォルトの1.5倍に*/
margin-right: 1rem;	/*右側に空けるスペース。テキストとアイコンの隙間部分です。*/
}

/*タイトルの背景色バリエーション（共通）*/
.bg-color0, .bg-color1, .bg-color2, .bg-color3, .bg-color4, .bg-color5, .bg-color6 {
margin-bottom: 0rem !important;	/*下に空けるスペース*/
color: inherit;
}
.bg-color0 a, .bg-color1 a, .bg-color2 a, .bg-color3 a, .bg-color4 a, .bg-color5 a, .bg-color6 a {
display: block;
color: inherit;
}



/*背景
---------------------------------------------------------------------------*/
.bg1 {background: var(--primary-color);
}

/*bg-color0への追加指定*/
.bg-color0 {
background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
}
/*bg-color1への追加指定*/
.bg-color1 {
	background: #f5f5f5;	/*背景色*/
	border: 1px solid #CCC;
}
/*bg-color2への追加指定*/
.bg-color2 {
background: #424F7A;
background: linear-gradient(0deg,rgba(66, 79, 122, 1) 0%, rgba(27, 28, 33, 1) 100%);
}
/*bg-color3への追加指定*/
.bg-color3 {
background-image: radial-gradient( circle 311px at 8.6% 27.9%,  rgba(62,147,252,0.57) 12.9%, rgba(239,183,192,0.44) 91.2% );
}
/*bg-color4への追加指定*/
.bg-color4 {
background: #6f3eb9;	/*背景色*/
}
/*bg-color5への追加指定*/
.bg-color5 {
background: #1b7a1e;	/*背景色*/
}
/*bg-color6への追加指定*/
.bg-color6 {
background: #7a3a1b;	/*背景色*/
}

/*ボックス内のpタグ*/
.list-grid .list p {
margin: 0;
}

/*ボックス内のfigure画像*/
.list-grid .list figure {
margin-bottom: 1rem;	/*下に空けるスペース*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

/*listブロック全体を囲むブロック*/
.list-grid {
display: flex;	/*flexボックスを使う指定*/
flex-wrap: wrap;	/*折り返す指定*/
}

/*１個あたりのボックス設定*/
.list-grid .list {
width: 32%;	/*幅。３列になります。*/
margin-right: 2%;	/*右側へのマージン。ボックス同士の左右の余白です。*/
}

/*1カラムにしたい場合*/
.list-grid.c1 .list {
width: 100%;
margin-right: 0;
}
/*1カラムにしたい場合のdl（dtとddを囲むブロック）*/
.list-grid.c1 .list dl {
height: auto;
}

/*3の倍数目のボックスの右側のマージンをなくす*/
.list-grid .list:nth-of-type(3n) {
margin-right: 0;
}

/*ボックス内のtextブロック*/
.list-grid .list .text {
flex: 1;
}

}/*画面幅900px以上の追加指定ここまで*/


/*btnの設定（「btn1」と「btn2」）
---------------------------------------------------------------------------*/
/*ボタン共通*/
a.btn1, a.btn2 {
display: inline-block;text-decoration: none;
border-radius: 3px;	/*角を丸くする指定*/
padding: 0.3rem 2rem;	/*上下、左右へのボタン内の余白*/
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%出た状態。*/
transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*iタグ共通（アイコンの事）*/
a.btn1 i, a.btn2 i {
margin-left: 20px;
}

/*btn1の追加指定*/
a.btn1 {
background: #fff;	/*背景色*/
color: #444;	/*文字色*/
border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*btn1内のiタグ（アイコンの事）*/
a.btn1 i {
color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*btn2の追加指定*/
a.btn2 {
background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}


/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
/*画像を囲むブロック*/
.mainimg {
margin-bottom: 0px;	/*画像の下に空けるスペース*/
}



/*丸いページナビボタン全体を囲むブロック*/
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;
}

/*buttonタグ*/
ul.slick-dots li button {
border: none;padding: 0;
display: block;
text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
width: 12px;	/*ボタンの幅*/
height: 12px;	/*ボタンの高さ*/
border-radius: 50%;	/*丸くする指定*/
cursor: pointer;	/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
background: #ccc;	/*背景色。白。*/
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button {
background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*FAQ
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq {
padding: 0 1rem;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq dt {
border-radius: 3px;	/*枠を角丸にする指定*/
margin-bottom: 1rem;	/*下に空けるスペース*/
background: #fff;	/*背景色*/
border: 1px solid #ccc;	/*枠線の幅、線種、色*/
text-indent: -2rem;	/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
padding: 5px 1em 5px 3em;	/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
content: "\f059";	/*アイコンのコード*/
color: var(--primary-color);	/*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/
padding-right: 1rem;	/*アイコンとテキストとの間のスペース*/
}

/*回答*/
.faq dd {
padding: 5px 1rem 30px 3rem;	/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/*トップページの「キャンペーン中」ボタン
---------------------------------------------------------------------------*/
#message a {
text-decoration: none;display: block;
writing-mode: vertical-rl;
text-orientation: upright;
background: #288ece;/*背景色*/
color: #fff;	/*文字色*/
position: fixed;	/*スクロールしてもボタンが移動しないようにする指定。移動させたいならfixedをabsoluteにして下さい。*/
z-index: 100;
right: 0px;	/*ボタンの右からの配置場所指定*/
top: 170px;	/*ボタンの上からの配置場所指定*/
padding: 20px 15px;	/*ボタン内の余白。上下、左右。*/
border-radius: 10px 0px 0px 10px;	/*角を丸くする指定。左上、右上、右下、左下の順番。*/
}

/*ふきだしアイコン*/
#message i {
transform: scale(1.3);	/*1.3倍に*/
margin-bottom: 10px;	/*下に空ける余白*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
font-weight: bold;	/*太字に*/
padding: 10px 5px;	/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
background: #555;	/*背景色*/
color: #fff;	/*文字色*/
margin-bottom: 15px;	/*下に空けるスペース*/
border-radius: 5px;	/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
border-left: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
margin: 0  0 1rem 0;	/*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
border-right: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
padding: 5px 5px;	/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
border-right: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
}
 th, td {
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
}
.ta1 td {
	background: #fff;	/*背景色*/
}

@media screen and (max-width:640px){
    .ta1 th,
    .ta1 td,
	.ta2 th,
	.ta2 td
	{
        display: block;
        text-align: left;
    }
	.ta1 {
width:100%;
}
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
padding: 5px 15px;	/*上下、左右へのボックス内の余白*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
padding: 3px 8px;	/*上下、左右へのボックス内の余白*/
}


}/*画面幅900px以上の追加指定ここまで*/


/*PAGE 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);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
width: 60px;	/*幅*/
line-height: 60px;	/*高さ*/
border-radius: 0%;	/*円形にする*/
}
.pagetop a:hover {
background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
}



/*その他
---------------------------------------------------------------------------*/
.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;}
.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; }
.pc {display: none;}
.dn {display: none !important;}
.img {margin: 0 0 1rem;}
.block {display: block !important;}




.member_list {
margin: 0px;
padding: 0px;
}


.member_list li {
list-style-type: none;
}


/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

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


.member_list {
display: inline-grid;
column-gap: 2em;
grid-template-columns: repeat(2, auto);
margin: 0px;
padding: 0px;
width:100%;
}
.member_list li {
}

}/*画面幅900px以上の追加指定ここまで*/


i {margin: 3px;}
.fa-file-excel{color:#096;}
.fa-file-pdf{color:#C00;}
.fa-file-powerpoint{color:#F60;}
.fa-youtube{color:#CD201F;}
.fa-file-word{color:#003399;}
.ad p {
	text-align: center;margin-top:10px;
}
.news td {
	vertical-align: top;
}
.date td{
	color:#333;
	padding-right: 1em;
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap;
	vertical-align: top;
}
.red {color: #F00;}
.shadow { box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.4);}
input {padding: 1px;}
input[type="submit"]{    cursor: pointer;    border-radius: 100px;    width: 300px;    display: block;    margin: auto;    padding: 10px 10px 5px;    box-sizing: border-box;    font-size: 125%;    background: #14a73b;    border: none;    color: #FFF;    border-bottom: 5px solid rgba(0,0,0,0.3);    transition: .3s;}
p .ad {
	margin-top: 5px;
	margin-bottom: 5px;
}
.style2 {color: #05506d;
	font-weight: bold;
}
.cancel {
	background-color: #E3F2FE;
	padding: 10px;
}
.cancel p {
	margin: 0px;
	padding: 0px;
}
.indent {
	margin: 0px;
	text-indent: -1em;
	padding-top: .1em;
	padding-right: 0px;
	padding-bottom: .1em;
	padding-left: 1em;
	line-height: 1.1;
}
.indent1 {margin: 0px;
text-indent: -1em;
padding-top: .1em;
padding-right: 0px;
padding-bottom: .1em;
padding-left: 1em;
}
.indent2 {	margin: 0px;
	text-indent: -1em;
	padding-top: .1em;
	padding-right: 0px;
	padding-bottom: .1em;
	padding-left: 1em;
	line-height: 1.1;
}

.info {
	margin: 1em 0;
	padding: 1em;
	border: 2px solid #CCC;
}

.date {
padding-right: 1em;
}