@charset "utf-8";


[data-image="main_driftstar"]{width:100%;max-width: 44rem;aspect-ratio:656 / 452}
[data-image="logo_driftstar"]{width:100%;max-width: 34.375rem;aspect-ratio:822 / 248}
[data-image="sub_driftstar"]{ width:100%; max-width:15.125rem; aspect-ratio:242 / 202 }
[data-image="main_valino"]{width:100%;max-width: 44rem;aspect-ratio:656 / 452}
[data-image="logo_valino"]{width:100%;max-width: 30rem;aspect-ratio:712 / 118}
[data-image="sub_valino"]{ width:100%; max-width:15.125rem; aspect-ratio:242 / 202 }
[data-image="main_toyotires"]{width:100%;max-width: 44rem;aspect-ratio:656 / 452}
[data-image="logo_toyotires"]{ width:100%; max-width:49.375rem; aspect-ratio:790 / 118 }
[data-image="sub_toyotires"]{ width:100%; max-width:15.125rem; aspect-ratio:242 / 202 }

.tire [data-image="first_image"]{
    width: calc(100% + 14.5rem);
    margin-left: -14.5rem;
    aspect-ratio:608 / 452
}

body{
    background-color:var(--blue);
}

#detail_first{
    overflow:hidden;
}
.detail-title h3{
    font-size:5rem;
    display:block;
    margin-bottom:0;
}
.detail-title{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    /* border-bottom: 2px solid #fff; */
    position:relative;
}
.detail-title:after{
    content:"";
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    width:100vw;
    height:2px;
    background-color:#fff;
}
.detail-title > span{
    margin-bottom: 0.8rem;
    margin-left:0;
    margin-top:0;
    display:block;
}

#detail_first{
    position:relative;
    z-index:100;
    margin-top: var(--header-height);
}
#detail_first,
#detail_first .detail-row{
    background-color:#000;
}
#detail_first .detail-row .item_1:after{
    content:none;
}
#detail_first .detail-row{
    padding-top:0rem;
    padding-bottom:0rem;
    margin-top:0;
}
#detail_first .detail-row .item_2{
    padding-top:3rem;
    padding-bottom:3rem;
    width:70%;
}
#detail_first .detail-row .item_2 > h2{
    font-size:3rem;
    font-weight:bold;
    margin-top:1rem;
    margin-bottom:1rem;
    letter-spacing: 0.25rem;
}
#detail_first .detail-row .item_2 > p{
    font-size:0.9rem;
    line-height:1.6;
}
#detail_first  .detail-box>.item_1{
    display:flex;
    align-items:flex-end;
    justify-content: flex-end;
    width:30%;
}
#detail_first  .detail-box>.item_1 > div{
    width:100%;
    padding-right: 1rem;
}

.product-row{
    margin-top:var(--section-margin);
}
.product-box{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.product-box > .item_1{
    width:calc(45% - 0.5rem);
}
.product-box > .item_2{
    width:calc(55% - 0.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product_inner-box{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    /* margin-top: 0.4rem; */
}
.product_inner-box > .item_1{
    width:10rem;
}
.product_inner-box > .item_2{
    width:calc(100% - 11rem);
}
.product_inner-box > .item_2 h3{
    font-weight:bold;
    font-size:1.2rem;
    line-height:1.2;
    
}
.product_inner-box > .item_2 > div{
    border-top:1px solid #fff;
    margin-top:1rem;
    padding-top: 0.8rem;
    line-height:1.8;
}

.product-box .item_1{
    position:relative;
}
.product-box  > .item_1:after{
    content:"";
    display:block;
    width: 210%;
    aspect-ratio:976 / 1114;
    background-image:url("../img/obj_back.png");
    background-size:cover;
    background-position:center;
    position:absolute;
    top: -120%; /* PC版で少し下に調整 */
    left: -58%;
    z-index: -1;
    pointer-events: none;
}
/* @media (max-width:768px){
    .product-box > .item{
        width:calc((100% - 1rem) / 2);
    }
}
@media (max-width:480px){
    .product-box > .item{
        width:calc((100% - 0rem) / 1);
    }
} */



@media (max-width:820px){
    .detail-box{
        margin-top:3rem;
    }
    #detail_first .detail-row .item_2 > h2{
        margin-top:2rem;
        margin-bottom:2rem;
    }
    #detail_first .detail-row .item_2 > p{
        font-size:1.4rem;
    }
    #detail_first .detail-box>.item_1,
    #detail_first .detail-box>.item_2{
        width: 100%;
    }
    .detail-row .item_1{
        margin-top:0;
    }
    [data-image="first_image"]{
        margin-left:-2rem;
        width:100%;
    }
    .product-box > .item_1,
    .product-box > .item_2{
        width:100%;
    }
    .product-box > .item_2{
        order:1;
    }
    .product-box > .item_1{
        order:2;
        margin-top:4rem;
    }
    .logo-row + .product-image{
        margin-top: 3rem;
    }

    .product_inner-box{
        margin-top: 3rem;
        max-width: 44rem;
        width: 100%;
        justify-content: center;
        margin-left:auto;
        margin-right:auto;
    }
    .product_inner-box > .item_1{
        width: 16rem;
    }
    .product_inner-box > .item_2{
        width:calc(100% - 16rem);
    }
    .product-box .logo-row{
        max-width:44rem;
        margin-left:auto;
        margin-right:auto;
    }
    [data-image="logo_driftstar"],
    [data-image="logo_valino"],
    [data-image="logo_toyotires"]{
        max-width:none;
    }
    .product_inner-box > .item_2 h3{
        font-size:2rem;
    }
    .product_inner-box > .item_2 div{
        font-size:1.3rem;
    }
    .product-box  > .item_1:after{
        content:"";
        display:block;
        aspect-ratio:976 / 1114;
        background-image:url("../img/obj_back.png");
        background-size:cover;
        background-position:center;
        position:absolute;
        z-index: -1;
        pointer-events: none;
        width: 170%;
        top: -130%;
        left: -50%;
        opacity: 0.7;
    }
    .product-image{
        text-align:center;
    }
    
    /* スマホ版でも背景画像を復活 */
    .wheel .product-box > .item_1:after {
        content: "";
        display: block;
        aspect-ratio: 976 / 1114;
        background-image: url("../img/obj_back.png");
        background-size: cover;
        background-position: center;
        position: absolute;
        z-index: -1;
        pointer-events: none;
        width: 120%;
        top: -80%;
        left: -10%;
        opacity: 0.5;
    }
    
    .wheel .product-box > .item_1 {
        position: relative; /* 背景画像のために必要 */
    }
}



/*wheel*/



.wheel [data-image="accs1"]{width:100%;max-width: 26.8125rem;aspect-ratio:637 / 252}
.wheel [data-image="n560"]{width:100%;max-width: 26.8125rem;aspect-ratio:637 / 252}
.wheel [data-image="gv117d"]{width:100%;max-width: 26.8125rem;aspect-ratio:637 / 268}
.wheel [data-image="gokutan"]{ width:100%; max-width:50.625rem; aspect-ratio:810 / 255 }

.wheel #detail_first .detail-row .item_2 > h2{
    font-size: 2.3rem;
}

.wheel [data-image="first_image"]{
    margin-left: -15.5rem;
    aspect-ratio:608 / 452;
}

/* サムネイル改行対応 - 3列レイアウト */
.wheel .swiper-horizontal>.swiper-pagination-bullets,
.wheel .swiper-pagination-bullets.swiper-pagination-horizontal,
.wheel .swiper-pagination-custom,
.wheel .swiper-pagination-fraction{
    display: flex;
    flex-wrap: wrap; /* 改行を有効にする */
    justify-content: flex-start; /* 左揃えに変更 */
    margin-top: 0.7rem;
    gap: 0.6rem; /* アイテム間の統一した間隔 */
}

.wheel .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.wheel .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    display: block;
    flex: none;
    opacity: 1;
    margin: 0; /* marginをリセット */
    width: calc(20% - 0.5rem); /* 5列レイアウト（PC版） */
    border-radius: 0;
    padding-top: calc((20% - 0.5rem) * 0.8);
    height: 0 !important;
    background-color: transparent !important;
}

/* 4枚目以降を次の行に移動 */
.wheel .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:nth-child(n+6) {
    margin-top: 0.6rem;
}

.wheel .swiper-row .detail_prev,
.wheel .swiper-row .detail_next{
    position:absolute;
    top:0;
    bottom:0;

    margin:auto;
    z-index:10;
    width:4rem;
    height:4rem;
    cursor:pointer;
}
.wheel .swiper-row .detail_next{
    right:0;
}
.wheel .swiper-row .detail_prev{
    left:0;
}


.wheel .swiper-row .detail_next:before{
    right:25%;
    border-left:2px solid transparent;
    border-bottom:2px solid transparent;
    transform:rotate(-135deg);
}
.wheel .swiper-row .detail_prev:before{
    left:25%;
    border-right:2px solid transparent;
    border-bottom:2px solid transparent;
    transform:rotate(135deg);
}
.wheel .swiper-row .detail_prev:before,
.wheel .swiper-row .detail_next:before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    display:block;
    margin:auto;
    width:50%;
    height:50%;
    border-color:#fff
}

.wheel .detail_Swiper{
    overflow:hidden;
    position: relative;
}
.wheel .detail_Swiper .swiper-slide{
    padding-top:calc((100% / 656) * 452);
    background-position:center;
    background-size:100%;
    position: relative;
}
.wheel .on_text{
    position:absolute;
    bottom:0.5rem;
    right:0.5rem;;
    font-weight:bold;
    background-color:#fff;
    color:#000;
    padding:0.3rem 0.5rem 0.1rem 0.5rem;
    line-height:1;
    font-size:0.8rem;
    border-radius:0.2rem;
}
.wheel .detail_pagination > span{
    background-position:center;
    background-size:cover;
}

/* 製品名・ロゴを上に詰める修正 */
.wheel .product-box > .item_2{
    width:calc(55% - 0.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* space-betweenからflex-startに変更して上詰めに */
    gap: 1rem; /* 要素間の統一した間隔を追加 */
}

.wheel .product_inner-box{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin-top: 0.5rem; /* 上部のマージンを減らす */
}

.wheel .product_inner-box > .item_2{
    width:100%;
}

.wheel #detail_product .logo-image{
    margin-top: 1rem; /* デフォルトの2remから1remに減らす */
}

.wheel .logo-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* タグとロゴ画像の間隔を統一 */
}

.wheel .tag{
    background-color:#fff;
    display: inline-block;
    color:#000;
    font-weight:bold;
    border-left:0.5rem solid #666666;
    line-height:2.5;
    font-size:1.2rem;
    padding-left:1rem;
    padding-right:3rem;
    clip-path: polygon(0 0, 85% 0%, 100% 100%, 0% 100%);
}
.wheel .tag > span{
    color:#f00;
}

@media (max-width:820px){
    .wheel [data-image="first_image"]{
        margin-left: -2rem;
    }
    .wheel .product-box > .item_2{
        order:2;
        width: 100%; /* 幅を100%に明示 */
    }
    .wheel .product-box > .item_1{
        order:1;
    }
    .wheel #detail_product .logo-row{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap: 1rem; /* スマホでも統一した間隔 */
    }
    .wheel .tag{
        font-size:2rem;
        padding-right:5rem;
    }
    .wheel #detail_product .logo-row > div{
        text-align:left;
        flex:none;
    }
    .wheel [data-image="accs1"]{width:100%;max-width: 100%;aspect-ratio:637 / 252}
    .wheel [data-image="n560"]{width:100%;max-width: 100%;aspect-ratio:637 / 252}
    .wheel [data-image="gv117d"]{width:100%;max-width: 100%;aspect-ratio:637 / 268}
    .wheel [data-image="gokutan"]{ width:100%; max-width:100%; aspect-ratio:810 / 255 }

    .wheel .product-box > .item_1{
        margin-top:0;
    }
    
    /* 製品情報エリア全体の調整 */
    .wheel .product_inner-box {
        margin-top: 2rem;
        max-width: none;
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box; /* ボックスサイジングを明示 */
    }
    
    .wheel .product_inner-box > .item_1{
        display: none; /* スマホでは画像部分を非表示 */
    }
    .wheel .product_inner-box > .item_2{
        width: 100% !important; /* 強制的に100%幅 */
        max-width: none;
        flex-grow: 1;
    }
    
    /* 親コンテナの調整 */
    .wheel .product-box {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .wheel .product-box .logo-row{
        max-width: none; /* 最大幅制限を解除 */
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    /* スマートフォンでは2列表示 */
    .wheel .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    .wheel .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        width: calc(20% - 0.5rem); /* スマホでは2列 */
        padding-top: calc((20% - 0.5rem) * 0.8);
    }
    
    /* 3枚目以降を次の行に移動（スマホ用） */
    .wheel .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:nth-child(n+6) {
        margin-top: 0.8rem;
    }
    
    /* 4枚目以降のマージンをリセット（スマホ用） */
    .wheel .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:nth-child(n+4) {
        margin-top: 0;
    }
}

.wheel .detail03_pagination .swiper-pagination-bullet:only-child{
    display:block !important;
}



/*画像の背景色に合わせてスライダーの矢印色を変える*/
.wheel .swiper-wrapper:has(.swiper-slide-active[style*="abs_accs1_02"]) ~ .detail_next:before,
.wheel .swiper-wrapper:has(.swiper-slide-active[style*="abs_accs1_02"]) ~ .detail_prev:before,

.wheel .swiper-wrapper:has(.swiper-slide-active[style*="abs_accs1_03"]) ~ .detail_next:before,
.wheel .swiper-wrapper:has(.swiper-slide-active[style*="abs_accs1_03"]) ~ .detail_prev:before,

.wheel .swiper-wrapper:has(.swiper-slide-active[style*="rspec_accs1_02"]) ~ .detail_next:before,
.wheel .swiper-wrapper:has(.swiper-slide-active[style*="rspec_accs1_02"]) ~ .detail_prev:before,

.wheel .swiper-wrapper:has(.swiper-slide-active[style*="gv117d_01"]) ~ .detail_next:before,
.wheel .swiper-wrapper:has(.swiper-slide-active[style*="gv117d_01"]) ~ .detail_prev:before,

.wheel .swiper-wrapper:has(.swiper-slide-active[style*="gv117d_02"]) ~ .detail_next:before,
.wheel .swiper-wrapper:has(.swiper-slide-active[style*="gv117d_02"]) ~ .detail_prev:before,

.wheel .swiper-wrapper:has(.swiper-slide-active[style*="gv117d_03"]) ~ .detail_next:before,
.wheel .swiper-wrapper:has(.swiper-slide-active[style*="gv117d_03"]) ~ .detail_prev:before,

.wheel .swiper-wrapper:has(.swiper-slide-active[style*="gv117d_04"]) ~ .detail_next:before,
.wheel .swiper-wrapper:has(.swiper-slide-active[style*="gv117d_04"]) ~ .detail_prev:before{
    border-color:var(--blue);
}
/*end 画像の背景色に合わせてスライダーの矢印色を変える*/

.small-color {
  font-size: 0.75rem;  /* 例：標準より小さく */
  opacity: 0.8;        /* 少し薄く見せる（任意） */
  vertical-align: baseline;  /* 位置を整える（任意） */
}