@charset "UTF-8";
/* Scss Document */
/*---------mixin設定-------------*/
/*ブレイクポイント*/
/*-------------------------------

 //共通パーツ

-------------------------------*/
html {
  width: 100%;
}
* {
  box-sizing: border-box;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, table, th, td, figure {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
ol, ul {
  list-style: none;
}
fieldset, img {
  border: 0 none;
}
object, embed, img {
  vertical-align: top;
}
img {
  width: 100%;
  height: auto;
}
.lookbook_page {
  overflow: hidden;
  text-align: center;
  padding: 0 15px;
  background-color: #f7f4ec;
  color: #000000;
}
.lookbook_page a {
  color: #000000;
}
.lookbook_page a:hover {
  cursor: pointer;
}
.pc_none {
  display: none;
}
.sp_none {
  display: block;
}
.lookbook_page .operetta {
  font-family: "operetta-32", serif;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  font-size: 3.5rem;
}
.lookbook_page .century {
  font-family: "century-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3rem;
  margin-bottom: 30px;
}
.top_cover {
  position: relative;
  width: 100%;
  aspect-ratio: 35/22;
  overflow: hidden;
}
.top_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* ← 全体表示 */
  object-position: center; /* 中央寄せ */
  z-index: 0;
}
.top_img_content {
  position: absolute;
  inset: 0;
  display: grid; /* 中央寄せの最短手段 */
  place-items: center; /* 上下左右中央 */
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 0 16px; /* 端の余白（任意） */
}
.lookbook_page .message {
  margin: 50px 0;
}
/* 共通初期状態 */
.fadein {
  opacity: 0;
  transition: all 2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}
.fadein.show {
  opacity: 1;
  transform: translate(0, 0);
}
/* 左から / 右から */
.from-left {
  transform: translateX(-200px);
}
.from-right {
  transform: translateX(200px);
}
.from-bottom {
  transform: translateY(150px);
}
/* ---- po1 ---- */
.flex.po1 > div:last-child { /* 右側：大きい画像 */
  transition-delay: 0s;
}
.flex.po1 > div:first-child { /* 左側：小さい画像 */
  transition-delay: 1.0s; /* 大きい画像が止まってから */
}
/* ---- po2 ---- */
.flex.po2 > div:first-child { /* 左側：大きい画像 */
  transition-delay: 0s;
}
.flex.po2 > div:last-child { /* 右側：小さい画像 */
  transition-delay: 1.0s;
}
/* ---- po3 ---- */
.flex.po3 {
  display: flex;
  justify-content: center; /* 中央に寄せる */
  align-items: center;
  gap: 0; /* ← 隙間ゼロに */
}
.flex.po3 > div {
  flex: 0 0 auto; /* 自動伸縮しない */
  margin: 0; /* 念のため余白リセット */
  padding: 0;
}
.flex.po3 img {
  display: block;
}
.lookbook_page .item {
  text-align: left;
}
.lookbook_page .item_detail {
  margin: 10px 0 0 0;
}
.lookbook_page .item_detail .price {
  color: #000000;
}
.lookbook_page .flex {
  display: flex;
  margin-bottom: 50px;
}
.lookbook_page .flex > div {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 下揃え */
}
.item_small {
  width: 75%;
}
.item_small img {
  width: 100%;
  height: auto;
  display: block;
}
.item_detail {
  margin-top: 10px;
  text-align: left;
}
/* po1 の小さい画像は左寄せ */
.po1 .item_small {
  margin-right: auto;
}
/* po2 の小さい画像は右寄せ */
.po2 .item_small {
  margin-left: auto;
}
/* 小さい側の中身の箱＝a を 75% にする */
.flex .item_small > a {
  display: block;
  width: 75%;
}
/* po1：左寄せ（a箱を左側へ） */
.flex.po1 > .item_small {
  justify-content: flex-start;
} /* 列内の水平配置 */
.flex.po1 .item_small > a {
  margin-right: auto;
}
/* po2：右寄せ（a箱を右側へ） */
.flex.po2 > .item_small {
  justify-content: flex-end;
} /* 列内の水平配置 */
.flex.po2 .item_small > a {
  margin-left: auto;
}
/* 画像は箱いっぱい＝結果として列の75% */
.item_small img {
  width: 100%;
  height: auto;
  display: block;
}
/* テキストは画像の下で左寄せ */
.item_small .item_detail {
  margin-top: 10px;
  text-align: left;
}
/* もし以前の .item_small { width:75%; } が残っていたら無効化 */
.item_small {
  width: auto;
}
/* po1 左カラムの .item_small を上下中央に */
.flex.po1 > div:first-child {
  display: flex; /* flex化 */
  align-items: center; /* 上下中央 */
  justify-content: center; /* 左右中央 */
}
.po4 {
  margin-bottom: 50px;
}
.text_flex {
  display: flex;
}
.text_flex > div {
  width: 230px;
}
@media (max-width: 768px) {
  div.wrapper_ {
    margin: 80px auto 0;
    padding: 0;
  }
  html {
    width: 100%;
  }
  .pc_none {
    display: block;
  }
  .sp_none {
    display: none;
  }
  .lookbook_page {
    padding: 0 10px;
  }
  .top_cover {
    aspect-ratio: 35/44;
  }
  .lookbook_page .operetta {
    font-size: 2rem;
  }
  .lookbook_page .century {
    font-size: 1rem;
    margin-bottom: 30px;
  }
  .lookbook_page .message {
    margin: 30px 0;
  }
  .lookbook_page .message_text {
    font-size: 13px;
  }
  .lookbook_page .flex {
    display: block;
    margin-bottom: 50px;
  }
  .lookbook_page .flex > div {
    width: 100%;
    display: block;
  }
  .flex > div:first-child {
    margin-bottom: 30px;
  }
  footer.global {
    clear: both;
    margin: 0;
  }
}