@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 */
	--base-color: #ffffff;
	--base-color2: #ffffff;
	--main-color: #fff;
	--sub-color: #f1eef5;
	--bg-color01: #ffffff;
	--bg-color02: #ffffff;
	--btn-color01: #b8232d;
	--btn-color02: #3a6c94;
}


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

■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;
}


/* 「商品グループ表示」を非表示 */
.fs-c-subgroup { display: none }
/* 「商品グループ表示」を非表示ここまで*/ 

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■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%;
	}
}

.main-margin {
	margin: 70px auto;
}
@media screen and (max-width: 768px){   
	.main-margin {
		margin: 3em auto;
	}
}


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

/*ボタン*/
.btn01 a {
    background: var(--main-color);
    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;
	border: 1px solid #000;
}
.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;
	opacity: 1;
}
.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);
}

.main_title {
	font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;
	font-weight: 600;
	font-size: 1.5em;
	text-align: left;
	padding-bottom: 1.2em;
}
.main_title span {
	font-weight: 300;
	font-size: 0.6em;
}
@media screen and (max-width: 768px){
	.main_title {
		font-size: 1.2em;
		padding-bottom: 0.9em;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
3.イントロ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.intro_logo{
	margin-bottom:1em;
}
.intro_logo img{
	max-width: 180px;
}
@media screen and (max-width: 768px){
	.intro_logo img{
		max-width: 30%;
	}
}

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

.main-visual{
	margin-bottom:0;
	width:100%;
	background-color: #fbfbfb;
	line-height: 0;
}

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




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
5.ブランド一覧
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.brand-list {
	margin: 30px auto 70px;
}
.brand-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	/*align-items: center;
	justify-content: center;*/
	justify-content: center;
}
.brand-box_item{
	display: grid;
	place-items: center;
}

.brand-box_item{
	padding:0.5%;
	background-color: #f4f4f4;
	border-radius: 5px;
	width: calc((100% - 40px) / 6);
	margin-right: 8px;
	margin-top: 10px;
	height: 67px;
}
.brand-box_item:nth-child( 6n ) {
	margin-right: 0;
}
.brand-box_item img{
	width:70%;
	margin: 0 auto;
	display: block;
	justify-content: center;
}



@media screen and (max-width: 768px){
	.brand-list {
		margin: 1.5em auto 3.5em;
	}
	.brand-box_item{
		padding:1% 0.5%;
		border-radius: 3px;
		width: calc((100% - 10px) / 3);
		margin-right: 5px;
		margin-top: 5px;
		height: 50px;
	}
	.brand-box_item:nth-child( 3n ) {
		margin-right: 0;
	}

}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
4.検索
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
body {
	position: relative;
}

.search_item {
	position: fixed;
	bottom: 170px;
	right: 50px;
	z-index: 1000;
}
.search_item img:hover {
	cursor:pointer;
}

@media (max-width:768px) {
	.search_item {
		bottom: 190px;
		right: 10px;
	}
	.search_item img {
		width: 70px;
		margin: 10px
	}
}
.js_wrap #search_box_flag_pop:checked + #search_box_popup {
    display: block;
    width: 100vw;
    height: 100vh;
    background: #000000aa;
    position: fixed;
    top: 0;
    z-index: 9999;
    opacity: 1;
}



.js_wrap #search_box_popup {
    opacity: 0;
    z-index: 0;
    transition: 0.5s;
    display: none;
}

/*検索ボックス*/
.js_wrap .header__searchbox {
    display: none;
    width: 360px;
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 17px;
    z-index: 101;
}
.js_wrap .header__searchbox h2 {
	line-height: 1.2;
}

.js_wrap #search_box_flag_pop{
	display: none;
}
.js_wrap #search_box_popup{
	opacity: 0;
	z-index: 0;
	transition: 0.5s;
	display: none;
}
.js_wrap #search_box_flag_pop:checked + #search_box_popup{
	display: block;
	width: 100vw;
	height: 100vh;
	background: #000000aa;
	position: fixed;
	top: 0;
	z-index: 9999;
	opacity: 1;
}
.js_wrap .header__searchbox.is--opened {
    display: block;
}
.js_wrap .header__searchbox__title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
	font-family: "Julius Sans One", sans-serif;
    letter-spacing: 0.15em;
    font-weight: normal;
    padding-bottom: 33px;
}
.js_wrap .header__searchbox__title figure {
    width: 15px;
    height: auto;
    margin-right: 8px;
}
.js_wrap .header__searchbox input[type="text"],
.js_wrap .header__searchbox input[type="number"],
.js_wrap .header__searchbox input[type="checkbox"],
.js_wrap .header__searchbox select,
.js_wrap .header__searchbox__submit__item button,
.js_wrap .header__searchbox__submit__item input[type="reset"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 0;
    font: inherit;
    outline: none;
}
.js_wrap .header__searchbox input[type="text"],
.js_wrap .header__searchbox select {
    border: #969696 1px solid;
    width: 100%;
    line-height: 2em;
    padding: 0 5px;
    font-size: 0.9em;
    height: 28px;
    background: #fff;
}
.js_wrap .header__searchbox__detail {
    display: flex;
    align-items: center;
    padding-top: 21px;
}
.js_wrap .header__searchbox__detail__title {
    width: calc(100% - 205px);
}
.js_wrap .header__searchbox__detail__input {
    width: 205px;
    display: flex;
}
.js_wrap .header__searchbox__input input[type="text"] {
    height: 44px;
    padding-right: 50px;
    font-size: 14px;
    background: #fff;
	box-sizing: border-box;
}
.js_wrap .header__serachbox__detail__deco {
    position: relative;
    width: 100%;
}
.js_wrap .header__searchbox .header__serachbox__detail__deco:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    right: 8px;
    top: 48%;
    transform: translateY(-50%) rotate(135deg);
}
.js_wrap .header__searchbox__detail[data-type="price"] span {
    padding: 0 2px;
    height: 28px;
    white-space: nowrap;
    min-width: 28px;
}
.js_wrap .header__searchbox__detail[data-type="price"] span:last-child {
    padding-right: 0;
}
.js_wrap .header__searchbox__detail[data-type="price"] span.header__searchbox__detail__yen {
    position: relative;
    bottom: -6px;
}
.js_wrap .header__searchbox__detail__input label {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}
.js_wrap .header__searchbox__detail__input label:last-child {
    padding-bottom: 0;
}
.js_wrap .header__searchbox__detail__input input[type="checkbox"] {
    border: #969696 1px solid;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background: #fff;
}
.js_wrap .header__searchbox__detail__input input[type="checkbox"]:checked {
    background-color: #5a4a43;
    border-color: #5a4a43;
}
.js_wrap .header__searchbox__detail[data-type="price"] .header__searchbox__detail__input {
    align-items: baseline;
}
.js_wrap .header__searchbox__detail[data-type="else"] .header__searchbox__detail__input,
.js_wrap .header__searchbox__detail[data-type="zaiko"] .header__searchbox__detail__input {
    flex-direction: column;
}
.js_wrap .header__searchbox__submit {
    padding-top: 48px;
    font-size: 0.9em;
}
.js_wrap .header__searchbox__submit__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.js_wrap .header__searchbox__submit__item button {
    background-color: #5a4a43;
    border: #23abdd 1px solid;
    color: #ffffff;
    width: 157px;
    height: 36px;
    background-image: url(https://www.joint-space.co.jp/event_news/event/sale/img/btn_search.svg);
    background-repeat: no-repeat;
    background-size: 14px 11px;
    background-position: 5px center;
    padding-left: 15px;
}
.js_wrap .header__searchbox__submit__item input[type="reset"] {
    border: #969696 1px solid;
    color: #969696;
    width: 157px;
    height: 36px;
}
.js_wrap .header__searchbox__closebtn {
    display: block;
    height: 15px;
    width: 15px;
    font-size: 0;
    position: absolute;
    top: 47px;
    right: 20px;
}
.js_wrap .header__searchbox__closebtn label{
	width: 30px;
	height: 30px;
	display: block;
	margin-top: -38px;
}
.js_wrap .header__searchbox__closebtn label:before,
.js_wrap .header__searchbox__closebtn label:after {
    content: "";
    height: 1px;
    width: 24px;
    display: block;
    position: relative;
	background: #000;
}

.js_wrap .header__searchbox__closebtn label:before {
    transform: rotate(45deg);
    top: 14px;
}
.js_wrap .header__searchbox__closebtn label:after {
    transform: rotate(-45deg);
    top: 13px;
}
.js_wrap .icon_search label {
    background-image: url(../images/header/search.png);
}
.js_wrap .header_search li {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
}
.js_wrap .header_search li .fs-p-cartItemNumber{
	right: -4px;
}
.js_wrap .header_search li a,
.js_wrap .header_search li label {
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain;
    display: block;
}
.js_wrap .header_search li.icon_search label {
    background-image: url(../images/header/search.png);
}
.js_wrap .header_search li.icon_cart{
	position: relative;
}
.js_wrap .header__searchbox__input {
	position: relative;
}
.js_wrap .header__searchbox__input img {
	position: absolute;
	height: 35px;
    right: 10px;
    top: 4px;
    width: 35px;
}
.js_wrap .nav_hamburger .header__searchbox {
	display: block;
	position: relative;
	top: 0;
	transform: none;
	left: 0;
	width: 100%;
	background-color: #f1f0ee;
	padding: 14px;
	box-sizing: border-box;
	margin-top: 20px;
}

.js_wrap .header__searchbox__submit__item button {
    color: #fff;
    width: 72%;
    height: 40px;
    padding-left: 15px;
    background-color: #23abdd;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 10px center;
}
.js_wrap .header__searchbox__detail__input input[type="checkbox"]:checked {
	background-color: #323333;
	border-color: #323333;
}
.js_wrap .header__searchbox__submit__item input[type="reset"] {
    width: 25%;
    height: 40px;
	text-align: center;
}


/*PCのみ*/
@media screen and (min-width:768px) {
	.js_wrap .header__searchbox__title figure {
		margin-left: -5px;
	}
}

@media (max-width: 768px) {
    .js_wrap .header__searchbox__title {
        font-size: calc(100vw / 770 * 23);
        padding-bottom: calc(100vw / 770 * 70);
    }
    .js_wrap .header__searchbox__title figure {
        width: calc(100vw / 770 * 30);
    }
    .js_wrap .header__searchbox__input input[type="text"] {
        height: calc(100vw / 770 * 88);
        padding-right: 5px;
        background-repeat: no-repeat;
        background-position: calc(100% - 100vw / 770 * 20) center;
        background-size: calc(100vw / 770 * 50) calc(100vw / 770 * 50);
        font-size: calc(100vw / 770 * 30);
    }
    .js_wrap .header__searchbox__input input[type="text"] {
        height: calc(100vw / 770 * 88);
        padding-right: 5px;
        background-repeat: no-repeat;
        background-position: calc(100% - 100vw / 770 * 20) center;
        background-size: calc(100vw / 770 * 50) calc(100vw / 770 * 50);
        font-size: calc(100vw / 770 * 30);
    }
    .js_wrap .header__searchbox__detail {
        padding-top: calc(100vw / 770 * 44);
    }
    .js_wrap .header__searchbox .header__serachbox__detail__deco:after {
        content: "";
        display: block;
        position: absolute;
        width: 1.8vw;
        height: 1.8vw;
        right: 2.5vw;
    }
    .js_wrap .header__searchbox__closebtn {
        width: calc(100vw / 770 * 40);
        height: calc(100vw / 770 * 40);
        top: calc(100vw / 770 * 20);
        right: calc(100vw / 770 * 20);
    }
    .js_wrap .header__searchbox__closebtn label:before,
    .js_wrap .header__searchbox__closebtn label:after {
        width: calc(100vw / 770 * 48);
    }
    .js_wrap .header__searchbox__closebtn label:before {
        top: calc(100vw / 770 * 14);
    }
    .js_wrap .header__searchbox__closebtn label:after {
        top: calc(100vw / 770 * -6);
    }

    .js_wrap .header__searchbox {
		width: calc(100vw / 770 * 650);
        padding: calc(100vw / 770 * 40) calc(100vw / 770 * 33);
        font-size: calc(100vw / 770 * 25);
    }
    .js_wrap .header__searchbox__detail .header__searchbox input[type="text"],
    .js_wrap .header__searchbox__detail .header__searchbox select {
        font-size: calc(100vw / 770 * 25);
    }
    .js_wrap .header__searchbox__input input[type="text"] {
        height: calc(100vw / 770 * 88);
        padding-right: 5px;
        background-repeat: no-repeat;
        background-position: calc(100% - 100vw / 770 * 20) center;
        background-size: calc(100vw / 770 * 50) calc(100vw / 770 * 50);
        font-size: calc(100vw / 770 * 30);
    }
    .js_wrap .header__searchbox__detail .header__searchbox select,
    .js_wrap .header__searchbox__detail .header__searchbox input[type="text"] {
        height: calc(100vw / 770 *56);
    }
    .js_wrap .header__searchbox .header__serachbox__detail__deco select {
        padding-right: 5vw;
    }

    .js_wrap .header__searchbox__detail dt {
        font-size: 13px;
        width: 80px;
        white-space: nowrap;
        letter-spacing: 0.5px;
    }
    .js_wrap .header__searchbox__detail dd {
        width: calc(100vw / 770 * 407);
    }
    .js_wrap .header__searchbox__detail[data-type="price"] span {
        padding: 0 1vw;
    }
    .js_wrap .header__searchbox__detail[data-type="price"] span:last-child {
        padding-right: 0;
    }
    .js_wrap .header__searchbox__detail[data-type="price"] span.header__searchbox__detail__yen {
        position: relative;
        bottom: -1.5vw;
    }
    .js_wrap .header__searchbox__detail__input label {
        padding-bottom: calc(100vw / 770 * 22);
    }
    .js_wrap .header__searchbox__detail__input input[type="checkbox"] {
        width: calc(100vw / 770 * 30);
        height: calc(100vw / 770 * 30);
        margin-right: calc(100vw / 770 * 25);
    }
    .js_wrap .header__searchbox__submit__item button,
    .js_wrap .header__searchbox__submit__item input[type="reset"] {
        width: calc(100vw / 770 * 314);
        height: calc(100vw / 770 * 75);
        font-size: calc(100vw / 770 * 23);
    }
    .js_wrap .header__searchbox__submit__item button {
        background-size: calc(100vw / 770 * 27) calc(100vw / 770 * 24);
        background-position: calc(100vw / 770 * 20) center;
    }
}

@media (max-width: 767px) {
	.js_wrap .search_area_leftnav input[type="text"], .js_wrap .header__searchbox__input input[type="text"] {
		font-size: 4vw;
	}
	.js_wrap .header__searchbox__closebtn {
		top: 56px;
	}
	.js_wrap .header__searchbox__closebtn label:before {
		top: -1px;
	}
	.js_wrap .header__searchbox__submit__item input[type="reset"] {
		font-size: 2.4vw;
	}
	.js_wrap .search_area_leftnav input[type="text"],
	.js_wrap .header__searchbox__input input[type="text"] {
		font-size: 4vw;
	}
	.js_wrap .header__searchbox__title figure {
		margin-left: 0;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
6.バナーリンク
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.link_area_item img {
	width: 70%;
}
@media (max-width: 767px) {
	.link_area_item img {
		width: 100%;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
6.pickup-KARTE表示用エリア
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

#pickup{
	width: 95%;
	max-width: 800px;
	margin-top: auto;
	margin-left: auto;
}

#pickup .jskarte_link_area{
	margin: 1em auto;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
6.pickup
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.pickup-container {
	width:920px;
	margin:auto;
}
.pickup_box {
	background-color: #9f9f9f;
	/*margin-bottom: 60px;*/
	background-color: transparent;
}
.slick-next:before,
.slick-prev:before {
	margin-top: -20px;
}
.slick-prev, .slick-next {
	top: 40%!important;
}
.slick-slide img {
	margin-bottom: 0!important;
	border-radius: 5%;
}
.slick-track{
	margin-left: 0!important;
}
@media (max-width:768px){
	.pickup-container {
		width:100%;
	}
	.slick-list {
		padding: 0 20% 0 0 !important;
	}
	.slick-slide {
		margin-right: 5px;
	}
	.slick-list img {
	  width: 100%;
	}
}


/*文字＋テキスト用*/
.pickup-container .pickup_imgtext{
	background: #c0c0c0 no-repeat center / cover;
	padding-top: 100%;
	border-radius: 5%;
	position: relative;
}
.pickup-container .pickup_imgtext::after{
	content: '';
	background: -moz-linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 50%);
	background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 50%);
	background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 50%); 
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 0;
	border-radius: 5%;
	padding-top: 100%;
}
.pickup-container .pickup_imgtext_inner{
	position: absolute;
	bottom:5%;
	left:5%;
	color:#fff;
	z-index: 2;
	letter-spacing: 0;;
	overflow-wrap:break-word;
	text-align: left;
}
.pickup-container .pickup_imgtext_inner > .text01{
	font-weight: 600;
	line-height:1.3;
	font-size:1em;
}
.pickup-container .pickup_imgtext_inner > .text02{
	font-size:0.7em;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
7.価格別ピックアップ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.pick-01-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: flex-start;
	position: relative;
}
/*.pick-01-item{
	display: grid;
	place-items: center;
}*/

.pick-01-item{
	padding: 0.8em 0.5%;
	color: #fff;
	background-color: var(--btn-color01);
	border-radius: 5px;
	width: calc((100% - 20px) / 5);
	margin-right: 5px;
	margin-bottom: 8px;
}
.pick-01-item:nth-child( 5n ) {
	margin-right: 0;
}
.pick-01-item a{
	color: #fff;
	display: block;
	width: 100%;
	height: 100%;
}
@media (max-width:768px){
	.pick-01-item{
		padding: 0.8em 0.5%;
		border-radius: 5px;
		width: calc((100% - 10px) / 3);
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.pick-01-item:nth-child( 3n ) {
		margin-right: 0;
	}
	.pick-01-item:nth-child( 5n ) {
		margin-right: 5px;
	}
}
.pick-02-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: flex-start;
	position: relative;
}
/*.pick-01-item{
	display: grid;
	place-items: center;
}*/

.pick-02-item{
	padding: 0.8em 0.5%;
	color: #fff;
	background-color: var(--btn-color02);
	border-radius: 5px;
	width: calc((100% - 20px) / 5);
	margin-right: 5px;
	margin-bottom: 8px;
}
.pick-02-item:nth-child( 5n ) {
	margin-right: 0;
}
.pick-02-item a{
	color: #fff;
	display: block;
	width: 100%;
	height: 100%;
}
@media (max-width:768px){
	.pick-02-item{
		padding: 0.8em 0.5%;
		border-radius: 5px;
		width: calc((100% - 10px) / 3);
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.pick-02-item:nth-child( 3n ) {
		margin-right: 0;
	}
	.pick-02-item:nth-child( 5n ) {
		margin-right: 5px;
	}
}
.pick-03-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: flex-start;
	position: relative;
}

.pick-03-item{
	padding: 0.8em 0.5%;
	color: #fff;
	background-color: var(--btn-color01);
	border-radius: 5px;
	width: calc((100% - 20px) / 5);
	margin-right: 5px;
	margin-bottom: 8px;
	line-height: 1.4;
}
.pick-03-item span {
	font-size: 0.65em;
}
.pick-03-item:nth-child( 5n ) {
	margin-right: 0;
}
.pick-03-item a{
	color: #fff;
	display: block;
	width: 100%;
	height: 100%;
}
@media (max-width:768px){
	.pick-03-item{
		padding: 0.8em 0.5%;
		border-radius: 5px;
		width: calc((100% - 10px) / 3);
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.pick-03-item:nth-child( 3n ) {
		margin-right: 0;
	}
	.pick-03-item:nth-child( 5n ) {
		margin-right: 5px;
	}
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
8.アイテム別ピックアップ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.itempick{
	
}

.itempick_set{
	width:100%;
	max-width:900px;
	margin: 0 auto 30px;
}
.itempick_set:last-child{
	margin: 0 auto 0;
}
.itempick_set img{
	width:100%;
}

.itempick_wrapper{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を左寄せ*/
	justify-content: center;
	align-items: center;
}
.itempick_item01{
	width:50%;
}
.itempick_item02{
	width:50%;
	padding: 10px 0 10px 50px;
	text-align: left;
	line-height:1.35;
}

.itempick_set:nth-child(2n) .itempick_item01{
	order: 2;
}
.itempick_set:nth-child(2n) .itempick_item02{
	order: 1;
	padding: 10px 50px 10px 0px;
	text-align: right;
}

.itempick_text01{
	font-size:1.5em;
	font-weight:700;
}
.itempick_text02{
	margin-top:1em;
	font-size:0.8em;
	color: #BBBBBB;
}
.itempick_text03{
	margin-top:1em;
}
.itempick_icon{
	display: inline-block;
	padding: 0 10px 0 10px;
	color:#fff;
	background-color: crimson;
	
}
.itempick_price{
	margin-top:0.1em;
	color: crimson;
	font-size: 1.5em;
	font-weight: 700;
}
.itempick_price span{
	font-size:0.8em;
}

@media (max-width:768px){
	.itempick_set{
		margin: 0 auto 1em;
	}
	.itempick_item02{
		padding: 0 2.5% 0 2.5%;
	}
	.itempick_set:nth-child(2n) .itempick_item02{
		padding: 0 2.5% 0 2.5%;
	}
	
	.itempick_text01{
		font-size:4vw;
	}
	.itempick_text02{
		font-size:2.2vw;
	}
	.itempick_text03{
		margin-top:0.5em;
	}
	.itempick_icon{
		font-size:3.5vw;
	}
	.itempick_price{
		font-size:5.5vw;
	}
}


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



/*.rangking_area_title div{
	font-size:1.2em;
	padding-bottom:1em;
	font-weight:normal;
	text-align: left;
}*/

.ranking_more {
	margin-top: 20px;
	text-align: right;
}
@media (max-width:768px){
	.ranking_more {
		font-size: 1em;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
10.sale footer
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.pagetop img {
	width: 23px;
	margin-bottom: 0.5em;
}
.pagetop span {
	letter-spacing: 0.2em;
	color: #1b1b1b;
}
.footer-js-link-logo {
	width: 270px;
	margin: 6em auto 0.5em;
}
.footer-js-link {
	letter-spacing: 0.2em;
	color: #1b1b1b;
}
@media screen and (max-width: 768px){
	.pagetop img {
		width: 35px;
		margin-bottom: 0.5em;
	}
	.pagetop span {
		font-size: 1.4em;
	}
	.footer-js-link-logo {
		width: 230px;
		margin: 6em auto 0.5em;
	}
	.footer-js-link {
		letter-spacing: 0.2em;
	}

}




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
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{
		padding: 0 0.5em;
	}
}

.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;
	}
}