@charset "utf-8";

/* =======================================

	CommonElements

======================================= */

body {
	font: normal normal normal 13px/20.8px "Noto Sans JP";
	color: #0f1419;

	/*
	12px	75%	12×1.6=19.2px	小さめ、本文向けにも
	13px	81.25%	13×1.6=20.8px	やや小さめ、本文向けにも
	14px	87.5%	14×1.6=22.4px	標準的な本文サイズ
	15px	93.75%	15×1.6=24px	やや標準的
	16px	100%	16×1.6=25.6px	標準（デフォルト）
	17px	106.25%17×1.6=27.2px	やや大きめ
	18px	112.5%	18×1.6=28.8px	大きめ
	*/

	text-align: center;
	background: #fff;
	overflow-y: scroll;
	}

#header {
	width:100%;
	padding: 20px 0 0 0;
	margin:0;
	text-align: center;
	}

#header h1 {
	display:inline-block;
	padding-left:3%;
	float:left;
	height:60px;
	}

#header-navi {
	float:right;
	padding: 0 0 0 0;
	margin: 0 1% 0 0;
	}

#header-navi li {
	float:left;
	margin-left:1px;
	}

/* ビジコンロゴ（スマホサイズ） */
@media only screen and (max-width: 400px) {
	.header-logo {width:95%; }
	}

@media only screen and (max-width: 768px) {
	#header {
		width:100%;
		margin:0;
		padding:0;
		}

	#header h1 {
		display:inline-block;
		margin:20px auto 0 auto;
		padding:0;
		float:none;
		height:60px;
		}

	#header-navi {
		display:none;
		}
}

/* メインコンテンツ全体（header直下）
------------------------------------------------------------- */
#container {
	margin: 0 auto;
	padding:0;
	width: 100%;
/*	text-align: center; */
}

/* メインイメージ下のコンテンツ枠
    contents＞wrap＞inner＞mainWrap
------------------------------------------------------------- */
#contents {
	width: 970px;
	margin: 0 auto;
	padding: 20px 0;
	text-align: left;
	}

#contents p {
	padding: 1.0em 0;
	}

@media only screen and (max-width: 768px) {
	#contents {
		width: 100%;
		}
	#contents p {
		padding: 0 20px 2em 20px;
		}
}

/* warp */
#wrap {
	margin: 0;
	padding: 0;
	}

/* inner */
#inner {
	margin: 0;
	padding: 0;
	}

/* mainWrap（左:main-右:side） */
#mainWrap {
	width:79%;
	float:left;
	margin:0 1% 0 0;
	padding:0;
	}

#sideWrap {
	width:20%;
	float:right;
	margin:0;
	padding:0;
	}

/* スマホ対応（画面幅768px以下の設定） */
@media screen and (max-width: 768px) {
	div#mainWrap{
		width: 98%;
		margin:1%;
		float: none;
		}
	div#sideWrap{
		width: 98%;
		margin:1%;
		float: none;
		}
}

/* メインイメージ
------------------------------------------------------------- */
#main-image {
	width:100%;
	background-color:#fff;
	}

@media only screen and (max-width: 768px) {
	#main-image img { width:100%; height:auto; } 
	}

/* banner
------------------------------------------------------------- */
#banner {
	width:96%;
	margin:60px 2% 0 2%;
	clear:both;
	}

#banner p {
	width:316px;
	margin-right:7px;
	float:left;
	}

#banner p.end{
	float:right;
	}

/* footer
------------------------------------------------------------- */
#footer{
	border-top:4px solid #b22222;
	background-color:#fffafa;
	margin:30px 0 0 0;
	padding:0;
	}

#footer div#top {
	text-align:center;
	margin:-20px 0 0 0;
	padding:0;
	z-index: 999;
	clear:both;
	}

#footer div.syusai{
	font-weight:bolder;
	margin:0;
	padding:1% 1% 0% 1%;
	}

#footer div.kouen{
	margin:0;
	padding:1% 1% 3% 1%;
	font-weight:bolder;
	}

#footer div.copyright{
	margin:0;
	padding:2% 1% 2% 1%;
	border-top:1px dotted #bc8f8f;
	}

#footer div.copyright a{
	font-weight:bolder;
	}

/* テキストコントロール
------------------------------------------------------------- */
p.midashi{
	color:#A00F16;
	font-size:13px;
	font-weight: bolder;
	text-align:center;
	background-color:#FFFCF5;
	border-top:1px solid #A00F16;
	border-bottom:1px solid #A00F16;
	padding:3% 1% 3% 1%!important;
	margin:6% 0 3% 0!important;
	line-height: 1.6;
	}

p.fst{
	margin:0 0 3% 0!important;
	}

/* 受賞者の声：インタビュー記事 */
div.interview{
	margin:0 0 2% 0;
	padding:0 0 2% 0;
	border-bottom:1px dotted #999;
	}

/* 受賞者の声：写真コントロール */
.img-center{
	}

.img-center img{
	width:98%;
	}

/* サイドメニューコンテンツ毎の間隔調整 */
p.topspace{
	margin-top:12%;
	}

div.sidebox{
	text-align: center;
	}

div.sidebox p{
	line-height: 1.6;
	margin:1% auto!important;
	padding: 0!important;
	}

div.sidebox .sideimg{
	border:1px solid #999;
	}

/* 
   バーガーメニュー（#menuList）
------------------------------------------------------------- */
#menuList {
	width: 100%;
	height: 45px;
	position: relative;
	z-index: 10;
	background: #A00F16;
	font-size: 13px;
}

#menuList ul {
	margin: 0 auto;
	width: 1000px;
	height: 45px;
	text-align: left;
}

#menuList ul li {
	width: 157px;
	height: 45px;
	float: left;
	border-right: #c3c3c3 1px solid;
	box-sizing: border-box;
}

#menuList ul li.home { width: 200px; }
#menuList ul li.sp { visibility:hidden; height:0; }

#menuList ul li:last-child {
	border-right:none;
}

#menuList ul li a {
	height: 45px;
	color:#fff;
	font-weight: bold;
	line-height: 45px;
	display: block;
	text-align: center;
	transition: all 0.2s linear;
	text-decoration:none;
}

#menuList ul li:hover > a {
	background: #fff;
	color: #A00F16;
	text-decoration:none;
}

/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */
@media only screen and (max-width: 800px) {
	#menuList ul {
		width: 100%;
	}

	#menuList ul li {
		width: 20%;
	}
}


/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 768px) {
	#menuList {
		display: none;
	}
	#menuList ul li.sp {
		visibility:visible;
	}

	#rwdMenuWrap {
		width: 100%;
		border-bottom: #aaa 1px solid;
	}

	#rwdMenuWrap #switchBtnArea {
		width: 100%;
		height: 60px;
		background: #A00F16;
		position: relative;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		display: block;
		background: #fff;
		position: absolute;
		border-radius: 5px;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn span {
		left: 20%;
		width: 60%;
		height: 4px;
		display: block;
		position: absolute;
		background-color: #A00F16;;
		border-radius: 5px;
		transition: all 0.2s linear;
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) {
		top: 10px;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) {
		top: 18px;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) {
		bottom: 10px;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
		top: 18px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
		bottom: 18px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#rwdMenuWrap ul {
		width: 100%;
		display: none;
	}

	#rwdMenuWrap ul li {
		width: 100%;
		border-bottom: #aaa 1px solid;
	}

	#rwdMenuWrap ul li a {
		padding: 15px 20px;
		text-align: left;
		display: block;
		background: #ebebeb;
		position: relative;
		text-decoration: none;
	}

	#rwdMenuWrap ul li a:after {
		content: '';
		margin-top: -4px;
		top: 50%;
		right: 15px;
		width: 8px;
		height: 8px;
		color: #888;
		font-size: 1em;
		font-weight: bold;
		line-height: 1.2em;
		display: block;
		position: absolute;
		border-top: 2px solid #b0b0b0;
		border-right: 2px solid #b0b0b0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}


/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before,
#menuList > ul:after {
	content: " ";
	display: table;
}
#menuList > ul:after {clear: both;}
#menuList > ul {*zoom: 1;}



/* ------------------------------
   BASE
------------------------------ */

.box-H3 {
	font-size:120%;
	line-height:180%;
	width:95%;
	margin:20px auto 20px auto;
	}

.box-H4,
.box-H5{
	font-size:100%;
	line-height:180%;
	width:95%;
	margin:0 auto 20px auto;
	}


h2 {
	font-weight:bolder;
	margin:0 auto 3% auto;
	padding:2% 1% 2% 3%;
	border:1px solid #A00F16;
	}

h3 {
	font-weight:bold;
	color: #0f1419;
	margin: 0 0 10px 0;
	padding: 0.25em 0.5em;
	border-left: solid 8px #0f1419;
	border-bottom:1px solid #aaa;9;
	}

h4 {
	font-weight:bold;
	position: relative;
	padding: 0 .5em .5em 1.7em;
	}

h4::after {
	position: absolute;
	top: .4em;
	left: .4em;
	z-index: 2;
	content: '';
	width: 12px;
	height: 12px;
	background-color: #444444;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}

h5 {
	font-size: 12px;
	font-weight:bold;
	color:#0f1419;
	padding: 30px 0;
	background: #FFF;
	width: 100%;
	clear:both;
	}

h6{
	font-size: 32px;
	font-weight:bold;
	border-bottom: solid 2px #444444;
	}


/* table */
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    width: 100%;
}
table th {
    background-color: #fff;
    padding: 10px;
    text-align: left;
}
table td {
    padding: 10px;
    vertical-align: top;
}

/* table.small */
table.small {
    border: 1px solid #333;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 10px 20px;
    width: 95%;
}
table.small th {
    background-color: #f0f0f0;
    border: 1px solid #333;
    padding: 5px 10px;
    text-align: center;
}
table.small td {
    border: 1px solid #333;
    padding: 5px 10px;
    vertical-align: middle;
}

/* table.intro */
table.intro {
    border: 1px solid #333;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: inherit;
    margin: 0px 20px 10px;
    width: 95%;
}
table.intro th {
    background-color: #f0f0f0;
    border: 1px solid #333;
    padding: 5px 10px;
    text-align: center;
}
table.intro td {
    border: 1px solid #333;
    padding: 5px 10px;
}


/* トップページ新着情報
-------------------------------------------- */
div.news {
	font-size:14px;
	font-weight:bold;
	color: #fff;
	margin: 0em 0em 1em 0em;
	padding: 0.5em 1em;
	background: #A00F16;/*背景色*/
	}
div.news p {
	margin: 0; 
	padding: 0;
	}

/* トップ＞募集部門＞部門タイトル */
div.bumon {}
div.bumon h3,
div.news2{
	font-size:14px;
	font-weight:bold;
	color: #0f1419;
	margin: 0 0 10px 0;
	padding: 0.25em 0.5em;
	border-left: solid 8px #0f1419;
	border-bottom:1px solid #aaa;
	}

div.bumon p{
	display:blodk;
	height:70px;
	}

@media screen and (max-width: 768px) {
	div.bumon p{
		display:blodk;
		height:100px;
		}
}

div.bumon img{
	margin:6px 3px;
	padding:0;
	}

dl.box{ /* 記事一覧 */
	width: 98%;
	height: 150px;
	overflow: auto;
	}

dl.box dt{ /* 日付 */
	float: left;
	width: 120px;
	}

dl.box dd{ /* タイトル */
	margin: 0 0 10px 0;
	padding: 0 0 10px 120px;
	border-bottom: 1px dotted #aaa;
	}

/* ヘッダー：FBアイコン表示
------------------------------------------------------------- */
.fl_fb2 {/*ボタンの下地*/
	font-size: 25px;	/*文字のサイズ*/
	color: #FFF;	/*文字・アイコン色*/
	line-height: 50px;/*高さと合わせる*/
	text-align: center;/*中身を中央寄せ*/
	border-radius: 7px;/*角丸に*/
	display: inline-block;
	height: 50px;/*高さ*/
	width: 190px;/*幅*/
	background: #4966a0;
	vertical-align: middle;/*垂直中央寄せ*/
	overflow: hidden;/*はみ出た部分を隠す*/
	text-decoration:none;/*下線は消す*/
	}

.fl_fb2 .fa-facebook {
	text-shadow: 2px 2px 1px #224282;
	font-size: 30px;
	}

.fl_fb2 span {/*テキスト*/
	display:inline-block;
	transition: .5s;
	}

.fl_fb2:hover span{/*ホバーで一周回転*/
	-webkit-transform: rotateX(360deg);
	-ms-transform: rotateX(360deg);
	transform: rotateX(360deg);
	}

/* 画像サイスの調整用クラス
------------------------------------------------------------- */
img.resize{
	width:100%;
	}

/* スマホ対応 */
@media screen and (max-width: 768px) {
	img.resize{
		width:100%;
		}
}


/* 協賛団体バナー（トップ）
------------------------------------------------------------- */
/* 協賛タイトル */
h5.kyousan{
	font-size:120%;
	color: #A00F16;/*文字色*/
	background-color: #FFFCF5;
	margin:0.5em 0;
	padding: 0.5em 0;/*上下の余白*/
	border-top: solid 3px #A00F16;/*上線*/
	border-bottom: solid 3px #A00F16;/*下線*/
	}

/* 協賛一覧 */
div.kyosanlist{
	display: block;
	margin:0 3%;
	padding:0;
}

div.kyosanlist ul{
		width:98%;
		margin:0 auto 20px auto;
		padding:0 0 20px 0;
}

div.kyosanlist li{
	display:block;
	float:left;
}

div.kyosanlist li img{
	margin: 10px 10px;
	max-width: 234px ;
	border:1px solid #333;
	height: 60px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
	div.kyosanlist ul{
		width:98%;
		margin:0 auto 20px auto;
	}
	div.kyosanlist li{
		width:49%;
	}
	div.kyosanlist li img{
		margin: 2% 4%;
		max-width: 90%;
		border:1px solid #333;
		height: 60px;
	}
}

/* クリアフィクス
------------------------------------------------------------- */
.clearfix::after {
	content: "";
	display: block;
	clear: both;
	}

/* 過去のコンテスト結果のタブ制御
------------------------------------------------------------- */
/*タブ切り替え全体のスタイル*/
.tabs1,
.tabs2,
.tabs3,
.tabs4 {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 0 auto;
	}

/*タブのスタイル*/
.tab_item1,
.tab_item2,
.tab_item3,
.tab_item4{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #000;
	background-color: #d9d9d9;
	float: left;
	display: block;
	height: 50px;
	line-height: 50px;
	transition: all 0.2s ease;
	margin:1px;
	border-top:1px solid #999;
	border-bottom: 3px solid #666;
	}

.tab_item1 {width: calc(88%/2);}
.tab_item2 {width: calc(88%/3);}
.tab_item3 {width: calc(88%/4);}
.tab_item4 {width: calc(88%/5);}

.tab_item1:hover,
.tab_item2:hover,
.tab_item3:hover,
.tab_item4:hover{
	opacity: 0.75;
	}

@media only screen and (max-width: 768px) {
.tab_item1,
.tab_item2,
.tab_item3,
.tab_item4{
		height: 60px;
		line-height:1.6;
		padding:1%;
		align-items: center;
		justify-content: center;
	}

}

/*ラジオボタンを全て消す*/
input[name="tab_item1"],
input[name="tab_item2"],
input[name="tab_item3"],
input[name="tab_item4"]{
	display: none;
	}

/*タブ切り替えの中身のスタイル*/
.tab_content1,
.tab_content2,
.tab_content3,
.tab_content4 {
	display: none;
	padding: 40px 40px 0;
	clear: both;
	overflow: hidden;
	}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#student:checked ~ #student_content,
#bumon:checked ~ #bumon_content,
#design:checked ~ #design_content {
	display: block;
	}

/*選択されているタブのスタイルを変える*/
.tabs1 input:checked + .tab_item1,
.tabs2 input:checked + .tab_item2,
.tabs3 input:checked + .tab_item3,
.tabs4 input:checked + .tab_item4,
	background-color: #D7E5EE;
	color: #444;
	}

/* ----------------------------------
contest.html 年度別アーカイブボタン
---------------------------------- */
.square_btn {
	display: inline-block;
	margin: 0.5em;
	padding: 0.3em 1em;
	text-decoration: none;
	color: #67c5ff;
	border: solid 2px #D7E5EE;
	transition: .4s;
	width: 115px;
	height: 40px;
	text-align:center;
	vertical-align:middle;
	}

.square_btn:hover {
	background: #D7E5EE;
	color: white;
	}

p.year{
	margin: 7px 0px 0px 0px;	
	}

/* 受賞作品のタイトル */
span.title{
	font-size: 25px;
	}

/* 受賞作品のタイトル */
span.title2{
	font-size: 23px;
	}

anagoBox p{
	display:inline-block;
	vertical-align:middle;
	}

/* オレンジの賞名 */
span.sub{
	font-size: 20px;
	color: 	#ffa500;
	font-weight: bold;
	}

p.name1{
	text-align: right;
	}

span.name1{
	font-size: 18px;
	text-align: right;
	}

/* for IE6 for IE7 */
*:first-child+html .centeringTest p,
* html .centeringTest p {
	display: inline;
	zoom: 1;
	}


/* 不要クラス
------------------------------------------------------------- */
table.koukoku {
  border-collapse: collapse;
  border: solid 2px orange;/*表全体を線で囲う*/
}
table.koukoku th, table.koukoku td {
  border: dashed 1px orange;/*破線 1px オレンジ*/
}
table.koukoku th{
  background: #fff5e5;
  font-weight:bold;
}
span.text_small{font-size:10px;}
span.letter-spacing1{letter-spacing: -0.1em;}
hr.hr{border: 1px solid #444444;}
#news { font-size:120%; line-height:180%; }
#news img { float:left; margin-right:15px; }
.resize{width:100%;}
div.centeringTest p {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	color: #444;}
div.centeringTest2 p {
	display: table-cell;
/*	vertical-align: top; */
	vertical-align: middle;
	margin: 0;
	color: #B61010;}
div.centeringTest3 p {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	color: blue;}
span.archive{}
span.coment{font-size: 18px;font-weight: bold;}
.myButton {
    background: #ffec64 linear-gradient(to bottom, #ffec64 50%, #ffab23 100%) repeat scroll 0 0;
    border: 2px solid #aed39a;
    border-radius: 3px;
    box-shadow: 0 1px 0 0 #fff6af inset;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    padding: 14px 60px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffee66;}
.myButton:hover {background: #ffab23 linear-gradient(to bottom, #ffab23 50%, #ffec64 100%) repeat scroll 0 0; color:#fff;}
.myButton:active {position: relative;top: 1px;}
#banner { width:95%; clear:both; margin-top:30px; }
#banner p { width:95%; float:none; margin-right:0px; }
#banner p img { width:100%; }
#banner p.end { width:95%; float:none; margin-right:0px; }
.about-img { text-align:center; }
@media only screen and (max-width: 768px) {
	#news { padding:10px; font-size:120%; line-height:180%; }
	#news img { float:left; width:50%; margin-right:15px; }
	h2 b { display:block; }
	.about-img img { width:100%; }
	}