@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

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

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

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
    --primary-color:#043c78;		/*このテンプレートのテーマカラー*/
    --primary-text-color:#fff;		/*このテンプレートのテーマカラーの上に文字を載せる場合*/
    --secondary-color:#C92E6F;		/*このテンプレートのアクセントカラー*/
    --secondary-text-color:#fff;	/*このテンプレートのアクセントカラーの上に文字を載せる場合*/
}


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


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


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

body { margin:0; padding:0;	font-family:"BIZ UDGothic","Arial","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";	-webkit-text-size-adjust:none; background:#fff; color:#555; line-height:2.2; border-top:5px solid var(--primary-color); animation:opa1 0.5s 0.2s both;}

/*リセット*/
figure {margin:0;}
dd {margin:0;}
nav,ul,li {margin:0;padding:0;}
nav ul {list-style:none;}

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

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

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

/*他*/
section + section {padding-top:3vw;}

.on{display:block;}


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

/*「小」の文字サイズ*/
html.f-small { font-size:16px;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a { color:#777; transition:0.3s;}
a:hover { color:var(--primary-color);}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container { height:100%; max-width:1800px; padding:0 3vw; display:flex; flex-direction:column; justify-content:space-between; margin:0 auto;}

/*ヘッダー
---------------------------------------------------------------------------*/
header { display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; height:100px;}

/*ロゴ*/
header #logo img {display:block;}
header #logo { margin:0; width:300px;}


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

/*上で非表示にしたメニューを表示させる為の設定*/
.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;}

/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー内の小文字*/
#menubar ul li span { display:block; font-size:0.7rem; opacity:0.7;}

/*メニュー１個あたりの設定*/
#menubar a { display:block; text-decoration:none; padding:10px 0;}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
.large-screen #menubar > nav > ul { display:flex; gap:10px; justify-content:space-between; position:relative; background:#043c78;}

/*メニュー１個あたりの設定*/
.large-screen #menubar li { flex:1; text-align:center;}

.large-screen #menubar a { position:relative; color:#b3d7ff;}

/*下線（通常時）*/
.large-screen #menubar > nav > ul > li > a::after { content:""; position:absolute; left:0px; bottom:0px; width:100%; height:5px; background:#b3d7ff; transition:0.5s;}

/*下線（マウスオン時）*/
.large-screen #menubar > nav > ul > li > a:hover::after,
.large-screen #menubar > nav > ul > li.current > a::after { background:#eaeea2;}


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

/*ドロップダウンメニュー一個あたり*/
.large-screen #menubar ul ul li,
.small-screen #menubar ul ul li { display:flex; align-items:center; float:left; margin-left:2rem;}

/*ドロップダウン内のサムネイル画像*/
.large-screen #menubar ul ul li img,
.small-screen #menubar ul ul li img { width:60px; margin-right:0.5rem;}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul { position:absolute; z-index:100; width:calc(100% - 2vw); left:0px; background:#043c78; border:1px solid #999; border-radius:10px; padding:1vw;}


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

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

/*900px以下でのみ表示させるブロック*/
#menubar .sh { padding:1rem 2rem 2rem;}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr { position:fixed; z-index:101; cursor:pointer; right:30px; top:30px; padding:16px 14px; width:46px; height:46px; display:flex; flex-direction:column; justify-content:space-between; background:var(--primary-color);}

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

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#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;}


/*文字サイズ変更ボタン
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#f-size { background:#fff; box-shadow:0px 0px 8px rgba(0,0,0,0.2); border-radius:0px 0px 5px 5px; display:flex;	align-items:center;	padding:10px 15px; align-self:flex-start;}

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

 #f-size { display:none;}

}/*追加指定ここまで*/

/*「文字サイズ」のテキスト*/
#f-size p { margin:0; margin-right:10px; font-size:17px;}

/*「小」「大」を囲むブロック*/
#f-size ul { list-style:none; margin:0; padding:0; display:flex; align-items:center;}

/*「小」ボタン設定*/
#f-size ul li#f-small::before { display:block; content:"小"; font-size:17px; width:40px; line-height:40px; text-align:center; background:#eee;}
#f-size ul li#f-small {	margin-right:5px;}

/*「大」ボタン設定*/
#f-size ul li#f-large::before { display:block; content:"大"; font-size:30px; width:50px; line-height:50px; text-align:center; background:#eee;}

/*選択中の設定*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before { background:var(--primary-color); color:var(--primary-text-color);}

/*マウスオン時にリンクテキストと同じような手のマークが出るように*/
#f-size li { cursor:pointer;}


/*main
---------------------------------------------------------------------------*/
main { flex:1; padding-bottom:200px; background:url('../images/footer_bg.png') repeat-x center bottom / auto 150px; position:relative; bottom:-20px;}

/*h2(見出し)要素*/
main h2 { color:var(--primary-color); border-bottom:1px solid var(--primary-color); padding-left:1rem; padding-right:1rem;}

/*normalクラスを指定した場合のh2要素*/
main h2.normal { font-size:2rem; font-weight:normal; border:none; text-align:center;}

/*h3(見出し)要素*/
main h3 { padding-left:1rem; padding-right:1rem;}

/*p(段落)要素*/
main p { padding-left:1rem; padding-right:1rem;}

dl.txt{ width:90%; margin:auto;}
.txt dt{ font-size:1.5rem; margin-top:20px; color:#0075c2;}
.txt dd{ width:90%; margin-top:5px; margin-left:20px;}

/*2カラム
---------------------------------------------------------------------------*/
.main-contents { margin-bottom:50px;}


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

/*カラムで使う為の指定*/
main.column { display:flex; justify-content:space-between; gap:2rem;}

/*main-contentsブロック*/
.main-contents { margin-bottom:0; order:2; flex:1;}

/*sub-contentsブロック共通*/
.sub-contents { width:230px;}
	
/*1つ目のsub-contents*/
.sub-contents:nth-child(2) { order:1;}
	

/*2つ目のsub-contents*/
.sub-contents:nth-child(3) { order:3; /*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/}
	
}/*追加指定ここまで*/


/*詳細ページ変更*/
/*---------------------------------------------------------*/
.tab_wrap{margin:0px auto;}
.tab_wrap input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 0px;}
.tab_area label{ width:200px; margin:0 0px; display:inline-block; padding:12px; color:#000; background:#fff; text-align:center; font-size:13px; border:#ccc solid 1px; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{opacity:0.5;}
.panel_area{background:;}
.tab_panel{width:100%; padding:0; display:none;}
 
#tab1:checked ~ .tab_area .tab1_label{background:#003f8e; color:#fff; font-weight:bold; letter-spacing:3px;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#003f8e; color:#fff; font-weight:bold; letter-spacing:3px;}
#tab2:checked ~ .panel_area #panel2{display:block;}


/*サブコンテンツ設定
---------------------------------------------------------------------------*/
/*サブコンテンツ内のh3要素(見出し)*/
.sub-contents h3 { margin:0; text-align:center; border-radius:5px 5px 0px 0px; border:1px solid #ccc; background:linear-gradient(transparent, rgba(0,0,0,0.03)); padding:0.5rem 0;}

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

/*メニュー１個あたり*/
.submenu a { display:block;text-decoration:none; padding:0.2rem 1rem;}

/*メニュー１個あたり（子メニュー以外）*/
.submenu > li { border:1px solid #ccc; border-top:none;}

/*子メニュー*/
.submenu li li a { padding-left:2rem;}

/*h3見出しの下にサブメニューが続く場合にメニューの上の線をなくす*/
.sub-contents h3 + nav .submenu { border-top:none;}

/*フッター設定
---------------------------------------------------------------------------*/
small {font-size:100%;}
footer { background:var(--primary-color); color:var(--primary-text-color); padding:0 3vw; margin-left:-3vw; margin-right:-3vw;}

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

/*マウスオン*/
footer a:hover { color:var(--primary-text-color); opacity:0.7;}

/*copyright*/
#copyright { font-size:0.8rem; text-align:center; padding:10px;}

/*テンプレート著作部分*/
footer .pr {display:block;}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu { width:80%; margin:auto; font-size:0.8rem; display:flex; justify-content:center; align-items:flex-start; padding:2rem 10vw 2rem 0; background:url('../images/foot.png') no-repeat right 2rem / 9vw;}

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

/*メニューの見出し(title)*/
#footermenu .title { font-weight:bold; padding-bottom:5px; font-size:1rem;}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons { list-style:none; margin:0; padding:0; display:flex; align-self:center; justify-content:center;}
ul.icons li { margin-right:10px;}
.icons i { font-size:40px;}


/*お知らせブロック
---------------------------------------------------------------------------*/
dl.news{ width:90%; margin:auto;}
.news dt{ font-size:1.5rem; margin-top:30px; color:#0075c2;}
.news dt span{ font-size:1rem;}
.news dd{ width:90%; margin-top:3px; margin-left:20px;}
.news dd img{ width:150px; height:auto; margin-left:20px;}


/*記事の下に空ける余白*/
.new dd { padding-bottom:1rem;}
/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.icon-bg1,.icon-bg2,.icon-bg3 { display:inline-block; text-align:center; line-height:1.8; border-radius:3px; padding:0 1rem; width:6rem; transform:scale(0.8);}

.icon-bg1 { background:#eee; color:#777;}
.icon-bg2 { background:#043c78; color:var(--primary-text-color);}
.icon-bg3 { background:#C92E6F; color:var(--secondary-text-color);}

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

/*ブロック全体*/
 .new { display:grid; grid-template-columns:auto 1fr; padding-left:1rem; padding-right:1rem;}

}/*追加指定ここまで*/


/*list-grid1, list-grid2 共通
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-grid1,.list-grid2 { display:grid;}

/*ボックス１個あたり*/
.list-grid1 .list,.list-grid2 .list { position:relative; display:grid;}

/*ブロック内のp要素*/
.list-grid1 p,.list-grid2 p { margin:0;padding:0;}

/*アイコン*/
.list-grid1 .newicon,.list-grid2 .newicon { position:absolute; left:-5px; top:-10px; background:var(--secondary-color); color:var(--secondary-text-color); font-size:0.7rem; width:3em; line-height:3em; border-radius:50%; text-align:center;}

/*list内の全ての要素のマージンを一旦リセット*/
.list-grid1 .list *,
.list-grid2 .list * { margin:0;}

/*ボックス内のp要素*/
.list-grid1 .list p,
.list-grid2 .list p { font-size:0.85rem; line-height:1.5;}

.list-grid1 .list h4{ width:100%; padding:10px; text-align:center; background:#043c78; color:#fff; border-radius:10px 10px 0 0;}


/*list-grid1
---------------------------------------------------------------------------*/

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

 .list-grid1 { grid-template-columns:repeat(2, 1fr); gap:1rem;}

}/*追加指定ここまで*/

/*画面幅500px以下の追加指定*/
@media screen and (max-width:500px) {

.on{display:none;}

}


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

/*listブロック全体を囲むブロック*/
 .list-grid1 { grid-template-columns:repeat(3, 1fr); gap:1rem;}

}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid1 .list { padding:1rem; background:#fff; grid-template-rows:auto 1fr; box-shadow:5px 5px 20px rgba(0,0,0,0.1);}

/*ボックス内のfigure画像*/
.list-grid1 .list figure img { margin-bottom:0.5rem;}


/*list-grid2
---------------------------------------------------------------------------*/

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

/*listブロック全体を囲むブロック*/
 .list-grid2 { grid-template-columns:repeat(2, 1fr); gap:1rem;}

}/*追加指定ここまで*/

/*ボックス１個あたり*/
.list-grid2 .list { grid-template-columns:100px 1fr; gap:1rem; align-items:center;}

/*ボックス内のfigure画像*/
.list-grid2 figure img { border-radius:10px;}


/*メイン画像スライドショー（slickを使用）
---------------------------------------------------------------------------*/
/*slickの簡易チラつき対策（slick共通）*/
.slick-slide { will-change:transform;}

/*画像を囲むブロック*/
.mainimg-slick { margin-bottom:80px;}

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

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button { background:var(--primary-color);}



/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption { font-weight:bold; padding:0.2rem 1rem; background:#afa5a0; color:#fff; margin-bottom:1rem; border-radius:5px;}

/*ta1テーブルブロック設定*/
.ta1 { table-layout:fixed; border-top:1px solid #999; width:100%; margin-bottom:2rem;}

/*tr（１行分）タグ設定*/
.ta1 tr { border-bottom:1px solid #999;}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td { padding:1rem; word-break:break-all;}

/*th（左側）のみの設定*/
.ta1 th { width:30%; text-align:left; background:#d1e8ff;}

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

 .ta1 th { width:20%;}

}
/*追加指定ここまで*/


/*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.5rem; background:rgba(0,0,0,0.2); 	width:60px; line-height:60px; border-radius:50%;}


/*color-check（マーカー風スタイル）
---------------------------------------------------------------------------*/
.color-check { background:linear-gradient(transparent 70%, yellow 70%);}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content:"";display:block;clear:both;}
.color-theme, .color-theme a {color:var(--primary-color) !important;}
.l {text-align:left !important;}
.c {text-align:center !important;}
.r {text-align:right !important;}
.ws {width:95%;display:block;}
.wl {width:95%;display:block;}
.mb0 {margin-bottom:0px !important;}
.mb30 {margin-bottom:30px !important;}
.look {display:inline-block;padding:0px 10px;background:rgba(0,0,0,0.03);border:1px solid #ccc; border-radius:3px;word-break:break-all;}
.small {font-size:0.7em;}
.large {font-size:2em; letter-spacing:0.1em;}
.dn {display:none !important;}

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

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

}/*追加指定ここまで*/