@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;
  scroll-padding-top: 30px;
}

.clear {
  clear: both;
}

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

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: #E5004F;
}

.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;
  transition : all 0.5s ease 0s;
}

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

/*

::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. ページ設定
------------------------------------------- */
header {
  background-color: #fff;
  padding: 10px;
  max-width: 1440px;
  margin: 0 auto;
}

header h1.logo {
  max-width: 322px;
}

  @media (max-width: 768px) {
    header h1.logo {
      max-width: 300px;
    }
  }

#contest_2023 main {
  max-width: 1440px;
  margin: 0 auto;
}

#contest_2023 section h1.mv {
  margin: 0;
  padding: 0;
  background-color:#2db47a;
}

#contest_2023 section.anchor-btn {
  max-width: 1440px;
  background-color:#fdfae3;
  padding: 60px 20px;
}

#contest_2023 section.anchor-btn .btn-area {
  max-width: 1140px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin:0 auto;
}

  #contest_2023 section.anchor-btn .btn-area a {
    display: block;
    width: 32%;
  }

  #contest_2023 section.anchor-btn .btn-area img.nolink {
    -webkit-filter: grayscale(1); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* W3C */
    width: 32%;
  }


  @media (max-width: 768px) {
    #contest_2023 section.anchor-btn {
      padding: 40px 24px;
    }

    #contest_2023 section.anchor-btn .btn-area {
      display: block;
      padding: 0;
    }
    
    #contest_2023 section.anchor-btn .btn-area a {
      width: 100%;
      margin-bottom: 20px;
    }
  }


#contest_2023 section.about {
  background: url(../img/bg_about_ciry.png) no-repeat top center #D0EBE0;
  background-size: 100% auto;
  padding: 230px 20px 60px;
}

@media (max-width: 768px) {
  #contest_2023 section.about {
    padding: 80px 24px 40px;
  }
}

#contest_2023 section.ouboyoukou {
  background: url(../img/bg_oubo.png) no-repeat top center #FDFAE3;
  background-size: 100% auto;
  padding: 150px 20px 60px;
}

  @media (max-width: 768px) {
    #contest_2023 section.ouboyoukou {
      padding: 60px 20px 60px;
    }
  }

/* 共通box */
#contest_2023 .contents-box {
  max-width: 1130px;
  background-color:#fff;
  border-radius: 70px;
  margin: 0 auto;
  padding: 60px 20px;
  box-shadow: 10px 10px 0px 0px #2DB47A;
}

#contest_2023 .contents-box h2.corner-title {
  width: 79.646%;
  max-width: 900px;
  margin: 0 auto 50px;
}

#contest_2023 .contents-box p.about-read {
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  color:#333;
}

  @media (max-width: 768px) {
    #contest_2023 .contents-box {
      border-radius: 20px;
      padding: 40px 20px;
      box-shadow: 5px 5px 0px 0px #2DB47A;
    }

    #contest_2023 .contents-box h2.corner-title {
      width: 100%;
      margin: 0 auto 30px;
    }

    #contest_2023 .contents-box p.about-read {
      font-size: 14px;
      line-height: 28px;
      text-align: left;
    }
  }

/* // 共通box */

#contest_2023 .contents-box .oubo-box {
  max-width: 900px;
  margin: 0 auto 30px;
}

#contest_2023 .contents-box .oubo-box .item {
  display: flex;
  justify-content: space-between;
}

  @media (max-width: 768px) {
    #contest_2023 .contents-box .oubo-box .item {
      display: block;
    }
  }

#contest_2023 .contents-box .oubo-box .item h3.item-title {
  width: 18.888%;
  border-top: 8px solid #2DB47A;
  padding-top: 16px;
  color:#000;
  font-size: 16px;
  font-weight: bold;
}

#contest_2023 .contents-box .oubo-box .text-area {
  width: 79.333%;
  border-top: 8px solid #C1D3DB;
  padding: 16px 0 24px;
  font-size: 16px;
  line-height: 34px;
}

  @media (max-width: 768px) {
    #contest_2023 .contents-box .oubo-box .item h3.item-title {
      width: 100%;
      border-top: 4px solid #2DB47A;
      border-bottom: 4px solid #2DB47A;
      padding: 8px 0;
    }

    #contest_2023 .contents-box .oubo-box .text-area {
      width: 100%;
      border-top: none;
      padding: 8px 0 24px;
      font-size: 16px;
      line-height: 24px;
    }
  }

#contest_2023 .contents-box .oubo-box .text-area a.btn {
  display: block;
  max-width: 668px;
}

#contest_2023 .contents-box .notice {
  max-width: 900px;
  border: 5px solid #C1D3DB;
  padding: 20px;
  margin:0 auto;
  font-size: 16px;
  line-height: 34px;
}

#contest_2023 .contents-box .notice h4.notice-title {
  font-weight: bold;
}

footer {
  max-width: 1440px;
  background-size: 100% auto;
  padding: 0 10px 50px;
  margin: 0 auto;
}

footer p.copy {
  font-size: 16px;
  color:#333;
  text-align: center;
}

  @media (max-width: 768px) {
    footer {
      padding: 80px 10px 30px;
    }
    footer p.copy {
      font-size: 10px;
    }
  }

  footer .footer-sub-menu {
    text-align: center;
    font-size: 14px;
    padding-top: 30px;
    margin-bottom: 30px;
  
  }
    footer .footer-sub-menu a {
      padding: 0 10px;
      display: inline-block;
      border-right: 1px solid #bbb;
      color: #29545b;
      height: 1.5em;
      line-height: 1.5em;
    }
  
    footer .footer-sub-menu a:last-child {
      content: "";
      border-right: none;
    }

a.go-link {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  background: #43ad92;
  color:#fff;
  font-weight: bold;
  text-align:center;
  position: fixed;
  bottom: 30px;
  right: 30px;
  font-size: 14px;
  text-decoration: none;
}