:root { color-scheme: light; font-family: Arial, 'Noto Sans JP', sans-serif; color: #202020; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #466da8; outline-offset: 4px; }
.lookbook { max-width: 1440px; margin: auto; padding: 64px 40px 80px; }
.page-heading { text-align: center; margin-bottom: 44px; }
.page-heading h1 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: .16em; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.coordinate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
.coordinate { display: block; text-decoration: none; min-width: 0; }
.coordinate img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #f3f3f3; transition: opacity .2s; }
.coordinate:hover img { opacity: .86; }
.shop-link { display: flex; justify-content: space-between; padding-top: 12px; font-size: .75rem; letter-spacing: .08em; }
.shop-link span { font-size: 1rem; line-height: 1; }
.empty-state { text-align: center; color: #666; padding: 60px 16px; line-height: 1.8; }
.admin-body { background: #f6f6f6; }
.admin { max-width: 1000px; margin: auto; padding: 40px 24px 80px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.admin h1 { font-size: 1.5rem; margin: 0 0 6px; font-weight: 600; }
.admin h2 { font-size: 1.125rem; margin: 0 0 20px; }
.muted { color: #626262; font-size: .875rem; line-height: 1.7; margin: 6px 0 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel { padding: 28px; background: #fff; border: 1px solid #dedede; margin-bottom: 24px; }
.login { max-width: 460px; margin: 8vh auto; }
label { display: block; font-size: .875rem; margin-bottom: 18px; line-height: 1.7; }
input[type=url], input[type=text], input[type=password] { display: block; width: 100%; padding: 11px 12px; border: 1px solid #aaa; border-radius: 0; margin-top: 6px; background: #fff; color: #202020; min-height: 44px; }
input[type=file] { display: block; max-width: 100%; margin-top: 8px; font-size: .875rem; }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid #222; background: #222; color: #fff; cursor: pointer; text-decoration: none; font-size: .875rem; }
button:hover, .button:hover { background: #444; }
.secondary { background: #fff; color: #222; border-color: #bbb; }
.secondary:hover { background: #eee; }
.danger { color: #9d2525; border-color: #d5b7b7; background: #fff; }
.danger:hover { background: #fff0f0; }
button:disabled { opacity: .35; cursor: default; }
.notice { padding: 16px; border: 1px solid #a5bca8; background: #edf6ee; margin-bottom: 24px; line-height: 1.7; overflow-wrap: anywhere; }
.error { border-color: #dbb4b4; background: #fff0f0; }
.item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
.item-preview { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #eee; }
.item-controls { border-top: 1px solid #ddd; padding-top: 18px; margin-top: 20px; }
.position-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; width: 100%; margin-bottom: 8px; }
.position-form label { margin: 0; }
.position-form input { display: block; width: 110px; min-height: 44px; margin-top: 6px; padding: 10px 12px; border: 1px solid #aaa; border-radius: 0; background: #fff; color: #202020; }
.load-more { text-align: center; margin-top: 40px; }
.load-status { text-align: center; color: #626262; font-size: .875rem; line-height: 1.7; }
.column-options { padding: 14px 18px; border: 1px solid #bbb; margin: 0 0 16px; }
.column-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 24px 0 0; }
.column-options input { width: 18px; height: 18px; }
[hidden] { display: none !important; }
textarea { display: block; width: 100%; min-height: 120px; padding: 12px; margin-top: 6px; border: 1px solid #aaa; border-radius: 0; background: #fff; color: #202020; font: .875rem/1.6 Consolas, monospace; resize: vertical; }
.admin h3 { font-size: 1rem; margin: 16px 0 12px; }
.lp-list-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid #ddd; }
.lp-list-item h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.lp-address { margin: 0; overflow-wrap: anywhere; }
.redirect-card { margin-top: 24px; padding-top: 20px; border-top: 1px solid #ddd; }
.redirect-card .issued-url { background: #f7f7f7; font-family: Consolas, monospace; font-size: .875rem; }
.redirect-edit { margin-top: 24px; }
.redirect-delete { margin-top: 12px; }
.footer-link-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-bottom: 18px; }
.footer-link-row label { margin: 0; }
.lp-footer { margin-top: 64px; padding-top: 32px; border-top: 1px solid #e4e4e4; text-align: center; }
.footer-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.footer-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 180px; max-width: 100%; border: 1px solid #222; padding: 14px 24px; text-decoration: none; font-size: .875rem; letter-spacing: .03em; overflow-wrap: anywhere; }
.footer-button:hover { background: #222; color: #fff; }
.footer-html { margin-top: 28px; color: #666; font-size: .75rem; line-height: 1.8; overflow-wrap: anywhere; }
.footer-html a { color: inherit; text-underline-offset: 3px; }
.footer-html a + a { margin-left: 16px; }
@media (max-width: 767px) {
  .lookbook { padding: 36px 16px 48px; }
  .page-heading { margin-bottom: 28px; }
  .coordinate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .coordinate-grid.mobile-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; }
  .mobile-columns-3 .shop-link { flex-wrap: wrap; gap: 4px; overflow-wrap: anywhere; }
  .shop-link { font-size: .75rem; letter-spacing: .025em; }
  .admin { padding: 24px 16px 48px; }
  .panel { padding: 20px; }
  .item { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .item-preview { width: 130px; }
  .footer-link-row { grid-template-columns: minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid #ddd; }
  .footer-link-row button { justify-self: start; }
  .footer-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
  .lp-footer { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }




/* ========================================
   追加デザイン
   SNSエリア全体
======================================== */
#mainitmMwLjk4Nj {
  width: 100%;
}

#mainitmMwLjk4Nj .sns-banner_container_e79c19c5 {
  width: 480px;
  max-width: calc(100% - 40px);
  margin: 23px auto 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
}


/* ========================================
   Instagram メインバナー
======================================== */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="instagram"] {
  width: 100%;
  height: 120px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-decoration: none;

  background:
    linear-gradient(
      120deg,
      #ff0018 0%,
      #e50067 30%,
      #b000c7 60%,
      #2900d7 100%
    );

  border-radius: 4px;

  margin-bottom: 58px;
}


/* Instagram 上部のアイコン＋文字 */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="instagram"]
.sns-banner_textWrap_e79c19c5 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  height: auto;
  margin: 0 0 16px;
}


/* Instagram アイコン */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="instagram"]
.sns-banner_icon_e79c19c5 {
  width: 20px;
  height: 20px;

  font-size: 20px;
  line-height: 20px;

  color: #fff;
}


/* Instagram 文字 */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="instagram"]
.sns-banner_text_e79c19c5 {
  color: #fff;

  font-size: 18px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.02em;
}


/* ========================================
   「フォローする」ボタン
======================================== */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="instagram"]
.sns-banner_button_e79c19c5 {
  width: 190px;
  height: 48px;

  display: flex;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;

  background: #fff;
  color: #111;

  border-radius: 6px;

  font-size: 15px;
  font-weight: 700;

  line-height: 1;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


/* hover */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="instagram"]:hover
.sns-banner_button_e79c19c5 {
  opacity: .9;
}


/* ========================================
   Instagram以外
   → 下の小さいSNSアイコンだけ表示
======================================== */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5:not([data-type="instagram"]) {
  width: 24px;
  height: 24px;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0;
  margin: 0;

  text-decoration: none;

  background: transparent;
}


/* テキスト部分 */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5:not([data-type="instagram"])
.sns-banner_textWrap_e79c19c5 {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 24px;
  height: 24px;

  margin: 0;
}


/* SNS名は非表示 */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5:not([data-type="instagram"])
.sns-banner_text_e79c19c5 {
  display: none;
}


/* フォローボタン非表示 */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5:not([data-type="instagram"])
.sns-banner_button_e79c19c5 {
  display: none;
}


/* 小さいSNSアイコン共通 */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5:not([data-type="instagram"])
.sns-banner_icon_e79c19c5 {
  width: 24px;
  height: 24px;

  font-size: 24px;
  line-height: 24px;

  display: flex;
  justify-content: center;
  align-items: center;
}


/* ========================================
   Instagram 小アイコンも追加
   ※ メインInstagram自身を流用すると
      大バナー内にあるため、疑似要素で表示
======================================== */
#mainitmMwLjk4Nj
.sns-banner_container_e79c19c5::after {
  /*
    必要に応じて使用。
    現状HTMLではInstagramリンクがメインバナーに
    使用されているため、下段にはInstagramがありません。
  */
}


/* LINE */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="line"]
.sns-banner_icon_e79c19c5 {
  color: #06c755;
}


/* YouTube */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="youtube"]
.sns-banner_icon_e79c19c5 {
  color: #ff0000;
}


/* TikTok */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5[data-type="tiktok"]
.sns-banner_icon_e79c19c5 {
  width: 24px;
  height: 24px;

  object-fit: contain;

  /* 白画像を黒ベースに */
  filter: brightness(0);
}


/* SNSアイコン hover */
#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5:not([data-type="instagram"]) {
  transition:
    opacity .2s ease,
    transform .2s ease;
}

#mainitmMwLjk4Nj
.sns-banner_item_e79c19c5:not([data-type="instagram"]):hover {
  opacity: .75;
  transform: translateY(-1px);
}


/* ========================================
   商品一覧に戻る
======================================== */
#mainitmkuMzg1Nz {
  width: 100%;

  /* SNSアイコンとの距離 */
  margin-top: 69px;
}


#mainitmkuMzg1Nz .button_container_c1301084 {
  width: 100%;

  display: flex;
  justify-content: center;
}


/* ボタン */
#mainitmkuMzg1Nz .button_button_c1301084 {
  width: 240px;
  height: 48px;

  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0;

  text-decoration: none;

  color: #fff !important;
  background-color: #09b8cf !important;
  border: 1px solid #09b8cf !important;

  border-radius: 4px;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


#mainitmkuMzg1Nz .button_button_c1301084:hover {
  opacity: .85;
}


/* ========================================
   スマホ
======================================== */
@media screen and (max-width: 520px) {

  #mainitmMwLjk4Nj .sns-banner_container_e79c19c5 {
    width: calc(100% - 32px);
    max-width: none;

    margin-top: 20px;

    column-gap: 18px;
  }


  #mainitmMwLjk4Nj
  .sns-banner_item_e79c19c5[data-type="instagram"] {
    height: 120px;
    margin-bottom: 55px;
  }


  #mainitmMwLjk4Nj
  .sns-banner_item_e79c19c5[data-type="instagram"]
  .sns-banner_button_e79c19c5 {
    width: 190px;
  }


  #mainitmkuMzg1Nz {
    margin-top: 68px;
  }


  #mainitmkuMzg1Nz .button_button_c1301084 {
    width: 240px;
    max-width: calc(100% - 40px);
  }
}