@charset "UTF-8";
/* ==================================================
	@extend
================================================== */
/* ===== clearfix ===== */
/* ==================================================
調整クラス
================================================== */
/*	text-align
================================================== */
.ta_c {
  text-align: center !important; }

.ta_r {
  text-align: right !important; }

.ta_l {
  text-align: left !important; }

.va_m {
  vertical-align: middle !important; }

.va_m th, .va_m td {
  vertical-align: middle !important; }

.img_full {
  text-align: center;
  margin-bottom: 20px; }

.m_auto {
  margin-right: auto !important;
  margin-left: auto !important; }

/*	margin
================================================== */
.mt0, .mh0, .ma0 {
  margin-top: 0px !important; }

.mr0, .mw0, .ma0 {
  margin-right: 0px !important; }

.mb0, .mh0, .ma0 {
  margin-bottom: 0px !important; }

.ml0, .mw0, .ma0 {
  margin-left: 0px !important; }

.pt0, .ph0, .pa0 {
  padding-top: 0px !important; }

.pr0, .pw0, .pa0 {
  padding-right: 0px !important; }

.pb0, .ph0, .pa0 {
  padding-bottom: 0px !important; }

.pl0, .pw0, .pa0 {
  padding-left: 0px !important; }

.mt5, .mh5, .ma5 {
  margin-top: 5px !important; }

.mr5, .mw5, .ma5 {
  margin-right: 5px !important; }

.mb5, .mh5, .ma5 {
  margin-bottom: 5px !important; }

.ml5, .mw5, .ma5 {
  margin-left: 5px !important; }

.pt5, .ph5, .pa5 {
  padding-top: 5px !important; }

.pr5, .pw5, .pa5 {
  padding-right: 5px !important; }

.pb5, .ph5, .pa5 {
  padding-bottom: 5px !important; }

.pl5, .pw5, .pa5 {
  padding-left: 5px !important; }

.mt10, .mh10, .ma10 {
  margin-top: 10px !important; }

.mr10, .mw10, .ma10 {
  margin-right: 10px !important; }

.mb10, .mh10, .ma10 {
  margin-bottom: 10px !important; }

.ml10, .mw10, .ma10 {
  margin-left: 10px !important; }

.pt10, .ph10, .pa10 {
  padding-top: 10px !important; }

.pr10, .pw10, .pa10 {
  padding-right: 10px !important; }

.pb10, .ph10, .pa10 {
  padding-bottom: 10px !important; }

.pl10, .pw10, .pa10 {
  padding-left: 10px !important; }

.mt15, .mh15, .ma15 {
  margin-top: 15px !important; }

.mr15, .mw15, .ma15 {
  margin-right: 15px !important; }

.mb15, .mh15, .ma15 {
  margin-bottom: 15px !important; }

.ml15, .mw15, .ma15 {
  margin-left: 15px !important; }

.pt15, .ph15, .pa15 {
  padding-top: 15px !important; }

.pr15, .pw15, .pa15 {
  padding-right: 15px !important; }

.pb15, .ph15, .pa15 {
  padding-bottom: 15px !important; }

.pl15, .pw15, .pa15 {
  padding-left: 15px !important; }

.mt20, .mh20, .ma20 {
  margin-top: 20px !important; }

.mr20, .mw20, .ma20 {
  margin-right: 20px !important; }

.mb20, .mh20, .ma20 {
  margin-bottom: 20px !important; }

.ml20, .mw20, .ma20 {
  margin-left: 20px !important; }

.pt20, .ph20, .pa20 {
  padding-top: 20px !important; }

.pr20, .pw20, .pa20 {
  padding-right: 20px !important; }

.pb20, .ph20, .pa20 {
  padding-bottom: 20px !important; }

.pl20, .pw20, .pa20 {
  padding-left: 20px !important; }

.mt25, .mh25, .ma25 {
  margin-top: 25px !important; }

.mr25, .mw25, .ma25 {
  margin-right: 25px !important; }

.mb25, .mh25, .ma25 {
  margin-bottom: 25px !important; }

.ml25, .mw25, .ma25 {
  margin-left: 25px !important; }

.pt25, .ph25, .pa25 {
  padding-top: 25px !important; }

.pr25, .pw25, .pa25 {
  padding-right: 25px !important; }

.pb25, .ph25, .pa25 {
  padding-bottom: 25px !important; }

.pl25, .pw25, .pa25 {
  padding-left: 25px !important; }

.mt30, .mh30, .ma30 {
  margin-top: 30px !important; }

.mr30, .mw30, .ma30 {
  margin-right: 30px !important; }

.mb30, .mh30, .ma30 {
  margin-bottom: 30px !important; }

.ml30, .mw30, .ma30 {
  margin-left: 30px !important; }

.pt30, .ph30, .pa30 {
  padding-top: 30px !important; }

.pr30, .pw30, .pa30 {
  padding-right: 30px !important; }

.pb30, .ph30, .pa30 {
  padding-bottom: 30px !important; }

.pl30, .pw30, .pa30 {
  padding-left: 30px !important; }

.mt35, .mh35, .ma35 {
  margin-top: 35px !important; }

.mr35, .mw35, .ma35 {
  margin-right: 35px !important; }

.mb35, .mh35, .ma35 {
  margin-bottom: 35px !important; }

.ml35, .mw35, .ma35 {
  margin-left: 35px !important; }

.pt35, .ph35, .pa35 {
  padding-top: 35px !important; }

.pr35, .pw35, .pa35 {
  padding-right: 35px !important; }

.pb35, .ph35, .pa35 {
  padding-bottom: 35px !important; }

.pl35, .pw35, .pa35 {
  padding-left: 35px !important; }

.mt40, .mh40, .ma40 {
  margin-top: 40px !important; }

.mr40, .mw40, .ma40 {
  margin-right: 40px !important; }

.mb40, .mh40, .ma40 {
  margin-bottom: 40px !important; }

.ml40, .mw40, .ma40 {
  margin-left: 40px !important; }

.pt40, .ph40, .pa40 {
  padding-top: 40px !important; }

.pr40, .pw40, .pa40 {
  padding-right: 40px !important; }

.pb40, .ph40, .pa40 {
  padding-bottom: 40px !important; }

.pl40, .pw40, .pa40 {
  padding-left: 40px !important; }

.mt45, .mh45, .ma45 {
  margin-top: 45px !important; }

.mr45, .mw45, .ma45 {
  margin-right: 45px !important; }

.mb45, .mh45, .ma45 {
  margin-bottom: 45px !important; }

.ml45, .mw45, .ma45 {
  margin-left: 45px !important; }

.pt45, .ph45, .pa45 {
  padding-top: 45px !important; }

.pr45, .pw45, .pa45 {
  padding-right: 45px !important; }

.pb45, .ph45, .pa45 {
  padding-bottom: 45px !important; }

.pl45, .pw45, .pa45 {
  padding-left: 45px !important; }

.mt50, .mh50, .ma50 {
  margin-top: 50px !important; }

.mr50, .mw50, .ma50 {
  margin-right: 50px !important; }

.mb50, .mh50, .ma50 {
  margin-bottom: 50px !important; }

.ml50, .mw50, .ma50 {
  margin-left: 50px !important; }

.pt50, .ph50, .pa50 {
  padding-top: 50px !important; }

.pr50, .pw50, .pa50 {
  padding-right: 50px !important; }

.pb50, .ph50, .pa50 {
  padding-bottom: 50px !important; }

.pl50, .pw50, .pa50 {
  padding-left: 50px !important; }

/*	???
================================================== */
.w0 {
  width: 0%; }

.w5 {
  width: 5%; }

.w10 {
  width: 10%; }

.w15 {
  width: 15%; }

.w20 {
  width: 20%; }

.w25 {
  width: 25%; }

.w30 {
  width: 30%; }

.w35 {
  width: 35%; }

.w40 {
  width: 40%; }

.w45 {
  width: 45%; }

.w50 {
  width: 50%; }

.w55 {
  width: 55%; }

.w60 {
  width: 60%; }

.w65 {
  width: 65%; }

.w70 {
  width: 70%; }

.w75 {
  width: 75%; }

.w80 {
  width: 80%; }

.w85 {
  width: 85%; }

.w90 {
  width: 90%; }

.w95 {
  width: 95%; }

.w100 {
  width: 100%; }

.w105 {
  width: 105%; }

.w110 {
  width: 110%; }

.w115 {
  width: 115%; }

.w120 {
  width: 120%; }

.w125 {
  width: 125%; }

.w130 {
  width: 130%; }

.w135 {
  width: 135%; }

.w140 {
  width: 140%; }

.w145 {
  width: 145%; }

.w150 {
  width: 150%; }

.w155 {
  width: 155%; }

.w160 {
  width: 160%; }

.w165 {
  width: 165%; }

.w170 {
  width: 170%; }

.w175 {
  width: 175%; }

.w180 {
  width: 180%; }

.w185 {
  width: 185%; }

.w190 {
  width: 190%; }

.w195 {
  width: 195%; }

.w200 {
  width: 200%; }

.w205 {
  width: 205%; }

.w210 {
  width: 210%; }

.w215 {
  width: 215%; }

.w220 {
  width: 220%; }

.w225 {
  width: 225%; }

.w230 {
  width: 230%; }

.w235 {
  width: 235%; }

.w240 {
  width: 240%; }

.w245 {
  width: 245%; }

.w250 {
  width: 250%; }

.w255 {
  width: 255%; }

.w260 {
  width: 260%; }

.w265 {
  width: 265%; }

.w270 {
  width: 270%; }

.w275 {
  width: 275%; }

.w280 {
  width: 280%; }

.w285 {
  width: 285%; }

.w290 {
  width: 290%; }

.w295 {
  width: 295%; }

.w300 {
  width: 300%; }

.w305 {
  width: 305%; }

.w310 {
  width: 310%; }

.w315 {
  width: 315%; }

.w320 {
  width: 320%; }

.w325 {
  width: 325%; }

.w330 {
  width: 330%; }

.w335 {
  width: 335%; }

.w340 {
  width: 340%; }

.w345 {
  width: 345%; }

.w350 {
  width: 350%; }

.w355 {
  width: 355%; }

.w360 {
  width: 360%; }

.w365 {
  width: 365%; }

.w370 {
  width: 370%; }

.w375 {
  width: 375%; }

.w380 {
  width: 380%; }

.w385 {
  width: 385%; }

.w390 {
  width: 390%; }

.w395 {
  width: 395%; }

.w400 {
  width: 400%; }

.w405 {
  width: 405%; }

.w410 {
  width: 410%; }

.w415 {
  width: 415%; }

.w420 {
  width: 420%; }

.w425 {
  width: 425%; }

.w430 {
  width: 430%; }

.w435 {
  width: 435%; }

.w440 {
  width: 440%; }

.w445 {
  width: 445%; }

.w450 {
  width: 450%; }

.w455 {
  width: 455%; }

.w460 {
  width: 460%; }

.w465 {
  width: 465%; }

.w470 {
  width: 470%; }

.w475 {
  width: 475%; }

.w480 {
  width: 480%; }

.w485 {
  width: 485%; }

.w490 {
  width: 490%; }

.w495 {
  width: 495%; }

.w500 {
  width: 500%; }

/*	em
================================================== */
.em_01 {
  color: #cc0000;
  font-style: normal; }

.em_02 {
  color: black;
  font-weight: bold;
  font-style: normal; }

.em_03 {
  color: #0085b2;
  font-style: normal;
  font-weight: bold; }

sub.note {
  margin-left: 5px;
  font-size: 10px;
  font-size: 1rem; }

/* ==================================================
    共通スタイル
================================================== */
.spOnly {
  display: none !important; }

@media only screen and (max-width: 767px) {
  .spOnly {
    display: block !important; } }
.pcOnly {
  display: block !important; }

@media only screen and (max-width: 767px) {
  .pcOnly {
    display: none !important; } }
.m-top--0 {
  margin-top: 0 !important; }

.m-bottom--0 {
  margin-bottom: 0 !important; }

.share-pinterest.icon.c5-sfmList__pinterest {
  display: none !important; }

/* ==================================================
レイアウト
================================================== */
#feature-4k {
  overflow: hidden; }

#feature-4k .sf-article-box {
  padding-top: 10px; }

#feature-4k .sf-article-block figure, #feature-4k .sf-article-large-block figure {
  margin-top: 0; }

@media only screen and (max-width: 767px) {
  #feature-4k ul {
    padding-left: 2em; } }
#feature-4k ul li > strong {
  font-weight: bold;
  font-size: inherit;
  line-height: inherit;
  margin: inherit;
  padding: inherit;
  display: inline-block;
  color: #565858; }

#feature-4k .c5-heading1 {
  font-size: 30px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 50px; }

#feature-4k h2 {
  color: #2f3132;
  position: relative;
  top: 50%; }

#feature-4k p {
  color: #565858; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-heading1 {
    padding: 0 20px;
    font-size: 26px; } }
@media only screen and (max-width: 767px) {
  #feature-4k h2 {
    padding: 0 20px; } }
#feature-4k .sf-article-block + h2 {
  margin-top: 30px; }

@media only screen and (max-width: 767px) {
  #feature-4k .sf-article-large-block.c5-image-large {
    padding-left: 0;
    padding-right: 0; } }
#feature-4k .s5-shopList {
  margin-bottom: 100px; }

#feature-4k .c5-snsBox {
  width: 400px;
  padding: 0 20px;
  margin-right: auto;
  margin-left: auto; }

#feature-4k .c5-snsBox > p {
  margin-bottom: 20px; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-snsBox {
    width: 100%;
    box-sizing: border-box; } }
#feature-4k .c5-snsButton {
  border: solid 1px #c7d3d9;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 10px;
  padding-left: 20px; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-snsButton {
    padding: 10px 5px;
    text-align: center; } }
#feature-4k .c5-snsButton span {
  padding-left: 40px;
  display: inline-block;
  font-size: 16px;
  line-height: 30px;
  color: #565858; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-snsButton span {
    font-size: 13px;
    padding-left: 30px; } }
#feature-4k .c5-snsButton--twitter span {
  background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-twitter.png) left center no-repeat; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-snsButton--twitter span {
    background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-twitter@2x.png) left center no-repeat;
    background-size: 30px 30px; } }
#feature-4k .c5-snsButton--facebook span {
  background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-facebook.png) left center no-repeat; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-snsButton--facebook span {
    background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-facebook@2x.png) left center no-repeat;
    background-size: 30px 30px; } }
#feature-4k .c5-snsButton--app span {
  background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-app.png) left center no-repeat; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-snsButton--app span {
    background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-app@2x.png) left center no-repeat;
    background-size: 30px 30px; } }
#feature-4k .c5-snsButton--mail span {
  background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-mail.png) left center no-repeat; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-snsButton--mail span {
    background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-mail@2x.png) left center no-repeat;
    background-size: 30px 30px; } }
#feature-4k .c5-snsButton--youtube span {
  background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-youtube.png) left center no-repeat; }

@media only screen and (max-width: 767px) {
  #feature-4k .c5-snsButton--youtube span {
    background: url(/feature/contents/sapporo-4k/images/icon/icon-sns-youtube@2x.png) left center no-repeat;
    background-size: 30px 30px; } }
.c5-text-detail p {
  font-size: 13px; }

.c5-align--center {
  text-align: center; }

.c5-general--pt0 {
  padding-top: 0 !important; }

.c5-general--pb0 {
  padding-bottom: 0 !important; }

/* ==================================================
    段落ブロック
================================================== */
.c5-paragraph {
  margin-top: 50px; }

.c5-borderBottom {
  padding-bottom: 50px;
  border-bottom: 1px solid #e4e7ec; }

/* ==================================================
    インタビューブロック
================================================== */
.c5-interviewBlock {
  margin: 0 auto;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 50px;
  font-size: 15px;
  font-size: .9375rem; }
  .c5-interviewBlock p {
    line-height: 1.95 !important; }
  .c5-interviewBlock .c5-interviewBlock__ques {
    font-weight: 500;
    font-size: 1.2em;
    margin-top: 50px; }
    .c5-interviewBlock .c5-interviewBlock__ques:first-child {
      margin-top: 0; }
  .c5-interviewBlock .c5-interviewBlock__pers {
    font-weight: 500;
    font-size: 1em;
    color: #565858; }

@media screen and (max-width: 767px) {
  .c5-interviewBlock {
    padding-left: 20px;
    padding-right: 20px; } }
/* ==================================================
    レポートブロック
================================================== */
.c5-reportBlock {
  margin: 0 auto;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
  font-size: .9375rem; }
  .c5-reportBlock p {
    line-height: 1.95 !important; }
  .c5-reportBlock .c5-reportBlock__text p {
    font-weight: 300;
    margin-top: 10px; }
    .c5-reportBlock .c5-reportBlock__text p:first-child {
      margin-top: 0; }

@media screen and (max-width: 767px) {
  .c5-reportBlock {
    padding-left: 20px;
    padding-right: 20px; } }
/* ==================================================
    コメントブロック
================================================== */
.c5-commentBlock {
  margin: 0 auto;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px; }
  .c5-commentBlock .c5-commentBlock__inner {
    line-height: 1.95 !important;
    border: solid 1px #565858;
    box-sizing: border-box;
    padding: 20px; }
  .c5-commentBlock .c5-commentBlock__text p {
    font-weight: 300;
    font-size: 15px;
    font-size: .9375rem;
    margin-top: 10px; }
    .c5-commentBlock .c5-commentBlock__text p:first-child {
      margin-top: 0; }

@media screen and (max-width: 767px) {
  .c5-commentBlock {
    padding-left: 20px;
    padding-right: 20px; } }
/* ==================================================
    レコメンドブロック
================================================== */
.c5-recommendBlock {
  margin: 0 auto;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center; }
  .c5-recommendBlock .c5-recommendBlock__text p {
    font-weight: 300;
    font-size: 15px;
    font-size: .9375rem;
    margin-top: 10px;
    line-height: 1.95 !important; }

@media screen and (max-width: 767px) {
  .c5-recommendBlock {
    padding-left: 20px;
    padding-right: 20px; } }
/* ==================================================
    左右分割レイアウト
================================================== */
.c5-picture__main {
  display: table-cell;
  margin-top: 50px;
  vertical-align: top; }

.c5-picture__sub {
  display: table-cell;
  width: 180px;
  vertical-align: top; }
  .c5-picture__sub figure {
    margin-top: 0px !important; }
  .c5-picture__sub img {
    max-width: 180px !important; }
  .c5-picture__sub--large {
    display: table-cell;
    width: 180px;
    vertical-align: top;
    width: 300px; }
    .c5-picture__sub--large img {
      max-width: 300px !important; }

@media screen and (max-width: 767px) {
  .c5-picture__main {
    display: block;
    width: 100%; }

  .c5-picture__sub {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 50px; }
    .c5-picture__sub img {
      max-width: 200px !important;
      width: 70%; }
    .c5-picture__sub--large {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 50px; }
      .c5-picture__sub--large img {
        max-width: 400px !important;
        width: 100%; } }
.c5-textbox {
  color: #565858;
  margin-top: 0; }
  .c5-textbox__right {
    margin-left: 20px; }
    .c5-textbox__right p {
      font-size: 12px;
      font-size: .8375rem; }
  .c5-textbox__left {
    margin-right: 40px; }

@media screen and (max-width: 767px) {
  .c5-textbox__right, .c5-textbox__left, .c5-heading2 {
    margin: 0; } }
/* ==================================================
    アンカーリンク
================================================== */
.c5-unchorLink {
  position: relative;
  top: -70px;
  display: block; }

.c5-unchorBox {
  padding: 0 20px;
  margin-right: auto;
  margin-top: 50px;
  margin-left: auto;
  text-align: center; }
  .c5-unchorBox > .video {
    margin-top: 0px; }

.c5-unchorBox > p {
  font-weight: 600;
  margin-bottom: 20px; }

@media only screen and (max-width: 767px) {
  .c5-unchorBox {
    width: 100%;
    box-sizing: border-box; } }
.c5-unchorButton {
  border: solid 1px #565858;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 10px; }
  .c5-unchorButton--youtube {
    border: solid 1px #565858;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 10px; }
    .c5-unchorButton--youtube span {
      padding-left: 40px;
      display: inline-block;
      font-size: 16px;
      line-height: 30px;
      color: #565858; }

@media only screen and (max-width: 767px) {
  .c5-unchorButton {
    padding: 10px 5px;
    text-align: center; }
    .c5-unchorButton--youtube {
      font-size: 13px;
      padding-left: 30px; } }
.c5-unchorButton span {
  display: inline-block;
  font-size: 16px;
  line-height: 30px;
  color: #565858; }

.c5-unchorButton--youtube span {
  display: inline-block;
  font-size: 16px;
  line-height: 30px;
  color: #565858; }

@media only screen and (max-width: 767px) {
  .c5-unchorButton span {
    font-size: 13px; } }
/* ==================================================
    Youtube
================================================== */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 100px 0 0; }

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%; }

/* ==================================================
    背景画像
================================================== */
.c5-bgimage01 {
  position: relative;
  top: -70px;
  display: block; }

/* ==================================================
    見出し
================================================== */
.c5-heading2 {
  margin: 0 20px 10px;
  color: #565858;
  font-size: 20px !important;
  font-weight: 300; }