@charset "utf-8";
/* CSS Document */

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


/* :rootのCSS変数の宣言 */
:root {
	/* color */
	--white: #fff;
	--black: #000;
	--pink: #ffadc3;
	--red: #c05555;
	--gray01: #f9f9f9;
	--gray02: #f3f2f0; 
	--gray03: #302e2e;  
	/* style */
	--base-color: var(--white);
	--base-color2: var(--black);
	--main-color: var(--gray03);
	--sub-color: var(--red);
	--bg-color01: var(--gray01);
	--bg-color02: var(--gray02);
}


/*================================
目次
================================

■FSの設定打消し
■PC版とSP版での表示切替設定（見出しや改行などPCとSPの表示を分けたい場合に使用）

1.全体
2.共通フォーマット（ボタン・タイトルデザインなど）
3.メインビジュアル
4.検索
5.ranking automation 一部
6.セールピック01
7.セールピック02
8.ユーザーコーデvisumo
9.sale footer
10.js footer

11.アイテムセット 部分
12.注意文 部分

13.カテゴリー
14.セールスケジュール

ex.パンくずリスト
ex.フェードインエフェクト

*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■FSの設定打消し
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.fs-l-main *{
	min-width: initial;
    min-width: auto;
    min-height: initial;
    min-height: auto;
}

/*メインエリアの横幅制限解除ここから*/
.fs-l-pageMain {
	max-width: 100%;
}

.fs-l-main{
	max-width: 100%;
	padding:0;
	margin:0;
}
/*メインエリアの横幅制限解除ここまで*/


.fs-c-breadcrumb{
	padding-top:80px;
}
@media screen and (max-width:768px) {
	.fs-c-breadcrumb{
		padding-top:80px;
	}
}

/* 「現在登録されている商品はありません。」を非表示 */
.fs-c-noResultMessage { display: none }

/* 文字サイズ調整 */
.fs-l-main{
	font-size:1.1em;
}

/*共通フッターのマージン調整*/
.footer-sp{
	margin-top: 0 !important;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■PC版とSP版での表示切替設定（見出しや改行などPCとSPの表示を分けたい場合に使用）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*例：brタグにclassを追加
PCのみで改行→pc <br class="pc">
SPのみで改行→sp <br class="sp">
※両方共通の改行の場合は<br>のみでOK

他、PCとSPで表示を分けたい部分にも使用可能
*/

@media screen and (min-width: 768px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 768px){   
  .pc { display:none; }
  .sp { display:block; }
}



/*================================
1.全体
================================*/

body{
/*背景色*/
	background-color: #fff;
}

/*全体の設定/フォントなど*/
.js-main{
	text-align: center;
	/*font-size:1.3rem;*/
	line-height: 1.5;
	letter-spacing: 0.07em;
	font-family:'Lato','Noto Sans JP','Helvetica Neue', Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif;
	font-weight: 400;
}
@media screen and (max-width:768px) {
	.js-main{
		padding-top:0;
	}
}

/*リンクの設定*/
.js-main a{
	text-decoration:none;
	color:black;
}
.js-main a:hover,a:hover img{
	opacity:0.6;
    -moz-opacity:0.6;
    filter:alpha(opacity = 60);
}


/*widthなどの適応範囲をborder基準に変更*/
.js-main *, .js-main *:before, .js-main *:after{
	-webkit-box-sizing: border-box; /* Webkit */
	-moz-box-sizing: border-box; /* Firefox */
	box-sizing: border-box; /* 標準 */
}


/*SP版画像サイズ制御*/
@media screen and (max-width:768px) {
    /*　画面サイズが768px以下の時はここを読み込む　*/
	.js-main img{
	width:100%;
	height: auto;
	}
}

/*PC900px、SP100%*/
.js-container{
	width:980px;
	margin:auto;
}
@media screen and (max-width: 768px){   
	.js-container{
		width:95%;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2.共通フォーマット（ボタンデザインなど）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*ボタン*/
.btn01 a {
    background: #fff;
	border: solid 1px #000;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 350px;
    padding: 10px 25px;
    color: #000;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.btn01 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn01 a:hover {
  background: #000;
  color: #FFF;
}
.btn01 a:hover:after {
  right: 1.4rem;
}

/*ボタン-黒*/
.btn_bk{
	background-color: #313131;
}
/*ボタン-白枠*/
.btn_wh-b{
	background-color: transparent;
	border: 1px solid #fff;
}


/*共通padding*/
.main-padding{
	padding: 70px 0;
}
@media screen and (max-width: 768px){
	.main-padding{
		padding: 3em 0;
	}
}


/*タイトル*/
.saletitle{
	font-weight: normal;
	margin-top:0;
}
.salefooter h2{
	margin-top:2em;
}
.saletitle_text01{
	font-size:0.6em;
	letter-spacing: 0.1em;
}
.saletitle_text02{
	font-size:1.2em;
	letter-spacing: 0.2em;
	line-height:1.2;
}
@media screen and (max-width: 768px){
	.saletitle_text01{
		font-size:0.6em;
	}
	.saletitle_text02{
		font-size:1em;
	}
}



/*文字色　00 白*/
.text_c00{
	color: var(--base-color2);
}
/*文字色　02 メインカラー*/
.text_c02{
	color: var(--base-color2);
}

/*背景色 00 白*/
.bgcolor_c00{
	background-color: var(--base-color);
}
/*背景色 02　メインカラー*/
.bgcolor_c02{
	background-color: var(--bg-color02);
}
/*背景色 03　サブカラー*/
.bgcolor_c03{
	background-color: var(--base-color);
}
/*背景色 04*/
.bgcolor_c04{
	background-color: var(--bg-color01);
}
/*背景色 05*/
.bgcolor_c05{
	background-color:var(--bg-color02);
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
3.メインビジュアル
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.main-visual{
	margin-bottom:0;
	width:100%;
	background-color: var(--gray01);
	line-height: 0;
}

h1{
	margin:0;
	line-height: 0;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
4.イントロダクション
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.main-intro{
	
}

.intro_logo{
	margin-bottom:1em;
}
.intro_logo img{
	max-width: 200px;
}

.intro_text_area{
	margin-bottom:2em;
}
.intro_head{
	font-size:1.5em;
}
.intro_text{
	margin-top:1em;
	font-size:0.8em;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
4.検索
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*上部*/
.search-upper{
	/*background-color: #fff;*/
	width:100%;
	padding-top:2em;
	/*padding-bottom:3em;*/
}

/*ページ内検索ジャンプ*/
.search-pagelink_box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を左寄せ*/
	justify-content: left;
	
	margin:auto;
	text-align: left;
	width:90%;
}
.search-pagelink_box > div {
	/*列数と間の余白の設定*/
	width: calc( ( 100% - 40px ) / 3 );
	margin-right: 20px;
}
/*右端のマージンをゼロ設定*/
.search-pagelink_box > div:nth-child( 3n ) {
	margin-right: 0;
}
.search-pagelink_item{
	font-size:1em;
	margin-top:20px;
	padding:0.5em;
	border:solid 1px #666;
	
	background-color: #EFEFEF;
	
	position: relative; /* after用追記 */
}
.search-pagelink_item::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
	.search-pagelink_box{
		/*padding:0 4vw;*/
	}
	.search-pagelink_box > div {
		/*列数と間の余白の設定*/
		width: calc( ( 100% - 0vw ) / 1 );
		margin-right: 4vw;
	}
	.search-pagelink_box > div:nth-child( 1n ) {
		margin-right: 0;
	}
	.search-pagelink_item{
		margin-top:10px;
	}
}



/*～～～プライスで探す～～～*/
.price-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: center;
}
.price-box_item img{
	width:100%;
}
.price-box_item{
	margin:5px;
	/*width:25%;*/
}
.price-box_item .btn01 a{
	padding-right:2rem;
}
.price-box_item .btn01 a:after{
	right:1rem;
}
@media screen and (max-width: 768px){
	.search-price{
		padding-top:2em;
		padding-bottom:2em;
	}
	.price-box_item{
		/*width:50%;*/
	}
	.price-box_item .btn01{
		margin-top:0;
	}
}


/*～～～カテゴリーで探す～～～*/
.cate_container{
	text-align: left;
	margin-top:3em;
}
.cate-title{
	padding-bottom:0.25em;
	padding-left:0.5em;
	font-size:1.2em;
	border-bottom:solid 1px #666;
	border-left:solid 3px #666;
}

/*カテゴリーで探す：フレックスボックス*/
.cate-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を左寄せ*/
	justify-content: left;
	
	text-align: left;
}
.cate-box > div {
	/*列数と間の余白の設定*/
	width: calc( ( 100% - 90px ) / 4 );
	margin-right: 30px;
}
/*右端のマージンをゼロ設定*/
.cate-box > div:nth-child( 4n ) {
	margin-right: 0;
}
.cate-box_item{
	font-size:0.8em;
	margin-top:20px;
	padding-bottom:5px;
	border-bottom:dotted 1px #666;
	
	position: relative; /* after用追記 */
}
.cate-box_item::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.cate-box_item img{
	width:100%;
}
@media (max-width: 768px) {
	.cate-box{
		/*padding:0 4vw;*/
	}
	.cate-box > div {
		/*列数と間の余白の設定*/
		width: calc( ( 100% - 4vw ) / 2 );
		margin-right: 4vw;
	}
	.cate-box > div:nth-child( 2n ) {
		margin-right: 0;
	}
}


/*～～～詳細検索～～～*/
.search-all{
	margin-top:20px;
}

/*アコーディオン*/
.acbox_search{
  width: 90%;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:0 auto; /* ボックス全体の位置調整 */
}
@media screen and (max-width: 768px){
	.acbox_search{
		width: 90%;
	}
}
.acbox_search>label{
  width: auto;
  font-size: 15px; /* ラベルの文字サイズ */
  font-weight: normal;
  text-align: center;
  background: #fff; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding:8px;
  border:solid 1px #222;
  border-radius: 5px; /* ラベルの角の丸み */
  cursor: pointer;
  color: #000;
　
　/*スクロール中ラベル固定*/
　position: -webkit-sticky; /* Safariに対応する */
  position: sticky; /* 要素を固定/解除する */
  top: 0; /* 縦方向の閾値 */
  left: 0; /* 横方向の閾値 */		
}
.acbox_search>label:hover{
  background: #000 ; /* ラベルにマウスを乗せた時の背景色 */
	color: #fff;
}
.acbox_search>input{
  display: none;
}
.acbox_search>label:after{
  color: #fff;
  content:"＋"; /* ラベルのアイコン */
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -14px;
}
.acbox_search>input:checked ~ label::after {
  content:"－"; /* ラベルをクリックした後のアイコン */
}
.acbox_search>div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}
.acbox_search>input:checked ~ div{
  height: auto;
  padding: 18px; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #fff; /* 開いた部分の背景色 */
  opacity: 1;
}
.acbox_search>input:checked ~ label {
  background: #000; /* クリック後のラベルの背景色 */
	color: #fff;
	border-radius: 5px 5px 0 0; /* ラベルの角の丸み */
}
/*開いた部分*/
.acbox_search-under{
  font-size: 15px ; /* 開いた部分の文字サイズ/必須 */
  color: #555555; /* 開いた部分の文字色 */
}

/*開いた部分のフォームデザイン*/
.js-search{
	text-align: left;
}
/*PC2列*/
@media screen and (min-width: 769px){
	.clumn_box{
		/*フレックスボックスの設定*/
		display: -webkit-flex;
    	display: flex;
    	-webkit-flex-wrap: wrap;
    	flex-wrap: wrap;
		/*フレックスボックスの要素を中央寄せ*/
		justify-content: left;
	}
	.clumn_item1{
		padding-right:10px;
		width:50%;
	}
	.clumn_item2{
		padding-left:10px;
		width:50%;
	}
}
.js-search_in{
	margin-top:20px;
}
/*見出し*/
.js-search .t01{
	padding: 0 0.5em;
	background-color: #B5B5B5;
	color:#fff;
}
.js-search .t02{
	padding: 0.25em 0;
	margin-bottom:0.5em;
	border-bottom:dotted 1px #666;
	font-weight:bolder;
}
/*中身*/
.js-search .inner{
	margin-top:15px;
}

/*ラジオボタンフレックス*/
.js-search_in .innner-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: left;
}
.js-search_in .innner-box label{
	padding-top:5px;
	width:50%;
}

.js-search button{
	width:100%;
	padding-top:0.5em;
	padding-bottom:0.5em;
	margin-top:2em;
}
/*SP文字調整*/
@media screen and (max-width: 768px){
	.innner-box label{
		font-size:0.8em;
		letter-spacing: 0;
	}
}



/*～～～バナーエリア（1列）～～～*/
.banner-area{
	width:100%;
}
.banner-area_box{
	max-width:700px;
	width:90%;
	margin:auto;
}
.banner-area > .banner-area_box img{
	width:100%;
}
.banner-area > .banner-area_box{
	margin-bottom:1em;
}
.banner-area > .banner-area_box:last-child{
	margin-bottom:0em;
}



/*～～～ブランドスケジュール～～～*/
.brand_schedule{
	margin-top:80px;
}

.brand_schedule_wrapper{
	position:relative;
	
	margin: auto auto 80px;
	width:800px;
	max-width:90%;
	
	border-radius:10px;
	padding: 60px 30px 30px;
	
	background-color: var(--bg-color01);
}

@media (max-width: 768px) {
	.brand_schedule{
		margin-top:4em;
	}
	.brand_schedule_wrapper{
		padding: 7% 4% 4%;
		margin: auto auto 3em;
	}
}
.brand_schedule > div:last-child {
	margin-bottom:0;
}

.brand_schedule_t{
	position: absolute;
	top:0px;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	
}

.brand_schedule_inbox{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を左寄せ*/
	justify-content: left;
	
	margin:auto;
	text-align: left;
	width:100%;
}
.brand_schedule_inbox img{
	width:100%;
}
.brand_schedule_inbox > div {
	/*列数と間の余白の設定*/
	width: calc( ( 100% - 20px ) / 3 );
	margin-right: 10px;
}
/*右端のマージンをゼロ設定*/
.brand_schedule_inbox > div:nth-child( 3n ) {
	margin-right: 0;
}
.brand_schedule_item{
	font-size:1em;
	margin-top:10px;
}
@media (max-width: 768px) {
	.brand_schedule_inbox{
		/*padding:0 4vw;*/
	}
	.brand_schedule_inbox > div {
		/*列数と間の余白の設定*/
		width: calc( ( 100% - 2vw ) / 2 );
		margin-right: 2vw;
	}
	.brand_schedule_inbox > div:nth-child( 3n ) {
		margin-right: 2vw;
	}
	/*右端のマージンをゼロ設定*/
	.brand_schedule_inbox > div:nth-child( 2n ) {
		margin-right: 0;
	}
	.brand_schedule_item{
		margin-top:10px;
	}
}






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
5.ranking automation 一部
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.automation_ranking{
	/*background-color: #f9f2f7;*/
}

.rangking_area_title h2{
	font-size:1.2em;
	padding-bottom:1em;
	font-weight:normal;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
6.セールピック 1 item
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.salepick_oneitem{
	width:90%;
	max-width:800px;
	margin:auto;
}

.salepick_oneitem_set{
	margin: 1.5em auto;
}

.salepick_oneitem_box{
	background-color: var( --bg-color01);
	text-align: left;
}
.salepick_oneitem_innner01{
	position: relative;
}
.salepick_oneitem_innner02{
	padding:30px;
}

.salepick_oneitem_img img{
	width:100%;
}
.salepick_oneitem_img{
	
}
.salepick_oneitem_off{
	position: absolute;
	top: 0;
    left: 0;
	
	background-color: var(--sub-color);
	color:#fff;
	padding: 0.1em 0.5em;
}

.salepick_oneitem_head{
	font-weight:700;
	font-size:1.5em;
	line-height:1.3;
}
.salepick_oneitem_name{
	margin-top:1em;
	font-size:0.7em;
}
.salepick_oneitem_pricebox{
	margin-top:1em;
}
.salepick_oneitem_icon{
	display: inline-block;
	font-size:0.8em;
	padding:0.1em 0.5em 0em;
	background-color: var(--sub-color);
	/*background-color: #ecacc2;*/
	color:#fff;
}
.salepick_oneitem_price{
	font-size:1.7em;
	font-weight:700;
	color: var(--sub-color);
}
.salepick_oneitem_price .taxin{
	color:#aaa;
	font-weight:normal;
	font-size:0.5em;
}

@media (min-width: 769px) {
	.salepick_oneitem_box{
		/*フレックスボックスの設定*/
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		/*フレックスボックスの要素を中央寄せ*/
		align-items: center;
	}
	.salepick_oneitem_innner01{
		width:55%;
	}
	.salepick_oneitem_innner02{
		width:45%;
	}
}
@media (max-width: 768px) {
	.salepick_oneitem_pricebox{
		/*フレックスボックスの設定*/
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		/*フレックスボックスの要素を中央寄せ*/
		align-items: center;
	}
	.salepick_oneitem_icon{
		margin-right:10px;
	}
	.salepick_oneitem_pricebox{
		margin-top:0.2em;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
7.ピック（Futureレコメンド使用）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.salepick_morelink{
	margin-top:1em;
	text-align: right;
	text-decoration: underline;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
8.ユーザーコーデvisumo
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.salevisumo{
	/*padding-top:3em;
	padding-bottom:3em;*/
	/*background-color: #eeeeee;*/
}
@media screen and (max-width: 768px){
	.salevisumo{
		/*padding-top:2em;
		padding-bottom:2em;*/
	}
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
9.sale footer
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.salefooter{
	padding-top:3em;
	padding-bottom:3em;
	background-color: #f3f2f0;
	text-align: center;
}
@media screen and (max-width: 768px){
	.salefooter{
		padding-top:2em;
		padding-bottom:2em;
	}
}

/*画像の時は表示にする：開始*/
.brandfooter-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: center;
}
.brandfooter-box_item img{
	width:100%;
}
.brandfooter-box_item{
	padding:0.5%;
	width:20%;
}

@media screen and (max-width: 768px){
	.brandfooter-box_item{
		width:50%;
	}
}
/*画像の時は表示にする：終了*/


/*コードの時は表示にする：開始*/
/*.brandfooter-box{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	justify-content: center;
}
.brandfooter-box_item img{
	width:50%;
}
.brandfooter-box_item{
	padding:0%;
	width:19%;
	border: 0.5px solid #c9caca;
	margin: 0.5%;
	text-align: center;
}
.brandfooter-box_item_logo{
	margin: auto;
	justify-content: center;
	align-items: center;
	padding: 3%;
}
.brandfooter-box_item_inner {
	display: flex;
}

@media screen and (max-width: 768px){
	.brandfooter-box_item{
		width:49%;
	}
}*/
/*画像の時は表示にする：終了*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
10.js footer
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.jsfooter{
	padding-top:3em;
	padding-bottom:3em;
	text-align: center;
}





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
11.アイテムセット 部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*タイトル01*/
.sale_title_01{
	 margin:2em auto 1em;
     position: relative;
     display: inline-block;
     padding: 0 0.8em;
	 text-align: center;
	 font-size: 1em;
	 font-weight: normal;
}   
.sale_title_01::before{
     position: absolute;
     content: '';
     top:0;
     right:0.2em;
     width: 0.2em;
     height:100%;
     border: solid 1px black;
     border-left: none;
}
.sale_title_01::after{
     position: absolute;
     content: '';
     top:0;
     left:0;
     width: 0.2em;
     height:100%;
     border: solid 1px black;
     border-right: none;
}



/*タイトル02*/
.sale_title_02{
	margin: 2.5em auto 0.5em;
	padding:0.5em 1em;
	color:#2a2624;
	background-color: #ffbfa7;
	/*display:inline-block;*/
	font-weight: normal;
	wodth:100%;
	font-size: 1.5em;
}
@media screen and (max-width: 768px){
	.sale_title_02{
		padding:0.5em 1em;
		margin: 1.5em auto 0.5em;
		font-size: 1em;
	}
}




/*1カラム〜〜〜〜〜〜〜〜〜〜〜〜*/

.sale-item_1cm{
	background-color: white;
	margin-bottom:30px;
	}
@media screen and (max-width: 768px){
	.sale-item_1cm{
		margin-bottom:15px;
	}
}
.sale-item_1cm img{
	width:100%;
	display:block;
}

/*PC用フレックスボックス*/
@media screen and (min-width: 768px){
	.sale-item_1cm{
		/*フレックスボックスの設定*/
		display: -webkit-flex;
    	display: flex;
    	-webkit-flex-wrap: wrap;
    	flex-wrap: wrap;
		/*フレックスボックスの要素を中央寄せ*/
		justify-content: flex-start;
		align-items: center;
	}
	.sale-item_1cm .item01{
		/*フレックスボックスの横幅*/
		width:55%;
	}
	.sale-item_1cm .item02{
		/*フレックスボックスの横幅*/
		width:45%;
	}
}



/*テキストエリア*/
.sale-item_1cm .item02-innner{
	padding:17%;
}
@media screen and (max-width: 768px){
	.sale-item_1cm .item02-innner{
		padding:3%;
	}
}
/*キャッチコピー*/
.sale-item_1cm .catch{
	text-align:left;
	font-size:1.2em;
	font-weight: bold;
}
@media screen and (max-width: 768px){
	.sale-item_1cm .catch{
		font-size:1em;
	}
}
/*商品名*/
.sale-item_1cm .name{
	margin-top:2em;
	text-align:left;
	font-size:0.6em;
	font-weight:300;
}
@media screen and (max-width: 768px){
	.sale-item_1cm .name{
		margin-top:0.5em;
		font-size:0.6em;
	}
}
/*値引き前価格*/
.sale-item_1cm .price-before{
	margin-top:0.5em;
	text-align:right;
	font-size:0.8em;
	text-decoration: line-through;
	color:#999;
}
@media screen and (max-width: 768px){
	.sale-item_1cm .price-before{
		margin-top:0.2em;
	}
}
/*値引き後価格*/
.sale-item_1cm .price-after{
	margin-top:-0.3em;
	text-align:right;
	font-size:2.5em;
	color:#bb3937;
}
/*tax*/
.sale-item_1cm .tax{
	margin-top:-0.5em;
	text-align:right;
	font-size:0.8em;
	color:#999;
}



/*2カラム〜〜〜〜〜〜〜〜〜〜〜〜*/

.sale-item_2cm{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: space-between;
	align-items: stretch;
}
@media screen and (max-width: 768px){
	.sale-item_2cm{
		margin-left:10px;
		margin-right:10px;
	}
}
.sale-item_2cm .item{
	/*フレックスボックスの横幅*/
	width:48.5%;
	
	/*その他の設定*/
	background-color: white;
	margin-bottom:30px;
}
@media screen and (max-width: 768px){
	.sale-item_2cm .item{
		margin-bottom:15px;
	}
}
.sale-item_2cm img{
	width:100%;
	display:block;
}

/*テキストエリア*/
.sale-item_2cm .item-inner{
	padding:8px;
}
/*キャッチコピー*/
.sale-item_2cm .catch{
	text-align:left;
	font-size:0.85em;
	font-weight: bold;
}
@media screen and (max-width: 768px){
	.sale-item_2cm .catch{
		font-size:0.6em;
	}
}
/*商品名*/
.sale-item_2cm .name{
	margin-top:0.5em;
	text-align:left;
	font-size:0.6em;
	font-weight:300;
}
@media screen and (max-width: 768px){
	.sale-item_2cm .name{
		font-size:0.3em;
		line-height:1.2;
	}
}
/*値引き前価格*/
.sale-item_2cm .price-before{
	margin-top:0.5em;
	text-align:right;
	font-size:1em;
	text-decoration: line-through;
	color:#999;
}
@media screen and (max-width: 768px){
	.sale-item_2cm .price-before{
		font-size:0.8em;
	}
}
/*値引き後価格*/
.sale-item_2cm .price-after{
	margin-top:-0.3em;
	text-align:right;
	font-size:2.5em;
	color:#bb3937;
}
@media screen and (max-width: 768px){
	.sale-item_2cm .price-after{
		font-size:1.5em;
	}
}
/*tax*/
.sale-item_2cm .tax{
	margin-top:-0.5em;
	text-align:right;
	font-size:0.8em;
	color:#999;
}
@media screen and (max-width: 768px){
	.sale-item_2cm .tax{
		margin-top:-0.5em;
		font-size:0.7em;
	}
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
12.注意文 部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.notice-text{
	margin:30px auto;
	text-align:left;
	font-size:0.8em;
	font-weight:300;
	list-style: square;

}
@media screen and (max-width: 768px){
	.notice-text{
		margin:30px 15px;
		padding-left:20px;	
	}
}

.notice-text li{
	padding:0.25em 0;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
13.カテゴリー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.category{
	margin:5px auto;

}
@media screen and (max-width: 768px){
	.category{
		width: 100%
	}
}
@media screen and (min-width: 768px){
	.category{
		width: 48%
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
14.セールスケジュール
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


.brand-schedule{
	padding-top:3em;
	padding-bottom:3em;
	background-color: #bb3937;
}

.brand-schedule_title{
	font-weight: bold;
	font-size:1.5em;
	border-bottom:solid 1px  #bb3937;
}

.brand-schedule_container{
	background-color: #fff;
	padding:30px;
	border-radius: 10px;
}

.list-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を左寄せ*/
	justify-content: left;
	
	margin:auto;
	text-align: left;
	width:100%;
}
.list-box img{
	width:100%;
}
.list-box > div {
	/*列数と間の余白の設定*/
	width: calc( ( 100% - 40px ) / 3 );
	margin-right: 20px;
}
/*右端のマージンをゼロ設定*/
.list-box > div:nth-child( 3n ) {
	margin-right: 0;
}
.list-item{
	font-size:1em;
	margin-top:20px;
}
@media (max-width: 768px) {
	.brand-schedule_container{
		padding: 6vw;
	}
	.list-box{
		/*padding:0 4vw;*/
	}
	.list-box > div {
		/*列数と間の余白の設定*/
		width: calc( ( 100% - 2vw ) / 2 );
		margin-right: 2vw;
	}
	.list-box > div:nth-child( 3n ) {
		margin-right: 2vw;
	}
	/*右端のマージンをゼロ設定*/
	.list-box > div:nth-child( 2n ) {
		margin-right: 0;
	}
	.list-item{
		margin-top:10px;
	}
}




/*----------------------------------------
 ex:パンくずリスト　
----------------------------------------*/
.breadcrumb_box {
	width:100%;
	/*margin-top: 60px;*/
	font-size: 0.7em;
	text-align: center;
	/*border-top:black 1px dotted;*/
	background-color: white;
}
.breadcrumb_box .container{
	padding-top:15px;
	padding-bottom:15px;
}

@media (max-width: 768px) {
	.breadcrumb_box{
		margin-top: 0px;
		font-size: 0.5em;
	}
	.breadcrumb_box .container{
		padding-top:15px;
		padding-bottom:15px;
	}
}

.breadcrumb {
	padding-left:0;
	margin-left:0;
}

.breadcrumb li{
	display:inline;/*横に並ぶように*/
	list-style: none;
	/*font-weight: bold;*//*太字*/
}

.breadcrumb li:after {/* >を表示*/
	content: '>';
	padding: 0 3px;
	color: #555;
}

.breadcrumb li:last-child:after {
	content: '';
}

.breadcrumb li a {
	text-decoration: none;
	color: #000000;/*色*/
}

.breadcrumb li a:hover {
	text-decoration: underline;
}





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ex.フェードインエフェクト
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.fadein-top {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}



/*下から*/
.fadein {
	opacity : 0;
	transform: translateY(50px);
	transition: all 1s;
	-moz-transform: translateY(50px);
	-webkit-transform: translateY(50px);
	-o-transform: translateY(50px);
	-ms-transform: translateY(50px);
}




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ex.swiper
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*リンクエリア用*/
.myLinkSwiper {
	width: 100%;
	/*height: 100%;*/
}
.myLinkSwiper .swiper-slide {
	text-align: center;
	/*font-size: 18px;*/
	background: #fff;
	padding:0;

	/* Center slide text vertically */
	/*display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;*/
}
.myLinkSwiper .swiper-slide .img {
	line-height: 0;
}
.myLinkSwiper .swiper-slide img {
	width: 100%;
	height: auto;
	line-height: 0;
}
/*ページネーション*/
.myLinkSwiper .swiper-pagination-bullet-active{
	background-color: #000;
}
/*矢印*/
.myLinkSwiper .swiper-button-next:after,
.myLinkSwiper .swiper-button-prev:after{
	color:#000;
	font-size:1.5em;
}
@media (max-width: 768px) { /*SP非表示*/
	.myLinkSwiper .swiper-pagination ,
	.myLinkSwiper .swiper-button-prev ,
	.myLinkSwiper .swiper-button-next{
		display: none;
	}
}
/*中身*/
.myLinkSwiper .text{
	padding:10px;
}
.myLinkSwiper .text01{
	font-weight:bold;
	font-size:1.4em;
}
.myLinkSwiper .text02{
	font-size:0.8em;
}
@media (max-width: 768px) {
	.myLinkSwiper .text01{
		font-size:1.2em;
	}
}