/* simple utility */
.top__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #4a4a4a;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  padding: 15px 10px;
  gap: 30px;
  min-width: 280px;
}
.top__btn-ttl{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.top__btn--ghost { background: transparent; }
.top__btn--line { background: #fff; }
.top__btn--accent { background: #d6a117; border-color: #d6a117; color: #fff; }

/* section head */
.top__section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  position: relative;
}
.top__section-head__jp {
  font-weight: 700;
  font-size: 40px;
  color:#40200e;
  writing-mode: vertical-rl;
  text-orientation: mixed; 
  position: absolute;
  left: -30px;
  top: 36px;
  height: 300px;
}
.top__section-head__en {
  padding: 0;
}
@media (max-width: 768px) {
    .top__section-head__en {
      height: 36px;
    }
    .top__section-head__en img{
      height: fit-content;
      max-height: 100%;
    }
    .top__section-head__jp{
        left: -10px;
        top: 15px;
        font-size: 18px;
        height: 100px;
    }
    .top__btn {
        font-size: 14px;
        font-weight: 700;
        padding: 6px 5px;
        gap: 20px;
        min-width: 210px;
    }
    .top__btn-ttl{
        gap: 4px;
    }
    .top__btn-ttl img{
        width: 16px;
    }
}
/* ========== HERO ========== */
.top__hero {
  position: relative;
  max-height: 813px;
  height: 54svw;
}
.top__hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;

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

}
.top__hero__txt {
  position: absolute;
  max-width: 660px;
  top: calc(50% - 15px);
  left: calc(50% - 675px);
  transform: translate(0, -50%);
}
.top__hero__kicker {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: .2em;
}
.top__hero__title {
  margin: 0;
  font-size: clamp(40px, 6.8vw, 96px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .06em;
}

@media (max-width: 1300px) {
    .top__hero__txt{
        left: 20px;
    }
}

@media (max-width: 768px) {
    .top__hero {
        position: relative;
        max-height: 813px;
        height: 160svw;
        max-height: 813px;
        height: 158svw;
        margin-top: -65px;
    }
    .top__hero__txt{
        left: 18px;
        width: 82vw;
    }
}
/* ========== INFO ========== */
.top__info {
  position: relative;
  padding: 200px 0 100px;
  background: #fff;
}
.top__info-box{
    margin: 0 auto;
    width: 890px;
    max-width: calc(100% - 250px);
}
.top__info .top__section-head{
  padding: 0 77px;
}
.top__info .top__section-head__jp {
  left: 47px;
}
.top__info__list {
  list-style: none;
  margin: 0;
  padding: 5px 0;
}
.top__info__item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  align-items: center;
  padding: 25px 45px;
  border-bottom: 1px solid #eee;
}
.top__info__item:last-child{
  border-bottom: none;
}
.top__info__date { 
  font-size: 16px; 
  font-weight: 700;
}
.top__info__label {
  background: #b79576;
  font-size: 16px;
  padding: 5px 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  min-width: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top__info__link {
  width: 100%;
}
.top__info__more { 
    margin: 35px auto 0;
    display: flex;
    justify-content: center;
}

/* 飾りの小さな写真群 */
.top__tiles{
  margin: 232px 0 20px;
}
/* ===== 画像1枚を横に流し続ける（無限ループ） ===== */
.top__tiles--loop {
  position: relative;
  overflow: hidden;
  height: 695px;       /* 高さはお好みで：120〜180px くらい */
  background: #fff;       /* ページ背景に合わせてください */
}

.top__tiles__track {
  display: flex;
  gap: 0;                 /* 継ぎ目を出さないため余白ゼロ */
  width: max-content;     /* 中身の幅にフィット */
  animation: tilesLoop 180s linear infinite;  /* 速度は60sでゆっくり */
}

.top__tile {
  flex: 0 0 auto;         /* 幅は画像の実幅に任せる */
  line-height: 0;         /* 画像下の隙間対策 */
}
.top__tile img {
  height: 695px;          /* 親の高さにフィット */
  width: auto;            /* 元画像の横幅を保つ（4000pxなど） */
  display: block;
  object-fit: cover;
}

@keyframes tilesLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* スマホ（≤768px）：少し低く＆ゆっくり */
@media (max-width: 768px) {
    .top__tiles {
        margin: 100px 0 20px;
    }
    .top__tiles--loop { 
        height: 290px;
    }
    .top__tile img {
        height: 290px;
    }
  .top__tiles__track { animation-duration: 180s; }
}

/* 動きに弱い環境の配慮 */
@media (prefers-reduced-motion: reduce) {
  .top__tiles__track { animation: none; transform: translateX(0); }
}


@media (max-width: 768px) {
    .top__info {
        padding: 95px 0 30px;
    }
    .top__info .top__section-head {
        padding: 0;
    }
    .top__info .top__section-head__jp{
        left: -10px;
        top: 15px;
    }
    .top__info-box{
        width: 100%;
        max-width: 100%;
    }
    .top__info__list{
        padding: 15px 0; 
    }
    .top__info__item{
        padding: 15px 10px;
        gap: 8px 10px;
        align-items: center;
        border-bottom: 1px solid #eee;
    }
    .top__info__date{
        font-size: 14px;
    }
    .top__info__label{
        font-size: 14px;
    }
    .top__info__label {
        font-size: 14px;
        padding: 3px 8px;
        min-width: 60px;
    }
    .top__info__link{
        font-size: 14px;
    }
}

/* ========== ABOUT ========== */
.top__about { 
  margin: 120px 0; 
}
.top__about__wrap {
}
.top__about__aside {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.top__about__aside-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .3em;
  color: #a9a9a9;
  font-weight: 600;
}
.top__about__symbol {
      margin: 180px 0 75px;
}
.top__about__symbol img{
      margin: 0 auto;
}
.top__about__logo {
  font-weight: 900;
  font-size: 42px;
  letter-spacing: .02em;
}
.top__about__name { font-weight: 800; margin-top: 6px; }
.top__about__name-en { color: #666; font-size: 13px; }
.top__about__textsbox{
  display: flex;
  flex-direction: row-reverse;
  margin: 83px auto 60px;
  width: 985px;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 47px;
}
.top__about__texts-ttl{
  padding-left: 30px;
}
.top__about__text {     
  writing-mode: vertical-rl;
  text-orientation: mixed; 
  padding: 70px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 2.42;
}
.top__about__actions {
   margin-top: 0; 
   display: flex; 
   flex-wrap: wrap;
   justify-content: center;
   gap: 150px;
}

@media (max-width: 768px) {
    .top__about {
        margin: 30px 0;
    }    
    .top__about__symbol {
        margin: 60px 0 60px;
    }    
    .top__about__symbol  img{
        width: 295px;
    }
}
@media (max-width: 980px) {
    .top__about__textsbox{
        display: block;
        margin: 40px auto 60px;
        width: 100%;
        max-width: 700px;
    }
    .top__about__text{
        font-size: 14px;
        writing-mode: rl;
    }
    .top__about__texts-ttl{
        text-align: center;
        padding: 0;
        margin-bottom: 30px;
    }
    .top__about__texts-ttl img{
        width: 162px;        
        margin: 0 auto;
    }
    .top__about__text{
        padding: 0;
        margin-bottom: 20px;
        line-height: 1.9;
        font-size: 14px;
    }
    .top__about__actions{
        gap: 35px;
    }
    .top__about__actions .top__btn {
        font-size: 14px;
        min-width: 190px;
    }
    .top__info__arrow img{
        width: 6px;
    }
        
}
/* ========== PRODUCT ========== */
.top__product { 
  padding: 183px 0; 
  overflow: hidden;
  position: relative;
}
.top__product__grid {
  display: flex;
  gap: 60px;
  position: relative;
}
.top__product__grid::after{
  content:"";
  background: #faf9f6;
  position: absolute;
  width: 100vw;
  height: 100%; 
  top:70px;
  left: -50px;
  z-index: -1;
}
.top__product__media{
  position: relative;
  width: 550px;
}
.top__product__media img { 
  position: absolute;
  width: 700px;
  right: 0;
  top: 0;
  max-width: max-content;
}
.top__product__body{
  width: calc(100% - 610px);
  padding-bottom: 60px;
}
.top__product__body-box{
  margin: 83px 0 0 65px;
}
.top__product__lead { 
  font-weight: 500;
  line-height: 2.4;
}
.top__product__actions{
  margin-top: 16px; 
}
.top__product__actions a{
  width: fit-content;
  margin-top: 40px;
}
.top__product__illust{
  position: absolute;
  right: 0;
  top:50px;
}
/* サブバナー */
.top__shop-banner {
  margin-top: 135px;
  padding: 36px 0 0;
}
.top__product .top__section-head__jp{
  font-size: 36px;
}

@media (max-width: 1300px) {
  .top__product__media{
      width: 400px;
  }
  .top__product__media img { 
    width: 600px;
  }
  .top__product__body{
    width: calc(100% - 440px);
  }
  .top__product__grid::after {
    width: 100vw;
      height: 100%;
      top: 70px;
      left: 0;
      z-index: -1;
  }
}
@media (max-width: 768px) {
    .top__product { 
        padding: 95px 0 30px; 
    }
    .top__product__grid {
        display: block;
    }
    .top__product__grid::after{
        width: calc(100vw + 60px);
        height: calc(100% - 20px);
        top:70px;
        left: -60px;
    }
    .top__product__media{
        position: relative;
        width: calc(100% - 40px);
        margin: -10px 0 0 40px;
    }
    .top__product__media img { 
        position: relative;
        width: 100%;
        right: 0;
        top: 0;
    }
    .top__product__body{
        width: 100%;
        padding-bottom: 0;
    }
    .top__product__body-box{
        margin: 20px 0 0 0;
    }
    .top__product__lead { 
        line-height: 2;
        font-size: 14px;
    }
    .top__product__actions a{
        width: fit-content;
        margin: 20px auto 0;
        max-width: 190px;
    }
    .top__product__illust{
        position: absolute;
        right: 0;
        top:13px;
    }
    .top__product__illust img{
        width: 93px;
    }
    /* サブバナー */
    .top__shop-banner {
        margin-top: 53px;
        padding: 36px 0 0;
    }
    .top__product .top__section-head__jp{
        font-size: 18px;
    }
}

/* ========== WORKS ========== */
.top__works { 
  padding: 105px 0; 
  overflow: hidden;
  position: relative;
}
.top__works__grid {
  display: flex;
  gap: 60px;
  position: relative;
  flex-direction: row-reverse;
}
.top__works__grid::after{
  content:"";
  background: #faf9f6;
  position: absolute;
  width: 100vw;
  height: 100%; 
  top:70px;
  right: -50px;
  z-index: -1;
}
.top__works__media{
  position: relative;
  width: 550px;
}
.top__works__media img { 
  position: absolute;
  width: 700px;
  left: 0;
  top: 0;
  max-width: max-content;
}
.top__works__body{
  width: calc(100% - 610px);
  padding-bottom: 60px;
}
.top__works__body-box{
  margin: 83px 0 0 65px;
}
.top__works__lead { 
  font-weight: 500;
  line-height: 2.4;
}
.top__works__actions{
  margin-top: 16px; 
}
.top__works__actions a{
  width: fit-content;
  margin-top: 40px;
}
.top__works__illust{
  position: absolute;
  left: 0;
  top:50px;
}
.top__works .top__section-head__jp{
  font-size: 36px;
}

@media (max-width: 1300px) {
  .top__works__media{
      width: 400px;
  }
  .top__works__media img { 
    width: 600px;
  }
  .top__works__body{
    width: calc(100% - 440px);
  }
  .top__works_grid::after {
    width: 100vw;
      height: 100%;
      top: 70px;
      left: 0;
      z-index: -1;
  }
}
@media (max-width: 768px) {
    .top__works { 
        padding: 73px 0 100px; 
    }
    .top__works__grid {
        display: block;
    }
    .top__works__grid::after{
        width: calc(100vw + 60px);
        height: calc(100% - 20px);
        top:70px;
        left: -60px;
    }
    .top__works__media{
        position: relative;
        width: calc(100% - 40px);
        margin: -10px 0 0 40px;
    }
    .top__works__media img { 
        position: relative;
        width: 100%;
        right: 0;
        top: 0;
    }
    .top__works__body{
        width: 100%;
        padding-bottom: 0;
    }
    .top__works__body-box{
        margin: 20px 0 0 0;
    }
    .top__works__lead { 
        line-height: 2;
        font-size: 14px;
    }
    .top__works__actions a{
        width: fit-content;
        margin: 20px auto 0;
        max-width: 190px;
    }
    .top__works__illust{
        position: absolute;
        left: 0;
        top:auto;
        bottom:0px;
    }
    .top__works__illust img{
        width: 76px;
    }
    .top__works .top__section-head__jp{
        font-size: 18px;
        height: 160px;
    }
}

/* ========== WIDE VISUAL ========== */
.top__panorama { 
  padding:200px 0 0;
}
.top__panorama img {
  width: 100%;
  height: 690px;
  object-fit: cover;
  display: block;
  object-position: center top;
}

@media (max-width: 768px) {
    .top__panorama { 
        padding:50px 0 0;
    }
    .top__panorama img {
        width: 100%;
        height: 367px;
        object-fit: cover;
        display: block;
        object-position: center top;
    }   
}