@import url('https://use.fontawesome.com/releases/v6.1.1/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/*--------------------------------------------------------------------
  3タイプ共用スタイルシート
  #one_colomun				「上メニュー」
  #two_colomun_leftmenu		「左メニュー」
  #two_colomun_rightmenu	「右メニュー」
--------------------------------------------------------------------*/


/* all */
* {
margin: 0;
padding: 0;
word-break: normal;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}



HTML,BODY{
height: 100%;	/* フッター下部固定 */
}


BODY{
margin:0;
padding:0;
color:#000;
background:#FFF;
font-size: 100.0%;	/* 16pxベース */
line-height:1.6;
text-align: center;
letter-spacing:1px;
font-family:'Open Sans', 'Noto Sans JP', "メイリオ", Meiryo, sans-serif;
font-weight:400;

}



/*------ フォントサイズ ------
font-size:62.5%;	10px
font-size:75.0%;	12px
font-size:87.5%;	14px
font-size:100.0%;	16px
font-size:112.5%;	18px
font-size:125.0%;	20px
font-size:137.5%;	22px
font-size:150.0%;	24px
font-size:162.5%;	26px
font-size:175.0%;	28px
font-size:187.5%;	30px
font-size:200.0%;	32px
font-size:212.5%;	34px
font-size:225.0%;	36px
font-size:237.5%;	38px
font-size:250.0%;	40px
-----------------------------*/

IMG,
A IMG{
border:none;
width:auto;
height:auto;
}
IMG{
max-width: 100%;
image-rendering: -webkit-optimize-contrast;
}

P{
margin-top:1.5em;
margin-bottom:1.5em;
line-height:1.5;
}


/*--------------------------------------------------------------------
  スタイルシート切り替え用
--------------------------------------------------------------------*/
#color{
margin:20px auto 0 auto;
text-align:left;
font-size:12px;
position:relative;
z-index:2;
}
#color A{
text-decoration:none;
width:16px;
height:16px;
border:1px solid rgba(255,255,255,0.5);
display:inline-block;
vertical-align:middle;
transition: border 0.5s ease;
-webkit-transition: border 0.5s ease;
-moz-transition: border 0.5s ease;
-o-transition: border 0.5s ease;
}
#color A:hover{
border-color:#FFF;
}
#color A SPAN{
display:none;
}

#color SPAN{
display:inline-block;
vertical-align:middle;
}
#color SPAN#coloe_label{
padding-top:3px;
}
#navy A{
background:#0F2350;
border-color:#FFF;
}
#blue A{
background:#164A84;
}
#green A{
background:#005243;
}
#yellowgreen A{
background:#618E34;
}
#orange A{
background:#D66A35;
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#color A{
	width:10vw;
	}
}


/*--------------------------------------------------------------------
  「レスポンシブ」固有
--------------------------------------------------------------------*/
.pc,
.pc_tablet{
display:inline-block;
}

.tablet,
.tablet_sp,
.sp,
.tablet.aligncenter,
.tablet_sp.aligncenter,
.sp.aligncenter{
display:none;
}

@media only screen and (min-width:769px) {	/* PC用 */
	.block_pc{
	display:block !important;
	}
}

@media only screen and (max-width:768px) {	/* スマホ横以下用 */
IMG{
	width:auto;
	height:auto;
	max-width: 100%;
	}
}

@media only screen and (min-width:541px) and (max-width:768px) {	/* スマホ横用 */
	.tablet_none,
	.pc,
	.sp,
	.pc.aligncenter,
	.sp.aligncenter{
	display:none !important;
	}
	.pc_tablet,
	.tablet_sp,
	.tablet{
	display:block;
	margin:auto;
	}
}

@media only screen and (max-width:540px) {	/* スマホ縦用 */
	.sp_none,
	.pc_tablet,
	.pc,
	.tablet,
	.pc_tablet.aligncenter,
	.pc.aligncenter,
	.tablet.aligncenter{
	display:none !important;
	}
	.block_sp,
	.tablet_sp,
	.sp{
	display:block;
	}
	
}

/*--------------------------------------------------------------------
  リンクテキスト
--------------------------------------------------------------------*/
A{
color:#00C;
transition: color 0.5s ease,  background 0.5s ease, opacity 0.5s ease;
-webkit-transition: color 0.5s ease,  background 0.5s ease, opacity 0.5s ease;
-moz-transition: color 0.5s ease,  background 0.5s ease, opacity 0.5s ease;
-o-transition: color 0.5s ease,  background 0.5s ease, opacity 0.5s ease;
text-decoration:none;
word-break: break-all;	/* URL や E-mailアドレスを改行する */
}
A:visited{
color:#969;
}
A:hover{
color:#00F;
text-decoration:none;
}


/*--------------------------------------------------------------------
  見出し
--------------------------------------------------------------------*/
H1{
margin:0;
}
H2{
margin:0;
font-weight:normal;
}

/*------------------------------------------------
   H3
------------------------------------------------*/
/*------ H3基本設定 ------*/
H3{
margin:30px 0 20px 0;
font-size:142.9%;	/* 20px */
clear:both;
}

#content H3{
padding:0.8em 20px 0.6em 10px;
border-bottom:5px solid #0F2350;
text-shadow:0 1px 0 #FFF;
font-size:228.6%;	/* 32px */
font-weight:normal;
}

/*------------------------------------------------
   H4
------------------------------------------------*/
/*------ H4基本設定 ------*/
H4{
margin:40px auto 15px auto;
clear:both;
}
#content H4{
padding:0.4em 0 0.3em 10px;
border-bottom:4px solid #0F2350;
font-size:142.9%;	/* 20px */
font-weight:normal;
}

/*------ 他要素隣接時 ------*/
#content *+H4{	/* H4 他要素のすぐ下は余白を多く */
margin-top:70px;
}



/*------------------------------------------------
   H5
------------------------------------------------*/
/*------ H5基本設定 ------*/
H5{
margin:40px auto 10px auto;
padding:0.2em 0 0.2em 6px;
border-left:4px solid #0F2350;
font-size:114.3%;	/* 16px */
font-weight:normal;
clear:both;
}

/*------ 他要素隣接時 ------*/
#content *+H5{	/* H5 他要素のすぐ下は余白を多く */
margin-top:60px;
}



/*--------------------------------------------------------------------
  インデント 
--------------------------------------------------------------------*/
.indent{
margin-left:15px;
}
#content .subtitle{
font-size:113.3%;	/* 17px */
color:#F30;
}






/*--------------------------------------------------------------------
  左寄せ・右寄せ
--------------------------------------------------------------------*/
.aligncenter{
text-align:center;
}
.alignright{
text-align:right;
}

/*------------------------------------------------
  画像の左寄せ・右寄せ
------------------------------------------------*/
.left{
float: left;
margin: 0 20px 20px 0;
}
.right{
float: right;
margin: 0 0 20px 20px;
}
.clear{
clear:both;
}



/*--------------------------------------------------------------------
  フォントサイズ・色
--------------------------------------------------------------------*/
.large{
font-size:123.1%;	/* 16px */
}
.small{
font-size:76.9%;	/* 11px */
}

.orange{
color:#f60;
}
.green{
color:#618E34;
}




/*--------------------------------------------------------------------
  リストスタイル
--------------------------------------------------------------------*/
UL{
margin:1.2em 0;
padding:0;
list-style:none;
}
LI{
margin:0;
padding:0;
background:url(img/spacer.gif) no-repeat;	/* Android4.0対策 */
}


#content LI{
margin-top:0.5em;
margin-bottom:0.5em;
}
#content LI LI{
margin-top:0.2em;
margin-bottom:0.2em;
}


/*------------------------------------------------
  ネスト時
------------------------------------------------*/
LI UL,
DD UL,
TD UL{
margin-top:0;
margin-bottom:0.3em;
}


/*------------------------------------------------
  箇条書きリスト
------------------------------------------------*/
UL.list>LI,
UL>LI.list{
padding-left:1.3em;
text-indent:-1.3em;
}
UL.list>LI *,
UL>LI.list *{
padding-left:0;
text-indent:0;
}


LI.list:not(.kome)::before,
.list>LI:not(.kome)::before{
margin:-0.22em 0.5em 0 0.5em;
text-indent:0;
content:"\f111";
font-family: "Font Awesome 5 Free";
font-weight : 900;
font-size:0.6em;
vertical-align:middle;
display:inline-block;
color:#999;
}

/*------------------------------------------------
  横並びリスト
------------------------------------------------*/
UL.inline-block-li{
}
UL.inline-block.table{
display:table;
}
UL.inline-block-li>LI{
padding:0 1.0em 0 0;
display:inline-block;
vertical-align:middle;
}
UL.inline-block-li.list>LI{
padding-right:2.0em;
}
UL.inline-block-li.island>LI,
UL.inline-block-li.table>LI{
padding:0 0.5em;
}

UL.valign_middle>LI{
vertical-align:middle;
}
UL.valign_top>LI{
vertical-align:top;
}
UL.inline-block-li.island>LI:has(.link_large),
UL.inline-block-li.table>LI:has(.link_large){
padding:0.3em;
}


@media only screen and (max-width:540px) {	/* スマホ縦用 */
	UL.inline-block-li{
	width:100%;
	}
	UL.inline-block-li>LI:has(.link_large){
	display:block;
	}
}
UL.inline-block.list>LI{
padding-left:0.9em;
padding-right:0.6em;
display:inline-block;
text-indent:0.8em;
}
UL.inline-block.list>LI *{
text-indent:0;
}

DL.list DT::before,
MAIN UL.inline-block.list>LI::before{
margin:-0.2em 0.4em auto -1.5em;
display:inline-block;
content:"";
border:1px solid #000;
background:#000;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
width:4px;
height:4px;
vertical-align:middle;
}
DL.list DT::before{
margin:-0.2em 0.4em auto 0.1em;
}
DL.list DD{
margin-top:0.2em;
margin-left:0.8em;
}



/*------------------------------------------------
  番号付きリスト
------------------------------------------------*/
OL{
margin:1.2em 0;
padding:0;
}

/*------ ネスト時 ------*/
LI OL,
DD OL,
TD OL{
margin-top:0;
margin-bottom:0.3em;
}
OL>LI{
margin-left:2.2em;
list-style-type : decimal;
}
UL>LI OL>LI{
text-indent:0;
}

/*------ 両側に()カッコ ------*/
OL.kakko>LI{
margin-left:0;
padding-left:2.2em;
text-indent: -2.1em;
list-style-type:none;
list-style-position:inside;
counter-increment: cnt;
}
OL.kakko>LI:before{
display: marker;
content: "(" counter(cnt) ") ";
}




/*------------------------------------------------
  注釈 ※ リスト
------------------------------------------------*/
UL.kome>LI,
LI.kome{
padding-left:1.3em;
text-indent:-1.3em;
line-height:1.3;
}
UL.kome>LI::before,
LI.kome::before{
margin-right:0.2em;
display:inline-block;
content:"※";
color:#F00;
text-indent:0;
}

/*------------------------------------------------
  PDF・Word・Excelリスト
------------------------------------------------*/
/*------ 共通 ------*/
UL.pdf LI,
LI.pdf{
margin-top:0 !important;
margin-bottom:0 !important;
padding:0.4em 0 0.4em 40px;
background-repeat:no-repeat;
background-position:0 0.2em;
background-position:0 0.2em;
list-style:none;
min-height:36px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

.pdf A{
vertical-align:top;	/* IE7対策 */
}

/*------ PDFリスト ------*/
UL.pdf LI,
LI.pdf{
background-image:url(img/pdf.png);
}


/*------ PDFリスト（小） ------*/
UL.pdf_s LI,
LI.pdf_s{
margin-top:0 !important;
margin-bottom:0 !important;
padding:0.2em 0 0.2em 20px;
background-repeat:no-repeat;
list-style:none;
min-height:20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background:url(img/pdf_s.gif) no-repeat 0 0.4em;
}
.pdf_s A{
vertical-align:top;	/* IE7対策 */
}






/*--------------------------------------------------------------------
  表
--------------------------------------------------------------------*/
TABLE,
TH,
TD{
font-size:100%;
}
TH{
text-align:center;
font-weight:normal;
}



/*------------------------------------------------
  罫線を表示するタイプの表
------------------------------------------------*/
TABLE.data_table{
margin-top:1.0em;
margin-right:auto;
margin-left:auto;
border-collapse:collapse;
border:1px solid #999;
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	.data_table{
	width:100%;
	border-bottom-width:2px !important;
	}
	.data_table TR>*{
	display:block;
	}
	.data_table TR>TH{
	padding:5px 1.5vw;
	text-align:left;
	border-bottom:none;
	}
	.data_table TR>TD{
	padding:10px 1.5vw;
	border-bottom:none;
	}
	.data_table TR>TD+TD{
	border-top-color:rgba(0,0,0,0.2);
	}
}

TABLE.data_table CAPTION{
text-align:right;
}
.data_table TH{
padding:15px;
border:1px solid #999;
background:#F5F5F5;
}

.data_table TD{
padding:15px;
border:1px solid #999;
background:#FFF;
}

/*------------------------------------------------
  罫線を表示しないレイアウト用の表
------------------------------------------------*/
TABLE.layout_table{
margin-left:10px;
}
.layout_table TH{
padding:5px 0;
text-align:left;
}
.layout_table TD{
padding:5px 0;
}
.layout_table TH+TD{
padding:5px 40px 5px 5px;
}



/*--------------------------------------------------------------------
  「トップページ」固有の設定
--------------------------------------------------------------------*/
#one_colomun #top_left{	/* 「上メニュー」左右分割 左 */
margin:20px 0;
float:left;
width:57%;
text-align: left;
}
#one_colomun #top_right{	/* 「上メニュー」左右分割 右 */
margin:40px 0 20px 0;
float: right;
width : -webkit-calc(43% - 30px);
width : calc(43% - 30px);
text-align: left;
}

@media only screen and (max-width:979px) {	/* 狭いPC以下用 */
	#one_colomun #top_left,	/* 「上メニュー」左右分割 左 */
	#one_colomun #top_right{	/* 「上メニュー」左右分割 右 */
	margin:0 auto 20px auto;
	float:none;
	width:96%;
	}
}

/*------------------------------------------------
  トップページ PR欄
------------------------------------------------*/
#appeal>DIV>*{
margin:0;
max-width:640px;
background:#FFF;
}
#appeal H3{
margin:0;
padding:0.5em 0;
font-size:112.5%;	/* 18px */
}
#appeal>DIV>H3~*{
padding:0 0 1.0em 0;
}


@media only screen and (min-width:541px) and (max-width:768px) {	/* スマホ横用 */
	#appeal{
	display:table;
	}
	#appeal>DIV{
	padding:10px;
	background:#F5F5F5;
	}
	#appeal H3{
	padding-right:0.4em;
	padding-left:0.4em;
	}
	#appeal>DIV>H3~*{
	padding-right:0.5em;
	padding-left:0.5em;
	}

}

/*------------------------------------------------
  トップページお知らせ欄
------------------------------------------------*/
#news *{
overflow-wrap: anywhere;
}
#news H3{
margin:0;
padding:0 0.4em 0.5em 0.4em;
border-bottom:4px solid #0F2350;
font-size:114.3%;	 /* 16px */
font-weight:normal;
}
#news ARTICLE{
padding:0.7em 0.5em;
}
#news ARTICLE+ARTICLE{
border-top:1px dotted #CCC;
}
#news H4{
margin:0;
padding:0;
font-size:100.0%;	 /* 16px */
font-weight:normal;
}
#news .date{
width:7.0em;
}
#news H4{
width : -webkit-calc(100% - 8.5em);
width : calc(100% - 8.5em);
}
@media screen and (min-width:980px) {	/* PC用 */
	#one_colomun #news .date,
	#one_colomun #news H4{
	width:100%;
	}
}
@media only screen and (max-width:540px) {	/* スマホ縦用 */
	#news .date,
	#news H4{
	width:100%;
	}
}

/*------------------------------------------------
  #two_colomn 「左メニュー」「右メニュー」
------------------------------------------------*/
[id^="two_colomun"] #news{
margin-top:30px;
}

/*------------------------------------------------
  トップページ右側 住所欄 
------------------------------------------------*/
#top_address{
margin:50px 0 0 0;
padding:0 0 9px 0;
}
#top_address H5{
margin:0;
padding:0.4em 0 0.4em 14px;
background:#0F2350;
color:#FFF;
font-weight:normal;
border-left:none;
font-size:100%;	/* 14px */
}

#top_address_inner{
padding:1px 14px 15px 15px;
background:#F5F5F5;
}
#top_address P{
margin:10px 0 0 0;
}
#top_address P SPAN:not([class]){
margin:0 5px 0 0;
display:inline-block;
width:5em;
}



/*--------------------------------------------------------------------
  「コンテンツ」固有の設定
--------------------------------------------------------------------*/
/*------------------------------------------------
  アクセスマップ 
------------------------------------------------*/
#accessmap{
margin:auto !important;
padding:4px;
text-align:center;
border:1px solid #CCC;
}


#accessmap IFRAME{
display:block;
width:100%;
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#accessmap IFRAME{
	height:300px;
	}
}


/*------------------------------------------------
  区切りのスラッシュ / 表示
------------------------------------------------*/
.slash_tablet::before,
.slash::before,
.dot::before{
display:inline-block;
}
.slash_tablet::before,
.slash::before{
margin-right:0.5em;
margin-left:0.5em;
content:"/";
}
.dot_tablet::before,
.dot::before{
content:"・";
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	.slash_tablet::before,
	.dot_tablet::before{
	display:block;
	content:"";
	}
}

@media only screen and (max-width:540px) {	/* スマホ縦用 */
	.slash::before,
	.dot::before{
	display:block;
	content:"";
	}
}

/*-----------------------------------------------
  ふわっと表示　じわじわ(with JavaScript)
------------------------------------------------*/
SECTION>*,ARTICLE>*,DL>*,DIV>P,
.effect-fade,.effect-move{
opacity : 0;
transition : opacity 1500ms;
}

SECTION>*.effect-scroll,ARTICLE>*.effect-scroll,DL>*.effect-scroll,DIV>P.effect-scroll,
.effect-fade.effect-scroll {
opacity : 1;
}

.effect-move{
opacity : 0;
transform : translate(0, 10vh);
transition : opacity 2500ms, transform 1500ms;
}
.effect-move.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}



/*------------------------------------------------
  斜め
------------------------------------------------*/
/*------ 右上がり3° ------*/
.naname{
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);

}
/*------ 右下がり3° ------*/
.naname-{
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
}

/*------------------------------------------------
  レイアウト
------------------------------------------------*/
.inline-block{
display:inline-block;
}
.block,
.island,
.table{
margin-right:auto;
margin-left:auto;
}
.block{
display:block;
}
.island,
.table{
display:table;
}
.table-table-cell{
display:table;
}
.table-table-cell>*{
display:table-cell;
}

.relative{
position:relative;
}
.absolute{
position:absolute;
}
.x50y50{
transform : translate(-50%, -50%);
top:50%;
left:50%;
}
.x0y50{
transform : translate(0, -50%);
top:50%;
left:0;
}
.x50y0{
transform : translate(-50%,0);
top:0;
left:50%;
}

.valign_middle>*{
vertical-align:middle;
}
.valign_top>*{
vertical-align:top;
}

@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	.island{
	display:block;
	}
}

/*--------------------------------------------------------------------
  共通レイアウト枠
--------------------------------------------------------------------*/
#wrap{
min-height: 100%;
_height: 100%; /* for IE6 */
background:#FFF;	/* フッター以外の背景色 */
width:100%;
}

MAIN{
display:block;
margin:0 auto;
width : -webkit-calc(100% - 50px) ;
width : calc(100% - 50px);
max-width:1200px;
text-align:left;
background:#FFF;
}
#one_colomun #content{	/* 「上メニュー」コンテンツ部  860px */
margin:20px 50px 50px 50px;
}
#two_colomun_leftmenu #content_top,	/* 「左メニュー」トップページ右側コンテンツ部 */
#two_colomun_leftmenu #content{	/* 「左メニュー」右側コンテンツ部 */
margin: 10px auto 50px auto;
float: right;
width : -webkit-calc(100% - 230px);
width : calc(100% - 230px);
}
#two_colomun_rightmenu #content_top,	/* 「右メニュー」トップページ左側コンテンツ部 */
#two_colomun_rightmenu #content{	/* 「右メニュー」左側コンテンツ部 */
margin: 10px auto 50px auto;
float: left;
width : -webkit-calc(100% - 230px);
width : calc(100% - 230px);
}

@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#wrap{
	min-width:auto;
	min-width:initial;
	}
	MAIN{
	display:block;
	width:100%;
	}

	#one_colomun #content{	/* 「上メニュー」コンテンツ部  */
	margin:20px 0 50px 0;
	padding:0 4vw;
	}
	#two_colomun_leftmenu #content_top,	/* 「左メニュー」トップページ右側コンテンツ部 */
	#two_colomun_leftmenu #content{	/* 「左メニュー」右側コンテンツ部 */
	float: none;
	width: 96%;
	}
	#two_colomun_rightmenu #content_top,	/* 「右メニュー」トップページ左側コンテンツ部 */
	#two_colomun_rightmenu #content{	/* 「右メニュー」左側コンテンツ部 */
	float: none;
	width: 96%;
	}


}

/*--------------------------------------------------------------------
  グローバルメニュー「サイドメニュー」「上メニュー」 共通
--------------------------------------------------------------------*/
#global_navi > SPAN{
display: none;
}
#global_navi LI{
position: relative;
}
#global_navi LI A{
display: block;
text-decoration:none;
}

/*------------------------------------------------
  グローバルメニュー「サイドメニュー」
------------------------------------------------*/
/*------ PCメインメニュー第一階層 ------*/
@media only screen and (min-width:769px) {	/* PC用 */
	[id^="two_colomun_"] #global_navi{
	margin-top:1.0em;
	width:200px;
	}

	#two_colomun_leftmenu #global_navi{	/* 「左メニュー」 */
	float:left;
	}
	#two_colomun_rightmenu #global_navi{	/* 「右メニュー」 */
	float:right;
	}
	[id^="two_colomun_"] #global_navi UL{
	width:200px;
	border-top:1px solid #CCC;
	}
	[id^="two_colomun_"] #global_navi UL LI{
	margin:0;
	padding:0;
	display:block;
	border-bottom:1px solid #CCC;
	width:100%;
	}
	[id^="two_colomun_"] #global_navi UL LI A{
	margin:0;
	padding:0.8em 1.0em;
	color:#000;
	width:auto;
	text-align:left;
	background:#FFF;
	}
	[id^="two_colomun_"] #global_navi UL LI A{
	font-size:87.5%;	/* 14px */
	}
	[id^="two_colomun_"] #global_navi UL LI A:hover{
	background:#0F2350;
	color:#FFF;
	}
	[id^="two_colomun_"] #global_navi UL LI A::before{
	position:absolute;
	transform : translate(0,-50%);
	top:50%;
	right:0.4em;
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-weight : 900;
	color:#0F2350;
	}
	[id^="two_colomun_"] #global_navi UL LI.active A::before,
	[id^="two_colomun_"] #global_navi UL LI:hover A::before,
	[id^="two_colomun_"] #global_navi UL LI.active:hover A::before{
	color:#FFF;
	}
	[id^="two_colomun_"] #global_navi UL LI.active A{
	background:#0F2350;
	color:#FFF;
	}
}

/*------------------------------------------------
  メニューバー「上メニュー」
------------------------------------------------*/
#one_colomun #global_navi{
margin:0;
position:relative;
}

/*------ PCメインメニュー第一階層 ------*/
@media only screen and (min-width:769px) {	/* PC用 */
	#one_colomun #global_navi{
	background:#0F2350;
	}
	#one_colomun #global_navi UL{
	margin:0 auto;
	padding:0;
	width:100%;
	max-width:1200px;
	display:table;
	table-layout:fixed;
	background:#FFF;
	}
	#one_colomun #global_navi UL LI{
	margin: 0;
	padding:0;
	display:table-cell;
	}
	#one_colomun #global_navi UL LI:first-child::before,
	#one_colomun #global_navi UL LI::after{
	content:"";
	width:1px;
	height:100%;
	position:absolute;
	top:0;
	background:#666;
	opacity:0.3;
	}
	#one_colomun #global_navi UL LI:first-child::before{
	left:0;
	}
	#one_colomun #global_navi UL LI::after{
	right:0;
	}
	#one_colomun #global_navi UL LI A{
	padding:0.8em 0;
	background:#0F2350;
	color:#FFF;
	text-align:center;
	}
	#one_colomun #global_navi UL LI.active A::after{
	content:"";
	position:absolute;
	transform : translateX(-50%);
	left:50%;
	bottom:0;
	width:0;
	height:0;
	border-style: solid;
	border-color: transparent transparent #FFF transparent;
	border-width: 0 0.35em 0.5em 0.35em;
	}
	#one_colomun #global_navi UL LI A:hover{
	opacity:0.8;
	}
}




/*------ スマホ横以下用 ------*/
@media only screen and (max-width:768px) {
	
	/* ------ スマホ：メインメニューアウトライン ------ */
	[id*="colomun"] #global_navi{
	margin:0;
	position:absolute !important;
	top:0;
	right:0;
	width:100%;
	height:5px;
	background:none;
	z-index:3;
	}
	[id*="colomun"] #global_navi:has(.open){
	height:50px;
	background:#0F2350;
	opacity:0.97;
	}

	[id*="colomun"] #global_navi > SPAN{
	display:block;
	padding:0;
	position:absolute;
	top:0;
	right:0;
	width: 50px;
	height: 50px;
	text-align: left;
	text-indent: -9999px;
	background:url(img/sp_nav.png) no-repeat -50px 0;
	background-size:auto 50px !important;
	-webkit-background-size:auto 50px;
	-moz-background-size:auto 50px;
	-o-background-size:auto 50px;
	-ms-background-size:auto 50px;
	cursor:pointer;
	}
	
	#global_navi UL LI{
	background:transparent;
	}

	UL#globalmenu LI SPAN{
	display: block;
	}

	UL#globalmenu.open{
	display: block !important;
	}
	#global_navi > SPAN.open{
	background-position:-100px 0;
	}



	/*------------------------------------------------
	  スマホ：メインメニュー第一階層
	------------------------------------------------*/
	[id*="colomun"] UL#globalmenu{
	margin:0 auto;
	padding:0 0 1.0em 0;
	width:100%;
	display: none;
	position: absolute;
	top:50px;
	right:0;
	border:none;
	text-align:center;
	background:#0F2350;
	}
	[id*="colomun"] UL#globalmenu>LI{
	display:inline-block;
	border-top:none;
	border-bottom:none;
	width:auto;
	}

	[id*="colomun"] UL#globalmenu>LI>A{
	margin:0.5em 1.0em;
	padding:0.5em;
	height:auto;
	line-height:1.3;
	color:#FFF;
	text-align:center;
	background-color:transparent;
	background-image:none;
	width:auto !important;
	border-bottom:2px solid transparent;
	transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	}
	[id*="colomun"] #globalmenu>LI>A:hover{
	background-color:transparent !important;
	opacity:0.6;
	color:#FFF;
	}
	[id*="colomun"] #globalmenu >LI.active >A{
	background-color:transparent;
	border-color:#FFF;
	color:#FFF;
	}
	[id*="colomun"] #globalmenu >LI.active >A:hover{
	opacity:1.0 !important;
	color:#FFF;
	}
	[id*="colomun"] #global_navi UL LI:first-child A{
	margin:0;
	}
	[id^="two_colomun_"] #global_navi UL LI A::before{
	margin:0;
	content: "";
	display:none;
	}

}



/*--------------------------------------------------------------------
  ヘッダー
--------------------------------------------------------------------*/
HEADER{
margin:0;
width:100%;
}
[id^="two_colomun_"] HEADER{
border-bottom:1px solid #CCC;
}

#header_inner{
margin:0 auto;
padding:5vw 2vw;
text-align:left;
background:#000 url(img/header.webp) no-repeat center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
color:#FFF;
text-shadow: 1px 1px 1px #000, -1px -1px 1px rgba(0,0,0,0.5);
position:relative;
}

.home #header_inner{
padding:13vw 2vw;
}
#header_inner::after{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
background:rgba(0,0,0,0.5);
transition: background 0.5s ease, opacity 0.5s ease;
-webkit-transition: background 0.5s ease, opacity 0.5s ease;
-moz-transition: background 0.5s ease, opacity 0.5s ease;
-o-transition: background 0.5s ease, opacity 0.5s ease;
}


#header_inner H1{
margin:0 auto;
font-size:min(7.0vw,150.0%);	/* 24px */
position:relative;
z-index:2;
}

.home #header_inner H1{
font-size:min(8.0vw,300.0%);
}
#header_inner H2{
font-size:100%;
max-width:900px;
position:relative;
z-index:2;
}

@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	HEADER{
	background:#0F2350;
	min-width:auto;
	min-width:initial;
	}
	.home #header_inner,
	#header_inner{
	padding:90px 2vw 5vw 2vw;
	}
}

@media only screen and (max-width:540px) {	/* スマホ縦用 */
	#header_inner H2{
	font-size:max(3.0vw,75.0%);
	}

}

/*------------------------------------------------
  Homeボタン
------------------------------------------------*/
DIV#sp_home{
display:none;
z-index:101;
}
@media only screen and (max-width:768px) {
	DIV#sp_home{
	width:50px;
	height:50px;
	position:absolute;
	top:0;
	right:50px;
	display:block;
	}
	DIV#sp_home A{
	width:50px;
	height:50px;
	display: block;
	background:url(img/sp_nav.png) no-repeat 0 0;
	background-size:auto 50px !important;
	-webkit-background-size:auto 50px;
	-moz-background-size:auto 50px;
	-o-background-size:auto 50px;
	-ms-background-size:auto 50px;
	}
	DIV#sp_home A SPAN{
	display:none;
	}

}




/*--------------------------------------------------------------------
  パンくず・アンカー
--------------------------------------------------------------------*/
/*------------------------------------------------
  パンくずリスト
------------------------------------------------*/
#pkl{
margin:20px 0;
font-size:87.5%;	/* 14px */
}

/*------------------------------------------------
  アンカー 
------------------------------------------------*/
#pt{
margin:0;
z-index:100;
position: fixed;
bottom:12px;
right:10px;
width: 40px;
height: 40px;
}
#pt A{
margin:0 auto;
display: block;
width: 40px;
height: 40px;
background:rgba(102,102,102,0.5) url(img/pt.png) 0 0 no-repeat;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
zoom: 1;
}
#pt A:hover{
background-color:rgba(51,51,51,0.3);
}
#pt A SPAN{
display:none;
}




/*--------------------------------------------------------------------
  フッター
--------------------------------------------------------------------*/
FOOTER{
padding:2.5em 2vw;
font-size:62.5%;	/* 10px */
color:#FFF;
background:#666;
position: relative;
}

@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	FOOTER{
	text-align:left;
	}

}

/*-----------------------------------------------
  flexbox レイアウトをレスポンシブで可変
------------------------------------------------*/
BODY .flexbox{
margin:auto;
display : -webkit-box;     /* old Android */
display : -webkit-flex;    /* Safari etc. */
display : -ms-flexbox;     /* IE10        */
display : flex;
-webkit-flex-wrap: wrap;          /* Safari etc. */
-ms-flex-wrap    : wrap;          /* IE10        */
flex-wrap        : wrap;
align-items: stretch;	/* 子要素の高さを揃える */
justify-content:center;	/* 左右中央揃え（センタリング） */
}
.flexbox.space-between{
justify-content: space-between;
}
.flexbox.space-around{
justify-content: space-around;
}
.flexbox.start{
justify-content:flex-start;	/* 左揃え（初期値） */
}
.flexbox.end{
justify-content:flex-end;	/* 右揃え */
}
.flexbox.startalign{
align-items: flex-start;	/* 子要素の高さを揃えず上に付ける */
}
.flexbox.center{
align-items: center;	/* 子要素の高さを揃えず天地中央に置く */
}

#content UL.flexbox>LI{
padding:0;
background:transparent;
}
.flexbox>*>P IMG{
display:block;
}
#content .flexbox>*>*{
margin-top:0.5em;
margin-bottom:0.5em;
line-height:1.2;
}



/*------ 共通 ------*/
.flexbox[class*="part"]>*{
margin:1.5em 0 0 0;
padding:0;
text-indent:0;
}
.flexbox[class*="part"].margin>*{
margin-top:3.0em;
}
.flexbox>*>*:first-child{
margin-top:0;
}


/*------ 2列 ------*/
.flexbox.part2>*{	/* □1.5□ */
width : -webkit-calc( (100% - 1.5em) / 2 );
width : calc( (100% - 1.5em) / 2 );
}
.flexbox.part2.margin>*{	/* □3.0□ */
width : -webkit-calc( (100% - 3.0em) / 2 );
width : calc( (100% - 3.0em) / 2 );
}


/*------ 3列 ------*/
.flexbox.part3>*{	/* □1.5□1.5□ */
width : -webkit-calc( (100% - 3.0em) / 3 );
width : calc( (100% - 3.0em) / 3 );
}
.flexbox.part3.margin>*{	/* □3.0□3.0□ */
width : -webkit-calc( (100% - 6.0em) / 3 );
width : calc( (100% - 6.0em) / 3 );
}

.flexbox.part3::after{	/* ダミーカラム */
content:"";
display: block;
width : -webkit-calc( (100% - 3.0em) / 3 );
width : calc( (100% - 3.0em) / 3 );
}
.flexbox.part3.margin::after{	/* ダミーカラム */
content:"";
display: block;
width : -webkit-calc( (100% - 6.0em) / 3 );
width : calc( (100% - 6.0em) / 3 );
}

/*------ 4列 ------*/
.flexbox.part4>*{	/* □1.5□1.5□1.5□ */
width : -webkit-calc( (100% - 4.5em) / 4 );
width : calc( (100% - 4.5em) / 4 );
}
.flexbox.part4.space-around>*{	/* 0.75□1.5□1.5□1.5□0.75 */
width : -webkit-calc( (100% - 6.0em) / 4 );
width : calc( (100% - 6.0em) / 4 );
}


@media only screen and (min-width:769px) and (max-width:1000px) {	/* 幅の狭いPC用 */
	.flexbox.part4:not(.tab2)>*{	/* □1.5□1.5□ */
	width : -webkit-calc( (100% - 3.0em) / 3 );
	width : calc( (100% - 3.0em) / 3 );
	}
	.flexbox.part4:not(.tab2).space-around>*{	/* 0.75□1.5□1.5□0.75 */
	width : -webkit-calc( (100% - 4.5em) / 3 );
	width : calc( (100% - 4.5em) / 3 );
	}
	.flexbox.part4:not(.tab2)::after{	/* ダミーカラム */
	content:"";
	display: block;
	width : -webkit-calc( (100% - 3.0em) / 3 );
	width : calc( (100% - 3.0em) / 3 );
	}
	.flexbox.part4:not(.tab2)>*:nth-child(n+4){	/* 4番目以降 */
	margin-top:1.5em;
	}

	.flexbox.part4.tab2>*{	/* □1.5□ */
	width : -webkit-calc( (100% - 1.5em) / 2 );
	width : calc( (100% - 1.5em) / 2 );
	}
	.flexbox.part4.tab2.space-around>*{	/* 0.75□1.5□0.75 */
	width : -webkit-calc( (100% - 3.0em) / 2 );
	width : calc( (100% - 3.0em) / 2 );
	}
	.flexbox.part4.tab2>*:nth-child(n+3){	/* 3番目以降 */
	margin-top:1.5em;
	}



}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	.flexbox.part3:not(.tab2)>*,
	.flexbox.part2:not(.tab2)>*{
	width:100%;
	}
	.space-between,
	.space-around{
	justify-content:center;
	}
}
@media only screen and (min-width:541px) and (max-width:768px) {	/* スマホ横用 */
	.flexbox.part4>*,
	.flexbox.tab2[class*="part"] >*{	/* □1.5□ */
	width : -webkit-calc( (100% - 1.5em) / 2 );
	width : calc( (100% - 1.5em) / 2 );
	}
	.flexbox.part4.space-around>*{	/* 0.75□1.5□0.75 */
	width : -webkit-calc( (100% - 3.0em) / 2 );
	width : calc( (100% - 3.0em) / 2 );
	}

	.flexbox.tab2.margin>*{	/* □3.0□ */
	width : -webkit-calc( (100% - 3.0em) / 2 );
	width : calc( (100% - 3.0em) / 2 );
	}
}
@media only screen and (max-width:540px) {	/* スマホ縦用 */
	.flexbox.part4::after,
	.flexbox.part3::after{	/* ダミーカラム非表示 */
	display:none !important;
	}
	.flexbox[class*="part"].tab2>*,
	.flexbox[class*="part"]>*{
	width:100% !important;
	}

}

/*------------------------------------------------
  左右振り分け 任意の幅
------------------------------------------------*/
.layoutbox.flexbox{
margin-bottom:2.0em;
}

.layoutbox>*>*:nth-child(1){
margin-top:0;
}

.layoutbox>*{	/* 初期値は50%50% */
margin-top:1.5em;
width : -webkit-calc(50% - 0.75em) ;
width : calc(50% - 0.75em);
}

/*------ 2:8 ------*/
.w80p+*,
.w20p{
width : -webkit-calc(20% - 0.75em) ;
width : calc(20% - 0.75em);
}
.w20p+*,
.w80p{
width : -webkit-calc(80% - 0.75em) ;
width : calc(80% - 0.75em);
}

/*------ 3:7 ------*/
.w70p+*,
.w30p{
width : -webkit-calc(30% - 0.75em) ;
width : calc(30% - 0.75em);
}
.w30p+*,
.w70p{
width : -webkit-calc(70% - 0.75em) ;
width : calc(70% - 0.75em);
}

/*------ 4:6 ------*/
.w60p+*,
.w40p{
width : -webkit-calc(40% - 0.75em) ;
width : calc(40% - 0.75em);
}
.w40p+*,
.w60p{
width : -webkit-calc(60% - 0.75em) ;
width : calc(60% - 0.75em);
}

/*------ 4.5:5.5 ------*/
.w55p+*,
.w45p{
width : -webkit-calc(45% - 0.75em) ;
width : calc(45% - 0.75em);
}
.w45p+*,
.w55p{
width : -webkit-calc(55% - 0.75em) ;
width : calc(55% - 0.75em);
}


@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	.layoutbox:not(.tab2)>*{
	width:100%;
	}
	.layoutbox>*:nth-child(2n+3){	/* 3番目以降の奇数 */
	margin-top:4.0em;
	}
	.layoutbox>*:nth-child(even){	/* 偶数 */
	margin-top:0;
	}
}
@media only screen and (max-width:540px) {	/* スマホ縦用 */
	.layoutbox.tab2>*{
	width:100%;
	}
}



/*--------------------------------------------------------------------
  clearfix
--------------------------------------------------------------------*/
/*------ 親要素にまとめて回り込み解除 ------*/
MAIN:after{
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

MAIN{
display: inline-table;
min-height:1%;  /* for IE 7*/
}

/* Hides from IE-mac \*/
* html MAIN{
height: 1%;
}
MAIN{
display: block;
}
/* End hide from IE-mac */



/*------ 個別に回り込み解除 ------*/
.clearfix:after{
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix{
display: inline-table;
min-height:1%;  /* for IE 7*/
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */