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

.mb { display: none; }

a:hover { text-decoration: underline; }

/*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;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}*/
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; }

/* =============================================
top
================================================ */
header { background: #435C71; padding: 30px 10px; margin-bottom: 20px; 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; }
header .no_link a { text-decoration: none; opacity: 0.5; }

.past_link { padding-right: 20px; text-align: right; margin: 10px auto; font-size: 80%; }
.past_link a { color: black; }

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

#overview { text-align: center; }
#overview h1 { font-size: 150%; color: #435C71; }
#overview h2 { font-weight: bold; font-size: 220%; margin: 10px auto; line-height: 130%; color: #435C71; }
#overview .date { font-weight: bold; font-size: 110%; }
#overview .logo { margin: 20px auto; }
#overview .logo img { width: 225px; height: auto; }
#overview h3 { line-height: 150%; font-weight: bold; font-size: 110%; margin: 40px auto; }
#overview .key_word { width: 515px; margin: auto; }
#overview .key_word img { width: 100%; margin-bottom: -30px; margin-top: 50px; }
#overview .theme { margin: 60px auto; background: #435C71; color: white; border-radius: 10px; padding-top: 20px; padding-bottom: 50px; }
#overview .theme h2 { color: white; }
#overview .theme h3 { border: solid 1px white; display: inline-block; padding: 15px 40px; border-radius: 10px; }
#overview .theme .camera { content: ""; display: block; width: 115px; height: 95px; background: url(../img/camera.svg) no-repeat center; margin: 40px auto; }
#overview .theme p, #overview .theme li { font-size: 80%; text-align: left; margin: 0 40px; }
#overview .theme li { margin-left: 60px; list-style: disc outside; }
#overview .theme ul { margin-bottom: 20px; }
#overview .theme .detail { text-align: center; font-weight: bold; font-size: 110%; }
#overview .theme .mfh_site { margin-top: 60px; margin-bottom: 30px; }
#overview .theme .mfh_site p { text-align: center; font-weight: bold; font-size: 105%; margin-bottom: 20px; }
#overview .theme .mfh_site .mfh_site_btn { text-align: center; font-weight: bold; font-size: 115%; display: table; line-height: 150%; margin: auto; border: solid 10px #FFF; padding: 2% 6%; border-radius: 80px; color: #FFF; text-decoration: none; font-weight: bold; vertical-align: middle; }
#overview .theme .mfh_site .mfh_site_btn:hover { color: #156CA5 !important; background-color: #FFF; }

#judge_overview { padding: 60px 0 40px; }
#judge_overview h2 + p { margin-top: 30px; font-weight: bold; }
#judge_overview h2 + p:after { content: ""; display: block; width: 100%; height: 72px; background: url(../img/camera4.svg) no-repeat center; background-size: auto 100%; margin-top: 20px; }
#judge_overview #greeting { border-radius: 30px; border: solid 15px #435C71; color: #435C71; box-sizing: border-box; padding: 40px 60px; max-width: 940px; width: 95%; margin: 40px auto; text-align: left; }
#judge_overview #greeting b { text-align: center; display: block; font-weight: bold; font-size: 110%; margin-bottom: 20px; }
#judge_overview #greeting p { line-height: 160%; font-size: 90%; }
#judge_overview #greeting p + p { margin-top: 20px; text-align: right; }

#award { background: #435C71; color: white; }
#award h1 { font-size: 150%; font-weight: bold; text-align: center; margin-bottom: 30px; }
#award table { text-align: left; border-spacing: 0; }
#award table th, #award table td { padding: 10px 20px; border: solid 1px white; border-bottom: none; }
#award table td { border-left: none; border-right: none; }
#award table tr:last-child th, #award table tr:last-child td { border-bottom: solid 1px white; }

#guide { background: #DEE9F2; color: #333333; }
#guide h1 { font-size: 150%; font-weight: bold; text-align: center; margin-bottom: 30px; }
#guide td { padding-bottom: 20px; font-weight: bold; }
#guide th { background: #435C71; color: white; display: inline-block; padding: 5px 10px; border-radius: 5px; font-weight: bold; margin-right: 30px; }
#guide dt { font-weight: bold; font-size: 120%; display: block; margin-bottom: 20px; line-height: 130%; }
#guide dd { margin-bottom: 30px; line-height: 160%; font-size: 90%; }
#guide li { margin-left: 20px; list-style: disc outside; }
#guide ul { margin: 20px auto; }

#guide + .oubo_btn { margin: 50px auto; }

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

.oubo_btn { width: 250px; height: 250px; border-radius: 50%; border: solid 15px #435C71; margin: auto; text-align: center; background: white; overflow: hidden; /*&:hover{
	background: $lightblue;
}*/ }
.oubo_btn a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 180%; color: #435C71; text-decoration: none; font-weight: bold; line-height: 130%; vertical-align: middle; }
.oubo_btn a:hover { background: #435C71; color: white; }

.main_img { position: relative; }
.main_img:before { content: ""; position: absolute; width: 100%; height: 60%; background: #4C9DD3; left: 0; top: 0; }

.main_img img { width: 100%; height: auto; position: relative; z-index: 2; }

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; }
footer img { width: 100%; height: auto; }

a.disabled { pointer-events: none; }

/* =============================================
form
================================================ */
#form #overview { padding: 60px 20px; }
#form h2 + p { font-size: 90%; font-weight: bold; margin: 40px auto 0; }
#form #privacy { text-align: left; border: solid 1px #435C71; font-size: 80%; max-width: 920px; box-sizing: border-box; margin: 40px auto 0; padding: 20px; }
#form #privacy p + p { margin-top: 20px; text-align: right; }
#form #privacy p + p a { font-weight: bold; text-decoration: none; color: #435C71; }
#form #privacy p + p a:hover { text-decoration: underline; }
#form .blue_back { padding: 60px 0; background: #DEE9F2; }
#form .title { background: #435C71; color: white; padding: 15px 0; font-size: 130%; text-align: center; border-radius: 5px; margin-bottom: 30px; }
#form #mailform { padding-top: 0; }
#form #mailform table { text-align: left; margin-bottom: 60px; }
#form #mailform th, #form #mailform td { line-height: 150%; padding-bottom: 20px; vertical-align: top; }
#form #mailform th a, #form #mailform td a { color: #435C71; text-decoration: none; }
#form #mailform th { font-weight: bold; width: 200px; }
#form #mailform span { font-size: 90%; line-height: 150%; display: inline-block; }
#form #mailform .small { font-size: 75%; }
#form #mailform p { text-align: center; margin: 40px auto; }
#form #mailform input, #form #mailform textarea { box-sizing: border-box; }
#form #mailform select { background: white; border: solid 1px #ccc; font-size: 105%; }
#form #mailform input[type=file] { border: none; padding: 10px 0; }
#form #mailform .w300 { width: 300px; }
#form #mailform .w200 { width: 200px; }
#form #mailform .w580 { width: 580px; }
#form #mailform .w100 { width: 100%; }
#form .send_btn { text-align: center; }
#form .send_btn input { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; outline: none; background: transparent; }
#form .send_btn input { font-size: 180%; border: solid 10px #435C71; color: #435C71; padding: 15px 50px; display: inline-block; text-decoration: none; border-radius: 18px; }
#form .send_btn input:hover { background: #DEE9F2; }
#form .send_btn.btn2 input { margin: 0 10px 10px; width: 300px; font-size: 130%; }

/* =============================================
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; }
  input, textarea { max-width: 90%; }
  header { padding: 20px 5%; width: 90%; text-align: center; }
  header .stage_2nd { display: block; margin-top: 5vw; }
  header a { padding: 0 5px; }
  header .logo { position: static; text-align: center; width: 100%; margin: 0 auto 20px; }
  .past_link { padding-right: 5%; }
  .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 .logo img { width: 50%; }
  #overview h3 { font-size: 100%; margin: 40px auto; }
  #overview .theme { margin: 40px auto; width: 80%; }
  #overview .theme p, #overview .theme li { margin: 0; line-height: 160%; }
  #overview .theme li { margin-left: 20px; }
  #overview .key_word { width: 80%; }
  #overview .key_word img { margin-bottom: -3vw; margin-top: 5vw; }
  #judge_overview { padding: 40px 0 20px; }
  #judge_overview h2 + p { margin-top: 30px; font-weight: bold; }
  #judge_overview h2 + p:after { height: 40px; }
  #judge_overview #greeting { border-width: 10px; padding: 30px 5%; width: 95%; margin: 30px auto; }
  #award table { padding: 0; }
  #award table th, #award table td { padding: 10px; }
  #award table td { width: 30%; }
  #guide td, #guide th { box-sizing: border-box; display: block; width: 100%; margin-bottom: 10px; }
  #guide + .oubo_btn { margin: 30px auto; }
  #oubo_inq { padding: 40px 0; }
  #oubo_inq b { font-size: 110%; }
  #oubo_inq p { font-size: 90%; }
  .oubo_btn { width: 150px; height: 150px; border: solid 10px #435C71; }
  .oubo_btn a { font-size: 130%; }
  footer { padding: 30px 5%; }
  footer li { display: block; margin-bottom: 10px; }
  footer a { padding: 10px; }
  footer p { line-height: 130%; }
  footer .center { width: 100%; padding: 0; margin-bottom: 40px; }
  footer .center a { padding: 0; }
  /* ============================================= form ================================================ */
  #form #overview { padding: 40px 5%; }
  #form .blue_back { padding: 40px 0; }
  #form .title { padding: 15px 0; font-size: 120%; }
  #form #mailform table { margin-bottom: 40px; }
  #form #mailform th, #form #mailform td, #form #mailform tr { display: block; }
  #form #mailform th { width: 100%; padding-bottom: 0; }
  #form #mailform input, #form #mailform textarea { width: 100%; max-width: 100%; }
  #form #mailform .w300 { width: 60%; }
  #form #mailform .w200 { width: 50%; }
  #form #mailform .w580 { width: 100%; }
  .send_btn input { box-sizing: border-box; max-width: 90% !important; font-size: 130% !important; padding: 15px 0px !important; } }