@charset "UTF-8";
@import url("common.css");

/*  共通
-------------------------------------------------------------*/
.content__inner{margin: 0 auto; padding: 56px 24px; max-width: 1032px;}
.top__content{background: url(../images/top/bg02.jpg) no-repeat; background-size: cover;}
.top__content-gr{background-color: var(--color-lightGray);}
.top__content-item+.top__content-item{padding: 56px 0;}

/* ボタン */
.btn-more{padding: 9px 29px 9px 9px; font-size: var(--fontSize-Yu-h4);}
.btn-more::after{transform: translate(-50%, 0); top: 18%; right: 0;}
.btn-long{width: 258px;}
.btn-middle{width: 218px;}
.btn-short{width: 162px;}

/* そのほか */
.top__content-item .flex__box{margin: 0 0 48px;}

/*  メインビジュアル
-------------------------------------------------------------*/
.mv__slide{margin: 0 0 50px;}
.mv__slide img{display: block; width: 100%; max-width: 380px; height: 240px; object-fit: cover;}
.slider .slick-slide{margin-right: 8px!important; margin-left: 8px!important;}

.slick-next{top: 40%; right: 60px;}
.slick-next:before{content: ""; display: block; width: 56px; height: 56px; background-size: 56px; background-image: url(../images/common/slick_arrow_next.png); background-repeat: no-repeat;}
.slick-prev{top: 40%; left: 26px; z-index: 1;}
.slick-prev:before{content: ""; display: block; width: 56px; height: 56px; background-size: 56px; background-image: url(../images/common/slick_arrow_prev.png); background-repeat: no-repeat;}
.slick-dots li button:before{width: 12px; height: 12px; font-size: 16px; color: var(--line-lightGray); opacity: 1;}
.slick-dots li.slick-active button:before{color: var(--color-lightBlue);}

/* スライド4枚以下の時 */
.slide-one{display: flex; justify-content: center; gap: 16px;}

/*  会員登録
-------------------------------------------------------------*/
.free__content{background-image: url(../images/top/bg01.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%;}
.free__content-link{position: relative; text-decoration: none; color: var(--color-lightBlue);}
.free__content-link::after{content: ""; position: absolute; background: url(../images/common/icon_16arrow_right_bl.svg); width: 16px; height: 16px; top: 0; right: -20px;}
.free__content-link:hover{opacity: .6; transition: .2s; color: var(--color-lightBlue);}

/* 見出し */
.free__content-gr{margin: 16px auto 0; padding: 16px; background-color: var(--color-lightGray); width: 644px; text-align: center;}
.free__content-ttl{display: flex; flex-direction: column; justify-content: center; gap: 4px; margin: 0 0 32px; font-size: var(--fontSize-Noto-h1); text-align: center;}
.free__content-deco{position: relative; display: block; margin: 0 auto; padding: 4px; width: 171px; background-color: var(--color-lightBlue); color: #FFF; font-size: var(--fontSize-Yu-h3); font-weight: bold; border-radius: 16px;}
.free__content-deco::after{content: ""; position: absolute;   border-style: solid; border-right: 2px solid transparent; border-left: 2px solid transparent; border-top: 8px solid var(--color-lightBlue); border-bottom: 0; left: 50%; bottom: -8px;}

/* 特徴 */
.member__box{display: flex; gap: 24px; margin: 0 auto; width: 884px;}
.member__box-list{display: flex; flex-direction: column; align-items: center; width: calc(100% / 4);}
.member__box-img{display: block; width: 100%;}
.member__box-txt{margin: 16px 0 0; font-size: var(--fontSize-Yu-h2); font-weight: bold;}

/* ボタンエリア */
.free__btn-area{margin: 40px auto 0; width: 644px;}
.free__btn-box{display: flex; gap: 16px;}
.free__txt-attention{margin: 16px 0 0; font-size: 14px; color: var(--color-red);}

/*  パーツ管理
-------------------------------------------------------------*/
/* メーカー・ブランド */
.parts__content{display: flex; flex-wrap: wrap; gap: 16px; margin: 32px 0 0;}
.parts__box{border: 1px solid var(--line-lightGray); border-radius: 8px; width: calc(100%/11 - 15px); height: 75px;}
.parts__box a:hover{opacity: .6; transition: .2s;}
.parts__box img{display: block; padding: 8px; border-radius: 8px; width: 75px; height: 75px;}

/* 特集 */
.parts__special{display: flex; flex-wrap: wrap; gap: 16px;margin: 32px 0 0;}
.parts__special-box{width: calc(100%/4 - 12px);}
.parts__special img{display: block; width: 100%; border-radius: 5px;}
.parts__special p{margin: 10px 0 0; font-size: var(--fontSize-Yu-h4); font-weight: bold;}
.parts__special-box a{display: flex; flex-direction: column; align-items: start;}

/*  予約受注商品
-------------------------------------------------------------*/
.item__content-appeal.yoyaku{border: 1px solid var(--color-red); color: var(--color-red);}

/*  お知らせ
-------------------------------------------------------------*/
.topics__box{display: flex; gap: 16px;}
.topics__date{font-size: var(--fontSize-Yu-text1);}
.topics__icon{display: flex; justify-content: center; align-items: center; width: 108px; text-align: center; font-size: var(--fontSize-Yu-h5); background-color: #333; border-radius: 16px; color: #FFF;}
.topics__ttl{flex: 1; overflow: hidden;}
.topics__ttl a{position: relative; display: block; padding: 0 30px 0 0; font-size: var(--fontSize-Yu-h3); font-weight: bold; color: #333; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.topics__ttl a::after{content: ""; position: absolute; background: url(../images/common/icon_24arrow_right_bl.svg); width: 24px; height: 24px; top: 0; right: 8px;}
.topics__ttl a:hover{opacity: .6; transition: .2s;}