@charset "utf-8";
/*------------------ based on 19/05/08 */
/* > 1%, last 4 versions, Firefox ESR */
/*------------------------------------ */


/*------------------------- デスクトップ用 ---------------------------*/
@media print, screen and (min-width: 768px) {


/*------------------------------------- 
 グリットレイアウト
-------------------------------------*/
#html1 {
}

/*-- コンテンツエリア --*/
#wrapper-2 {
	width: calc(1060px + 40px);
	padding: 0 20px;
	margin: auto;
	margin-top: 75px;
	margin-bottom: 20px;
}

#nav {
	margin: 0;
}

#wrapper-3 {
	width: 100%;
	float: none;
	clear: both;
	margin: 0;
}



/*-- コンテンツ下エリア --*/
#promos3 {
}


/*-- ローカルナビエリア --*/
#promos1 {
}

#nav {
}

#promos2 {
}


/*------------------------------------- 
 カラムレイアウト
 body IDにindexを設定するとインデックスモード
 body IDにwideを設定するとワイドモード
 ----
 コンテンツエリア幅を変更する場合は1060pxを全置換する事。
 1060px + n * 60px以外の場合は、px以下の端数が出るので注意。
-------------------------------------*/
.multiColumn1 ,
.multiColumn2 ,
.multiColumn3 ,
.multiColumn4 ,
.multiColumn5 {
	display: block;
	clear: both;
}

.column1 ,
.column2 ,
.column3 ,
.column4 ,
.column5 {
	margin-bottom: 5px;
}


.multiColumn1 > .column1 {
	width: 100%;
}

.multiColumn2 > .column1 ,
.multiColumn2 > .column2 {
	width: calc((100% - 20px * 1) / 2);
}
.multiColumn2 > .column1 {
	margin-right: 20px;
}

.multiColumn3 > .column1 ,
.multiColumn3 > .column2 ,
.multiColumn3 > .column3 {
	width: calc((100% - 20px * 2) / 3);
}
.multiColumn3 > .column1 ,
.multiColumn3 > .column2 {
	margin-right: 20px;
}

.multiColumn4 > .column1 ,
.multiColumn4 > .column2 ,
.multiColumn4 > .column3 ,
.multiColumn4 > .column4 {
	width: calc((100% - 20px * 3) / 4);
}
.multiColumn4 > .column1 ,
.multiColumn4 > .column2 ,
.multiColumn4 > .column3 {
	margin-right: 20px;
}

.multiColumn5 > .column1 ,
.multiColumn5 > .column2 ,
.multiColumn5 > .column3 ,
.multiColumn5 > .column4 ,
.multiColumn5 > .column5 {
	width: calc((100% - 20px * 4) / 5);
}
.multiColumn5 > .column1 ,
.multiColumn5 > .column2 ,
.multiColumn5 > .column3 ,
.multiColumn5 > .column4 {
	margin-right: 20px;
}


/*-- インデックスモード --*/
body[id=index] #wrapper-3 {
	width: 1060px;
}


body[id=index] #sharewithmain {
	width: calc(1060px + 20px);
	margin: auto;
}


/*-- ワイドモード --*/
body[id=wide] #wrapper-2 ,
body[id=wide] #wrapper-3 {
	padding: 0;
	width: auto;
	min-width: calc(1060px + 40px);
}

body[id=wide] #page-intro {
	width: 1060px;
	margin-left: auto;
	margin-right: auto;
}

/*-- インデックスモード/ワイドモード カラム幅 --*/
body[id=wide] [role="main"] > .multiColumn1 > .column1 ,
body[id=index] [role="main"] > .multiColumn1 {
	width: 1060px;
}

body[id=wide] [role="main"] > .multiColumn2 > .column1 ,
body[id=wide] [role="main"] > .multiColumn2 > .column2 ,
body[id=index] [role="main"] > .multiColumn2 {
	width: 520px;
	width: calc((1060px - 20px * 1) / 2);
}
body[id=index] [role="main"] > .multiColumn2 {
	margin-right: 20px;
}

body[id=wide] [role="main"] > .multiColumn3 > .column1 ,
body[id=wide] [role="main"] > .multiColumn3 > .column2 ,
body[id=wide] [role="main"] > .multiColumn3 > .column3 ,
body[id=index] [role="main"] > .multiColumn3 {
	width: 340px;
	width: calc((1060px - 20px * 2) / 3);
}
body[id=index] [role="main"] > .multiColumn3 {
	margin-right: 20px;
}

body[id=wide] [role="main"] > .multiColumn4 > .column1 ,
body[id=wide] [role="main"] > .multiColumn4 > .column2 ,
body[id=wide] [role="main"] > .multiColumn4 > .column3 ,
body[id=wide] [role="main"] > .multiColumn4 > .column4 ,
body[id=index] [role="main"] > .multiColumn4 {
	width: 250px;
	width: calc((1060px - 20px * 3) / 4);
}
body[id=index] [role="main"] > .multiColumn4 {
	margin-right: 20px;
}

body[id=wide] [role="main"] > .multiColumn5 > .column1 ,
body[id=wide] [role="main"] > .multiColumn5 > .column2 ,
body[id=wide] [role="main"] > .multiColumn5 > .column3 ,
body[id=wide] [role="main"] > .multiColumn5 > .column4 ,
body[id=wide] [role="main"] > .multiColumn5 > .column5 ,
body[id=index] [role="main"] > .multiColumn5 {
	width: 196px;
	width: calc((1060px - 20px * 4) / 5);
}
body[id=index] [role="main"] > .multiColumn5 {
	margin-right: 20px;
}


/*------------------------------------- 
 スペシャルコンテンツのテンプレート
 インデックスモード・ワイドモードは通常ページと異なる。
-------------------------------------*/
body.special > * {
	max-width: 1060px;
	margin: auto;
}


body[id=index].special #sharewithmain {
	width: calc(100% + 20px);
	margin: auto;
}

body[id=wide].special #sharewithmain {
	max-width: none;
	margin: auto;
}


/*------------------------------------- 
 ローカルナビをサイドに配置するレイアウト
 コンテンツエリア幅を変更する場合は790pxを全置換する事。
 1060px + n * 60px以外の場合は、px以下の端数が出るので注意。
 ※ ワイドモードはサイドナビと共存できない
-------------------------------------*/
/* body:not(.col-subcol) */ #nav {
	clear: none;
	float: right;
	margin: 0;
	width: 230px;
}

body.col-subcol #nav {
	display: none;
}

body:not(.col-subcol) #nav-box {
	margin-bottom: 40px;
}

body:not(.col-subcol) #wrapper-3 {
	clear: none;
	float: left;
	margin: 0;
	width: 790px;
}


body[id=index]:not(.col-subcol) [role="main"] > .multiColumn1 {
	width: 790px;
}

body[id=index]:not(.col-subcol) [role="main"] > .multiColumn2 {
	width: 385px;
	width: calc((790px - 20px * 1) / 2);
}

body[id=index]:not(.col-subcol) [role="main"] > .multiColumn3 {
	width: 250px;
	width: calc((790px - 20px * 2) / 3);
}

body[id=index]:not(.col-subcol) [role="main"] > .multiColumn4 {
	width: 184px;
	width: calc((790px - 18px * 3) / 4);
}

body[id=index]:not(.col-subcol) [role="main"] > .multiColumn5 {
	width: 142px;
	width: calc((790px - 20px * 4) / 5);
}


/*-- インデックスモード --*/
body[id=index]:not(.col-subcol) #sharewithmain {
	width: calc(790px + 20px);
	margin-left: 0;
	text-align: left;
}


/* ４カラムのみ、カラム幅マージン調整 */
body:not(.col-subcol) >* >* >* > .multiColumn4 > .column1 ,
body:not(.col-subcol) >* >* >* > .multiColumn4 > .column2 ,
body:not(.col-subcol) >* >* >* > .multiColumn4 > .column3 ,
body:not(.col-subcol) >* >* >* > .multiColumn4 > .column4 {
	width: 184px;
	width: calc((100% - 18px * 3) / 4);
}
body:not(.col-subcol) >* >* >* > .multiColumn4 > .column1 ,
body:not(.col-subcol) >* >* >* > .multiColumn4 > .column2 ,
body:not(.col-subcol) >* >* >* > .multiColumn4 > .column3 ,
body[id=index]:not(.col-subcol) [role="main"] > .multiColumn4 {
	margin-right: 18px;
}



/*------------------------------------- 
 カラム分割比率変更レイアウト
-------------------------------------*/
/*-- カラム分割比率 --*/
.layout_multi2_column82.multiColumn2 > .column1 {
	width: 78.8%;
	width: calc((100% - 20px * 1) * 0.8);
}
.layout_multi2_column82.multiColumn2 > .column2 {
	width: 18.8%;
	width: calc((100% - 20px * 1) * 0.2);
}

.layout_multi2_column73.multiColumn2 > .column1 {
	width: 68.8%;
	width: calc((100% - 20px * 1) * 0.7);
}
.layout_multi2_column73.multiColumn2 > .column2 {
	width: 28.8%;
	width: calc((100% - 20px * 1) * 0.3);
}

.layout_multi2_column64.multiColumn2 > .column1 {
	width: 58.8%;
	width: calc((100% - 20px * 1) * 0.6);
}
.layout_multi2_column64.multiColumn2 > .column2 {
	width: 38.8%;
	width: calc((100% - 20px * 1) * 0.4);
}

.layout_multi2_column46.multiColumn2 > .column1 {
	width: 38.8%;
	width: calc((100% - 20px * 1) * 0.4);
}
.layout_multi2_column46.multiColumn2 > .column2 {
	width: 58.8%;
	width: calc((100% - 20px * 1) * 0.6);
}

.layout_multi2_column37.multiColumn2 > .column1 {
	width: 28.8%;
	width: calc((100% - 20px * 1) * 0.3);
}
.layout_multi2_column37.multiColumn2 > .column2 {
	width: 68.8%;
	width: calc((100% - 20px * 1) * 0.7);
}

.layout_multi2_column28.multiColumn2 > .column1 {
	width: 18.8%;
	width: calc((100% - 20px * 1) * 0.2);
}
.layout_multi2_column28.multiColumn2 > .column2 {
	width: 78.8%;
	width: calc((100% - 20px * 1) * 0.8);
}



/*------------------------------------- 
 フッターエリア
-------------------------------------*/
/*-- セクションフッター --*/
#section-site-info {
}

#section-site-info-box {
}

/*-- フッター --*/
#site-info {
	min-width: calc(1060px + 40px);
	margin-top: 150px;
}

#site-info-box {
	margin: auto;
}


/*------------------------------------- 
 ヘッダエリア
-------------------------------------*/
/*-- 画像とテキストの場合のみ --*/
#branding ,
#logo ,
#nav-meta {
	display: none;
}

/*-- 更新日表示 --*/
#pub-date {
	width: 1060px;
	margin: auto;
}

#pub-date p {
	text-align: right;
}

/*-- セクションヘッダー（総合トップ・スペシャル以外） --*/
#section-header {
	margin: 30px auto 20px auto;
	width: 1060px;
	background: #0d8ccc;
	border-radius: 5px;
	overflow: hidden;
}

#section-header h5 {
}

#section-header p {
}




}
/*--------------------------- スマホ用 -----------------------------*/
@media handheld, only screen and (max-width: 767px) {


/*------------------------------------- 
 グリットレイアウト
-------------------------------------*/
#html1 {
}

/*-- コンテンツエリア --*/

/* -- ナビ表示位置順 -- */
#wrapper-2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

#wrapper-2 > * {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
}

#nav {
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 3;
	order: 3;
}

#wrapper-3 {
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 1;
	order: 1;

	padding: 8px 5px;
}

/*-- コンテンツ下エリア --*/
#promos3 {
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 2;
	order: 2;
}


/*-- サイドナビエリア --*/
#nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

#nav > * {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
}

#promos1 {
	-ms-flex-order: 1;
	order: 1;
}

#nav-box {
	-ms-flex-order: 2;
	order: 2;
}

#promos2 {
	-ms-flex-order: 3;
	order: 3;
}

#promos2 > .promos {
	padding: 0 10px;
}



body.col-subcol #nav {
	display: none;
}


/*------------------------------------- 
 カラムレイアウト
 body IDにindexを設定するとインデックスモード
 body IDにwideを設定するとワイドモード
-------------------------------------*/
.multiColumn1 ,
.multiColumn2 ,
.multiColumn3 ,
.multiColumn4 ,
.multiColumn5 {
	display: inline;
	clear: none;
}

.column1 ,
.column2 ,
.column3 ,
.column4 ,
.column5 {
	margin-bottom: 5px;
}

/* 3カラムと4カラムと5カラムが混ざらない様に */
.multiColumn3 + .multiColumn5:before ,
.multiColumn5 + .multiColumn3:before ,
.multiColumn1:before ,
.multiColumn2:before ,
.multiColumn4:before {
	content: "";
	display: block;
	clear: both;
}

/* -- 1～3カラムは1カラムに -- */
.multiColumn1 > .column1 ,
.multiColumn2 > .column1 ,
.multiColumn2 > .column2 ,
.multiColumn3 > .column1 ,
.multiColumn3 > .column2 ,
.multiColumn3 > .column3 ,
body[id=index] [role="main"] > .multiColumn1 ,
body[id=index] [role="main"] > .multiColumn2 ,
body[id=index] [role="main"] > .multiColumn3 {
	width: calc(100% - 10px);
	margin: 0 5px;
}

/* -- 4～5は2カラムに -- */
.multiColumn4 > .column1 ,
.multiColumn4 > .column2 ,
.multiColumn4 > .column3 ,
.multiColumn4 > .column4 ,
.multiColumn5 > .column1 ,
.multiColumn5 > .column2 ,
.multiColumn5 > .column3 ,
.multiColumn5 > .column4 ,
.multiColumn5 > .column5 ,
body[id=index] [role="main"] > .multiColumn4 ,
body[id=index] [role="main"] > .multiColumn5 {
	width: calc(50% - 10px);
	margin: 0 5px;
}



/*-- インデックスモード --*/
body[id=index] #sharewithmain {
	margin-left: 0;
	text-align: left;
}

/*-- ワイドモード --*/
body[id=wide] #wrapper-3 {
	padding-left: 0;
	padding-right: 0;
}



/*------------------------------------- 
 フッターエリア
-------------------------------------*/
/*-- セクションフッター --*/
#section-site-info {
}

#section-site-info-box {
}

/*-- フッター --*/
#site-info {
}

#site-info-box {
}

p#copyright {
/*	padding: 10px 0; */
	font-size: 10px;
}



/*------------------------------------- 
 ヘッダエリア
-------------------------------------*/
/*-- 画像とテキストの場合のみ --*/
#branding ,
#logo ,
#nav-meta {
	display: none;
}

/*-- 更新日表示 --*/
#pub-date {
	margin: auto;
}

#pub-date p {
	text-align: right;
}

/*-- セクションヘッダー（総合トップ・スペシャル以外） --*/
#section-header {
	background: #555;
	border: 1px solid #333;
	color: #fff;
}

#section-header h5 {
}

#section-header p {
}





}