/* AS(celebvilla-as-frontend)の共通部品の見た目を写す。値の出どころは各 styled.ts と ui/{colors,fonts,fontSizes,fontWeights}.ts、
   styles/global.ts(行の高さ 1.5)。AS は html の文字の大きさが 10px(1rem=10px)なので px に直している。
   色: gray.light3 #d9d9d9 / gray.dark7 #656565 / gray.dark8 #1C1B1F / quicksilver #a6a6a6 / basaltGrey #999
   字: titleFont 'Hiragino Sans' / 本文 'Noto Sans JP'。幅: SP_WIDTH 770、PC_WIDTH_1200、md は 769px 以下 */

/* ヘッダーは上に固定(ArtistLayout の pt 80px) */
body { padding-top: 80px; }
body.disabled-scroll { overflow: hidden !important; }

/* ---- Header */
.as-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  padding: 24px 16px;
  background: #fff;
  border-bottom: 4px solid #d9d9d9;
  z-index: 999;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
}
.as-logo { position: fixed; top: 0; left: 16px; z-index: 999; display: block; width: 250px; height: 76px; }
.as-logo picture, .as-logo img { display: block; width: 100%; height: 100%; }
.as-logo img { object-fit: contain; object-position: left center; }
.as-logo .as-logo-menu, .as-logo.menu-open .as-logo-header { display: none; }
.as-logo.menu-open .as-logo-menu { display: block; }
/* メニュー用のロゴだけ登録されているとき(ヘッダー用が無い)は、開いたときだけ出る(AS と同じ) */

.as-nav { display: flex; list-style: none; margin: 0; padding: 0; }
.as-nav li {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Hiragino Sans', sans-serif;
  letter-spacing: 1.6px;
}
.as-nav li > svg { margin-left: 13px; transition: .4s; }
.as-nav li:not(:last-child) { margin-right: 32px; }
.as-nav a {
  position: relative;
  display: flex;
  align-items: center;
  color: #1c1b1f;
  font-weight: 600;
  text-decoration: none;
}
.as-nav a::after {
  content: '';
  position: absolute;
  width: 0;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 0;
  pointer-events: none;
  transition: width .4s;
}
.as-nav li:hover a::after { width: 100%; height: 2px; background: #a6a6a6; }

/* Hamburger(top 28px・right 16px の位置はそのまま、押せる範囲だけ 44px に広げる) */
.as-burger {
  position: fixed;
  top: 18px;
  right: 6px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: .4s;
}
.as-burger svg { position: absolute; top: 10px; left: 10px; }
.as-burger .as-burger-close, .as-burger.open .as-burger-open { display: none; }
.as-burger.open .as-burger-close { display: block; }
.as-burger:focus-visible { outline: 2px solid #000; outline-offset: -2px; }

@media (min-width: 1200px) { .as-burger { display: none; } }
@media (max-width: 1199px) { .as-nav { display: none; } }

/* ---- Menu(下から上がってくる全画面のメニュー) */
@keyframes as-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes as-right-to-left {
  0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); }
}
.as-menu {
  position: fixed;
  top: 120vh;
  left: 0;
  right: 0;
  font-family: 'Hiragino Sans', sans-serif;
  line-height: 1.5;
  z-index: 998;
  /* 閉じている間はキーボードで入れないよう見えなくする(上がりきってから・下がりきってから切り替える) */
  visibility: hidden;
  transition: top .6s cubic-bezier(.76, 0, .24, 1), visibility 0s .6s;
}
.as-menu.active { top: 0; visibility: visible; transition: top .6s cubic-bezier(.76, 0, .24, 1); }
.as-menu::after { content: ''; position: absolute; background: #fff; left: 0; right: 0; top: 0; height: 80px; z-index: 999; }
.as-menu a { color: #000; text-decoration: none; }
.as-menu-inner {
  position: relative;
  min-height: 100vh;
  /* 項目が画面より長いときも中でスクロールできるように高さを決める */
  height: 100vh;
  height: 100dvh;
  padding: 128px 48px 30px;
  background: #fff;
  z-index: 999;
  overflow-x: hidden;
  overflow-y: auto;
}
.as-menu-list { display: flex; flex-direction: column; align-items: flex-end; list-style: none; margin: 0; padding: 0; }
.as-menu-list li {
  font-size: 18px;
  font-family: 'Hiragino Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 1.8px;
}
/* AS は SNS の塊も同じリストの中にあるので、最後の項目にも下の余白が付く */
.as-menu-list li:not(:last-child), .as-menu-list.has-social li { margin-bottom: 16px; }
.as-menu-list a { position: relative; display: flex; align-items: center; gap: 8px; }
.as-menu-list a::after {
  content: '';
  position: absolute;
  width: 0;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 0;
  pointer-events: none;
  transition: width .4s;
}
.as-menu-list li:hover a::after { width: 100%; height: 2px; background: #999; }
.as-menu-list svg { width: 12px; height: 12px; }

.as-menu-social { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.as-menu-social p {
  margin: 0;
  color: #000;
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}
.as-menu-social .as-social { justify-content: flex-end; gap: 10px; }

.as-menu-links { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; list-style: none; margin: 0; padding: 32px 0 0; }
.as-menu-links li { display: flex; align-items: center; color: #000; font-size: 12px; font-weight: 300; }
.as-menu-links a { display: flex; align-items: center; }
.as-menu-links svg { width: 12px; height: 12px; margin-left: 8px; }
.as-menu-copyright { margin: 16px 0 0; color: #000; font-size: 12px; font-family: 'Hiragino Sans', sans-serif; font-weight: 300; text-align: right; }

.as-menu.active .as-menu-social { animation: as-fade .5s .8s ease both; }
.as-menu.active .as-menu-list li:nth-of-type(1) { animation: as-right-to-left .3s .8s both; }
.as-menu.active .as-menu-list li:nth-of-type(2) { animation: as-right-to-left .3s .85s both; }
.as-menu.active .as-menu-list li:nth-of-type(3) { animation: as-right-to-left .3s .9s both; }
.as-menu.active .as-menu-list li:nth-of-type(4) { animation: as-right-to-left .3s .95s both; }
.as-menu.active .as-menu-list li:nth-of-type(5) { animation: as-right-to-left .3s 1s both; }
.as-menu.active .as-menu-list li:nth-of-type(6) { animation: as-right-to-left .4s 1.05s both; }
.as-menu.active .as-menu-list li:nth-of-type(7) { animation: as-right-to-left .4s 1.1s both; }
.as-menu.active .as-menu-list li:nth-of-type(8) { animation: as-right-to-left .4s 1.15s both; }
.as-menu.active .as-menu-list li:nth-of-type(9) { animation: as-right-to-left .4s 1.2s both; }

/* SNS アイコン(メニュー・フッター共通の形) */
.as-social { display: flex; flex-wrap: wrap; }
.as-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: .4s;
  overflow: hidden;
}
.as-social img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---- 下層ページの見出し(AS の利用規約・プライバシーと同じ型。色は chakra の本文色) */
.as-title { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.as-title h1 {
  margin: 50px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #1a202c;
}

/* ---- バナー(Slide)と、バナーが無いときの余白。フッターと一緒に画面の下端へ */
.as-bottom { margin-top: auto; }
.as-spacer { height: 150px; }
.as-slide { position: relative; width: 100%; padding: 48px 0; overflow: hidden; line-height: 1.5; }
.as-slide-track { display: flex; gap: var(--gap, 20px); padding: 0 var(--offset, 120px); transition: transform .5s; }
.as-slide.center { display: flex; justify-content: center; width: fit-content; max-width: 100%; margin: auto; }
.as-slide.center .as-slide-track { gap: 20px; padding: 0; transition: none; }
.as-banner { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 460px; height: 210px; text-decoration: none; cursor: pointer; }
.as-banner picture, .as-banner img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.as-banner img { object-fit: cover; object-position: center; }
.as-banner-text { position: relative; text-align: center; color: #fff; font-weight: 800; }
.as-banner-title, .as-banner-desc { display: block; }
.as-banner-title { font-size: 11px; }
.as-banner-desc { font-size: 5px; }
@media (min-width: 960px) {
  .as-banner-title { font-size: 18px; }
  .as-banner-desc { font-size: 10px; }
}
.as-slide-prev, .as-slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  z-index: 9;
  cursor: pointer;
  user-select: none;
}
.as-slide-prev { left: 40px; }
.as-slide-next { right: 40px; }

/* ---- Footer */
.as-footer {
  position: relative;
  padding: 32px 24px;
  color: #fff;
  background: #656565;
  z-index: 9;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
}
.as-footer-top { display: flex; flex-direction: column; gap: 8px; width: fit-content; max-width: 100%; border-bottom: 2px solid #fff; padding-bottom: 8px; }
.as-footer-name {
  margin: 0;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 500;
  word-break: break-all;
  font-family: 'Hiragino Sans', sans-serif;
}
.as-footer .as-social { gap: 16px; }
.as-footer-links { display: flex; flex-direction: row; align-items: center; gap: 16px; list-style: none; margin: 32px 0 0; padding: 0; }
.as-footer-links li { display: flex; align-items: center; font-size: 12px; font-weight: 300; }
.as-footer-links a { color: #fff; font-weight: 300; font-family: 'Hiragino Sans', sans-serif; text-decoration: none; }
.as-footer-links svg { margin-left: 8px; }
.as-copyright { margin-top: 8px; color: #fff; font-size: 12px; font-weight: 300; font-family: 'Hiragino Sans', sans-serif; }

@media (max-width: 769px) {
  .as-nav a::after { bottom: -4px; }
  .as-menu-inner { padding: 96px 24px 159px; }
  .as-title h1 { margin-top: 44px; font-size: 20px; }
  .as-spacer { height: 80px; }
  .as-banner { width: 265px; height: 121px; }
  .as-slide-prev, .as-slide-next { width: 24px; height: 24px; }
  .as-slide-prev svg, .as-slide-next svg { width: 24px; height: 24px; }
  .as-slide-prev { left: 6px; }
  .as-slide-next { right: 6px; }
  .as-footer { padding: 40px 24px 32px; }
}
@media (max-width: 739px) {
  .as-footer-links { flex-direction: column; align-items: flex-start; margin-top: 16px; gap: 8px; }
}
@media (max-width: 576px) {
  .as-slide { padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .as-menu, .as-menu.active { transition: visibility 0s; }
  .as-menu.active .as-menu-social, .as-menu.active .as-menu-list li { animation: none; }
  .as-slide-track { transition: none; }
}