h2{
	border:#EEE 1px solid;
	border-left:#EEE 10px solid;
	margin:5px;
	padding-top:5px;
	size:12px;
}

/*モーダル（ポップアップ）*/
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 50px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 13px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}

/*ポップアップ*/
.pop_inner{
	padding:10px;
}

.tit_01{
	font-size:115%;
	font-weight:bold;
	text-align:center;
}

.tit_flex{
	display:flex;
	justify-content: center;
    align-items: center;
}

.bg_b{
	background:#0081cc;
	color:#FFFFFF;
	font-weight:bold;
	padding:5px 5px ;
	margin:0 5px;
  text-align:center;
  font-size:115%;
	
}

.text_01{
	line-height:2.5;
  margin-top:30px;
  font-size:115%;
}

.text_02{
line-height:2.5;
font-size:115%;
}

.link_01{
	background:#0081cc;
	color:#FFFFFF;
	padding:10px 30px;
	font-weight:700;
	text-decoration:none;
}

.link_01:hover{
	text-decoration:underline;
	opacity:0.8;
  color:#FFFFFF;
}

.bt_box{
	text-align:center;
	margin-top:60px;
}

.tit_bg{
	width:40px;
}
/*お知らせタイトル*/
/* 全体の背景帯：上だけ角丸＋青背景 */
.notice-wrapper {
  background-color: #5ec4e0;
  border-radius: 20px 20px 0 0;
  padding: 12px 10px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* 内部要素を中央寄せ */
.notice-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* タイトルの見た目調整＋アイコン追加 */
.section-title-notice {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  color: #ffffff;
  font-family: 'Kosugi Maru', sans-serif;
  padding-left: 28px;
}

/* アイコン部分 */
.section-title-notice::before {
  content: "";
  background-image: url('https://img.icons8.com/ios-filled/24/ffffff/info.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 「お知らせ」専用のh2のスタイル調整 */
.notice-wrapper h2 {
 border: none !important;
 margin: 0 !important;
 padding-top: 0px !important;
}
/* 「お知らせ」内容カスタム */
.notice-text-wrapper{
background-color: #FFFFF0;
overflow: hidden;
padding: 0px 15px 0px 15px; /* 内側に余白が欲しい場合 */
border-radius: 0 0 20px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
/* 新商品・最近見た商品 */
.section-header {
  display: flex;
  align-items: center;
  background-color: #f2f8fb;
  border-left: 8px solid #4db6e2;
  border-radius: 6px;
  padding: 10px 15px;
  margin: 0 0 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section-header h2 {
 border: none !important;
 margin: 0 !important;
 padding-top: 0px !important;
}

.section-header h2 {
  margin: 0;
  color: #333;
  display: flex;
  align-items: center;
  font-size:18px;
  font-weight:normal !important;
}

.section-header .icon {
  margin-right: 10px;
  color: #4db6e2;
}

/*商品サムネイル高さ解除*/
.recommend-unit {
  height: auto !important;
  background: #fff;
}

.recommend-unit{
border:1px solid #efefef;
border-radius: 8px;
box-shadow: 3px 6px 12px -6px rgba(0,0,0,0.2);
padding: 10px 20px 10px 20px !important;
width:31%;
margin:1%;
}
.recommend-unit {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.recommend-unit:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 画像にズーム効果 */
.recommend-unit img {
  transition: transform 0.3s ease;
}

.recommend-unit:hover img {
  transform: scale(1.05);
}

/* テキストカラー変化 */
.recommend-unit a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.recommend-unit:hover a {
  color: #5ec4e0; /* お好きなブランドカラーに */
}


/* サムネ画像のリンクをバッジの基準に */
.recommend-unit a:first-child{
  position: relative;
  display: block; /* 画像サイズにフィットさせる */
}

/* 左上に“PICK UP”バッジ（丸ピル） */
.recommend-unit a:first-child::after{
  content: "PICK UP";              /* 文言はここで変更可（例: "おすすめ"） */
  position: absolute;
  top: 0px;
  left: -10px;
  z-index: 2;
  padding: .35em .7em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  background: #63c3e8;            /* サイトの青系 */
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  pointer-events: none;            /* クリックを邪魔しない */
}

/* 角丸画像に合わせて少しだけ縮小（小さめ端末） */
@media (max-width: 768px){
  .recommend-unit a:first-child::after{
    top: 0px;
    left: -10px;
    font-size: 11px;
    padding: .3em .6em;
  }
}



/* トップの「新商品」見出しだけ差し替え（fa-box-open を画像化） */
.section-header h2 .fa-box-open::before{
  content: "" !important; /* FAのグリフを無効化 */
}

.section-header h2 .fa-box-open{
  display: inline-block;             /* アイコンをボックス化 */
  width: 20px;                       /* お好みで 18–22px で微調整 */
  height: 20px;
  background: no-repeat center/contain
    url("https://img07.shop-pro.jp/PA01386/865/etc_base64/MjUwOTAxX3N0b3JlX2ljb24.png?cmsp_timestamp=20250901162019");
  color: transparent;                 /* 念のため文字色を無効化 */
  /* .section-header .icon の余白(margin-right:10px)はそのまま活きます */
}

/* 必要なら微調整（上下センター揃え） */
.section-header h2 .fa-box-open { vertical-align: -2px; }

/* 必要なら個別で非表示にできる“逃げ道” */
.recommend-unit.no-badge a:first-child::after{
  display: none !important;
}



/* 新商品：背景 */
.pc-top-recommend{
  background: #fffdf5; /* やさしいクリーム */
  background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 8px 8px;                 /* うっすら質感 */
  border: 1px solid #f2efe6;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  padding: 0px 0px 10px 0px;                             /* 中身に呼吸を */
  margin: 12px 0;
  overflow: hidden;                          /* 角丸外にはみ出さない */
}