/* CSS Document */
/* =============================================
share
================================================ */
.pc { display: block; }

.mb { display: none; }

a:hover { text-decoration: underline; }

.archive_btn a, .photo_nav a, .award li a, a img { -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; backface-visibility: hidden; }

.photo_nav a:hover, a:hover img { opacity: 0.6; filter: alpha(opacity=60); }

.award.no3 li .img a, .award.no4 li .img a { background: white; display: block; opacity: 0; }
.award.no3 li .img a:hover, .award.no4 li .img a:hover { opacity: .4; }

p, .text { line-height: 180%; }

input, textarea, checkbox { border: #ccc solid 1px; font-size: 110%; padding: 10px; }

.center { margin: 0 auto; max-width: 920px; padding-left: 20px; padding-right: 20px; }

/* footer */
#totop { position: fixed; bottom: 100px; right: 0; }

.ma60 { margin-bottom: 60px; }

.ma55 { margin-bottom: 55px; }

.ma50 { margin-bottom: 50px; }

.ma45 { margin-bottom: 45px; }

.ma40 { margin-bottom: 40px; }

.ma35 { margin-bottom: 35px; margin-bottom: 35px; }

.ma30 { margin-bottom: 30px; }

.ma25 { margin-bottom: 25px; }

.ma20 { margin-bottom: 20px; }

.ma15 { margin-bottom: 15px; }

.ma10 { margin-bottom: 10px; }

/* =============================================
top
================================================ */
header { background: #435C71; padding: 30px 10px; position: relative; }
header div { display: inline-block; }
header a { padding: 0 1vw; display: block; color: white; text-decoration: none; font-size: 90%; font-weight: bold; }
header .logo { position: absolute; height: 100%; vertical-align: middle; width: 215px; right: 0; top: 15px; }
header img { width: 155px; height: 44.5px; }

.photocon { color: black; }
.photocon section { padding: 60px 0; }

#overview { text-align: center; }
#overview h1 { font-size: 150%; }
#overview h2 { font-weight: bold; font-size: 220%; margin: 10px auto; line-height: 130%; }
#overview h3 { line-height: 150%; font-weight: bold; font-size: 110%; margin: 40px auto; }
#overview .theme { margin: 60px auto; background: #435C71; color: white; border-radius: 10px; padding-top: 20px; padding-bottom: 50px; }
#overview .theme h2:after { content: ""; display: block; width: 115px; height: 95px; background: url(../../img/camera.svg) no-repeat center; margin: 30px auto; }
#overview .theme div { background: white; border-radius: 10px; color: #435C71; padding: 20px 40px; }
#overview .theme div b { font-size: 105%; display: block; font-weight: bold; margin: 30px auto 20px; }
#overview .theme div p { text-align: left; font-size: 95%; }
#overview .theme div p + p { text-align: right; }

.award { background: #435C71; color: white; text-align: center; }
.award.no1 { background: #435C71; color: white; }
.award.no2 { background: #333; color: white; padding-bottom: 20px; }
.award.no3 { background: #DEE9F2; color: #435C71; }
.award.no3 ul { overflow: hidden; }
.award.no3 ul li { float: left; width: 31%; margin-right: 3.5%; }
.award.no3 ul li:nth-child(3) { margin-right: 0; }
.award.no3 div a { border-color: #435C71; color: #435C71; }
.award.no3 div a:hover { background: #435C71; color: white; }
.award.no3 div a.lb:hover { background: white; }
.award.no3 img { display: none; }
.award.no4 { background: white; color: #435C71; }
.award.no4 ul { overflow: hidden; }
.award.no4 ul li { float: left; width: 23%; margin-right: 2.6%; height: 380px; }
.award.no4 ul li:nth-child(4n) { margin-right: 0; }
.award.no4 .img a { border-radius: 0; }
.award.no4 div a { border-color: #435C71; color: #435C71; border-radius: 15px; line-height: 40px; }
.award.no4 div a:hover { background: #435C71; color: white; }
.award.no4 div a.lb:hover { background: white; }
.award.no4 img { display: none; }
.award.no4 b { font-size: 90%; }
.award h1 { font-size: 150%; font-weight: bold; margin-bottom: 30px; }
.award b { font-weight: bold; font-size: 105%; line-height: 130%; }
.award p { margin: 10px auto 20px; font-size: 90%; }
.award li { margin-bottom: 50px; }
.award img { max-width: 980px; width: 100%; height: auto; display: block; margin: 0 auto 20px; }
.award .long img { width: 600px; }
.award div a { display: inline-block; line-height: 50px; width: 150px; border-radius: 20px; border: solid 3px white; color: white; text-decoration: none; font-weight: bold; }
.award div a:hover { background: white; color: #555; }
.award .img { background: no-repeat center; background-size: cover; }
.award .img a { display: block; border: none; width: 100%; padding-bottom: 100%; border-radius: 0; margin-bottom: 15px; }

#oubo_inq { background: #DEE9F2; text-align: center; color: #435C71; padding: 60px 0; }
#oubo_inq b { display: block; font-weight: bold; font-size: 120%; margin-bottom: 20px; }
#oubo_inq p { font-size: 90%; }

footer { padding: 30px 0; font-size: 90%; background: #435C71; color: white; text-align: center; }
footer li { display: inline-block; }
footer ul { margin-bottom: 20px; }
footer a { display: inline-block; color: white; text-decoration: none; padding: 20px; }

/* =============================================
judge
================================================ */
#judge { width: 90%; }
#judge h2 { font-weight: bold; text-align: center; font-size: 150%; }
#judge h1 { font-weight: bold; font-size: 130%; margin: 30px auto 20px; }
#judge b { display: block; margin: 40px auto 20px; font-weight: bold; font-size: 110%; }
#judge figure { margin: 40px auto; padding: 0; text-align: center; }
#judge figure img { width: 100%; height: auto; }
#judge .long img { width: 70%; }
#judge .comment { border: solid 1px black; padding: 30px; margin: 40px auto; }
#judge .comment b { margin-top: 0; }

.photo_nav { overflow: hidden; margin-bottom: 20px; }
.photo_nav li { float: left; width: 9%; margin-right: 1%; position: relative; padding-bottom: 9%; margin-bottom: 10px; }
.photo_nav .heading { background: black; }
.photo_nav li:first-child { background: black; }
.photo_nav span, .photo_nav a { display: block; position: absolute; width: 100%; height: 100%; background: no-repeat center; background-size: cover; }
.photo_nav span { text-align: center; font-size: 15px; height: auto; color: white; top: 43%; }

.archive_btn { text-align: center; margin-bottom: 60px; }
.archive_btn a { font-size: 180%; border: solid 10px black; color: black; padding: 15px 50px; display: inline-block; text-decoration: none; border-radius: 18px; }
.archive_btn a:hover { background: black; color: white; }

#aw1 .img { background-image: url(../photo/1.jpg); }

#aw2_1 .img { background-image: url(../photo/2_1.jpg); }

#aw2_2 .img { background-image: url(../photo/2_2.jpg); }

#aw2_3 .img { background-image: url(../photo/2_3.jpg); }

#aw3_1 .img { background-image: url(../photo/3_1.jpg); }

#aw3_2 .img { background-image: url(../photo/3_2.jpg); }

#aw3_3 .img { background-image: url(../photo/3_3.jpg); }

#aw4_1 .img { background-image: url(../photo/4_1.jpg); }

#aw4_2 .img { background-image: url(../photo/4_2.jpg); }

#aw4_3 .img { background-image: url(../photo/4_3.jpg); }

#aw4_4 .img { background-image: url(../photo/4_4.jpg); }

#aw4_5 .img { background-image: url(../photo/4_5.jpg); }

#aw4_6 .img { background-image: url(../photo/4_6.jpg); }

#aw4_7 .img { background-image: url(../photo/4_7.jpg); }

#aw4_8 .img { background-image: url(../photo/4_8.jpg); }

#aw4_9 .img { background-image: url(../photo/4_9.jpg); }

#aw4_10 .img { background-image: url(../photo/4_10.jpg); }

#aw4_11 .img { background-image: url(../photo/4_11.jpg); }

#aw4_12 .img { background-image: url(../photo/4_12.jpg); }

#aw4_13 .img { background-image: url(../photo/4_13.jpg); }

#aw4_14 .img { background-image: url(../photo/4_14.jpg); }

#aw4_15 .img { background-image: url(../photo/4_15.jpg); }

#aw4_16 .img { background-image: url(../photo/4_16.jpg); }

#aw4_17 .img { background-image: url(../photo/4_17.jpg); }

#aw4_18 .img { background-image: url(../photo/4_18.jpg); }

#aw4_19 .img { background-image: url(../photo/4_19.jpg); }

#aw4_20 .img { background-image: url(../photo/4_20.jpg); }

#aw5_1 .img { background-image: url(../photo/5_1.jpg); }

#aw5_2 .img { background-image: url(../photo/5_2.jpg); }

#aw5_3 .img { background-image: url(../photo/5_3.jpg); }

/* =============================================
sp
================================================ */
@media screen and (max-width: 580px) { .pc { display: none; }
  .mb { display: block; }
  .center { width: 90%; padding-left: 5%; padding-right: 5%; }
  #totop { position: static; }
  header { padding: 20px 5%; width: 90%; text-align: center; }
  header a { padding: 0 5px; }
  header .stage_2nd { display: block; margin-top: 5vw; }
  header .logo { position: static; text-align: center; width: 100%; margin: 0 auto 20px; }
  .photocon section { padding: 40px 0; }
  #overview h1 { font-size: 110%; }
  #overview h2 { font-size: 140%; }
  #overview h3 + p { text-align: left; width: 90%; margin: auto; }
  #overview p { font-size: 90%; }
  #overview h3 { font-size: 100%; margin: 40px auto; }
  #overview .theme { margin: 40px auto; width: 80%; }
  #overview .theme h3 { margin: 20px auto; }
  #overview .theme div { padding: 10px 5% 20px; }
  .award.no3 ul li { width: 48%; margin-right: 4%; }
  .award.no3 ul li:nth-child(2) { margin-right: 0; }
  .award.no4 ul { display: flex; flex-wrap: wrap; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; }
  .award.no4 ul li { float: none; width: 32%; margin-right: 2%; height: auto; }
  .award.no4 ul li:nth-child(4n) { margin-right: 2%; }
  .award.no4 ul li:nth-child(3n) { margin-right: 0; }
  .award.no5 img { max-width: 90%; }
  .award .long img { max-width: 90%; }
  .award img { max-width: 90%; }
  .award div a { line-height: 40px; width: 90%; max-width: 180px; }
  #oubo_inq { padding: 40px 0; }
  #oubo_inq b { font-size: 110%; }
  #oubo_inq p { font-size: 90%; }
  footer { padding: 30px 5%; }
  footer li { display: block; margin-bottom: 10px; }
  footer a { padding: 10px; }
  footer p { line-height: 130%; }
  .send_btn input { box-sizing: border-box; max-width: 90% !important; font-size: 130% !important; padding: 15px 0px !important; }
  /* ============================================= judge ================================================ */
  #judge .comment { padding: 20px 5%; margin: 30px auto; }
  .photo_nav { margin-bottom: 30px; }
  .photo_nav li { width: 18%; margin-right: 2%; position: relative; padding-bottom: 18%; }
  .photo_nav li:nth-child(-n + 8) { margin-bottom: 10px; }
  .photo_nav .mb { width: 100%; padding-bottom: 0px; margin: 0 !important; } }