@charset 'UTF-8';





/*

    Header

*/
header {
	position: relative;
	z-index: 2;
}
/*  h1  */
header h1 {
	padding: 15px 0;
	background: linear-gradient(to right, #b8751e 0%, #ffce08 25%, #fefeb2 50%, #ffce08 75%, #b8751e 100%);
	text-align: center;
	line-height: 1;
	box-sizing: border-box;
}
header h1 img {
	width: auto;
	height: 25px;
}





/*

    Footer

*/

/*  layout  */
footer {
	background: linear-gradient(to right, #b8751e 0%, #ffce08 25%, #fefeb2 50%, #ffce08 75%, #b8751e 100%);
}
footer small {
	display: block;
	padding: 1em 0;
	text-align: center;
	font-size: 1.3rem;
}





/*

    Common

*/

/*  body  */
body {
	background-attachment: fixed;
	background-image: url('./images/bg_a.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: 600;
	color: #000000;
}

/*  headings  */
section h2 {
	margin: 0.5em 0;
	font-family: 'Noto Serif JP', serif;
	font-size: 2.0em;
	font-weight: 900;
	text-align: center;
}
section h2 span {
	display: block;
	font-size: 0.5em;
}
section h3 {
	margin: 1em 0;
	font-family: 'Noto Serif JP', serif;
	font-size: 1.25em;
	font-weight: 900;
	text-align: center;
}
em {
	font-style: normal;
}
@media screen and (min-width: 768px) {
	body {
		font-size: 15px;
		font-size: 1.5rem;
	}
	section h2 {
		font-size: 2.5em;
	}
}

/*  container  */
.container {
	width: 100%;
	margin: 0 auto;
	padding: 2em 10px;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	.container {
		padding: 2em 0;
	}
}

/*  images  */
img {
	max-width: 100%;
}

/*  button  */
.link_btn {
	margin: 1em 0;
	text-align: center;
}
.link_btn a {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 9999px;
	background-color: #D94814;
	font-size: 10px;
	font-size: 1.0rem;
	color: #FFFFFF;
	box-sizing: border-box;
}
@media screen and (min-width: 800px) {
	.link_btn a {
		font-size: 13px;
		font-size: 1.3rem;
	}
}

/*  supple  */
.supple {
	display: block;
	font-size: 0.75em;
	color: #666666;
}

/*  small  */
small {
	font-size: 10px;
	font-size: 1.0rem;
}

/*  link  */
a {
	cursor: pointer;
}
a.link {
	font-weight: 900;
	color: #e73828;
	cursor: pointer;
}

/*  sns  */
a.twitter {
	display: inline-block !important;
	width: 40px;
	height: 40px;
	margin: 0.5em;
	background-image: url('./images/twitter.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
a.instagram {
	display: inline-block !important;
	width: 40px;
	height: 40px;
	margin: 0.5em;
	background-image: url('./images/instagram.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
a.youtube {
	display: inline-block !important;
	width: 40px;
	height: 40px;
	margin: 0.5em;
	background-image: url('./images/youtube.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}





/*

	#mv

*/
/*  common  */
#mv .container {
	position: relative;
	text-align: center;
}

/*  copy  */
#mv .container p.copy {
	position: relative;
	display: block;
	margin: 0 auto;
	font-family: 'Noto Serif JP', serif;
	font-weight: bold;
	text-align: center;
}
#mv .container p.copy strong {
	display: block;
	margin: -0.25em 0 0;
	font-size: 5em;
}
#mv .container p.copy span.description {
	display: block;
	padding: 1em;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.5);
	font-size: 1.25em;
	box-sizing: border-box;
}
#mv .container p.copy span.description span {
	display: block;
	font-size: 0.75em;
	color: #333333;
}
#mv .container p.copy span.description span.term {
	margin: 1em 0;
}
#mv .container p.copy span.description span.supple a {
	display: inline-block;
	margin: 1em 0 0;
	padding: 0.25em 1em;
	border: 3px solid #D94814;
	border-radius: 9999px;
	background-color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	color: #D94814;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	#mv .container p.copy {
		display: block;
		max-width: 768px;
	}
	#mv .container p.copy strong {
		font-size: 7.5em;
	}
	#mv .container p.copy span.description {
		font-size: 1.75em;
	}
	#mv .container p.copy span.term {
		font-size: 1.25em;
	}
}





/*

	#result

*/

/*  common  */
#result .container {
	position: relative;
}

/*  headding  */
#result .container h2 {
	margin: 1.5em 0 0;
}
#result .container #saiyusyu h2,
#result .container #yusyu h2,
#result .container #kasaku h2 {
	margin: -2em 0 -0.25em;
	padding: 1em 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	font-size: 2.5em;
	box-sizing: border-box;
}
#result .container #saiyusyu h2 { background-image: url('./images/prize_gold.png'); }
#result .container #yusyu h2 { background-image: url('./images/prize_silver.png'); }
#result .container #kasaku h2 { background-image: url('./images/prize_pink.png'); }
#result .container h2:before {
	content: "";
	display: block;
	margin: -1.5em auto 0;
	width: 1.5em;
	height: 1.5em;
	background-image: url('./images/prize.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
#result .container h2+p {
	margin: 1em auto;
	text-align: center;
}
#result .container h2+p.prize {
	margin: 0 auto 1em;
	text-align: center;
}
#result .container h2+p.prize strong {
	display: inline-block;
	margin: 0 0 0.5em 0;
	padding: 0 1em;
	border-radius: 9999px;
	background-color: #fccb00;
	text-align: center;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	#result .container h2+p {
		max-width: 600px;
	}
}

/*  frame  */
#result .container div.frame {
	margin: 4em auto 2em;
	padding: 2em;
	background-image: url('./images/bg_c.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	box-sizing: border-box;
}
#result .container div.frame:first-of-type {
	margin-top: 2em;
}
@media screen and (min-width: 768px) {
	#result .container div.frame {
		max-width: 768px;
	}
}

/*  .haiku-box  */
.haiku-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.haiku-box p.haiku {
	height: 11em;
	margin: 0;
	padding: 1em;
	border: 5px solid #D94814;
	background-color: #FFFFFF;
	font-family: 'Noto Serif JP', serif;
	font-size: 2em;
	font-weight: 900;
	box-sizing: border-box;
	/*縦書き*/
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: center;
}
.haiku-box p.haiku span.tatecyuyoko {
	/*縦中横*/
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all;
	vertical-align: -0.075em;
}
.haiku-box p.name {
	width: 100%;
	text-align: center;
}
.haiku-box p.name span {
	display: block;
}

/*  comment  */
div.comment {
	margin: 0 auto;
	padding: 1em;
	text-align: center;
	box-sizing: border-box;
}
div.comment img {
	display: inline-block;
	margin: 2em 0.5em 0;
	width: 25%;
	height: auto;
}
div.comment p {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 1em;
	border-radius: 5px;
	background-color: #cfeef9;
	text-align: left;
	box-sizing: border-box;
}
div.comment p:before {
	position: absolute;
	right: 0;
	bottom: -0.5em;
	left: 0;
	content: "";
	display: block;
	margin: auto;
	width: 1em;
	height: 1em;
	background-color: #cfeef9;
	transform: rotate(45deg);
}

/*  comments  */
ul.comments {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	list-style: none;
	margin: 1em auto;
}
ul.comments li {
	display: flex;
	flex-wrap: no-wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}
ul.comments li+li {
	margin-top: 1em;
}
ul.comments li img {
	flex-shrink: 0;
	width: 25%;
	height: auto;
}
ul.comments li p.comment {
	position: relative;
	margin: 0;
	padding: 1em;
	border-radius: 5px;
	background-color: #cfeef9;
	box-sizing: border-box;
}
ul.comments li p.comment:before {
	position: absolute;
	top: 0;
	bottom: 0;
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	margin: auto;
	background-color: #cfeef9;
	transform: rotate(45deg);
}
ul.comments li:nth-of-type(odd) {
	flex-direction: row;
}
ul.comments li:nth-of-type(odd) p.comment {
	margin: 0 0 0 1em;
}
ul.comments li:nth-of-type(odd) p.comment:before {
	left: -0.5em;
}
ul.comments li:nth-of-type(even) {
	flex-direction: row-reverse;
}
ul.comments li:nth-of-type(even) p.comment {
	margin: 0 1em 0 0;
}
ul.comments li:nth-of-type(even) p.comment:before {
	right: -0.5em;
}

/*  #saiyusyu  */
@media screen and (min-width: 768px) {
	#result .container #saiyusyu ul.comments,
	#result .container #sommelier ul.comments,
	#result .container #noguchi ul.comments {
		width: 75%;
	}
}

/*  #manga  */
#result .container #manga>a {
	display: block;
	margin: 2em auto;
	width: 100%;
}
#result .container #manga>a img {
	width: 100%;
	height: auto;
}

/*  ul.type_a   */
ul.type_a {
	list-style: none;
	margin: 0;
}
ul.type_a>li {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin: 0;
	padding: 1em;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	ul.type_a {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}
	ul.type_a>li {
		width: 50%;
		padding: 2em;
	}
	ul.type_a>li .haiku-box p.haiku {
		font-size: 1.75em;
	}
}

/*  ul.type_b   */
ul.type_b {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
}
ul.type_b>li {
	width: 50%;
	margin: 0;
	padding: 1em;
	box-sizing: border-box;
}
ul.type_b>li .haiku-box p.haiku {
	font-size: 1.25em;
}
ul.type_b>li .haiku-box p.name {
	font-size: 0.75em;
}
ul.type_b>li .haiku-box p.name span {
	display: block;
}
@media screen and (min-width: 768px) {
	ul.type_b>li {
		width: 33.33%;
	}
	ul.type_b>li .haiku-box p.haiku {
		font-size: 1.5em;
	}
	ul.type_b>li .haiku-box p.name {
		font-size: 1em;
	}
}





/*

	#judge

*/
/*  common  */
#judge {
	position: relative;
	background-image: url('./images/bg_b.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	z-index: 2;
}

/*  .judge  */
#judge .container ul.judge {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0 auto;
}
#judge .container ul.judge li {
	width: 50%;
	margin: 0;
	padding: 2em 1em;
	text-align: center;
	box-sizing: border-box;
}
#judge .container ul.judge li .wrap>img {
	margin: 1em 0;
}
#judge .container ul.judge li .wrap span.name {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Noto Serif JP', serif;
	font-size: 1.5em;
	font-weight: 900;
}
#judge .container ul.judge li .wrap span.name small {
	margin: 0 1em 0 0;
}
#judge .container ul.judge li .wrap span.description {
	display: block;
	margin: 1em 0;
	text-align: left;
}
#judge .container ul.judge li .wrap p.link_btn a {
	width: 100%;
	background-color: #745f4f;
	font-size: 10px;
	font-size: 1.0rem;
	color: #FFFFFF;
}
@media screen and (min-width: 800px) {
	#judge .container ul.judge {
		max-width: 800px;
	}
	#judge .container ul.judge li {
		padding: 2em;
	}
	#judge .container ul.judge li .wrap>img {
		width: 75%;
	}
	#judge .container ul.judge li .wrap p.link_btn a {
		font-size: 13px;
		font-size: 1.3rem;
	}
}
/*  .result  */
#judge .container ul.result {
	list-style: none;
	margin: 2em auto;
}
#judge .container ul.result li {
	margin: 0;
	padding: 0.5em;
	box-sizing: border-box;
}
#judge .container ul.result li a {
	display: inline-block;
	width: 100%;
	padding: 0.5em;
	border-radius: 5px;
	background-color: #27828C;
	color: #ffffff;
	text-align: center;
	box-sizing: border-box;
}
@media screen and (min-width: 800px) {
	#judge .container ul.result {
		max-width: 800px;
		overflow: hidden;
	}
	#judge .container ul.result li {
		float: left;
		width: 50%;
	}
}





/*

	#sumup

*/

#sumup {
	position: relative;
	background-image: url('./images/bg_c.jpg');
	backgrond-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	z-index: 2;
}
#sumup p.link_btn {
	margin: 2em 0 0;
	text-align: center;
}
@media screen and (min-width: 768px) {
	#sumup .container p {
		max-width: 768px;
		margin: 1em auto;
	}
}





/*

	#note

*/
#note{
	position: relative;
	background-color: #FFFFFF;
	z-index: 2;
}
#note .container ul.list {
	list-style: none;
}
#note .container ul.list>li {
	margin: 0;
	padding: 0 0 0 1em;
	text-indent: -1em;
	box-sizing: border-box;
}
#note .container ul.list>li:before {
	content: "■";
	margin: 0 0.25em 0 0;
}
#note .container ul.list>li>ul {
	list-style: disc;
	margin: 0;
}
#note .container ul.list>li>ul>li {
	text-indent: 0;
}
@media screen and (min-width: 768px) {
	#note .container ul.list {
		max-width: 768px;
		margin: 1em auto;
	}
}

#note .container p.link_btn {
	margin: 2em 0;
}


/*  sns  */
#note .container ul.sns {
	list-style: none;
	margin: 2em 0 0;
	text-align: center;
}
#note .container ul.sns li {
	display: inline-block;
	margin: 0 15px;
}
#note .container ul.sns li a {
	display: block;
	width: 45px;
	height: 45px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#note .container ul.sns li#twitter a {
	background-image: url('./images/twitter.png');
}
#note .container ul.sns li#facebook a {
	background-image: url('./images/facebook.png');
}
#note .container ul.sns li#line a {
	background-image: url('./images/line.png');
}