@charset "utf-8";

/* ベース設定 */
body{padding: 0px; margin: 0px; font-size: 90%}


/* フッター設定 */
footer{background: #242684; color: white; width: 100%; height: 25px; text-align: center; padding-top: 5px}
	



/* 仮	
	#container{background: green}
	#navigator{background: yellow} 
	#main_contents{background: blue}*/

/* 共通設定 */
button{cursor:pointer}

table td {
  background: #fff;
}
table tr:nth-child(odd) td {
  background: #eee;
}



/* **************************************************************************************************************************************************************** */
/* PC向け（画面幅が901px以上） */
@media (min-width: 901px) {
    .responsive-image {
        background-image: url('large-image.jpg');
    }
    
    /* 全体 */
	div#container{width: 100%; display: flex;}
	
	/* ヘッダー設定 */
	header{background-image: url(../images/icon/header_bar.png); background-repeat: repeat-x; color: white; width: 100%; height: 80px; text-align: right; vertical-align: bottom; }
	header div{font-size: 150%; font-weight: bold; padding-right: 20px; padding-top: 40px}
	div#information{background: #e2e2e2}
	
	/* スマホ用ハンバーガー */
	div#mov-menu{display: none}

	
	/* メニュー */
    nav#navigator{width: 200px; background-image: url(../images/icon/menu_bar.png); background-repeat: repeat-y;}
    
    /* メニューベース設定 */
	.a_menu{margin: 10px;}
	.a_menu ul{margin-left: -2em}
	.a_menu ul li{list-style: none;}
	.a_menu ul li.def{background: pink; border-radius: 5px;}

	/* メニュータイトル */
	div.a_menu button{color: white; padding: 5px 5px 5px 10px; font-weight: normal; border-radius: 5px; border: none; width: 150px; height: 35px; text-align: left; cursor: pointer}
	div.a_menu button.off{background: #3f4c2c;}
	div.a_menu button.on{background: #8c4458;}


	/* メニュー項目 */
	li a.link{text-decoration: none}
	li a:visited.link{color: blue}
	li a.hatena{color: black; text-decoration: none}

    
    /* メインコンテンツ */
	div#main_contents{width: 100%; padding: 40px; margin: 0px;}
	div#main_contents h1{padding: 0px; margin: -30px 0 0 -30px;}
	
	
	div.wide_1000{width: 1000px; background: #f7f7f7; border: 2px solid gray; margin-top: 10px; padding: 0 10px}
	
	
	
	
	
	/*  CCM一覧テーブル  */
	table.ccm_list{border: 2px solid gray; width: 1000px;}
	table.ccm_list tr{text-align: center;}
	table.ccm_list tr th{background: lightblue; border: 1px solid gray; width: 100px; height: 30px}
	
	/*  CCM詳細  */
	table.ccm_detail{border: 2px solid white; width: 500px; font-size: 120%}
	
	table.ccm_detail tr th{background: lightblue; width: 200px; height: 30px}
	
	
	
	
	
	/* ログイン用ブロック */
	div#login_contents{width: 100%; margin: 20px auto; padding: 30px auto}
	div#login_top{width: 250px; border: 2px solid gray; margin:  0 auto; padding: 50px 50px 10px 50px}
	div#login{text-align: center; margin-top: 20px;}
	p.error{color: red}
	input.login_color{background: #DFEBF7}
	

	
	
}


/* **************************************************************************************************************************************************************** */
/* タブレット向け（画面幅が601pxから900px） */
@media (min-width: 601px) and (max-width: 900px) {
    .responsive-image {
        background-image: url('medium-image.jpg');
    }
    
    /* ヘッダー設定 */
	header{background-image: url(../images/icon/header_bar.png); background-repeat: repeat-x; color: white; width: 100%; height: 60px; text-align: right; vertical-align: bottom}
	header div{font-size: 150%; font-weight: bold; padding-right: 20px; padding-top: 20px}
	div#information{background: #e2e2e2}
	
	/* スマホ用ハンバーガー */
	div#mov-menu{display: none}
    
    /* メニュー */
    nav#navigator{background: #e2e2e2; }
    nav.hidden-mov{display: flex;}
    /* nav.hidden-mov ul{display: none;} */

    
    /* メニューベース設定 */
	.a_menu{margin: 10px; }
	.a_menu ul{margin-left: -1em}
	.a_menu ul li{list-style: none; margin-left: 0; line-height: 2}

	/* メニュータイトル */
	div.a_menu button{font-size: 80%; color: white; padding: 5px 15px 5px 10px; font-weight: normal; border-radius: 5px; border: none; height: 35px; text-align: left; cursor: pointer}
	div.a_menu button.off{background: #3f4c2c;}
	div.a_menu button.on{background: #8c4458;}


	/* メニュー項目 */
	li a.link{text-decoration: none}
	li a:visited.link{color: blue}
	li a.hatena{color: black; text-decoration: none}
	
	
	/* サブメニューを隠す */
	/* div.a_menu ul#menu_color{position: absolute; top: 130px; left: 110px; background: lightgray; padding: 20px;}　*/
	div.a_menu ul#menu_color{display: none}
	
	
	div.a_menu ul#menu_setting{display: none}
    
    
    /* メインコンテンツ */
	div#main_contents{width: 100%; padding: 0; margin: 40px}
	div#main_contents h1{padding: 0; margin: -30px 0 0 -30px;}
	div#main_contents h1.login{padding: 0; margin: 0;}
	
	/*  CCM一覧テーブル  */
	table.ccm_list{border: 2px solid gray; width: 650px;}
	table.ccm_list tr{text-align: center;}
	table.ccm_list tr th{ background: lightblue; border: 1px solid gray}

	/* ログイン用ブロック */
	div#login_contents{padding: 50px; }
	div#login_top{width: 250px; background: white; border: 2px solid gray; margin:  0 auto; padding: 10px 30px}
	div#login{text-align: center; margin-top: 20px; margin-bottom: 10px}
	input.login_color{background: #DFEBF7}
	
	
	
	
	
	
}



/* **************************************************************************************************************************************************************** */
/* スマホ向け（画面幅が600px以下） */
@media (max-width: 600px) {
    .responsive-image {
        background-image: url('small-image.jpg');
    }
    
    /* ヘッダー設定 */
	header{background-image: url(../images/icon/header_bar.png); background-repeat: repeat-x; color: white; width: 100%; height: 50px; text-align: right; vertical-align: bottom}
	header div{font-size: 120%; font-weight: bold; padding-right: 10px; padding-top: 20px}
	div#information{background: #e2e2e2}

	/* スマホ用ハンバーガー */
	div#mov-menu{position: absolute; top: 5px; left: 15px}
	
	/* メニュー隠す */
	nav#navigator{background: lightgray; width: 200px; position: absolute; top: 40px; left: 15px; padding: 5px}
    nav.hidden-mov{display: none }

	
	/* メニューベース設定 */
	.a_menu{margin: 10px;}
	.a_menu ul{margin-left: -2.5em}
	.a_menu ul li{list-style: none;}
	.a_menu ul li.def{background: pink; border-radius: 10px;}

	/* メニュータイトル */
	div.a_menu button{color: white; padding: 5px 5px 5px 10px; font-weight: normal; border-radius: 5px; border: none; width: 150px; height: 35px; text-align: left; cursor: pointer}
	div.a_menu button.off{background: #3f4c2c;}
	div.a_menu button.on{background: #8c4458;}


	/* メニュー項目 */
	li a.link{text-decoration: none}
	li a:visited.link{color: blue}
	li a.hatena{color: black; text-decoration: none}


     /* メインコンテンツ */
	div#main_contents{width: 100%; padding: 0; margin: 50px;}
	div#main_contents h1{padding: 0; margin: -40px 0 0 -30px;}
	div#main_contents table{padding: 0; margin-left: -35px;}
	
	/*  CCM一覧テーブル  */
	table.ccm_list{width: 400px; font-size: 90%}
	table.ccm_list tr{text-align: center; border-top: 1px solid gray; border-bottom: 1px solid gray;}
	table.ccm_list tr th{background: lightblue; border: 1px solid gray}
	table.ccm_list tr td{padding: 5px 0}
	
	/*  CCM詳細  */
	table.ccm_detail{margin-left: -100px; border: 2px solid gray; width: 250px;}
	table.ccm_detail tr th{background: lightblue; width: 150px; height: 30px; text-align: left}

	
	
	/*  スマホでは表示させない  */
	.nomov{display: none}

	
	
	/* ログイン用ブロック */
	div#login_contents{width: 100%; margin: 20px auto; padding: 30px auto}
	div#login_top{width: 250px; border: 2px solid gray; margin:  0; padding: 50px 50px 10px 50px}
	div#login{text-align: center; margin-top: 20px;}
	input.login_color{background: #DFEBF7}
    
    
       
}



/* **************************************************************************************************************************************************************** */
/* プリント時に表示されないようにする */
@media print {
  .noPrint{display: none;}
  .hidden-mov{display: none;}
  .a_menu{display: none;}
}