/* ============================================================
   aishipR システム要素のpadding打ち消し
   ============================================================ */
#sysMain,
#sysAside,
.top20240621,
.top20240621 .sysContent {
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   HAUTE rent to runway — TOP PAGE 上書きCSS
   ブレークポイント：769px以上 = PC / 768px以下 = SP
   既存CSSクラスは変更せず、.top-redesign配下で上書き
   ============================================================ */

/* ----------------------------------------
   共通リセット・ベース
---------------------------------------- */
.top-redesign {
  width: 100%;
  padding: 0;
  margin: 0;
}

.top-redesign * {
  box-sizing: border-box;
}

.top-redesign img {
  display: block;
  width: 100%;
  height: auto;
}

.top-redesign a {
  color: inherit;
  text-decoration: none;
}

/* ----------------------------------------
   ① MV
   - .tr-mv__img--pc : PCのみ表示
   - .tr-mv__img--sp : SPのみ表示
   - .tr-mv__body    : 画像の下にテキストブロック（白背景）
---------------------------------------- */
.tr-mv {
  width: 100%;
  margin-bottom: 0;
}

/* デフォルト：PC画像を表示、SP画像を非表示 */
.tr-mv__img--pc {
  display: block;
  width: 100%;
  line-height: 0;
}

.tr-mv__img--pc img {
  width: 100%;
  height: auto;
  display: block;
}

.tr-mv__img--sp {
  display: none;
}

/* テキストブロック：画像の下、白背景 */
.tr-mv__body {
  display: block;
  background: #fff;
  padding: 28px 20px 32px;
}

.tr-mv__heading {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 14px;
  color: #222;
  letter-spacing: 0.03em;
}

.tr-mv__read {
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 14px;
  color: #555;
  font-weight: bold;
}

.tr-mv__read02 {
  font-size: 12px;
  line-height: 1.8;
  color: #555;
}

/* ロゴはHTMLに残すが非表示（画像に含まれてるため） */
.tr-mv__logo {
  display: none;
}

/* ----------------------------------------
   ② DRESS / ACCESSORIES 横2カラム
---------------------------------------- */
.tr-2col {
  display: flex;
  width: 100%;
}

.tr-2col__item {
  flex: 1;
  display: block;
  position: relative;
}

.tr-2col__img-wrap {
  overflow: hidden;
}

.tr-2col__img-wrap img {
  transition: transform 0.4s ease;
}

.tr-2col__item:hover .tr-2col__img-wrap img {
  transform: scale(1.03);
}

.tr-2col__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #e0e0e0;
  background: #fff;
}

.tr-2col__en {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #222;
}

.tr-2col__ja {
  font-size: 11px;
  color: #888;
  flex: 1;
}

.tr-2col__arrow {
  font-size: 12px;
  color: #222;
}

/* ----------------------------------------
   ③ NEW ITEM
---------------------------------------- */
.tr-newitems {
  width: 100%;
  padding: 40px 0 0;
}

.tr-newitems__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 20px 16px;
}

.tr-newitems__title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.tr-newitems__en {
  font-size: 13px;
  letter-spacing: 2px;
  color: #222;
}

.tr-newitems__ja {
  font-size: 11px;
  color: #888;
}

.tr-newitems__all {
  font-size: 11px;
  color: #888;
  letter-spacing: 1px;
  border-bottom: 1px solid #aaa;
  padding-bottom: 2px;
}

.tr-newitems__grid {
  display: grid;
  gap: 0;
}

/* ----------------------------------------
   ④ CATEGORY
---------------------------------------- */
.tr-category {
  width: 100%;
  padding: 40px 0 0;
}

.tr-category__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 20px 16px;
}

.tr-category__en {
  font-size: 13px;
  letter-spacing: 2px;
  color: #222;
}

.tr-category__ja {
  font-size: 11px;
  color: #888;
}

.tr-category__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tr-category__item {
  display: block;
  position: relative;
  overflow: hidden;
}

.tr-category__item img {
  transition: transform 0.4s ease;
}

.tr-category__item:hover img {
  transform: scale(1.03);
}

.tr-category__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  background: #fff;
}

.tr-category__item-en {
  font-size: 12px;
  letter-spacing: 2px;
  color: #222;
}

.tr-category__item-ja {
  font-size: 11px;
  color: #888;
  flex: 1;
}

.tr-category__arrow {
  font-size: 12px;
  color: #222;
}

.tr-category__rental-link {
  display: none; /* PC非表示、SP表示はsp_viewクラスで制御 */
}

/* ----------------------------------------
   ⑤ SCENE
---------------------------------------- */
.tr-scene {
  width: 100%;
  padding: 40px 0 0;
}

.tr-scene__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 20px 16px;
}

.tr-scene__en {
  font-size: 13px;
  letter-spacing: 2px;
  color: #222;
}

.tr-scene__ja {
  font-size: 11px;
  color: #888;
}

.tr-scene__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tr-scene__item {
  display: block;
  position: relative;
  overflow: hidden;
}

.tr-scene__item img {
  transition: transform 0.4s ease;
}

.tr-scene__item:hover img {
  transform: scale(1.03);
}

.tr-scene__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  background: #fff;
}

.tr-scene__item-en {
  font-size: 12px;
  letter-spacing: 2px;
  color: #222;
}

.tr-scene__item-ja {
  font-size: 11px;
  color: #888;
  flex: 1;
}

.tr-scene__arrow {
  display: none;
}

/* ----------------------------------------
   ⑥ SP only: テキストリンク群
---------------------------------------- */
.tr-sp-links {
  display: none; /* SPのみsp_viewクラスで表示 */
  flex-direction: column;
}

.tr-sp-links__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  margin: 0 5%;
  border-bottom: 1px solid #e0e0e0;
  font-size: 12px;
  letter-spacing: 1px;
  color: #222;
}

.tr-sp-links__item span:first-child {
  font-size: 12px;
  letter-spacing: 2px;
}

.tr-sp-links__item span:nth-child(2) {
  font-size: 11px;
  color: #888;
  flex: 1;
}

.tr-arrow {
  font-size: 12px;
  color: #222;
}

/* ----------------------------------------
   ⑦ Instagram
---------------------------------------- */
.tr-instagram {
  width: 100%;
  padding: 60px 0;
  text-align: center;
}

.tr-instagram__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.tr-instagram__icon {
  display: inline-block;
  color: #222;
  margin-bottom: 12px;
}

.tr-instagram__title {
  font-size: 22px;
  letter-spacing: 3px;
  margin-bottom: 8px;
  color: #222;
}

.tr-instagram__handle {
  font-size: 11px;
  color: #888;
  margin-bottom: 40px;
}

.tr-instagram__handle a {
  color: #888;
}


/* ============================================================
   PC スタイル (769px以上)
   ============================================================ */
@media screen and (min-width: 769px) {

  /* MV - PC: pc画像表示、sp画像非表示（デフォルトと同じ） */
  .tr-mv__img--sp { display: none; }
  .tr-mv__img--pc { display: block; }

  .tr-mv__body {
    padding: 32px 40px 40px;
  }

  .tr-mv__text-block {
    width: 75%;
    margin: 0 auto;
  }

  /* Instagram: PCでは非表示 */
  .tr-instagram {
    display: none;
  }

  /* CATEGORY: 75%幅・センター */
  .tr-category {
    width: 75%;
    margin: 0 auto;
    padding: 60px 0 0;
  }

  /* NEW ITEM: 6カラム2行 */
  .tr-newitems__grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .tr-newitems {
    padding: 48px 0 0;
  }

  .tr-newitems__head {
    padding: 0 0 16px;
    max-width: none;
  }

  .tr-newitems__title-wrap {
    margin-left: 5%;
  }

  .tr-category__head {
    padding: 0 0 16px;
  }

  /* SCENE */
  .tr-scene {
    padding: 60px 0 0;
  }

  .tr-scene__head {
    padding: 0 0 16px;
    margin-left: 5%;
  }

  .tr-scene__grid {
    margin-bottom: 90px;
  }

  /* SP専用非表示 */
  .tr-sp-links {
    display: none !important;
  }

  .tr-category__rental-link {
    display: none !important;
  }

  /* Instagram */
  .tr-instagram {
    padding: 80px 0;
  }
}


/* ============================================================
   SP スタイル (768px以下)
   ============================================================ */
@media screen and (max-width: 768px) {

  /* MV - SP: sp画像表示、pc画像非表示 */
  .tr-mv__img--pc { display: none; }
  .tr-mv__img--sp { display: block; }

  .tr-mv__body {
    padding: 24px 20px 28px;
  }

  .tr-mv__heading {
    font-size: 13px;
  }

  .tr-mv__read,
  .tr-mv__read02 {
    font-size: 11px;
  }

  /* DRESS / ACCESSORIES: SP縦積み */
  .tr-2col {
    flex-direction: column;
  }

  /* NEW ITEM: 4カラム */
  .tr-newitems__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .tr-newitems {
    padding: 28px 0 0;
  }

  /* CATEGORY */
  .tr-category {
    padding: 28px 0 0;
  }

  /* SCENE */
  .tr-scene {
    padding: 28px 0 0;
  }

  /* SP専用リンク表示 */
  .tr-sp-links {
    display: flex;
    margin-top: 0;
  }

  .tr-category__rental-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    margin: 0 5%;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
    letter-spacing: 1px;
    color: #222;
  }

  .tr-category__rental-link span:first-child {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .tr-category__rental-link span:nth-child(2) {
    font-size: 11px;
    color: #888;
    flex: 1;
  }

  /* Instagram */
  .tr-instagram {
    padding: 48px 0;
  }

  .tr-instagram__title {
    font-size: 18px;
  }
}

/* MV: メディアコンテナ */
.tr-mv__media {
  position: relative;
  height: 600px;
  overflow: hidden;
}

/* PC動画 */
.tr-mv__video--pc {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SP動画はPCでは非表示 */
.tr-mv__video--sp {
  display: none;
}

/* ロゴはabsoluteで重ねる */
.tr-mv__logo {
  display: block;
  position: absolute;
  /* 必要に応じてtop/left/transform等を調整 */
}

/* SP（768px以下）では逆にする */
@media screen and (max-width: 768px) {
  .tr-mv__media {
    height: 125vw; /* SPの動画アスペクト比に合わせて調整 */
  }

  .tr-mv__video--pc {
    display: none;
  }

  .tr-mv__video--sp {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ============================================
   メインビジュアル：ロゴ位置の修正
   ============================================ */

/* PC：ロゴを動画の左下に配置 */
.tr-mv__logo {
  left: 5%;
  bottom: 12%;
}

/* SP画像は非表示（PC表示時） */
.tr-mv__logo .tr-mv__logo-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .tr-mv__logo .tr-mv__logo-pc {
    display: none;
  }
  .tr-mv__logo .tr-mv__logo-sp {
    display: block;
  }
}

/* SP（768px以下）：ロゴをSP用に切り替え */
@media screen and (max-width: 768px) {
  .tr-mv__logo {
    left: 4%;
    bottom: 10%;
  }
  .tr-mv__logo-pc {
    display: none;
  }
  .tr-mv__logo-sp {
    display: block;
  }
}

/* ============================================
   「ドレスはレンタル？」セクションのスタイル
   ============================================ */

.tr-mv-copy {
  background: #fff;
}

.tr-mv-copy__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 5%;
}

.tr-mv-copy__lead {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  margin: 0 0 14px;
  letter-spacing: 0.03em;
}

.tr-mv-copy__text {
  font-size: 13px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

/* SP（768px以下） */
@media screen and (max-width: 768px) {
  .tr-mv-copy__inner {
    padding: 28px 5%;
  }
  .tr-mv-copy__lead {
    font-size: 13px;
  }
  .tr-mv-copy__text {
    font-size: 12px;
  }
}