@charset "UTF-8";
/*---------------------------------------------------------------/
　Copyright © NAGANO CITY
/---------------------------------------------------------------*/
::-webkit-scrollbar {
  width: 8px; }

::-webkit-scrollbar-track {
  border-radius: 4px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: red;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }

@media (min-width: 960px) and (hover: hover) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default; } }
html {
  scrollbar-color: red white; }

body {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 500; }

.container {
  padding: 0 1rem; }
  .container.narrow {
    padding: 0 6rem; }
    @media screen and (max-width: 960px) {
      .container.narrow {
        padding: 0 1rem; } }
  .container + .container {
    margin-top: 4rem; }
    @media screen and (max-width: 960px) {
      .container + .container {
        margin-top: 2rem; } }

img {
  display: block;
  margin: auto; }

.fit {
  width: 100%; }

.half {
  width: 49%; }
  @media screen and (max-width: 960px) {
    .half {
      width: 100%; } }

.one-third {
  width: 32%; }
  @media screen and (max-width: 960px) {
    .one-third {
      width: 100%; } }

.quarter {
  width: 23.5%; }
  @media screen and (max-width: 960px) {
    .quarter {
      width: 100%; } }

.quarter3 {
  width: 74.5%; }
  @media screen and (max-width: 960px) {
    .quarter3 {
      width: 100%; } }

.flex {
  display: flex;
  flex: none; }

.breadcrumb {
  max-width: 100%;
  padding: 2rem 0;
  margin: 0;
  font-size: 0.85rem; }
  .breadcrumb ul li {
    display: inline; }
    .breadcrumb ul li a {
      color: #333; }
      .breadcrumb ul li a:hover {
        text-decoration: underline; }
    .breadcrumb ul li + li:before {
      content: '＞';
      margin: 0 10px; }

.btn {
  display: inline-block;
  background-color: #FFF;
  border: 1px solid #CCC;
  padding: 0.5rem 3rem;
  text-align: center;
  max-width: 100%;
  margin: 0.3rem;
  margin-top: 2em;
  border-radius: 5px;
  font-size: 1em;
  font-weight: 600;
  transition: 1s; }
  .btn:hover, .btn:focus {
    color: #F4000C; }

.table {
  display: table;
  width: 100%; }
  @media screen and (max-width: 960px) {
    .table {
      display: block;
      width: 100%; } }
  .table ul {
    display: table-row; }
    @media screen and (max-width: 960px) {
      .table ul {
        display: block;
        width: 100%; } }
    .table ul li {
      display: table-cell; }
      @media screen and (max-width: 960px) {
        .table ul li {
          display: block;
          width: 100%; } }

.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1500ms; }

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

footer .f_bannar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 3rem 0; }
  @media screen and (max-width: 960px) {
    footer .f_bannar {
      padding: 1rem; } }
  footer .f_bannar a {
    display: block;
    margin: 1rem;
    width: 250px; }
    footer .f_bannar a img {
      width: 100%; }
    @media screen and (max-width: 960px) {
      footer .f_bannar a {
        margin: 0.5rem 1rem; } }
footer .footer {
  background-color: #484848;
  color: #FFF;
  padding: 3rem 0; }
  @media screen and (max-width: 960px) {
    footer .footer {
      padding: 1rem 0; } }
  footer .footer a {
    color: #FFF;
    font-size: 0.9rem; }
    footer .footer a:hover {
      text-decoration: underline; }
  footer .footer .logo {
    width: 220px;
    max-width: 100%;
    margin: auto; }
    @media screen and (max-width: 960px) {
      footer .footer .logo {
        width: 100%; } }
    footer .footer .logo img {
      display: block;
      width: 100%;
      margin: auto; }
  footer .footer .navi {
    width: 40%; }
    @media screen and (max-width: 960px) {
      footer .footer .navi {
        width: 100%; } }
    footer .footer .navi ul {
      display: flex;
      justify-content: flex-start;
      flex: none;
      flex-wrap: wrap; }
      @media screen and (max-width: 960px) {
        footer .footer .navi ul {
          justify-content: center;
          margin: 2rem auto; } }
      footer .footer .navi ul li {
        margin: 0;
        font-size: 0.9rem;
        white-space: nowrap; }
        footer .footer .navi ul li a {
          display: block;
          padding: 0.5rem 1rem; }
          @media screen and (max-width: 960px) {
            footer .footer .navi ul li a {
              padding: 0.5rem 1rem; } }
          footer .footer .navi ul li a:hover {
            background-color: rgba(0, 0, 0, 0.1); }
          footer .footer .navi ul li a span {
            display: block;
            font-size: 0.8rem; }
  footer .footer .sns ul {
    display: flex;
    justify-content: center;
    flex: none; }
    footer .footer .sns ul li {
      width: 30px;
      margin: 0 0 0 0.5rem; }
      footer .footer .sns ul li img {
        width: 100%; }
  footer .footer .link {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap; }
    footer .footer .link a {
      width: 40%;
      border-radius: 10px;
      padding: 2rem 3rem 2rem 1rem;
      background-color: #FFF;
      font-weight: 600;
      color: #000;
      position: relative;
      text-align: center;
      margin: 0 0.7rem; }
      @media screen and (max-width: 960px) {
        footer .footer .link a {
          width: 100%;
          border-radius: 6px;
          padding: 1rem 3rem 1rem 1rem;
          margin: 0; }
          footer .footer .link a + a {
            margin-top: 1rem; } }
      footer .footer .link a::after {
        content: '';
        display: block;
        width: 1rem;
        height: 1rem;
        background-image: url("../images/chevron_gray.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0;
        margin: auto; }
      footer .footer .link a:hover {
        text-decoration: none;
        background-color: #DDD; }
  footer .footer .address {
    font-size: 0.9rem;
    margin: 2rem 0 0 0;
    text-align: center; }
    @media screen and (max-width: 960px) {
      footer .footer .address {
        text-align: left;
        margin: 1rem 0 0 0; } }
  footer .footer .copy {
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    margin: 3rem 0 0 0;
    text-align: center;
    font-weight: 300; }
    @media screen and (max-width: 960px) {
      footer .footer .copy {
        margin: 2rem 0 0 0; } }

/*---------------------------------------------------------------/
　Copyright © NAGANO CITY
/---------------------------------------------------------------*/
/* ==========================================================================
Global Navigation
========================================================================== */
.header {
  display: block;
  padding: 1rem;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 999999;
  /*.navigation {
  display: block;
  width: $large-screen;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
  }*/ }

.head-flex {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  align-items: center;
  flex: none; }
  @media screen and (max-width: 960px) {
    .head-flex {
      justify-content: space-between; } }
  .head-flex li.sp {
    display: none; }
    @media screen and (max-width: 960px) {
      .head-flex li.sp {
        display: block; } }

.navi-flex {
  display: flex;
  width: 96%;
  margin: auto;
  padding: 0 0 0 3%;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 960px) {
    .navi-flex {
      display: block;
      width: 100%; } }
  .navi-flex > li:nth-child(1) {
    flex-grow: 1; }
  .navi-flex > li:nth-child(2) {
    flex-grow: 0;
    padding-left: 4rem; }
  .navi-flex > li.pc {
    display: block; }
    @media screen and (max-width: 960px) {
      .navi-flex > li.pc {
        display: none; } }

.point {
  display: inline-block;
  padding: 0.8rem;
  width: 13em;
  max-width: 100%;
  text-align: center;
  background-color: #27A125;
  color: #FFF;
  font-weight: 600;
  border-radius: 2em; }
  .point:hover {
    background-color: #02CD00; }
  @media screen and (max-width: 960px) {
    .point {
      padding: 0.8rem;
      width: 9em; } }

.header .logo a {
  display: block;
  padding: 0;
  margin: 0;
  width: 200px;
  height: 70px; }
  @media screen and (max-width: 960px) {
    .header .logo a {
      width: 150px; } }
  .header .logo a h1 {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
    .header .logo a h1 span {
      display: none; }
.header .lead {
  margin-left: 2rem;
  font-weight: 600;
  font-size: 1rem;
  display: none; }
  #home .header .lead {
    display: block; }
    @media screen and (max-width: 960px) {
      #home .header .lead {
        display: none; } }

.header-nav {
  display: block;
  background-color: #F4F2EF;
  border-radius: 4em;
  margin: 1rem 0 0 0;
  position: relative; }
  @media screen and (max-width: 960px) {
    .header-nav {
      display: none;
      margin: 0;
      border-radius: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      padding: 20px;
      position: fixed;
      overflow-y: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
      .header-nav.open {
        display: block; } }
  #home .header-nav {
    background-color: #FFF; }
    @media screen and (max-width: 960px) {
      #home .header-nav {
        background-color: #F4F2EF; } }

ul.primary-nav {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  @media screen and (max-width: 960px) {
    ul.primary-nav {
      display: block;
      margin-top: 60px;
      border-bottom: 1px dotted #CCC; } }
  ul.primary-nav > li {
    display: block;
    white-space: nowrap;
    margin: 0;
    padding: 0; }
    ul.primary-nav > li.sp {
      display: none; }
      @media screen and (max-width: 960px) {
        ul.primary-nav > li.sp {
          display: block; } }
    ul.primary-nav > li > a {
      display: block;
      color: #333;
      padding: 1.8rem 1rem 0.8rem 1rem;
      text-align: center;
      margin: 0;
      font-size: 1em;
      font-weight: 600;
      line-height: 1.4;
      vertical-align: middle;
      position: relative; }
      ul.primary-nav > li > a::after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-image: url(../images/dotted.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin: 5px auto 0 auto;
        transition: 1s;
        opacity: 0; }
      ul.primary-nav > li > a.current::before {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        margin: auto;
        border: 8px solid transparent;
        border-bottom-color: #707070;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        transition: 1s;
        opacity: 0; }
        @media screen and (max-width: 960px) {
          ul.primary-nav > li > a.current::before {
            border-bottom-color: #FFFFFF; } }
      @media screen and (max-width: 960px) {
        ul.primary-nav > li > a {
          font-size: 1.2em;
          padding: 1.5rem 1rem 1rem 1rem;
          border-top: 1px dotted #CCC; } }
      ul.primary-nav > li > a:hover, ul.primary-nav > li > a.current {
        color: #F4000C; }
        ul.primary-nav > li > a:hover::before, ul.primary-nav > li > a.current::before {
          opacity: 1; }
        ul.primary-nav > li > a:hover::after, ul.primary-nav > li > a.current::after {
          opacity: 1; }
      ul.primary-nav > li > a.off {
        color: #000;
        opacity: 0; }
        ul.primary-nav > li > a.off::after {
          opacity: 0; }
  ul.primary-nav span {
    font-size: 0.6em;
    font-weight: 500;
    vertical-align: middle;
    margin: 5px;
    text-align: center; }
    @media screen and (max-width: 1140px) {
      ul.primary-nav span {
        display: block; } }
  ul.primary-nav ul.sub {
    display: none;
    margin: 0;
    padding: 0 0 0 2rem;
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    border-radius: 3em;
    z-index: 999;
    background: #707070;
    color: #FFF; }
    @media screen and (max-width: 960px) {
      ul.primary-nav ul.sub {
        border-radius: 0;
        background: #FFF;
        color: #000; } }
    ul.primary-nav ul.sub li {
      padding: 0;
      margin: 0;
      z-index: 9999;
      display: inline-block; }
      @media screen and (max-width: 960px) {
        ul.primary-nav ul.sub li {
          display: block; } }
      ul.primary-nav ul.sub li a {
        padding: 1.2rem;
        margin: 0;
        display: block;
        z-index: 99999; }
        ul.primary-nav ul.sub li a:hover {
          color: #FFA5BC; }
        @media screen and (max-width: 960px) {
          ul.primary-nav ul.sub li a {
            padding: 1.2rem;
            font-size: 1.1rem;
            text-align: center;
            background-color: #FFF; }
            ul.primary-nav ul.sub li a:hover {
              color: #F4000C;
              background-color: #FAFAFA; } }
    @media screen and (max-width: 960px) {
      ul.primary-nav ul.sub {
        position: relative; } }

/*#about ul.sub {padding-left: 4rem;}
#buy ul.sub {padding-left: 12rem;}
#use ul.sub {padding-left: 20rem;}

@media screen and (max-width: $medium-screen) {
#about ul.sub,
#buy ul.sub,
#use ul.sub
	{padding-left: 0;}
}*/
/* ==========================================================================
Mobile Navigation
========================================================================== */
.navicon {
  display: none;
  width: 60px;
  height: 60px;
  position: fixed;
  right: 20px;
  bottom: 5%;
  background-color: #707070;
  border-radius: 50%;
  margin: auto;
  transition: all 300ms ease-in-out;
  z-index: 9999;
  padding: 22px 15px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); }
  @media screen and (max-width: 960px) {
    .navicon {
      display: block; } }

.nav-toggle {
  z-index: 9999;
  cursor: pointer;
  display: block;
  padding: 0;
  margin: 2px auto;
  position: relative;
  width: 30px; }

.nav-toggle:focus {
  outline: none; }

.nav-toggle span,
.nav-toggle span:before,
.nav-toggle span:after {
  content: "";
  position: absolute;
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 1px;
  background: #FFF;
  cursor: pointer; }

.navicon p {
  display: block;
  text-align: center;
  padding: 0;
  margin: 14px auto 0 auto;
  font-size: 10px;
  color: #FFF; }

.nav-toggle span {
  top: 0px; }

.nav-toggle span:before {
  top: -5px; }

.nav-toggle span:after {
  top: 5px; }

.nav-toggle span,
.nav-toggle span:before,
.nav-toggle span:after {
  transition: all 300ms ease-in-out; }

.navicon.active .nav-toggle span {
  background-color: transparent; }

.navicon.active .nav-toggle span:before,
.navicon.active .nav-toggle span:after {
  top: 0; }

.navicon.active .nav-toggle span:before {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.navicon.active .nav-toggle span:after {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

/* ==========================================================================
footer-nav
========================================================================== */
.footer-nav {
  display: flex;
  margin: 3rem 0;
  justify-content: space-between; }
  .footer-nav > li {
    width: 25%; }
    .footer-nav > li > ul > li {
      padding-right: 3rem; }
    .footer-nav > li a {
      display: block;
      padding: 0.2rem 2rem 0.2rem 0;
      position: relative; }
      .footer-nav > li a::after {
        content: '';
        display: block;
        width: 0.8rem;
        height: 0.8rem;
        background-image: url("../images/chevron_white.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto; }
      .footer-nav > li a:hover {
        text-decoration: none;
        color: #999; }
    .footer-nav > li h2 {
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
      font-weight: 600; }
  @media screen and (max-width: 960px) {
    .footer-nav {
      display: none; } }

.footer-nav2 {
  display: flex;
  margin: 3rem 0;
  justify-content: center; }
  .footer-nav2 li {
    padding: 0 2rem; }
    .footer-nav2 li a {
      font-size: 1rem;
      display: block;
      padding: 0.2rem 2rem 0.2rem 0;
      position: relative; }
      .footer-nav2 li a::after {
        content: '';
        display: block;
        width: 0.8rem;
        height: 0.8rem;
        background-image: url("../images/chevron_white.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto; }
      .footer-nav2 li a:hover {
        text-decoration: none;
        color: #999; }
  @media screen and (max-width: 960px) {
    .footer-nav2 {
      display: none; } }

/* ==========================================================================
Scroll to top button
========================================================================== */
.scroll-to-top {
  position: fixed;
  left: 20px;
  bottom: 5%;
  margin: auto;
  z-index: 999999;
  display: block;
  transition: 0.5s;
  background-color: #f70000;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  width: 50px;
  height: 50px;
  opacity: 1; }
  .scroll-to-top::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid #FFF;
    border-right: 0px;
    border-bottom: 0px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: rotate(45deg); }
  .scroll-to-top::after {
    content: 'PAGE TOP';
    font-size: 7px;
    color: #FFF;
    display: block;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    margin: auto; }
  @media screen and (max-width: 960px) {
    .scroll-to-top {
      width: 50px;
      height: 50px; } }

/*---------------------------------------------------------------/
　Copyright © NAGANO CITY
/---------------------------------------------------------------*/
.bg_mt {
  background-image: url("../images/background.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%; }

.bg_mt_nw {
  background-image: url("../images/yamanami.svg");
  background-repeat: no-repeat;
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 600px;
  padding-top: 10rem;
  margin-top: -2rem; }
  @media screen and (max-width: 720px) {
    .bg_mt_nw {
      background-size: 400px; } }

.bg_pale {
  background-color: #F4F2EF;
  padding: 4rem 0; }
  @media screen and (max-width: 960px) {
    .bg_pale {
      padding: 2rem 0; } }

.content {
  display: block;
  background-color: #FFF;
  border-radius: 1.5em;
  padding: 1rem 6rem 4rem 6rem; }
  @media screen and (max-width: 960px) {
    .content {
      padding: 2rem 1rem;
      border-radius: 1em; } }
  .content h2 {
    font-size: 1.7rem;
    font-weight: 600;
    vertical-align: middle;
    margin: 4rem auto 1em auto;
    padding-left: 1.5em;
    text-indent: -1.5em; }
    @media screen and (max-width: 960px) {
      .content h2 {
        margin: 0 auto 1rem auto;
        font-size: 1.5rem; } }
    .content h2::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 1.4em;
      border-radius: 10px;
      background-color: #F4000C;
      margin: -0.4em 1em 0 0;
      vertical-align: middle; }
  .content h3 {
    font-size: 1.4rem;
    font-weight: 600; }
    @media screen and (max-width: 960px) {
      .content h3 {
        font-size: 1.2rem; } }

.swiper-container {
  position: relative !important;
  width: 100%;
  max-width: 100%;
  padding: 0 0 2rem 0 !important;
  margin-top: 2rem; }
  .swiper-container .swiper-pagination-bullet-active {
    background: #F4000C; }

.swiper-slide {
  border-radius: 2rem;
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid #FFF;
  background-color: #FFF; }

.swiper-slide img {
  width: 100%; }
  .swiper-slide img.pc {
    display: block; }
    @media screen and (max-width: 960px) {
      .swiper-slide img.pc {
        display: none; } }
  .swiper-slide img.sp {
    display: none; }
    @media screen and (max-width: 960px) {
      .swiper-slide img.sp {
        display: block; } }

.topics {
  display: block;
  background-color: #FFF;
  border-radius: 1.5em;
  margin-top: 1rem;
  padding: 1rem 4rem; }
  @media screen and (max-width: 960px) {
    .topics {
      padding: 1rem 2rem; } }
  .topics h2 {
    font-size: 1.6rem;
    font-weight: 600; }
  .topics ul {
    display: flex;
    flex-wrap: wrap; }
    .topics ul li:first-child {
      width: 12em;
      padding: 1rem 0; }
      @media screen and (max-width: 960px) {
        .topics ul li:first-child {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center; } }
    .topics ul li:last-child {
      flex-grow: 1; }
  .topics .link_s {
    margin-left: -1rem; }
    @media screen and (max-width: 960px) {
      .topics .link_s {
        margin: 0; } }
  .topics dl {
    display: flex;
    flex-wrap: wrap; }
    .topics dl dt {
      width: 10em;
      font-size: 0.9rem;
      font-weight: 500;
      color: #707070;
      padding: 1.5rem 0; }
      @media screen and (max-width: 960px) {
        .topics dl dt {
          width: 100%;
          padding: 0.8em 0 0 0; } }
    .topics dl dd {
      flex-grow: 1;
      font-weight: 600;
      padding: 1.5rem 0; }
      @media screen and (max-width: 960px) {
        .topics dl dd {
          padding: 0 0 0.8em 0; } }
      .topics dl dd a {
        display: block;
        position: relative;
        padding-right: 2rem; }
        .topics dl dd a::after {
          content: '';
          display: block;
          width: 0.8rem;
          height: 0.8rem;
          background-image: url("../images/chevron_red.svg");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto; }
        .topics dl dd a:hover {
          text-decoration: none;
          color: #F4000C; }
    .topics dl + dl {
      border-top: 1px solid #CCC; }

a.link {
  border: 1px solid #CCC;
  padding: 1rem 3rem 1rem 1.5rem;
  display: block;
  background-color: #FFF;
  font-weight: 600;
  position: relative; }
  a.link::after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url("../images/chevron_red.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0;
    margin: auto; }
  a.link:hover {
    text-decoration: none;
    background-color: #FFEDED; }
  a.link.center {
    text-align: center;
    width: 20em;
    max-width: 100%;
    margin: 3rem auto 0 auto; }
    @media screen and (max-width: 960px) {
      a.link.center {
        margin: 1rem auto 0 auto; } }

a.link_s {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #FFF;
  font-weight: 600;
  vertical-align: middle;
  font-size: 0.9rem; }
  a.link_s::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.2rem;
    margin-left: 0.5rem;
    background-image: url("../images/chevron_red.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
  a.link_s:hover {
    text-decoration: none;
    background-color: #FFEDED; }

a.link_c {
  border: 1px solid #CCC;
  padding: 1rem 3rem 1rem 1.5rem;
  background-color: #FFF;
  font-weight: 600;
  text-align: center;
  margin: 0.4rem 0;
  width: 24em;
  max-width: 100%;
  display: block;
  position: relative; }
  a.link_c p::after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url("../images/chevron_red.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0;
    margin: auto; }
  a.link_c:hover {
    text-decoration: none;
    background-color: #FFEDED; }

.index-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin: 4rem auto; }
  @media screen and (max-width: 960px) {
    .index-link {
      margin: 1rem auto; } }
  .index-link .buy, .index-link .use {
    margin-top: 2rem;
    width: 49%; }
    @media screen and (max-width: 960px) {
      .index-link .buy, .index-link .use {
        width: 100%; } }
  .index-link .info {
    margin-top: 2rem;
    width: 100%; }
    .index-link .info > div {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 90%;
      margin: 0 auto; }
      @media screen and (max-width: 960px) {
        .index-link .info > div {
          width: 100%; } }
      .index-link .info > div > a {
        width: 48%;
        margin: 0 0 1em 0; }
        @media screen and (max-width: 960px) {
          .index-link .info > div > a {
            width: 100%; } }
  .index-link .buy, .index-link .use, .index-link .info, .index-link .aboutop {
    background-color: #F4F2EF;
    border-radius: 1.5rem;
    padding: 2rem 4rem; }
    @media screen and (max-width: 960px) {
      .index-link .buy, .index-link .use, .index-link .info, .index-link .aboutop {
        padding: 1.5rem;
        margin: 1.5rem 0 0 0; } }
    .index-link .buy a, .index-link .use a, .index-link .info a, .index-link .aboutop a {
      margin: 1em 0; }
  .index-link .aboutop {
    width: 100%; }
    .index-link .aboutop ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin: auto; }
      @media screen and (max-width: 960px) {
        .index-link .aboutop ul {
          display: block; } }
      .index-link .aboutop ul li {
        width: 48%;
        margin-bottom: 1em; }
        @media screen and (max-width: 960px) {
          .index-link .aboutop ul li {
            width: 100%; } }
        .index-link .aboutop ul li a {
          margin: 0; }
  .index-link h2 {
    font-weight: 600;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem; }
    @media screen and (max-width: 960px) {
      .index-link h2 {
        margin-bottom: 1rem; } }
    .index-link h2 img {
      display: inline-block;
      width: 220px;
      max-width: 100%;
      margin: 0 auto 0.1em auto; }
    .index-link h2 span {
      display: block; }

.about ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 3rem auto; }
  @media screen and (max-width: 960px) {
    .about ul {
      margin: 2rem auto; } }
  .about ul li {
    width: 32%; }
    @media screen and (max-width: 960px) {
      .about ul li {
        width: 100%; }
        .about ul li + li {
          margin-top: 1rem; } }

.title_lead {
  text-align: center;
  padding: 4rem 0; }
  @media screen and (max-width: 960px) {
    .title_lead {
      padding: 2rem 0; } }
  .title_lead h2 {
    font-size: 2.2rem;
    font-weight: 600; }
    .title_lead h2::after {
      content: "";
      display: block;
      width: 80px;
      height: 8px;
      border-radius: 10px;
      background-color: #F4000C;
      margin: 2rem auto; }
  .title_lead p {
    display: inline-block;
    text-align: left;
    width: 800px;
    max-width: 100%;
    font-weight: 600;
    line-height: 1.8;
    font-size: 1.1rem;
    margin: 1rem auto; }
    .title_lead p.border {
      border: 1px solid #CCC;
      padding: 1rem 1.5rem; }
  .title_lead a.link {
    width: 26em;
    margin: auto;
    text-align: center;
    display: block;
    position: relative;
    padding: 1rem 2rem 1rem 1rem;
    margin: 2rem auto 0 auto; }
    .title_lead a.link::after {
      position: absolute;
      right: 10px;
      top: 0;
      bottom: 0;
      margin: auto 0 auto auto; }

ul.dot {
  margin: 1rem 1rem 0 1rem; }
  @media screen and (max-width: 960px) {
    ul.dot {
      margin: 0; } }
  ul.dot li {
    padding-left: 18px;
    text-indent: -18px;
    margin-top: 0.5rem; }
    ul.dot li::before {
      content: "";
      width: 8px;
      height: 8px;
      background-color: #6C6C6C;
      display: inline-block;
      border-radius: 50%;
      margin: 0 10px 0 0; }

ul.dot {
  margin: 1rem 1rem 0 1rem; }
  @media screen and (max-width: 960px) {
    ul.dot {
      margin: 0; } }
  ul.dot li {
    padding-left: 18px;
    text-indent: -18px;
    margin-top: 0.5rem; }
    ul.dot li::before {
      content: "";
      width: 8px;
      height: 8px;
      background-color: #6C6C6C;
      display: inline-block;
      border-radius: 50%;
      margin: 0 10px 0 0; }

ul.indent {
  margin: 0; }
  ul.indent li {
    padding-left: 1em;
    text-indent: -1em;
    margin-top: 0.5rem; }

div.indent {
  margin: 0;
  display: table; }
  div.indent dl {
    display: table-row; }
    div.indent dl dt {
      display: table-cell;
      white-space: nowrap;
      padding-top: 0.5rem;
      padding-right: 0.5em; }
    div.indent dl dd {
      display: table-cell;
      padding-top: 0.5rem; }

.meisai_wrap {
  padding: 3rem 5rem 0 5rem; }
  @media screen and (max-width: 960px) {
    .meisai_wrap {
      padding: 1rem; } }

div.meisai {
  display: table;
  border-collapse: collapse;
  width: 500px;
  max-width: 100%;
  margin: 3rem auto; }
  @media screen and (max-width: 720px) {
    div.meisai {
      display: block;
      border-top: 1px solid #999;
      margin: 1rem auto; } }
  div.meisai dl {
    display: table-row; }
    @media screen and (max-width: 720px) {
      div.meisai dl {
        display: block; } }
    div.meisai dl dt, div.meisai dl dd {
      display: table-cell;
      border: 1px solid #999;
      padding: 1em;
      text-align: center;
      vertical-align: middle; }
      @media screen and (max-width: 720px) {
        div.meisai dl dt, div.meisai dl dd {
          display: block; } }
    div.meisai dl dt {
      background-color: #D8F2FF; }
      @media screen and (max-width: 720px) {
        div.meisai dl dt {
          border-top: 0;
          border-bottom: 0; } }

@media screen and (max-width: 720px) {
  display: block; }
.card-type dl {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex: none; }
  @media screen and (max-width: 960px) {
    .card-type dl {
      display: block; } }
  .card-type dl dt {
    width: 25%; }
    @media screen and (max-width: 960px) {
      .card-type dl dt {
        width: 100%; } }
    .card-type dl dt img {
      width: 300px;
      max-width: 100%; }
      @media screen and (max-width: 960px) {
        .card-type dl dt img {
          width: 180px;
          margin: auto; } }
  .card-type dl dd {
    width: 70%;
    border-left: 1px dashed #6C6C6C;
    padding-left: 1rem; }
    @media screen and (max-width: 960px) {
      .card-type dl dd {
        width: 100%;
        margin-top: 2rem; } }
.card-type h3 {
  margin: 0 0 2rem 0; }
.card-type a.link {
  width: 20em;
  margin: 2rem 0 0 1rem; }
  @media screen and (max-width: 960px) {
    .card-type a.link {
      width: 100%;
      margin: 2rem 0 0 0; } }
.card-type + .card-type {
  margin-top: 3rem; }

.r_frame {
  border: 3px solid #EEE;
  padding: 3rem 4rem;
  border-radius: 1rem;
  margin-top: 2rem;
  text-align: left; }
  @media screen and (max-width: 960px) {
    .r_frame {
      padding: 1rem; } }
  .r_frame.green {
    border-color: #2E9F2F; }
  .r_frame h3 {
    margin-bottom: 1rem; }
  .r_frame p {
    font-size: 1rem;
    padding: 0;
    margin: 0;
    width: 100%; }

.card-buy div {
  width: 100%;
  border-left: 1px dashed #6C6C6C;
  padding-left: 1rem;
  margin: 0 1rem 4rem 1rem; }
  @media screen and (max-width: 960px) {
    .card-buy div {
      width: 100%;
      margin: 0 0 2rem 0; } }
.card-buy h3 {
  margin: 0 0 2rem 0; }
.card-buy p {
  margin: 1rem 0; }
.card-buy a.link {
  width: 20em;
  margin: 2rem 0 0 1rem; }
  @media screen and (max-width: 960px) {
    .card-buy a.link {
      width: 100%;
      margin: 2rem 0 0 0; } }

.card-desk {
  display: flex;
  flex: none;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 4rem; }
  @media screen and (max-width: 960px) {
    .card-desk {
      padding-top: 0; } }
  .card-desk > div {
    width: 55%; }
    @media screen and (max-width: 960px) {
      .card-desk > div {
        width: 100%; } }
    .card-desk > div div.data {
      display: block;
      border-left: 1px dashed #6C6C6C;
      padding-left: 1rem;
      margin: 1rem 0; }
    .card-desk > div dl {
      display: flex;
      margin-bottom: 0.4rem;
      flex-wrap: wrap; }
      .card-desk > div dl dt {
        width: 6rem; }
  .card-desk h2 {
    margin: 0; }
  .card-desk iframe {
    width: 35%;
    height: 260px;
    margin-top: 1rem; }
    @media screen and (max-width: 960px) {
      .card-desk iframe {
        width: 100%;
        margin-bottom: 3rem; } }

.news_list {
  width: 100%;
  display: table;
  background-color: #FFF;
  margin-top: 3rem;
  padding: 0;
  border-bottom: 1px dashed #CCC; }
  @media screen and (max-width: 960px) {
    .news_list {
      display: block;
      margin-top: 0; } }
  .news_list dl {
    display: table-row; }
    @media screen and (max-width: 960px) {
      .news_list dl {
        display: block; } }
    .news_list dl dt {
      border-top: 1px dashed #CCC;
      display: table-cell;
      width: 12em;
      font-size: 0.9rem;
      font-weight: 500;
      color: #707070;
      padding: 1.5rem 1rem; }
      @media screen and (max-width: 960px) {
        .news_list dl dt {
          display: block;
          width: 100%;
          padding: 1rem 1rem 0.5rem 1rem; } }
    .news_list dl dd {
      border-top: 1px dashed #CCC;
      display: table-cell;
      font-weight: 600;
      padding: 1.5rem 1rem; }
      @media screen and (max-width: 960px) {
        .news_list dl dd {
          border-top: 0;
          padding: 0 1rem 1rem 1rem;
          display: block; } }
      .news_list dl dd a {
        display: block;
        position: relative;
        padding-right: 2rem; }
        .news_list dl dd a::after {
          content: '';
          display: block;
          width: 1rem;
          height: 1rem;
          background-image: url("../images/chevron_red.svg");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto; }
        .news_list dl dd a:hover {
          text-decoration: none;
          color: #F4000C; }

.topics_dt .date {
  text-align: right;
  border-bottom: 1px dashed #CCC;
  padding-bottom: 1rem;
  margin: 2rem auto; }
.topics_dt .txt {
  margin-bottom: 5rem; }

/*point*/
.point_flex {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 100%; }
  .point_flex li:first-child {
    width: 60%; }
    @media screen and (max-width: 960px) {
      .point_flex li:first-child {
        width: 100%; } }
  .point_flex li:last-child {
    width: 40%;
    text-align: center;
    padding: 2rem; }
    @media screen and (max-width: 960px) {
      .point_flex li:last-child {
        width: 100%; } }
    .point_flex li:last-child img {
      max-width: 100%; }
    .point_flex li:last-child p {
      margin-bottom: 1rem; }

.point_wrap {
  display: block;
  border: 1px solid #CCC;
  padding: 4rem 1rem 3rem 1rem;
  text-align: center; }
  .point_wrap .number {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
  .point_wrap input {
    display: inline-block;
    width: 4em;
    padding: 0.5rem;
    margin: 0 0.3rem;
    text-align: left;
    font-size: 1.5rem; }
    @media screen and (max-width: 960px) {
      .point_wrap input {
        font-size: 1.2rem; } }
  .point_wrap p {
    display: inline-block;
    margin: 0 0.3rem;
    font-size: 1.5rem; }
    @media screen and (max-width: 960px) {
      .point_wrap p {
        font-size: 1.2rem; } }

.card-charge dl {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex: none; }
  @media screen and (max-width: 960px) {
    .card-charge dl {
      display: block; } }
  .card-charge dl.full {
    display: block; }
    .card-charge dl.full dt {
      width: 100%; }
    .card-charge dl.full dd {
      width: 100%; }
      .card-charge dl.full dd div {
        margin-top: 3rem; }
  .card-charge dl dt {
    width: 40%; }
    @media screen and (max-width: 960px) {
      .card-charge dl dt {
        width: 300px;
        max-width: 100%; } }
    .card-charge dl dt img {
      width: 100%; }
  .card-charge dl dd {
    width: 55%; }
    @media screen and (max-width: 960px) {
      .card-charge dl dd {
        width: 100%;
        margin-top: 2rem; } }
    .card-charge dl dd div {
      border-left: 1px dashed #6C6C6C;
      padding-left: 1rem; }
      .card-charge dl dd div + div {
        margin-top: 3rem; }
      .card-charge dl dd div p {
        padding: 0; }
.card-charge h3 {
  margin: 0 0 1rem 0; }
.card-charge a.link {
  width: 20em;
  margin: 2rem 0 0 1rem; }
  @media screen and (max-width: 960px) {
    .card-charge a.link {
      width: 100%;
      margin: 2rem 0 0 0; } }
.card-charge + .card-type {
  margin-top: 3rem; }

.img_center {
  display: block;
  text-align: center;
  margin: 2rem auto;
  padding: 2rem 0; }
  @media screen and (max-width: 960px) {
    .img_center {
      margin: 1rem auto;
      padding: 1rem 0; } }
  .img_center img {
    width: 700px;
    max-width: 100%;
    display: block;
    margin: auto; }
  .img_center p {
    font-weight: 600;
    display: inline-block;
    text-align: left;
    margin: 2rem 0; }

.img_left {
  display: block;
  margin: 1rem 0; }
  @media screen and (max-width: 960px) {
    .img_left {
      margin: 1rem auto;
      padding: 1rem 0; } }
  .img_left img {
    width: 600px;
    max-width: 100%;
    display: block;
    margin: 0; }

.notice {
  display: block;
  border: 3px solid #ED1D26;
  border-radius: 1.5rem;
  padding: 2rem;
  margin-top: 2rem; }
  @media screen and (max-width: 960px) {
    .notice {
      padding: 1rem;
      border-radius: 1rem; } }
  .notice.narrow {
    padding: 3rem 5rem; }
    @media screen and (max-width: 960px) {
      .notice.narrow {
        padding: 1rem; } }
  .notice h3 {
    font-size: 2rem;
    font-weight: 600;
    padding-left: 3rem;
    position: relative; }
    .notice h3::before {
      content: "";
      display: block;
      width: 2rem;
      height: 2rem;
      background-image: url("../images/note.svg");
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto; }
  .notice p {
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 2rem;
    line-height: 2; }

div.left_dash {
  border-left: 1px dashed #6C6C6C;
  padding-left: 1rem;
  margin-top: 3rem; }
  div.left_dash + div {
    margin-top: 3rem; }
  div.left_dash h3 {
    margin: 0 0 1rem 0; }

.frame_ao {
  text-align: center;
  border: 1px solid #1476FC;
  padding: 1rem;
  width: 400px;
  max-width: 100%;
  margin: 2rem auto; }
  .frame_ao p:nth-child(1) {
    font-size: 1rem;
    font-weight: 600; }
  .frame_ao p:nth-child(2) {
    font-size: 1.5rem;
    color: #0076FF;
    font-weight: 600; }

.flex_center {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: center; }

.frame_or {
  text-align: center;
  padding: 0;
  width: 400px;
  max-width: 100%;
  margin: 1rem;
  background-color: #FEE5CF; }
  .frame_or p:nth-child(1) {
    font-size: 1rem;
    background-color: #EC8A3E;
    color: #FFF;
    padding: 0.3rem; }
  .frame_or p:nth-child(2) {
    color: #FF6F00;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.7rem 0.3rem 0 0.3rem; }
  .frame_or p:nth-child(3) {
    color: #FF6F00;
    font-size: 1rem;
    padding: 0 0.3rem 0.7rem 0.3rem; }

.frame_pk {
  text-align: center;
  padding: 0;
  width: 400px;
  max-width: 100%;
  margin: 1rem;
  background-color: #FEE0E0; }
  .frame_pk p:nth-child(1) {
    font-size: 1rem;
    background-color: #FC5558;
    color: #FFF;
    padding: 0.3rem; }
  .frame_pk p:nth-child(2) {
    color: #FC5558;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.7rem 0.3rem 0 0.3rem; }
  .frame_pk p:nth-child(3) {
    color: #FC5558;
    font-size: 1rem;
    padding: 0 0.3rem 0.7rem 0.3rem; }

a.link_point {
  padding: 1rem 3rem 1rem 1.5rem;
  display: block;
  background-color: #27A125;
  font-weight: 600;
  position: relative;
  color: #FFF;
  text-align: center;
  border-radius: 5px;
  width: 30em;
  max-width: 100%; }
  @media screen and (max-width: 960px) {
    a.link_point {
      margin: 2rem auto; } }
  a.link_point.center {
    margin: 3rem auto; }
  a.link_point.left {
    margin: 2rem auto 0 1rem; }
  a.link_point::after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url("../images/chevron_white.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0;
    margin: auto; }
  a.link_point:hover {
    text-decoration: none;
    background-color: #02CD00; }

.flex_half {
  display: flex;
  flex-wrap: wrap; }
  .flex_half li {
    width: 45%;
    padding: 0 1rem 1rem 0; }
    @media screen and (max-width: 960px) {
      .flex_half li {
        width: 30em;
        max-width: 100%; } }
    @media screen and (max-width: 720px) {
      .flex_half li {
        width: 100%; } }

.guide {
  padding-bottom: 3rem; }
  @media screen and (max-width: 720px) {
    .guide {
      padding-bottom: 2rem; } }
  .guide ul {
    display: flex;
    flex-wrap: wrap; }
    .guide ul li {
      width: 25%;
      padding: 0.5rem 1rem; }
      @media screen and (max-width: 960px) {
        .guide ul li {
          width: 50%; } }
      @media screen and (max-width: 720px) {
        .guide ul li {
          width: 100%; } }
      .guide ul li a {
        text-align: center; }

.type {
  padding-bottom: 3rem; }
  @media screen and (max-width: 720px) {
    .type {
      padding-bottom: 2rem; } }
  .type ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .type ul li {
      width: 40%;
      padding: 0.5rem 1rem; }
      @media screen and (max-width: 960px) {
        .type ul li {
          width: 50%; } }
      @media screen and (max-width: 720px) {
        .type ul li {
          width: 100%; } }
      .type ul li a {
        text-align: center; }

/*2025 TopPage Renewal*/
#head_title {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-top: 2rem;
  border-radius: 2rem;
  overflow: hidden; }
  #head_title img {
    width: 100%; }
    #head_title img.pc {
      display: block; }
      @media screen and (max-width: 960px) {
        #head_title img.pc {
          display: none; } }
    #head_title img.sp {
      display: none; }
      @media screen and (max-width: 960px) {
        #head_title img.sp {
          display: block; } }

h2.inline span {
  display: inline-block;
  vertical-align: middle; }
h2.inline .kururu_logo {
  height: 2.2rem;
  display: inline;
  margin: 0 0.5rem;
  vertical-align: middle; }

.area_map {
  max-width: 100%; }

.suica_logo {
  width: 8rem;
  display: inline;
  margin: 0 0.5rem;
  vertical-align: middle; }

.bg_mt .title_lead {
  text-align: center;
  padding: 0; }

.phone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: stretch;
  grid-gap: 2rem;
  margin: 1rem 0 6rem 0; }
  @media screen and (max-width: 720px) {
    .phone {
      grid-template-columns: 1fr;
      grid-gap: 1rem; } }
  .phone li {
    background-color: #FFF;
    padding: 1.5rem 1rem;
    border-radius: 1.5rem;
    text-align: center;
    font-weight: 600; }
    .phone li:nth-child(1) {
      border: 3px solid #86B3DE; }
    .phone li:nth-child(2) {
      border: 3px solid #69BD81; }
    .phone li h3 {
      font-size: 1.5rem; }
      .phone li h3 p {
        display: inline-block;
        text-align: left; }
    .phone li div {
      margin: .8rem 0 .5rem 0;
      font-size: 1.1rem; }
    .phone li a {
      display: block;
      font-size: 1.4rem;
      font-weight: 500; }

.col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 4rem;
  justify-content: space-between;
  align-items: stretch;
  margin: 4rem auto 6rem; }
  @media screen and (max-width: 960px) {
    .col3 {
      grid-template-columns: 1fr;
      grid-gap: 3rem; } }
  .col3 li {
    flex-basis: 30%;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between; }
    @media screen and (max-width: 960px) {
      .col3 li {
        display: block; } }
    .col3 li span {
      width: 2em;
      margin: auto;
      display: block;
      background-color: #87B3E0;
      color: #FFF;
      text-align: center;
      padding: 0.4rem 0.8rem;
      font-size: 1.6rem;
      border-radius: 0.5rem; }
    .col3 li p {
      flex-basis: 100%;
      margin: 2rem 0; }
      @media screen and (max-width: 960px) {
        .col3 li p {
          margin: 1rem 0; } }
    .col3 li a.link {
      flex-basis: 100%;
      font-size: 1rem;
      margin: auto; }
      @media screen and (max-width: 960px) {
        .col3 li a.link {
          width: 20rem;
          max-width: 100%; } }

#suica,
#area,
#shop {
  padding-top: 2rem;
  margin-top: 3rem; }
  @media screen and (max-width: 960px) {
    #suica,
    #area,
    #shop {
      margin-top: 1rem; } }
  #suica p,
  #area p,
  #shop p {
    font-size: 1.1rem;
    padding: 0 1rem; }

#suica {
  margin-top: 0; }

#area img {
  width: 900px;
  max-width: 100%;
  margin: 2rem auto; }

#shop ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem; }
  #shop ul li img {
    width: 8rem; }
    @media screen and (max-width: 720px) {
      #shop ul li img {
        width: 6rem; } }
  #shop ul li p {
    font-weight: 600;
    font-size: 1.3rem; }

#copy {
  text-align: center;
  margin: 2rem auto;
  padding: 1rem; }
  @media screen and (max-width: 720px) {
    #copy {
      text-align: left; } }