/* -------------------------------------
GANREF
Copyright (c) 2018 Impress Corporation. All rights reserved.
------------------------------------- */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 

:root {
--theme-color: #363a84;
--theme-color2: #5a60d4;
--theme-color3: #ffd000;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
intro, aside, canvas, details, embed, 
figure, figcaption, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
-intro, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {
line-height: 1.4;
-webkit-text-size-adjust: 110%;
}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

#wrapper img {
width: auto;
}

.contents p {
line-height: 1.3;
margin-bottom: 1rem;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

b, strong {font-weight:bold;}

img {vertical-align:bottom;}

figure {
margin: 0;
text-align: center;
}

h3 {font-size: 1rem;}

/***********************************************************************/



.onlyPC {display: none !important;}

.sns {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.sp-mb1,
.mb1 {margin-bottom: 1rem;}

.mb10px {margin-bottom: 10px;}

.mb0 {margin-bottom: 0 !important;}

.center {text-align: center !important;}


/***********************************************************************/

.sp-page * {
font-family: "-apple-system", "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

.sp-page {
margin: 20px;
position: relative;
font-feature-settings: "palt";
}

/* === .zoom === */
.zoom{
display:inline-block;
position:relative;
vertical-align:top;
}

.zoom:after{
content:"";
width:22px;
height:22px;
background:url(img/zoom.png) no-repeat 0 0;
position:absolute; bottom:5px; right:5px;
}
.zoom:hover:after{ background-position:-22px 0; }
span.zoom:after{ display:none; }

/**/

.ext-link::before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "";
margin-right: 0.2rem;
}

.notice {
padding: 10px;
border: 2px dotted #ccc;
border-radius: 6px;
}

p.notes,
ul.notes li{
font-size:0.9rem;
text-indent:-1rem;
padding-left:1rem;
line-height: 1.2rem;
margin-bottom: 0.4rem;
}

p.notes::before,
ul.notes li::before {
content: '※';
margin-right: 0.1rem;
}

#title {
margin-bottom: 1rem;
position: relative;
}

#title>img {
width: 1400%;
}


#title p {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin: 10px;
font-size: 0px;
}

#title p::before {
content:"";
display: block;
padding-top: 7%;
}

h1 {
background: url(img/h1_bg.webp) no-repeat 50% 0;
background-size: cover;
text-align: center;
margin: 0 -20px 1rem;
}

h1 img {
margin: 10px;
max-height: 200px;
}



.contents h2 {
background-color: #20245b;
opacity: 1;
z-index: -1;
background: url(img/h1_bg.webp) no-repeat 50% 0;
background-size: cover;
text-align: center; 
color: #fff;
font-size: 1rem;
font-weight: bold;
padding: 15px 20px;
border-width: 1px 0 1px 0;
margin-bottom: 20px;
margin-top: 40px;
margin-left: -20px;
margin-right: -20px;
}

h3{
font-size: 1rem;
font-weight: bold;
margin-bottom: 1rem;
}

.contents hr {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #ccc;
margin: 2rem 0;
}

/**/

#sp-info {
border: 2px solid #ffed00;
padding: 6px;
border-radius: 6px;
position: relative;
margin: 1rem 0;
}

#sp-info>b {
color: #000;
text-align: center;
display: block;
font-size: 1rem;
border-radius: 6px;
background: #ffed00;
padding: 5px;
margin-bottom: 10px;
}

#sp-info>p {
font-size: 1rem;
line-height: 1.4rem;
}

#sp-info dl:first-of-type {
border-bottom: 2px dotted #ccc;
margin-top: 0;
padding-bottom: 10px;
margin-bottom: 10px;
}

#sp-info dl dt {
text-align: center;
}

#sp-info dl dt img{
max-width: 90%;
margin-bottom: 5px;
}

.sp-form {
border: 2px dotted var(--theme-color);
padding: 10px;
margin: 1.5rem 0;
font-size: 1rem;
border-radius: 8px;
text-align: center;
}

.sp-form p {
	margin: 0.3rem 0 0 0;
}



/*****************************************************************/


/* ////////// summary ////////////////////////////// */

#summary dt{
font-weight:bold;
margin:0.5em 0;
padding:3px 0 3px 6px;
border-left:6px solid var(--theme-color);
}

#summary dd{
padding-left:12px;
}

#summary li{
list-style-type:disc;
margin:0.3em 0 0.7em 1.5em;
line-height: 1.4rem;
}

#summary li small{ display:block; margin:0.5em 0; }

#summary li small img{ margin-top:0.3em; }

#summary small{ font-size:90%; }

#summary dl dd ul li p {
text-align: center;
font-weight: bold;
margin: 10px 0 5px;
font-size: 0.9rem;
}


/* ////////// method ////////////////////////////// */


.step {
margin: 10px;
}

.step>li {
background: #fff;
padding: 10px;
margin-bottom: 20px;
box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.1);
position: relative;
border-radius: 10px;
}

.step h3 {
text-align: center;
}

.step em {
display: inline-block;
border-radius: 50%;
margin-right: 5px;
font-size: 14px;
line-height: 28px;
height: 34px;
width: 34px;
color: #fff;
text-align: center;
position: absolute;
left: -20px;
top: -15px;
font-family: Arial, Helvetica, "sans-serif";
background: var(--theme-color2);
border: 3px solid #fff;
}

.step li:after {
content: '';
background: var(--theme-color3);
height: 20px;
width: 40px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
z-index: 99;
left: calc((100% - 40px)/2);
bottom: -15px;
position: absolute;
}

.step li:last-child:after {
content: none;
}

.step li h3 {
margin-bottom: 10px;
}
.step li p {
margin:0.5em 0 0 0;
line-height: 1.3rem;
font-size: 0.9rem;
}


/* lead ***************************************************************/

#lead {
margin-bottom:40px
}

#lead>h3 {
font-size: 20px;
margin-bottom:1rem;
}

#lead p {
margin-bottom: 1rem;
}


/* prize ***************************************************************/

#prize {
background: #fff073 url(img/bg.gif) no-repeat 0 0;
padding: 10px;
border-radius: 8px;
font-size: 0.9rem;
/*text-shadow: 1px 1px 1px #CCC;*/
margin-bottom: 20px;
}


#prize b {
display: block;
margin: 0 0 10px;
border-radius: 8px;
background: #fff;
padding: 5px;
font-size: 1.1em;
text-align: center;
}

#prize i {
font-style: normal;
font-size: 0.9rem;
}

/*
.contents #subtitle {
border: 2px dotted #ccc;
border-radius: 6px;
font-weight: bold;
text-align: center;
font-size: 1.1rem;
padding: 10px;
}

.contents #subtitle a {
color: var(--theme-color2);
}
*/

.btn-entry a {
	display: block;
	padding: 1rem;
	background-color: #FDE823;
	border-radius: 6px;
	color: #000;
	margin: 0.5rem 1rem;
	font-size: 1.2rem !important;
	text-decoration: none;
	line-height:1.5;
	text-align: center;
	font-weight:bold;
}

/* ranking ***************************************************************/

.prize1st dd {
margin:10px 0 40px;
}

.prize1st dd p:first-child {
text-align: center;
}

#ranking h3 {
border:1px solid #ccc;
padding: 10px;
background: #eee;
}

#ranking .thumbList {
display: flex;
justify-content: left;
flex-wrap: wrap;
padding-bottom: 20px;
}

#ranking .thumbList,
#ranking .thumbList p{margin: 0;
text-align: center;}

#ranking .thumbList li{
margin: 0 10px 20px 0;
width: calc((100% - 10px)/ 2);
}

#ranking .thumbList li:nth-of-type(even){margin-right: 0;}

#ranking .thumbList li .thumb-wrapper {
display: block;
position: relative;
vertical-align: middle;
text-align: center;
width: 100%;
padding-top: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
background-color: #fff;
margin-bottom: 5px;
}

#ranking .thumbList li .thumb-wrapper img {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 96%;
max-height: 96%;
object-fit: contain;
}

#ranking .thumbList li p span {
font-size: 0.8rem;
display:inline-block;
margin-top:5px;
}