@charset "utf-8";
/* CSS Document */
/* 初期設定 */
html {
  font-size: 62.5%;
}
body {
  margin: 0;
  padding: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  vertical-align: bottom;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#wine_contents h1, #wine_contents h2, #wine_contents h3, #wine_contents h4 {
  margin: 0;
  padding: 0;
}
/* 汎用 */
.clear {
  clear: both;
}
.clearfloat {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
*:first-child + html .clearfix {
  zoom: 1; /* IE7 */
}
/********/
/* 共通 */
#wine_contents h1, 
#wine_contents h2, 
#wine_contents h3, 
#wine_contents h4 {
  margin: 0;
  padding: 0;
}
#wine_contents .pc_only {
  display: none;
}
#wine_contents .sp_only {
  display: block;
}
#wine_contents .fL {
  float: left;
}
#wine_contents .txC {
  text-align: center;
}
#wine_contents .txR {
  text-align: right;
}
#wine_contents .txL {
  text-align: left;
}
#wine_contents .t-red {
  color: #d30100! important;
}
#wine_contents .t-green {
  color: #006c31! important;
}
#wine_contents .t-orange {
  color: #ff8000! important;
}
#wine_contents .bold {
  font-weight: bold;
}
#wine_contents .fs130 {
  font-size: 130%! important;
}
#wine_contents .fs150 {
  font-size: 150%! important;
}
#wine_contents .fs70 {
  font-size: 70%! important;
}
/* margin/padding */
#wine_contents .mT20 {
  margin-top: 20px! important;
}
#wine_contents .mT30 {
  margin-top: 30px! important;
}
#wine_contents .mB20 {
  margin-bottom: 20px! important;
}
#wine_contents .mB30 {
  margin-bottom: 30px! important;
}
#wine_contents .mB50 {
  margin-bottom: 50px! important;
}
/* /共通 */

/* SP */
#wine_contents {
  margin-bottom: 50px;
  width: 100%;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.4rem;
  line-height: 1.6;
}
#wine_contents p {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: left;
  margin: 0;
  padding: 0 5px;
}
/* /汎用 */
#wine_contents section {
  margin: 0;
  padding: 0;
}
#wine_contents section#step2,
#wine_contents section#step3,
#wine_contents section#step4,
#wine_contents section#step5 {
  padding: 70px 0;
  margin-top: 0px;
}

#wine_contents .imgWrap {
  overflow: hidden; /*拡大時にはみ出た部分を隠す*/
}
#wine_contents .imgWrap img {
  display: block;
  transition-duration: 0.3s; /*変化に掛かる時間*/
}
#wine_contents .imgWrap:hover {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  transform: translateX(-5px) translateY(-5px);
  transition-duration: 0.3s;
}

#wine_contents .bg_be {
  width: 100%;
  min-width: 320px;
  padding: 30px 0 50px;
  background-color: #f1eee4;
}

#wine_contents .breadcrumbs_list {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Osaka, "MS PGothic", arial, helvetica, sans-serif;
  width: 100%;
  margin: auto;
  overflow: hidden;
  font-size: 1.2rem;
  line-height: 20px;
  color: #333;
}

#wine_contents .hero {
  background: none;
}
#wine_contents h1 {
  /* font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Osaka, "MS PGothic", arial, helvetica, sans-serif;*/
  text-align: center;
  color: #333333;
  font-size: 2.0rem;
  margin: 20px auto;
  /* margin: 18px 0; */
  font-weight: bold;
}

#wine_contents h2 {
  text-align: center;
  color: #333333;
  font-weight: bold;
  font-size: 2.0rem;
  background-image: url('https://mywineclub.com/excludes/wine/pg/japanese_wine/images/h2_bg.png');
  /* 画像の繰り返しを防ぐ */
  background-repeat: no-repeat;
  /* 画像を中央に配置（オプション） */
  background-position: center;
  margin: 30px;
  background-size: 50%;
}
/* feature */
#wine_contents #feature {
  width: 100%;
  min-width: 320px;
  padding: 30px 0 50px;
  background-color: #f2efe5;
}
#wine_contents #feature p {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.7;
  color: #333333;
  margin-bottom: 1rem;
}

/* recommned */
#wine_contents #recommend {
  width: 100%;
  min-width: 320px;
  padding: 30px 0 50px;
  background-color: #ffffff;
}

#wine_contents .producer_title {
  width: 100%;
  background-color: #333333;
}
#wine_contents .producer_title .contents {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#wine_contents .producer_title .contents img {
  width: 100%;
}
#wine_contents .producer_title .contents .spec {
  width: 100%;
  padding: 20px;
  padding-bottom: 5em;
}
#wine_contents .producer_title .contents .spec p {
  color: #ffffff;
}
#wine_contents .producer_title .contents .spec p.sub {
  font-weight: bold;
  font-size: 3.0rem;
}
#wine_contents .producer_title .contents .spec p.name {
  font-weight: bold;
  font-size: 4.5rem;
}
/* 生産者 アコーデオン部分 */
#wine_contents summary {
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 6px;
  align-items: center;
  width: 80%;
  padding: 10px 30px;
  border: 1px solid #ffffff;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  top: -60px;
  left: 10%;
}
#wine_contents .icon {
  display: block;
  position: relative;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transform-origin: center 43%;
  transition: transform 0.4s;
  color: #ffffff;

/* アイコンのバーのスタイル */
  &::before,
  &::after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 3px;
    background-color: #ffffff;
  }
  &::before {
    left: 0;
    transform: rotate(45deg);
  }
  &::after {
    right: 0;
    transform: rotate(-45deg);
  }
}
/* アコーディオンが開いた時のスタイル */
#wine_contents details[open] {
  background-color: #f2efe5;
}
#wine_contents details[open] .icon {
  transform: rotate(180deg);
}
#wine_contents details {
  width: 100%;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}
#wine_contents details div {
  width: 100%;
  margin: 0;
  padding: 0 0 30px 0;
}
#wine_contents details div p {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Osaka, "MS PGothic", arial, helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
}
#wine_contents img.prod {
  display: block;
  width: 100%;
  margin: 30px auto;
}

/* SNS */
#wine_contents #sns_block {
  display: block;
  margin-top: 30px;
}
#wine_contents .sns {
  width: 100%;
  text-align: center;
}
#wine_contents .sns li {
  display: inline-block;
  width: 10%;
  margin: 5px;
}


/* ===============================
    スライダー
    Swiper 全体
=============================== */
.swiper {
  width: 100%;
  padding: 40px 0;
  --swiper-theme-color: #000;
  margin-top: 30px;
}

/* ===============================
   スライド
=============================== */
.swiper-slide {
  display: flex;
  justify-content: center;
  opacity: 0.5;
  transition: 0.3s;
}

/* 画像 */
.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  /* border-radius: 16px; */
  /* box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3); */
}

/* アクティブ */
.swiper-slide-active {
  opacity: 1;
  transform: scale(1.05);
}
/* SPサイズ */
/* @media (max-width: 767px) { */
  .swiper-slide img {
    max-width: 640px;
  }
  .swiper {
    padding-bottom: 50px !important;
  }
  .swiper-button-prev,
  .swiper-button-next{
    display: none !important;
  }
/* } */
/* ===============================
    ナビゲーション位置
=============================== */
.swiper-horizontal.swiper-rtl .swiper-button-next,
.swiper-horizontal.swiper-rtl ~ .swiper-button-next,
.swiper-horizontal ~ .swiper-button-prev,
.swiper-horizontal .swiper-button-prev {
  left: auto;
  right: 55%;
}

.swiper-horizontal.swiper-rtl .swiper-button-prev,
.swiper-horizontal.swiper-rtl ~ .swiper-button-prev,
.swiper-horizontal ~ .swiper-button-next,
.swiper-horizontal .swiper-button-next {
  left: 55%;
  right: auto;
}
.swiper-button-next, .swiper-button-prev{
  width: 50% !important;
}
/* ===============================
    矢印カスタム
=============================== */
/* デフォルト削除 */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* フォント矢印対策 */
.swiper-button-prev,
.swiper-button-next {
  color: transparent !important;
}

/* カスタム画像 */
.swiper-button-prev,
.swiper-button-next {
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.swiper-button-prev {
  background-image: url('https://mywineclub.com/excludes/wine/top/img/pc/arrow_left2.svg');
}

.swiper-button-next {
  background-image: url('https://mywineclub.com/excludes/wine/top/img/pc/arrow_right2.svg');
}







/* /SP */