﻿@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@500&family=Roboto:wght@400;700&display=swap');


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




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


BODY{
margin:0;
padding:0;
color:#000;
background:#999;	/* フッター(コピーライツ)と同じ色 */
font-size: 100.0%;	/* 16pxベース */
line-height:1.6;
text-align: center;
letter-spacing:1px;
font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}
* html body { /* for IE6 */ 
font-size: 100.0%;	/* 16pxベース */
}
*:first-child+html body { /* for IE7 */
font-size: 100.0%;	/* 16pxベース */
}


/*------ フォントサイズ ------
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;
}

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

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


@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	IMG{
	width:auto;
	height:auto;
	max-width: 100%;
	}
	.block_tablet_sp{	/* タブレット・スマホの時だけ改行する */
	display:block;
	}
}

@media only screen and (min-width:541px) and (max-width:768px) {	/* スマホ横用 */
	.pc,
	.sp{
	display:none !important;
	}
	.tablet_sp,
	.pc_tablet,
	.tablet{
	display:inline-block !important;
	}
	.block_tablet{	/* タブレット・スマホ横の時だけ改行する */
	display:block;
	}
}

@media only screen and (max-width:540px) {	/* スマホ縦用 */
	*{
	word-break: break-all;
	}
	.pc_tablet,
	.pc,
	.tablet{
	display:none !important;
	}
	.tablet_sp,
	.sp{
	display:inline-block !important;
	}
	.block_sp{	/* スマホ縦の時だけ改行する */
	display:block;
	}
}


/*--------------------------------------------------------------------
  リンクテキスト
--------------------------------------------------------------------*/
A{
color:#00C;
}
A:visited{
color:#969;
}
A:hover{
color:#13E;
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 #13E;
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 #13E;
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 #13E;
font-size:114.3%;	/* 16px */
font-weight:normal;
clear:both;
}

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



/*--------------------------------------------------------------------
  インデント 
--------------------------------------------------------------------*/
.indent{
margin-left:15px;
}



/*------ #contentの直下は両サイド20px ------*/
#content>P,
#content>DIV,
#content>H5,
#content>DL,
#content>UL,
#content>OL,
#content>TABLE{
margin-right:20px;
margin-left:20px;
}

#content>H5+DIV{
margin-left:30px;
}


#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:#690;
}



/*--------------------------------------------------------------------
  リストスタイル
--------------------------------------------------------------------*/
UL{
margin:25px 0;
padding:0;
list-style:none;
}
LI UL,
DD UL,
TD UL{
margin-top:5px;	/* ネスト時は上余白を少な目に */
margin-bottom:0;
}

#content UL>LI{	/* ULの直下のLI */
margin:8px 0;
padding:0 0 0 15px;
background:url(img/liststyle.gif) no-repeat 0 0.5em;
}

#content TD UL>LI{
margin:0;
}
#content TD UL>LI+LI{
margin:8px 0 0 0;
}


/*------------------------------------------------
  横並びリスト
------------------------------------------------*/
UL.inline{
}
UL.inline LI{
padding-right:20px !important;
display:inline-block;
*display: inline;		/* IE7対策 */
*zoom: 1;  				/* IE7対策 */
}
UL.inline LI .extralarge{
vertical-align:top;
line-height:1em;
}


/*------------------------------------------------
  番号付きリスト
------------------------------------------------*/
OL{
margin:25px 0;
padding:0 0 0 25px;
}
LI OL,
DD OL,
TD OL{
margin-top:5px;	/* ネスト時は上余白を少な目に */
}

OL>LI{
margin:10px 0;
padding:0;
list-style-type : decimal;
background:url(img/spacer.gif) no-repeat;	/* Android4.0対策 */
}




/*------------------------------------------------
  注釈 ※ リスト
------------------------------------------------*/
#content UL.kome>LI,
#content LI.kome{
padding-left:20px;
position: relative;
background:url(img/spacer.gif) no-repeat;	/* Android4.0対策 */
}

UL.kome>LI>SPAN.komemark,
LI.kome>SPAN.komemark{
position: absolute;
top: 0;
left:-0.1em;
color:#C00;
}
* html UL.kome>LI>SPAN.komemark,
* html UL>LI.kome>SPAN.komemark{ 	/* for win ie6 */
top: -0.3em;
}
*:first-child+html UL.kome>LI>SPAN.komemark,
*:first-child+html UL>LI.kome>SPAN.komemark{	 /* for win ie7 */
top: -0.3em;
}





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



/*------------------------------------------------
  罫線を表示するタイプの表
------------------------------------------------*/
TABLE.data_table{
border-collapse:collapse;
border:1px solid #999;
}
#one_colomun #content .data_table{
margin-right:auto;
margin-left:auto;
width:810px;
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#one_colomun #content .data_table{
	width:92%;
	}
}
#one_colomun #content .data_table{
margin-right:auto;
margin-left:auto;
}

TABLE.data_table CAPTION{
text-align:right;
}
.data_table TH{
padding:15px;
border:1px solid #999;
background:#EEE9E6;	/* Beige Cameo */
}

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


/*------------------------------------------------
  スマホ表示時にセルをスライドさせるタイプの表
------------------------------------------------*/
TABLE.float_table{
}
.float_table TH{
}
.float_table TD{
}

@media only screen and (max-width:540px) {	/* スマホ縦用 */
	TABLE.float_table{
a	margin:inherit 6% inherit 0;
	width:92%;
	border-top:none;
	border-right:none;
	}
	.float_table TH,
	.float_table TD{
	float:left;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}
	.float_table TH{
	padding:10px 3% 5px 3%;
	border-bottom:1px solid #DCDCDC;
	border-left:none;
	text-align:left;
	}
	.float_table TD{
	padding:10px 3%;
	border-top:none;
	border-bottom:none;
	border-left:none;
	}
}




/*--------------------------------------------------------------------
  「トップページ」固有の設定
--------------------------------------------------------------------*/
#one_colomun #top_left{	/* 「上メニュー」左右分割 左 */
margin:40px 0 20px 0;
float:left;
/* width:520px; 初期値 */
width:460px;
text-align: left;
}
#one_colomun #top_right{	/* 「上メニュー」左右分割 右 */
margin:40px 0 20px 0;
float: right;
/* width:400px; 初期値 */
width:450px;
}

@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#one_colomun #top_left,	/* 「上メニュー」左右分割 左 */
	#one_colomun #top_right{	/* 「上メニュー」左右分割 右 */
	margin:40px auto 20px auto;
	float:none;
	width:94%;
	}
}

/*------------------------------------------------
  トップページ左側 フリーPR欄
------------------------------------------------*/
#appeal H3{
margin:0;
/* padding:0.3em 0 0.3em 6px; */
/* border-left:4px solid #13E; */
/* font-size:114.3%;	 初期値 16px */

font-size:171.4%;	/* 24px */
font-weight:normal;
}
#appeal H3 .large{
color:#F00;
}
#appeal H4{
margin:5px 0 0 0;
padding:0;
font-weight:normal;
color:#60C;
color:#36C;
}


#appeal P{
margin-left:15px;
}
#appeal H3+P{	/* H3のすぐ下の段落は上余白を少なく */
margin-top:10px;
}
#appeal H3~H3{	/* 2個目のH3は上に余白を持たせる */
margin-top:50px;
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#appeal IMG{
	margin:0 auto;
	display:block;
	}
}
@media only screen and (min-width:541px) and (max-width:768px) {	/* スマホ横用 */
	#appeal H3{
	text-align:center;
	}

}
@media only screen and (max-width:540px) {	/* スマホ縦用 */
	#appeal IMG.left{
	margin:auto auto 10px auto;
	display:block;
	float:none;
	width:auto;
	}
}

/*------------------------------------------------
  トップページ右側 お知らせ欄
------------------------------------------------*/
#news H4{
margin:0;
padding:0.4em 0 0.3em 10px;
border-bottom:4px solid #13E;
font-size:114.3%;	 /* 16px */
font-weight:normal;
}


/*------------------------------------------------
  #one_colomn 「上メニュー」
------------------------------------------------*/
#news UL{
margin:0;
padding:0;
}
#news LI{
margin:10px 0;
padding:10px 0 0 18px;
/ background:url(img/liststyle_arrow.gif) no-repeat 5px 1.2em;
}
#news LI:before{
margin-left:-10px;
margin-right:6px;
content: "\f0da";
font-family: "Font Awesome 5 Free";
font-weight : 900;
color:#C00;
}

#news LI+LI{
border-top:1px dotted #CCC;
}

/*------------------------------------------------
  #two_colomn 「左メニュー」「右メニュー」
------------------------------------------------*/
#two_colomun_leftmenu #news,
#two_colomun_rightmenu #news{
margin-top:30px;
}
#news DL{
margin:15px 0 0 0;
padding:0;
}
#news DT{
margin:0 0 10px 5px;
padding:0;
width:7em;
float:left;
}
#news DD{
margin:0 0 10px 5px;
padding:0 0 10px 9em;
/ background:url(img/liststyle_arrow.gif) no-repeat 8em 0.4em;
border-bottom:1px dotted #CCC;
}
#news DD:before{
margin-left:-10px;
margin-right:6px;
content: "\f0da";
font-family: "Font Awesome 5 Free";
font-weight : 900;
color:#C00;
}

/*------------------------------------------------
  トップページ右側 住所欄 
------------------------------------------------*/
#top_address{
/* margin:50px 0 0 0; 初期値 */
/* padding:0 0 9px 0; 初期値 */
margin:40px 0 0 0;
padding:20px;
border:1px solid #DCDCDC;
}
#top_address H5{
margin:0;
/*
padding:0.4em 0 0.4em 14px;
background:#13E;
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 IFRAME{
margin:10px 0;
border:1px solid #DCDCDC;
padding:4px;
background:#FFF;
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#top_address IFRAME{
	margin:0;
	padding:0;
	width:100%;
	height:300px;
	border:none;
	}
}
@media only screen and (max-width:540px) {	/* スマホ縦用 */
	#top_address{
	padding:0;
	border:none;
	}
}

/*--------------------------------------------------------------------
  「コンテンツ」固有の設定
--------------------------------------------------------------------*/
/*------------------------------------------------
  職種文字揃え
------------------------------------------------*/
.staff{
margin:0;
width:18.0em;
}
.staff DT{
margin:0.1em 0;
display:inline-block;
width:13.0em;
}
.staff DD{
margin:0.1em 0;
display:inline-block;
text-align:right;
width:4.0em;
}
.staff DD::before{
margin-bottom:-1.5em;
content:"…";
display:block;
width:1.0em;
}
.staff+.staff{
margin-top:1.5em;
}


/*------------------------------------------------
  事業案内
------------------------------------------------*/
#guide_item{
margin-top:-0.5em;
margin-bottom:0;
}
#content #guide_item LI{
background:#FFF;
}
#guide_item+P{
margin-top:0;
}

#recruit_info TH{
white-space:nowrap;
}

/*------------------------------------------------
   リンクボタン（大）
------------------------------------------------*/
.link_large,
.link_large:visited{
margin:auto;
padding:0.3em 1em;
font-size:125.0%;	/* 20px */
color:#FFF;
text-decoration:none;
zoom: 1;
outline: none;
text-align:center;
display:inline-block;
color:#FFF;
background:#13E;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius:4px; 
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.link_large.after::after{
margin-left:0.5em;
font-family: "Font Awesome 5 Free";
display:inline-block;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
content: "\f138";
font-weight : 900;
vertical-align:middle;
}
.link_large:hover{
color:#FFF;
background:#00008B;
}



@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	.link_large{
	padding:0.5em 0;
	display:block;
	width:100%;
	}
}
@media only screen and (min-width:541px) and (max-width:768px) {	/* スマホ横用 */
	.link_large{
	max-width:600px;
	}
}

/*------------------------------------------------
  丸数字
------------------------------------------------*/
.number{
display:inline-block;
background:#FFF;
border:1px solid #000;
width:1.1em;
line-height:1.1;
text-align:center;
letter-spacing:0;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
text-indent:0;
font-size:90%;
vertical-align:middle;
}

/*------------------------------------------------
  ギャラリー設定
------------------------------------------------*/
.gallery-popup A{
margin:0 auto;
padding:0;
cursor: url(img/magnify_plus.cur), pointer;	/* カーソルを虫眼鏡に */
line-height:normal;	/* IE7の隙間対策 */
vertical-align:top;	/* IE7の隙間対策 */
display:block;
position:relative;
outline:none;

height:300px;	/* 縦長画像の天地をカット */
overflow:hidden;
}
@media only screen and (max-width:540px) {	/* スマホ縦用 */
	.gallery-popup A{
	height:auto;
	}
}
#photos .gallery-popup A{
margin:0 auto 5px auto;
display:table;
}


.gallery-popup A:hover{
opacity:0.8;	/* Safari,Opera,Chrome */
filter:alpha(opacity=80); 	/* IE8,IE7 */
-ms-filter:"alpha(opacity=80)";	/* IE8 */
-moz-opacity: 0.8;	/* FireFox */
zoom:1;
}

.gallery-popup A IMG{
vertical-align:top;
}



/*------------------------------------------------
  アイテム横並び
------------------------------------------------*/
#content UL.item{
margin:25px auto;
padding:0;
display:table;
text-align:center;
letter-spacing:-1em;	/* 横並びの隙間対策 */
}
#content UL.item>LI{
margin:0;
padding:0;
background:none;
display:inline-block;
*display: inline;		/* IE7対策 */
*zoom: 1;  				/* IE7対策 */
vertical-align:top;
letter-spacing:1px;	/* 横並びの隙間対策 letter-spacing 復活 */
}


UL.item>LI>*{
margin-top:0;
margin-bottom:0;
}
UL.item>LI>*~*{
margin-top:1.8em;
}

#content UL.item.part2>LI{
margin-left:2%;
width:48.5%;
text-align:center;
}
#content UL.item.part2>LI:nth-child(odd){	/* 奇数 */
margin-left:0;
}
#content UL.item.part2>LI:nth-child(n+3){	/* 3個目以降 */
margin-top:20px;
}

#content UL.item>LI IMG{
/* margin-bottom:0.5em; キャプション有の時 */
width:100%;
display:block;
}



@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#content UL.item{
	margin-right:auto;
	margin-left:auto;
	width:90%;
	}
	#content UL.item>LI{
	margin:0 0 25px 0 !important;
	width:100% !important;
	}
}




/*------------------------------------------------
  アクセスマップ 
------------------------------------------------*/
#accessmap{
margin:auto !important;
text-align:center;
border:1px solid #CCC;
}
#two_colomun_leftmenu #accessmap,
#two_colomun_rightmenu #accessmap{
width:610px;
}
#one_colomun #accessmap{
width:810px;
}


#accessmap IFRAME{
margin:4px;
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#one_colomun #accessmap{
	padding:4px;
	width:92%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}

	#accessmap IFRAME{
	margin:0;
	width:100%;
	height:300px;
	}
}


/*--------------------------------------------------------------------
  共通レイアウト枠
--------------------------------------------------------------------*/

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


#wrap{
min-height: 100%;
_height: 100%; /* for IE6 */
background:#FFF;	/* フッター以外の背景色 */
min-width:960px;
}

#box{
margin:0 auto;
padding-bottom:100px; /* フッター下部固定 */
width:960px;
text-align:left;
background:#FFF;
}
#one_colomun #content{	/* 「上メニュー」コンテンツ部  860px */
margin:20px 50px 50px 50px;
}
#two_colomun_leftmenu #content_top,	/* 「左メニュー」トップページ右側コンテンツ部 */
#two_colomun_leftmenu #content{	/* 「左メニュー」右側コンテンツ部 */
margin: 20px 0 50px 0;
float: right;
width: 710px;
}
#two_colomun_rightmenu #content_top,	/* 「右メニュー」トップページ左側コンテンツ部 */
#two_colomun_rightmenu #content{	/* 「右メニュー」左側コンテンツ部 */
margin: 20px 0 50px 0;
float: left;
width: 710px;
}

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

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


}

/*--------------------------------------------------------------------
  サイドメニュー欄 
--------------------------------------------------------------------*/
#two_colomun_leftmenu #global_navi,
#two_colomun_rightmenu #global_navi{
margin:20px 0 0 0;
width:200px;
background:#FFF;
}

#two_colomun_leftmenu #global_navi{	/* 「左メニュー」 */
float:left;
}
#two_colomun_rightmenu #global_navi{	/* 「右メニュー」 */
float:right;
}


#two_colomun_leftmenu #global_navi UL,
#two_colomun_rightmenu #global_navi UL{
width:200px;
border-top:1px solid #CCC;
}

#two_colomun_leftmenu #global_navi UL LI,
#two_colomun_rightmenu #global_navi UL LI{
margin:0;
padding:0;
floatn:none;
display:block;
background:none;
border-bottom:1px solid #CCC;
width:100%;
}


#two_colomun_leftmenu #global_navi UL LI A,
#two_colomun_rightmenu #global_navi UL LI A{
color:#000;
width:auto;
text-align:left;
background:#FFF;
/ padding:0.8em 0 0.8em 15px;
/ background:#FFF url(img/menu_arrow.gif) no-repeat 3px 1.05em;
}
#two_colomun_leftmenu #global_navi UL LI A:hover,
#two_colomun_rightmenu #global_navi UL LI A:hover{
background:#CCC;
color:#666;
text-decoration:none;
/ background:#CCC url(img/menuh_arrow.gif) no-repeat 3px 1.05em;
}
#two_colomun_leftmenu #global_navi UL LI A::before,
#two_colomun_rightmenu #global_navi UL LI A::before{
margin-left:7px;
margin-right:6px;
content: "\f0da";
font-family: "Font Awesome 5 Free";
font-weight : 900;
color:#13E;
}
#two_colomun_leftmenu #global_navi UL LI:hover A::before,
#two_colomun_rightmenu #global_navi UL LI:hover A::before{
color:#FFF;
}
#two_colomun_leftmenu #global_navi UL LI.active A,
#two_colomun_rightmenu #global_navi UL LI.active A{
background:#E6E6FA;
/ background:#E6E6FA url(img/menu_arrow.gif) no-repeat 3px 1.05em;
}
#two_colomun_leftmenu #global_navi UL LI.active:hover A::before,
#two_colomun_rightmenu #global_navi UL LI.active:hover A::before{
color:#13E;
}


/*--------------------------------------------------------------------
  ヘッダー
--------------------------------------------------------------------*/
#header{
margin:0;
background:#FFF;
min-width:960px;
}
#two_colomun_leftmenu #header,
#two_colomun_rightmenu #header{
border-bottom:1px solid #CCC;
}

.home #header{
height: 550px;
background:#FFF url(img/top.jpg) center 30% no-repeat;
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
position:relative;
text-align:left;
}

#header_inner{
margin:0 auto;
/* padding:50px 0 0 0;  初期値 */
padding:20px 0;
/* height:200px; 初期値 (250px)*/
text-align:left;
/* position:relative; */
width:960px;	/* 追加 */
}
.home #header_inner{
position:absolute;
top:5px;
left:5px;
width:21em;
background-color:rgba(255,255,255,0.85);
border:2px solid #13E;
}


#header_inner H1{
margin:0 auto 10px auto;
padding:0 5px;
font-family: 'Noto Sans JP', "メイリオ", Meiryo, sans-serif;
font-weight:700;
font-size:175.0%;	/* 28px */
}
#header_inner H1 A{
padding-left:60px;
color:#000;
text-decoration:none;
background:url(img/logo.png) no-repeat 5px center;
display:inline-block;
line-height:48px;
}
#header_inner H1 RT{
font-size:42.9%;	/* 12px */
font-weight:400;
}

#header_inner H2{
padding:0 10px;
font-size:100.0%;	/* 14px */
}

#header_inner H1 A:hover{
filter:alpha(opacity=70); /*IE*/
-moz-opacity:0.70; /*FF*/
opacity:0.70;
}

@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#header{
	min-width:auto;
	min-width:initial;
	}
	#header_inner{
	padding:10px 0;
	background-position:right 70px;
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	-ms-background-size:cover;
	height:auto;
	width:100%;
	}

	#header_inner H1{
	margin:0 auto;
	display:inline-block;
	}
	#header_inner H2{
	display:none;
	}


	.home #header{
	height:auto;
	background:#FFF;
	}
	.home #header_inner{
	position:static;
	width:auto;
	border:none;
	}
	.home #header::after{
	content:"";
	display:block;
	width:100%;
	background-image:url(img/top.jpg);
	background-repeat:no-repeat;
	background-position:center 30%;
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	-ms-background-size:cover;
	}
}
@media only screen and (min-width:541px) and (max-width:768px) {	/* スマホ横用 */
	.home #header::after{
	height:300px;
	}
}
@media only screen and (max-width:540px) {	/* スマホ縦用 */
	#header_inner{
	padding:60px 0 0 0;
	text-align:center;
	}
	#header_inner H1{
	margin:10px auto;
	}

	#header_inner H1 A{
	padding:55px 0 0 0;
	color:#000;
	background-position:center 0;
	}
	.home #header::after{
	height:250px;
	}

}

/*------------------------------------------------
  Homeボタン
------------------------------------------------*/
DIV#sp_home{
display:none;
z-index:101;
}

@media only screen and (min-width:541px) and (max-width:768px) {	/* スマホ横用 */
	DIV#sp_home{
	width:60px;
	height:60px;
	position:absolute;
	top:5px;
	right:80px;
	display:block;
	}
	DIV#sp_home A{
	width:60px;
	height:60px;
	display: block;
	background:url(img/sp_nav.png) no-repeat 0 0;
	background-size:auto 60px !important;
	-webkit-background-size:auto 60px;
	-moz-background-size:auto 60px;
	-o-background-size:auto 60px;
	-ms-background-size:auto 60px;
	}

	DIV#sp_home A SPAN{
	display:none;
	}


}


@media only screen and (max-width:540px) {	/* スマホ縦用 */
	DIV#sp_home{
	width:60px;
	height:60px;
	position:absolute;
	top:5px;
	left:10px;
	display:block;
	}
	DIV#sp_home A{
	width:60px;
	height:60px;
	display: block;
	background:url(img/sp_nav.png) no-repeat 0 0;
	background-size:auto 60px !important;
	-webkit-background-size:auto 60px;
	-moz-background-size:auto 60px;
	-o-background-size:auto 60px;
	-ms-background-size:auto 60px;
	}

	DIV#sp_home A SPAN{
	display:none;
	}

}



/*------------------------------------------------
  メニューバー「上メニュー」
------------------------------------------------*/
#global_navi{
margin:0;
background:#13E;
}

/*------ 全体 ------*/
#global_navi > A,
#global_navi > SPAN{
display: none;
}
#global_navi LI{
position: relative;
}
#global_navi LI A{
display: block;
}

/*------ PCメインメニュー第一階層 ------*/
#global_navi UL{
margin:0 auto;
padding:0;
width:961px;
display:table;
white-space:nowrap;
background:url(img/global_menu_bg.png);
table-layout:fixed;
}

#global_navi UL LI{
margin: 0;
padding:0;
display:table-cell;
}


#global_navi UL LI A{
margin:0 1px 0 0;
padding:0.8em 0;
display: block;
background:#13E;
color:#FFF;
text-decoration:none;
text-align:center;
}
#global_navi UL LI:first-child A{
margin:0 1px;
}

#global_navi UL LI A:hover{
background:#00008B;
}

#global_navi UL LI.active A{
background-image:url(img/active.png);
background-position:center bottom;
background-repeat:no-repeat;
}

/*------ 英文 ------*/
#global_navi UL LI A SPAN{
display:block;
font-size:71.4%;	/* 10px */
}


/*------ スマホ横以下用 ------*/
@media only screen and (max-width:768px) {
	
	/* ------ スマホ：メインメニューアウトライン ------ */

	#two_colomun_leftmenu #global_navi,
	#two_colomun_rightmenu #global_navi,
	#global_navi{
	margin:0;
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:5px;
	background:none;
	}
	#global_navi > SPAN{
	display:block;
	padding:0;
	position:absolute;
	top:5px;
	right:10px;
	width: 60px;
	height: 60px;
	text-align: left;
	text-indent: -9999px;
	background:url(img/sp_nav.png) no-repeat -60px 0;
	background-size:auto 60px !important;
	-webkit-background-size:auto 60px;
	-moz-background-size:auto 60px;
	-o-background-size:auto 60px;
	-ms-background-size:auto 60px;
	cursor:pointer;
	}

	UL#globalmenu LI SPAN{
	display: block;
	}



	/*------------------------------------------------
	  スマホ：メインメニュー第一階層
	------------------------------------------------*/
	#two_colomun_leftmenu #global_navi UL,
	#two_colomun_rightmenu #global_navi UL,
	UL#globalmenu{
	margin:0 auto;
	width:100%;
	min-width:auto;
	min-width:initial;
	max-width:auto;
	max-width:initial;
	height: auto !important;
	display: none;
	position: absolute;
	top:65px;
	right:0;
	border-top:none;
	background:#13E;
	filter:alpha(opacity=97); /*IE*/
	-moz-opacity:0.97; /*FF*/
	opacity:0.97;
	z-index:110;	/* IE7以下でプルダウンメニューが隠れるための対策 */
	}
	UL#globalmenu.open{
	display: table;
	}
	#global_navi > SPAN.open{
	background-position:-120px 0;
	}

	#two_colomun_leftmenu #global_navi UL LI,
	#two_colomun_rightmenu #global_navi UL LI,
	UL#globalmenu>LI{
	margin:0 !important;
	padding:0 !important;
	background-image:none;
	text-align:center;
	border-top:solid 1px #666;
	border-bottom:none;
	}

	#two_colomun_leftmenu #global_navi UL LI A,
	#two_colomun_rightmenu #global_navi UL LI A,
	UL#globalmenu>LI>A,
	UL#globalmenu>LI>A:visited{
	margin-left:0 !important;
	padding:0.5em 10px !important;
	line-height:2em !important;
	height:auto;
	font-size:112.5%;	/* 18px */
	clear:both;
	color:#FFF;
	text-align:center;
	background-color:#13E;
	background-image:none;
	text-decoration:none;
	width:auto !important;
	}
	#two_colomun_leftmenu #global_navi UL LI A:hover,
	#two_colomun_rightmenu #global_navi UL LI A:hover,
	UL#globalmenu>LI>A:hover{
	background-color:#00008B !important;
	color:#FFF;
	}
	#two_colomun_leftmenu #global_navi UL LI.active A,
	#two_colomun_rightmenu #global_navi UL LI.active A,
	UL#globalmenu >LI.active >A{
	color:#FFF;
	background:#00C;
	}
	UL#globalmenu >LI.active >A:hover{
	color:#FFF;
	}

	#two_colomun_leftmenu #global_navi UL LI A::before,
	#two_colomun_rightmenu #global_navi UL LI A::before{
	margin:0;
	content: "";
	display:none;
	}

	#global_navi UL LI A SPAN{
	display:none;
	}

}
@media only screen and (max-width:540px) {	/* スマホ縦用 */
	#two_colomun_leftmenu #global_navi UL LI,
	#two_colomun_rightmenu #global_navi UL LI,
	UL#globalmenu>LI{
	display:block;
	}

}

/*--------------------------------------------------------------------
  パンくず・アンカー
--------------------------------------------------------------------*/
/*------------------------------------------------
  パンくずリスト
------------------------------------------------*/
#pkl{
padding:0 0.5em;
font-size:75.0%;	/* 12px */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#one_colomun #pkl{
margin:15px 0;
}
#two_colomun_leftmenu #pkl,		/* 「左メニュー」 */
#two_colomun_rightmenu #pkl{	/* 「右メニュー」 */
margin:0;
}
@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#one_colomun #pkl{
	margin:0 calc( 50% - 50vw + 9px );
	padding:0.5em calc( 50vw - 50% - 9px );
	font-size:87.5%;	/* 14px */
	/* width:100vw; */
	background:#EEE9E6;	/* Beige Cameo */
	}
}


/*------------------------------------------------
  アンカー 
------------------------------------------------*/
#pt{
margin:0 auto;
position: relative;
width:960px;
height:20px;
clear:both;	/* 左右分割をクリア */
font-size:120.0%;	/* 12px */
}
#pt A{
padding:0.5em 0;
display:block;
color:#FFF;
background:#554738;	/* フッター背景色と同じ色 */
width:9em;
text-align:center;
text-decoration:none;
position: absolute;
bottom:20px;
right:0;
}
#pt A:hover{
color:#CCC;
}




/*--------------------------------------------------------------------
  フッター
--------------------------------------------------------------------*/
#footer{
margin-top: -60px;	/* フッター下部固定 */
height:60px;		 /* フッター下部固定 */
padding:0 0 0 0;
font-size:71.4%;	/* 10px */
background:#554738;
color:#FFF;
min-width:960px;
}

@media only screen and (max-width:768px) {	/* スマホ横以下用 */
	#pt{
	width:96%;
	}
	#footer{
	min-width:auto;
	min-width:initial;
	}
}




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

#global_navi,
#box,
#appeal,
#news DL{
display: inline-table;
min-height:1%;  /* for IE 7*/
}

/* Hides from IE-mac \*/
* html #global_navi,
* html #box,
* html #appeal,
* html #news DL{
height: 1%;
}
#global_navi,
#box,
#appeal,
#news DL{
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 */

