@charset "utf-8";

/* サイト名 基本設定CSS */


/*

    0. reset
    1. 共通設定
    2. フォント・リンク設定
    3. 段落設定
    4. 汎用セレクタ
    5. ページ設定

*//* -------------------------------------------
    0. reset
------------------------------------------- */

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

/* -------------------------------------------
    1. 共通設定
------------------------------------------- */

* {
  margin: 0;
  padding: 0;
}

html,body {
  height: 100%;
  margin: 0px;
  font-size: 16px;
  line-height: 28px;
  word-wrap: break-word;
}

.clear {
  clear: both;
}

img {
  vertical-align: baseline;
  -ms-interpolation-mode: bicubic;
  width: 100%;
}

a img {
  border: 0;
}

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  font-size: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* -------------------------------------------
    2. フォント・リンク設定
------------------------------------------- */

/* ------------ フォント ------------ */

body {
  font-family: Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}


/* ------------ フォントカラー ------------ */

.fc-org {
  color: #FF6600;
}

.fc-pink {
  color: #ff2c59;
}

.fc-red {
  color: #cf2a28;
}

.fc-blue {
  color: #0066cc;
}

.must {
  color: #b62020;
  font-weight: bold;
}

/* ------------ リンク ------------ */

a {
  color: #00AFF0;
  overflow: hidden;
  outline: none;
}

a:hover {
  opacity: 0.6;
}

/* ------------ 選択時 ------------ */

/*

::selection {
  background: #ffdddd;
  color: #000;
}

::-moz-selection {
  background: #ffdddd;
  color: #000;
}

*/

/* -------------------------------------------
    3. 段落設定
------------------------------------------- */


/* -------------------------------------------
    4. 汎用セレクタ
------------------------------------------- */

/* ------------ マージン ------------ */

.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }

.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }

.ml-10 { margin-left: 10px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-40 { margin-left: 40px !important; }

.mr-10 { margin-right: 10px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-40 { margin-right: 40px !important; }

/* ------------ パディング ------------ */

.pt-10 { padding-top: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }

.pb-10 { padding-bottom: 10px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-40 { padding-bottom: 40px !important; }

.pl-10 { padding-left: 10px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-30 { padding-left: 30px !important; }
.pl-40 { padding-left: 40px !important; }

.pr-10 { padding-right: 10px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-30 { padding-right: 30px !important; }
.pr-40 { padding-right: 40px !important; }

.fw-bold { font-weight: bold !important; }

@media (min-width: 897px) {
  .sp-none {
    display: block;
  }

  .pc-none {
    display: none;
  }
}

@media (max-width: 896px) {
  .sp-none {
    display: none;
  }

  .pc-none {
    display: block;
  }
}


/* -------------------------------------------
    5. ページ設定
------------------------------------------- */

@media screen and (min-width: 897px) {
  .header {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }

  .header__logo {
    width: 321px;
    height: 39px;
    margin: 6px 0 0 14px;
  }

  .header .btn-oubo {
    width: 240px;
    height: 50px;
  }

  .contest2022 {
    width: 100%;
  }

  .contest2022__hero {
    width: 100%;
    margin-bottom: 60px;
  }

  .contest2022__menu {
    margin: 0 auto 60px;
  }

  .contest2022__menu ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
  }

  .contest2022__menu li {
    width: 260px;
  }

  .contest2022__menu li +* {
    margin-left: 10px;
  }

  .contest2022__about {
    width: 800px;
    margin: 0 auto 90px;
  }

  .contest2022__about h2 {
    margin-bottom: 60px;
  }

  .contest2022__about__lead {
    font-size: 20px;
    font-weight: bold;
    line-height: 40px;
    color: #483D2F;
    text-align: center;
    margin-bottom: 40px;
  }

  .contest2022__about__images {
    display: flex;
    align-items: flex-start;
  }

  .contest2022__about__images img:nth-of-type(1) {
    display: inline-block;
    width: 444px;
    margin-right: 10px;
  }

  .contest2022__about__images img:nth-of-type(2) {
    display: inline-block;
    width: 325px;
  }

  .contest2022__kyouiku {
    position: relative;
    padding: 80px 0 76px;
    margin-bottom: 80px;
    background: #DFF2FC;
  }

  .contest2022__kyouiku::before {
    content: "";
    position: absolute;
    width: 286px;
    height: 318px;
    top: 390px;
    left: 0;
    background: url('../img/bg_cloud_left.png') no-repeat top left / 100% auto;
    z-index: 10;
  }

  .contest2022__kyouiku::after {
    content: "";
    position: absolute;
    width: 439px;
    height: 470px;
    top: 112px;
    right: 0;
    background: url('../img/bg_cloud_right.png') no-repeat top left / 100% auto;
    z-index: 10;
  }

  .contest2022__kyouiku h2 {
    width: 874px;
    margin: 0 auto 60px;
  }

  .contest2022__kyouiku__lead {
    width: 800px;
    margin: 0 auto 40px;
    font-size: 20px;
    font-weight: bold;
    line-height: 40px;
    color: #483D2F;
    text-align: center;
    position: relative;
    z-index: 20;
  }

  .contest2022__kyouiku__btn__block {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .contest2022__kyouiku__btn {
    width: 520px;
    margin-bottom: 20px;
  }

  .contest2022__kyouiku__btn:last-of-type {
    margin-bottom: 0;
  }

  .contest2022__oubo {
    position: relative;
  }

  .contest2022__oubo__inner {
    width: 900px;
    margin: 0 auto 80px;
  }

  .contest2022__oubo::before {
    content: "";
    position: absolute;
    width: 233px;
    height: 100%;
    left: 0;
    top: 0;
    background: url('../img/bg_img_left.png') repeat-y top left / 233px 1197px;
    z-index: -1;
  }

  .contest2022__oubo::after {
    content: "";
    position: absolute;
    width: 284px;
    height: 100%;
    right: 0;
    top: 0;
    background: url('../img/bg_img_right.png') repeat-y top left / 284px 1197px;
    z-index: -1;
  }

  .contest2022__oubo h2 {
    width: 800px;
    margin: 0 auto 60px;
  }

  .contest2022__oubo__block {
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 27px;
  }

  .contest2022__oubo__item {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 18px;
  }

  .contest2022__oubo__item h3 {
    width: 170px;
    margin-right: 16px;
    border-top: 8px solid #0097DD;
    line-height: 24px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 20px;
  }

  .contest2022__oubo__body {
    width: 714px;
    border-top: 8px solid #C1D3DB;
    line-height: 24px;
    font-size: 16px;
    padding-top: 20px;
  }

  .contest2022__oubo__body .caution {
    color: #E5004F;
  }

  .contest2022__oubo__body .caution.day {
    font-weight: bold;
  }

  .contest2022__oubo__body .caution.day span {
    font-size: 20px;
  }

  .contest2022__oubo__text-block {
    border: 8px solid #C1D3DB;
    padding: 26px 24px;
    margin-bottom: 50px;
  }

  .contest2022__oubo__btn {
    width: 520px;
    margin: auto;
  }

  .contest2022__youshi {
    width: 800px;
    margin: 0 auto 60px;
  }

  .contest2022__youshi h2 {
    margin: 0 auto 60px;
  }

  .contest2022__youshi__lead {
    font-size: 20px;
    font-weight: bold;
    line-height: 40px;
    color: #483D2F;
    text-align: center;
    position: relative;
    margin-bottom: 40px;
  }

  .contest2022__youshi h3 {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: #483D2F;
    text-align: center;
    margin-bottom: 40px;
  }

  .contest2022__youshi h3::after {
    content: "";
    position: absolute;
    background: #FFF67F;
    width: 120px;
    height: 8px;
    right: 0;
    left: 0;
    margin: auto;
    bottom: -18px;
  }

  .contest2022__youshi__block {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-bottom: 40px;
  }

  .contest2022__youshi__block +* {
    margin-bottom: 60px;
  }

  .contest2022__youshi__btn {
    width: 320px;
  }

  .contest2022__youshi__btn +* {
    margin-left: 20px;
  }

  .contest2022__youshi__caution {
    font-size: 16px;
    line-height: 24px;
  }

  .contest2022__youshi__caution em,
  .contest2022__youshi__caution a {
    font-weight: bold;
  }

  .contest2022__present {
    line-height: 0;
  }

  .contest2022__2021result {
    position: relative;
    padding: 70px 0;
    background: #DFF2FC;
  }

  .contest2022__2021result::before {
    content: "";
    position: absolute;
    width: 317px;
    height: 403px;
    top: 164px;
    left: 0;
    background: url('../img/bg_2021_cloud_left.png') no-repeat top left / 100% auto;
    z-index: 10;
  }

  .contest2022__2021result::after {
    content: "";
    position: absolute;
    width: 297px;
    height: 373px;
    top: 89px;
    right: 0;
    background: url('../img/bg_2021_cloud_right.png') no-repeat top left / 100% auto;
    z-index: 10;
  }

  .contest2022__2021result h2 {
    width: 370px;
    margin: 0 auto 40px;
  }

  .contest2022__2021result__images {
    width: 478px;
    margin: 0 auto 50px;
  }

  .contest2022__2021result__btn {
    width: 394px;
    margin: 0 auto 50px;
  }

  .contest2022__pagetop {
    position: absolute;
    width: 194px;
    height: 186px;
    right: 199px;
    bottom: 0;
  }

  .footer {
    background: #009481;
    padding: 27px 0 29px;
  }

  .footer ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-bottom: 30px;
  }

  .footer ul li {
    position: relative;
    padding: 0 26px;
  }

  .footer ul li a {
    font-size: 16px;
    color: #fff;
    text-decoration: none;
  }

  .footer ul li:first-of-type::after {
    content: "";
    position: absolute;
    height: 17px;
    width: 1px;
    background: #fff;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .footer__logo {
    width: 344px;
    margin: 0 auto 30px;
    line-height: 0;
  }

  .footer__logo a {
    width: 100%;
    height: 48px;
    background: #fff;
    display: inline-block;
    padding: 4px 12px;
    box-sizing: border-box;
  }

  .footer__copyright {
    width: 374px;
    margin: auto;
  }
}

@media screen and (max-width: 896px) {
  .header {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 50px;
  }

  .header__logo {
    width: calc((194 / 375)*100vw);
    height: calc((24 / 375)*100vw);
    margin: calc((18 / 375)*100vw) 0 0 calc((22 / 375)*100vw);
  }

  .header .btn-oubo {
    width: calc((148 / 375)*100vw);
    height: calc((50 / 375)*100vw);
  }

  .contest2022 {
    width: 100%;
  }

  .contest2022__hero {
    width: 100%;
    margin-bottom: calc((13 / 375)*100vw);
  }

  .contest2022__menu {
    margin: 0 auto calc((50 / 375)*100vw);
  }

  .contest2022__menu ul {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }

  .contest2022__menu li {
    width: calc((327 / 375)*100vw);
    line-height: 0;
  }

  .contest2022__menu li +* {
    margin-top: calc((16 / 375)*100vw);
  }

  .contest2022__about {
    width: calc((327 / 375)*100vw);
    margin: 0 auto calc((30 / 375)*100vw);
  }

  .contest2022__about h2 {
    width: 100%;
    margin-bottom: calc((40 / 375)*100vw);
  }

  .contest2022__about__lead {
    font-size: calc((16 / 375)*100vw);
    font-weight: bold;
    line-height: calc((36 / 375)*100vw);
    color: #483D2F;
    margin-bottom: calc((30 / 375)*100vw);
  }

  .contest2022__about__images {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }

  .contest2022__about__images img:nth-of-type(1) {
    display: inline-block;
    width: 100%;
    margin-bottom: calc((10 / 375)*100vw);
  }

  .contest2022__about__images img:nth-of-type(2) {
    display: inline-block;
    width: calc((235 / 375)*100vw);
  }

  .contest2022__kyouiku {
    position: relative;
    padding: calc((40 / 375)*100vw) 0;
    margin-bottom: calc((40 / 375)*100vw);
    background: #DFF2FC;
  }

  .contest2022__kyouiku::before {
    content: "";
    position: absolute;
    width: calc((158 / 375)*100vw);
    height: calc((271 / 375)*100vw);
    top: calc((404 / 375)*100vw);
    left: 0;
    background: url('../img/bg_cloud_left_sp.png') no-repeat top left / 100% auto;
    z-index: 10;
  }

  .contest2022__kyouiku::after {
    content: "";
    position: absolute;
    width: calc((173 / 375)*100vw);
    height: calc((268 / 375)*100vw);
    top: calc((126 / 375)*100vw);
    right: 0;
    background: url('../img/bg_cloud_right_sp.png') no-repeat top left / 100% auto;
    z-index: 10;
  }

  .contest2022__kyouiku h2 {
    width: calc((324 / 375)*100vw);
    margin: 0 auto calc((40 / 375)*100vw);
  }

  .contest2022__kyouiku__lead {
    width: calc((327 / 375)*100vw);
    margin: 0 auto calc((40 / 375)*100vw);
    font-size: calc((16 / 375)*100vw);;
    font-weight: bold;
    line-height: calc((36 / 375)*100vw);;
    color: #483D2F;
    text-align: left;
    position: relative;
    z-index: 20;
  }

  .contest2022__kyouiku__btn__block {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .contest2022__kyouiku__btn {
    line-height: 0;
    width: calc((327 / 375)*100vw);
    margin-bottom: calc((16 / 375)*100vw);
  }

  .contest2022__kyouiku__btn:last-of-type {
    margin-bottom: 0;
  }

  .contest2022__oubo {
    position: relative;
  }

  .contest2022__oubo__inner {
    width: calc((327 / 375)*100vw);
    margin: 0 auto;
    padding-bottom: calc((40 / 375)*100vw);
  }

  .contest2022__oubo::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 116%;
    left: 0;
    top: calc((40 / 375)*100vw);
    background: url('../img/bg_img_sp.png') repeat-y top left / 100% auto;
    z-index: -1;
  }

  .contest2022__oubo h2 {
    width: 100%;
    margin: 0 auto calc((40 / 375)*100vw);
  }

  .contest2022__oubo__block {
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: calc((30 / 375)*100vw);
  }

  .contest2022__oubo__item {
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: calc((30 / 375)*100vw);
  }

  .contest2022__oubo__item h3 {
    text-align: center;
    width: 100%;
    margin-bottom: calc((30 / 375)*100vw);
    border-top: 6px solid #0097DD;
    border-bottom: 6px solid #0097DD;
    font-size: calc((16 / 375)*100vw);
    line-height: calc((24 / 375)*100vw);
    font-weight: bold;
    padding: calc((14 / 375)*100vw) 0;
  }

  .contest2022__oubo__body {
    width: 100%;
    font-size: calc((16 / 375)*100vw);
    line-height: calc((28 / 375)*100vw);
  }

  .contest2022__oubo__body .caution {
    color: #E5004F;
  }

  .contest2022__oubo__body .caution.day {
    font-weight: bold;
  }

  .contest2022__oubo__body .caution.day span {
    font-size: 20px;
  }

  .contest2022__oubo__text-block {
    border: calc((5 / 375)*100vw) solid #C1D3DB;
    padding: calc((26 / 375)*100vw) calc((22 / 375)*100vw);
    margin-bottom: calc((40 / 375)*100vw);
    font-size: calc((16 / 375)*100vw);
    line-height: calc((28 / 375)*100vw);
  }

  .contest2022__oubo__btn {
    width: 100%;
    margin: auto;
  }

  .contest2022__youshi {
    width: calc((327 / 375)*100vw);
    margin: 0 auto calc((40 / 375)*100vw);
  }

  .contest2022__youshi h2 {
    margin: 0 auto calc((40 / 375)*100vw);
  }

  .contest2022__youshi__lead {
    font-size: calc((16 / 375)*100vw);
    font-weight: bold;
    line-height: calc((36 / 375)*100vw);
    color: #483D2F;
    text-align: center;
    position: relative;
    margin-bottom: calc((40 / 375)*100vw);
  }

  .contest2022__youshi h3 {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: #483D2F;
    text-align: center;
    margin-bottom: calc((36 / 375)*100vw);
  }

  .contest2022__youshi h3::after {
    content: "";
    position: absolute;
    background: #FFF67F;
    width: 120px;
    height: 6px;
    right: 0;
    left: 0;
    margin: auto;
    bottom: -12px;
  }

  .contest2022__youshi__block {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding-bottom: calc((40 / 375)*100vw);
    line-height: 0;
  }

  .contest2022__youshi__block +* {
    margin-bottom: calc((40 / 375)*100vw);
  }

  .contest2022__youshi__btn {
    width: 100%;
  }

  .contest2022__youshi__btn +* {
    margin-top: calc((16 / 375)*100vw);
  }

  .contest2022__youshi__caution {
    font-size: calc((16 / 375)*100vw);
    line-height: calc((24 / 375)*100vw);
  }

  .contest2022__youshi__caution em,
  .contest2022__youshi__caution a {
    font-weight: bold;
  }

  .contest2022__present {
    line-height: 0;
  }

  .contest2022__2021result {
    position: relative;
    padding: calc((50 / 375)*100vw) 0 calc((246 / 375)*100vw);
    background: #DFF2FC;
  }

  .contest2022__2021result h2 {
    width: calc((327 / 375)*100vw);
    margin: 0 auto calc((40 / 375)*100vw);
    line-height: 0;
  }

  .contest2022__2021result__images {
    width: calc((327 / 375)*100vw);
    margin: 0 auto calc((50 / 375)*100vw);
  }

  .contest2022__2021result__btn {
    width: calc((327 / 375)*100vw);
    margin: auto;
  }

  .contest2022__pagetop {
    position: absolute;
    width: calc((194 / 375)*100vw);
    height: calc((186 / 375)*100vw);
    right: calc((52 / 375)*100vw);
    bottom: 0;
  }

  .footer {
    background: #009481;
    padding: calc((40 / 375)*100vw) 0;
  }

  .footer ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-bottom: calc((32 / 375)*100vw);
  }

  .footer ul li {
    position: relative;
    padding: 0 calc((17 / 375)*100vw);
  }

  .footer ul li a {
    font-size: calc((14 / 375)*100vw);
    color: #fff;
    text-decoration: none;
  }

  .footer ul li:first-of-type::after {
    content: "";
    position: absolute;
    height: calc((14 / 375)*100vw);
    width: 1px;
    background: #fff;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .footer__logo {
    width: calc((327 / 375)*100vw);
    margin: 0 auto calc((30 / 375)*100vw);
    line-height: 0;
  }

  .footer__logo a {
    width: 100%;
    height: calc((46 / 375)*100vw);
    background: #fff;
    display: inline-block;
    padding: 4px 12px;
    box-sizing: border-box;
  }

  .footer__copyright {
    width: calc((327 / 375)*100vw);
    margin: auto;
  }

}