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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

p {
  margin: 0; }

a {
  color: #0BF; }
  a:hover {
    color: #0EF; }

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0; }

img {
  border: none; }

body {
  display: block;
  position: relative;
  font: 1rem/1.7rem "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
  min-width: 320px;
  margin: 0;
  padding: 0; }
  body#top {
    background-color: #80CCE3; }
  body#konan {
    background-color: #FBE4E7; }
  body#koto {
    background-color: #FDECD8; }
  body#kohoku {
    background-color: #D3EBF0; }
  body#kosei {
    background-color: #DFEFE9; }
  body#roundtrip, body#rule {
    background-color: #DFF0F7; }

h2 span,
h3 span,
h4 span {
  display: inline-block; }

h2,
h3 {
  font-family: "FOT-Popハッピネス Std EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅"; }

.day {
  font-family: "FOT-セザンヌ ProN EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅"; }

h4,
.photo_desc {
  font-family: "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅"; }
  h4 .note,
  .photo_desc .note {
    font-family: "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅"; }

/*ヘッダ*/
header {
  width: 100%; }
  header h1 {
    display: block;
    font-size: 0;
    width: 100%;
    background: url("../images/common/header_l.jpg") no-repeat center top/100%;
    aspect-ratio: 100 / 25; }

body#top {
  background-color: #80CCE3; }

#top header {
  width: 100%; }
  #top header h1 {
    display: block;
    font-size: 0;
    width: 100%;
    background: url("../images/top/top_l.jpg") no-repeat center top/100%;
    aspect-ratio: 100 / 65; }

.logos {
  display: block;
  margin: 0 8%; }
  .logos li {
    display: inline-block;
    height: 6vw;
    margin-right: 1vw; }
    .logos li a:hover {
      opacity: .7;
      filter: brightness(150%); }
    .logos li img {
      height: 6vw; }

.menu_botton {
  display: none; }

#top nav {
  display: none; }

@media (min-width: 601px) {
  nav {
    display: block;
    width: 100%;
    background: url("../images/common/navi_bg.svg") repeat-x top left;
    padding-top: 10px; }
    nav ul {
      display: block;
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 50px; }
    nav li {
      display: inline-block;
      margin: 10px 10px 10px 0; }
      nav li a {
        color: #000;
        font: 0.8rem/0.8rem "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        padding: 8px 15px;
        background-color: #FFF;
        border-radius: 20px;
        box-shadow: 5px 5px #80CCE3; }
        nav li a:hover {
          color: #000;
          background-color: #FE6;
          filter: contrast(150%) brightness(130%); }
      nav li.konan a {
        background-color: #ED8599; }
      nav li.koto a {
        background-color: #F29D65; }
      nav li.kohoku a {
        background-color: #4BBDCe; }
      nav li.kosei a {
        background-color: #65BEA0; } }
article {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 50px auto;
  padding: 0 50px; }

.top_desc strong {
  font-size: 1.2rem;
  font-weight: bold;
  background: url("../images/common/underline.svg") repeat-x bottom left/200px; }

.area_menu {
  display: block;
  margin: 50px 0 20px; }
  .area_menu li {
    display: block;
    width: 300px;
    height: 240px; }
    .area_menu li.konan a {
      background: url("../images/top/konan_bg.svg") no-repeat top center/contain; }
    .area_menu li.koto a {
      background: url("../images/top/koto_bg.svg") no-repeat top center/contain; }
    .area_menu li.kohoku a {
      background: url("../images/top/kohoku_bg.svg") no-repeat top center/contain; }
    .area_menu li.kosei a {
      background: url("../images/top/kosei_bg.svg") no-repeat top center/contain; }
    .area_menu li.kosei p {
      width: 200px;
      font-size: .7rem;
      line-height: 1rem; }
  .area_menu a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    padding-bottom: 20px; }
    .area_menu a:hover {
      filter: contrast(150%) brightness(130%); }
  .area_menu h2 {
    display: block;
    color: #FFF;
    font-size: 2.4rem;
    line-height: 2.4rem;
    font-weight: bold;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
    width: 140px;
    margin: 0 auto; }
    .area_menu h2 .small {
      display: block;
      color: #000;
      font-size: 1.6rem;
      line-height: 1.9rem;
      -webkit-text-stroke-width: 0;
      width: 100%;
      padding-bottom: 5px; }
  .area_menu p {
    color: #000;
    font-size: .8rem;
    line-height: 1.1rem;
    width: 140px;
    margin: 0 auto;
    padding-top: 5px;
    border-top: solid 1px #000; }

@media (min-width: 781px) {
  .area_menu {
    position: relative;
    aspect-ratio: 100 / 80;
    background: url("../images/top/map.svg") no-repeat center center/35%; }
    .area_menu li {
      position: absolute; }
      .area_menu li.konan {
        bottom: 0;
        right: 10%; }
      .area_menu li.koto {
        bottom: 45%;
        right: 0; }
      .area_menu li.kohoku {
        top: 0;
        left: 10%; }
      .area_menu li.kosei {
        top: 45%;
        left: 0; } }
.copy {
  display: block;
  font-size: 0;
  width: 100%;
  margin-bottom: 20px;
  aspect-ratio: 700 / 90;
  background: url("../images/top/copy_l.svg") no-repeat center center/contain; }

.plan_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 30px; }
  .plan_menu li {
    display: block;
    position: relative;
    width: 300px;
    height: 300px; }
    .plan_menu li.aidstation a {
      background: url("../images/top/plan1_bg.svg") no-repeat top center/contain; }
      .plan_menu li.aidstation a:hover {
        background: url("../images/top/plan1_bg_hover.svg") no-repeat top center/contain; }
      .plan_menu li.aidstation a h2 {
        color: #ED8599; }
    .plan_menu li.roundtrip a {
      background: url("../images/top/plan2_bg.svg") no-repeat top center/contain; }
      .plan_menu li.roundtrip a:hover {
        background: url("../images/top/plan2_bg_hover.svg") no-repeat top center/contain; }
      .plan_menu li.roundtrip a h2 {
        color: #65BEA0; }
    .plan_menu li.campaign div {
      background: url("../images/top/plan3_bg.svg") no-repeat top center/contain; }
      .plan_menu li.campaign div h2 {
        color: #F29D65; }
      .plan_menu li.campaign div p {
        font-size: .7rem;
        line-height: .9rem; }
        .plan_menu li.campaign div p.number {
          font-size: 0; }
        .plan_menu li.campaign div p.day {
          font-size: 1rem; }
  .plan_menu .day {
    font-size: 1rem; }
  .plan_menu a {
    display: block;
    color: #000;
    text-decoration: none;
    height: 100%;
    padding-top: 20px; }
  .plan_menu div {
    height: 100%;
    padding-top: 20px; }
  .plan_menu .number {
    font-size: 0; }
  .plan_menu h2 {
    font-size: 1.3rem;
    line-height: 1.4rem;
    text-align: center;
    font-weight: bold;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
    width: 250px;
    margin: 0 auto;
    margin-bottom: 3px;
    padding-bottom: 3px;
    border-bottom: solid 1px #000; }
  .plan_menu p {
    font-size: .8rem;
    line-height: 1.1rem;
    width: 250px;
    margin: 0 auto; }
    .plan_menu p.sub_title {
      text-align: center;
      font-family: "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-weight: bold;
      width: 240px;
      margin-top: 5px;
      padding: 5px 0 3px;
      border-top: solid 1px #000; }
  .plan_menu img {
    float: right;
    width: 130px;
    margin-left: 5px; }
  .plan_menu .popup_menu {
    display: block;
    position: absolute;
    font-family: "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
    left: 10px;
    top: 0px;
    width: 280px;
    padding: 20px 20px 10px;
    background: #DFF0F7EE url("../images/top/close.svg") no-repeat top 10px right 10px/14px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 1s;
    box-shadow: 5px 5px 5px #0003;
    backdrop-filter: blur(5px); }
    .plan_menu .popup_menu li {
      display: block;
      width: 240px;
      height: 30px;
      margin: 10px 0; }
    .plan_menu .popup_menu a {
      display: block;
      font-size: .8rem;
      font-weight: bold;
      text-align: center;
      padding: 1px;
      background-color: #FFF;
      border-radius: 20px;
      box-shadow: 3px 3px #0CD; }
      .plan_menu .popup_menu a:hover {
        background-color: #FFA; }
    .plan_menu .popup_menu.open {
      opacity: 1;
      transition: opacity 1s; }
  .plan_menu .day {
    width: 250px;
    padding-left: 100px; }

.day {
  display: block;
  font-size: 1rem;
  font-weight: bold; }
  .day span {
    display: inline-block; }
    .day span.saturday, .day span.sunday, .day span.holyday {
      font-size: .5rem;
      line-height: .5rem;
      vertical-align: 2px;
      margin: 0 2px;
      padding: 2px 2px 2px;
      background-color: #E89;
      border: solid 1px #000;
      border-radius: 7px; }
    .day span.saturday {
      background-color: #8CE; }
    .day span.holyday {
      font-family: "FOT-UD角ゴC60 Pro B", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-feature-settings: "palt"; }

.small_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0 auto; }
  .small_menu li {
    display: block;
    margin: 0 20px 20px; }
  .small_menu a {
    display: block;
    color: #80CCE3;
    font: 1.2rem/1.4rem "FOT-Popハッピネス Std EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
    padding: 12px 30px;
    background-color: #FFF;
    border-radius: 30px;
    box-shadow: 5px 5px #0AB; }
    .small_menu a:hover {
      background-color: #FE6;
      filter: contrast(150%) brightness(130%); }

.button {
  display: inline-block;
  vertical-align: middle;
  color: #FFF;
  font-family: "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
  text-decoration: none;
  text-align: center;
  min-width: 160px;
  margin: 5px 5px 15px;
  padding: 6px 20px;
  border-radius: 20px;
  box-shadow: 4px 4px #FFF;
  background-color: #0AC; }
  .button:hover {
    color: #FFF;
    filter: contrast(150%) brightness(130%); }
  .button.small_font {
    font-size: .8rem;
    line-height: .9rem;
    padding: 4px 20px; }

#aidstation .day,
#roundtrip .day {
  display: inline-block;
  font-size: 1.5rem;
  margin: 0 20px 30px 0; }
  #aidstation .day span.saturday, #aidstation .day span.sunday,
  #roundtrip .day span.saturday,
  #roundtrip .day span.sunday {
    font-size: .7rem;
    line-height: .7rem;
    vertical-align: 4px;
    margin: 0 3px;
    padding: 3px 3px 4px;
    background-color: #E89;
    border-radius: 11px; }
  #aidstation .day span.saturday,
  #roundtrip .day span.saturday {
    background-color: #8CE; }
  #aidstation .day span.time,
  #roundtrip .day span.time {
    font-size: 1rem;
    margin-left: 20px; }
#aidstation h3,
#roundtrip h3 {
  font-family: "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅"; }

#aidstation h2,
#roundtrip h2,
#special h2,
#goods h2,
#rule h2,
#cooperation h2,
#archive h2 {
  color: #80CCE3;
  display: inline-block;
  font-size: 2.2rem;
  line-height: 2.6rem;
  font-weight: bold;
  margin-bottom: 20px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000; }
  #aidstation h2 .small,
  #roundtrip h2 .small,
  #special h2 .small,
  #goods h2 .small,
  #rule h2 .small,
  #cooperation h2 .small,
  #archive h2 .small {
    display: inline-block;
    font-size: 1.8rem;
    line-height: 2.2rem; }
  #aidstation h2 span,
  #roundtrip h2 span,
  #special h2 span,
  #goods h2 span,
  #rule h2 span,
  #cooperation h2 span,
  #archive h2 span {
    display: inline-block; }
#aidstation img,
#roundtrip img,
#special img,
#goods img,
#rule img,
#cooperation img,
#archive img {
  float: right;
  width: 300px;
  margin: 0 0 10px 10px; }
#aidstation .column,
#roundtrip .column,
#special .column,
#goods .column,
#rule .column,
#cooperation .column,
#archive .column {
  display: block;
  margin-top: 30px;
  padding: 30px;
  background-color: #FFF;
  border-radius: 30px; }
#aidstation .button,
#roundtrip .button,
#special .button,
#goods .button,
#rule .button,
#cooperation .button,
#archive .button {
  box-shadow: 4px 4px #CCC; }

#aidstation .day {
  height: 100px;
  padding: 60px 0 0 30px;
  background: url("../images/aidstation/titile_bg.svg") no-repeat top left/170px; }
#aidstation h2 {
  margin-bottom: 40px; }
#aidstation .give {
  display: block;
  position: relative;
  background-color: #DFF0F7;
  margin: 30px 0;
  padding: 50px 30px 30px 30px; }
  #aidstation .give h3 {
    display: block;
    position: absolute;
    color: #FFF;
    font-size: 1.2rem;
    top: -10px;
    left: -10px;
    padding: 4px 20px;
    background: url("../images/aidstation/give_bg.svg") no-repeat top left/contain;
    transform: rotate(-3deg); }
  #aidstation .give ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  #aidstation .give li {
    width: 24%; }
    #aidstation .give li p {
      font-size: .7rem;
      line-height: 1rem;
      text-align: center;
      margin-bottom: 5px; }
  #aidstation .give img {
    float: none;
    width: 100%; }
  #aidstation .give h4 {
    line-height: 1.3rem;
    text-align: center; }
#aidstation .app h2 {
  padding: 60px 0 60px 70px;
  background: url("../images/aidstation/biwaichi_icon.webp") no-repeat left center/65px;
  margin-bottom: -10px; }
#aidstation .app img {
  width: 50%; }
#aidstation .app p {
  margin-bottom: 20px; }

strong {
  font-weight: bold; }
  strong.more {
    color: #E00;
    font-weight: normal; }
  strong.most {
    color: #E00; }

.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 540px;
  margin-top: 50px;
  padding: 10px 110px 20px 50px; }
  .title h2 {
    color: #FFF;
    font-size: 2.4rem;
    line-height: 2.8rem;
    font-weight: bold;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000; }
    .title h2 .small {
      color: #000;
      font-size: 1.6rem;
      line-height: 1.9rem; }
  .title p {
    display: inline-block;
    font-size: .7rem;
    line-height: .9rem;
    margin-top: 5px;
    padding-top: 5px;
    border-top: solid 1px #000; }
    .title p span {
      display: inline-block; }

#konan .title {
  background: url("../images/konan/title_bg_right.svg") no-repeat center right/contain, url("../images/konan/title_bg.svg") no-repeat center center/contain, url("../images/konan/title_bg.svg") no-repeat center left/contain; }

#koto .title {
  background: url("../images/koto/title_bg_right.svg") no-repeat center right/contain, url("../images/koto/title_bg.svg") no-repeat center center/contain, url("../images/koto/title_bg.svg") no-repeat center left/contain; }

#kohoku .title {
  background: url("../images/kohoku/title_bg_right.svg") no-repeat center right/contain, url("../images/kohoku/title_bg.svg") no-repeat center center/contain, url("../images/kohoku/title_bg.svg") no-repeat center left/contain; }

#kosei .title {
  background: url("../images/kosei/title_bg_right.svg") no-repeat center right/contain, url("../images/kosei/title_bg.svg") no-repeat center center/contain, url("../images/kosei/title_bg.svg") no-repeat center left/contain;
  padding-top: 5px; }
  #kosei .title p {
    line-height: .8rem;
    margin-top: -2px;
    padding-top: 2px; }

#koto .title,
#kohoku .title {
  padding-top: 9px; }
  #koto .title p,
  #kohoku .title p {
    margin-top: 0;
    padding-top: 3px; }

.area_contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%; }
  .area_contents li {
    position: relative;
    width: 47%;
    margin-bottom: 50px; }
    .area_contents li .number {
      display: block;
      float: left;
      font-family: "FOT-セザンヌ ProN EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-size: 2.4rem;
      font-weight: bold;
      text-align: center;
      width: 70px;
      height: 80px;
      margin-right: 5px;
      padding: 20px 3px 0 0; }
    .area_contents li .aidstation {
      display: block;
      color: #FFF;
      font-family: "FOT-Popハッピネス Std EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-size: 1.2rem;
      font-weight: bold;
      width: 250px;
      height: 80px;
      margin-left: 75px;
      padding: 4px 0 0 30px; }
      .area_contents li .aidstation + h3 {
        margin: -35px 0 20px 100px; }
    .area_contents li h3 {
      display: block;
      font-size: 1.8rem;
      line-height: 2rem;
      font-weight: bold;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #000;
      margin-bottom: 10px; }
      .area_contents li h3 .small {
        color: #000;
        font-size: 1.6rem;
        line-height: 1.9rem; }
      .area_contents li h3 .subtitle {
        font-family: 1.3rem/1.6re "FOT-Popハッピネス Std EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅"; }
    .area_contents li dt {
      display: inline-block;
      color: #FFF;
      font-size: .7rem;
      line-height: 1rem;
      font-weight: bold;
      vertical-align: 1px;
      padding: 1px 15px 0 5px;
      background: url("../images/common/address_bg.svg") no-repeat center right/200px; }
    .area_contents li dd {
      display: inline-block;
      font-size: .8rem;
      font-weight: bold;
      margin-bottom: 10px; }
    .area_contents li.photo_desc p {
      display: block;
      position: absolute;
      color: #FFF;
      font-size: 1.1rem;
      line-height: 1.3rem;
      text-align: center;
      top: -10px;
      left: 20px;
      padding: 7px 20px 3px;
      border-radius: 20px; }
      .area_contents li.photo_desc p .note {
        display: block;
        color: #000;
        font-size: .8rem; }
    .area_contents li img {
      width: 100%; }
      .area_contents li img.left {
        float: left;
        width: 50%;
        margin-right: 10px; }
      .area_contents li img.right {
        float: right;
        width: 50%;
        margin-left: 10px; }
    .area_contents li dl + h3 {
      margin-top: 10px; }
    .area_contents li .day {
      font-size: 1.1rem;
      margin-bottom: 10px; }
      .area_contents li .day span.saturday, .area_contents li .day span.sunday, .area_contents li .day span.holyday {
        font-size: .6rem;
        line-height: .6rem;
        vertical-align: 4px;
        margin: 0 3px;
        padding: 4px 3px;
        background-color: #E89;
        border-radius: 11px; }
      .area_contents li .day span.saturday {
        background-color: #8CE; }
      .area_contents li .day span.time {
        font-size: 1rem;
        margin-left: 20px; }
    .area_contents li .new {
      display: inline-block;
      color: #E00;
      font: 0.9rem/1.2rem "FOT-セザンヌ ProN EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-family: "FOT-セザンヌ ProN EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-size: 1rem;
      font-weight: bold; }
    .area_contents li .reserve {
      display: inline-block;
      color: #FFF;
      font-weight: bold;
      vertical-align: 1px;
      padding: 2px 5px;
      background-color: #E00;
      border-radius: 5px; }
    .area_contents li .campaign,
    .area_contents li .event {
      display: inline-block;
      font: 0.8rem/1.2rem "FOT-Popハッピネス Std EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-weight: bold;
      height: 30px; }
    .area_contents li .campaign {
      width: 250px;
      padding: 4px 15px 6px;
      background: url("../images/common/campaign_bg.svg") no-repeat center left/contain; }
    .area_contents li .event {
      width: 180px;
      height: 35px;
      padding: 6px 15px 4px;
      background: url("../images/common/event_bg.svg") no-repeat center left/contain; }
    .area_contents li .subtitle {
      font-family: "FOT-Popハッピネス Std EB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-weight: bold; }
    .area_contents li.column {
      padding: 30px;
      border-radius: 100px; }
      .area_contents li.column .note {
        display: inline-block; }
      .area_contents li.column h3 {
        color: #000 !important;
        font-size: 1.6rem;
        line-height: 1.9rem;
        margin-bottom: 10px;
        -webkit-text-stroke-width: 0; }
      .area_contents li.column img {
        width: 100%; }
        .area_contents li.column img.mikazuki {
          width: 47%;
          margin-right: 2%; }
        .area_contents li.column img.pake {
          width: 47%; }
    .area_contents li .baloon {
      display: block;
      float: left;
      width: 120px;
      height: 80px;
      margin: 0 10px 10px -30px;
      padding: 20px 0 0 15px; }

#koto .area_contents .event {
  width: 260px;
  background: url("../images/common/event2_bg.svg") no-repeat center left/contain; }

#konan .area_contents li .number {
  color: #E96076;
  background: url("../images/konan/number_bg.svg") no-repeat center left/70px; }
#konan .area_contents li .aidstation {
  background: url("../images/konan/aidstation_bg.svg") no-repeat top left/contain; }
#konan .area_contents li h3 {
  color: #ED8599; }
#konan .area_contents li.photo_desc p {
  background-color: #ED8599; }
#konan .area_contents li .button {
  background-color: #E96076; }
#konan .area_contents li.column {
  background-color: #F6C1C7; }
#konan .area_contents li .baloon {
  background: url("../images/konan/baloon.svg") no-repeat top left/contain; }

#koto .area_contents li .number {
  color: #EF8340;
  background: url("../images/koto/number_bg.svg") no-repeat center left/70px; }
#koto .area_contents li .aidstation {
  background: url("../images/koto/aidstation_bg.svg") no-repeat top left/contain; }
#koto .area_contents li h3 {
  color: #F29D65; }
#koto .area_contents li.photo_desc p {
  background-color: #F29D65; }
#koto .area_contents li .button {
  background-color: #EF8340; }
#koto .area_contents li.column {
  width: 100%;
  background-color: #F9CB98; }
  #koto .area_contents li.column img {
    float: right;
    width: 48%;
    margin: 0 0 10px 10px; }
#koto .area_contents li .baloon {
  color: #F29D65;
  font-size: .8rem;
  line-height: .9rem;
  font-weight: bold;
  text-align: center;
  width: 130px;
  height: 100px;
  margin: -50px 0 0 -50px;
  padding: 22px 0 0;
  background: url("../images/koto/baloon.svg") no-repeat top center/contain;
  transform: rotate(-10deg); }

#kohoku .area_contents li .number {
  color: #00ADC3;
  background: url("../images/kohoku/number_bg.svg") no-repeat center left/70px; }
#kohoku .area_contents li .aidstation {
  background: url("../images/kohoku/aidstation_bg.svg") no-repeat top left/contain; }
#kohoku .area_contents li h3 {
  color: #4BBDCe; }
#kohoku .area_contents li.photo_desc p {
  background-color: #4BBDCe; }
#kohoku .area_contents li .button {
  background-color: #00ADC3; }
#kohoku .area_contents li.column {
  background-color: #99D4DC; }
#kohoku .area_contents li .baloon {
  line-height: 1.4rem;
  font-weight: bold;
  text-align: center;
  width: 100px;
  height: 80px;
  margin: -50px 0 0 -50px;
  padding: 12px;
  background: url("../images/kohoku/baloon.svg") no-repeat top left/contain; }

#kosei .area_contents li .number {
  color: #4DBA93;
  background: url("../images/kosei/number_bg.svg") no-repeat center left/70px; }
#kosei .area_contents li .aidstation {
  background: url("../images/kosei/aidstation_bg.svg") no-repeat top left/contain; }
#kosei .area_contents li h3 {
  color: #65BEA0; }
#kosei .area_contents li.photo_desc p {
  background-color: #65BEA0; }
#kosei .area_contents li .button {
  background-color: #4DBA93; }
#kosei .area_contents li .baloon {
  line-height: .9rem;
  font-weight: bold;
  text-align: center;
  width: 130px;
  height: 100px;
  margin: -50px 0 0 -50px;
  padding: 22px 0 0;
  background: url("../images/kosei/baloon.svg") no-repeat top left/contain; }

.note {
  font-size: .8rem;
  line-height: 1.3rem; }

.koayu {
  text-align: right; }

.clear {
  clear: both;
  margin-bottom: 20px; }

#special h2,
#goods h2 {
  margin-bottom: 30px; }
#special h3,
#goods h3 {
  font-size: 1.4rem;
  line-height: 1.6rem;
  -webkit-text-stroke-width: 0; }
  #special h3 .new,
  #goods h3 .new {
    font-size: 1.2rem;
    line-height: 1.4rem;
    margin-right: 15px; }
#special h3.ribbon,
#goods h3.ribbon {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1.4rem;
  width: 100%;
  min-height: 60px;
  padding: 10px 30px 10px 10px;
  background: url("../images/common/title_bg_left.svg") no-repeat center left/cover, url("../images/common/title_bg.svg") no-repeat center right/cover; }
  #special h3.ribbon + img,
  #goods h3.ribbon + img {
    margin-top: 20px; }
#special .charge,
#goods .charge {
  display: inline-block;
  color: #E00;
  font-size: .9rem;
  line-height: 1.2rem;
  font-weight: bold;
  vertical-align: 3px;
  padding: 0 2px;
  border: solid 2px #E00;
  border-radius: 5px; }
#special img,
#goods img {
  width: 100%; }
  #special img.left,
  #goods img.left {
    float: left;
    width: 48%;
    margin-right: 10px; }
  #special img.right,
  #goods img.right {
    float: right;
    width: 48%; }
  #special img.memory,
  #goods img.memory {
    float: left;
    width: 150px; }
#special p,
#goods p {
  margin-top: 20px; }
  #special p + ul,
  #goods p + ul {
    margin-top: 50px; }

#roundtrip h3 {
  color: #0AC;
  font-size: 1.6rem;
  line-height: 2rem;
  margin: 30px 0 20px; }

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 -1%; }
  .grid li {
    display: block;
    width: 23%;
    margin: 10px 1% 30px; }
  .grid a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    width: 100%; }
    .grid a:hover img {
      filter: brightness(130%); }
  .grid img {
    width: 100% !important;
    border: solid 5px #FFF;
    border-radius: 30px; }

@media (max-width: 730px) {
  .grid li {
    width: 31%; } }
@media (max-width: 600px) {
  .grid li {
    width: 46%;
    margin: 10px 2% 20px; } }
#rule h2 {
  display: inline-block;
  color: #FE6;
  margin-bottom: 30px;
  padding: 12px 110px 8px;
  background: url("../images/rule/bicycle1.webp") no-repeat center left/100px, url("../images/rule/bicycle2.webp") no-repeat center right/100px; }
#rule dd {
  display: inline-block;
  font: 1rem/1.2rem "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
  font-weight: bold;
  padding: 5px 20px;
  border-top: solid 3px #0AC;
  border-bottom: solid 3px #0AC; }
  #rule dd .blue {
    color: #0AC; }
#rule dt {
  display: inline-block;
  font: 1rem/1.5rem "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
  font-weight: bold;
  margin-top: 20px;
  padding-left: 38px;
  background: url("../images/common/triangle.svg") no-repeat center left 8px/23px; }
  #rule dt span {
    display: inline-block; }
  #rule dt strong {
    display: inline-block;
    color: #E51D52;
    padding-bottom: 2px;
    background: url("../images/rule/waveline.svg") repeat-x bottom center/150px; }
#rule .note {
  font-size: .8rem;
  line-height: 1.2rem;
  margin: 5px 0 0 210px; }
#rule .rule_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px; }
  #rule .rule_block li {
    width: 39%; }
    #rule .rule_block li.blue_line {
      width: 59%; }
    #rule .rule_block li div {
      display: inline-block;
      width: 47%; }
      #rule .rule_block li div.brokenline {
        margin-right: 3%; }
  #rule .rule_block h3 {
    font-size: 1.3rem;
    line-height: 1.6rem;
    margin-bottom: 10px; }
    #rule .rule_block h3 .number {
      color: #FE6;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #000;
      margin-right: 5px; }
    #rule .rule_block h3 .small {
      font-size: 1.1rem;
      line-height: 1.3rem; }
  #rule .rule_block h4 {
    color: #0AC;
    font-size: 1.2rem;
    line-height: 1.5rem;
    text-align: center;
    margin: 20px 0 10px;
    padding: 3px;
    background-color: #FFF;
    border-radius: 5px; }
  #rule .rule_block img {
    width: 100%;
    margin-top: 10px; }
  #rule .rule_block .brokenline h4 {
    color: #0AC;
    border: dashed 2px #0AC; }
  #rule .rule_block .solidline h4 {
    border: solid 2px #0AC; }
  #rule .rule_block .dedicated h4 {
    color: #FFF;
    background-color: #0AC;
    border: solid 2px #0AC; }

#cooperation .list {
  margin-top: 70px; }
  #cooperation .list ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -25px 20px; }
  #cooperation .list .x-large li img {
    width: 300px;
    max-width: 100%; }
  #cooperation .list .large li img {
    width: 220px; }
  #cooperation .list .middle li img {
    width: 180px; }
  #cooperation .list .small li img {
    width: 120px; }
  #cooperation .list li {
    display: flex;
    align-items: center;
    margin: 0 25px 40px; }
    #cooperation .list li a:hover {
      filter: contrast(150%);
      opacity: .5; }
    #cooperation .list li img {
      width: 100%; }

#archive article a {
  color: #000;
  text-decoration: none;
  margin: 10px 20px;
  padding-left: 20px;
  background: url("../images/common/triangle.svg") no-repeat center left/15px; }
  #archive article a:hover {
    filter: brightness(150%); }

footer {
  display: block;
  font-size: .9rem;
  text-align: center;
  padding: 50px 20px;
  background: url("../images/common/footer_bg.svg") repeat-x top center/1000px; }
  footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    margin: 50px auto 30px; }
    footer ul li {
      display: block;
      margin: 5px; }
    footer ul a {
      color: #000;
      display: block;
      font: 0.8rem/1rem "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
      font-weight: bold;
      text-decoration: none;
      width: 100%;
      height: 100%;
      padding: 4px 10px;
      background-color: #FFF;
      border-radius: 15px;
      box-shadow: 3px 3px #80CCE3; }
      footer ul a:hover {
        color: #000;
        background-color: #FE6;
        filter: contrast(150%) brightness(130%); }
  footer p {
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 50px auto; }

@media (max-width: 780px) {
  #top header h1 {
    background: url("../images/top/top.jpg") no-repeat center top/100%;
    aspect-ratio: 11 / 15; }

  .logos li {
    height: 50px;
    margin-right: 10px; }
    .logos li img {
      height: 50px; }

  .area_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%; }
    .area_menu li {
      margin-bottom: 10px; }

  .area_contents li {
    width: 100%; }

  #rule h2 span {
    display: block; }

  #rule .rule_block li {
    width: 100%;
    margin-bottom: 30px; }
    #rule .rule_block li.blue_line {
      width: 100%; }
    #rule .rule_block li img {
      max-width: 300px;
      float: none; } }
@media (max-width: 600px) {
  .menu_button {
    display: block;
    position: fixed;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    z-index: 2;
    cursor: pointer; }
    .menu_button::before, .menu_button::after {
      content: "";
      display: block;
      height: 3px;
      background-color: #0AC;
      transition: .3s ease-in-out; }
    .menu_button::before {
      transform: translateY(24px);
      box-shadow: 0 -11px #0AC; }
    .menu_button.open::before {
      transform: translateY(10px) rotate(-45deg);
      box-shadow: none; }
    .menu_button.open::after {
      transform: translateY(7px) rotate(45deg); }

  #top nav,
  nav {
    display: block;
    position: fixed;
    top: calc(60px - 100vh);
    right: calc(60px - 100vw);
    width: 100vw;
    height: 100vh;
    padding-left: 60px;
    overflow: hidden;
    background-color: #FFF;
    border-bottom-left-radius: 10px;
    transition: .3s ease-in-out;
    z-index: 1;
    backdrop-filter: blur(10px); }
    #top nav.open,
    nav.open {
      top: 0;
      right: 0;
      padding-left: 0;
      overflow: scroll; }
    #top nav ul,
    nav ul {
      width: 100vw; }
      #top nav ul li,
      nav ul li {
        width: 100%;
        border-bottom: solid 1px #CCC;
        background-color: #DFF0F7; }
        #top nav ul li a,
        nav ul li a {
          color: #000;
          font-family: "FOT-スーラ ProN DB", "メイリオ", "MS-PGothic", "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
          font-weight: bold;
          text-decoration: none;
          display: block;
          width: 100%;
          padding: 12px 20px; }
          #top nav ul li a:hover,
          nav ul li a:hover {
            color: #000; }
        #top nav ul li.konan,
        nav ul li.konan {
          background-color: #ED8599; }
        #top nav ul li.koto,
        nav ul li.koto {
          background-color: #F29D65; }
        #top nav ul li.kohoku,
        nav ul li.kohoku {
          background-color: #4BBDCe; }
        #top nav ul li.kosei,
        nav ul li.kosei {
          background-color: #65BEA0; }

  header h1 {
    background: url("../images/common/header.jpg") no-repeat center top/100%;
    aspect-ratio: 100 / 65; }

  #top header h1 {
    background: url("../images/top/top.jpg") no-repeat center top/100%;
    aspect-ratio: 11 / 15; }

  .logos li {
    height: 50px;
    margin-right: 10px; }
    .logos li img {
      height: 50px; }

  .area_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%; }
    .area_menu li {
      margin-bottom: 10px; }

  article {
    padding: 0 20px; }

  .copy {
    width: 100%;
    aspect-ratio: 600 / 110;
    background: url("../images/top/copy.svg") no-repeat center center/contain; }

  #aidstation h2,
  #roundtrip h2,
  #special h2,
  #goods h2,
  #rule h2,
  #cooperation h2 {
    font-size: 1.8rem;
    line-height: 2.1rem; }
    #aidstation h2 .small,
    #roundtrip h2 .small,
    #special h2 .small,
    #goods h2 .small,
    #rule h2 .small,
    #cooperation h2 .small {
      font-size: 1.4rem;
      line-height: 1.7rem; }

  #aidstation img,
  #roundtrip img {
    float: none;
    width: 100%;
    margin: 0 0 10px 0; }
  #aidstation .app img,
  #roundtrip .app img {
    width: 100%; }
  #aidstation .give li,
  #roundtrip .give li {
    width: 48%;
    margin-bottom: -20px; }
  #aidstation .give h3,
  #roundtrip .give h3 {
    font-size: 1rem;
    padding: 2px 20px; }

  .title {
    width: 340px;
    margin-top: 50px;
    padding: 10px 100px 17px 20px; }
    .title h2 {
      color: #FFF;
      font-size: 2.4rem;
      line-height: 2.8rem;
      font-weight: bold;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #000; }
      .title h2 .small {
        color: #000;
        font-size: 1.6rem;
        line-height: 1.9rem; }
    .title p {
      display: inline-block;
      font-size: .7rem;
      line-height: .9rem;
      margin-top: 5px;
      padding-top: 5px;
      border-top: solid 1px #000; }

  .area_contents li.column {
    padding: 20px;
    border-radius: 50px; }
    .area_contents li.column img.mikazuki {
      margin-right: 1%; }
  .area_contents li h3 {
    font-size: 1.6rem;
    line-height: 1.9rem; }
  .area_contents li.photo_desc p {
    font-size: 1rem;
    line-height: 1.2rem;
    left: 5px;
    padding: 7px 10px 3px; }

  #koto .area_contents li.column img {
    float: none;
    width: 100%;
    margin: 0; }
  #koto .area_contents li .baloon {
    margin: 0 0 0 -20px; }

  #kohoku .area_contents li .baloon {
    margin-left: -40px; }

  #rule h2 {
    font-size: 1.6rem;
    line-height: 2.1rem;
    margin-bottom: 30px;
    padding: 12px 80px 8px;
    background: url("../images/rule/bicycle1.webp") no-repeat center left/70px, url("../images/rule/bicycle2.webp") no-repeat center right/70px; }
  #rule .rule_block li div {
    width: 100%; }
  #rule .note {
    margin-left: 40px; }

  footer {
    padding: 20px 20px; } }