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

/*google fonts*/

/*Adobe fonts*/


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

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

1.全体
2.共通フォーマット（ボタンデザインなど）
3.メインビジュアル
4.イントロダクション
5.アイテム
7.フッター

*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■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マージン制御*/
/*.fs-l-pageMain{
	margin-top:100px!important;
}
@media screen and (max-width:768px) {
	.fs-l-pageMain{
		margin-top: 55px!important;
	}
}*/


@media screen and (max-width:768px) {
	.fs-l-main{
		padding-top:0!important;
	}
}

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

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

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

/*「並び替え・ページャーパーツ（システムパーツ）」を非表示*/
.fs-c-productList__controller{ display: none }

/*「商品グループエリア」表示調整*/
.fs-c-productList{
	margin: 0 3%;
}
.fs-c-productList__list {
    display: grid;
    grid-template-columns: calc(50% - 0px) calc(50% - 0px);
    grid-gap: 0px;
}
.fs-c-productList__list__item {
    margin: 25px 8px 0!important;
}

/*「商品グループエリア」を非表示*/
/*.fs-c-productList { display: none }*/

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

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


/*レビュー自動生成箇所調整*/
.fs-c-reviewList{
	text-align: left;
	font-size: 0.8em;
	line-height: 1.5;
}





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■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: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;
	font-weight: 400;
	color:#000;
}
@media screen and (max-width:768px) {
	.js-main{
		font-size: 4vw;
	}
}

/*リンクの設定*/
.js-main a{
	text-decoration:underline;
	color:#ff8439;
}
.js-main a:hover,a:hover img{
	opacity:0.8;
    -moz-opacity:0.8;
    filter:alpha(opacity = 80);
}


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

/*PC550px、SP100%*/
.js-container{
	width:95%;
	max-width:700px;
	margin:auto;
}

/*親要素を無視して画面幅いっぱいにする場合*/
.fullscreen{
	margin: 0 calc(50% - 50vw);  /* 画面幅いっぱいにはみ出させるためのネガティブマージン */
  	width: 100vw;                /* 幅を画面幅いっぱいに指定 */
}

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

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


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

/*共通margin設定*/
.main-margin{
	margin: 40px auto;
}
@media screen and (max-width: 768px){
	.main-margin{
		margin: 2.5em auto;
	}
}


/*テキスト色*/
.font_color01{/*オレンジ*/
	color: #ff8439;
}



/*背景色*/
.bgcolor-01{/*白*/
	background-color: #fff;
}

/*フォント*/
/*フォント指定*/
.font-01{ /*明朝系*/
	font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
}
.font-02{ /*ゴシック系*/
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;
}
.bold{ /*太字*/
	font-weight: bold;
}

.js-main img{
	width: 100%;
}




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
5.コンテンツ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.contents_wraper{
	
}

.contents_head{
	margin-bottom: 1em;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.contents_head_text01{
	font-size: 0.8em;
	line-height: 1.2;
}
.contents_head_text02{
	/*margin-top: 0.5em;*/
}

.contents_innner{
	
}

/*メニューボックス*/
.contents_menu_box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素の寄せ*/
	justify-content: center;
	align-items: flex-start;
	
	width:100%;
	margin-right: auto;
	margin-left: auto;	
}
.contents_menu_item{
	width: 30%;
	margin: 1%;
	border: 1px solid #000;
	padding: 10px 10px;
	line-height: 1.2;
	
	cursor: pointer; /* マウスを乗せた時に指マークにする */
    transition: all 0.3s ease; /* 変化を滑らかにする */
}
.contents_menu_item:hover {
	background-color: #ff8439; /* 背景色を薄いグレーに */
	color: #fff;
    opacity: 1; /* 少し透明にする */
}
@media screen and (max-width: 768px){
	.contents_menu_item{
		width: 48%;
		font-size: 3.4vw;
	}
}

.review_howto_text{
	margin-top:1em;
	font-size: 0.7em;
	color: #999;
}



/*レビュー投稿方法*/
.review_howto{
	
}


/*ピックアップレビュー*/
.review_pickup{
	
}
.review_pickup{
	


}
.review_pickup a{
	text-decoration: none;
	color: #000;
}

.pickup_review_box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素の寄せ*/
	justify-content: center;
	align-items: flex-start;
	
	width:100%;
	margin-right: auto;
	margin-left: auto;
	
	border: solid 1px #bbb;
	padding:20px;
	text-align: left;
}
.pickup_review_item01{
	width:30%;
	line-height: 1;
}
.pickup_review_item02{
	width:70%;
	padding-left: 20px;
	
	font-size: 0.8em;
	padding-bottom: 2em;
	line-height: 1.4;
}

/*星のレーティング*/
.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    font-size: 1.8em;
	
	/*margin-bottom:0.5em;*/
}
.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}
.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}
.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */



/*テキストとか*/
.review_itemname{
	/* 線と余白の調整 */
	border-bottom: 1px solid #666;
	padding-bottom: 0.5em;
	box-sizing: content-box; /* paddingを高さ計算に含めない */
}
@media screen and (min-width: 769px){
	.review_itemname{
		/*1行制限*/
		white-space: nowrap;     /* 折り返しを禁止 */
		overflow: hidden;        /* はみ出た部分を隠す */
		text-overflow: ellipsis; /* 末尾を「…」にする */
	}
}
@media screen and (max-width: 768px){
	.review_itemname{
		/* 2行で制限して三点リーダーを表示 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;

		/* 行間 1.4 の設定 */
		line-height: 1.4;
		height: 2.8em; /* 1.4 × 2行 */
	}
}


.review_text{
	margin-top:0.8em;
	
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10; /* 10行に制限 */
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 高さを10行分で固定する場合 (行間 1.5想定) */
    line-height: 1.4;
    height: 14em; /* (line-height) × (行数) */
}




/*footer*/




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

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

.fadein-top2 {
    animation: fadeIn2 2s ease 0.2s 1 both;
    -webkit-animation: fadeIn2 2s ease 0.2s 1 both;
}
@keyframes fadeIn2 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn2 {
    0% {opacity: 0}
    100% {opacity: 1}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ex.Swiper：スワイパー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.swiper {

}


.swiper a:hover,a:hover img{
	opacity: .8;
}

.swiper-wrapper{
	height:auto;
}

.swiper-slide {
	
}

.swiper-pagination-bullet{
    background-color: #000;
}
.swiper-pagination-bullet-active{
   background-color: #000;
}

/*.swiper-container{
	position: relative;
}
.swiper-pagination {
	 bottom: -20px !important;
}*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ex.javascript モーダル
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/* モーダル背景（全体を覆う黒い膜） */
.modal-overlay {
    display: none; /* 初期は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
	
	/* 追加：ふわっとさせるための設定 */
    opacity: 0;
    transition: opacity 0.4s ease; /* 0.4秒かけて透明度を変える */
}
/* モーダル本体 */
.modal-content {
    background-color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh; /* 画面の高さの80%を最大とする */
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
	
	/* 追加：下から上に浮き上がる設定 */
    transform: translateY(20px); /* 最初は少し下に下げておく */
    transition: transform 0.4s ease;
}
/* モーダルが「開いている時」の本体 */
.modal-overlay.is-open .modal-content {
    transform: translateY(0); /* 元の位置に戻る */
}
/* スクロール可能なエリア */
.modal-body {
    overflow-y: auto; /* 縦方向にスクロールを許可 */
    margin-top: 10px;
}
/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}
/* アクティブ時の表示（JavaScriptで付与） */
.modal-overlay.is-open {
	display: flex;
	opacity: 1;
}

/*中身の詳細*/
.modal-head{
	margin: 0.5em auto;
	font-weight: bold;
}
.modal-body{
	text-align: left;
	font-size:0.8em;
}
.modal_img{
	width: 100%;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}