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

/*google fonts読み込み*/
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Arsenal&family=Buenard&display=swap');

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

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

1.全体
2.タイトル
3.メインビジュアル
4メニュー
5.プロフィール
6.コンセプト
7.アイテムラインナップ
8.インフォメーション
9.JS link

*/

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

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

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


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■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.全体
================================*/

/*全体の設定/フォントなど*/
.JS-pagebody{
	text-align: center;
	font-size:1em;
	line-height: 2;
	letter-spacing: 0.07em;
	font-family:'Noto Sans JP', 'Hiragino Sans W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 
}

/*全体の設定/リンク*/
.JS-pagebody a{
	text-decoration: none;
	color: #000;
}
.JS-pagebody a:hover{
	opacity: 0.5 ;
}

/*widthなどの適応範囲をborder基準に変更*/
.JS-pagebody, .JS-pagebody::before, .JS-pagebody::after{
	box-sizing: border-box;
}

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

/*PC横幅980/SP100%コンテナ*/
.JS-container{
	width:980px;
	margin:auto;
}
@media screen and (max-width:768px) {
	.JS-container{
	width:100%;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2.タイトル
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.JS-titlelogoimg{
	padding: 2em 2em 1.5em 2em;
	width:600px;
	height: auto;
}


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

.JS-mainvisual{
	margin-top:-0.5em;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
4.メニュー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.JS-menu_box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	
	/*以下フォントなど*/
	margin-top:1.5em;
	font-size:2em;
	font-family:'Arsenal', 'Noto Sans JP', 'Hiragino Sans W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 
	
}
.JS-menu_box .item{
	/*フレックスボックスの1つの幅設定*/
	width: 33.3%;
}

/*SP用*/
@media screen and (max-width:768px) {
	.JS-menu_box{
		margin-left:2%;
		font-size:1em;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
5.プロフィール
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*全体*/
.JS-profile{
	padding-top:4em;
}

/*説明文*/
.JS-profile_text{
	padding-top:2em;
	font-size:1.2em;
}
@media screen and (max-width:768px) {
	.JS-profile_text{
		font-size:1em;
	}
}

/*プロフィール写真*/
.JS-profile_img{
	width:350px;
	padding-top:4em;
}

/*SNSリンクボタン*/
.JS-profile_link{
	padding-top:4em;
}
.JS-profile_link .btn{
	display: inline-block;
	padding: 0% 5%;
	color:#787878;
	border:solid 1px #787878;
	font-size:2em;
	letter-spacing: 0.15em;
	font-family:'Arsenal', 'Noto Sans JP', 'Hiragino Sans W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 
}
@media screen and (max-width:768px) {
	.JS-profile_link{
		padding-top:2em;
	}
	.JS-profile_link .btn{
		font-size:1.2em;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
6.コンセプト
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*タイトル-アイテムラインナップ・オールアイテム・インフォメーションと併用*/
.JS-concept_title{
	margin:0;
	padding-top:4em;
	font-size: 5em;
	letter-spacing: 0.05em;
	font-family: 'Amiri', serif;
	font-weight: bold;
}
@media screen and (max-width:768px) {
	.JS-concept_title {
		padding-top:3.5em;
		font-size: 2.5em;
	}
}

/*サブタイトル*/
.JS-concept_subtitle{
	padding-top:0.8em;
	font-size: 2.2em;
	letter-spacing: 0.15em;
	font-family: 'Buenard', serif;
}
@media screen and (max-width:768px) {
	.JS-concept_subtitle{
		font-size: 1.4em;
	}
}

/*テキスト*/
.JS-concept_text{
	padding-top:2em;
	font-size:1em;
}
@media screen and (max-width:768px) {
	.JS-concept_text{
		font-size: 0.8em;
	}
}

/*画像*/
.JS-concept_img{
	padding-top:2.5em;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
7.アイテムラインナップ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*2列に並べるフレックスボックス他の設定*/
.JS-item_box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: center;
	
	/*その他の設定*/
	padding-top:2em;
	margin:auto;
}
.JS-item_box .item{
	/*フレックスボックスの1つの幅設定*/
	width: 50%;
	
	/*その他の設定*/
	padding:5%;
	text-align: left;
}
	
2列に並べるフレックスボックス他の設定：スマホ用調整
@media screen and (max-width:768px) {
	.JS-item_box{
		padding:2em 3% 0 3%;
	}
	.JS-item_box .item{
		padding:4%;
	}
}

/*画像の横幅を枠内いっぱいにする*/
.JS-item_box img{
	width:100%;
	height: auto;
}

/*販売日*/
.JS-item_box .date{
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.25;
}
@media screen and (max-width:768px) {
	.JS-item_box .date{
		font-size: 0.9em;
	}
}

/*販売日 restock*/
.JS-item_box .date-re{
	font-size: 1.1em;
	color:#D74548;
	font-weight: bold;
	line-height: 1.25;
}
@media screen and (max-width:768px) {
	.JS-item_box .date-re{
		font-size: 0.9em;
	}
}

/*商品名*/
.JS-item_box .name{
	/*margin-top:-0.3em;*/
	font-size: 1em;
	line-height: 1.2;
}
@media screen and (max-width:768px) {
	.JS-item_box .name{
		margin-top:0;
		font-size: 0.75em;
	}
}
	
/*こだわりポイント見出し*/
.JS-item_box .kodawari{
	padding-top:0.8em;
	font-size: 0.9em;
	font-weight: bold;
	border-bottom: dotted 1px #363636;
}
@media screen and (max-width:768px) {
	.JS-item_box .kodawari{
		font-size: 0.7em;
	}
}
	
/*こだわりポイントテキスト*/
.JS-item_box .text{
	padding-top:0.6em;
	font-size: 1em;
	line-height: 1.7;
}
@media screen and (max-width:768px) {
	.JS-item_box .text{
		font-size: 0.7em;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
8.インフォメーション
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*2列に並べるフレックスボックス他の設定*/
.JS-info_box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: center;
	
	/*その他の設定*/
	padding-top:2em;
	margin:auto;
}
.JS-info_box .item{
	/*フレックスボックスの1つの幅設定*/
	width: 44%;
	
	/*その他の設定*/
	padding:2%;
	text-align: left;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
9.JS link
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.JS-link_img{
	padding: 8em 3em 6em 3em;
	width:700px;
}