/*/////////////////////////////////////////
    Index

    Small @media screen and (max-width: 512px)
    Medium @media screen and (min-width: 513px) and (max-width: 959px)
    Large @media screen and (min-width: 960px)
/////////////////////////////////////////*/
/*---------------------------------------
    MainVisual
---------------------------------------*/
@media screen and (max-width: 512px) {
  .main-visual-area {
    position: relative;
    width: 100vw;
    margin: 0 auto 2em auto;
  }
}
@media screen and (min-width: 960px) {
  .main-visual-area {
    width: 100%;
    height: 520px;
    background-color: #80cfff;/*128, 207, 255*/
  }
}
/*---------------------------------------
    Sections
---------------------------------------*/
#genki-syokudou {
  margin: 2em auto;
  padding: 1em;
  border-bottom: #0053A9 1px solid;
}
#genki-syokudou h2 {
    color: #0053A9;
    text-align: center;
}
#genki-syokudou img.mark-genki {
    display: block;
    max-width: 100px;
    height: 100px;
    margin: 0 auto;
}

#genki-syokudou div.inner-txt {
    display: block;
    width: 50%;
    margin: 0 auto;
    text-align: center;
}
a.btn-bhsyokudou {
    display: block;
    width: 100%;
    color: #0053A9;
    text-align: right;
    padding: 1em 0;
}
.harf {
  position: relative;
  box-sizing: border-box;
  background-color: #ebf6fc;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
  .img_wrap img,
  .harf img {
    width: 100%;
    height: auto;
  }
  .att {
    display: block;
    text-align: center;
    background-color: #ebf6fc;
  }
@media screen and (max-width: 512px) {
  .main {
    max-width: 90%;
    margin: 0 auto;
  }
  #ichiba-1f-yasai {
    margin-bottom: 1em;
  }
    #ichiba-1f-yasai p {
        margin: 0;
    }
  #about,
  #ichiba-area,
  #ichiba-1f-omiyage,
  #dining-area,
  #recommend-area,
  #takeout-menu,
  #menu-area,
  #terrace-area,
  #access,
  #public-banner {
    margin-bottom: 2em;
  }
  #news {
    position: relative;
    margin-bottom: 5em;
  }
}
@media screen and (min-width: 513px) and (max-width: 959px) {
  #genki-syokudou img {
    max-width: 50%;
    height: auto;
  }
}
@media screen and (min-width: 960px) {
  .main {
    position: relative;
    margin: 0 auto;
  }
  #genki-syokudou img {
    max-width: 50%;
    height: auto;
  }
}
/*---------------------------------------
    Heading
---------------------------------------*/
#about h2,
#news h2 {
  position: relative;
  display: block;
  text-align: center;
  margin-bottom: 1em;
}
#about h2 span,
#news h2 span,
#access h2 span {
  display: block;
  font-weight: normal;
}
h1 span,
.floor-tenant h5 span,
h3.sec_f1-1 span,
h3.sec_f1-2 span,
h3.sec_f1-3 span,
.tenant h3 span  {
  display: block;
}

.floor-tenant h5 span {
  font-weight: normal;
  color: #fff;
  margin: 0 0 0 0;
  padding: 0.2em 0.5em;
  background-color: #0053A9;
}
#about h2::before {
  position: absolute;
  top: 35px;
  left: 20px;
  content: '';
  background-image: url('../images/kamome01.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 41px;
  height: 19px;

}
#about h2::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 77px;
  height: 75px;
  content: '';
  background-image: url('../images/sun.png');
  background-repeat: no-repeat;
  background-size: contain;
}
.news_box h4 {
  display: block;
  margin-bottom: 1em;
}
.floor-tenant h5 {
  margin: 0;
}
#ichiba-area h3.sec_f1-1 {
margin: 1em 0;
padding: 0.5em 1em;
color: #fff;
background-color: #005ca7;
}
.point h4 {
  background:#005ca7;
  color:#fff;
  padding:6px 20px;
}
.sec_f1-2 {
  margin: 1em 0;
  padding: 0.5em 1em;
  color: #fff;
  background-color: #00a73c;
}
.sec_f1-3 {
  margin: 1em 0;
  padding: 0.5em 1em;
  color: #fff;
  background-image:none;
  background-color: #20aee5;
}
#dining-area h2 {
  margin-bottom: 1em;
}
.sec_f2-2 {
  padding:0;
  text-align: center;
  width: 100%;
  height:auto;
  margin:40px auto 30px;
}
.caption-menu {
  padding: 0.5em 0;
  margin: 0;
  color: #005ca7;
}
.menu-name {
  width:100%;
  color: #ffffff;
  background: #3498db;
  margin: 0 0 0 0;
  text-align: center;
}
#access h2 {
  text-align: center;
  color: #0053A9;
}

.lower-title {
  display: block;
  width: 98%;
  text-align: center;
  letter-spacing: 0.2rem;
  margin: 0 auto 20px auto;
  color:#000;
  padding:30px 0px 10px 0px;
  border-bottom: 3px solid #00a0ff;
}
.lower-title span {
    display: block;
}
.bus-reserv h4 {
    margin: 0;
}
/*---------------------------------------
    Sections // ABOUT
---------------------------------------*/
#about {
  display: grid;
  row-gap: 0.5em;
  margin: 2em 0;
}
@media screen and (max-width: 512px) {
    #about .sub_txt {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1.3em;
        font-weight: bold;
    }
    #about .content {
        grid-row: 3 / 4;
    }
}
@media screen and (min-width: 513px) and (max-width: 959px) {
  #about {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 50px 1fr;
    column-gap: 1em;
  }
    #about h2 {
      grid-column: 1 / 3;
      grid-row: 1 / 1;
    }
      #about h2::before {
        top: 28px;
        left: 185px;
      }
      #about h2:after {
        top: -32px;
        right: 155px;
      }
    #about .sub_txt {
      grid-column: 1 / 3;
      grid-row: 2 / 2;
    }
    #about .images {
      grid-column: 1 / 2;
      grid-row: 3 / 3;
    }
    #about .content {
      grid-column: 2 / 2;
      grid-row: 3 / 3;
      font-size: 0.875em;
      line-height: 1.8;
      margin: 0;
    }
}
@media screen and (min-width: 960px) {
  #about {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 50px 1fr;
    column-gap: 1em;
  }
      #about h2 {
        grid-column: 1 / 3;
        grid-row: 1 / 1;
      }
      #about h2::before {
        top: 28px;
        left: 290px;
      }
      #about h2:after {
        top: -32px;
        right: 285px;
      }
      #about .sub_txt {
        grid-column: 1 / 3;
        grid-row: 2 / 2;
      }
      #about .images {
        grid-column: 1 / 2;
        grid-row: 3 / 3;
      }
      #about .content {
        grid-column: 2 / 2;
        grid-row: 3 / 3;
        font-size: 0.875em;
        line-height: 1.8;
        margin: 0;
      }
}
/*---------------------------------------
    Sections // Shop Ichiba
---------------------------------------*/
.floor_set {
  display: block;
  height: 125px;
  background-position: top center;
}
.floor_set h2 {
  background-color: #00a0ff;
  width: 100vw;
  color:#fff;
  position: relative;
  padding: 20px 0;
  margin: 0 0 0 calc(50% - 50vw);
  text-align: center;
  letter-spacing: 0.2rem;
}
  .floor_set h2 span {
      display: block;
      line-height: 1.8;
      font-weight: normal;
  }
  .floor_set h2:after{
      content:"";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 50px 50px 0 50px;
      border-color: #00a0ff transparent transparent transparent;
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -50px;
      z-index: 5;
  }
.point {
  background-color:#fffac6;
  border:1px solid #005ca7;
  border-radius: 0.5em;
}
  .point div {
    padding: 0 1em;
  }
  .point span {
    display: inline-block;
    font-size: 1.3em;
    font-weight: bold;
    color: #fff;
    padding: 3px 7px 2px 7px;
    margin: 0.5em 0;
    border-radius: 30px;
  }
    span.se01 { background:#ea6ba3; }
    span.se02 { background:#00a0ff; }
    span.se03 { background:#ed7b64; }
    span.se04 { background:#4a79aa; }

.floor-tenant {
  padding: 1em;
  text-align: center;
  border: #0053A9 2px solid;
  background-color: #e6f6ff;
}
  .line-title {
      width: 100%;
      margin: 1em 0;
      padding: 0.5em 1em;
      font-size: 120%;
      box-sizing: border-box;
      color: #fff;
      border-left: #000 25px solid;
      background-color: #3498db;
  }
@media screen and (max-width: 512px) {
  .floor_set {
    display: block;
    height: 125px;
    background-position: top center;
  }
    .floor_set h2 {
      background-color: #00a0ff;
      width: 100vw;
      color:#fff;
      position: relative;
      padding: 20px 0;
      margin: 0 0 0 calc(50% - 50vw);
      text-align: center;
      letter-spacing: 0.2rem;
    }
      .floor_set h2 span {
          display: block;
          line-height: 1.8;
          font-weight: normal;
      }
      .floor_set h2:after{
          content:"";
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 50px 50px 0 50px;
          border-color: #00a0ff transparent transparent transparent;
          display: block;
          position: absolute;
          left: 50%;
          margin-left: -50px;
          z-index: 5;
      }

  .ichiba-left picture {
      margin-bottom: 1em;
  }
  #ichiba-1f-sengyo {
    margin-bottom: 3em;
    display: grid;
    grid-template-rows: 135px 263px 165px 350px 640px 80px 320px;
    gap: 0.5em
  }
  .sec_f1-1 {
    grid-row: 1 / 2;
  }
  .ichiba-left {
    grid-row: 2 / 3;
  }
  .ichiba-right {
    grid-row: 3 / 4;
  }
  .point {
    grid-row: 4 / 5;
  }
  .sengyo {
    grid-row: 5 / 6;
    min-height: 640px;
    background-color: #eee;
  }
      .sengyo picture {
          display: block;
          width: 80%;
          height: auto;
          margin: 0 10% 1em 10%;
      }
  .ichiba-area .caption {
    grid-row: 6 / 7;
    font-size: 0.8em;
  }
  #ichiba-1f-omiyage .right,
  #ichiba-1f-omiyage p {
      margin: 0 0 1em 0;
  }
  .floor-tenant {
    grid-row: 7 / 8;
      padding: 1em;
      margin: 1em auto;
  }

  .section_lead {
      text-align: center;
      color:#00a0ff;
  }
  .menu-box {
      padding: 1em;
      margin: 0 0 0 0;
  }
  .menu-box p {
      padding-bottom: 1em;
      border-bottom: #0053A9 1px solid;
  }

  .flex-center {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
      .harf {
          position: relative;
          width: 48%;
          margin: 0 0 1em 0;
          padding: 0.5em;
          box-sizing: border-box;
          text-align: center;
          background: #ebf6fc;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }
  .menu-txt {
      width: 100%;
      margin: 0 0 1em 0;
      padding: 0.5em 0;
      background-color: #fff;
  }
    .menu-txt p {
      margin: 0;
      padding: 0;
    }
  .att {
      display: block;
      width: 100%;
      font-size: 0.9em;
      text-align: center;
      margin: 0;
      background: #ebf6fc;
  }

  .color_frame {
      width: 100%;
      padding: 1em;
      margin: 2em 0;
      box-sizing: border-box;
      background: #c7ecff;
  }
  .sec_box_quarter,
  .sec_box_harf {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
  }
  .sec_box_harf div {
      margin-bottom: 2em;
  }
}
@media screen and (min-width: 513px) and (max-width: 959px) {
  .floor_set h2 {
    margin: 0 0 0 calc(49% - 50vw);
  }
  #ichiba-1f-sengyo {
    margin-bottom: 3em;
    display: grid;
    grid-template-rows: 135px 245px 140px 156px 30px 200px;
    gap: 0.5em
  }

    h3.sec_f1-1 {
      grid-row: 1 / 1;
      grid-column: 1 / 3;
    }
    .ichiba-left {
      grid-row: 2 / 2;
      grid-column: 1 / 2;
    }
    .ichiba-right {
      grid-row: 2 / 2;
      grid-column: 2 / 3;
    }
    .point {
      grid-row: 3 / 3;
      grid-column: 1 / 3;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 0.9em;
      padding: 1em;
    }
      .point h4 {
        display: block;
        width: 100%;
        height: 30px;
        text-align: center;
        margin: 0;
      }
      .point div {
        max-width: 30%;
      }
        .point div:nth-child(5) {
          max-width: 32%;
        }
        .point div span {
          font-size: 1.0em;
        }
    .sengyo {
      grid-row: 4 / 4;
      grid-column: 1 / 3;
      display: flex;
      justify-content: space-between;
    }
      .sengyo picture {
        width: 100%;
        height: auto;
        margin: 0 1em 0 0;
      }
        .sengyo picture:nth-child(3) {
          margin: 0 0 0 0;
        }
    .caption {
      grid-row: 5 / 5;
      grid-column: 1 / 3;
      padding: 0;
      margin: 0;
    }
    .floor-tenant {
      grid-row: 6 / 6;
      grid-column: 1 / 3;
      width: 70%;
      margin: 0 15%;
      line-height: 1.8;
    }
      .floor-tenant p {
        margin: 0;
      }
      .floor-tenant h5 span {
        display: inline;
        margin: 0 0 0 1em;
      }
  #ichiba-1f-yasai {
    display: grid;
    gap: 0.5em;
  }
    #ichiba-1f-yasai h3.sec_f1-2 {
      grid-row: 1 / 1;
      grid-column: 1 / 3;
    }
    #ichiba-1f-yasai .img_wrap {
      grid-row: 2 / 2;
      grid-column: 1 / 3;
      display: flex;
      justify-content: space-between;
    }
      #ichiba-1f-yasai .img_wrap picture:nth-child(1) {
        margin-right: 1em;
      }
    #ichiba-1f-yasai p {
      grid-row: 3 / 3;
      grid-column: 1 / 3;
      margin: 0;
    }

  #ichiba-1f-omiyage {
    display: grid;
    gap: 0.5em;
  }
    #ichiba-1f-omiyage h3.sec_f1-3 {
      grid-row: 1 / 1;
      grid-column: 1 / 3;
    }
    #ichiba-1f-omiyage .img_wrap {
      grid-row: 2 / 2;
      grid-column: 1 / 2;
    }
    #ichiba-1f-omiyage .right {
      grid-row: 2 / 2;
      grid-column: 2 / 3;
    }
    #ichiba-1f-omiyage .img-box {
      grid-row: 3 / 3;
      grid-column: 1 / 3;
      display: flex;
      justify-content: space-between;
    }
      #ichiba-1f-omiyage .img-box .img_wrap {
        margin-right: 1em;
      }
      #ichiba-1f-omiyage .img-box .img_wrap:nth-child(3) {
        margin-right: 0;
      }
    #ichiba-1f-omiyage p {
      grid-row: 4 / 4;
      grid-column: 1 / 3;
      margin: 0;
      line-height: 1.8;
    }
}
@media screen and (min-width: 960px) {
  #ichiba-1f-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
    h2#ichiba-1f {
      grid-row: 1 / 1;
      grid-column: 1 / 3;
    }
      .floor_set h2 {
        margin: 0 calc(49% - 50vw) 0 calc(49% - 50vw);
        width: 100vw;
      }
    #ichiba-1f-sengyo {
      margin-bottom: 4em;
      display: grid;
      grid-template-rows: 215px 380px 88px 250px 30px 240px;
      gap: 0.5em
    }
      #ichiba-1f-sengyo h3.sec_f1-1 {
        grid-row: 1 / 1;
        grid-column: 1 / 3;
        background-image: url("../images/shop/f1-1_ttl_bg.png");
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: contain;
        font-size:1.8rem;
        font-weight: bold;
        padding: 87px 0px 0px 90px;
        position: relative;
      }
      #ichiba-1f-sengyo h3.sec_f1-1 span {
          display: block;
          color:#000;
          position: absolute;
          top: 0.8rem;
          left: 164px;
          font-size:1.8rem;
          font-weight: bold;
      }
    .ichiba-left {
      grid-row: 2 / 3;
      grid-column: 1 / 1;
    }
    .ichiba-right {
      grid-row: 2 / 3;
      grid-column: 2 / 3;
      padding: 1.5em 1em;
    }
    .point {
      grid-row: 3 / 3;
      grid-column: 1 / 3;

      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      font-size: 0.9em;
      margin: 0 0;
      padding: 1em 2em;
    }
      .point h4 {
        display: block;
        text-align: center;
        font-size: 1.5em;
        padding: 0.5em 1em;
        margin: 0;
      }
      .point div {
        max-width: 30%;
      }
        .point div span {
          font-size: 1.5em;
        }
    .sengyo {
      grid-row: 4 / 4;
      grid-column: 1 / 3;
      display: flex;
      justify-content: space-between;
    }
      .sengyo picture {
        width: 100%;
        height: auto;
        margin: 0 1em 0 0;
      }
        .sengyo picture:nth-child(3) {
          margin: 0 0 0 0;
        }
    .caption {
      grid-row: 5 / 5;
      grid-column: 1 / 3;
      padding: 0;
      margin: 0;
    }

    .floor-tenant {
      grid-row: 6 / 6;
      grid-column: 1 / 3;
      width: 70%;
      margin: 0 15%;
      line-height: 1;
    }
      .floor-tenant h5 span {
        display: inline;
        margin: 0 0 0 1em;
      }
      .section_lead {
          font-size: 1.3em;
      }
  #ichiba-1f-yasai {
    margin-bottom: 4em;
    display: grid;
    grid-template-rows: 165px 380px 50px;
    gap: 0.5em
  }
    #ichiba-1f-yasai h3.sec_f1-2 {
      grid-row: 1 / 1;
      grid-column: 1 / 3;
      background-image: url("../images/shop/f1-2_ttl_bg.png");
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: contain;
      font-size:1.8rem;
      font-weight: bold;
      padding:87px 0px 0px 90px;
      position: relative;
      margin: 0;
    }
      #ichiba-1f-yasai h3.sec_f1-2 span {
          display: block;
          color:#000;
          position: absolute;
          top: 0.8rem;
          left: 164px;
          font-size:1.8rem;
          font-weight: bold;
      }
    #ichiba-1f-yasai .img_wrap {
      grid-row: 2 / 2;
      grid-column: 1 / 3;
      display: flex;
      justify-content: space-between;
    }
      #ichiba-1f-yasai .img_wrap picture:nth-child(1) {
        margin-right: 1em;
      }
    #ichiba-1f-yasai p {
      grid-row: 3 / 3;
      grid-column: 1 / 3;
      font-size: 80%;
    }

  #ichiba-1f-omiyage {
    margin-bottom: 4em;
    display: grid;
    grid-template-rows: 175px 395px 235px 50px;
    gap: 0.5em;
  }
    #ichiba-1f-omiyage h3.sec_f1-3 {
      grid-row: 1 / 1;
      grid-column: 1 / 3;
      background-image: url("../images/shop/f1-3_ttl_bg.png");
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: contain;
      font-size:1.8rem;
      font-weight: bold;
      padding:87px 0px 0px 90px;
      margin: 0;
      position: relative;
    }
      #ichiba-1f-omiyage h3.sec_f1-3 span {
          display: block;
          color:#000;
          position: absolute;
          top: 0.8rem;
          left: 164px;
          font-size:1.8rem;
          font-weight: bold;
      }
    #ichiba-1f-omiyage .img_wrap {
      grid-row: 2 / 2;
      grid-column: 1 / 2;
    }
    #ichiba-1f-omiyage .right {
      grid-row: 2 / 2;
      grid-column: 2 / 3;
    }
    #ichiba-1f-omiyage .img-box {
      grid-row: 3 / 3;
      grid-column: 1 / 3;
      display: flex;
      justify-content: space-between;
    }
      #ichiba-1f-omiyage .img-box .img_wrap {
        margin-right: 1em;
      }
      #ichiba-1f-omiyage .img-box .img_wrap:nth-child(3) {
        margin-right: 0;
      }
    #ichiba-1f-omiyage p {
      grid-row: 4 / 4;
      grid-column: 1 / 3;
      font-size: 80%;
    }
}
/*---------------------------------------
    Sections // Dinning Genki Shokudou
---------------------------------------*/
.sec_f2-2 img {
  width: 100%;
  height: auto;
}
.section_lead {
  color: #00a0ff;
  text-align: center;
}
.menu-set .menu-box picture,
.menu-set .menu-box img {
  width: 100%;
  height: auto;
  max-height: 217px;
  overflow: hidden;
}
.menu-set {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#dining-area,
#menu-area,
#terrace-area {
  margin: 2em 0;
}
#takeout-menu {
  margin: 2em auto;
}
#takeout-menu .flex-center {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 513px) and (max-width: 959px) {
  #dining-area .img_wrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
    #dining-area .img_wrap div {
      width: 49%;
    }

  .menu-set {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
    .menu-set::after {
      content: "";
      width: 33%;
    }
    .menu-set .menu-box {
      width: 32%;
      padding: 0
    }
      .menu-set .menu-box p {
        font-size: 0.8em;
        border: none;
      }
#takeout-menu .flex-center {
  justify-content: center;
}
  #takeout-menu .harf {
    width: 40%;
  }
  #takeout-menu .flex-center .att {
    width: 80%;
    margin: 0 10%;
  }
  .sec_box_quarter,
  .sec_box_harf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-items: stretch;
  }
    .sec_box_harf div {
      width: 48%;
      height: auto;
    }
    .menu-txt {
      font-size: 0.9em;
    }
    .harf {
      width: 25%;
    }
.sec_box,
.sec_box_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1em;
}
  .sec_box .left,
  .sec_box .right {
    width: 49%;
  }

  #dining-area .img_wrap,
  #terrace-area .img_wrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
    #dining-area .img_wrap div,
    #terrace-area .img_wrap div {
      width: 49%;
    }
}
@media screen and (min-width: 960px) {
  #dining-area .img_wrap,
#terrace-area .img_wrap {
  display: flex;
  justify-content: space-between;
}
  #dining-area .img_wrap div img,
  #terrace-area .img_wrap div img {
    width: 98%;
    margin: 0 1%;
  }
  #terrace-area .sec_txt_box {
    font-size: 1.2em;
  }
    #terrace-area .sec_txt_box h4 {
      margin: 0;
    }
    h3.sec_f2-2 {
        width: 65%;
    }

    .menu-set::after {
      content: "";
      width: 33%;
    }
    .menu-set .menu-box {
      width: 32%;
      padding: 0
    }
      .menu-set .menu-box p {
        font-size: 0.8em;
        border: none;
      }
#takeout-menu .flex-center {
  justify-content: center;
}
  #takeout-menu .harf {
    width: 30%;
  }
  #takeout-menu .flex-center .att {
    width: 60%;
    margin: 0 20%;
  }
  .sec_box_quarter,
  .sec_box_harf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-items: stretch;
  }
    .sec_box_harf div {
      width: 48%;
      height: auto;
    }
    .menu-txt {
      font-size: 0.9em;
    }
    .sec_box_quarter span,
    .sec_box_harf span {
      display: block;
      width: 100%;
    }
    .harf {
      width: 25%;
      margin: 0;
    }
.sec_box,
.sec_box_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1em;
}
  .sec_box .left,
  .sec_box .right {
    width: 49%;
  }
}
/*---------------------------------------
    Sections // News
---------------------------------------*/
  .post-categories {
    margin: 0;
    padding: 0;
  }
  .btn_new {
      position: absolute;
      bottom: 0;
  }
  .btn_more {
      background: #4F81BD;
      display: block;
      padding: 0.5em 2em;
      margin: 1em auto;
      text-align: center;
      width: 80%;
  }
  .btn_more a {
      color: #fff;
      display: block;
  }
/*---------------------------------------
    Sections // Ichiba Now
---------------------------------------*/
#ichiba-now-area {
  position: relative;
  width: 100vw;
  min-height: 560px;
  padding-top: 156px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: url('../images/topics_bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}
  #ichiba-now-area::before {
    display: inline-block;
    position: absolute;
    content: '';
    top: 0;
    left: 5%;
    background-image: url('../images/ship01.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 150px;
    height: 156px;
  }
  #ichiba-now-area .inner {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
  }
  .ichiba-now-title,
  .recommend-title {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
  }
  #ichiba-now-area #pageplugin iframe {
    max-width: 500px;
    width: 100%;
    height: 500px;
    background-color: #fff;
  }
@media screen and (max-width: 512px) {
  /* Recommend Area */
#ichiba-now-area {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding:7.5em 0.5em 2em 0;
}
  #ichiba-now-area::before {
      top: -20px;
      left: 15px;
  }
      #ichiba-now-area .inner {
          flex-direction: column;
      }
      #ichiba-now-area .left,
      #ichiba-now-area .right {
          width: 100%;
      }
      .ichiba-now-title,
      .recommend-title {
          width: 100%;
          margin: 0;
          padding: 1em 1em;
      }
          .ichiba-now-title img.ichiba-now-ima {
              max-width: 60%;
              height: auto;
          }
              .ichiba-now-title img.ichiba-now-fb {
                  width: 30%;
              }
      #ichiba-now-area #pageplugin {
          height: 500px;
          margin: 0 auto;
          background-color: #eee;
      }
          #ichiba-now-area #pageplugin iframe {
              width: 100%;
              height: 500px;
              margin: 0;
              padding: 0;
          }

      a button.pickup-btn {
          display: inline-block;
          width: 70%;
          margin: 1em 15% 0 15%;
          padding: 1em;
          background-color: #fff;
          border: #000 4px solid;
          text-align: center;
          opacity: 1.0;
      }
          a button.pickup-btn:hover {
              background-color: #000;
              color: #fff;
              border: #fff 4px solid;
              opacity: 1.0;
          }
          /* PickUp */
          #ichiba-now-area iframe body {
              border-top: none;
          }
          #colorme-item-list {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              width: 100%;
              margin: 1em 0;
              padding: 0;
              background-color: #fff;
          }
              #colorme-item-list .item-frame {
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  justify-content: space-between;
                  width: 90%;
                  margin: 0 5% 2em 5%;
                  padding: 0 0 1em 0;
                  border-bottom: #eee 2px solid;
              }
                  #colorme-item-list .item-frame .item-img-box {
                      width: 100%;
                  }
                      #colorme-item-list .item-frame .item-img-box img {
                          max-width: 100%;
                          height: auto;
                      }
                  #colorme-item-list .item-frame .item-txt-box {
                      width: 100%;
                      margin-top: 1em;
                  }

              #colorme-item-list .content {
                  width: 275px;
                  margin-top: 5px;
                  min-height: 77px;
              }
              #colorme-item-list .content p {
                  font-size: 14px;
                  line-height: 1.5;
              }
              #colorme-item-list .item-frame .item-txt-box .title {
                  display: block;
                  background: #FFF462;
                  border-radius: 6px;
                  border: solid 1px;
                  color: #000;
                  font-size: 150%;
                  font-weight: 600;
                  letter-spacing: 0px;
                  padding: 3px 8px;
              }
          #colorme-item-list .item-frame .item-txt-box .price {
              display: block;
              font-size: 150%;
              font-weight: 600;
              color: red;
              margin-top: 5px;
              padding: 0 0 0 1em;
              margin: 0.5em 0;
          }
              #colorme-item-list .item-frame .item-txt-box .price .tax-in {
                  font-size: 80%;
              }
              #colorme-item-list .item-txt-box .explanation {
                  padding: 0.5em;
                  border: #ddd 1px solid;
                  border-radius: 10px;
              }
              #colorme-item-list .item-frame .item-txt-box .explanation h2 {
                  font-size: 100%;
                  padding: 0 0 0 8px;
                  border-bottom: #ddd 3px solid;
              }
              #colorme-item-list .item-frame .item-txt-box .explanation br {
                  display: none;
              }
              #colorme-item-list .item-frame .item-txt-box .explanation .details  {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  width: 100%;
                  margin: 1em 0 0 0;
              }
                  #colorme-item-list .item-frame .item-txt-box .explanation .details dt  {
                      width: 20%;
                      margin: 0 0 0.5em 0;
                      padding: 0.2em;
                      box-sizing: border-box;
                      text-align: center;
                      background-color: #eee;
                  }
                  #colorme-item-list .item-frame .item-txt-box .explanation .details dd  {
                      width: 80%;
                      text-align: left;
                      margin: 0 0 0.5em 0;
                      padding: 0.2em 0.2em 0.2em 0.5em;
                      box-sizing: border-box;
                  }
              #colorme-item-list .item-frame .item-txt-box .btn {
                  border: solid 1px #000;
                  border-radius: 3px;
                  background: #000;
                  color: #fff;
                  text-align: right;
                  letter-spacing: normal;
                  padding: 8px 16px;
                  margin-top: 16px;
              }
                  #colorme-item-list .item-frame .item-txt-box .btn:hover {
                      background: #fff;
                      color: #000;
                  }
}
@media screen and (min-width: 513px) and (max-width: 959px) {
  /* Recommend Area */
  #pickup-area::before {
    top: -30px;
    left: 20px;
  }
  .recommend-title-img {
    width: 60%;
    height: auto;
  }
    .recommend-title img.pickup {
        width: 20%;
    }
    a button.pickup-btn {
      width: 90%;
      margin: 1em 5% 0 5%;
  }

  /* Ichiba Now Facebook */
  #ichiba-now-area .inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
  }
  #ichiba-now-area .left,
  #ichiba-now-area .right {
      width: 49%;
  }
  .ichiba-now-title {
    margin: 0 auto;
  }
    #ichiba-now #pageplugin {
      width: 500px;
      margin: 1em auto 2em auto;
    }
    .banner-now {
      max-width: 500px;
      height: auto;
      margin: 0 auto;
  }
      .banner-now img {
          max-width: 500px;
          height: auto;
      }
}
@media screen and (min-width: 960px) {
  #ichiba-now-area {
    width: 100vw;
    margin: 0 calc(49% - 50vw) 2em calc(49% - 50vw);
    padding: 10em 0 2em 0;
    background: url('../images/topics_bg.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
  }
    #ichiba-now-area::before {
      top: -30px;
      left: 310px;
      width: 175px;
      height: 156px;
    }
    #ichiba-now-area .inner {
      flex-direction: row;
        margin: 0 auto;
        padding: 0;
        width: 1080px;
      }
        #colorme-item-list .item-frame .item-txt-box .explanation .details  {
          flex-direction: row;
        }

  .ichiba-now-title,
  .recommend-title {
    width: 500px;
    height: 67px;
    margin: 0 auto;
  }
    #ichiba-now-area .left,
  #ichiba-now-area .right {
      width: 49%;
  }
    .ichiba-now-title img.ichiba-now-ima {
      max-width: 189px;
      height: auto;
    }
    .recommend-title .recommend-title-img {
      max-width: 215px;
      height: auto;
    }
    .recommend-title .pickup {
      max-width: 104px;
      height: auto;
    }
  #ichiba-now-area #pageplugin {
    width: 500px;
    height: 500px;
    margin: 0 auto;
  }

    .banner-now {
      max-width: 536px;
      height: auto;
      margin: 0 auto;
    }
      .banner-now img {
          max-width: 536px;
          height: auto;
      }
}
/*---------------------------------------
    Sections // Access
---------------------------------------*/
#access {
  display: grid;
}
  #access img {
    width: 100%;
    height: auto;
  }
  #access figcaption {
    color: #0053A9;
  }
  dl.att_trans {
    display: flex;
    flex-wrap: wrap;
  }
    #access dl.att_trans dt img {
      width: 80%;
    }
    #access dl.att_trans dd p {
      font-size: 0.9em;
      margin: 0;
    }
  a.btn-googlemap {
    display: block;
    text-align: center;
    font-size: 120%;
    font-weight: 900;
    color: #fff;
    margin: 0.5em 0;
    padding: 0.5em 2em;
    border: #DF014A 2px solid;
    border-radius: 2em;
    background-color: #DF014A;
}
    a.btn-googlemap:hover {
        opacity: 1.0;
        color: #DF014A;
        background-color: #fff;
    }
    a.btn-parking-res {
      display: block;
      text-align: center;
      margin: 1em auto;
      padding: 0.5em 2em;
      color: #0053A9;
      font-size: 120%;
      font-weight: 900;
      border: #0053A9 2px solid;
      border-radius: 2em;
      background-color: #fff;
  }
      a.btn-parking-res:hover {
          opacity: 1.0;
          color: #fff;
          background-color: #0053A9;
      }
      dl.bittable dt strong {
        font-weight: 400;
        color: #0053A9;
        margin-right: 1em;
    }
    .bh-area {
      width: 100%;
      height: auto;
      padding: 0.5em 0 1em 0;
      margin: 0.5em 0 0.5em 0;
      box-sizing: border-box;
      border-top: #0053A9 1px solid;
      border-bottom: #0053A9 1px solid;
    }
    hr.horizon {
      height: 0;
      margin: 1.5em 0;
      padding: 0;
      border-top: #0053A9 1px solid;
  }
  .bistime {
      display: block;
      width: 100%;
      color: #0053A9;
      font-size: 120%;
      font-weight: 700;
      text-align: left;
      line-height: 90%;
      margin: 0.8em 0 0.5em 0;
  }

@media screen and (max-width: 512px) {
  #access div:nth-child(2) {
    margin: 0 0 1em 0;
}
#access div:nth-child(3) {
    margin: 0 0 1em 0;
}
    #access div:nth-child(3) p.google {
        margin: 0 0 0 0;
    }
#access div:nth-child(4) {
    margin: 0 0 1em 0;
  }
      #access div:nth-child(4) a {
          display: block;
      }
  dl.att_trans {
      width: 100%;
      margin: 1em 0;
      padding: 1em 0;
      border-top: #0053A9 1px solid;
  }
      dl.att_trans dt {
          width: 15%;
          box-sizing: border-box;
          vertical-align: top;
          margin: 0;
          padding: 0;
      }
      dl.att_trans dd {
          width: 85%;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }
      dl.att_trans dd p {
          font-size: 0.9em;
          margin: 0;
      }
      .parking p {
          padding: 0;
          margin: 0.5em 0;
      }
      .bittable dd {
          margin: 0 0 0 1em;
      }
      dl.bittable dt {
          width: 100%;
          font-weight: 600;
      }
      dl.bittable dd {
          box-sizing: border-box;
          padding: 0 0 0.5em 0;
      }
  .pet-area {
      padding: 0.2em 0 1em 0;
  }
}
@media screen and (min-width: 513px) and (max-width: 959px) {
  #access {
    grid-template-rows: repeat(45, 45px);
    column-gap: 2em;
    align-content: start;
  }
  #access div {
    display: inline-block;
  }
  #access h2 {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    margin-bottom: 1em;
  }
  #access div:nth-child(2) {
    grid-row: 3 / 9;
    grid-column: 1 / 2;
  }
  #access div:nth-child(3) {
    grid-row: 9 / 15;
    grid-column: 1 / 2;
  }
  #access div:nth-child(4) {
    grid-row: 15 / 17;
    grid-column: 1 / 2;
  }
    #access div:nth-child(4) a {
      display: block;
      margin: 0 0;
    }
  #access div:nth-child(5) { /* 周辺地図 */
     grid-row: 17 / 25;
     grid-column: 1 / 2;
  }
  #access dl.att_trans {
    grid-row: 3 / 13;
    grid-column: 2 / 3;
    flex-wrap: wrap;
    width: 100%;
    height: 400px;
    margin: 0;
  }
    #access dl.att_trans dt {
      width: 10%;
      padding: 0;
      margin: 0;
    }
    #access dl.att_trans dd {
        width: 90%;
        font-size: 1.1em;
        margin: 0;
    }
    #access dl.att_trans dd figcaption {
      font-size: 1.2em;
    }
   #access div.parking {
     grid-row: 13 / 21;
     grid-column: 2 / 3;
   }
   #access div.parking-reserv {
     grid-row: 21 / 25;
     grid-column: 2 / 3;
   }
   #access .bh-area {
     grid-row: 25 / 39;
     grid-column: 1 / 3;
     border-top: none;
     margin: 0 0 0 0;
     padding: 1em 0;
     border-top: #0053A9 1px solid;
   }
      #access .bh-area .bittable {
        margin-bottom: 0;
      }
      #access .bh-area p {
        margin-top: 0;
      }
    .pet-area {
      grid-row: 39 / 45;
      grid-column: 1 / 3;
      border-top: none;
    }
}
@media screen and (min-width: 513px) {
  #access {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 960px) {
  #access {
    grid-template-rows: repeat(32, 45px);
    column-gap: 2em;
    row-gap: 0.5em;
    place-items: start normal;
  }
    #access h2 { /* Title */
      grid-row: 1 / 3;
      grid-column: 1 / 3;
    }
    #access div:nth-child(2) { /* かわまち駐車場外観写真 */
      grid-row: 3 / 11;
      grid-column: 1 / 2;
    }
    #access div:nth-child(3) { /* 石巻駅からの概要地図 */
      grid-row: 11 / 19;
      grid-column: 1 / 2;
    }
    #access div:nth-child(4) { /* GoogleMapsリンク */
      grid-row: 19 / 21;
      grid-column: 1 / 2;
    }
    #access div:nth-child(5) { /* 周辺地図 */
      grid-row: 21 / 31;
      grid-column: 1 / 2;
    }

    #access dl.att_trans {
      grid-row: 3 / 8;
      grid-column: 2 / 3;
      flex-wrap: wrap;
      width: 100%;
      margin: 0;
    }
      #access dl.att_trans dt {
        width: 10%;
        padding: 0;
        margin: 0 0 1em 0;
      }
      #access dl.att_trans dd {
        width: 90%;
        margin: 0 0 1em 0;
      }
    #access div.parking {
      grid-row: 8 / 13;
      grid-column: 2 / 3;
    }
    #access div.parking-reserv {
      grid-row: 13 / 16;
      grid-column: 2 / 3;
    }
    #access .bh-area {
      grid-row: 16 / 27;
      grid-column: 2 / 3;
      border-top: none;
      margin: 0 0 0 0;
      padding: 1em 0;
    }
      #access .bh-area .bittable {
        margin-bottom: 0;
      }
      #access .bh-area p {
        margin-top: 0;
      }
    .pet-area {
      grid-row: 27 / 31;
      grid-column: 2 / 3;
      border-top: none;
    }
}
/*---------------------------------------
    Sections // Public Banner
---------------------------------------*/
#public-banner {
  display: flex;
}
  #public-banner a img {
    display: block;
  }
.flex-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
  .flex-box a img {
    margin: 0 auto 1em auto;
  }
@media screen and (max-width: 512px) {
  #public-banner {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
    #public-banner a img {
        width: 80%;
        margin: 0 auto 1em auto;
    }
}
@media screen and (min-width: 513px) {
  #public-banner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
  }
    #public-banner a img {
      width: calc(100% - 1em);
      margin: 0 0 0 0;
    }
}
@media screen and (min-width: 960px) {
  #public-banner {
    flex-wrap: nowrap;
  }
}