@charset "utf-8";

/*********************************
  お届けショップ越後 TOP
 *********************************/
/*========== フォント ==========*/
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:500,600,800&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:500&display=swap&subset=japanese');

/* 全メディア共通 ====================*/
/* document内パーツ ----- */
/* トップ */
article.top {
  max-width: 768px;
  margin: 0 auto;
}

#top-plate-wrapper {
  margin: 0 24px;
}

#top-plate {
  display: inline-block;
  position: relative;
  width: 100%;
  background-image: url("../img/plate.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  margin-bottom: -6.5vw;
  padding: 0 30px;
}

#top-plate:before {
  content: '';
  display: block;
  padding-top: 12.5%;/*幅100％表示ではない場合に上下中央に表示するためのTips*/
}

#top-plate > span {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  line-height: normal;
  font-family: 'M PLUS 1p';
  font-size: 12px;/*画面幅320px未満の場合のフォントサイズ*/
  font-weight: 800;
  color: blue;
  text-shadow: 2px 2px 3px darkgray;
}

@media only screen and (min-width: 320px) {/*画面幅320px～783pxの場合*/
  #top-plate > span {
    font-size: 14px;/*calc()使えない用*/
    font-size: calc(0.8125rem + ((1vw - 3.2px) * 5.819));/* 13px @ 320px increasing to 40px @ 784px */
    /* Where: * 5.819 = 100 * font_Size_Difference / viewport_Width_Difference */
  }
}

@media only screen and (min-width: 784px) {/*画面幅784px=画像幅724px+margin30px*2 以上の場合*/
  #top-plate-wrapper {
    margin: 0;
  }
  
  #top-plate {
    width: 724px;
    height: 159px;
    margin-bottom: -10px;
  }
  
  #top-plate:before {
    content: '';
    display: none;
  }
  
  #top-plate > span {
    font-size: 40px;
  }
}

ul.plate-bottom-msg {
  position: relative;
  padding-left: 40px;
  padding-right: 20px;
  font-family: 'M PLUS 1p';
  color: navy;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF,  1px -1px 0 #FFF,
               0px 1px 0 #FFF,  0   -1px 0 #FFF,
              -1px 0   0 #FFF,  1px  0   0 #FFF;
}

ul.plate-bottom-msg:after {
  content: url("../img/goshinmotsu1.png") url("../img/goshinmotsu2.png");
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: -1;
}

ul.plate-bottom-msg > li {
  margin-bottom: 5px;
}

#plate-bottom-msg {
  font-size: 1.2em;
  font-weight: 500;
}

#plate-bottom-tel {
  font-size: 2em;
  font-weight: 600;
}

#plate-bottom-regular-holiday {
  font-size: 1em;
  font-weight: 500;
}

@media only screen and (min-width: 500px) {/*画面幅500px以上の場合*/
  #plate-bottom-msg {
    font-size: 1.5em;
  }
  
  #plate-bottom-regular-holiday {
    font-size: 1.3em;
  }
}

/** スライダー **/
#online-shopping-slider {
  /*カルーセル横100%表示*/
  width: 100%;
  max-width: 1024px;/*画像幅*/
  height: auto;
  margin: 20px 0 0 0;
  padding: 0 20px;
}

@media only screen and (min-width: 418px) {/*画面幅418px以上の場合*/
  #online-shopping-slider {
    margin-top: 40px;
  }
}

@media only screen and (min-width: 814px) {/*画面幅814px以上の場合*/
  #online-shopping-slider {
    padding: 0;
  }
}

#online-shopping-slider .swiper-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

#online-shopping-slider .swiper-wrapper > li img {
  width: 100%;
  height: auto;
}

/*** コントローラー ***/
#online-shopping-slider .swiper-controller {
  display: table;
  position: relative;/*子要素の相対位置対象*/
  height: 26px;
}

/*** ページネーション ***/
#online-shopping-slider .slider-pagination-wrapper {
  display: block;
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 26px;
  text-align: center;
  z-index: 1;
}

#online-shopping-slider .swiper-pagination-switch/*2.x*/,
#online-shopping-slider .swiper-pagination-bullet/*3.x*/ {
  display: inline-block;/*for 2.x*/
  width: 21px;
  height: 21px;
  margin: auto 5px;
  background: #777;
}

#online-shopping-slider .swiper-pagination-switch/*2.x*/ {
  /*角丸*/
  border-radius: 10.5px;
}

/**** 幅410px未満でスライダー数が多い場合は、バレット間隔を狭く・バレットを小さく ****/
@media only screen and (max-width: 409px) {
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-switch/*2.x*/,
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-bullet/*3.x*/ {
    margin: auto 4px;
  }
}

@media only screen and (max-width: 389px) {
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-switch/*2.x*/,
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-bullet/*3.x*/ {
    width: 18px;
    height: 18px;
  }
  
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-switch/*2.x*/ {
    /*角丸*/
    border-radius: 9px;
  }
}

@media only screen and (max-width: 359px) {
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-switch/*2.x*/,
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-bullet/*3.x*/ {
    margin: auto 3px;
  }
}

@media only screen and (max-width: 334px) {
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-switch/*2.x*/,
  #online-shopping-slider .slider-pagination.pager-small .swiper-pagination-bullet/*3.x*/ {
    margin: auto 2.5px;
  }
}

#online-shopping-slider .slider-pagination.pager-small .swiper-pagination-switch:hover/*2.x*/,
#online-shopping-slider .slider-pagination.pager-small .swiper-pagination-bullet:hover/*3.x*/ {
  background: #ea3a3a;
}

#online-shopping-slider .slider-pagination .swiper-pagination-switch.swiper-active-switch/*2.x*/,
#online-shopping-slider .slider-pagination .swiper-pagination-bullet-active/*3.x*/ {
  background: red;
  /* アニメーション */
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

/* おすすめ商品 */
ul.plate-bottom-msg > li {
  margin-bottom: 5px;
}

/* 左右分離ラッパー */
.side-wrapper {
  width: 100%;
  max-width: 890px;/*パディング25px*2+左350px+左右マージン30px+右460px*/
  position: relative;
  margin: 0 auto;
  padding: 0 25px;
}

/* 左側 */
.side-left {
  float: none;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.side-right hr {
  margin: 30px 0;
}

/* アーティクルタイトル */
h2.article-title {
  margin-top: 1.83em;
  font-family: 'M PLUS 1p';
  font-size: 2em;
  font-weight: 500;
  text-align: center;
}

h2.article-title:before,
h2.article-title:after {
  content: '─';
}

h2.article-title:before {
  margin-right: 0.2em;
}

h2.article-title:after {
  margin-left: 0.2em;
}

/* 通信販売 */
#online-shopping-description {
  font-family: 'M PLUS 1p';
  font-size: 1.3em;
  font-weight: 500;
}

#online-shopping-leaflet {
  max-width: 360px;
  margin-top: 1em;
  font-family: 'M PLUS 1p';
  font-size: 1.3em;
  font-weight: 500;
}

#online-shopping-leaflet-pdf {
  margin-top: -10px;
}

#online-shopping-leaflet-pdf img {
  backface-visibility: hidden;
}

/* おすすめ商品 */
ul.featured-items-list > li {
  margin-bottom: 15px;
}

ul.featured-items-list > li:last-child {
  margin-bottom: 20px;
}

#sake {
  width: 100%;
  margin: 0 auto;
  padding: 5px;
  border: solid 1px #4475a1;
  background: white;
  text-align: center;
}

#sake-img {
  display: inline-block;
  vertical-align: middle;
}

#sake-description-wrapper {
  display: inline-block;
  width: 200px;
  text-align: center;
  vertical-align: middle;
}

#sake-title {
  text-align: center;
  font-family: 'Noto Serif JP';
  font-size: 2em;
  font-weight: 500;
  color: #4475a1;
}

#sake-instorenow {
  font-family: 'M PLUS 1p';
  font-size: 2.5em;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: red;
  text-shadow: 2px 2px 3px darkgray;
  -webkit-transform: scale(0.77, 1);
  -moz-transform: scale(0.77, 1);
  -ms-transform: scale(0.77, 1);
  -o-transform: scale(0.77, 1);
  transform: scale(0.77, 1);
}

@media only screen and (min-width: 360px) {/*画面幅360px～の場合*/
  #sake-description-wrapper {
    width: 275px;
  }
  
  #sake-title {
    font-size: 2.5em;
  }
  
  #sake-instorenow {
    font-size: 3em;
    letter-spacing: 0.5em;
  }
}

@media only screen and (min-width: 525px) {/*画面幅525px～の場合*/
  #sake {
    width: 459px;
  }
}

/* ふるさとショップ */
aside.hurusato-shop {
  font-size: 1.2em;
}

/*========== 全メディア共通(ここまで) */


/* 916px未満画面(スマホ・タブレット向け) ====================*/
@media only screen and (max-width: 915px) {
/* 構成
   ・左右分離なし1列レイアウト
*/
  /* document内パーツ ----- */
  /* 左側 */
  .side-left {
    float: none;
    width: 100%;
  }
  
  /* 通信販売 */
  #online-shopping-description {
    text-align: center;
  }
  
  #online-shopping-leaflet {
    max-width: 100%;
  }
  
  /* 右側 */
  .side-right {
    float: none;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}/* @media only screen and (max-width: 915px) { */
/*========== 幅916px未満画面(スマホ・タブレット向け)(ここまで) */


/* 916px以上画面(PC向け) ====================*/
@media only screen and (min-width: 916px) {
/* 構成
   ・左右分離2列レイアウト
*/
  /* document内パーツ ----- */
  /* 左側 */
  .side-left {
    float: left;
    width: 360px;/*固定幅*/
  }
  
  /* 通信販売 */
  #online-shopping-description {
    text-align: left;
  }
  
  /* 右側 */
  .side-right {
    float: right;
    right: 0;
    width: 460px;/*固定幅*/
    margin-left: 0 0 0 30px;/*左側とのマージン*/
  }
}/* @media only screen and (min-width: 916px) { */
/*========== 幅916px以上画面(PC向け)(ここまで) */

/* IE8画面 ====================*/
@media \0screen {
/* 構成
   ・左右分離なし1列レイアウト
*/
  /* document内パーツ ----- */
  /* トップ */
  #top-plate {
    position: relative;
    width: 100%;
    background-image: none;
    padding: 0 30px;
    margin-bottom: 0;
  }
  
  #top-plate > span {
    top: 0;
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  
  /* 左側 */
  .side-left {
    float: none;
    width: 100%;
    margin: 0 auto;
  }
  
  /* 右側 */
  .side-right {
    float: none;
    width: 100%;
    margin: 0 auto;
  }
}/* @media \0screen { */
/*========== IE8画面(ここまで) */


/* 印刷 ====================*/
@media print {
/* 構成
   ・左右分離2列レイアウト
*/
  /* document内パーツ ----- */
  /* トップ */
  #top-plate {
    width: 724px;
    height: 159px;
    margin-bottom: -10px;
  }
  
  #top-plate:before {
    content: '';
    display: none;
  }
  
  #top-plate > span {
    font-size: 40px;
  }
  
  #online-shopping-slider {
    width: 770px;
    height: auto;
    margin: 20px 0 0 0;
    padding: 0;
  }
  
  /* 左側 */
  .side-left {
    float: left;
    width: 360px;/*固定幅*/
    margin: 0 auto;
  }
  
  /* 右側 */
  .side-right {
    float: right;
    right: 0;
    width: 460px;/*固定幅*/
    margin-left: 0 0 0 30px;/*左側とのマージン*/
  }
  
  /* おすすめ商品 */
  #sake {
    width: 459px;
  }
}/* @media print { */
/*========== 印刷(ここまで) */















/* お取り扱い品目 */
article.handled-items section.item {
  position: relative;/*.titleの相対位置対象*/
  margin: 30px 7px 47px 7px;
  padding: 20px 3px 8px 3px;
  background: url("../img/handled-items-back.jpg");
}

/** タイトル **/
article.handled-items .item .title {
  position: absolute;
  top: -17px;
  left: 20px;
  width: 50%;
  height: auto;
  max-width: 225px;
  margin: 0;
  padding: 0;
  height: 30px;
  background: white;
}

@media screen and (min-width:320px) {
  article.handled-items .item .title {
    top: calc((1.0625rem + ((1vw - 3.2px) * 3.3333)) * -1);
  }
}

@media screen and (min-width:500px), print {
  article.handled-items .item .title {
    top: -23.8px;
  }
}

article.handled-items .item .title img {
  width: 100%;
  height: auto;
  /*画像ぼやけ対策*/
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: bicubic;
}

/** 左右分離ラッパー **/
.separate-wrapper-l {
}

/*** 左側/右側 ***/
/**** ～699px ****/
.separate-wrapper-l .side-left,
.separate-wrapper-l .side-right {
  float: none;
  width: 100%;
  padding: 0 5px;
  word-wrap: break-word;
  overflow-x: hidden;
}

/***** 左側 *****/
.separate-wrapper-l .side-left {
  padding: 0 5px 5px 5px;
}

/***** 上下表示時の下側 *****/
.separate-wrapper-l .side-right {
  margin-top: 5px;
}

/**** 700px～ ****/
@media only screen and (min-width: 700px) {
  /*** 左側/右側 ***/
  .separate-wrapper-l .side-left,
  .separate-wrapper-l .side-right {
    margin-top: 0;
  }

  /**** 左側メイン ****/
  .separate-wrapper-l .side-left {
    float: left;
  }
  
  /**** 左側 ****/
  .separate-wrapper-l .side-left {
    width: 400px;
    width: calc(100% - 300px/*.side-right*/ - 5px/*margin*/);
    margin-right: 5px;
    padding-top: 0;
  }
  
  /**** 右側 ****/
  .separate-wrapper-l .side-right {
    width: 300px;
    padding: 0 5px 0 0;
  }
}

/**** 910px～ ****/
@media only screen and (min-width: 910px) {
  /**** 左側 ****/
  .separate-wrapper-l .side-left {
    width: 560px;
  }
  
  /**** 右側 ****/
  .separate-wrapper-l .side-right {
    width: 350px;
    width: calc(100% - 560px/*.side-left*/ - 5px/*margin*/);
  }
}

/** 説明 **/
article.handled-items .item .description {
  font-size: 0.875em;
}

/** 価格 **/
article.handled-items .item .price {
  font-weight: bold;
}

article.handled-items section.item .price .typical,
article.handled-items section.item .price .tax {
  font-size: 0.7em;
  font-weight: normal;
}

article.handled-items section.item .price .tax {
  margin: 0 -0.7em ;
}

/** ご相談 **/
article.handled-items section.item .contact {
  margin-top: 0.75em;
  font-size: 0.875em;
  font-weight: normal;
  color: #ee0000;
}

/** 写真 **/
article.handled-items section.item .picture {
  width: 100%;
  height: auto;
  font-size: 0;
  text-align: center;
  vertical-align: middle;
}

article.handled-items section.item .picture img {
  width: 100%;
  height: auto;
}