@charset "utf-8";

/*
	maple/nccore/MobileCheck スマホをPC画面へ
	webapp/modules/announcement/templates/default/announcement_view_main_init.html レスポンシブ対応
	webapp/modules/multidatabase/components/View.class.php レスポンシブ対応
	webapp/modules/multidatabase/templates/default/multidatabase_common_metadata_detail.html レスポンシブ対応
*/

/*
section table   { width: 100%; }
section th, section td  { padding: 10px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }
*/

/*----------------------------------------------------
 NC2 レスポンシブ対応CSS - PC
----------------------------------------------------*/

/*
#_container {
	width: 1000px;
}
*/

.container {
	margin: 0 auto;
}

/*
#_container { max-width: 1000px; }
/*

/* グループ化したものを中央寄せ
----------------------------------------------*/
/*
.module_grouping_box {
	width: auto !important;
}
*/

/* 中央カラムグループ幅 modules/page/main.html でid 追加(必要な場合)
----------------------------------------------*/
/*
#middle_column {
	width: 1000px;
	margin: 0 auto;
}

.module_box {
	margin: 0 auto;
}
*/

/* PCモードでもスマホモードでも、画像はブラウザの幅に応じて変更
---------------------------------------*/
img {
	float: none;
	height: auto;
	max-width: 100%;
}

div.responsive_area img {
	height: auto !important;
}

/* NC 標準のタブがつまる問題があるので、調整
---------------------------------------*/
.comptabset_tabset img {
	max-width: none;
}
.comptabset_linespace img {
	max-width: none;
}

/* スマホでポップアップの閉じるボタンが小さくなるための対応
---------------------------------------*/
.th_system_btn {
	max-width: none;
}

/* 画像の自動リサイズ。画像の入る可能性のあるエリア用(お知らせモジュールWYSIWYG)
---------------------------------------*/
.responsive_area {
	width: 100%;
	display: table;
	table-layout: fixed;
}

/* 画像の自動リサイズ。汎用データベースで編集時に画像が大きくなりすぎるのを防ぐ
---------------------------------------*/
.responsive_area_img img {
	width: 100%;
}

/* カレンダーアイコン。汎用データベースで編集時にカレンダーアイコンが大きくなりすぎるのを防ぐ
---------------------------------------*/
.responsive_area_img .comp_calendar_icon img {
	width: auto;
}

/* 画像の自動リサイズ。table タグの中に記載された場合
---------------------------------------*/
.responsive_area table {
	width: auto;
	display: table;
	table-layout: fixed;
}
.responsive_area table img {
	max-width: 100%;
}

.syslink img {
	max-width: none;
}

/* 汎用データベースのメタデータ ＞ 選択肢の幅対応
---------------------------------------*/
.mdb_metadata_options {
	width: 100%;
}

/* 会員項目の移動ができない問題の対応
---------------------------------------*/
.move_bar img {
	max-width: none;
}

/* 画像の自動リサイズ。汎用データベースで編集時に画像が大きくなりすぎるのを防ぐ
---------------------------------------*/
.responsive_area_img table img {
	width: 100%;
}

/* ブロックタイトルを改行アリにする。
---------------------------------------*/
.nc_block_title {
	white-space: normal;
}

/* IE で3ブロックの横グループ化を表示した際、ブロックが横に長くなるのを防ぐため(IE のバグ？)
---------------------------------------*/
.module_grouping_box table {
	max-width: 1000px;
}

/* copyright を改行許可
---------------------------------------*/
.copyright {
	word-wrap: break-word;
}

/* ヘッダーメニュー
----------------------------------------------*/
table#header_menu td.menu_right {
	white-space: normal;
}

/* メニューの編集モードの対応(on、ごみ箱アイコンが小さくならないように)
----------------------------------------------*/
.menu_view_main_init .menu_edit_top_outer img {
	max-width: none;
}

/*----------------------------------------------------
 NC2 レスポンシブ対応CSS - スマートフォン
----------------------------------------------------*/

/* max-width:480px
---------------------------------------*/
@media only screen and (max-width:480px) {

	/* 横のブロックを縦に並べなおす
	---------------------------------------*/
	.module_grouping_box td {

		/* background-color:red; */

		/*width: 100%;*/
		border-top: none;
		border-right: none;
		border-left: none;
		display: block;

		/* 以下はie9対応(WYSIWYG 問題があるので、IE9 互換表示させているため)
		---------------------------------------*/
		float:left;
		clear:both;
		width:100%;
	}

	/* 1カラム時にテーブルのセルを畳んで表示するが、ブロックタイトルはセルを畳まない
	---------------------------------------*/
	._block_title_event td {
		display: table-cell;
		float: none;
	}

	/* 1カラム時に小さく左右スクロールバーが出る場合があるので、その制御
	---------------------------------------*/
	table#header_menu td.menu_right {
		padding: 4px 0;
	}

	/* 以下、スマホのレスポンシブ時点での設定
	---------------------------------------*/

	/* 左カラムは消す(メニューはボタンナビ)
	---------------------------------------*/
	#_leftcolumn { display:none; }

	/* 全体の幅を100%
	---------------------------------------*/
	#_container { width: 100%; }

	/* 中央カラムの幅を100%
	---------------------------------------*/
	.centercolumn { width: 100%; }

	/* テーブルのセルは100% にしなければ、各ブロックが小さくなってしまう
	---------------------------------------*/
	/* なくてもイケる？あるとWYSIWYG の画像挿入のタブが大きくなる？ */
	/* td { width: 100%; } */

	table.outer th {
		white-space: normal;
		min-width: 50px;
	}
	
	/* 右カラムをたたむ
	---------------------------------------*/
	#_centercolumn {
	display: block;
	}
	#_rightcolumn {
	display: block;
	}
}

/*----------------------------------------------------
 NC2 レスポンシブ対応CSS - タブレット
----------------------------------------------------*/

/* tablet
---------------------------------------*/
@media only screen and (max-width:1000px){

	/* 以下、スマホのレスポンシブ時点での設定 */

	/* グローバルメニュー非表示
	---------------------------------------*/
	ul.menu_headerflat {
		display: none;
	}
	#globalmenu {
		display: none;
	}


	/* 縮小時でもスライダーは表示する
	#_2128 {
		display: none;
	}
	*/

	/* 新着情報のテンプレートを修正、横スクロールが発生するため。 */
	.whatsnew_title, 
	.whatsnew_time, 
	.whatsnew_description_jaspo, 
	.whatsnew_description
	{
		padding : 2px 0px 3px 0px !important;
	}

	/* スマホ時のスライダーで少し、横スクロールが発生するため。
	---------------------------------------*/
	.bx-viewport {
		width: auto !important;
	}

	/* nakahara_custom.css対応 横スクロールが発生するため。*/
	div#__centercolumn td.column_1 td.column_1 {
		padding-right: 0px !important;
	}

	.column_1 {
		width: 80%;
	}
	.column_2 {
		width: 20%;
	}

	.whatsnew_time_jaspo {
		white-space: normal;
	}
	.whatsnew_title_jaspo {
		white-space: normal;
	}

	#__headercolumn .cell {
		padding-left: 0 !important;
		padding-top: 0 !important;
		padding-right: 0 !important;
	}

	/* フッター
	---------------------------------------*/
	.footer_table {
		width: 100% !important;
	}


	/* 左カラムは消す(メニューはボタンナビ)
	---------------------------------------*/
	#_leftcolumn { display:none; }

	/* 全体の幅を100%
	---------------------------------------*/
	#_container { width: 100%; }

	/* 中央カラムの幅を100%
	---------------------------------------*/
	.centercolumn { width: 100%; }
	
	h2.nc_block_title {
		max-width:90%;
	}
}

@media only screen and (max-width:560px){
/* youtube埋め込み対応
	----------------------------------------------*/
	div.VideoAutoSize {
	  position: relative;
	  width: 100%;
	  padding-top: 56.25%;
	}
	div.VideoAutoSize iframe {
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 100% !important;
	  height: 100% !important;
	}
}