@import url('/css/legacy/parts.css');
:root {
--theme-color: #363a84;
--theme-color2: #5a60d4;
--theme-color3: #ffd000;
}

a:hover img {opacity: 0.8;}

/*common*/

.sp-page {
background-color:#fff;
/*font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;*/
font-size: 1.0rem;
line-height: 1.5;
font-feature-settings : "palt";
}

ol.breadcrumbsV2 {max-width: 100%;}

b, strong, em, h2, h3, 
#summary dt {
/*font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;*/
font-weight: 700;
}

#wrapper {
width: 100%;
}
#wrapper img {
/* width: auto; */
vertical-align: bottom;
}

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

h1 img {
margin: 20px;
max-height: 300px;
}

p {font-size: 17px;}

.contents {
background-color:#fff;
line-height: 1.4rem;
padding: 20px 50px;
max-width: 1234px;
margin: auto;
font-size: 17px;
}


.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: 1.4rem;
font-weight: bold;
padding: 15px;
border-width: 1px 0 1px 0;
margin-bottom: 20px;
margin-top: 40px;
}


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

.contents p,
.mb1,
.sns {margin-bottom: 1rem;}

.mb10px {margin-bottom: 10px !important;}

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

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


p.caption {
font-size: 0.85rem;
line-height: 1.2rem;
text-align: left;
}

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

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

.ext-link::after {
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-left: 0.2rem;
}

/* === .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; }


.help-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;
}


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

#summary dl {
margin: 1rem;
}

#summary dt{
margin:0.5em 0;
padding:3px 0 3px 6px;
border-left:6px solid var(--theme-color);
}
#summary dd{
padding-left:12px;
margin-bottom: 40px;
}
#summary li{
list-style-type:disc;
margin:0.3em 0 0.5em 1.5em;
line-height: 1.5;
}
#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 {
width: 613px;
text-align: center;
font-weight: bold;
margin: 10px 0 5px;
font-size: 0.9rem;
}


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

.step {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 40px;
}

.step>li {
background: #fff;
padding: 20px;
width: calc((100% - 60px)/3);
margin-bottom: 30px;
margin-right: 30px;
box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.1);
position: relative;
border-radius: 10px;
}

.step>li:nth-of-type(3n),
.step>li:last-of-type {
margin-right: 0;
}
.step em {
display: inline-block;
border-radius: 50%;
margin-right: 5px;
font-size: 20px;
line-height: 36px;
width: 44px;
color: #fff;
text-align: center;
position: absolute;
left: -20px;
top: -15px;
font-family: Arial, Helvetica, "sans-serif";
background: var(--theme-color2);
border: 4px solid #fff;
}
.step li:after {
content: '';
background: var(--theme-color3);
height: 50px;
width: 30px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
top: calc(50% - 25px);
z-index: 99;
right: -26px;
position: absolute;
}
.step li img {
width: 100%;
}
.step li:last-child:after {
content: none;
}
.step li a {
position: relative;
}

.step li p {
margin:0.5em 0 0 0;
line-height: 1.4rem;
font-size: 1rem;
}
/* prize ***************************************************************/

#prize {
background: #fff073 url(img/bg.gif) no-repeat 0 0;
background-size: cover;
padding: 10px;
border-radius: 8px;
text-align: center;
line-height: 1.7;
/*text-shadow: 1px 1px 1px #CCC;*/
margin-bottom: 40px;
}

#prize .note {
font-size: 0.8em;
}

#prize b {
display: block;
margin: 0 10px 10px;
border-radius: 8px;
background: #fff;
padding: 5px;
font-size: 1.3rem;
}

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


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

#lead {
margin-bottom:40px
}
.results #lead {
border: 1px solid var(--theme-color);
padding: 10px;
}

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

#lead h3 em {
display: inline-block;
background: #fff;
border-radius: 4px;
padding: 5px 15px;
font-size: 1rem;
margin-right: 10px;
font-style:normal;
font-weight:bold;
}

#lead p {
margin: 1rem;
}

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

.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 ***************************************************************/

#ranking {
margin: 20px;
}

.prize1st {
display: flex;
width: 100%;
}

.prize1st dt {
width: 430px;
margin-bottom: 40px;
margin-right: 20px;
}

.prize1st dd {
flex-grow:1
}

#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% - 40px)/ 5);
}

#ranking .thumbList li:nth-of-type(5n){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;
}