@charset "UTF-8";

img{ width:100%;}
html { font-size:62.5%;}
body { font-size:1.4vw; line-height:1.5;
background-image: url(/special/item-design-contest2020/_img/bgCenter.png),linear-gradient(to bottom, rgba(59,151,254,1) 0%,  rgba(0,10,27,1) 80%);
background-position: top center, top center;
background-repeat: repeat-y, no-repeat;
background-color:rgb(102, 153, 255);
background-size:auto,auto;
}
#roComFooter{background-color:#002067;}

/*========================[ 定型  ]========================*/
/*-----  タイトル設定 -------*/
h1{ font-size:3vw; font-weight:bold; line-height:1.3; margin:0 auto 3rem;}
h2{ font-size:2vw; font-weight:bold; line-height:1.3; box-sizing:border-box; margin:0 auto 2rem;}
h3{ font-size:1.5vw; font-weight:bold; line-height:1.3; box-sizing:border-box; margin:0 auto 1.5rem;}

/*-----  メニュー設定 -------*/
nav{ position: sticky; top:0;  z-index:500; width:100%; background:linear-gradient(#003680, #002067);}
nav .navList{ display:flex; justify-content: space-between; align-items: center; max-width:1219px; margin:0 auto; }
nav .navList li{ width:25%; height:100%; }
nav .navList li a{ text-decoration:none; display:block; padding:2rem; color:#fff; text-align:center; font-size:1.6vw; line-height:1.6vw; font-weight:bold;}
nav .navList li a:hover{ background:linear-gradient(#4497fe, #005ee5);}
nav .navList li a.active{ color:#003680; background:linear-gradient(#fff, #ccc);}
nav .navList li a.award{ background:linear-gradient(#444, #666);}
/* nav .navList li a.award:hover:after{ content:"　準備中"; }*/
/*-----  コンテンツ設定 -------*/
main{ background:rgba(255,255,255,0.8); box-sizing:border-box; max-width:1219px; margin:0 auto; padding:4rem 2rem;}
/*-----  コンテンツ設定 -------*/
footer{ background:linear-gradient(rgba(59,151,254,1) , rgba(0,10,27,1) );}
footer .copy{ width:100%; max-width:1219px; margin:0 auto; padding:3rem 0; color:#fff;}
footer .o-contents__inner{max-width:1219px; margin:0 auto; }

#page_top{ width:3em; height:3em; position:fixed; right:0; bottom:3em; background: rgba(0,10,27,1); opacity: 0.6; border:solid #fff 1px;}
#page_top a{ position:relative; display: block; width:40px; height:40px; text-decoration: none; }
#page_top a::after{ content: '▲'; font-size: 1.5em; font-weight: bold; color:#fff; position: absolute; top:0.25em; bottom:0; right:0; left:0.25em; margin: auto; text-align: center; }

@media (min-width: 62.5em) {/* 1000px÷16px　以上でフォントサイズを固定*/
	body { font-size:1.6rem;}
	h1{ font-size: 30px;}
	h2{ font-size: 24px;}
	h3{ font-size: 20px;}
	nav .navList li a{ font-size:20px; line-height:1.6;}
}

.f-redBold{ color:red; font-weight:bold;}

/*====================================================================*/
/*--- トップイメージ ----*/
header{ width:100%; background: url(/special/item-design-contest2020/_img/heddeBeasrBG.jpg) top center repeat-x; }
#headers{ max-width:1650px; background: url(/special/item-design-contest2020/_img/hedderBG.jpg) center top no-repeat; background-size:cover; margin:0 auto;}
#hedderBox{max-width:1219px; height:auto; margin:0 auto; position:relative; }
#hedderBox:before{ content: ""; display: block; padding-top:72%;}
#hedderChar{ position:absolute; top:0; left:0;}
#eventLogo{ position:absolute; top:10%; left:0; padding:0 32.93%;}
#topItem{ position:absolute; bottom:7%; left:0; padding:0 22.21%;}
#eventDay{ position:absolute; bottom:1%; left:0; padding:0 12.01%;}
/*-------------------------------------------------------------------*/
#headerS2nd{ background:linear-gradient(to bottom, rgba(59,151,254,1),  rgba(0,10,27,1) ); }
#header2nd{max-width:1219px; height:auto; margin:0 auto; position:relative;}
#header2nd:before{ content: ""; display: block; padding-top:16.4%;}
#header2nd .secndTopBg{position:absolute; top:0; left:0; z-index:1; max-width:1219px;}
#header2nd .secndTopChara{position:absolute; top:0; left:0; z-index:10; max-width:1219px;}
#header2nd .secndToplogo{position:absolute; top:0; left:0; z-index:10; max-width:190px; margin:1% 42.2%;}


/*-------------------------------------------------------------------*/
/*--- 共通要素 ----*/
section{width:90%; margin:0 auto 3rem; }
.contentBox{width:90%; margin:0 auto 2rem;}
.leadBox{width:80%; margin:0 auto 2rem; text-align:center;}
.intrBox{width:80%; margin:0 auto 2rem;}
.readTexBox{width:80%; margin:0 auto 2rem; text-align:center;}
.catch{text-align:center;}


/*---　概要・作品テーマ　---*/
.itemList{ display:flex; justify-content: space-between; align-items: center; margin:0 auto 2rem; }

/*.itemList li{ max-width:calc(100%/7); height:100%; }*/
/*--- 吹き出しとアイテムを並べる ----*/
.balloonList{ display:flex; align-items: center; margin:0 auto 2rem; }
.balloonList  li{ padding-right:1rem;}
.balloonList  li img{ min-width:112px;}
.balloonList .balloon{ position: relative; display: inline-block; margin: 1.5em 0 1.5em 15px; border-radius: 10px; padding:1rem; background: #FFF; border: solid 3px #555; box-sizing: border-box;}
.balloonList .balloon::before{ content: ""; position: absolute; top: 50%; left: -24px; margin-top: -12px; border: 12px solid transparent; border-right: 12px solid #FFF; z-index: 2;}
.balloonList .balloon::after { content: ""; position: absolute; top: 50%; left: -30px; margin-top: -14px; border: 14px solid transparent; border-right: 14px solid #555; z-index: 1;}

/*-------------------------------------------------------------------*/
/*---　概要・募集形式　---*/
.pair{display:flex;}
.pair > div{ width:50%; padding:2rem;}

/*---イラスト側---*/
.illust1 table{ width:100%; border-top:2px solid #fff; border-left:2px solid #d845bb; border-bottom:2px solid #d845bb; border-right:2px solid #d845bb;}
.illust1 table caption,
.illust1 table th{ padding:1rem;  background:#d845bb; color:#fff; font-weight:bold;}
.illust1 table td{ background:#fff; vertical-align:middle; padding:1rem;}
.illust1 table td img:nth-child(odd){min-width:120px;}
.illust1 table td img{border:1px solid #d845bb;}
.illust1 table td p{ width: 0; height: 0; border-style: solid; border-width: 3vw 0 3vw 3.5vw; border-color: transparent transparent transparent #d845bb;}
.illust1 table td span{ font-weight:bold; color:#d845bb;}

.illust2 table{ width:100%; border:1px solid #d845bb; margin-bottom:2rem;}
.illust2 table caption,
.illust2 table th{ background:#d845bb; vertical-align:middle; padding:1rem; color:#fff; font-weight:bold; border-bottom:1px solid #fff; border-left:1px solid #fff;}
.illust2 table td{ background:#fff; vertical-align:middle; padding:1rem; border-bottom:1px solid #d845bb; border-left:1px solid #d845bb;}
.illust2 table .img{ max-width:200px;}

/*---テキスト側---*/
.text1 table{ width:100%; border-top:2px solid #fff; border-left:2px solid #393; border-bottom:2px solid #393; border-right:2px solid #393;}
.text1 table caption,
.text1 table th{ padding:1rem;  background:#393; color:#fff; font-weight:bold;}
.text1 table td{ background:#fff; vertical-align:middle; padding:1rem;}
.text1 table td img:nth-child(odd){min-width:120px;}
.text1 table td img{border:1px solid #393;}
.text1 table td p{ width: 0; height: 0; border-style: solid; border-width: 3vw 0 3vw 3.5vw; border-color: transparent transparent transparent #393;}
.text1 table td span{ font-weight:bold; color:#393;}

.text2 table{ width:100%; border:1px solid #393; margin-bottom:2rem;}
.text2 table caption,
.text2 table th{ background:#393; vertical-align:middle; padding:1rem; color:#fff; font-weight:bold; border-bottom:1px solid #fff; border-left:1px solid #fff;}
.text2 table td{ background:#fff; vertical-align:middle; padding:1rem; border-bottom:1px solid #393; border-left:1px solid #393;}


/*---　概要・募賞品　---*/
.prize{ width:90%; margin:0 auto; border-radius:1rem; margin-bottom:3rem;}
.prize > dt{ padding:1rem; margin:0 0 1rem; text-align:center; font-size:2vw; font-weight:bold; color:#fff;}
.prize > dd{ padding:0.2rem 1rem;}
.prize > dd p{ padding:1rem 0.5rem; font-size:1vw;}
.EXT{ border:2px solid #c6bd33; background-color:#fff;}
.EXT dt{ background:#c6bd33;}
.SPE{ border:2px solid #8e8e89; background-color:#fff;}
.SPE dt{ background:#8e8e89;}

.faqSquare {margin-bottom:2rem;}
.faqSquare > dt{ padding:1rem 0 0; font-weight:bold;}
.faqSquare > dt::before{ content: "◆";}
.faqSquare > dd{ padding:0.2rem 1rem 1rem;}

.faqFaQ {margin-bottom:0rem;}
.faqFaQ > dt{ padding:1rem 0 0; font-weight:bold; text-indent: -1vw; padding-left:1vw;}
.faqFaQ > dt::before{ content: "A:"; color:red;}
.faqFaQ > dd{ padding:0.2rem 0 1rem; text-indent: -1vw; padding-left:1vw;}
.faqFaQ > dd::before{ content: "Q:"; color:blue; font-weight:bold;}
.copyrightSmpl{padding:0.2rem; border:1px solid #000; margin-bottom:3rem;}

/*---　コンテストの流れ　---*/
.flow{ display:flex; justify-content: center; align-items: center;}
.flow li:nth-child(odd)/*奇数*/{ width:calc((100%/11)*2); border:2px solid #ffa500; border-radius:1rem; padding:1rem; text-align:center; background-color:#fff;}
.flow li:nth-child(odd) p{ background: #ffa500; padding:0.5rem;}
.flow li:nth-child(even)/*偶数*/{ width:calc((100%/11));}
.flow li:nth-child(even) p{ width: 0; height: 0; border-style: solid; border-width: 3vw 0 3vw 3.5vw; border-color: transparent transparent transparent #ffa500; margin:0 auto; }

/*---　参考情報　---*/
.baCostama{max-width:610px; margin:0 auto;}

.bannerList{ display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom:1rem;}
.bannerList li{ width:calc(100%/3); padding:1rem; box-sizing:border-box;}

.btnQuartList{ display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; box-sizing:border-box;}
.btnQuartList li{ width:20%; height:100%; border-radius: 5px; margin:1rem; color: #fff; background: #fcb160; text-shadow: -1px -1px 1px #ffa500, 1px -1px 1px #ffa500, -1px 1px 1px #ffa500, 1px 1px 1px #ffa500; /* 文字の縁取り */ }
.btnQuartList li a{ text-decoration:none; display:block; padding:1rem; color:#fff; text-align:center; font-size:1.2rem; font-weight:bold;}
.btnQuartList li a:hover{ background: #FFE5CC; border-radius: 5px;}

.btnHalfList{ display:flex;}
.btnHalfList li{ width:calc(100%/2); height:100%; margin:1rem; border-radius: 5px; color: #fff; background: #fcb160; text-shadow: -1px -1px 1px #ffa500, 1px -1px 1px #ffa500, -1px 1px 1px #ffa500, 1px 1px 1px #ffa500; /* 文字の縁取り */ }
.btnHalfList li a{ text-decoration:none; display:block; padding:1rem; color:#fff; text-align:center; font-size:1.2vw; font-weight:bold;}
.btnHalfList li a:hover{ background: #FFE5CC; border-radius: 5px;}

.btnEntry{ width:calc(100%/2); height:100%; margin:1rem auto; border-radius: 5px; color: #fff; background: #fcb160; text-shadow: -1px -1px 1px #ffa500, 1px -1px 1px #ffa500, -1px 1px 1px #ffa500, 1px 1px 1px #ffa500; /* 文字の縁取り */}
.btnEntry a{ text-decoration:none; display:block; padding:1rem; color:#fff; text-align:center; font-size:2vw; font-weight:bold;}
.btnEntry a:hover{ background: #FFE5CC; border-radius: 5px;}

.btnCloes{ width:calc(100%/2); height:100%; margin:1rem auto; padding:1rem; border-radius: 5px; color: #fff; background: #999; text-align:center; }


/*---　注意文章用　---*/
.attention, .dotto, .pin { width:90%; margin:0 0 3rem; margin:0 auto;}
.attention li, .dotto li, .pin li{ font-size:1vw; text-indent: -1vw; padding-left:1vw;}
.attention li:before{ content: "※"; color:red;}
.dotto li:before{ content: "●";}
.pin li:before{ content: "・";}
/*====================================================================*/

@media (min-width: 62.5em) {/* 1000px÷16px　以上でフォントサイズを固定*/
	.attention li, .dotto li, .pin li{ font-size:1.4rem;}
}

@media (max-width: 54em) {/* 835.2px でフォントサイズを固定*/
	body { font-size:1.2rem;}
	h1{ font-size: 24px;}
	h2{ font-size: 20px;}
	h3{ font-size: 16px;}
	nav .navList li a{ font-size:14px; padding:2rem 1rem; line-height:120%; }
	.prize > dt{ font-size:1.5rem; font-weight:bold; color:#fff;}

	.contentBox{width:100%; margin:0 auto 2rem;}
	.pair{display:block;}
	.pair > div{ width:100%; padding:2rem 0;}

	.attention li, .dotto li, .pin li{ font-size:1.rem;}

	.attention li, .dotto li, .pin li{ font-size:0.95em;}
	.bannerList li{ width:calc(100%/2);}
	.btnQuartList li{ width:calc(90%/2);}
}
@media (max-width: 26em) {
		.btnQuartList li{ width:calc(86%/2); font-size:14px;}
}

/*====================================================================*/
/* タイトルデザインサンプル*/
.rGradVline{/**/
	border-top:1px solid #134f81;
	border-right:1rem solid #134f81;
	border-bottom:2px solid #134f81;
	border-left:1rem solid #134f81;
	padding: 1rem;
/*background:linear-gradient(#fff 10%, #e6e6fa 40%, #b0c4de 80%);*/
	background:#ebfbff;
	border-radius: 7px;
	color:#134f81;
	text-shadow:0.1rem 0.1rem 0.2rem #fff;
	text-align:center;
	overflow: hidden;
	position: relative;
}
.rGradVline::before {/* 大きな円の色 */
	background-color:#134f81;
	border-radius: 50%;
	content: '';
	display: block;
	opacity: 0.7;
	position: absolute;
	top: -40%;
	left: -2%;
	width:10rem;
	height:10rem;
}

.rGradVline::after {
	background-color:#134f81;
	border-radius: 50%;
	content: '';
	display: block;
	opacity: 0.7;
	position: absolute;
	top: -40%;
	right: -2%;
	width:10rem;
	height:10rem;
}
.stripedLine{
	background-color: rgba(244,253,255,0);
	color: #253570;
	padding: 10px;
	position: relative;
text-align:center;
}
.stripedLine::after {
	background: repeating-linear-gradient(-45deg, #253570, #253570 5px, #f0fff0 0, #f0fff0 10px); /* ストライプ */
	content: '';
	height: 5px; /* ストライプの高さ */
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.stitch{
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 1px #96c2fe;
	padding: 0.2em 0.5em;
	color: #454545;
	text-align:center;
}
.squarePoint{
	color: #000258;
	position: relative;
	padding: 0 0 2px 32px;
	border-bottom: 1px solid #000258;
	text-shadow:0.1rem 0.1rem 0.2rem #fff;
}
.squarePoint::before,
.squarePoint::after{
	top: 6px;
	left: 6px;
	content: "";
	position: absolute;
	bottom: 0;
	width: 12px;
	height: 12px;
	border: 3px solid #0005c3;
	margin: auto;
}
.squarePoint:before{ top: -6px; left: 0;}

.rStepBox{
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  word-break: break-all;
  border-top: 3px solid #000;
  border-radius: 12px 0 0 0;
}

.rStepBox span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 3px 20px;
  color: #fff;
  border-radius: 10px 0 20px 10px;
  background: #000;
}