/* ============================================================
   リニューアルトップ専用CSS

   編集ガイド
   1. PC・SP共通                 ファイル先頭
   2. PC専用（769px以上）       @media (min-width: 769px)
   3. SP専用（768px以下）       @media (max-width: 768px)

   共通部には色、ヒーロー、見出し、カードの基本値を置き、
   PC・SP専用部で必要な値だけを上書きします。

   本番既存パーツの基本CSSは css-file_v2.css にあります。
============================================================ */

:root{
--blue:#5465ff;
--black:#171919;
--grey:#9fa5bd;
--paper:#f1f3fb;
--white:#fff
}

*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

body{
margin:0;
background:var(--paper);
color:var(--black);
font-family:'Zen Kaku Gothic New',sans-serif
}

.mobile-only{
display:none
}

.desktop-only{
display:block
}

/* ============================================================
   1. メインビジュアル（10枚スライダー）
============================================================ */

.renewal-hero{
position:relative;
width:100%;
height:min(53vw,680px);
margin-top:80px;
overflow:hidden;
background:#c9caca
}

.renewal-hero__slide{
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
transition:opacity .65s ease
}

.renewal-hero__slide.is-active{
opacity:1;
pointer-events:auto
}

.renewal-hero picture,.renewal-hero img{
display:block;
width:100%;
height:100%;
object-fit:cover
}

.renewal-hero__button{
position:absolute;
left:3.2%;
bottom:5.5%;
padding:10px 18px;
border:1px solid #fff;
border-radius:4px;
color:#fff;
font-size:13px
}

.renewal-hero__dots{
position:absolute;
right:7%;
bottom:6%;
display:flex;
gap:12px
}

.renewal-hero__dots button{
width:11px;
height:11px;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.55);
cursor:pointer
}

.renewal-hero__dots button.is-active{
outline:1px solid #fff;
outline-offset:3px;
background:#fff
}

/* ============================================================
   2. PCトップページのレイアウト
============================================================ */

.home-shell{
width:90%;
max-width:1480px;
margin:0 auto;
padding:28px 0 0
}

.home-breadcrumb{
font-size:11px;
color:var(--grey);
text-decoration:underline;
text-underline-offset:3px
}

.home-layout{
display:grid;
grid-template-columns:280px minmax(0,1fr);
gap:40px;
margin-top:125px
}

.home-sidebar{
min-width:0
}

.home-main{
min-width:0
}

.home-section{
margin:0 0 88px
}

/* ============================================================
   3. PCセクション見出し
============================================================ */

.section-heading{
display:flex;
justify-content:space-between;
align-items:baseline;
min-height:50px;
padding-bottom:20px;
border-bottom:1px solid var(--blue);
color:var(--blue);
font-family:'Zen Dots',sans-serif
}

.section-heading__title{
display:flex;
align-items:center;
gap:14px;
font-size:20px;
letter-spacing:.035em
}

.section-heading__title i{
width:1px;
height:22px;
background:currentColor
}

.section-heading__title small{
font-family:'Zen Kaku Gothic New',sans-serif;
font-size:14px;
font-weight:700
}

.section-heading__icon{
display:grid;
place-items:center;
width:40px;
height:32px;
border-radius:5px;
background:var(--blue);
color:#fff
}

.section-heading__icon:before{
font-family:Arial,sans-serif;
font-weight:700
}

.section-heading__icon--review:before{
content:'★★★';
font-size:8px
}

.section-heading__icon--shoes:before{
content:'◢'
}

.section-heading__icon--apparel:before{
content:'T'
}

.section-heading__icon--chalk:before{
content:'▲'
}

.section-heading__icon--holds:before{
content:'●'
}

.section-heading__icon--books:before{
content:'▮▮'
}

.section-heading__icon--gear:before{
content:'◯'
}

.section-heading__icon--bags:before{
content:'▰'
}

.section-heading__icon--blog{
display:none
}

.section-heading__production-title{
display:block;
max-width:44%;
height:auto;
margin-bottom:5px
}

.section-heading__more{
position:relative;
top:4px;
display:flex;
align-items:baseline;
gap:10px;
color:var(--blue);
text-decoration:none;
font-size:12px
}

.section-heading__more .button{
margin-left:0
}

.section-heading__more .box2{
width:40px
}

.home-card-row{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
margin-top:38px
}

.product-card,.review-card{
display:flex;
min-width:0;
flex-direction:column;
color:inherit;
text-decoration:none
}

.product-card__image,.review-card__image{
display:block;
overflow:hidden;
width:100%;
aspect-ratio:1.48/1;
border-radius:5px;
background:#fff
}

.product-card__image img,.review-card__image img{
width:100%;
height:100%;
object-fit:contain;
transition:transform .35s
}

.product-card__image iframe,
.product-card__image video,
.sp-product-scroll .youtube-image-wrapper iframe{
display:block;
width:100%;
height:100%;
border:0
}

/* レビュー動画を枠内へ収め、余白は黒で表示する。 */
.product-card__image iframe,
.product-card__image video,
.sp-product-scroll .youtube-image-wrapper iframe,
.sp-product-scroll .youtube-image-wrapper video{
display:block;
width:100%;
height:100%;
border:0;
background:#000;
object-fit:contain
}

.sp-product-scroll .youtube-image-wrapper{
aspect-ratio:4/3
}

/* 新着レビューの動画だけ縦長9:16で表示する。 */
.home-section--review .product-card__image,
.sp-product-scroll--review .youtube-image-wrapper{
aspect-ratio:9/16
}

.sp-product-scroll .youtube-image-wrapper img{
display:block;
width:100%;
height:100%;
object-fit:cover
}

.review-card__image img{
object-fit:cover
}

.product-card:hover .product-card__image img,
.review-card:hover .review-card__image img{
transform:scale(1.035)
}

.product-card small,.review-card small{
margin-top:14px;
color:var(--grey);
font-size:11px
}

.product-card strong,.review-card strong{
display:-webkit-box;
overflow:hidden;
margin-top:3px;
font-size:15px;
font-weight:500;
line-height:1.45;
-webkit-line-clamp:2;
-webkit-box-orient:vertical
}

.product-card__price{
margin-top:2px;
font-size:20px
}

.product-card__store,.review-card__tags{
margin-top:3px;
color:var(--grey);
font-size:11px
}

/* 本番PCと同じ「ストアアイコン＋ストア名」 */

.product-card__store{
display:flex;
align-items:center;
gap:6px;
margin-top:5px;
color:#6e7073;
font-size:12px
}

.product-card__store-icon{
width:auto;
height:12px;
object-fit:contain
}

.product-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.home-empty{
margin:30px 0;
color:var(--grey);
font-size:13px
}

.youtube-row{
gap:20px
}

.youtube-card{
min-width:0
}

.youtube-card iframe{
display:block;
width:100%;
aspect-ratio:16/9;
border:0;
border-radius:5px
}

.youtube-card>strong{
display:-webkit-box;
min-height:43px;
margin-top:10px;
overflow:hidden;
font-size:13px;
line-height:1.55;
-webkit-line-clamp:2;
-webkit-box-orient:vertical
}

.youtube-card>span{
display:block;
margin-top:12px;
padding:4px 8px;
border-radius:3px;
background:var(--black);
color:#fff;
font-size:11px
}

.youtube-card__goods{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:7px;
margin-top:8px
}

.youtube-card__goods a{
overflow:hidden;
aspect-ratio:1;
border-radius:4px;
background:#fff
}

.youtube-card__goods img{
width:100%;
height:100%;
object-fit:cover
}

.feature-blog .section-heading__title>span{
font-size:46px
}

.feature-blog__production-card{
margin-top:38px
}

.outline-button{
display:inline-block;
margin-top:18px;
padding:9px 16px;
border:1px solid var(--black);
border-radius:4px;
color:var(--black);
font-size:12px;
text-decoration:none
}

/* Annotated design revisions: reuse production button and arrow assets. */

.renewal-hero__cta{
position:absolute;
left:3.2%;
bottom:5.5%;
width:140px;
display:block;
color:#fff
}

.renewal-hero__cta .box_pc{
display:block;
width:140px
}

.renewal-hero__cta .po_pc{
top:40%;
left:50%
}

.renewal-hero__cta:hover .box_pc img,
.renewal-hero__cta:hover .read-more_top{
opacity:.5
}

.renewal-hero__cta:hover .plus-icon_top{
transform:translateX(6px)
}

.renewal-hero__pagination{
position:absolute;
z-index:4;
right:6%;
bottom:5.5%;
display:flex;
align-items:center;
gap:24px;
height:44px
}

.renewal-hero__dots{
position:static;
display:flex;
align-items:center;
gap:12px
}

.renewal-hero__dots button{
width:12px;
height:12px
}

.renewal-hero__arrow {
  position: relative;
  width: 24px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s;
}

/* 矢印本体 */

.renewal-hero__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-color: #fff;
  border-width: 0;
}

/* 左矢印 */

.renewal-hero__arrow--prev::before {
  border-left-width: 2px;
  border-bottom-width: 2px;
  transform: translate(-35%, -50%) rotate(45deg);
}

/* 右矢印 */

.renewal-hero__arrow--next::before {
  border-top-width: 2px;
  border-right-width: 2px;
  transform: translate(-65%, -50%) rotate(45deg);
}

.renewal-hero__arrow:hover {
  opacity: 1;
}

.renewal-hero__arrow:hover{
opacity:1;
transform:scale(1.12)
}

.section-heading__more>span{
position:relative;
bottom:3px
}

.breadcrumb-link {
  border-bottom: 1px solid #9FA5BD;
  color: #9FA5BD;
  font-size: 14px;
  text-decoration: none;
}

/* ============================================================
   PC専用（769px以上）
============================================================ */

@media (min-width: 769px) {
  .renewal-hero {
    height: auto;
    aspect-ratio: 2000 / 1064;
    margin-top: 0;
  }

  .renewal-hero__slide picture {
    position: static;
    width: 100%;
    height: 100%;
  }

  .renewal-hero .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
  }

.home-main {
    transform: translateY(-21px);
  }

/* PC版の商品名だけを小さくする */

.product-card strong {
    font-size: 14px;
  }
}

/* X-BLOGとLATEST CLIMBING NEWSを下揃え */
.feature-blog .section-heading__title {
  align-items: baseline;
}

/* LATEST CLIMBING NEWSをZen Dotsにする */
.feature-blog .section-heading__title small {
  font-family: "Zen Dots", sans-serif;
  font-weight: 400;
  line-height: 1;
}

/* X-BLOG横の区切り線を非表示 */
.feature-blog .section-heading__title i {
  display: none;
}

  /* グラデーションを重ねる基準 */
  .product-card__image {
    position: relative;
  }

  /* 商品一覧ページと同じ青いグラデーション */
  .product-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(
      to bottom,
      rgba(84, 101, 255, 0),
      rgba(84, 101, 255, 0),
      rgba(84, 101, 255, 0.2),
      rgba(84, 101, 255, 0.5)
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  /* 商品カードをマウスオーバーしたときに表示 */
  .product-card:hover .product-card__image::after {
    opacity: 1;
  }

/* ============================================================
   SP専用（768px以下）
============================================================ */

@media (max-width: 768px) {
.desktop-only{
display:none!important
}

@media (max-width: 768px) {
  .breadcrumb-home {
    margin-top: 40px;
  }
  .main {
    margin-top: 0px;
  }


}

.mobile-only{
display:block!important
}
.renewal-hero {
  /* SP書き出し画像（751×1625px）と同じ縦横比で全体を表示 */
  height: auto;
  min-height: 0;
  aspect-ratio: 751 / 1625;
	margin-top: -70px;
}


.renewal-hero img{
object-position:center top
}
.renewal-hero__button{
left:20px;
bottom:32px
}
.renewal-hero__dots{
right:22px;
bottom:38px;
gap:12px
}
.renewal-hero__dots button{
width:12px;
height:12px
}
.home-shell{
width:100%;
padding:25px 20px 0
}
.home-breadcrumb{
font-size:10px
}
.home-layout{
display:block;
margin-top:75px
}
.home-section{
margin-bottom:60px
}
.section-heading{
min-height:40px;
padding-bottom:7px
}
.section-heading__title{
gap:7px;
font-size:14px;
white-space:nowrap
}
.section-heading__title i{
height:14px
}
.section-heading__title small{
font-size:11px
}
.section-heading__icon{
width:28px;
height:23px
}
.section-heading__more{
gap:6px;
font-size:9px
}
.section-heading__more b{
width:30px;
height:30px;
font-size:17px
}
.home-card-row{
display:flex;
gap:14px;
overflow-x:auto;
margin:22px -20px 0;
padding:0 20px 12px;
scroll-snap-type:x mandatory;
scrollbar-width:none
}
.home-card-row::-webkit-scrollbar{
display:none
}
.product-card,.review-card,.youtube-card{
flex:0 0 76%;
scroll-snap-align:start
}
.product-card__image,.review-card__image{
aspect-ratio:1.33/1
}
.product-card small,.review-card small{
margin-top:10px
}
.product-card strong,.review-card strong{
font-size:13px
}
.product-card__price{
font-size:18px
}
.youtube-card>strong{
font-size:12px
}
.feature-blog .section-heading__title>span{
font-size:30px
}
.feature-blog__image{
margin-top:24px;
aspect-ratio:4/3
}
.feature-blog__tags{
transform:translate(10px,45px);
font-size:10px
}
.feature-blog h2{
font-size:20px
}
.feature-blog p{
display:none
}
.feature-blog time{
margin-top:20px
}

.renewal-hero__cta{
left:20px;
bottom:90px
}
.renewal-hero__arrow{
display:block
}
.renewal-hero__pagination{
right:auto;
left:20px;
bottom:24px;
height:auto;
gap:14px
}
.section-heading__production-title{
max-width:58%
}
.section-heading__more .box2{
width:30px
}
.feature-blog__production-card{
margin-top:24px
}
.feature-blog__production-card .tags-container{
top:10px;
left:10px;
gap:5px
}
.feature-blog__production-card .tag{
padding:5px 8px;
font-size:10px
}

.container.sp-only{
overflow-x:visible
}
.sp-renewal-section{
margin-top:50px
}
.sp-renewal-heading{
padding-bottom:0
}
.sp-product-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:8px;
margin-top:50px;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:1.5px solid #5465ff
}
.sp-product-heading__title{
flex:1 1 auto;
min-width:0
}
.sp-product-heading__title img{
display:block;
width:min(var(--sp-heading-width),100%);
max-width:100%;
height:auto;
object-fit:contain
}
.sp-product-heading__fallback{
display:flex;
flex:1 1 auto;
min-width:0;
align-items:center;
gap:5px;
overflow:hidden;
color:#6e7073;
font-family:'Zen Dots',monospace;
font-size:14px;
white-space:nowrap
}
.sp-product-heading__more{
display:block;
flex:0 0 auto;
line-height:0
}
.sp-product-heading__more img{
display:block;
width:auto;
height:46px;
margin:0
}
.sp-renewal-heading+ .scroll-container-relative{
margin-top:0
}
.sp-renewal-blog{
margin-top:50px
}
.sp-renewal-blog .sp-renewal-heading{
margin-bottom:20px!important
}
.sp-renewal-blog .article-image-wrapper img{
transition:transform .3s ease
}
.sp-renewal-blog .sp-article-card:hover .article-image-wrapper img{
transform:scale(1.03)
}
.sp-renewal-blog .sp-article-card:hover .article-image-wrapper:after{
opacity:1
}
.sp-renewal-blog .sp-article-card:hover .box_pc img:first-child{
opacity:0
}
.sp-renewal-blog .sp-article-card:hover .box_pc img:last-child{
opacity:1
}
.sp-renewal-blog .sp-article-card:hover .plus-icon_top{
transform:translateX(5px)
}



/* SP商品スクロールは左余白を保ち、右側だけ画面端まで広げる。 */

  .sp-product-scroll .sp-youtubebox {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 5% 20px;
    box-sizing: border-box;
  }

.youtube-parent-sp .video-title {
    display: -webkit-box;
    height: 2.8em;
    line-height: 1.4;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 767px) {
/* SPの時だけ下線を細くする */

.breadcrumb-link {
    border-bottom-width: 0.5px !important;
    font-size: 12px;
  }
}