.onlypc {}

.onlysp {
	display: none !important;
}

.c-title008 {
	text-align: center;
	margin-bottom: 40px;
}
#main .c-title008 {
	margin-bottom: 0;
}
.c-title008 img {
    width: 50%;
    max-width: 300px;
}
.threed-models-title {
	    font-family: "HondaGlobalFontJP-Bold", sans-serif;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2em;
}
.threed-models-sub-title {
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2em;
}
.threed-models-movie {
	margin-bottom: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.threed-models-movie video {
	width: 102%;
    position: relative;
    left: -1%;
    top: -1%;
}
.logo_flex {
	    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin-bottom: 40px;
}
.logo_flex figure {
	flex: 0 0 270px;
}
.threed-models-lead {
}
.threed-models-lead p {
	line-height: 1.5em;
    margin-bottom: 2em;
}
.threed-models-lead a {
	text-decoration: underline;
}
#model-detail {
	background: #f6f6f6;
}
#model-detail.sec {
	padding: 40px 0;
}
#model-detail .sec-inner {
	        max-width: 1000px;
}
.threed-models-slide {
	margin-bottom: 40px;
}
.threed-models-slide__item {
	background: #fff;
    padding: 20px;
	text-align: center;
}
.threed-models-slide__item h3 {
	font-size: 1.5rem;
	margin-bottom: 20px;
	    line-height: 1.2em;
}
.threed-models-item-img {
	margin-bottom: 20px;
}
.threed-models-slide__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 20px;
    /* height: 50px; */
    position: relative;
}
.threed-models-slide__btn a {
    flex: 0 0 100%;
    position: relative;
    height: 100%;
    padding: 20px 0;
}
.threed-models-slide__btn a::after {
    content: "";
    background-image: url(/jp/common/img/icon_blank01.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
    width: 15px;
    height: 15px;
}
.threed-models-slide__btn img {
    width: 50%;
    max-height: 50px;
	    margin: 0 auto;
}
.threed-models-learn-more-links {
	text-align: center;
	    margin-bottom: 60px;
}
.threed-models-learn-more-links a {
    display: block;
    width: 80%;
    max-width: 400px;
	margin: 0 auto 40px;
}
.sd-models-example {
	padding: 0 20px;
	    margin-top: 60px;
	margin-bottom: 60px;
}
.sd-models-example h4 {
	font-size: 1.5rem;
	margin-bottom: 10px;
}
.sd-models-example figure {
	margin-bottom: 30px;
}
@media screen and (max-width: 767px) {

	.onlypc {
		display: none !important;
	}

	.onlysp {
		display: block !important;
	}
}

/* =========================================
   スライダーおよび画像全般の共通調整
========================================= */
/* .threed-models-item-img 内の画像がはみ出さないように調整 */
.threed-models-item-img img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* slides内のリストスタイルをリセット */
.threed-models-item-img.slides {
    margin: 0;
    padding: 0;
}
.threed-models-item-img.slides .slick-list,
.threed-models-item-img.slides .slick-track
{
    aspect-ratio: unset;
}
.threed-models-item-img.slides li {
    list-style: none;
}

/* Slickの矢印調整
  背景が白ベースのため、Slickデフォルトの白い矢印を見えやすくする
*/
.slick-prev:before, 
.slick-next:before {
    color: #333 !important; /* 黒系の色に変更 */
}

/* 矢印の位置調整（親要素から少し内側に配置） */
.threed-models-slide .slick-prev { left: 10vw; z-index: 10; }
.threed-models-slide .slick-next { right: 10vw; z-index: 10; }
.threed-models-item-img.slides .slick-prev { left: -2vw; z-index: 10; }
.threed-models-item-img.slides .slick-next { right: -2vw; z-index: 10; }

/* SPスライダー時のアイテム間の余白（左右に10pxずつ＝アイテム間20px） */
@media screen and (max-width: 767px) {
    .threed-models-slide.slick-slider .threed-models-slide__item {
        margin: 0 10px;
		height: auto !important; /* この1行を追加して余白を消す */
    }
}
@media screen and (max-width: 767px) {
    /* slick-list と slick-track の高さを強制リセットし、アイテムに合わせる */
    .threed-models-slide.slick-slider .slick-list,
    .threed-models-slide.slick-slider .slick-track {
        height: auto !important;
		aspect-ratio: unset;
    }

    /* 枠組みの高さが揃った上で、矢印を正確に中央に配置し直す */
    .threed-models-slide.slick-slider .slick-prev,
    .threed-models-slide.slick-slider .slick-next {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* =========================================
   PC用のレイアウト (768px以上)
========================================= */
@media screen and (min-width: 768px) {
    /* Slick無効時の3列並び（Flexbox） */
    .threed-models-slide {
        display: flex;
        flex-wrap: wrap;
        gap: 20px; /* アイテム間の余白 */
        justify-content: center;
    }
    .threed-models-slide__item {
        /* gapを考慮して3等分に計算 */
        width: calc((100% - 40px) / 3);
        box-sizing: border-box;
    }
	.sd-models-example {
		    width: 600px;
    margin: 0 auto;
	}
	.threed-models-item-img.slides .slick-next {
		    right: -1vw;
	}
	.threed-models-item-img.slides .slick-prev {
		left: -1vw;
	}
	.exsample-flex {
		display: flex;
		gap: 3%;
		justify-content: left;
	}
	.exsample-flex figure:nth-child(1) {
		    flex: 0 0 53%;
	}
	.exsample-flex figure:nth-child(2) {
		        flex: 0 0 44%;
	}
}

/* =========================================
   SP用のレイアウト (767px以下)
========================================= */
@media screen and (max-width: 767px) {
    /* nonslideクラスが付与されている場合は縦並び */
    .threed-models-slide.nonslide {
        display: block;
    }
    .threed-models-slide.nonslide .threed-models-slide__item {
        width: 70%; /* SlickのcenterPadding: 15% に合わせて幅を70%に */
    margin: 0 auto 20px; /* 中央寄せ ＋ 下の余白 */
    }
	.logo_flex {
		gap: 7%;
	}
	.logo_flex figure {
		    flex: 0 0 40%;
	}
}