@charset "UTF-8";

/* /instagram-links/（Instagram プロフィールのリンク集）専用 */

:root {
  --il-bg: #262626;
  --il-card-bg: #fff;
  --il-card-fg: #1a1a1a;
  --il-radius: 12px;
  --il-gap: 20px;
  /* 各ブロックの画像の縦横比。スライドは統一しないと高さが揃わない。
     単一バナーはデザインごとに縦横比が違うため auto（画像なり）を既定にする。
     揃えたい場合はここを 16 / 9 などに変えるだけでよい。 */
  --il-slide-ratio: 16 / 9;
  --il-banner-ratio: auto;
}

body.il-body {
  background: var(--il-bg);
  color: #fff;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
}

.il-wrap {
  max-width: 480px;
  margin-inline: auto;
  padding: 28px 16px 40px;
}

/* ---- ヘッダー：ロゴ＋区切り線 ---- */
.il-header {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.il-logo {
  display: block;
  width: 150px;
  margin-inline: auto;
}

.il-logo img {
  width: 100%;
  /* 濃色ロゴ（individual/top/logo.svg は fill #282828）を白に反転 */
  filter: brightness(0) invert(1);
}

/* ---- ブロック共通 ---- */
.il-block + .il-block {
  margin-top: var(--il-gap);
}

/* ---- スライドバナー ---- */
.il-block--slider {
  position: relative;
}

.il-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.il-slider::-webkit-scrollbar {
  display: none;
}

.il-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* 複数枚のときは次のスライドを少し見せる */
.is-multi .il-slide {
  flex-basis: 86%;
}

.il-slide a {
  display: block;
}

.il-slide img {
  width: 100%;
  aspect-ratio: var(--il-slide-ratio);
  object-fit: cover;
  border-radius: var(--il-radius);
}

/* 前へ/次へボタン（複数枚のときだけ出力される） */
.il-nav {
  /* reset.css の :where(button){all:unset} で content-box に戻るため明示する */
  box-sizing: border-box;
  position: absolute;
  /* ドット行（margin-top 12px + 8px）を除いた画像部分の垂直中央 */
  top: calc((100% - 20px) / 2);
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.il-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.il-nav svg {
  width: 8px;
  height: 12px;
}

.il-nav--prev {
  left: 8px;
}

.il-nav--next {
  right: 8px;
}

.il-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.il-dot {
  /* reset.css の :where(button){all:unset} で content-box に戻るため明示する */
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.il-dot.is-active {
  background: #fff;
}

/* ---- レッスン紹介 ---- */
.il-block--lessons {
  display: grid;
  gap: 12px;
}

.il-lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  background: var(--il-card-bg);
  color: var(--il-card-fg);
  border-radius: var(--il-radius);
  text-decoration: none;
}

.il-lesson__thumb {
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

.il-lesson__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.il-lesson__arrow {
  flex: 0 0 auto;
  width: 8px;
  height: 12px;
  color: #999;
}

/* ---- 単一バナー ---- */
.il-block--banner a {
  display: block;
}

.il-block--banner img {
  width: 100%;
  aspect-ratio: var(--il-banner-ratio);
  object-fit: cover;
  border-radius: var(--il-radius);
}

/* ---- フッター ---- */
.il-footer {
  margin-top: 40px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}