@charset "UTF-8";
/*定数定義*/
/*色指定*/
html {
  font-size: 18px; }

a {
  color: #00ADC3; }

body {
  display: block;
  font: 1rem/1.7rem YuGothic, "Yu Gothic", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #FFF; }

body:not(#cooperation) {
  background: url("back.png") #FFF center top/1000px; }

header a {
  display: block;
  width: 100%;
  background: url("headerback.png") no-repeat center bottom/cover;
  box-sizing: border-box;
  padding: 0 3% 4%; }
  header a:hover {
    filter: brightness(105%); }
  header a h1 {
    display: block;
    font-size: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: url("head.jpg") no-repeat center center/cover; }
    header a h1::before {
      content: '';
      display: block;
      padding-top: 23%; }

#top header {
  width: 100%;
  background: url("headerback.png") no-repeat center bottom/cover;
  box-sizing: border-box;
  padding: 3% 3% 5%; }
  #top header h1 {
    display: block;
    font-size: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: url("top.jpg") no-repeat center center/cover; }
    #top header h1::before {
      content: '';
      display: block;
      padding-top: 60%; }

article {
  box-sizing: border-box;
  width: 100%;
  min-height: 60vh;
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 50px; }

h2 {
  color: #FFF;
  font-size: 1rem;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 450px;
  height: 40px;
  margin: 30px 0 50px;
  padding: 5px 0 0 20px;
  background: url("h2back.svg") no-repeat left/240px, url("h2back.svg") no-repeat right/240px; }

h3 {
  font-size: 1.1rem;
  line-height: 1.3rem;
  margin: 50px 0 30px;
  padding: 0 0 5px 10px;
  background: url("line.png") no-repeat left bottom/100% 15px; }

h4 {
  font-size: 1rem;
  line-height: 1.3rem;
  background: url("circle.svg") no-repeat left 6px/10px;
  margin: 20px 0 10px 0;
  padding: 0 0 0 14px; }

.day {
  font-size: 1.1rem;
  font-weight: bold;
  background-color: #F4D8D2;
  padding: 3px 10px; }

#top h2 {
  font-size: .9rem;
  max-width: 350px;
  background: url("h2back.svg") no-repeat left/200px, url("h2back.svg") no-repeat right/200px; }

.main_menu ul,
.banner ul {
  font-size: 0;
  display: block;
  margin: 0 -4% 0 0;
  padding: 30px 0 0;
  list-style: none; }
  .main_menu ul li,
  .banner ul li {
    font-size: .8rem;
    display: inline-block;
    width: 30%;
    margin: 0 3% 3% 0;
    vertical-align: top; }
  .main_menu ul a,
  .banner ul a {
    display: block;
    position: relative;
    width: 100%; }
    .main_menu ul a:hover,
    .banner ul a:hover {
      filter: brightness(120%); }
    .main_menu ul a div,
    .banner ul a div {
      position: relative;
      width: 100%;
      margin-bottom: 1%;
      padding-bottom: 70%; }
      .main_menu ul a div img,
      .banner ul a div img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .main_menu ul a p,
    .banner ul a p {
      color: #000;
      line-height: 1.3;
      font-weight: bold;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 5px 10px;
      background-color: #F4D8D2; }
.main_menu .tag li,
.banner .tag li {
  width: auto; }

.banner ul {
  padding: 0; }
  .banner ul li {
    width: 96%; }
  .banner ul a div {
    padding-bottom: 15%; }

.list_menu {
  font-size: 0;
  display: block;
  margin: 0 -4% 0 0;
  padding: 30px 0 0;
  list-style: none; }
  .list_menu h2 {
    margin-bottom: 30px;
    padding-top: 9px; }
  .list_menu > li {
    font-size: .9rem;
    line-height: 1.3;
    display: inline-block;
    width: 30%;
    margin: 0 3% 3% 0;
    vertical-align: top; }
    .list_menu > li ul {
      list-style: none;
      padding-left: 20px; }
      .list_menu > li ul li {
        display: block;
        margin: 15px 0; }
        .list_menu > li ul li a {
          color: #000;
          font-weight: bold;
          text-decoration: none;
          display: block;
          padding-left: 25px; }
          .list_menu > li ul li a:hover {
            opacity: .5; }

.grid > ul,
.grid4 > ul,
.grid-give > ul {
  font-size: 0;
  display: block;
  margin: 0 -4% 0 0;
  padding: 30px 0 0;
  list-style: none; }
  .grid > ul > li,
  .grid4 > ul > li,
  .grid-give > ul > li {
    font-size: 1rem;
    display: inline-block;
    position: relative;
    width: 30%;
    margin: 0 3% 50px 0;
    vertical-align: top; }
  .grid > ul div.number,
  .grid4 > ul div.number,
  .grid-give > ul div.number {
    font-size: 2.5rem;
    font-weight: bold;
    position: absolute;
    top: -15px;
    left: -15px;
    width: 70px;
    height: 50px;
    text-align: center;
    padding-top: 20px;
    background: url("circle_f.svg") no-repeat 0 0/70px;
    z-index: 1; }
  .grid > ul h3,
  .grid4 > ul h3,
  .grid-give > ul h3 {
    margin-top: 10px; }
  .grid > ul div:not(.subimage):not(.trimcircle):not(.number),
  .grid4 > ul div:not(.subimage):not(.trimcircle):not(.number),
  .grid-give > ul div:not(.subimage):not(.trimcircle):not(.number) {
    position: relative;
    width: 100%;
    padding-bottom: 70%; }
    .grid > ul div:not(.subimage):not(.trimcircle):not(.number) img,
    .grid4 > ul div:not(.subimage):not(.trimcircle):not(.number) img,
    .grid-give > ul div:not(.subimage):not(.trimcircle):not(.number) img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .grid > ul div.subimage img,
  .grid4 > ul div.subimage img,
  .grid-give > ul div.subimage img {
    width: 100%; }

.grid4 > ul > li {
  width: 21.75%; }
  .grid4 > ul > li p,
  .grid4 > ul > li ul {
    font-size: .9rem;
    line-height: 1.2rem;
    margin: 0;
    padding-left: 14px; }
    .grid4 > ul > li p li,
    .grid4 > ul > li ul li {
      padding-left: 12px;
      margin-bottom: 7px;
      list-style-type: none;
      background: url("circle_l.svg") no-repeat left 6px/7px; }

.grid-give ul div:not(.subimage):not(.trimcircle):not(.number) img {
  object-fit: contain; }

#campaign .grid ul div.number {
  background: url("circle_y.svg") no-repeat 0 0/70px; }

#event .grid ul div.number {
  background: url("circle_g.svg") no-repeat 0 0/70px; }

div.subimage {
  float: right;
  margin: 0 0 10px 10px;
  width: 45%; }
  div.subimage img {
    width: 200px; }

div.trimcircle {
  float: right;
  position: relative;
  margin: 0 0 10px 10px;
  width: 45%;
  padding-bottom: 45%; }
  div.trimcircle img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%; }

.date {
  font-weight: bold;
  line-height: 1.3; }

.subinfo,
.url {
  font-size: .9rem; }

.downloadhead {
  font-size: .9rem;
  font-weight: bold;
  margin-bottom: -20px; }

#stamprally .grid ul div:not(.subimage):not(.trimcircle) {
  padding-bottom: 50%; }

.useful a {
  background: url("triangle_y.svg") no-repeat 0 0/18px; }

.fun a {
  background: url("triangle_g.svg") no-repeat 0 0/18px; }

.safty a {
  background: url("triangle_p.svg") no-repeat 0 0/18px; }

.other a {
  background: url("triangle_b.svg") no-repeat 0 0/18px; }

#top .map a,
#top .cooperation a {
  text-decoration: none;
  display: block; }
  #top .map a:hover,
  #top .cooperation a:hover {
    filter: brightness(150%); }
  #top .map a h2,
  #top .cooperation a h2 {
    padding-left: 38px;
    background: url("triangle_w.svg") no-repeat 17px 12px/18px, url("h2back.svg") no-repeat left/200px, url("h2back.svg") no-repeat right/200px; }

.button {
  margin-left: 100px; }

.totop {
  font-size: 0;
  display: block;
  width: 60px;
  height: 30px;
  margin-top: 50px;
  background: url("totop.png") no-repeat 0 0/60px; }
  .totop:hover {
    filter: brightness(125%); }

iframe {
  width: 100%;
  height: 70vh;
  border: none; }

.logo ul {
  display: block;
  margin: 0 -4% 0 0;
  padding: 50px 0 0;
  list-style: none; }
  .logo ul li {
    display: inline-block;
    vertical-align: middle; }
    .logo ul li .xlarge {
      width: 400px;
      max-width: 100%;
      margin: 25px 100px 50px 0; }
    .logo ul li .large {
      width: 250px;
      margin: 0 70px 35px 0; }
    .logo ul li .midium {
      width: 200px;
      margin: 0 50px 25px 0; }
    .logo ul li .small {
      width: 150px;
      margin: 0 30px 20px 0; }

footer {
  width: 100%;
  height: 150px;
  padding: 80px 0 0;
  background: url("footerback.png") no-repeat center top/cover; }
  footer div {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px; }
  footer p {
    font-size: .8rem;
    line-height: 1.3;
    padding-right: 70px; }
    footer p a {
      color: #000; }
  footer .instagram {
    font-size: 0;
    display: block;
    position: absolute;
    top: -10px;
    right: 50px;
    width: 50px;
    height: 50px;
    background: url("instagram.svg") no-repeat center center/cover; }
    footer .instagram:hover {
      opacity: .5; }

@media (max-width: 980px) {
  .main_menu ul li {
    width: 45.5%;
    margin: 0 4% 4% 0; }
  .main_menu ul a {
    margin-bottom: 1%; }

  .banner ul li {
    width: 95%; }

  .list_menu > li {
    width: 45.5%;
    margin: 0 4% 4% 0; }

  .grid > ul > li,
  .grid4 > ul > li,
  .grid-give > ul > li {
    width: 45.5%;
    margin: 0 4% 50px 0; } }
@media (max-width: 680px) {
  .main_menu ul li {
    width: 95%;
    margin: 0 5% 5% 0; }
  .main_menu ul a {
    margin-bottom: 3%; }

  .banner ul {
    padding: 0; }
    .banner ul li {
      width: 95%; }
    .banner ul a div {
      padding-bottom: 70%; }
      .banner ul a div img {
        object-position: 0 100%; }

  .list_menu > li {
    width: 95%;
    margin: 0 5% 5% 0; }

  .grid > ul > li,
  .grid4 > ul > li,
  .grid-give > ul > li {
    width: 95%;
    margin: 0 5% 50px 0; } }
@media (max-width: 500px) {
  #top header {
    background: url("headerback_s.png") no-repeat center bottom/cover; }
    #top header h1 {
      background: url("top_s.jpg") no-repeat center center/cover; }
      #top header h1::before {
        padding-top: 138%; }

  article {
    padding: 0 20px; }

  h2 {
    font-size: .9rem;
    background: url("h2back.svg") no-repeat left/200px, url("h2back.svg") no-repeat right/200px; }

  .logo ul li .small {
    margin: 0 20px 20px 0; }

  footer div {
    padding: 0 20px 0; }
  footer .instagram {
    right: 20px; } }