@charset "euc-jp";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}


.box-movie{
	width: 100%;
	margin: 0 auto;
}
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
display: block;
}

/* ========================================
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

a.white:link {
color : #ffffff; 
}
a.white:visited {
color : #ffffff; 
}
a.white:active {
text-decoration : underline; 
color : #ffffff; 
}
a.white:hover {
text-decoration : underline; 
color : #ffffff; 
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */

.allbox {
	font-family: "游明朝 Medium", "serif";
	width:100%;
}


.image-container {
    position: relative;
    width: 100%;
	
}

.image-container img {
    width: 100%;
    height: 100%;
    display: block;
}

.discount-tag {
    position: absolute;
    top: 0;
    left: 0;
	display: inline-block;
    background  : #DC7276; 
    color: white;
    padding: 5px 5px 5px 5px;
	font-size: 1.2em;
    font-weight: bold;
}



a.btn_04 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #333333;
	background: #000000;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
	font-size: 15px;
}
a.btn_04:hover {
	color: #000000;
	background: #fff;
}



.clearfix {
  display: block;
  clear:both;
}
.br-sp {
	display: inline;
}


.img_pc {
    display: none !important;
}

.img_sp {
    display: block !important;
}

.kikan {
    padding: 2em 1em;
    margin: 2em auto;
    color:black;/*文字色*/
    background: #FFF;
    border: solid 3px #7F0E0E;/*線*/
    border-radius: 10px;/*角の丸み*/
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
	max-width: 600px;
}

.kikan_main {
	margin: 0;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

.kikan_sub{
	margin: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 100;
	line-height: 1.5;
}

.flexbox3to2 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0px;
}
.flexbox3to2 div {
	width: 47%;
	text-align: left;
	margin: 0px 5px 30px 5px;
	background: #FFF;
	padding: 10px;
	border-radius: 10px;
	font-size: 10px;
}
.flexbox3to2 div p {
	margin: 0 auto;
}
.flexbox3to2 div img {
	width: 100%;
}

.box2 {
	border: 3px solid #586c3c;
	width: 100%;
	margin: 0 auto;
	}

.box2_ttl {
	font-size: 18px;
	margin: 0;
	background: #586c3c;
	color: #fff;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	text-align: center;
	}

.box2_main {
	padding-top: 0.8em;
	margin: 0;
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	color: #595757;
}

.box2_sub{
	text-align: center;
	font-size: 14px;
	color: #595757;
	font-weight: 100;
	line-height: 1.5;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

.pc { display: none !important; }
.sp { display: block !important; }
  
.br-sp {
	display: inline;
}
.br-pc {
	display:none;
}
/* ===== スマホ用 基本レイアウト ===== */
.itemgrid-unikawa-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* SP 2列 */
  gap: 20px;
  padding: 10px;
}

.itemgrid-unikawa-card {
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 15px;
  box-sizing: border-box;
}

/* 商品画像（正方形） */
.itemgrid-unikawa-imgwrap {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 正方形を作る */
  background: #f2f2f2;
  overflow: hidden;
}

.itemgrid-unikawa-imgwrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 15%OFFバッジ */
.itemgrid-unikawa-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ffffff;
  color: #DC7276;
  font-size: 11px;
  padding: 4px 8px;
}

/* 商品名 */
.itemgrid-unikawa-name {
  font-size: 11px;          /* 少し小さく */
  font-weight: bold;
  margin: 12px 0 8px 0;
  padding-left: 8px;        /* 左の余白 */
  border-left: 3px solid #999999; /* アクセントライン（グレー） */
}
/* 説明文 */
.itemgrid-unikawa-desc {
  font-size: 10px;
  color: #555555;
  margin-bottom: 12px;
}

/* ボタン */
.itemgrid-unikawa-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #4d5156;
  color: #ffffff !important;
  padding: 10px 0;
  text-decoration: none;
  font-size: 14px;
}

/* ---------- Featured（大きいカード） 共通設定 ---------- */
/* wrapper のグリッド内で横いっぱいに広がる（SPでは2列分、PCでは3列分） */
.itemgrid-unikawa-card--featured {
  grid-column: 1 / -1; /* グリッドの開始から終わりまで占有 */
  padding: 20px; /* 通常カードより少し余白を増やす */
  box-sizing: border-box;
}

/* 画像部分を少し大きめに見せる（通常は正方形だが、featured は高さを広げて存在感UP） */
.itemgrid-unikawa-card--featured .itemgrid-unikawa-imgwrap {
  padding-top: 80%; /* 正方形より少し縦長（好みで調整可） */
}

/* featured 内のテキストをやや大きめに */
.itemgrid-unikawa-card--featured .itemgrid-unikawa-name {
  font-size: 16px; /* 通常14px -> featuredは16px */
  margin: 14px 0 8px 0;
  padding-left: 8px;
  border-left: 3px solid #999999;
}

.itemgrid-unikawa-card--featured .itemgrid-unikawa-desc {
  font-size: 12px; /* 説明文も少し大きめに */
  margin-bottom: 14px;
}

/* ボタンを目立たせる（幅は100%継続） */
.itemgrid-unikawa-card--featured .itemgrid-unikawa-btn {
  padding: 14px 0;
  font-size: 16px;
}
  .itemgrid-unikawa-footer-space {
    height: 80px; /* 固定フッターの高さに合わせる */
    width: 100%;
  }
/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.allbox {
	font-family: "游明朝 Medium", "serif";
	width: 100%;
	max-width: 950px;
	margin: 0 auto;
	padding-top: 0px;
}
.pc { display: block !important; }
.sp { display: none !important; }	
.br-sp {
	display:none;
}
.br-pc {
	display: inline;
}
	
	

.box-movie{
	width: 80%;
	margin: 0 auto;
}
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
display: block;
}	
	
	
	
	
.flexbox3to2 div {
	width: 30%;
	text-align: left;
	margin: 0px 5px 30px 5px;
	padding: 15px;
	font-size: 1em;
}

.discount-tag {
    padding: 10px 5px 5px 5px;
	font-size: 1.4em;
}
	
.clearfix {
  display: block;
  clear:both;
}
.br-sp {
	display:none;
}

.img_pc {
    display: block !important;
    }
    
.img_sp {
    display: none !important;
    }
/* ===== PC用 追加指定 ===== */
  .itemgrid-unikawa-wrapper {
    grid-template-columns: 1fr 1fr 1fr; /* PC 3列 */
    gap: 30px;
    padding: 30px;
  }

  .itemgrid-unikawa-card {
    padding: 20px;
  }
 

	/* .itemgrid-unikawa-wrapper は既に 3列指定になっている想定 */
  .itemgrid-unikawa-card--featured {
    grid-column: 1 / -1; /* 3列全部を占有 */
    padding: 28px;
  }

  .itemgrid-unikawa-card--featured .itemgrid-unikawa-imgwrap {
    padding-top: 45%; /* ← 60%から小さめへ */
  }

  .itemgrid-unikawa-card--featured .itemgrid-unikawa-name {
    font-size: 18px;
    margin: 16px 0 10px 0;
  }

  .itemgrid-unikawa-card--featured .itemgrid-unikawa-desc {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .itemgrid-unikawa-card--featured .itemgrid-unikawa-btn {
    font-size: 18px;
    padding: 16px 0;
  }
	.uniq-featured-img-wrap img {
    object-fit: contain;
}
}