@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* =====================
　　共通、既存カスタマイズ
===================== */

/*  フォント
------------------------*/
#content_wrap {
	font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
	font-feature-settings: "palt" 1;
	color: #333;
}

/*  sp_content
------------------------*/
#sp_content {
	margin-bottom: 60px;
	text-align: center;
}

/*  テキスト
------------------------*/
#content_wrap p,
#content_wrap h1,
#content_wrap h2,
#content_wrap h3,
#content_wrap h4 {
	margin: 0;
	padding: 0;
	line-height: 2;
	letter-spacing: .18em;
}
#content_wrap p {
	font-size: 14px;
}
.freearea {
	margin: 0;
}

/*  閲覧履歴レコメンド非表示
------------------------*/
#fsrecommenddiv7 {
	display: none;
}

/*  a
------------------------*/
#content_wrap a {
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* android */
	color: #333;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	text-decoration: none;
	line-height: 2;
	letter-spacing: .18em;
}
#content_wrap a:active {
	color: #777;
	text-decoration: none;
}

/* a  画像フェードインアウト
------------------------*/
#content_wrap a:active img {
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-o-opacity: 0.7;
	filter: alpha(opacity=70);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=70)"; /* IE 8 */
	opacity: 0.6;
}
#content_wrap a img {
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-ms-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
	-webkit-backface-visibility: hidden; /* 追加 */
	backface-visibility: hidden; /* 追加 */
}

/*  ul flexbox指定
------------------------*/
#content_wrap ul {
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	flex-wrap: wrap;
}

/*  section
------------------------*/
#content_wrap section {
	margin-top: -20px;
	padding-top: 70px;
}
#content_wrap section > div { /* default打ち消し用 */
	margin: 0;
}
#content_wrap section:before {
  background: url(../img/line_smp.jpg) repeat;
  content: "";
  display: block;
  width: 90%;
  height: 7px;
  background-size: contain;
  margin: 0 auto 30px;
  opacity: 0.6;
}

/*  side_margin
------------------------*/
#content_wrap .side_margin {
	margin:0 6%;
}

/*  img
------------------------*/
#content_wrap img {
	vertical-align: top;
}

/*  section message
------------------------*/

#content_wrap section > div.sec_message {
	margin: 40px 0 40px;
}
#content_wrap .sec_message h2 {
	text-align: center;
	font-size: 17px;
}
#content_wrap .sec_message p {
	margin: 20px 0 0;
}


/*  フェードインアニメーション
------------------------*/
#content_wrap .sa {
	opacity: 0;
	transition: all 1.6s ease;
}
#content_wrap .sa.show {
	opacity: 1;
	transform: none;
}

/* サブカテ非表示 */
#pi_s_cat_up {
	display: none;
}

/* =====================
　　メイン
===================== */

#sp_main h1 {
	margin-top: 30px;
	font-size: 19px;
	letter-spacing: .26em;
}
#sp_main p {
	margin: 2em auto 0;
}
#sp_main p.p_info { /* 発売予定日 */
	font-weight: bold;
	display: none;
}

/* =====================
　　メニュー
===================== */
#sp_menu {
	margin-top: 40px;
	margin-bottom: -40px;
}
#sp_menu:before {
  background: url(../img/line_smp.jpg) repeat;
  content: "";
  display: block;
  width: 90%;
  height: 7px;
  background-size: contain;
  margin: 0 auto 30px;
  opacity: 0.6;
}

#sp_menu ul {
	margin: 0 8%;
}
#sp_menu ul li {
	text-align: center;
	margin-right: 6.5%;
	width: 29%;
	position: relative;
}
#sp_menu ul li:last-child {
	margin-right: 0;
}
#sp_menu ul li a {
  display: block;
	padding-bottom: 1.3em;
	margin-top: 6px;
}
#sp_menu ul li p {
	line-height: 1.5;
	margin-top: .5em;
	font-size: 13px;
	font-weight: bold;
}


/* =====================
　　アイテム
===================== */

#content_wrap .sp_item h3 {
	font-size: 16px;
}
#content_wrap .sp_item ul.sp_item_lineup {
	margin-top: 25px;	
}
ul.sp_item_lineup li {
	width: 47%;
}
ul.sp_item_lineup li:nth-child(odd) {
	margin-right: 6%;
}
ul.sp_item_lineup li:nth-child(n+3) {
	margin-top: 20px;
}
ul.sp_item_lineup li img {
	border: 2px solid #f2f2f2;
	box-sizing: border-box;
}
#content_wrap .sp_item h4 {
	font-size: 13px;
	margin-top: 5px;
}

/* =====================
　　インスタ紹介
===================== */

#sp_follow {
	margin-top: 40px;
	padding-top: 10px;
}

#sp_follow:before {
	background: url(../img/line_smp.jpg) repeat;
  content: "";
  display: block;
  width: 90%;
  height: 7px;
  background-size: contain;
  margin: 0 auto 30px;
  opacity: 0.6;
}

#sp_follow h3 {
	font-size: 17px;
  margin: 30px 0;
}

/* インスタ紹介ボタン */
a.insta_info_btn{
  padding: 0.5em;
  margin: 40px auto 0 -15px;
  display: inline-block;
  font-weight: bold;
  font-size:15px;
	text-decoration: none;
}
a.insta_info_btn:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: -3px 15px 0 0;
  background: url("/sp/communication_item/img/Instagram_Glyph_Gradient.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
#content_wrap a.insta_info_btn:active {
	opacity: .5;
}