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

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	共通
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* お問合せ */
#cycleRackBn { margin: 125px auto 0; max-width: 580px; padding: 8px; background-color: #eff0f2; border-radius: 10px; box-shadow: 5px 5px 3px rgba(0,0,0,0.1); }
#cycleRackBn a { display: inline-block; }

/* カテゴリーリスト */
.cycleRackCateList { display: flex; flex-wrap: wrap; }
.cycleRackCateList > li { width: 22.5%; margin-left: 3.3%; }
.cycleRackCateList > li:nth-child(4n+1) { margin-left: 0; }
.cycleRackCateList > li:nth-child(n+5) { margin-top: 46px; }
.cycleRackCateList li a { text-decoration: none; color: #000; display: inline-block; }
.cycleRackCateList div { border-radius: 10px; overflow: hidden; }
.cycleRackCateList div img { aspect-ratio: 1 / 0.663; object-fit: cover; }
.cycleRackCateList a:hover div img { opacity: 1; transform: scale(1.1); }
.cycleRackCateList h3 { margin-top: 10px; transition: 0.5s color; }
.cycleRackCateList a:hover h3 { color: #094; }
.cycleRackCateList span { font-size: 0.87rem; }
.cycleRackCateList p { margin-top: 3px; line-height: 1.6; }

@media screen and (max-width: 750px) {
    /* お問合せ */
    #cycleRackBn { margin-top: 40px; padding: 5px; }
    
    /* カテゴリーリスト */
    .cycleRackCateList { justify-content: space-between; }
    .cycleRackCateList > li { width: 46.5%; margin-left: 0; }
    .cycleRackCateList > li:nth-child(n+3),
    .cycleRackCateList > li:nth-child(n+5) { margin-top: 20px; }
    .cycleRackCateList h3 { margin-top: 5px; font-size: 0.93rem; line-height: 1.2; }
    .cycleRackCateList a:hover h3 { color: #000; }
    .cycleRackCateList p { margin-top: 5px; line-height: 1.3; font-size: 0.86rem; }
    .cycleRackCateList div { border-radius: 5px; }
    .cycleRackCateList a:hover div img { transform: scale(1); }
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	扉ページ
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
#cycleRackTopSubheading { margin-top: 55px; }

#cycleRackList { margin-top: 82px; }
#cycleRackList > li:nth-child(n+2) { margin-top: 100px; }

@media screen and (max-width: 750px) {
    #cycleRackTopSubheading { font-size: 1.06rem; margin-top: 23px; }
    
    #cycleRackList { margin-top: 27px; }
    #cycleRackList > li:nth-child(n+2) { margin-top: 60px; }

}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	詳細ページ
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
.detailMainHead { margin-top: 85px; }
.detailMainHead span { display: block; font-size: 1.25rem; }
.detailCatchTxt { font-size: 1.25rem; font-weight: 400; margin-top: 15px; }

@media screen and (max-width: 750px) {
    .detailMainHead { margin-top: 23px; }
    .detailMainHead span { font-size: 0.86rem; line-height: 1; }
    .detailCatchTxt { font-size: 1.06rem; }
}

/* メイン画像 */
#detailMv { margin-top: 50px; }

#detailMv.detailMv1 img { aspect-ratio: 80 / 39; object-fit: cover; }
#detailMv.detailMv3 { display: flex; justify-content: space-between; position: relative; }
#detailMv.detailMv3 #detailMvL { width: 65%; }
#detailMv.detailMv3 #detailMvL img { aspect-ratio: 12 / 9; object-fit: cover; }
#detailMv.detailMv3 .detailMvM { width: 32.5%; }
#detailMv.detailMv3 .detailMvM + .detailMvM { position: absolute; right: 0; bottom: 0; }
#detailMv.detailMv3 .detailMvM img { aspect-ratio: 12 / 8.492; object-fit: cover; }

@media screen and (max-width: 750px) {
    #detailMv { margin-top: 8px; }
}

/* 特長 */
#detailFeatures { display: flex; margin-top: 78px; }
#detailFeatures dt { font-size: 1.25rem; width: 83px; }
#detailFeatures dd { border-left: solid 1px #000; padding-left: 35px; flex: 1; }
#detailFeatures dd ul { margin-top: 2px; }
#detailFeatures dd ul li { padding-left: 20px; padding-bottom: 10px; border-bottom: dashed 1px #ddd; position: relative; }
#detailFeatures dd ul li:nth-child(n+2) { margin-top: 10px; }
#detailFeatures dd ul li:last-child { border-bottom: none; }
#detailFeatures dd ul li::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background-color: #000; position: absolute; left: 0; top: 0.8em; }

@media screen and (max-width: 750px) {
    #detailFeatures { display: block; margin-top: 33px; }
    #detailFeatures dt { width: 100%; border-bottom: solid 1px #000; padding-bottom: 5px; }
    #detailFeatures dd { border-left: none; padding-left: 0; margin-top: 12px; }
    #detailFeatures dd ul li { padding-left: 10px; }
    #detailFeatures dd ul li::before { width: 4px; height: 4px; }
}

/* テーブル */
.detailTable { margin-top: 75px; }
.detailTable col.commonCol01 { width: 90px; }
.detailTable th { background-color: transparent; padding: 15px 5px; }
.detailTable td { padding: 15px 5px 15px 0; }
.detailTable td ul li { padding-left: 1em; position: relative; }
.detailTable td ul li::before { content: "・"; position: absolute; left: 0; top: 0; }
.detailTable td ul li span { font-size: 0.87rem; }

@media screen and (max-width: 750px) {
    .detailTable { border-top: none; margin-top: 10px; }
    .detailTable th,
    .detailTable td { display: block; }
    .detailTable th { border-bottom: solid 1px #000; padding: 0 0 7px; }
    .detailTable td { border-bottom: none; padding: 8px 0 20px; }
}

/* 注意 */
.detailCautionArea { margin-top: 40px; display: flex; }
.detailCautionArea > div { background-color: #f4f5f7; padding: 20px; }
.detailCautionArea .detailCaution { width: 115px; display: flex; align-items: center; justify-content: center; font-size: 0.93rem; font-weight: 500; }
.detailCautionArea .detailCaution span { display: block; background: url("/common/images/icon_caution.svg") no-repeat left center / 24px 20px; padding-left: 30px; }
.detailCautionArea .detailCautionTxt { font-size: 0.87rem; min-width: 480px; margin-left: 5px; max-width: calc(100% - 115px); }
.detailCautionArea .detailCautionTxt ul li { padding-left: 1em; position: relative; }
.detailCautionArea .detailCautionTxt ul li::before { content: "※"; position: absolute; left: 0; top: 0; }

@media screen and (max-width: 750px) {
    .detailCautionArea { display: block; margin-top: 20px; }
    .detailCautionArea .detailCaution { width: 100%; padding: 13px; }
    .detailCautionArea .detailCautionTxt { min-widthwidth: 0; margin: 4px 0 0; padding: 15px 20px; min-width: 0; max-width: 100%; }
    
}

/* PDFボタン */
.detailDataArea { display: flex; margin-top: 92px; align-items: flex-start; }
.detailDataArea .detailDataImg { width: 37.7%; max-width: 450px; overflow: hidden; border: solid 1px #ddd; border-radius: 30px; margin-top: 8px; }
.detailDataArea .detailDataBtn { max-width: 366px; }
.detailDataArea .detailDataBtn > div { font-weight: bold; }
.detailDataArea .detailDataBtn ul { margin-top: 8px; }
.detailDataArea .detailDataBtn .cadDataList { display: flex; flex-wrap: wrap; }
.detailDataArea .detailDataBtn .cadDataList li { width: 43%; }
.detailDataArea .detailDataBtn .cadDataList li:nth-child(2n) { margin-left: 2%; }
.detailDataArea .detailDataBtn .cadDataList li:nth-child(n+3) { margin-top: 10px; }
.detailDataArea .detailDataBtn .cadDataList li .commonBtn { width: 100%; }
.detailDataArea .detailDataBtn .cadDataList + div { margin-top: 32px; }
.detailDataArea .detailDataBtn .pdfDataList li:nth-child(n+2) { margin-top: 10px; }
.detailDataArea .detailDataBtn .pdfDataList li .commonBtn { width: 320px; }
.detailDataArea .detailDataImg + .detailDataBtn { flex: 1; margin-left: 4.5%; }
.detailDataArea .detailDataImg + .detailDataBtn .pdfDataList li .commonBtn { width: 100%; max-width: 320px; }

@media screen and (max-width: 1040px) {
    .detailDataArea .detailDataBtn .cadDataList li { width: 48%; }
}

@media screen and (max-width: 1040px) {
    .detailDataArea .detailDataBtn .cadDataList li .iconDl span { padding-left: 0; }
    .detailDataArea .detailDataImg + .detailDataBtn .pdfDataList li .commonBtn { max-width: 100%; }
}

@media screen and (max-width: 750px) {
    .detailDataArea { display: block; margin-top: 42px; }
    .detailDataArea .detailDataImg { width: 100%; max-width: 100%; border-radius: 15px; margin-top: 0; }
    .detailDataArea .detailDataBtn { margin: 22px 0 0; max-width: 100%; }
    .detailDataArea .detailDataImg + .detailDataBtn { margin-left: 0; }
    .detailDataArea .detailDataBtn .cadDataList { justify-content: space-between; }
    .detailDataArea .detailDataBtn .cadDataList li { width: 48%; }
    .detailDataArea .detailDataBtn .pdfDataList li .commonBtn { width: 100%; }
    .detailDataArea .detailDataBtn .pdfDataList li .commonBtn,
    .detailDataArea .detailDataImg + .detailDataBtn .pdfDataList li .commonBtn { max-width: 100%; }
    .detailDataArea .detailDataBtn .cadDataList li .iconDl span { padding: 0 20px; }
}

/* youtube */
.detailVideoArea { margin-top: 102px; }

@media screen and (max-width: 750px) {
    .detailVideoArea { margin-top: 52px; }
}

/* インデックス */
#sameCategoryList { margin-top: 132px; }
.detailCateHead { font-size: 1.5rem; margin-top: 88px; font-weight: 400; padding-bottom: 6px; border-bottom: solid 3px #e2e3e7; position: relative; }
.detailCateHead::after { content: ""; display: block; width: 185px; height: 3px; background-color: #094; position: absolute; left: 0; bottom: -3px; }
.detailCateList { margin-top: 40px; display: flex; flex-wrap: wrap; }
.detailCateList li { width: 23.3%; margin-left: 2.26%; }
.detailCateList li:nth-child(4n+1) { margin-left: 0; }
.detailCateList li:nth-child(n+5) { margin-top: 25px; }
.detailCateList li a { display: flex; align-items: center; height: 100%; padding: 20px 26px; position: relative; color: #fff; background-color: #094; text-decoration: none; }
.detailCateList li a::after { content: ""; display: block; position: absolute; clip-path: polygon(0 0, 0% 100%, 100% 50%); background-color: #fff; width: 6px; height: 6px; top: calc(50% - 2px); right: 15px; }
.detailCateList li a:hover { background-color: #2cbd56; }
.detailCateList li.currentCate a { background-color: #ddd; }
.detailCateList li.currentCate a:hover { background-color: #ededed; }

@media screen and (max-width: 750px) {
    #sameCategoryList { margin-top: 65px; }
    .detailCateHead { font-size: 1.2rem; margin-top: 35px; padding-bottom: 11px; }
    .detailCateHead::after { width: 165px; }
    .detailCateList { margin-top: 15px; justify-content: space-between; }
    .detailCateList li { width: 49%; margin-left: 0; }
    .detailCateList li:nth-child(n+3),
    .detailCateList li:nth-child(n+5) { margin-top: 6px; }
    .detailCateList li a { line-height: 1.1; padding: 8px 25px 10px 10px; min-height: 50px; }
    .detailCateList li a:hover { background-color: #094; }
    .detailCateList li.currentCate a:hover { background-color: #ddd; }
}