html { font-family:Arial,Verdana,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;font-size: 62.5%; /* 10px */ color:#333; }
* { box-sizing: border-box;}
body {line-height:1.4em; letter-spacing:0.03em;}

/*共通アイテム---------------------------------------------------------------------------------------*/

/*テキストまわり*/
body { font-size:16px; font-size: 1.6em; background:#f6f8fa}
h1 { font-size:20px; font-size:2.0rem; text-align:center; margin-bottom:0}
h2 { font-size:8vw; line-height:120%; text-align:center; font-family:'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS PMincho', 'MS 明朝', serif}
h2 span { font-size:60%; color:#175bba}
@media screen and (min-width: 769px)  {
	h2 { font-size:46x; font-size:4.6rem;}
}
h3 { font-size:28px; font-size:2.8rem; margin:4em 0 2.5em; text-align:center; position:relative; font-family:'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS PMincho', 'MS 明朝', serif; letter-spacing:0.1em; text-indent:0.1em}
h4 { font-size:22px; font-size:2.2rem; margin-bottom:0.5em}
h5 { font-size:18px; font-size:1.8rem; margin-bottom:0.5em;}
.t_left { text-align:left}
.t_right { text-align:right}
.t_center { text-align:center}
.small { font-size:12px; font-size:1.2rem}
.red {color: #233f66}
.b_top {border-top:1px dotted #ccc; padding-top:1.2em}

p  { font-size:14px; font-size: 1.4rem; margin:0 } 
ul {list-style:none; padding-left:0}
a { text-decoration:underline dotted; color:#233f66}
a:hover { color:#175bba}
hr {border-top:1px dotted #ccc; padding:0; margin:2em 0 0}

.flex_wrap {
display: -webkit-flex; /*safari*/
display:flex;justify-content:left; align-items: center;
align-items: flex-start;
flex-direction:column;
}
@media screen and (min-width: 769px)  {
	.flex_wrap { flex-direction:row}
}

/*共通指定*/
header, main, .contents, footer .footer_nav { max-width:960px; margin:0 auto}


/*各コンテンツ---------------------------------------------------------------------------------------*/

/*header*/
header {
	padding: 96px 0 0 0; overflow:hidden; height:100%
}
@media screen and (min-width: 769px)  {
	header {
		paddng: 0;
	}
}
h1.logo_bungakukaiprize img { width:80%; margin:0em auto}
@media screen and (min-width: 769px)  {
	h1.logo_bungakukaiprize img { width:60%; margin:0em auto }
	header { padding:1em 1em 0}
}

/*---navi---*/
#navi{
}
@media screen and (max-width: 767px) {
	#navi{
		position: fixed;
		top: 0;
		right: -110%;
		width: 300px;
		height: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		display: block;
		transition: all 0.3s ease-out;
		z-index: 400;
	}
}
#navi.active{
	@media screen and (max-width: 767px) {
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(35, 63, 102, 0.95);
	}
}
#navi .navi__inner{
	width: 100%;
	margin: 0 0 50px;
	padding: 0;
	overflow-y: auto;
}
@media screen and (max-width: 767px) {
	#navi .navi__inner{
		width: 100%;
		margin: 0;
		padding: 50px 0 0;
	}
}

#navilist{
	position:relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	@media screen and (max-width: 767px) {
		position:relative;
		width: 84%;
		height: auto;
		margin: 0 auto 18px;
		padding: 24px 0;
		text-align: left;
		display: block;
		padding: 0;
	}
}
#navilist .navilist__tt{
	display: none;
	@media screen and (max-width: 767px) {
		width: 70%;
		margin: 0 0 20px;
		padding: 0 0 20px;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
		display: block;
	}
}
#navilist .navilist__tt img{
	width: 100%;
	display: block;
}
#navilist .navilist__li{
	position: relative;
	margin: 0 2.5%;
	padding: 0;
	font-family:'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS PMincho', 'MS 明朝', serif;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	box-sizing: border-box;
}
@media screen and (max-width: 767px) {
	#navilist .navilist__li{
		width: 100%;
		margin: 0 auto;
		padding: 0;
		font-size: 2rem;
		text-align: left;
	}
}

#navilist .navilist__li__link{
	margin: 0;
	padding: 14px 0;
	color: #164483;
	box-sizing: border-box !important;
	text-decoration: none !important;
	display: block !important;
	transition: all 0.3s ease-out;
}
@media screen and (max-width: 767px) {
	#navilist .navilist__li__link{
		color: #fff;
		padding: 20px 0;
	}
}
#navilist .navilist__li__link:hover{
	opacity: 0.6;
}
@media screen and (max-width: 767px) {
	#navilist .navilist__li__link:hover{
		opacity:1;
	}
}

.btncontact{
	display: none;
	font-family:'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS PMincho', 'MS 明朝', serif;
}

@media screen and (min-width: 1100px) {
	.btncontact{
		position: absolute;
		top: 28px;
		right: 28px;
		width: 184px;
		height: 62px;
		font-size: 1.8rem;
		font-weight: 700;
		border: 1px solid #164483;
		text-decoration: none;
		display: grid;
		place-content: center;
		box-sizing: border-box;
		transition: all 0.3s ease-out;
	}
}

@media screen and (max-width: 767px) {
	.btncontact{
		position: relative;
		left: 0;
		right: 0;
		width: 84%;
		height: 62px;
		margin: 0 auto;
		font-size: 2rem;
		font-weight: 700;
		color: #fff;
		border: 1px solid #fff;
		text-decoration: none;
		display: grid;
		place-content: center;
		box-sizing: border-box;
	}
}

.btncontact:hover{
	color: #fff;
	border: 1px solid #164483;
	background: #164483;
}

@media screen and (max-width: 767px) {
	.btncontact:hover{
		color: #fff;
		border: 1px solid #fff;
		background: none;
	}
}

.btnopen{
	display: none;
}

@media screen and (max-width: 767px) {
	.btnopen{
		position: fixed;
		top: 16px;
		right: 16px;
		width: 58px;
		height: 58px;
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box !important;
		background: #233F66;
		border-radius: 100%;
		cursor: pointer;
		z-index: 600;
	}
}

@media screen and (max-width: 767px) {
	.btnopen.active{
		right: 16px;
	}
}

.btnopen span {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 44%;
	height: 2px;
	background: #fff;
	border-radius: 4px;
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}

.btnopen.active span {
	width: 54%;
}

.btnopen span:nth-of-type(1) {
  top: 20px;
}
.btnopen span:nth-of-type(2) {
	left: -20%;
  top: 28px;
	width: 24%;
	margin: 0 auto;
}
.btnopen span:nth-of-type(3) {
  bottom: 20px;
}

.btnopen.active span:nth-of-type(1) {
  top: 15px;
  transform: translateY(13px) rotate(-315deg);
}
.btnopen.active span:nth-of-type(2) {
  opacity: 0;
}
.btnopen.active span:nth-of-type(3) {
  bottom: 17px;
  transform: translateY(-11px) rotate(315deg);
}

.main_img {width:100%; padding:2em 0}

main { padding:0 1em}
main > h3::before {content: '';  position: absolute; left: 0; right:0; top: 1.5em; width:12%; height: 3px; background: #175bba 2px; margin:0 auto; display: inline-block}
.scttile {margin: 2em 0 2.5em}

main > dl > dt { border-top:1px dotted #ccc; padding-top:1.2em}
dl dt { font-size:20px; font-size:2.0rem; font-weight:bold; margin-bottom:0.3em;}
dl dd { font-size:16px; font-size:1.6rem; margin:0 0 1.5em 0;}


/*アイキャッチ*/
.eye_catch { text-align:center;}
.eye_catch a{ margin:1.5em auto; width: 150px; height: 150px; padding: 50px 0 0; display: block; text-align: center; font-size: 100%; color: #fff; background: #233f66; text-decoration:none;
	border: 1px solid #233f66;
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	transition: background-color 0.5s ease-in;
	-webkit-transition: background-color 0.5s ease-in;
}
@media screen and (min-width: 769px)  {
.eye_catch a {width: 200px; height: 200px; padding: 80px 0 0;font-size: 120%; }
}

.eye_catch a:hover { background: #fff;color: #233f66; border: 1px solid #233f66; }
.eye_catch strong { font-size:130%}
.eye_catch img { width:100%}


/*選考委員*/
ul#award_selector { padding:0 0.1em}
ul#award_selector img { width:100%; padding:0 0.1em;}
ul#award_selector li {margin-bottom:1em;}
ul#award_selector li p { margin:0.5em 0}
ul#award_selector li p strong { font-size:140%; font-family:'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS PMincho', 'MS 明朝', serif}

@media screen and (min-width: 481px)  {
	ul#award_selector {
		flex-direction:row;
		flex-wrap: wrap;
		display:-webkit-box;
		display:-ms-flexbox;
		display: flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		padding-left:0;
	}
	ul#award_selector li {flex-basis:48%; margin:1em 1%;}
}

@media screen and (min-width: 769px)  {
	#award_selector {max-width:1200px;}
	ul#award_selector li {flex-basis:18.5%; margin:0 0.5%;}
	ul#award_selector.v_6 li {flex-basis:28%; margin:0 0.5% 2em;}
}

.pcimg{
	display: block;
}

.spimg{
	display: none;
}

@media screen and (max-width: 767px) {
	.pcimg{
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.spimg{
		display: block;
	}
}


/*注意書き*/
.note{padding-left:0; font-size:15px; font-size:1.5rem; letter-spacing:0; margin-bottom:2.5em;}
.note li { margin-bottom:0.5em}


/*応募ボタン*/
#form { margin:1em 3% 1em 0}
#form dt { font-size:15px; font-size:1.5rem}
#form dd { border:none;}

.btn_form {clear:both;display:block;width: 100%; margin:1.5em 0;padding:0.8em 2em;text-align:center;text-decoration: none;font-weight:bold;color: #ffffff;background:#233f66;border: 3px solid #233f66;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;font-size:20px; font-size:2.0rem; transition: all 0.3s ease-out;}
.btn_form:hover { color:#fff; background-color:#175bba;border: 3px solid #175bba;}
@media screen and (min-width: 769px)  {
	.btn_form {max-width:500px;}
}

/*チェック項目*/
.checklist li{
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 0 30px;
	box-sizing: border-box;
}
.checklist input[type=checkbox] {
	display: none;
}
.checklist .check-box{
	position: absolute;
	top: 0;
	left: 0;
}

.checklist .check-box__text {
	display: inline-block;
	padding: 0 0 0 25px;
	cursor: pointer;
	position: relative;
}

.checklist .check-box__text::before {
	content: '';
	display: inline-block;
	position: absolute;
	width: 18px;
	padding-top: 18px;
	top: -16px;
	left: 0;
	border: 1px solid #233F66;
}

.checklist .check-box__text::after {
	content: '';
	display: inline-block;
	position: absolute;
	width: 14px;
	padding-top: 7px;
	top: -15px;
	left: 3px;
	border-left: 3px solid #233F66;
	border-bottom: 3px solid #233F66;
	transform: rotate(-45deg);
	opacity: 0;
}

.checklist input[type=checkbox]:checked + span::after {
	opacity: 1;
}


/*FAQタブ*/
.faqWrap{
	position: relative;
	margin: 0 0 30px;
	padding: 0;
}

@media screen and (max-width: 767px) {
	.faqWrap{
		margin: 0;
	}
}

.faqWrap .tabarea{
	position: relative;
	margin: 0 0 30px;
	padding: 0;
}

.faqWrap .tab-group{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
	list-style-type: none;
}
@media screen and (max-width: 767px) {
	.faqWrap .tab-group{
	}
}
.faqWrap .tab{
	position: relative;
	width: 180px;
	height: 34px;
	margin: 0 0.5%;
	padding: 0;
	font-size: 1.5rem;
	color: #233F66;
	font-weight: 700;
	list-style: none;
	line-height: 100%;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	border: 2px solid #233F66;
	background: #fff;
	border-radius: 100px;
	transition: all 0.3s ease-out;
}
@media screen and (max-width: 780px) {
	.faqWrap .tab{
		width: 48%;
		margin: 0 1% 10px;
		font-size: 1.4rem;
	}
}

.faqWrap .tab:hover{
	color: #fff;
	background: #233F66;
}

.faqWrap .tab.tabactive{
	color: #fff;
	background: #233F66;
}

.faqWrap .panel-index{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
@media screen and (max-width: 960px) {
	.faqWrap .panel-index{
		width: 100%;
		max-width: 100%;
		padding: 0;
	}
}
.faqWrap .panel-group{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border: 1px solid $gray;
	background: $black;
	transition: all 0.3s ease-out;
}
@media screen and (max-width: 960px) {
	.panel-group{
		width: 100%;
		max-width: 100%;
		padding: 0;
	}
}

.faqWrap .panel{
	padding: 30px 0 24px;
	display: none;
}
@media screen and (max-width: 960px) {
	.faqWrap .panel{
		padding: 20px 0 14px;
	}
}
.faqWrap .panel.tabshow{
	display: block;
}

.faqWrap .faqWrap__col{
	margin: 0 0 16px;
	padding: 20px;
	text-align: left;
	border: 1px solid #175BBA;
	border-radius: 8px;
	background: #fff;
}

@media screen and (max-width: 767px) {
	.faqWrap .faqWrap__col{
		margin: 0 0 10px;
		padding: 14px;
	}
}

.faqWrap .faqWrap__col:last-child{
	margin: 0;
}

.faqWrap .faqWrap__col__q{
	position: relative;
	margin: 0;
	padding: 3px 36px 0;
	cursor: pointer;
	transition: all 0.3s ease-out;
}

@media screen and (max-width: 767px) {
	.faqWrap .faqWrap__col__q{
		padding: 3px 20px 0 36px;
	}
}

.faqWrap .faqWrap__col__q:hover{
	color: #175BBA;
}

.faqWrap .faqWrap__col__q::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	background: url(../../img/prize/ico_q.svg) 50% 50% no-repeat;
	background-size: 26px 24px;
	display: block;
}

.faqWrap .faqWrap__col__q::after{
	content: '';
	position: absolute;
	top: 8px;
	right: 0;
	width: 18px;
	height: 10px;
	background: url(../../img/prize/ico_arrow.svg) 50% 50% no-repeat;
	background-size: cover;
	display: block;
	transition: all 0.3s ease-out;
}

@media screen and (max-width: 767px) {
	.faqWrap .faqWrap__col__q::after{
		width: 14px;
		height: 7px;
	}
}

.faqWrap .faqWrap__col__q.active::after{
	position: absolute;
	transform: rotate(-180deg);
}

.faqWrap .faqWrap__col__a{
	position: relative;
	margin: 12px 0 0 0;
	padding: 4px 36px 0;
	display: none;
}

@media screen and (max-width: 767px) {
	.faqWrap .faqWrap__col__a{
		margin: 8px 0 0 0;
		padding: 4px 20px 0 36px;
	}
}

.faqWrap .faqWrap__col__a::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	background: url(../../img/prize/ico_a.svg) 50% 50% no-repeat;
	background-size: 23px 25px;
	display: block;
}

.faqWrap .faqWrap__col__a ul{
	list-style-type: circle;
	margin: 6px 0 0 0;
	padding: 0 0 0 18px;
	box-sizing: border-box;
}


/*過去の受賞作*/
.prizeWrap{
	position: relative;
	margin: 0 0 60px;
	padding: 0;
}

.prizeWrap h4{
	position: relative;
	margin: 0 0 20px;
	padding: 0;
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
}

.prizeWrap .swiper {
	width: 100%;
	height: 100%;
	padding: 40px 0 0 0;
}

.prizeWrap .swiper-slide {
	position: relative;
	text-align: center;
	font-weight: 700;
}

.prizeWrap .swiper-slide .index{
	position: absolute;
	top: -18px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 76%;
	height: 28px;
	font-size: 1.4rem;
	color: #fff;
	display: grid;
	place-content: center;
	background: #175BBA;
	border-radius: 100px;
	z-index: 30;
}

.prizeWrap .swiper-slide img {
	margin: 0 0 12px;
  width: 100%;
  height: auto;
  object-fit: cover;
	display: block;
	transition: all 0.3s ease-out;
}

.prizeWrap .swiper-slide img:hover {
	opacity: 0.6;
}

.prizeWrap .swiper-slide strong{
	margin: 4px 0 0 0;
	font-size: 2.0rem;
	display: block;
}


/*最新号*/
.latest_issue { width:95%; padding:1em; margin:1em auto; text-align:center; border:1px solid #233f66; background:#fff}
.latest_issue a { display:block}
.latest_issue img { width:80%}
@media screen and (min-width: 769px)  {
.latest_issue { width:100%;}
.latest_issue img { width:40%}
}

/*サブコンテンツ*/
#sub_contents { margin-top:4em; font-size:14px; font-size:1.4rem}
#sub_contents h3 { margin:0.5em auto; font-size: 2rem;}
.past_list { background:#fff; padding:1em; width:100%;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px; box-sizing: border-box;}
.twit{ margin:1.5em auto; width:95%;}
.twit_btn { margin-top:1em; text-align:right}
@media screen and (min-width: 769px)  {
	.past_list {width:50%;}
	.twit { margin-left:2em; margin-top:0; width:50%}
}

/*受賞者のことば*/
#winner_info { text-align:center; background:# }
#winner_info img { width:60%; margin-bottom:0}
.winner_name { margin:0.3em auto 1.5em}
@media screen and (min-width: 769px)  {
#winner_info img { width:40%; max-width:200px;}
}


/*ページトップボタン*/
#page-top { bottom: 20px; font-size: 100%; position: fixed; right: 20px; z-index: 1;}
#page-top a { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; border-radius: 0.2em; color: #fff; display: block; padding: 15px 10px; text-align: center; text-decoration: none;}
#page-top a:hover { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; text-decoration: none;}

/*フッター*/
footer { margin-top:4em;background:#333; color:#fff; text-align:center}
footer ul.sns_btn li { display: inline-block; margin:0.3em; width:10%; max-width:60px}
footer ul.sns_btn li img { width:100%}
.footer_nav { padding:1em 0;/* display:flex; justify-content:space-between;*/}
.footer_nav img {margin-bottom:0.1em}