@charset "UTF-8";
/* CSS Document */
/* ==================================
    基本
==================================*/
html{
    font-size: 62.5%;/* ブラウザデフォ値16pxの62.5% = 10px */
}
body{
    background-color: #fff;
    font-size: 1.4rem;
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    color: #2d2d2d;
}
a img:hover{
    opacity: 0.7;
    transition: 0.6s;
}
.flex{
    display: flex;
}
/* ==================================
    レイアウト ly_◯◯
==================================*/
.ly_header{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #FFF;
    opacity: 0.9;
    padding: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}
.ly_header__logo{
    width: 160px;
}
.ly_footer{
    width: 100%;
    padding: 30px;
    text-align: center;
    background-color: #B6B6B6;
}
.ly_cont{
    max-width: 740px;
    padding: 60px 20px 0;
    margin: 0 auto;  
}
.ly_cont__intro{
    padding: 0 30px 30px;
}

/* ==================================
    トップイメージ
==================================*/

/* ウィンドウサイズいっぱい */
.bl_topimage__l img{
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-top:60px; /*ヘッダーの高さ分下げる*/
    max-width: none;
    height: auto;
    display: block;
}
/* 画像サイズで表示 */
.bl_topimage__m img{
    max-width: 100%;
    padding-top:60px; /*ヘッダーの高さ分下げる*/    
    height: auto;
    display: block;
    margin: 0 auto;
}
.hp_overflowHidden{
    overflow: hidden;
}
/*トップイメージ PC時はスマホverを非表示*/
.hp_spImg{
    display: none !important;
}

/* ==================================
    イントロ
==================================*/
.bl_intro__text{
    font-size: 1.4rem;
    line-height: 1.8;
    color: #222;
}


/* ==================================
    .bl_unit
==================================*/


/* 大タイトル */
.bl_unit__titleBasic{
    font-size: 3.8rem;
    line-height: 1;
    margin: 0 0 30px 0;
    color: #2d2d2d; 
    font-family: 'Josefin Sans',sans-serif !important;
    font-style: italic;
    text-align: center;
}
/* 大タイトルサブ */
.bl_unit__titleSub{
    font-size: 0.5em;
    line-height: 1;
    display: block;
    margin-top: 5px;
}
/* 大タイトルgooglefonts指定 */
/*.hp_googleFonts__JosefinSans{
    font-family: 'Josefin Sans', sans-serif;
}*/

/* タイトル下画像 */
.bl_unit__img{
    width: 100%;
    height: auto;
    text-align: center;
}
.bl_unit__img  img{
    max-width: 100%;
}
/* bl_unit幅より小さくしたい場合 */
.bl_unit__imgMid img{
    max-width: 90%!important;
}

/* 商品説明タイトル */
.bl_unit__descTitle{
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 800;
    margin-bottom: 20px;
}

/* 商品説明 本文 */
.bl_unit__descItem{
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 10px;
}
/* 商品説明 商品情報 */
.bl_unit__descInfo{
    font-size: 1.2rem;
    line-height: 1.4;
    text-decoration: underline;
}
.bl_unit__descInfo:hover{
    text-decoration: none;
}

/* ==================================
    見出し
==================================*/
.el_headingSub{
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
}
/* ==================================
    ボタン
==================================*/

/* 角丸ボタン */
.button-054 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin:40px auto 0;
    padding: .9em 3em .9em 2em;
    border: 1px solid #333333;
    border-radius: 25px;
    background-color: #fff;
    color: #333333;
    font-size: 1.4rem;
}

.button-054::after {
    position: absolute;
    right: 2em;
    transform: translateY(-50%);
    transform-origin: left;
    width: 2em;
    height: .5em;
    background-color: #333333;
    clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
    content: '';
    transition: transform .3s;
}

.button-054:hover::after {
    transform: translateY(-50%) scaleX(1.4);
}

/* 詳しく見るボタン */
.el_buttunMore{
    background-color: #2D3B55;
    border: 1px solid transparent;
    padding: 15px 30px;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: bold;
    border-radius: 5px;
}
.el_buttunMore:focus,
.el_buttunMore:hover{
    border-color: currentColor;
    background-color: #fff;
    color: #2D3B55;
    transition: 0.5s;
}

/* ==================================
    bl_itemParts
==================================*/
.bl_itemParts{
    border-top: 1px solid #DBDBDB;
    border-bottom: 1px solid #DBDBDB;
    max-width: 100%;
    padding: 20px 0;
    margin-right: auto;
    margin-left: auto;
}
.bl_itemParts__img{
    max-width: 150px;
}
.bl_itemParts__img img{
    max-width: 100%;
}
.bl_itemParts__info{
    margin-left: 20px;
    position: relative;
    width: 100%;
}
.bl_itemParts__name{
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: bold;
    /* 以下2行を超える場合の3点リーダー表示指定 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 任意の行数を指定 */
}
.bl_itemParts__price{
    font-size: 1.5rem;
    line-height: 1; 
}
.bl_itemParts__button{
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ==================================
    bl_itemCard
==================================*/
.bl_itemCardWrap{
    display: flex;
	flex-wrap: wrap;/* 画面幅に合わせてカラム落ちさせる */
	justify-content: space-between;/* 均等割り付け */
	align-items: top;
}
.bl_itemCard__col4{
    width: 165px;
    border: 1px solid #ddd;
    background-color: #F5F5F5;
    border-radius: 10px;
    margin-top: 20px;
}
.bl_itemCard__col3{
    width: 225px;
    border: 1px solid #ddd;
    background-color: #F5F5F5;
    border-radius: 10px;
    margin-top: 20px;   
}

/* --------------    4カラム用   --------------
  均等寄せのまま一番最後のコンテンツだけ左寄せ（5カラム以上は非対応）*/
.hp_flexCol4:after{
    content: "";
    display: block;
    width: 165px;/* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
/*4カラムの場合のみ必要：*/
.hp_flexCol4:before{
    content: "";
    display: block;
    width: 165px;/* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
    order: 1;/* 疑似要素beforeの順番を必ず指定する*/
}

/* --------------    3カラム用   --------------
  均等寄せのまま一番最後のコンテンツだけ左寄せ（5カラム以上は非対応）*/
.hp_flexCol3:after{
    content: "";
    display: block;
    width: 225px;/* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

.bl_itemCard__img img{
    max-width: 100%;
    border-radius: 10px 10px 0 0;
}
.bl_itemCard__info{
    position: relative;
    width: 100%;
    padding: 16px;
}
.bl_itemCard__name{
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: bold;
    /* 以下2行を超える場合の3点リーダー表示指定 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 任意の行数を指定 */
}
.bl_itemCard__price{
    font-size: 1.3rem;
    line-height: 1; 
}


/* ==================================
    TOPに戻るボタン
==================================*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#777;
	/*border-radius: 30px;*/
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}



/* ==================================
    スライダー（slick）のCSS
==================================*/

/*---- 矢印の設定 ----*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 44%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:15px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:10px;/*ドットボタンのサイズ*/
    height:10px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#E7E7E7;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/* ==================================
    下からふわ
==================================*/

.js_scrollUp {
  transition: 1s ease-in-out;
  transform: translateY(200px);
  opacity: 0;
}
.js_scrollUp.on {
  transform: translateY(0);
  opacity: 1.0;
}
/* ==================================
    その他ヘルパークラス
==================================*/
.hp_tac{
    text-align: center!important;
}

/*PC表示の際は<br>を無効化する*/
.hp_spBr{
    display: none;
}

/* ==================================
    margin用ヘルパークラス
==================================*/
.hp_mt5{
    margin-top: 5px;   
}
.hp_mt10{
    margin-top: 10px;   
}
.hp_mt20{
    margin-top: 20px;   
}
.hp_mt30{
    margin-top: 30px;   
}
.hp_mt40{
    margin-top: 40px;   
}
.hp_mt50{
    margin-top: 50px;   
}
.hp_mt60{
    margin-top: 60px;   
}
.hp_mt70{
    margin-top: 70px;   
}
.hp_mt80{
    margin-top: 80px;   
}
.hp_mt90{
    margin-top: 90px;   
}
.hp_mt100{
    margin-top: 100px;   
}
.hp_mt120{
    margin-top: 120px;   
}
.hp_mt140{
    margin-top: 140px;   
}
.hp_mt160{
    margin-top: 160px;   
}
.hp_mt180{
    margin-top: 180px;   
}
.hp_mt200{
    margin-top: 200px;   
}
/* ==================================
    メディアクエリ（スマホ表示）800px以下
==================================*/

@media only screen and (max-width: 800px) {

/*トップスライド PCverを非表示*/
.hp_pcImg{
    display: none;
}
.hp_spImg{
    display: block !important;
}
/*brを有効化*/
.hp_spBr{
    display: inline;
}
/*詳しく見るボタンの幅を100%に*/
.bl_itemParts__button{
    width: 100%;
    padding: 10px;
}
/*商品パーツの商品名文字サイズ*/
.bl_itemParts__name{
    font-size: 1.2rem;
    line-height: 1.4;
}
.bl_itemParts__price{
    font-size: 1.2rem;
    line-height: 1;
}
/*itemCard*/
.bl_itemCardWrap{
    flex-wrap: nowrap;/*折返ししない*/
    justify-content: flex-start;/*均等割りしない*/
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    margin-top: 10px;
}
.bl_itemCard__col4{
    margin-right: 10px;
    margin-top: 0;
    flex: 0 0 60%;
}
.bl_itemCard__col4:last-child{
    margin-right: 0;
}
.bl_itemCard__col3{
    margin-right: 10px;
    margin-top: 0;
    flex: 0 0 60%;
}
.bl_itemCard__col3:last-child{
    margin-right: 0;
}
/*リンクを右下に固定 スマホ*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}
}