/** Shopify CDN: Minification failed

Line 17:0 Comments in CSS use "/* ... */" instead of "//"
Line 18:0 Comments in CSS use "/* ... */" instead of "//"
Line 19:0 Comments in CSS use "/* ... */" instead of "//"
Line 33:0 Comments in CSS use "/* ... */" instead of "//"
Line 56:0 Comments in CSS use "/* ... */" instead of "//"
Line 59:0 Comments in CSS use "/* ... */" instead of "//"
Line 62:39 Expected ":"
Line 63:35 Expected ":"
Line 64:28 Expected ":"
Line 69:39 Expected ":"
... and 9 more hidden warnings

**/
body, p, span, label, input, select, option, div, h1, h2, h3, h4, h5, h6{
// font-family: 'Zen Kaku Gothic Antique' !important;
// font-family: 'M PLUS Rounded 1c' !important;
// font-family: 'Sawarabi Mincho' !important;
  font-family: 'M PLUS 1p' !important;
}

.shopify-policy__container {
    max-width: 100rem !important;
}

@media screen and (min-width: 750px){
 .page-width--narrow {
   max-width: 100rem;
 }
}

// 特定商取引ページ　レイアウト start
section.conditions {
display: flex;
}
section.conditions dl　{
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
section.conditions dt, dd {
	margin: 0;
	padding: 0;
}
section.conditions dt　{
text-align:right;
font-weight: bold;
padding: 15px 20px 15px 0;
flex-basis: 200px;
}
section.conditions dd　{
padding: 15px 0;
flex-basis: calc(100% - 200px);
}
// 特定商取引ページ　レイアウト end


// 色選択ボタンの色変更　start
/*バリエーションボタンの背景色、線の色、文字色の変更*/
.product-form__input input[type=radio]+label{
background-color: #ffffff; ⇦背景色
border-color: #989898; ⇦線の色
color: #989898; ⇦文字色
}

/*選択中のバリエーションボタンの背景色、線の色、文字色の変更 */
.product-form__input input[type=radio]:checked+label {
background-color: #989898; ⇦背景色
border-color: #787878; ⇦線の色
color: #ffffff; ⇦文字色
}

/*バリエーションボタンをホバーした時の線の色の変更*/
.product-form__input input[type=radio]+label:hover {
border-color: #787878; ⇦線の色
}
// 色選択ボタンの色変更　end


//画像サイズ　start
/* =============================================
/  article
/============================================ */
#story-top.article-template__hero-container{
  max-width: 100%;
}

#story-top.article-template__hero-container .media{
  background: inherit;
}

/* 画面幅 990px以上の場合
/======================= */
@media screen and (min-width: 990px) { 
  #story-top.article-template__hero-container .media{
    padding-bottom: calc(625px + 2rem) !important;
  }

  #story-top.article-template__hero-container img{
    height: 625px;
  }
}

/* 画面幅 1920px以上の場合
/======================= */
@media screen and (min-width: 1920px) {
  #story-top.article-template__hero-container{
    max-width: 1920px;
  }
//画像サイズ　end

  
//製品セレクト　start  
.metafields-product{
  margin-bottom: 6rem;
}
.metafields-product img{
  max-width: 100%;
}

/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) { 
  .metafields-product{
    display: flex;
  }
  .metafields-product_img{
    flex: 3;
    margin-right: 2.5rem;
  }
  .metafields-product_txt{
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .metafields-product_txt h3{
    margin-top: 0;
  }
  .metafields-product_txt .btn_link{
    margin-bottom: 30px;
  }
}
//製品セレクト　end


/*==================================
スライダー　css
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/* 次へ矢印の位置と形状 */
    right: -1.5%;
    transform: rotate(45deg);
}
  
/* ドットナビゲーションの設定 */
.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;/* ドットボタンのサイズ */
    height: 8px;/* ドットボタンのサイズ */
    display:block;
    border-radius:50%;
    background:#ccc;/* ドットボタンの色 */
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}