@charset "UTF-8";
/* CSS Document */

.hc{ margin: 0; padding: 0; height: 900px; background: url("img/hpbg.webp") no-repeat center center;}
.hc .mb{ padding: 0;}
.hc h1{ margin: 0; padding: 0;}
.hc img{ display: block;}
@media screen and ( max-width: 480px ) {
  .hc{ height: auto; background: none;}
}

.fc{ background: #f0e2ce; border-top: solid 10px #6d4a3d; text-align: center;}
.fc .author{ line-height: 1.5;}
.fc .author h3{ font-size: 116%; font-weight: bold;}
.fc .author p{ margin: 0; font-size: 250%; font-weight: bold;}
.fc address{ display: block; margin: 0;}
.fc address h3{ font-size: 93%;}
.fc address p{ margin: 0.5em 0 0 0; line-height: 1.4; }
.fc figure{ display: block; max-width: 500px; margin: 2.0em auto 0 auto;}
@media screen and ( max-width: 480px ) {
  .fc .author h3{ }
  .fc .author p{ }
}

.section_title{ width: fit-content; background: #6d4a3d; color: #FFF; line-height: 1.5; padding: 0.3em 1.0em; border-radius: 2.0em; margin-left: auto; margin-right: auto; font-weight: bold; font-size: 150%;}
.block_title{ width: fit-content; margin-left: auto; margin-right: auto; color: #6d4a3d; position: relative; font-weight: bold; font-size: 108%;}
.block_title::after{ position: relative; display: block; content: ''; background: #6d4a3d; height: 2px; width: 60%; left: auto; right: auto; margin: 0 auto; bottom: -0.5em;}

ul.ul_note li{ padding-left: 1.3em; text-indent: -1.3em; margin: 0;}
ul.ul_note li::before{ content: '●'; color: #c4321f;}

em{ color: #c4321f; font-style: normal; font-size: 100%; font-weight: normal;}
strong{ color: #c4321f; font-weight: bold;}



.section_lead{ background: #fff;}
.section_lead .copy{ color: #604c3f;}
.section_lead .date{ color: #604c3f; font-size: 180%; line-height: 1.5; text-align: center; font-weight: 800;}

.section_about{ background: #f0e2ce;}
.section_about .copy{ color: #6d4a3d; text-align: center; line-height: 1.5; font-weight: bold; font-size: 116%;}
.section_about .articles{ display: flex; gap: 0 80px;}
.section_about article{ flex: 1;}
.section_about article p{ line-height: 1.5; margin-top: 1.0em;}
@media screen and ( max-width: 480px ) {
  .section_about .articles{ display: block; padding: 0 1.0rem;}
  .section_about article p{ margin: 0;}
}

.section_prize{ background: #f7f0e6;}
.section_prize .first{ max-width: 640px; margin-left: auto; margin-right: auto;}
.section_prize .items{ display: flex; gap: 0 80px;}
.section_prize p{ flex: 1;}
@media screen and ( max-width: 480px ) {
  .section_prize .items{ display: block;}
  .section_prize .items p{ width: 90%; margin-left: auto; margin-right: auto;}
}

.section_flow{ background: #f0e2ce;}
.section_flow .flow{ display: flex; margin-left: 1.0em; margin-right: 1.0em; gap: 0 2.0em;}
.section_flow .flow article{ flex: 1; background: #fff; border-radius: 1.0em; overflow: hidden;}
.section_flow .flow h3{ margin: 0; padding: 0.4em 0; line-height: 1.0; text-align: center; color: #fff; background: #8e765d; font-size: 148%;}
.section_flow .flow .content{ padding: 0 1.0rem 1.0rem 1.0rem;}
.section_flow .flow .content li{ display: grid; gap: 0 1rem; grid-template-columns: 80px 1fr;}
.section_flow .flow .content i{ display: block; margin: 0; grid-row: 1 / span 2;}
.section_flow .flow .content .step{ margin: 0; padding: 0; color: #8e765d; font-weight: bold; line-height: 1.0;}
.section_flow .flow .content .step span{ font-size: 148%; padding-left: 0.2rem;}
.section_flow .flow .content .body{ margin: 0.5rem 0 0 0; line-height: 1.5; font-size: 86%;}
.section_flow .flow .net h3{ background: #c4321f;}
.section_flow .flow .net .content .step{ color: #c4321f;}
.section_flow .notice{ background: #fff; padding: 1.0em; border-radius: 1.0em;}
.section_flow .place{ background: #fff; padding: 1.0em; border-radius: 1.0em;}
.section_flow .place .articles{ display: flex; gap: 1.0em;}
.section_flow .place .articles article{ flex: 1;}
.section_flow .place .articles figure{ margin: 0; padding: 0;}
.section_flow .place .articles img{ display: block; border: solid 3px #6d4a3d;}
.section_flow .place .articles dl{ display: grid; grid-template-columns: 3.5rem 1fr; grid-template-rows: auto; font-size: 93%; gap: 0.4em 0.3em; line-height: 1.3;}
.section_flow .place .articles dt{ margin: 0; background: #6d4a3d; color: #FFF; align-self: flex-start; text-align: center; font-weight: bold; font-size: 93%; border-radius: 1.5em; padding: 0.2em}
.section_flow .place .articles dd{ margin: 0; color: #6d4a3d; }
@media screen and ( max-width: 480px ) {
  .section_flow .flow{ display: block; margin: 0;}
  .section_flow .flow article{ margin: 1.0em 0 0 0;}
  .section_flow .flow .content li{ grid-template-columns: 17.5% 1fr;}
  .section_flow .place .articles{ display: block;}
  .section_flow .place .articles article{ margin: 1.0em 3.0rem 0 3.0rem;}
}

.section_quiz{ background: #f7f0e6;}
.section_quiz .quiz_title{ max-width: 460px; margin-left: auto; margin-right: auto;}
.section_quiz .category_title{ width: fit-content; color: #fff; margin-left: auto; margin-right: auto; font-size: 148%; font-weight: bold; position: relative; line-height: 1.8; padding: 0;}
.section_quiz .category_title::before{ content: ''; display: block; position: relative; width: 100%; height: 4px; top: 0px; border-bottom: solid 2px #fff; border-top: solid 4px #fff;}
.section_quiz .category_title::after{ content: ''; display: block; position: relative;  width: 100%; height: 4px; bottom: 0px; border-bottom: solid 4px #fff; border-top: solid 2px #fff;}
.section_quiz .past{ background: #6d4a3d; color: #fff;}
.section_quiz .past .articles{ display: grid; grid-template-columns: repeat(5,1fr); gap: 0 1.0em;}
.section_quiz .past article{ margin: 1.0rem 0 0 0;}
.section_quiz .past figure{ display: block; width: 100%; padding: 100% 0 0 0; background: #f7f0e6; position: relative;}
.section_quiz .past figure img{ display: block; margin: auto; width: auto; height: auto; position:absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%;}
.section_quiz .past i{ display: flex; margin: 0.3em auto 0 auto; width: 1.5em; height: 1.5em; line-height: 1.0; background: #fff; color: #6d4a3d; border-radius: 2.0em; font-style: normal; font-weight: bold; justify-content: center; align-items: center;}
.section_quiz .past article p{ font-size: 77%; line-height: 1.2; position: relative; display: flex; align-items: center; gap: 0 0.5em; min-height: 5.0em; margin: 1.0em 0 0 0;}
.section_quiz .past article p::before{ content: ''; display: block; flex: 0 0 25px; height: 40px; background: url("img/ic_bulb.svg") no-repeat center center / contain;}
.section_quiz .current{ }
.section_quiz .current .category_title{ color: #000;}
.section_quiz .current .category_title::before,
.section_quiz .current .category_title::after{ border-color: #000;}
.section_quiz .current .articles{ display: grid; grid-template-columns: repeat(5,1fr); gap: 0 1.0em;}
.section_quiz .current figure{}
.section_quiz .current figure img{ display: block;}
.section_quiz .current figure figcaption{ margin: 0.5em 0 0 0; font-size: 77%; text-align: center; line-height: 1.5; }
.section_quiz .current figure figcaption i{ display: inline-block; width: 1.0em; height: 1.0em; background: #000; color: #fff; border-radius: 1.0em; font-weight: bold; font-style: normal; font-size: 93%; line-height: 1.0; margin-right: 0.3em;}
.section_quiz .special .wrapper{ border: solid 10px #6d4a3d; background: #FFF; padding: 1.0em;}
.section_quiz .special figure{ display: block; margin: 1.0rem auto 0 auto; width: 75%;}
@media screen and ( max-width: 480px ) {
  .section_quiz .past .articles{ grid-template-columns: repeat(2,1fr);}
  .section_quiz .past article p{ font-size: 86%;}
  .section_quiz .current .articles{ grid-template-columns: repeat(2,1fr);}
  .section_quiz .current figure figcaption{ font-size: 93%;}
  .section_quiz .special .wrapper{ padding: 0 1.5em 1.0em 1.5em;}
  .section_quiz .special figure{ width: 100%;}
}

.section_answer{ background: #ffe100;}
.section_answer .body{ text-align: center; line-height: 1.5;}
.section_answer nav{ margin: 2.0em auto 0 auto; max-width: 700px;}

.section_outline .date{ color: #604c3f; font-size: 180%; line-height: 1.5; text-align: center; font-weight: 800;}
.section_outline .note{ background: #f0e2ce; padding: 1.0em 2.0em; border-radius: 1.0em; font-size: 86%;}
.section_outline h4{ color: #c4321f; font-weight: bold;}
.section_outline .ul_note{ margin-top: 0;}
.section_outline .ul_note li{}
.section_outline .others{ display: grid; grid-template-columns: repeat(2,1fr); gap: 0 8%;}
.section_outline .others .section_title{ width: 100%; text-align: center;}
@media screen and ( max-width: 480px ) {
  .section_outline .note{ padding: 1.0em;}
  .section_outline .others{ display: block;}
  .section_outline .others article{ margin: 1.0em 2.0em 0 2.0em;}
}

.fancybox__container,
.fancybox__container *{ margin-top: 0;}