@charset "UTF-8";
.header {
  position: relative;
  width: 100%;
  background-color: #ffff00;
  padding: calc(42 / 750 * 100vw) 0 0; }
  @media only screen and (min-width: 769px) {
    .header {
      padding: calc(63 / 1200 * 100vw) 0 calc(55 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .header {
      padding: 63px 0 55px; } }

.header--logo {
  width: calc(203 / 750 * 100vw);
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .header--logo {
      width: calc(400 / 1200 * 100vw);
      display: flex;
      justify-content: space-between;
      align-items: flex-start; } }
  @media only screen and (min-width: 1200px) {
    .header--logo {
      width: 400px; } }

.header--logo--newdays {
  width: calc(203 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .header--logo--newdays {
      width: calc(204 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .header--logo--newdays {
      width: 204px; } }

.header--logo--kiosk {
  width: calc(197 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .header--logo--kiosk {
      width: calc(198 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .header--logo--kiosk {
      width: 198px;
      margin-top: 2px; } }

.keyvisual {
  position: relative;
  width: 100%;
  background-color: #ffff00;
  padding-bottom: calc(70 / 750 * 100vw); }

.keyvisual--title--wrap {
  width: 100%; }
  @media only screen and (min-width: 769px) {
    .keyvisual--title--wrap {
      position: relative;
      background-color: #fff;
      height: calc(112 / 1200 * 100vw);
      margin-top: calc(55 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .keyvisual--title--wrap {
      height: 112px;
      margin-top: 55px; } }

.keyvisual--title {
  width: calc(534 / 750 * 100vw);
  margin: 0 auto 0 calc(70 / 750 * 100vw);
  transform: translateY(calc(-20 / 750 * 100vw)); }
  @media only screen and (min-width: 769px) {
    .keyvisual--title {
      width: calc(912 / 1200 * 100vw);
      margin: 0 auto;
      transform: translateY(calc(-138 / 1200 * 100vw)); } }
  @media only screen and (min-width: 1200px) {
    .keyvisual--title {
      width: 912px;
      transform: translateY(-138px); } }

.keyvisual--visual--wrap {
  position: relative;
  width: 100%;
  background-color: #ffff00; }
  @media only screen and (min-width: 769px) {
    .keyvisual--visual--wrap {
      width: calc(1384 / 1200 * 100vw);
      margin: calc(40 / 1200 * 100vw) -7.6666666667vw 0; } }
  @media only screen and (min-width: 1200px) {
    .keyvisual--visual--wrap {
      margin: calc(40 / 1384 * 100vw) -6.6473988439vw 0; } }
  @media only screen and (min-width: 1384px) {
    .keyvisual--visual--wrap {
      width: 1384px;
      margin: 40px auto 0; } }

.keyvisual--visual--anime {
  width: 100%;
  margin: 0 auto; }
  @media only screen and (min-width: 1200px) {
    .keyvisual--visual--anime {
      max-width: 1384px; } }

.keyvisual--visual--anime--ph {
  width: 100%;
  margin: 0 auto;
  overflow: hidden; }
  @media only screen and (min-width: 769px) {
    .keyvisual--visual--anime--ph {
      width: calc(1384 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .keyvisual--visual--anime--ph {
      max-width: 1384px; } }
  .keyvisual--visual--anime--ph .infinity-scroll-wrap0,
  .keyvisual--visual--anime--ph .infinity-scroll-wrap1,
  .keyvisual--visual--anime--ph .infinity-scroll-wrap2,
  .keyvisual--visual--anime--ph .infinity-scroll-wrap3 {
    display: none;
    overflow: hidden;
    width: 222%;
    margin: 0 auto;
    opacity: 0.2; }
    @media only screen and (min-width: 769px) {
      .keyvisual--visual--anime--ph .infinity-scroll-wrap0,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap1,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap2,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap3 {
        width: calc(1382 / 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .keyvisual--visual--anime--ph .infinity-scroll-wrap0,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap1,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap2,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap3 {
        max-width: 1382px; } }
    .keyvisual--visual--anime--ph .infinity-scroll-wrap0 .ph,
    .keyvisual--visual--anime--ph .infinity-scroll-wrap1 .ph,
    .keyvisual--visual--anime--ph .infinity-scroll-wrap2 .ph,
    .keyvisual--visual--anime--ph .infinity-scroll-wrap3 .ph {
      width: 100%; }
      @media only screen and (min-width: 769px) {
        .keyvisual--visual--anime--ph .infinity-scroll-wrap0 .ph,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap1 .ph,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap2 .ph,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap3 .ph {
          width: calc(1490 / 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .keyvisual--visual--anime--ph .infinity-scroll-wrap0 .ph,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap1 .ph,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap2 .ph,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap3 .ph {
          max-width: 1490px; } }
      @media only screen and (min-width: 769px) {
        .keyvisual--visual--anime--ph .infinity-scroll-wrap0 .ph img,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap1 .ph img,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap2 .ph img,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap3 .ph img {
          width: calc(1490 / 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .keyvisual--visual--anime--ph .infinity-scroll-wrap0 .ph img,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap1 .ph img,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap2 .ph img,
        .keyvisual--visual--anime--ph .infinity-scroll-wrap3 .ph img {
          max-width: 1490px; } }
    .keyvisual--visual--anime--ph .infinity-scroll-wrap0.active,
    .keyvisual--visual--anime--ph .infinity-scroll-wrap1.active,
    .keyvisual--visual--anime--ph .infinity-scroll-wrap2.active,
    .keyvisual--visual--anime--ph .infinity-scroll-wrap3.active {
      display: flex;
      animation: fadeIn 1.75s ease-in-out forwards; }
      .keyvisual--visual--anime--ph .infinity-scroll-wrap0.active div,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap1.active div,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap2.active div,
      .keyvisual--visual--anime--ph .infinity-scroll-wrap3.active div {
        animation: infinity-scroll-left 120s infinite linear both; }

.keyvisual--visual--anime--mask {
  position: relative;
  width: 100%;
  margin: -42vw auto 0; }
  @media only screen and (min-width: 769px) {
    .keyvisual--visual--anime--mask {
      margin-top: calc(-250 / 1200 * 100vw);
      width: calc(1382 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .keyvisual--visual--anime--mask {
      margin-top: -250px;
      max-width: 1384px; } }

.keyvisual--catch {
  width: calc(542 / 750 * 100vw);
  margin: calc(98 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .keyvisual--catch {
      width: calc(785 / 1200 * 100vw);
      margin: calc(130 / 1200 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .keyvisual--catch {
      width: 785px;
      margin: 130px auto 0; } }

.keyvisual--lead {
  width: calc(542 / 750 * 100vw);
  margin: calc(65 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .keyvisual--lead {
      width: calc(811 / 1200 * 100vw);
      margin: calc(80 / 1200 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .keyvisual--lead {
      width: 811px;
      margin: 80px auto 0; } }

.keyvisual--note {
  width: calc(375 / 750 * 100vw);
  margin: calc(60 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .keyvisual--note {
      width: calc(377 / 1200 * 100vw);
      margin: calc(72 / 1200 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .keyvisual--note {
      width: 377px;
      margin: 72px auto 0; } }

.index {
  width: 100%;
  padding: calc(63 / 750 * 100vw) 0 calc(56 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .index {
      padding: calc(70 / 1200 * 100vw) 0; } }
  @media only screen and (min-width: 1200px) {
    .index {
      padding: 70px 0; } }

.index--wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(635 / 750 * 100vw);
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .index--wrap {
      width: calc(834 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .index--wrap {
      width: 834px; } }
  .index--wrap li {
    width: calc(305 / 750 * 100vw);
    margin-bottom: calc(25 / 750 * 100vw); }
    @media only screen and (min-width: 769px) {
      .index--wrap li {
        width: calc(248 / 1200 * 100vw);
        margin: 0 calc(45 / 1200 * 100vw) 0 0; } }
    @media only screen and (min-width: 1200px) {
      .index--wrap li {
        width: 248px;
        margin: 0 45px 0 0; } }
    .index--wrap li:first-child {
      margin-right: calc(25 / 750 * 100vw); }
      @media only screen and (min-width: 769px) {
        .index--wrap li:first-child {
          margin-right: calc(45 / 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .index--wrap li:first-child {
          margin-right: 45px; } }
    @media only screen and (min-width: 769px) {
      .index--wrap li:last-child {
        margin-right: 0; } }

.intro {
  width: 100%;
  padding: calc(82 / 750 * 100vw) 0 0;
  background: url("../img/intro_bk.png");
  background-size: calc(165 / 750 * 100vw) auto;
  background-repeat: repeat; }
  @media only screen and (min-width: 769px) {
    .intro {
      padding: calc(150 / 1200 * 100vw) 0 0;
      background-size: calc(165 / 1200 * 100vw) auto; } }
  @media only screen and (min-width: 1200px) {
    .intro {
      padding: 150px 0 0;
      background-size: 165px auto; } }

.intro--inner {
  width: 100%; }
  @media only screen and (min-width: 769px) {
    .intro--inner {
      margin: 0 auto; } }
  @media only screen and (min-width: 1200px) {
    .intro--inner {
      width: 1200px; } }

.intro--inner--title {
  width: calc(646 / 750 * 100vw);
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .intro--inner--title {
      width: calc(930 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .intro--inner--title {
      width: 930px; } }

.intro--inner--ph {
  width: calc(650 / 750 * 100vw);
  margin: calc(65 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .intro--inner--ph {
      width: calc(983 / 1200 * 100vw);
      margin: calc(68 / 1200 * 100vw) auto 0 0; } }
  @media only screen and (min-width: 1200px) {
    .intro--inner--ph {
      width: 983px;
      margin: 68px auto 0 0; } }

.intro--inner--outline {
  width: calc(507 / 750 * 100vw);
  margin: calc(-54 / 750 * 100vw) auto 0 calc(210 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .intro--inner--outline {
      width: calc(507 / 1200 * 100vw);
      margin: calc(-165 / 1200 * 100vw) auto 0 calc(637 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .intro--inner--outline {
      width: 507px;
      margin: -165px auto 0 637px; } }

.map {
  position: relative;
  width: calc(664 / 750 * 100vw);
  margin: calc(104 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .map {
      width: calc(1015 / 1200 * 100vw);
      margin: calc(115 / 1200 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .map {
      width: 1015px;
      margin: 115px auto 0; } }

.map--ac {
  position: absolute;
  width: calc(140 / 750 * 100vw);
  top: calc(-108 / 750 * 100vw);
  left: calc(-10 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .map--ac {
      width: calc(95 / 1200 * 100vw);
      top: calc(-40 / 1200 * 100vw);
      left: inherit;
      right: calc(-86 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .map--ac {
      width: 95px;
      top: -40px;
      right: -86px; } }

.map--btn--asahikawa,
.map--btn--sapporo,
.map--btn--hakodate,
.map--btn--kushiro {
  position: absolute;
  cursor: pointer; }
  .map--btn--asahikawa:hover,
  .map--btn--sapporo:hover,
  .map--btn--hakodate:hover,
  .map--btn--kushiro:hover {
    filter: brightness(1.15); }

.map--btn--asahikawa {
  width: calc(221 / 750 * 100vw);
  top: calc(160 / 750 * 100vw);
  left: calc(310 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .map--btn--asahikawa {
      width: calc(190 / 1200 * 100vw);
      top: calc(50 / 1200 * 100vw);
      left: calc(507 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .map--btn--asahikawa {
      width: 190px;
      top: 50px;
      left: 507px; } }

.map--btn--sapporo {
  width: calc(216 / 750 * 100vw);
  top: calc(318 / 750 * 100vw);
  left: calc(23 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .map--btn--sapporo {
      width: calc(179 / 1200 * 100vw);
      top: calc(148 / 1200 * 100vw);
      left: calc(264 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .map--btn--sapporo {
      width: 179px;
      top: 148px;
      left: 264px; } }

.map--btn--hakodate {
  width: calc(211 / 750 * 100vw);
  top: calc(619 / 750 * 100vw);
  left: calc(67 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .map--btn--hakodate {
      width: calc(236 / 1200 * 100vw);
      top: calc(376 / 1200 * 100vw);
      left: calc(115 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .map--btn--hakodate {
      width: 236px;
      top: 376px;
      left: 115px; } }

.map--btn--kushiro {
  width: calc(211 / 750 * 100vw);
  top: calc(536 / 750 * 100vw);
  left: calc(395 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .map--btn--kushiro {
      width: calc(175 / 1200 * 100vw);
      top: calc(357 / 1200 * 100vw);
      left: calc(580 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .map--btn--kushiro {
      width: 175px;
      top: 375px;
      left: 580px; } }

div .btn-ac {
  position: absolute;
  width: calc(86 / 750 * 100vw);
  top: calc(-30 / 750 * 100vw);
  right: calc(-6 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    div .btn-ac {
      width: calc(72 / 1200 * 100vw);
      top: calc(-27 / 1200 * 100vw);
      right: calc(-6 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    div .btn-ac {
      width: 72px;
      top: -27px;
      right: -6px; } }

.map--btn--hakodate .btn-ac {
  top: calc(20 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .map--btn--hakodate .btn-ac {
      top: calc(-27 / 1200 * 100vw);
      right: calc(50 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .map--btn--hakodate .btn-ac {
      top: -27px;
      right: 50px; } }

.map--btn--kushiro .btn-ac {
  top: calc(50 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .map--btn--kushiro .btn-ac {
      top: calc(10 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .map--btn--kushiro .btn-ac {
      top: 10px; } }

.intro--btn--wrap {
  margin-top: calc(65 / 750 * 100vw);
  background-color: #66c18f;
  padding: calc(57 / 750 * 100vw) 0 calc(43 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .intro--btn--wrap {
      margin-top: calc(77 / 1200 * 100vw);
      padding: calc(55 / 1200 * 100vw) 0 calc(40 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .intro--btn--wrap {
      margin-top: 77px;
      padding: 55px 0 40px; } }

.intro--btn {
  width: calc(520 / 750 * 100vw);
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .intro--btn {
      width: calc(520 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .intro--btn {
      width: 520px; } }

.intro--btntxt {
  width: calc(400 / 750 * 100vw);
  margin: calc(12 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .intro--btntxt {
      width: calc(403 / 1200 * 100vw);
      margin: calc(14 / 1200 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .intro--btntxt {
      width: 403px;
      margin: 14px auto 0; } }

.yukari {
  width: 100%;
  padding: calc(60 / 750 * 100vw) 0 calc(185 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .yukari {
      padding: calc(162 / 1200 * 100vw) 0 calc(250 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .yukari {
      padding: 162px 0 250px; } }

.intro--inner {
  width: 100%; }
  @media only screen and (min-width: 769px) {
    .intro--inner {
      margin: 0 auto; } }
  @media only screen and (min-width: 1200px) {
    .intro--inner {
      width: 1200px; } }

.yukari--inner--title {
  width: calc(646 / 750 * 100vw);
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .yukari--inner--title {
      width: calc(658 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .yukari--inner--title {
      width: 658px; } }

.yukari--kitaca,
.yukari--bunka,
.yukari--gotouchi {
  position: relative;
  width: calc(650 / 750 * 100vw);
  margin: calc(52 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .yukari--kitaca,
    .yukari--bunka,
    .yukari--gotouchi {
      width: calc(1155 / 1200 * 100vw);
      margin: calc(93 / 1200 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .yukari--kitaca,
    .yukari--bunka,
    .yukari--gotouchi {
      width: 1155px;
      margin: 93px auto 0; } }

@media only screen and (min-width: 769px) {
  .yukari--kitaca {
    width: calc(1175 / 1200 * 100vw);
    transform: translateX(calc(10 / 1200 * 100vw)); } }
@media only screen and (min-width: 1200px) {
  .yukari--kitaca {
    width: 1175px;
    transform: translateX(10px); } }

.yukari--bunka,
.yukari--gotouchi {
  margin: calc(90 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .yukari--bunka,
    .yukari--gotouchi {
      margin: calc(100 / 1200 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .yukari--bunka,
    .yukari--gotouchi {
      margin: 100px auto 0; } }

.yukari--kitaca--btn,
.yukari--bunka--btn,
.yukari--gotouchi--btn {
  width: calc(338 / 750 * 100vw);
  margin: calc(-58 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .yukari--kitaca--btn,
    .yukari--bunka--btn,
    .yukari--gotouchi--btn {
      width: calc(340 / 1200 * 100vw);
      margin: calc(-45 / 1200 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .yukari--kitaca--btn,
    .yukari--bunka--btn,
    .yukari--gotouchi--btn {
      width: 340px;
      margin: -45px auto 0; } }
  .yukari--kitaca--btn:hover,
  .yukari--bunka--btn:hover,
  .yukari--gotouchi--btn:hover {
    filter: brightness(1.15);
    cursor: pointer; }

.cp {
  width: 100%;
  background-image: url("../img/bg_cp_sp.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #66c5f1;
  padding: calc(230 / 750 * 100vw) 0 calc(192 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .cp {
      background-image: url("../img/bg_cp_pc.png");
      padding: calc(287 / 1200 * 100vw) 0 calc(150 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .cp {
      background-image: url("../img/bg_cp_pcl.png");
      background-repeat: repeat-x;
      padding: 287px 0 150px;
      background-size: auto auto; } }

.md_wrap {
  position: relative;
  width: 100%;
  background: #FFF;
  padding: calc(30 / 750 * 100vw) 0 calc(30 / 750 * 100vw); }
  @media only screen and (min-width: 769px) {
    .md_wrap {
      margin: 0 auto;
      padding: calc(30 / 1200 * 100vw) 0 calc(30 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .md_wrap {
      padding: 30px 0 30px; } }
  .md_wrap .md {
    width: calc(600 / 750 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .md_wrap .md {
        margin: 0 auto;
        width: calc(1108 / 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .md_wrap .md {
        width: 1108px; } }
  .md_wrap .cloud {
    position: absolute;
    bottom: calc(-110 / 750 * 100vw);
    left: 0;
    width: 100%; }
    @media only screen and (min-width: 769px) {
      .md_wrap .cloud {
        display: none; } }

.cp--cont {
  background-color: #66c5f1;
  background-image: url("../img/bg_cp_cloud_sp.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  padding: calc(172 / 750 * 100vw) 0 0; }
  @media only screen and (min-width: 769px) {
    .cp--cont {
      background-image: url("../img/bg_cp_cloud_pc.png");
      margin: 0 auto;
      padding: calc(98 / 1200 * 100vw) 0 0; } }
  @media only screen and (min-width: 1200px) {
    .cp--cont {
      background-image: url("../img/bg_cp_cloud_pcl.png");
      background-size: auto auto;
      padding: 98px 0 0; } }

.cp01--cont {
  position: relative;
  background: #def1fb;
  border: #1d2087 calc(10 / 750 * 100vw) solid;
  width: calc(640 / 750 * 100vw);
  border-radius: calc(25 / 750 * 100vw);
  padding: calc(172 / 750 * 100vw) 0 calc(160 / 750 * 100vw);
  margin: 0 auto;
  filter: drop-shadow(calc(16 / 750 * 100vw) calc(16 / 750 * 100vw) 0 #009fe8); }
  @media only screen and (min-width: 769px) {
    .cp01--cont {
      border: #1d2087 calc(14 / 1200 * 100vw) solid;
      border-radius: calc(30 / 1200 * 100vw);
      width: calc(1113 / 1200 * 100vw);
      padding: calc(75 / 1200 * 100vw) 0 calc(31 / 1200 * 100vw);
      filter: drop-shadow(calc(22 / 1200 * 100vw) calc(22 / 1200 * 100vw) 0 #009fe8); } }
  @media only screen and (min-width: 1200px) {
    .cp01--cont {
      border: #1d2087 14px solid;
      border-radius: 30px;
      width: 1113px;
      padding: 75px 0 31px;
      filter: drop-shadow(22px 22px 0 #009fe8); } }
  .cp01--cont .cp01_ti {
    position: absolute;
    width: calc(585 / 750 * 100vw);
    top: calc(-94/ 750 * 100vw);
    left: calc(5 / 750 * 100vw); }
    @media only screen and (min-width: 769px) {
      .cp01--cont .cp01_ti {
        width: calc(1045 / 1200 * 100vw);
        top: calc(-52 / 1200 * 100vw);
        left: calc(25 / 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .cp01--cont .cp01_ti {
        width: 1045px;
        top: -52px;
        left: 22px; } }
  .cp01--cont .bt_detail {
    position: absolute;
    width: calc(342 / 750 * 100vw);
    bottom: calc(49/ 750 * 100vw);
    left: 0;
    right: 0;
    margin: auto; }
    @media only screen and (min-width: 769px) {
      .cp01--cont .bt_detail {
        width: calc(342 / 1200 * 100vw);
        bottom: calc(26 / 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .cp01--cont .bt_detail {
        width: 342px;
        bottom: 26px; } }

.cp02--cont {
  position: relative;
  background: #fae5ee;
  border: #c30d23 calc(10 / 750 * 100vw) solid;
  width: calc(640 / 750 * 100vw);
  border-radius: calc(25 / 750 * 100vw);
  padding: calc(156 / 750 * 100vw) 0 calc(53 / 750 * 100vw);
  margin: calc(193 / 750 * 100vw) auto 0;
  filter: drop-shadow(calc(16 / 750 * 100vw) calc(16 / 750 * 100vw) 0 #009fe8); }
  @media only screen and (min-width: 769px) {
    .cp02--cont {
      border: #c30d23 calc(14 / 1200 * 100vw) solid;
      border-radius: calc(30 / 1200 * 100vw);
      width: calc(1113 / 1200 * 100vw);
      padding: calc(45 / 1200 * 100vw) 0 calc(46 / 1200 * 100vw);
      filter: drop-shadow(calc(22 / 1200 * 100vw) calc(22 / 1200 * 100vw) 0 #009fe8);
      margin: calc(116 / 750 * 100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .cp02--cont {
      border: #c30d23 14px solid;
      border-radius: 30px;
      width: 1113px;
      padding: 45px 0 46px;
      filter: drop-shadow(22px 22px 0 #009fe8);
      margin: 116px auto 0; } }
  .cp02--cont .cp02_ti {
    position: absolute;
    width: calc(527 / 750 * 100vw);
    top: calc(-94/ 750 * 100vw);
    left: calc(64 / 750 * 100vw); }
    @media only screen and (min-width: 769px) {
      .cp02--cont .cp02_ti {
        width: calc(890 / 1200 * 100vw);
        top: calc(-55 / 1200 * 100vw);
        left: calc(112 / 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .cp02--cont .cp02_ti {
        width: 890px;
        top: -55px;
        left: 112px; } }
  .cp02--cont .cp02_prize {
    width: calc(530 / 750 * 100vw);
    margin: calc(0 / 750 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .cp02--cont .cp02_prize {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: calc(979 / 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .cp02--cont .cp02_prize {
        width: 979px; } }
    .cp02--cont .cp02_prize li {
      margin: 0 auto 0; }
      @media only screen and (min-width: 769px) {
        .cp02--cont .cp02_prize li {
          width: calc(485 / 1200 * 100vw);
          margin: calc(30 / 1200 * 100vw) auto 0; } }
      @media only screen and (min-width: 1200px) {
        .cp02--cont .cp02_prize li {
          width: 485px;
          margin: 30px auto 0; } }
    .cp02--cont .cp02_prize li + li {
      margin: calc(53 / 750 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .cp02--cont .cp02_prize li + li {
          margin-top: calc(30 / 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .cp02--cont .cp02_prize li + li {
          margin-top: 30px; } }
  .cp02--cont .note {
    margin: 1.5em auto 0;
    font-size: 3vw;
    text-align: center; }
    @media only screen and (min-width: 769px) {
      .cp02--cont .note {
        margin: 1.2em auto 0;
        font-size: calc(20 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .cp02--cont .note {
        font-size: 20px; } }

.cp--cont__prod {
  width: calc(566 / 750 * 100vw);
  margin: calc(100 / 750 * 100vw) auto 0; }
  @media only screen and (min-width: 769px) {
    .cp--cont__prod {
      width: calc(338 / 1200 * 100vw);
      margin: calc(110 / 1200 *100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .cp--cont__prod {
      width: 338px;
      margin: 110px auto 0; } }

.cp--cont__method {
  width: 69.333vw;
  margin: 8.666vw auto 0;
  background-color: #fff;
  padding-bottom: 5.25vw; }
  @media only screen and (min-width: 769px) {
    .cp--cont__method {
      width: calc(900 / 1200 *100vw);
      margin: calc(88 / 1200 *100vw) auto 0;
      padding-bottom: calc(30 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .cp--cont__method {
      width: 900px;
      margin: 88px auto 0;
      padding-bottom: 30px; } }
  .cp--cont__method__title {
    background-color: #63559f;
    padding: 3.733vw 0;
    text-align: center;
    color: #fff;
    font-size: 5.156vw; }
    @media only screen and (min-width: 769px) {
      .cp--cont__method__title {
        padding: calc(20 / 1200 *100vw) 0;
        font-size: calc(27 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .cp--cont__method__title {
        padding: 20px 0;
        font-size: 2.7rem; } }
    .cp--cont__method__title img {
      width: 46.562vw; }
      @media only screen and (min-width: 769px) {
        .cp--cont__method__title img {
          width: calc(235 / 1200 *100vw); } }
      @media only screen and (min-width: 1200px) {
        .cp--cont__method__title img {
          width: 235px; } }
  .cp--cont__method__cont {
    margin: 5.25vw 1vw 0 4vw;
    padding: 0 1em 1em 0;
    height: 100vw;
    overflow-y: auto;
    font-size: 12px; }
    @media only screen and (min-width: 769px) {
      .cp--cont__method__cont {
        margin: calc(30 / 1200 *100vw) calc(20 / 1200 *100vw) 0 calc(40 / 1200 *100vw);
        padding: 0 1.2em 1em 0;
        height: calc(300 / 1200 *100vw);
        overflow-y: auto;
        font-size: 13px; } }
    @media only screen and (min-width: 1200px) {
      .cp--cont__method__cont {
        margin: 30px 20px 0 40px;
        height: 300px;
        overflow-y: auto;
        font-size: 14px; } }
    .cp--cont__method__cont h4 {
      font-size: 14px;
      margin-bottom: 0.5em; }
    .cp--cont__method__cont h5 {
      font-size: 14px;
      margin-bottom: 0.5em; }
    .cp--cont__method__cont p {
      margin-bottom: 1em; }
      .cp--cont__method__cont p.note {
        padding-left: 1em;
        text-indent: -1em; }
    .cp--cont__method__cont ul li {
      padding-left: 1em;
      text-indent: -1em;
      margin-bottom: 0.5em; }

.cp--cont__note {
  margin: 11.2vw auto 0;
  color: #FFF;
  font-size: 3vw;
  text-align: center; }
  @media only screen and (min-width: 769px) {
    .cp--cont__note {
      margin: calc(62 / 1200 *100vw) auto 0;
      font-size: calc(20 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .cp--cont__note {
      margin: 62px auto 0;
      font-size: 20px; } }

.cp--cont__entrybtn {
  width: 70vw;
  margin: 2.933vw auto 0; }
  @media only screen and (min-width: 769px) {
    .cp--cont__entrybtn {
      width: calc(526 / 1200 *100vw);
      margin: calc(22 / 1200 *100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .cp--cont__entrybtn {
      width: 526px;
      margin: 22px auto 0; } }

a:hover img {
  filter: saturate(120%); }

.coupon {
  background-image: url("../img/bg_coupon_sp.png");
  background-repeat: repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: 16.666vw 0 12vw; }
  @media only screen and (min-width: 769px) {
    .coupon {
      background-image: url("../img/bg_coupon_pc.png");
      background-size: 100% auto;
      padding: calc(220 / 1200 *100vw) 0 calc(142 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .coupon {
      background-image: url("../img/bg_coupon_pcl.png");
      background-size: auto auto;
      padding: 220px 0 142px; } }
  @media only screen and (min-width: 769px) {
    .coupon--inner {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: calc(1100 / 1200 *100vw);
      margin: 0 auto; } }
  @media only screen and (min-width: 1200px) {
    .coupon--inner {
      width: 1100px; } }
  .coupon--inner__cont {
    position: relative;
    background: #008a22;
    border-radius: 1.666vw;
    width: 88vw;
    margin: 0 auto 0;
    padding: 27.2vw 0 5.866vw; }
    @media only screen and (min-width: 769px) {
      .coupon--inner__cont {
        width: 100%;
        border-radius: calc(18 / 1200 *100vw);
        padding: calc(198 / 1200 *100vw) 0 calc(45 / 1200 *100vw) 0; } }
    @media only screen and (min-width: 1200px) {
      .coupon--inner__cont {
        border-radius: 18px;
        padding: 198px 0 45px 0; } }
    .coupon--inner__cont__ti {
      position: absolute;
      width: 78.8vw;
      top: -11.466vw;
      left: 0;
      right: 0;
      margin: auto; }
      @media only screen and (min-width: 769px) {
        .coupon--inner__cont__ti {
          width: calc(962 / 1200 *100vw);
          top: calc(-150 / 1200 *100vw); } }
      @media only screen and (min-width: 1200px) {
        .coupon--inner__cont__ti {
          width: 962px;
          top: -150px; } }
    .coupon--inner__cont__stamp {
      position: relative;
      width: 80vw;
      background: #FFF;
      border-radius: 1.733vw;
      height: 102.933vw;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .coupon--inner__cont__stamp {
          width: calc(890 / 1200 *100vw);
          height: calc(646 / 1200 *100vw);
          border-radius: calc(15 / 1200 *100vw); } }
      @media only screen and (min-width: 1200px) {
        .coupon--inner__cont__stamp {
          width: 890px;
          height: 646px;
          border-radius: 15px; } }
      .coupon--inner__cont__stamp .icon {
        position: absolute;
        width: 44.266vw;
        top: -10.133vw;
        left: -1.866vw; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__stamp .icon {
            width: calc(210 / 1200 *100vw);
            top: calc(-20 / 1200 *100vw);
            left: calc(-56 / 1200 *100vw); } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__stamp .icon {
            width: 210px;
            top: -20px;
            left: -56px; } }
      .coupon--inner__cont__stamp .text {
        position: absolute;
        width: 78.266vw;
        top: 5.2vw;
        right: -2.133vw; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__stamp .text {
            width: calc(618 / 1200 *100vw);
            top: calc(47 / 1200 *100vw);
            right: calc(102 / 1200 *100vw); } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__stamp .text {
            width: 618px;
            top: 47px;
            right: 102px; } }
      .coupon--inner__cont__stamp .note {
        width: 23em;
        position: absolute;
        bottom: 2.4vw;
        left: 0;
        right: 0;
        font-size: 2.266vw;
        margin: auto; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__stamp .note {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            font-size: calc(14 / 1200 *100vw);
            bottom: calc(16 / 1200 *100vw); } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__stamp .note {
            bottom: 16px;
            font-size: 1.4rem; } }
        .coupon--inner__cont__stamp .note li {
          text-align: left;
          line-height: 1.3em;
          color: #008b22;
          text-indent: -1em;
          padding-left: 1em;
          margin-top: 0.4em; }
          @media only screen and (min-width: 769px) {
            .coupon--inner__cont__stamp .note li {
              text-align: center;
              text-indent: 0;
              padding-left: 0; } }
    .coupon--inner__cont__point {
      position: relative;
      width: 80vw;
      background: #FFF;
      border-radius: 1.733vw;
      margin: 16.533vw auto 0;
      padding: 7.333vw 0 5.333vw; }
      @media only screen and (min-width: 769px) {
        .coupon--inner__cont__point {
          width: calc(890 / 1200 *100vw);
          border-radius: calc(15 / 1200 *100vw);
          padding: calc(43 / 1200 *100vw) 0 calc(47 / 1200 *100vw);
          margin: calc(110 / 1200 *100vw) auto 0; } }
      @media only screen and (min-width: 1200px) {
        .coupon--inner__cont__point {
          width: 890px;
          border-radius: 15px;
          padding: 43px 0 47px;
          margin: 110px auto 0; } }
      .coupon--inner__cont__point .icon {
        position: absolute;
        width: 44.266vw;
        top: -10.133vw;
        left: -1.866vw; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__point .icon {
            width: calc(210 / 1200 *100vw);
            top: calc(-20 / 1200 *100vw);
            left: calc(-56 / 1200 *100vw); } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__point .icon {
            width: 210px;
            top: -20px;
            left: -56px; } }
      .coupon--inner__cont__point .text {
        width: 71.6vw;
        margin: 0 auto 0 4.533vw; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__point .text {
            width: calc(799 / 1200 *100vw);
            margin: 0 auto 0 calc(56 / 1200 *100vw); } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__point .text {
            width: 799px;
            margin: 0 auto 0 56px; } }
      .coupon--inner__cont__point .glaph {
        width: 72.133vw;
        margin: 3.066vw auto 0; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__point .glaph {
            width: calc(824 / 1200 *100vw);
            margin: calc(25 / 1200 *100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__point .glaph {
            width: 824px;
            margin: 25px auto 0; } }
    .coupon--inner__cont__more {
      position: relative;
      width: 80vw;
      background: #FFF;
      border-radius: 1.733vw;
      margin: 16.533vw auto 0;
      padding: 3.2vw 0 4.8vw; }
      @media only screen and (min-width: 769px) {
        .coupon--inner__cont__more {
          width: calc(890 / 1200 *100vw);
          border-radius: calc(15 / 1200 *100vw);
          padding: calc(42 / 1200 *100vw) 0 calc(40 / 1200 *100vw);
          margin: calc(110 / 1200 *100vw) auto 0; } }
      @media only screen and (min-width: 1200px) {
        .coupon--inner__cont__more {
          width: 890px;
          border-radius: 15px;
          padding: 42px 0 40px;
          margin: 110px auto 0; } }
      .coupon--inner__cont__more .icon {
        position: absolute;
        width: 28.933vw;
        top: -10.133vw;
        left: 1.866vw; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__more .icon {
            width: calc(210 / 1200 *100vw);
            top: calc(-30 / 1200 *100vw);
            left: calc(-56 / 1200 *100vw); } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__more .icon {
            width: 210px;
            top: -30px;
            left: -56px; } }
      .coupon--inner__cont__more .text {
        width: 70vw;
        margin: 0 auto 0 5.6vw; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__more .text {
            width: calc(788 / 1200 *100vw);
            margin: 0 auto 0 calc(27/ 1200 *100vw); } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__more .text {
            width: 788px;
            margin: 0 auto 0 27px; } }
      .coupon--inner__cont__more .bt_coopon {
        width: 53.33vw;
        margin: 4vw auto 0; }
        @media only screen and (min-width: 769px) {
          .coupon--inner__cont__more .bt_coopon {
            width: calc(400 / 1200 *100vw);
            margin: calc(22/ 1200 *100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .coupon--inner__cont__more .bt_coopon {
            width: 400px;
            margin: 22px auto; } }
  .coupon--inner__note {
    width: 80vw;
    margin: 7.656vw auto 0;
    font-size: 2.2vw;
    color: #FFF;
    text-align: center; }
    @media only screen and (min-width: 769px) {
      .coupon--inner__note {
        width: calc(846 / 1200 *100vw);
        margin: calc(52 / 1200 *100vw) auto 0;
        font-size: calc(13 / 1200 *100vw);
        padding-left: 1em; } }
    @media only screen and (min-width: 1200px) {
      .coupon--inner__note {
        width: 846px;
        margin: 52px auto 0;
        font-size: 13px; } }
    .coupon--inner__note li {
      padding-left: 1em;
      text-indent: -1em;
      text-align: left; }
  .coupon--inner__atten {
    margin: 7.6vw auto 0;
    width: 43.466vw; }
    @media only screen and (min-width: 769px) {
      .coupon--inner__atten {
        margin: calc(67 / 1200 *100vw) auto 0;
        width: calc(400 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .coupon--inner__atten {
        margin: 67px auto 0;
        width: 400px; } }
  .coupon--inner__btn {
    margin: 2.5vw auto 0;
    width: 68.533vw;
    filter: drop-shadow(1vw 1vw 0px #006018); }
    @media only screen and (min-width: 769px) {
      .coupon--inner__btn {
        margin: calc(14 / 1200 *100vw) auto 0;
        width: calc(633 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .coupon--inner__btn {
        margin: 14px auto 0;
        width: 633px; } }
    .coupon--inner__btn:hover {
      opacity: 0.8; }

.online {
  background-image: url("../img/bg_online_sp.png");
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  padding: 14.4vw 0 10.4vw; }
  @media only screen and (min-width: 769px) {
    .online {
      background-image: url("../img/bg_online_pc.png");
      background-position: top center;
      padding: calc(116 / 1200 *100vw) 0 calc(113 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .online {
      background-image: url("../img/bg_online_pcl.png");
      background-size: auto auto;
      padding: 116px 0 113px; } }
  .online--inner {
    position: relative;
    width: 81.866%;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .online--inner {
        width: calc(881 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .online--inner {
        width: 881px;
        margin: 0 auto; } }
    .online--inner__ti {
      position: absolute;
      width: 63.466vw;
      top: -3.6vw;
      left: 0;
      right: 0;
      margin: auto; }
      @media only screen and (min-width: 769px) {
        .online--inner__ti {
          width: calc(540 / 1200 *100vw);
          top: calc(-30 / 1200 *100vw); } }
      @media only screen and (min-width: 1200px) {
        .online--inner__ti {
          width: 540px;
          top: -30px; } }
    .online--inner__bt {
      position: absolute;
      width: 56.933vw;
      top: 24.133vw;
      left: 0;
      right: 0;
      margin: auto;
      filter: drop-shadow(0vw 0.8vw 0px rgba(0, 0, 0, 0.3)); }
      @media only screen and (min-width: 769px) {
        .online--inner__bt {
          width: calc(400 / 1200 *100vw);
          top: calc(224 / 1200 *100vw);
          filter: drop-shadow(0vw calc(6 / 1200 *100vw) 0px rgba(0, 0, 0, 0.3)); } }
      @media only screen and (min-width: 1200px) {
        .online--inner__bt {
          width: 400px;
          top: 224px;
          filter: drop-shadow(0vw 6px 0px rgba(0, 0, 0, 0.3)); } }
      .online--inner__bt:hover {
        transform: translate(0px, 5px);
        transition: transform .2s;
        filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); }

.footer {
  padding: 8.8vw 0 35vw; }
  @media only screen and (min-width: 769px) {
    .footer {
      padding: calc(70 / 1200 *100vw) 0 calc(75 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .footer {
      padding: 70px 0 75px; } }
  .footer--note {
    text-align: center;
    font-size: 2vw; }
    @media only screen and (min-width: 769px) {
      .footer--note {
        font-size: calc(15 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .footer--note {
        font-size: 15px; } }

#fix_bt {
  position: fixed;
  width: 100%;
  background: #FFF;
  border-top: 1.333vw solid #009be4;
  padding: 2.666vw 4vw 4vw;
  bottom: -30vw;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between; }
  @media only screen and (min-width: 769px) {
    #fix_bt {
      border: none;
      background: none;
      padding: 0;
      display: block;
      position: fixed;
      width: calc(177 / 1200 *100vw);
      bottom: calc(-500 / 1200 *100vw);
      right: calc(20 / 1200 *100vw);
      transition: all 0.25s ease;
      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.75)); } }
  @media only screen and (min-width: 1200px) {
    #fix_bt {
      width: 177px;
      bottom: -500px;
      right: 20px; } }
  #fix_bt li {
    height: 18.666vw;
    filter: drop-shadow(0 0.3vw 0.3vw rgba(0, 0, 0, 0.75)); }
    @media only screen and (min-width: 769px) {
      #fix_bt li {
        height: calc(49 / 1200 *100vw);
        filter: none; } }
    @media only screen and (min-width: 1200px) {
      #fix_bt li {
        height: 49px; } }
    #fix_bt li img {
      width: auto;
      height: 100%; }
      @media only screen and (min-width: 769px) {
        #fix_bt li img {
          width: 100%;
          height: auto; } }
      #fix_bt li img:hover {
        cursor: pointer; }
        @media only screen and (min-width: 769px) {
          #fix_bt li img:hover {
            filter: saturate(200%); } }
  #fix_bt li + li {
    margin-top: 0; }
  #fix_bt.active {
    bottom: 0; }
    @media only screen and (min-width: 769px) {
      #fix_bt.active {
        bottom: 20px; } }

.modal--wrap {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: -1; }
  .modal--wrap.active {
    display: block;
    z-index: 8888; }

.modal--closer {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2; }
  .modal--closer.active {
    z-index: 7777;
    display: block;
    cursor: pointer; }

.modal--close--btn {
  position: fixed;
  display: block;
  top: 2vw;
  left: 50%;
  transform: translateX(37vw);
  width: 10vw;
  height: 10vw;
  background-image: url(../img/close_btn.svg);
  background-size: cover;
  z-index: -3; }
  @media only screen and (min-width: 769px) {
    .modal--close--btn {
      width: calc(60 / 1200 *100vw);
      height: calc(60 / 1200 *100vw);
      top: calc(25 / 1200 *100vw);
      transform: translateX(calc(460 / 1200 *100vw)); } }
  @media only screen and (min-width: 1200px) {
    .modal--close--btn {
      width: 60px;
      height: 60px;
      top: 25px;
      transform: translateX(460px); } }
  .modal--close--btn.active {
    z-index: 10000;
    display: block;
    cursor: pointer; }

.modal--bk {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(240, 240, 240, 0.4);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  backdrop-filter: blur(15px) brightness(100%); }
  .modal--bk.active {
    display: block;
    z-index: 6666; }

.modal01, .modal02, .modal03, .modal04, .modal05, .modal06, .modal07 {
  position: relative;
  z-index: 9999;
  display: none;
  opacity: 0;
  padding: 5vw 0 10vw;
  width: calc(630 / 750 *100vw);
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .modal01, .modal02, .modal03, .modal04, .modal05, .modal06, .modal07 {
      padding: calc(50 / 1200 *100vw) 0;
      width: calc(1000 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal01, .modal02, .modal03, .modal04, .modal05, .modal06, .modal07 {
      padding: 50px 0;
      width: 1000px; } }
  .modal01.active, .modal02.active, .modal03.active, .modal04.active, .modal05.active, .modal06.active, .modal07.active {
    display: block;
    animation: fadeIn 0.25s ease-out forwards; }
  .modal01 .close--btn, .modal02 .close--btn, .modal03 .close--btn, .modal04 .close--btn, .modal05 .close--btn, .modal06 .close--btn, .modal07 .close--btn {
    width: 100px;
    margin: 0 auto; }
  .modal01 .detail, .modal02 .detail, .modal03 .detail, .modal04 .detail, .modal05 .detail, .modal06 .detail, .modal07 .detail {
    background: #FFF;
    padding: 0 0 4.6vw 0; }
    @media only screen and (min-width: 769px) {
      .modal01 .detail, .modal02 .detail, .modal03 .detail, .modal04 .detail, .modal05 .detail, .modal06 .detail, .modal07 .detail {
        padding: 0 0 calc(56 / 1200 *100vw) 0; } }
    @media only screen and (min-width: 1200px) {
      .modal01 .detail, .modal02 .detail, .modal03 .detail, .modal04 .detail, .modal05 .detail, .modal06 .detail, .modal07 .detail {
        padding: 0 0 56px 0; } }
    .modal01 .detail .collabo, .modal02 .detail .collabo, .modal03 .detail .collabo, .modal04 .detail .collabo, .modal05 .detail .collabo, .modal06 .detail .collabo, .modal07 .detail .collabo {
      width: 15em;
      text-align: center;
      padding: 0.2em;
      border: 1px solid #000;
      font-size: 3vw;
      font-weight: bold;
      margin: 14.4vw auto 0; }
      @media only screen and (min-width: 769px) {
        .modal01 .detail .collabo, .modal02 .detail .collabo, .modal03 .detail .collabo, .modal04 .detail .collabo, .modal05 .detail .collabo, .modal06 .detail .collabo, .modal07 .detail .collabo {
          font-size: calc(18 / 1200 *100vw);
          margin: calc(90 / 1200 *100vw) auto 0; } }
      @media only screen and (min-width: 1200px) {
        .modal01 .detail .collabo, .modal02 .detail .collabo, .modal03 .detail .collabo, .modal04 .detail .collabo, .modal05 .detail .collabo, .modal06 .detail .collabo, .modal07 .detail .collabo {
          font-size: 1.8rem;
          margin: 90px auto 0; } }
    .modal01 .detail .close--btn, .modal02 .detail .close--btn, .modal03 .detail .close--btn, .modal04 .detail .close--btn, .modal05 .detail .close--btn, .modal06 .detail .close--btn, .modal07 .detail .close--btn {
      width: 30.26vw;
      margin: 4.26vw auto 0;
      cursor: pointer; }
      @media only screen and (min-width: 769px) {
        .modal01 .detail .close--btn, .modal02 .detail .close--btn, .modal03 .detail .close--btn, .modal04 .detail .close--btn, .modal05 .detail .close--btn, .modal06 .detail .close--btn, .modal07 .detail .close--btn {
          width: calc(190 / 1200 *100vw);
          margin: calc(42 / 1200 *100vw) auto 0; } }
      @media only screen and (min-width: 1200px) {
        .modal01 .detail .close--btn, .modal02 .detail .close--btn, .modal03 .detail .close--btn, .modal04 .detail .close--btn, .modal05 .detail .close--btn, .modal06 .detail .close--btn, .modal07 .detail .close--btn {
          width: 190px;
          margin: 42px auto 0; } }
      @media only screen and (min-width: 769px) {
        .modal01 .detail .close--btn:hover, .modal02 .detail .close--btn:hover, .modal03 .detail .close--btn:hover, .modal04 .detail .close--btn:hover, .modal05 .detail .close--btn:hover, .modal06 .detail .close--btn:hover, .modal07 .detail .close--btn:hover {
          opacity: 0.8; } }
    .modal01 .detail .note, .modal02 .detail .note, .modal03 .detail .note, .modal04 .detail .note, .modal05 .detail .note, .modal06 .detail .note, .modal07 .detail .note {
      text-align: center;
      font-size: 2.13vw;
      margin: 6.13vw auto 0; }
      @media only screen and (min-width: 769px) {
        .modal01 .detail .note, .modal02 .detail .note, .modal03 .detail .note, .modal04 .detail .note, .modal05 .detail .note, .modal06 .detail .note, .modal07 .detail .note {
          font-size: calc(14 / 1200 *100vw);
          margin: calc(52 / 1200 *100vw) auto 0; } }
      @media only screen and (min-width: 1200px) {
        .modal01 .detail .note, .modal02 .detail .note, .modal03 .detail .note, .modal04 .detail .note, .modal05 .detail .note, .modal06 .detail .note, .modal07 .detail .note {
          font-size: 1.4rem;
          margin: 52px auto 0; } }
      .modal01 .detail .note.l2, .modal02 .detail .note.l2, .modal03 .detail .note.l2, .modal04 .detail .note.l2, .modal05 .detail .note.l2, .modal06 .detail .note.l2, .modal07 .detail .note.l2 {
        margin: 2vw auto 0; }
        @media only screen and (min-width: 769px) {
          .modal01 .detail .note.l2, .modal02 .detail .note.l2, .modal03 .detail .note.l2, .modal04 .detail .note.l2, .modal05 .detail .note.l2, .modal06 .detail .note.l2, .modal07 .detail .note.l2 {
            margin: calc(15 / 1200 *100vw) auto 0; } }
        @media only screen and (min-width: 1200px) {
          .modal01 .detail .note.l2, .modal02 .detail .note.l2, .modal03 .detail .note.l2, .modal04 .detail .note.l2, .modal05 .detail .note.l2, .modal06 .detail .note.l2, .modal07 .detail .note.l2 {
            margin: 15px auto 0; } }

.modal01 .detail .pop_ti, .modal02 .detail .pop_ti, .modal03 .detail .pop_ti, .modal04 .detail .pop_ti {
  width: 100%; }
.modal01 .detail .pop_md01, .modal02 .detail .pop_md01, .modal03 .detail .pop_md01, .modal04 .detail .pop_md01 {
  width: 80.5vw;
  margin: 4.5vw auto 0; }
  @media only screen and (min-width: 769px) {
    .modal01 .detail .pop_md01, .modal02 .detail .pop_md01, .modal03 .detail .pop_md01, .modal04 .detail .pop_md01 {
      margin: calc(50 / 1200 *100vw) auto 0;
      width: calc(804 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal01 .detail .pop_md01, .modal02 .detail .pop_md01, .modal03 .detail .pop_md01, .modal04 .detail .pop_md01 {
      margin: 50px auto 0;
      width: 804px; } }
.modal01 .detail .prod_list, .modal02 .detail .prod_list, .modal03 .detail .prod_list, .modal04 .detail .prod_list {
  width: 75.73vw;
  margin: 0 auto 0; }
  @media only screen and (min-width: 769px) {
    .modal01 .detail .prod_list, .modal02 .detail .prod_list, .modal03 .detail .prod_list, .modal04 .detail .prod_list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin: 0 auto 0;
      width: calc(896 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal01 .detail .prod_list, .modal02 .detail .prod_list, .modal03 .detail .prod_list, .modal04 .detail .prod_list {
      margin: 0 auto 0;
      width: 896px; } }
  .modal01 .detail .prod_list li, .modal02 .detail .prod_list li, .modal03 .detail .prod_list li, .modal04 .detail .prod_list li {
    width: 65.6vw;
    margin: 10.6vw auto 0; }
    @media only screen and (min-width: 769px) {
      .modal01 .detail .prod_list li, .modal02 .detail .prod_list li, .modal03 .detail .prod_list li, .modal04 .detail .prod_list li {
        margin: calc(50 / 1200 *100vw) 0 0;
        width: calc(410 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .modal01 .detail .prod_list li, .modal02 .detail .prod_list li, .modal03 .detail .prod_list li, .modal04 .detail .prod_list li {
        margin: 50px 0 0;
        width: 410px; } }
.modal01 .detail .train, .modal02 .detail .train, .modal03 .detail .train, .modal04 .detail .train {
  width: 100%;
  margin: 13.3vw auto 0; }
  @media only screen and (min-width: 769px) {
    .modal01 .detail .train, .modal02 .detail .train, .modal03 .detail .train, .modal04 .detail .train {
      margin: calc(100 / 1200 *100vw) auto 0;
      width: calc(858 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal01 .detail .train, .modal02 .detail .train, .modal03 .detail .train, .modal04 .detail .train {
      margin: 100px auto 0;
      width: 858px; } }
.modal01 .detail .pop_md02, .modal02 .detail .pop_md02, .modal03 .detail .pop_md02, .modal04 .detail .pop_md02 {
  width: 65.66vw;
  margin: 20.26vw auto 0; }
  @media only screen and (min-width: 769px) {
    .modal01 .detail .pop_md02, .modal02 .detail .pop_md02, .modal03 .detail .pop_md02, .modal04 .detail .pop_md02 {
      margin: calc(158 / 1200 *100vw) auto 0;
      width: calc(688 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal01 .detail .pop_md02, .modal02 .detail .pop_md02, .modal03 .detail .pop_md02, .modal04 .detail .pop_md02 {
      margin: 158px auto 0;
      width: 688px; } }
.modal01 .detail .train + .pop_md02, .modal02 .detail .train + .pop_md02, .modal03 .detail .train + .pop_md02, .modal04 .detail .train + .pop_md02 {
  margin-top: 9.06vw; }
  @media only screen and (min-width: 769px) {
    .modal01 .detail .train + .pop_md02, .modal02 .detail .train + .pop_md02, .modal03 .detail .train + .pop_md02, .modal04 .detail .train + .pop_md02 {
      margin: calc(100 / 1200 *100vw) auto 0; } }
  @media only screen and (min-width: 1200px) {
    .modal01 .detail .train + .pop_md02, .modal02 .detail .train + .pop_md02, .modal03 .detail .train + .pop_md02, .modal04 .detail .train + .pop_md02 {
      margin: 100px auto 0; } }
.modal01 .detail .area_list, .modal02 .detail .area_list, .modal03 .detail .area_list, .modal04 .detail .area_list {
  width: 65.6vw;
  margin: 6.4vw auto 0; }
  @media only screen and (min-width: 769px) {
    .modal01 .detail .area_list, .modal02 .detail .area_list, .modal03 .detail .area_list, .modal04 .detail .area_list {
      margin: calc(58 / 1200 *100vw) auto 0;
      width: calc(880 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal01 .detail .area_list, .modal02 .detail .area_list, .modal03 .detail .area_list, .modal04 .detail .area_list {
      margin: 58px auto 0;
      width: 880px; } }
  .modal01 .detail .area_list li + li, .modal02 .detail .area_list li + li, .modal03 .detail .area_list li + li, .modal04 .detail .area_list li + li {
    margin: 13.46vw auto 0; }
    @media only screen and (min-width: 769px) {
      .modal01 .detail .area_list li + li, .modal02 .detail .area_list li + li, .modal03 .detail .area_list li + li, .modal04 .detail .area_list li + li {
        margin: calc(72 / 1200 *100vw) 0 0; } }
    @media only screen and (min-width: 1200px) {
      .modal01 .detail .area_list li + li, .modal02 .detail .area_list li + li, .modal03 .detail .area_list li + li, .modal04 .detail .area_list li + li {
        margin: 72px 0 0; } }
  .modal01 .detail .area_list li, .modal02 .detail .area_list li, .modal03 .detail .area_list li, .modal04 .detail .area_list li {
    position: relative; }
    .modal01 .detail .area_list li a, .modal02 .detail .area_list li a, .modal03 .detail .area_list li a, .modal04 .detail .area_list li a {
      width: 45vw;
      position: absolute;
      bottom: 6.6vw;
      left: 0;
      right: 0;
      margin: auto; }
      @media only screen and (min-width: 769px) {
        .modal01 .detail .area_list li a, .modal02 .detail .area_list li a, .modal03 .detail .area_list li a, .modal04 .detail .area_list li a {
          width: calc(300 / 1200 *100vw);
          bottom: calc(48 / 1200 *100vw); } }
      @media only screen and (min-width: 1200px) {
        .modal01 .detail .area_list li a, .modal02 .detail .area_list li a, .modal03 .detail .area_list li a, .modal04 .detail .area_list li a {
          width: 300px;
          bottom: 48px; } }
      .modal01 .detail .area_list li a:hover img, .modal02 .detail .area_list li a:hover img, .modal03 .detail .area_list li a:hover img, .modal04 .detail .area_list li a:hover img {
        opacity: 1;
        filter: brightness(1); }
        @media only screen and (min-width: 769px) {
          .modal01 .detail .area_list li a:hover img, .modal02 .detail .area_list li a:hover img, .modal03 .detail .area_list li a:hover img, .modal04 .detail .area_list li a:hover img {
            filter: brightness(1.2); } }

.modal05 .detail .pop_ti, .modal06 .detail .pop_ti, .modal07 .detail .pop_ti {
  width: 100%; }
.modal05 .detail .prod_list, .modal06 .detail .prod_list, .modal07 .detail .prod_list {
  width: 75.73vw;
  margin: 9.333vw auto 0; }
  @media only screen and (min-width: 769px) {
    .modal05 .detail .prod_list, .modal06 .detail .prod_list, .modal07 .detail .prod_list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin: calc(100 / 1200 *100vw) auto 0;
      width: calc(896 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal05 .detail .prod_list, .modal06 .detail .prod_list, .modal07 .detail .prod_list {
      margin: 100px auto 0;
      width: 896px; } }
  .modal05 .detail .prod_list li, .modal06 .detail .prod_list li, .modal07 .detail .prod_list li {
    width: 65.6vw;
    margin: 10.6vw auto 0; }
    @media only screen and (min-width: 769px) {
      .modal05 .detail .prod_list li, .modal06 .detail .prod_list li, .modal07 .detail .prod_list li {
        margin: calc(50 / 1200 *100vw) 0 0;
        width: calc(410 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .modal05 .detail .prod_list li, .modal06 .detail .prod_list li, .modal07 .detail .prod_list li {
        margin: 50px 0 0;
        width: 410px; } }

.modal01 .prod_list li, .modal01 .area_list li {
  filter: drop-shadow(1.33vw 1.33vw 0 #f8ccc8); }
  @media only screen and (min-width: 769px) {
    .modal01 .prod_list li, .modal01 .area_list li {
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #f8ccc8); } }
  @media only screen and (min-width: 1200px) {
    .modal01 .prod_list li, .modal01 .area_list li {
      filter: drop-shadow(8px 8px 0 #f8ccc8); } }

.modal02 .check_sapporo {
  background: #ffffb6;
  width: 75.73vw;
  margin: 7.75vw auto 0;
  border: 0.96vw solid #009fe8;
  filter: drop-shadow(1.33vw 1.33vw 0 #b2e2f8); }
  @media only screen and (min-width: 769px) {
    .modal02 .check_sapporo {
      display: flex;
      justify-content: space-between;
      width: calc(922 / 1200 *100vw);
      margin: calc(38 / 1200 *100vw) auto 0;
      border: calc(6 / 1200 *100vw) solid #009fe8;
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #b2e2f8); } }
  @media only screen and (min-width: 1200px) {
    .modal02 .check_sapporo {
      width: 922px;
      margin: 38px auto 0;
      border: 6px solid #009fe8;
      filter: drop-shadow(8px 8px 0 #b2e2f8); } }
  @media only screen and (min-width: 769px) {
    .modal02 .check_sapporo .shop {
      width: calc(446 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal02 .check_sapporo .shop {
      width: 446px; } }
  .modal02 .check_sapporo .prod {
    width: 65.6vw;
    margin: 7.2vw auto 0;
    padding: 0 0 4.93vw; }
    @media only screen and (min-width: 769px) {
      .modal02 .check_sapporo .prod {
        width: calc(464 / 1200 *100vw);
        margin: 0;
        padding: calc(27 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .modal02 .check_sapporo .prod {
        width: 464px;
        padding: 27px; } }
.modal02 .prod_list li, .modal02 .area_list li {
  filter: drop-shadow(1.33vw 1.33vw 0 #b2e2f8); }
  @media only screen and (min-width: 769px) {
    .modal02 .prod_list li, .modal02 .area_list li {
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #b2e2f8); } }
  @media only screen and (min-width: 1200px) {
    .modal02 .prod_list li, .modal02 .area_list li {
      filter: drop-shadow(8px 8px 0 #b2e2f8); } }

.modal03 .check_hakodate01 .prod02, .modal03 .check_hakodate03 .prod02 {
  width: 65.6vw;
  margin: 0vw auto 0;
  padding: 0 0 4.93vw; }
  @media only screen and (min-width: 769px) {
    .modal03 .check_hakodate01 .prod02, .modal03 .check_hakodate03 .prod02 {
      width: calc(856 / 1200 *100vw);
      margin: 0 auto;
      padding: 0 0 calc(27 / 1200 *100vw) 0; } }
  @media only screen and (min-width: 1200px) {
    .modal03 .check_hakodate01 .prod02, .modal03 .check_hakodate03 .prod02 {
      width: 856px;
      padding: 0 0 27px; } }
  .modal03 .check_hakodate01 .prod02 .list, .modal03 .check_hakodate03 .prod02 .list {
    width: 75.73vw;
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .modal03 .check_hakodate01 .prod02 .list, .modal03 .check_hakodate03 .prod02 .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 auto 0;
        width: calc(856 / 1200 *100vw); } }
    @media only screen and (min-width: 1200px) {
      .modal03 .check_hakodate01 .prod02 .list, .modal03 .check_hakodate03 .prod02 .list {
        margin: 0 auto 0;
        width: 856px; } }
    .modal03 .check_hakodate01 .prod02 .list li, .modal03 .check_hakodate03 .prod02 .list li {
      width: 65.6vw;
      margin: 9.7vw 0 0;
      filter: drop-shadow(1.33vw 1.33vw 0 #cfbada); }
      @media only screen and (min-width: 769px) {
        .modal03 .check_hakodate01 .prod02 .list li, .modal03 .check_hakodate03 .prod02 .list li {
          margin: calc(50 / 1200 *100vw) 0 0;
          width: calc(410 / 1200 *100vw);
          filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #cfbada); } }
      @media only screen and (min-width: 1200px) {
        .modal03 .check_hakodate01 .prod02 .list li, .modal03 .check_hakodate03 .prod02 .list li {
          margin: 50px 0 0;
          width: 410px;
          filter: drop-shadow(8px 8px 0 #cfbada); } }
.modal03 .check_hakodate01 {
  background: #ffffb6;
  width: 75.73vw;
  margin: 7.75vw auto 0;
  border: 0.96vw solid #5f1985;
  filter: drop-shadow(1.33vw 1.33vw 0 #cfbada); }
  @media only screen and (min-width: 769px) {
    .modal03 .check_hakodate01 {
      width: calc(922 / 1200 *100vw);
      margin: calc(38 / 1200 *100vw) auto 0;
      border: calc(6 / 1200 *100vw) solid #5f1985;
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #cfbada); } }
  @media only screen and (min-width: 1200px) {
    .modal03 .check_hakodate01 {
      width: 922px;
      margin: 38px auto 0;
      border: 6px solid #5f1985;
      filter: drop-shadow(8px 8px 0 #cfbada); } }
  .modal03 .check_hakodate01 .shop {
    width: 100%; }
.modal03 .check_hakodate02 {
  background: #ffffb6;
  width: 75.73vw;
  margin: 9.86vw auto 0;
  border: 0.96vw solid #5f1985;
  filter: drop-shadow(1.33vw 1.33vw 0 #cfbada); }
  @media only screen and (min-width: 769px) {
    .modal03 .check_hakodate02 {
      display: flex;
      justify-content: space-between;
      width: calc(922 / 1200 *100vw);
      margin: calc(55 / 1200 *100vw) auto 0;
      border: calc(6 / 1200 *100vw) solid #5f1985;
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #cfbada); } }
  @media only screen and (min-width: 1200px) {
    .modal03 .check_hakodate02 {
      width: 922px;
      margin: 55px auto 0;
      border: 6px solid #5f1985;
      filter: drop-shadow(8px 8px 0 #cfbada); } }
  @media only screen and (min-width: 769px) {
    .modal03 .check_hakodate02 .shop {
      width: calc(446 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal03 .check_hakodate02 .shop {
      width: 446px; } }
  .modal03 .check_hakodate02 .prod {
    width: 65.6vw;
    margin: 7.2vw auto 0;
    padding: 0 0 4.93vw;
    filter: drop-shadow(1.33vw 1.33vw 0 #cfbada); }
    @media only screen and (min-width: 769px) {
      .modal03 .check_hakodate02 .prod {
        width: calc(464 / 1200 *100vw);
        margin: 0;
        padding: calc(27 / 1200 *100vw);
        filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #cfbada); } }
    @media only screen and (min-width: 1200px) {
      .modal03 .check_hakodate02 .prod {
        width: 464px;
        padding: 27px;
        filter: drop-shadow(8px 8px 0 #cfbada); } }
.modal03 .check_hakodate03 {
  background: #ffffb6;
  width: 75.73vw;
  margin: 9.86vw auto 0;
  border: 0.96vw solid #5f1985;
  filter: drop-shadow(1.33vw 1.33vw 0 #cfbada); }
  @media only screen and (min-width: 769px) {
    .modal03 .check_hakodate03 {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: calc(922 / 1200 *100vw);
      margin: calc(55 / 1200 *100vw) auto 0;
      border: calc(6 / 1200 *100vw) solid #5f1985;
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #cfbada); } }
  @media only screen and (min-width: 1200px) {
    .modal03 .check_hakodate03 {
      width: 922px;
      margin: 55px auto 0;
      border: 6px solid #5f1985;
      filter: drop-shadow(8px 8px 0 #cfbada); } }
  @media only screen and (min-width: 769px) {
    .modal03 .check_hakodate03 .shop {
      width: calc(446 / 1200 *100vw); } }
  @media only screen and (min-width: 1200px) {
    .modal03 .check_hakodate03 .shop {
      width: 446px; } }
  .modal03 .check_hakodate03 .prod {
    width: 65.6vw;
    margin: 7.2vw auto 0;
    padding: 0 0 4.93vw;
    filter: drop-shadow(1.33vw 1.33vw 0 #cfbada); }
    @media only screen and (min-width: 769px) {
      .modal03 .check_hakodate03 .prod {
        width: calc(464 / 1200 *100vw);
        margin: 0;
        padding: calc(27 / 1200 *100vw) calc(27 / 1200 *100vw) 0 0;
        filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #cfbada); } }
    @media only screen and (min-width: 1200px) {
      .modal03 .check_hakodate03 .prod {
        width: 464px;
        padding: 27px 27px 0 0;
        filter: drop-shadow(8px 8px 0 #cfbada); } }
.modal03 .prod_list li, .modal03 .area_list li {
  filter: drop-shadow(1.33vw 1.33vw 0 #cfbada); }
  @media only screen and (min-width: 769px) {
    .modal03 .prod_list li, .modal03 .area_list li {
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #cfbada); } }
  @media only screen and (min-width: 1200px) {
    .modal03 .prod_list li, .modal03 .area_list li {
      filter: drop-shadow(8px 8px 0 #cfbada); } }

.modal04 .prod_list li, .modal04 .area_list li {
  filter: drop-shadow(1.33vw 1.33vw 0 #b2e0c7); }
  @media only screen and (min-width: 769px) {
    .modal04 .prod_list li, .modal04 .area_list li {
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #b2e0c7); } }
  @media only screen and (min-width: 1200px) {
    .modal04 .prod_list li, .modal04 .area_list li {
      filter: drop-shadow(8px 8px 0 #b2e0c7); } }

.modal05 .prod_list li {
  filter: drop-shadow(1.33vw 1.33vw 0 #009844); }
  @media only screen and (min-width: 769px) {
    .modal05 .prod_list li {
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #009844); } }
  @media only screen and (min-width: 1200px) {
    .modal05 .prod_list li {
      filter: drop-shadow(8px 8px 0 #009844); } }

.modal06 .prod_list li {
  filter: drop-shadow(1.33vw 1.33vw 0 #e95548); }
  @media only screen and (min-width: 769px) {
    .modal06 .prod_list li {
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #e95548); } }
  @media only screen and (min-width: 1200px) {
    .modal06 .prod_list li {
      filter: drop-shadow(8px 8px 0 #e95548); } }

.modal07 .prod_list li {
  filter: drop-shadow(1.33vw 1.33vw 0 #009fe8); }
  @media only screen and (min-width: 769px) {
    .modal07 .prod_list li {
      filter: drop-shadow(calc(8 / 1200 *100vw) calc(8 / 1200 *100vw) 0 #009fe8); } }
  @media only screen and (min-width: 1200px) {
    .modal07 .prod_list li {
      filter: drop-shadow(8px 8px 0 #009fe8); } }

@keyframes fadeIn {
  from {
    opacity: 0.2; }
  to {
    opacity: 1; } }
/*点滅*/
.blink {
  animation: blinking 1.2s linear infinite; }

@keyframes blinking {
  0% {
    opacity: 1; }
  49% {
    opacity: 1; }
  50% {
    opacity: 0; }
  99% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*横スクロールアニメ*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
.fixedbtn {
  position: fixed;
  left: 0;
  bottom: calc(-850 / 750 * 100vw);
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: calc(10 / 750 * 100vw);
  transition: all 0.75s ease; }
  @media only screen and (min-width: 769px) {
    .fixedbtn {
      left: inherit;
      background-color: transparent;
      right: calc(30 / 1200 * 100vw);
      bottom: calc(-550 / 1200 * 100vw);
      width: calc(136 / 1200 * 100vw); } }
  @media only screen and (min-width: 1200px) {
    .fixedbtn {
      right: 30px;
      bottom: -550px;
      width: 136px; } }
  .fixedbtn.active {
    bottom: 0; }
    @media only screen and (min-width: 769px) {
      .fixedbtn.active {
        bottom: calc(20 / 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .fixedbtn.active {
        bottom: 20px; } }
  .fixedbtn ul {
    display: flex;
    justify-content: space-between;
    width: calc(693 / 750 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .fixedbtn ul {
        display: block;
        width: calc(136 / 1200 * 100vw); } }
    @media only screen and (min-width: 1200px) {
      .fixedbtn ul {
        width: 136px; } }
    .fixedbtn ul li {
      width: calc(161 / 750 * 100vw); }
      @media only screen and (min-width: 769px) {
        .fixedbtn ul li {
          width: calc(112 / 1200 * 100vw);
          margin: 0 auto calc(10 / 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .fixedbtn ul li {
          width: 112px;
          margin: 0 auto 10px; } }
      @media only screen and (min-width: 769px) {
        .fixedbtn ul li:nth-child(2) {
          width: calc(136 / 1200 * 100vw); } }
      @media only screen and (min-width: 1200px) {
        .fixedbtn ul li:nth-child(2) {
          width: 136px; } }

html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  word-wrap: break-word;
  background-color: #fff; }

body {
  width: 100%;
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
  overflow-x: hidden; }

*,
*::before,
*::after {
  box-sizing: border-box; }

h1, h2, h3, h4, section, nav, div, p, ul, li {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

img {
  width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom; }

a img {
  opacity: 1;
  transition: all 0.4s ease; }

@media only screen and (min-width: 769px) {
  a img:hover {
    opacity: 0.8; } }

.pcOnly {
  display: none; }
  @media only screen and (min-width: 769px) {
    .pcOnly {
      display: inline-block; } }

.spOnly {
  display: inline-block; }
  @media only screen and (min-width: 769px) {
    .spOnly {
      display: none; } }