@charset "UTF-8";

/*==========================
1. 基本・リセット・フォント
==========================*/
* { margin: 0; padding: 0; box-sizing: border-box; }
.main-area.lp * { margin: 0; padding: 0; box-sizing: border-box; }
.main-area.lp ul { list-style: none; }
.main-area.lp a { text-decoration: none; color: #3C3C3C; transition: opacity 0.3s; }

html { font-size: 62.5%; } 
body .main-area.lp {
  -webkit-text-size-adjust: 100%;
  font-family: 'Josefin Sans',"游ゴシック体", YuGothic, sans-serif;
  background-color: #F0F0EB;
  color: #3C3C3C;
  font-size: 1.4rem;
}
body { opacity: 1; transition: opacity 0.6s ease; }

/*==========================
2. レイアウト（FV・誘導文）
==========================*/
.main-area.lp #fv { width: 100%; position: relative; }
.main-area.lp .gold-caption {
  text-align: center;
  padding: 60px 3%;
  line-height: 2.1;
  font-size: 1.6rem;
}

/*==========================
3. タイトルエリア（ROSÉE）
==========================*/
.main-area.lp .title-area { text-align: left; margin-bottom: 20px; width: 100%; }
.main-area.lp .title-area h2 {
  font-size: 7.8rem; font-weight: 500; line-height: 1.1; letter-spacing: 0.005em;
}
.main-area.lp .title-area h2 span {
  display: inline-block; opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.main-area.lp .title-area h2.animated span { opacity: 1; transform: translateY(0); }
body .main-area.lp .title-area p:first-of-type { font-size: 1.1rem; padding-bottom: 17px; }

body .main-area.lp .title-area > span {
    display: block; background-color: #3C3C3C; height: 1px; margin: 10px 0; 
    position: relative; left: 0; transform: none; width: 0; max-width: 1180px; 
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body .main-area.lp .title-area > span.on { width: 100%; }

/*==========================
4. アイコン類の修正
==========================*/
.main-area.lp .pageTop img, 
.main-area.lp img[src*="arrow"],
.main-area.lp img[src*="cursor"] {
  width: auto; height: auto; max-width: 20px; position: relative; display: inline-block; vertical-align: middle;
}
.main-area.lp img[src*="arrowhalf"] { max-width: 12px; margin-right: 5px; }

/*==========================
5. 商品リスト設定
==========================*/
.main-area.lp .section { max-width: 1290px; margin: 0 auto; padding: 45px 10px; }
.main-area.lp .goods-area ul { display: flex; flex-wrap: wrap; justify-content: flex-start; }

.main-area.lp .goods-area li {
  margin-bottom: 40px; opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s, transform 0.8s; list-style: none;
}
.main-area.lp .goods-area li.animated { opacity: 1; transform: translateY(0); }

/* PC・SP列数設定 */
@media screen and (min-width: 768px) {
  .main-area.lp .goods-area li { width: 31.3%; margin-right: 3%; }
  .main-area.lp .goods-area li:nth-child(3n) { margin-right: 0; }
}
@media screen and (max-width: 767px) {
  .main-area.lp .goods-area li { width: 48%; margin-right: 4%; }
  .main-area.lp .goods-area li:nth-child(2n) { margin-right: 0; }
}

/* 画像制御：人物画像（2枚目）を常に美しく表示 */
.main-area.lp .goods-img {
  width: 100%; aspect-ratio: 1/1; position: relative; overflow: hidden; background: #fdfdfd;
}
.main-area.lp .goods-img a { display: block; width: 100%; height: 100%; }

.main-area.lp .goods-img a img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;
  transition: opacity 0.8s ease; 
  opacity: 1;           /* 人物画像を常に100%の濃さで表示 */
  visibility: visible;
  z-index: 10;
}

.main-area.lp .goods-img a img:nth-of-type(1) {
  opacity: 0;          /* 着用画像を初期状態で上に隠す */
  z-index: 20; 
}

.main-area.lp .goods-img a:hover img:nth-of-type(1),
.main-area.lp .goods-img a.tapped img:nth-of-type(1) {
  opacity: 1;
}

/* テキストレイアウト */
.main-area.lp .text-area a { 
  display: flex; 
  justify-content: space-between; 
  padding-top: 14px; 
  font-size: 1.4rem; 
}

/*==========================
6. SHOPセクション
==========================*/
.main-area.lp .shop-list-wrapper { max-width: 800px; margin: 0 auto 150px; }
.main-area.lp .shop-list-title {
  font-size: 2rem; border-bottom: 1px solid #3C3C3C; padding-bottom: 5px; margin-bottom: 35px;
  display: block; width: 100%; text-align: center;
}
.shop-list-box { display: flex; gap: 0 13%; justify-content: center; }
.main-area.lp .shop-list-col { font-size: 1.6rem; width: 40%; text-align: left; }
.main-area.lp .shop-list-region { font-size: 1.6rem; margin-bottom: 1.4rem; font-weight: bold; }
.main-area.lp .shop-name { margin-left: 1rem; }
.main-area.lp .shop-name li { margin-bottom: 1.2rem; }

/*==========================
7. その他レスポンシブ微調整
==========================*/
@media screen and (min-width: 768px) {
  .main-area.lp .sp { display: none; }
  .main-area.lp .left-area { position: fixed; left: 40px; top: 50%; transform: translateY(-50%); z-index: 100; width: 40px; }
}

@media screen and (max-width: 767px) {
  .main-area.lp .pc { display: none; }
  body .main-area.lp .title-area p:first-of-type { font-size: calc(18 / 750 * 100vw); padding-bottom: calc(17 / 750 * 100vw); }
  .main-area.lp .title-area h2 { font-size: 11vw; }
  body .main-area.lp .title-area > span { max-width: 100vw; margin: 2vw auto; }
  .main-area.lp .text-area a { padding-top: 3vw; flex-direction: column; }
  .main-area.lp .shop-list-wrapper { margin: 0 5vw 30vw; }
  .shop-list-box { display: block; }
  .main-area.lp .shop-list-col { width: 100%; font-size: calc(26 / 750 * 100vw); }
  .main-area.lp .left-area { position: fixed; right: 20px; bottom: 20px; z-index: 100; }
  .main-area.lp .bottom-area { text-align: center; margin: 50px 0; }
}