﻿/* ----------------------------------
 会員限定特別価格ページ
---------------------------------- */
/* 共通パーツ設定 */
body { font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #000;}
div.mainframe_ { background-color: #12315D;}

#footer_pagetop.block-page-top a { width: 60px; height: 60px; border-radius: 50%; background-color: #000000;}
#footer_pagetop.block-page-top a::after {
  content: '';
  width: 16px;
  height: 16px;
  margin-top: -4px;
  margin-left: -8px;
  border-right: #FFF 2px solid;
  border-top: #FFF 2px solid;
  display: block;
  background: transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotate(-45deg);
}

/* ページ全体 */
#page_members_only { max-width: 1200px; margin: 0 auto; overflow: hidden; background-color: #12315D;}
#page_members_only .l-section { padding: 0 15px;}
#page_members_only img { max-width: 100%; height: auto;}

@media screen and (max-width: 750px) { 
  #page_members_only .content-item { padding: 30px 0; background: transparent;}
  #page_members_only .content-item__sub-title { margin: 0 15px; padding: 10px 6px; line-height: 1.6; font-size: clamp(14px, 4vw, 18px);}
  #page_members_only .sec-content { padding: 0 0 30px; background: #FFF;}
}
@media screen and (min-width: 751px) {
	#page_members_only .sec-mv { max-width: 1000px; margin: 0 auto;}
  #page_members_only .sp-only { display: none;}
  #page_members_only .l-section { padding: 0;}
  #page_members_only .content-box + .content-box { margin-top: 100px;}
  #page_members_only .sec-content { max-width: 1000px; margin: 0 auto 100px; box-sizing: border-box;}
  #page_members_only .content-item { padding: 25px; border-radius: 5px;}
  #page_members_only .content-item__sub-title { padding: 9px 0 9px; margin: 0 10px 20px; font-size: 20px;}
}

/*==================================================
  セクション1：MV
==================================================*/
#page_members_only .l-section.sec-mv { padding: 0;}

/*==================================================
  セクション2：キャンペーン詳細
==================================================*/
#page_members_only .sec-details { margin-top: 50px; text-align: center;}
#page_members_only .sec-details h2.sec-details__title { margin: 0 0 20px; text-align: center;}
#page_members_only .sec-details .desc-box + .desc-box { margin-top: 40px;}
#page_members_only .sec-details .desc-box .sub { margin: 0 0 18px; font-size: 20px; font-weight: bold; text-align: center; color: #FFF;}
#page_members_only .sec-details .desc-box .button a { 
  max-width: 400px;
	height: 50px;
  margin: 0 auto;
	border-radius: 50px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
  background: #FFF;
	position: relative;
}
#page_members_only .sec-details .desc-box .button a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #000 2px solid;
  border-top: #000 2px solid;
  position: absolute;
  right: 20px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
	transition: 0.3s;
}
#page_members_only .sec-details .desc-box .memo { padding: 0 0 0 1em; margin: 10px 0 0; font-size: 11px; font-weight: normal; text-align: left; text-indent: -1em; color: #FFF;}

@media screen and (min-width: 751px) {
	#page_members_only .sec-details .desc-box .memo { text-align: center;}
}

/*==================================================
  セクション3：メニュー
==================================================*/
#page_members_only .sec-menu { margin: 50px auto 0;}
#page_members_only .sec-menu__title {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
  position: relative;
}
#page_members_only .sec-menu__title::after {
	content: '';
	width: 100%;
	border-top: #FFF 1px solid;
	display: block;
	position: absolute;
	top: calc(50% - 0.5px);
	left: 0;
	right: 0;
}
#page_members_only .sec-menu__title span { padding: 0 20px; font-size: 20px; font-weight: bold; color: #FFF; display: block; background: #12315D; position: relative; z-index: 2;}
#page_members_only .sec-menu__list { margin-bottom: 99px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px 10px;}
#page_members_only .sec-menu__item { text-align: center; flex-basis: calc(50% - 5px);}
#page_members_only .sec-menu__link { display: block;}
#page_members_only .sec-menu__banner { margin-bottom: 10px;}
#page_members_only .sec-menu__btn {
  width: 100%;
	height: 40px;
  padding: 0;
  margin: 0 auto;
  border-radius: 40px;
  font-size: 13px;
  font-weight: bold;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF;
  position: relative;
}
#page_members_only .sec-menu__btn::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #000 2px solid;
  border-top: #000 2px solid;
  position: absolute;
  right: 10px;
  top: calc(50% - 5px);
  display: block;
  transform: rotate(135deg);
	transition: 0.3s;
}

@media screen and (max-width: 750px) { 
  #page_members_only .sec-menu__banner { margin-bottom: 5px;}
  #page_members_only .sec-menu__list { gap: 20px 10px;}
  #page_members_only .sec-menu__btn { width: 92%; font-size: 12px; letter-spacing: -0.5px;}
}
@media screen and (min-width: 751px) {
  #page_members_only .sec-menu { max-width: 870px; margin: 50px auto 0;}
  #page_members_only .sec-menu__title { margin-bottom: 40px;}
	#page_members_only .sec-menu__title span { padding: 0 73px;}
  #page_members_only .sec-menu__list { justify-content: flex-start; gap: 20px;}
  #page_members_only .sec-menu__item { flex-basis: 276px;}
	#page_members_only .sec-menu__btn::after { right: 20px;}
}

/*==================================================
  セクション4：各コンテンツ
==================================================*/
#page_members_only .sec-content { padding: 0;}
#page_members_only .content-box + .content-box { margin-top: 60px;}
#page_members_only .content-item { margin-bottom: 140px; background: #FFF;}
#page_members_only .content-item:last-child { margin-bottom: 0;}
#page_members_only .content-item__sub-title { padding: 15px; margin-bottom: 25px; font-size: 18px; font-weight: bold; text-align: center; color: #FFF; background-color: #12315D;}

/* 商品リスト */
#page_members_only .product-list-wrapper { margin-bottom: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch;}
#page_members_only .product-list { width: calc((100vw / 2.2 * 5) + 15px * 4); display: flex; gap: 15px;}
#page_members_only .product-item { flex: 0 0 calc((100vw - 25px * 2 - 15px * 1.2) / 2.2);}
#page_members_only .product-item__image { margin-bottom: 10px;}
#page_members_only .product-item__brand { margin-bottom: 5px; font-size: 11px; font-weight: 400; color: #666;}
#page_members_only .product-item__name { margin-bottom: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #000;}
#page_members_only .product-item__makerprice { margin: 0 0 8px; font-weight: 400; font-size: 11px; color: #666; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;}
#page_members_only .product-item__makerprice span { font-weight: 400; font-size: 11px; color: #666;}
#page_members_only .product-item__makerprice span.product-item__makerprice-wrap { text-decoration: line-through; display: flex; align-items: center;}
#page_members_only .product-item__makerprice span.product-item__makerprice-tax { font-size: 9px;}
#page_members_only .product-item__makerprice span.product-item__makerprice-off { font-weight: bold; color: #FF0000;}
#page_members_only .product-item__price,
#page_members_only .product-item__price dt { font-weight: 500; font-size: 14px; color: #000;}
#page_members_only .product-item__price dd { font-weight: 500; font-size: 18px; color: #000;}
#page_members_only .product-item__price .product-item__price-tax { font-size: 11px; font-weight: 400; color: #666;}
#page_members_only .product-item__price.sale,
#page_members_only .product-item__price.sale dt { font-weight: bold; color: #FF0000;}
#page_members_only .product-item__price.sale dd { font-weight: bold; color: #FF0000;}
#page_members_only .product-item__price.sale .product-item__price-tax { color: #FF0000;}

/* もっと見るボタン */
#page_members_only .c-btn-more-wrap .c-btn-more {
  max-width: 300px;
  padding: 15px;
  margin: 0 auto;
  border: 1px solid #000;
  border-radius: 100px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF;
  position: relative;
}
#page_members_only .c-btn-more-wrap .c-btn-more::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: #000 2px solid;
  border-top: #000 2px solid;
  position: absolute;
  right: 20px;
  top: calc(50% - 7px);
  display: block;
  transform: rotate(45deg);
	transition: 0.3s;
}

@media screen and (max-width: 750px) { 
  #page_members_only .product-list-wrapper { padding: 15px;}
  #page_members_only .product-list { width: auto;}
	#page_members_only .product-item a { height: 100%; display: flex; flex-direction: column;}
	#page_members_only .product-item__makerprice { margin-top: auto;}
	#page_members_only .product-item__price dt { font-size: 12px;}
}
@media screen and (min-width: 751px) {
  #page_members_only .product-list-wrapper { padding: 0 10px; overflow-x: visible;}
  #page_members_only .product-list { width: 100%; flex-wrap: wrap; justify-content: center; gap: 20px 20px;}
  #page_members_only .product-item { width: 217px; flex-basis: 217px;}
  #page_members_only .product-item__name { font-size: 14px;}
  #page_members_only #baseball .product-item__name,
	#page_members_only #basketball .product-item__name { min-height: 3em;}
}

/*  */
#page_members_only .product-item__price{
  display: flex;
  align-items: baseline;
}

#page_members_only .product-item__price dt{font-size: 12px;}
#page_members_only .product-item__price .product-item__price-tax{margin-left: 4px;}
