html {
  scroll-behavior: smooth; }

br.sp- {
  display: none; }

br.sp {
  display: block; }

@media screen and (min-width: 600px) {
  br.sp- {
    display: block; }

  br.sp {
    display: none; } }
.sumikko_hokkaido {
  font-family: 'Noto Sans JP', sans-serif;
  background: #FFF3C2; }
  .sumikko_hokkaido img {
    width: 100%;
    height: auto; }
  .sumikko_hokkaido #eki_header {
    display: flex;
    justify-content: center;
    background-color: #e2eaae;
    background-image: radial-gradient(circle, #f3f7e0 12px, transparent 12px), radial-gradient(circle, #f3f7e0 12px, transparent 12px);
    background-position: 12px 12px, 48px 48px;
    background-size: 72px 72px;
    position: relative;
    padding: 2em 0; }
    .sumikko_hokkaido #eki_header img {
      max-width: 350px;
      margin: 0 auto;
      pointer-events: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-touch-callout: none;
      -moz-user-select: none;
      user-select: none; }
    @media screen and (min-width: 600px) {
      .sumikko_hokkaido #eki_header img {
        width: auto;
        max-width: 55vh; } }
  @media screen and (min-width: 600px) {
    .sumikko_hokkaido #eki_header {
      min-height: 100vh; } }
  .sumikko_hokkaido #area {
    padding-top: 2.5em;
    padding-bottom: 2.5em; }
    .sumikko_hokkaido #area .inner {
      width: 100%;
      max-width: 1260px;
      margin: 0 auto; }
      .sumikko_hokkaido #area .inner .title {
        width: 100%;
        max-width: 180px;
        margin: 0 auto; }
      .sumikko_hokkaido #area .inner .eki {
        width: 90%;
        max-width: 1260px;
        margin: 2.5em auto 0 auto; }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #area .inner .title {
          max-width: 425px; } }
  @media screen and (min-width: 600px) {
    .sumikko_hokkaido #area {
      padding-top: 5em;
      padding-bottom: 5em; } }
  .sumikko_hokkaido #character {
    padding-top: 2.5em;
    padding-bottom: 2.5em; }
    .sumikko_hokkaido #character .inner {
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
      position: relative; }
      .sumikko_hokkaido #character .inner h2 {
        background: #8CC11F;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 300px;
        margin: 0 auto;
        padding: 1.5em 0;
        border-radius: 50px;
        position: relative;
        z-index: 1; }
        .sumikko_hokkaido #character .inner h2 img {
          max-width: 240px; }
        @media screen and (min-width: 600px) {
          .sumikko_hokkaido #character .inner h2 img {
            max-width: 280px; } }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #character .inner h2 {
          max-width: 400px; } }
      .sumikko_hokkaido #character .inner .box {
        background: #FFF;
        border-radius: 10px;
        padding: 4em 1.5em 1.5em 1.5em;
        margin: -2.5em auto 0 auto;
        position: relative;
        z-index: 0; }
        .sumikko_hokkaido #character .inner .box .txt_img {
          padding: 1.5em 0; }
        .sumikko_hokkaido #character .inner .box p {
          font-size: 14px;
          font-weight: 600;
          line-height: 1.5;
          color: #7E644D; }
        @media screen and (min-width: 600px) {
          .sumikko_hokkaido #character .inner .box p {
            font-size: 16px; } }
        .sumikko_hokkaido #character .inner .box .btn {
          padding: 2em 0 1em 0; }
          .sumikko_hokkaido #character .inner .box .btn a {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.2;
            color: #FFF;
            text-decoration: none;
            border-radius: 10px;
            background: #76624e;
            padding: 2em 0;
            position: relative;
            transition: 0.3s all; }
          @media screen and (min-width: 600px) {
            .sumikko_hokkaido #character .inner .box .btn a {
              font-size: 18px; } }
          .sumikko_hokkaido #character .inner .box .btn a::after {
            display: block;
            content: "";
            width: 10px;
            height: 16px;
            background: url("../images/sh_arrow.svg") no-repeat;
            background-position: 0 0;
            background-size: 100%;
            position: relative;
            left: 10px; }
          .sumikko_hokkaido #character .inner .box .btn a:hover {
            background: rgba(118, 98, 78, 0.8); }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #character .inner .box {
          max-width: 580px;
          padding: 5em 2em 2em 2em; } }
  @media screen and (min-width: 600px) {
    .sumikko_hokkaido #character {
      padding-top: 4em;
      padding-bottom: 4em; } }
  .sumikko_hokkaido #vehicle {
    padding-top: 2.5em;
    padding-bottom: 2.5em; }
    .sumikko_hokkaido #vehicle h2 {
      width: 90%;
      max-width: 580px;
      margin: 0 auto;
      padding: 0 0 2.5em 0; }
    .sumikko_hokkaido #vehicle p {
      width: 90%;
      max-width: 580px;
      margin: 0 auto;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      color: #7E644D; }
    @media screen and (min-width: 600px) {
      .sumikko_hokkaido #vehicle p {
        font-size: 16px; } }
    .sumikko_hokkaido #vehicle .bg {
      position: relative;
      padding: 2.5em 0; }
      .sumikko_hokkaido #vehicle .bg img {
        max-width: 560px;
        margin: 0 0 0 auto; }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #vehicle .bg img {
          margin: 0 auto; } }
      .sumikko_hokkaido #vehicle .bg img.sp {
        display: block;
        width: 95%; }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #vehicle .bg img.sp {
          display: none; } }
      .sumikko_hokkaido #vehicle .bg img.pc {
        display: none; }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #vehicle .bg img.pc {
          display: block; } }
    .sumikko_hokkaido #vehicle .bg::before {
      display: block;
      content: "";
      width: 20%;
      height: 56%;
      max-width: 138px;
      max-height: 588px;
      background: url("../images/sh_vehicle_bg_left.png") no-repeat;
      background-position: 0 0;
      background-size: contain;
      position: absolute;
      left: 0;
      bottom: -2em; }
    .sumikko_hokkaido #vehicle .bg::after {
      display: block;
      content: "";
      width: 20%;
      height: 60%;
      max-width: 138px;
      max-height: 492px;
      background: url("../images/sh_vehicle_bg_right.png") no-repeat;
      background-position: 0 0;
      background-size: contain;
      position: absolute;
      top: 4em;
      right: 0; }
  @media screen and (min-width: 600px) {
    .sumikko_hokkaido #vehicle {
      padding-top: 4em;
      padding-bottom: 4em; } }
  .sumikko_hokkaido #free_gift {
    padding-top: 2.5em;
    padding-bottom: 2.5em; }
    .sumikko_hokkaido #free_gift h2 {
      width: 90%;
      max-width: 580px;
      margin: 0 auto;
      padding: 0 0 2.5em 0; }
    .sumikko_hokkaido #free_gift .inner {
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
      position: relative; }
      .sumikko_hokkaido #free_gift .inner .box {
        background: #FFF;
        border-radius: 10px 10px 0 0;
        padding: 1.5em 1.5em 2.5em 1.5em;
        margin: 0 auto 0 auto;
        position: relative;
        z-index: 0; }
        .sumikko_hokkaido #free_gift .inner .box h3 {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #EE8100;
          border-radius: 50px;
          color: #FFF;
          font-size: 18px;
          line-height: 1.1;
          font-weight: 600;
          letter-spacing: 0.1em;
          padding: 0.75em 0;
          margin-bottom: 1.5em;
          position: relative; }
        .sumikko_hokkaido #free_gift .inner .box h3::after {
          display: block;
          content: "";
          border: 5px solid #EE8100;
          border-right-color: transparent;
          border-bottom-color: transparent;
          height: 0;
          width: 0;
          position: absolute;
          bottom: -9px;
          transform: rotate(10deg); }
        .sumikko_hokkaido #free_gift .inner .box p {
          font-size: 14px;
          font-weight: 600;
          line-height: 1.2;
          color: #76624E; }
        @media screen and (min-width: 600px) {
          .sumikko_hokkaido #free_gift .inner .box p {
            font-size: 16px; } }
        .sumikko_hokkaido #free_gift .inner .box strong {
          display: block;
          font-size: 19px;
          font-weight: 600;
          line-height: 1.2;
          color: #76624E;
          padding-bottom: 1em; }
          .sumikko_hokkaido #free_gift .inner .box strong span {
            color: #EE8100; }
        .sumikko_hokkaido #free_gift .inner .box ol {
          margin: 0 0 2em 0;
          padding: 0 0 0 0;
          list-style: none; }
          .sumikko_hokkaido #free_gift .inner .box ol li {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 1em 0;
            border-bottom: dotted 1px #EE8100;
            padding: 0 0 1em 0; }
            .sumikko_hokkaido #free_gift .inner .box ol li .numb img {
              width: 31px;
              height: 31px; }
            .sumikko_hokkaido #free_gift .inner .box ol li p {
              padding-left: 1em; }
          .sumikko_hokkaido #free_gift .inner .box ol li + li {
            padding: 1em 0; }
          .sumikko_hokkaido #free_gift .inner .box ol li:last-child {
            border-bottom: 0px; }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #free_gift .inner .box {
          max-width: 580px;
          padding: 2em 2em 4em 2em; } }
      .sumikko_hokkaido #free_gift .inner .items {
        background-position: 12px 12px, 48px 48px;
        background-size: 72px 72px;
        padding: 2em 1.5em 2em 1.5em; }
        .sumikko_hokkaido #free_gift .inner .items .head {
          display: flex;
          justify-content: flex-start;
          align-items: center; }
          .sumikko_hokkaido #free_gift .inner .items .head .cate img {
            width: 70px;
            height: 70px; }
          .sumikko_hokkaido #free_gift .inner .items .head .date {
            width: 100%; }
            .sumikko_hokkaido #free_gift .inner .items .head .date .name {
              display: block;
              font-size: 25px;
              font-weight: 900;
              line-height: 1.1;
              color: #EA7590;
              padding-left: 10px;
              padding-bottom: 0.3em;
              margin-bottom: 0.3em;
              border-bottom: solid 2px #76624E; }
            .sumikko_hokkaido #free_gift .inner .items .head .date dl {
              display: flex;
              justify-content: space-between;
              padding-left: 10px; }
              .sumikko_hokkaido #free_gift .inner .items .head .date dl dt {
                font-size: 16px;
                font-weight: 600;
                line-height: 1.1; }
              .sumikko_hokkaido #free_gift .inner .items .head .date dl dd {
                font-size: 16px;
                font-weight: 600;
                line-height: 1.1; }
        .sumikko_hokkaido #free_gift .inner .items p {
          text-align: right; }
      .sumikko_hokkaido #free_gift .inner .items.bg01 {
        background-color: #fdeaee;
        background-image: radial-gradient(circle, #fef5f8 12px, transparent 12px), radial-gradient(circle, #fef5f8 12px, transparent 12px); }
        .sumikko_hokkaido #free_gift .inner .items.bg01 .head .date .name {
          color: #EA7590; }
      .sumikko_hokkaido #free_gift .inner .items.bg02 {
        background-color: #e7f5f6;
        background-image: radial-gradient(circle, #f4f9fc 12px, transparent 12px), radial-gradient(circle, #f4f9fc 12px, transparent 12px); }
        .sumikko_hokkaido #free_gift .inner .items.bg02 .head .date .name {
          color: #62B9C9; }
      .sumikko_hokkaido #free_gift .inner .items.bg03 {
        background-color: #fdecda;
        background-image: radial-gradient(circle, #fef5ec 12px, transparent 12px), radial-gradient(circle, #fef5ec 12px, transparent 12px); }
        .sumikko_hokkaido #free_gift .inner .items.bg03 .head .date .name {
          color: #EE8100; }
      .sumikko_hokkaido #free_gift .inner .items.bg04 {
        background-color: #fcedea;
        background-image: radial-gradient(circle, #fef6f4 12px, transparent 12px), radial-gradient(circle, #fef6f4 12px, transparent 12px); }
        .sumikko_hokkaido #free_gift .inner .items.bg04 .head .date .name {
          color: #ED8375; }
      .sumikko_hokkaido #free_gift .inner .items.bg05 {
        background-color: #eef6de;
        background-image: radial-gradient(circle, #f7faef 12px, transparent 12px), radial-gradient(circle, #f7faef 12px, transparent 12px); }
        .sumikko_hokkaido #free_gift .inner .items.bg05 .head .date .name {
          color: #8CC11F; }
      .sumikko_hokkaido #free_gift .inner .items.bg06 {
        background-color: #fef3df;
        background-image: radial-gradient(circle, #fff8ee 12px, transparent 12px), radial-gradient(circle, #fff8ee 12px, transparent 12px); }
        .sumikko_hokkaido #free_gift .inner .items.bg06 .head .date .name {
          color: #F5AC28; }
      .sumikko_hokkaido #free_gift .inner #notes {
        padding-top: 3em;
        padding-bottom: 4em;
        background: #FFF;
        border-radius: 0 0 10px 10px; }
        .sumikko_hokkaido #free_gift .inner #notes h3 {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #EE8100;
          border-radius: 50px;
          color: #FFF;
          font-size: 18px;
          line-height: 1.1;
          font-weight: 600;
          letter-spacing: 0.1em;
          padding: 0.75em 0;
          margin-bottom: 1.5em;
          position: relative; }
        .sumikko_hokkaido #free_gift .inner #notes h3::after {
          display: block;
          content: "";
          border: 5px solid #EE8100;
          border-right-color: transparent;
          border-bottom-color: transparent;
          height: 0;
          width: 0;
          position: absolute;
          bottom: -9px;
          transform: rotate(10deg); }
        .sumikko_hokkaido #free_gift .inner #notes p {
          font-size: 14px;
          line-height: 1.4;
          font-weight: 400;
          margin-bottom: 2em; }
        .sumikko_hokkaido #free_gift .inner #notes ul.notes_list {
          overflow: auto;
          height: 200px;
          padding: 1em;
          background-color: #FFF;
          list-style: none;
          border: solid 1px #A9A9A9; }
          .sumikko_hokkaido #free_gift .inner #notes ul.notes_list li {
            font-size: 14px;
            line-height: 1.4;
            font-weight: 400;
            margin: 0 0 0.3em 0;
            padding: 0 0 0 18px;
            position: relative; }
          .sumikko_hokkaido #free_gift .inner #notes ul.notes_list li::before {
            display: block;
            content: "";
            background: #333;
            border-radius: 50%;
            width: 14px;
            height: 14px;
            position: absolute;
            top: 3px;
            left: 0;
            margin: 0 0 0 0; }
        .sumikko_hokkaido #free_gift .inner #notes .join {
          display: flex;
          justify-content: center;
          position: relative;
          border: solid 1px #76624E;
          background: #FFF;
          padding: 1em 0;
          margin: 0.5em 0 3em 0;
          font-size: 17px;
          line-height: 1.4;
          color: #76624E;
          font-weight: 500; }
          .sumikko_hokkaido #free_gift .inner #notes .join p.cs {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: auto;
            left: auto;
            right: auto;
            bottom: auto;
            text-align: center;
            width: 100%;
            height: 20vh;
            font-size: 1em;
            font-weight: bold;
            color: #DB1F22;
            background: rgba(255, 255, 255, 0.5);
            margin: -1em 0 0 0;
            padding: 0 0.5em;
            z-index: 2;
            border: solid 4px #DB1F22; }
          @media screen and (min-width: 600px) {
            .sumikko_hokkaido #free_gift .inner #notes .join p.cs {
              height: 19vh;
              font-size: 1.5em;
              margin: -0.7em 0 0 0; } }
          .sumikko_hokkaido #free_gift .inner #notes .join label {
            cursor: pointer;
            padding-right: 1em; }
          .sumikko_hokkaido #free_gift .inner #notes .join input[type="checkbox"] {
            margin: 0;
            padding: 0;
            background: none;
            border: none;
            border-radius: 0;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            vertical-align: middle;
            position: relative; }
          .sumikko_hokkaido #free_gift .inner #notes .join input[type="checkbox"]::before,
          .sumikko_hokkaido #free_gift .inner #notes .join input[type="checkbox"]::after {
            content: "";
            display: block;
            position: absolute; }
          .sumikko_hokkaido #free_gift .inner #notes .join input[type="checkbox"]::before {
            background-color: #fff;
            border-radius: 0%;
            border: 1px solid #A9A9A9;
            width: 30px;
            height: 30px;
            transform: translateY(-50%);
            top: 50%;
            left: 5px;
            background: #FFF; }
          .sumikko_hokkaido #free_gift .inner #notes .join input[type="checkbox"]::after {
            border-bottom: 3px solid #FFF;
            border-left: 3px solid #FFF;
            opacity: 0;
            height: 6px;
            width: 11px;
            transform: rotate(-45deg);
            top: 6px;
            left: 14px; }
          .sumikko_hokkaido #free_gift .inner #notes .join input[type="checkbox"]:checked::before {
            background: #A9A9A9; }
          .sumikko_hokkaido #free_gift .inner #notes .join input[type="checkbox"]:checked::after {
            opacity: 1; }
          .sumikko_hokkaido #free_gift .inner #notes .join a.anchorText {
            width: 100%;
            position: absolute;
            top: 5em;
            left: 0;
            pointer-events: none;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.2;
            color: #FFF;
            text-decoration: none;
            border-radius: 10px;
            background: rgba(118, 98, 78, 0.5);
            padding: 1.5em 0;
            transition: 0.3s all; }
          @media screen and (min-width: 600px) {
            .sumikko_hokkaido #free_gift .inner #notes .join a.anchorText {
              top: 5em;
              font-size: 18px; } }
          .sumikko_hokkaido #free_gift .inner #notes .join a.anchorText::after {
            display: block;
            content: "";
            width: 10px;
            height: 16px;
            background: url("../images/sh_arrow.svg") no-repeat;
            background-position: 0 0;
            background-size: 100%;
            position: relative;
            left: 10px; }
          .sumikko_hokkaido #free_gift .inner #notes .join a.anchorText:hover {
            background: rgba(118, 98, 78, 0.8); }
          .sumikko_hokkaido #free_gift .inner #notes .join #check-enable:checked ~ .anchorText {
            pointer-events: auto;
            background: #76624e; }
          .sumikko_hokkaido #free_gift .inner #notes .join #check-enable:checked ~ .anchorText:hover {
            background: rgba(118, 98, 78, 0.8); }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #free_gift .inner #notes {
          padding-bottom: 6em; } }
    @media screen and (min-width: 600px) {
      .sumikko_hokkaido #free_gift .inner {
        max-width: 580px; } }
  @media screen and (min-width: 600px) {
    .sumikko_hokkaido #free_gift {
      padding-top: 4em;
      padding-bottom: 4em; } }
  .sumikko_hokkaido #remarks {
    background: #8CC11F;
    padding-top: 2.5em;
    padding-bottom: 2.5em; }
    .sumikko_hokkaido #remarks .inner {
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
      position: relative; }
      .sumikko_hokkaido #remarks .inner h3 {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FFF;
        color: #8CC11F;
        font-size: 18px;
        line-height: 1.4;
        font-weight: 500;
        padding: 0.5em 0;
        margin-bottom: 1em; }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #remarks .inner h3 {
          font-size: 20px; } }
      .sumikko_hokkaido #remarks .inner p {
        text-align: center;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 500;
        margin-bottom: 2em;
        color: #FFF; }
        .sumikko_hokkaido #remarks .inner p a {
          text-decoration: none;
          color: #FFF; }
        .sumikko_hokkaido #remarks .inner p small {
          display: block;
          padding-top: 1em;
          font-weight: 400; }
      @media screen and (min-width: 600px) {
        .sumikko_hokkaido #remarks .inner p {
          font-size: 20px; } }
      .sumikko_hokkaido #remarks .inner .pagetop {
        width: 100%;
        padding: 2em 0 0 0; }
        .sumikko_hokkaido #remarks .inner .pagetop a {
          display: flex;
          justify-content: center;
          align-items: center;
          max-width: 48px;
          max-height: 48px;
          margin: 0 auto; }
    @media screen and (min-width: 600px) {
      .sumikko_hokkaido #remarks .inner {
        max-width: 580px; } }
  @media screen and (min-width: 600px) {
    .sumikko_hokkaido #remarks {
      padding-top: 4em;
      padding-bottom: 4em; } }

.ribon_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2; }
  .ribon_wrap .ribbon9 {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 85%;
    height: 62px;
    text-align: center;
    box-sizing: border-box; }
    .ribon_wrap .ribbon9 h2 {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin: 0;
      padding: 0 20px;
      line-height: 1;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.1em;
      height: 62px;
      color: #FFF;
      background: #009DE8; }
    @media screen and (min-width: 600px) {
      .ribon_wrap .ribbon9 h2 {
        font-size: 26px; } }
    .ribon_wrap .ribbon9 h2::before {
      position: absolute;
      content: "";
      top: 100%;
      left: 0;
      border: none;
      border-bottom: solid 10px transparent;
      border-right: solid 27px #FFC400; }
    .ribon_wrap .ribbon9 h2::after {
      position: absolute;
      content: "";
      top: 100%;
      right: 0;
      border: none;
      border-bottom: solid 10px transparent;
      border-left: solid 27px #FFC400; }
  .ribon_wrap .ribbon9::before {
    content: "";
    position: absolute;
    width: 10px;
    bottom: -10px;
    left: -35px;
    z-index: -2;
    border: 26px solid #009DE8;
    border-left-color: transparent; }
  .ribon_wrap .ribbon9:after {
    content: "";
    position: absolute;
    width: 10px;
    bottom: -10px;
    right: -35px;
    z-index: -2;
    border: 26px solid #009DE8;
    border-right-color: transparent; }
  @media screen and (min-width: 600px) {
    .ribon_wrap .ribbon9 {
      width: 70%; } }

/*# sourceMappingURL=style.css.map */