@charset "UTF-8";
/* 笊披武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶風
   笊�   GLOBAL (蝓ｺ譛ｬ縺ｮ蛻晄悄險ｭ螳�)             笊�
   笊壺武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶幅 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
        "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", "Hiragino Kaku Gothic ProN",
        "繝｡繧､繝ｪ繧ｪ", Meiryo, sans-serif;
    line-height: 1.7;
    background: #ffffff;
    color: #222;
}

/* 繝ｬ繧､繧｢繧ｦ繝域怙螟ｧ蟷�ｼ医せ繝槭�荳ｭ蠢��PC縺ｧ荳ｭ螟ｮ蟇�○�� */
.page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
}

/* 笊披武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶風
   笊�   HEADER                              笊�
   笊壺武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶幅 */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.site-title a {
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    text-transform: uppercase;
    color: #111;
}

.global-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
}

.global-nav a {
    text-decoration: none;
    font-size: 0.85rem;
    color: #666;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.global-nav a:hover {
    color: #000;
}

/* 笊披武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶風
   笊�   HERO�医ヨ繝��縺ｮ隕九○蝣ｴ��              笊�
   笊壺武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶幅 */

.hero {
    text-align: center;
    margin-bottom: 32px;
}

.hero-symbol {
    width: 220px;
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto 16px;
}

.hero-logo-wrap {
    margin-bottom: 8px;
}

.hero-logo {
    width: 200px;
    height: auto;
}

.hero-title {
    margin: 0 0 8px;
}

.hero-subtitle {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
}

/* PC蟷�↓縺ｪ縺｣縺溘→縺阪�蟆代＠繧ｵ繧､繧ｺUP */
@media (min-width: 768px) {
    .hero {
        margin-bottom: 40px;
    }

    .hero-symbol {
        width: 280px;
        margin-bottom: 20px;
    }

    .hero-logo {
        width: 240px;
    }
}

/* 笊披武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶風
   笊�   CONTENT�亥�騾壹さ繝ｳ繝�Φ繝��菴咏區��      笊�
   笊壺武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶幅 */

.content {
    padding: 24px 16px 40px;
}

.section {
    margin-bottom: 40px;
}

.section-title {
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-body p {
    margin: 0 0 0.8em;
}

/* 笊披武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶風
   笊�   CARDS�医Μ繝ｪ繝ｼ繧ｹ繝ｻ繝ｩ繧､繝悶�蝠�刀荳�隕ｧ��   笊�
   笊壺武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶幅 */

.card-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card {
    border: 1px solid #eee;
    padding: 12px 14px;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px;
}

.card-meta {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 6px;
}

.card-text {
    font-size: 0.9rem;
    margin: 0;
}

/* PC縺ｧ縺ｯ2繧ｫ繝ｩ繝 鬚ｨ繧０K */
@media (min-width: 768px) {
    .card-list--columns {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .card-list--columns .card {
        width: calc(50% - 8px);
    }
}

/* 笊披武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶風
   笊�   FOOTER                             笊�
   笊壺武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶武笊絶幅 */

.site-footer {
    border-top: 1px solid #f0f0f0;
    padding: 16px;
    text-align: center;
    font-size: 0.8rem;
    color: #999;
}

/* 逕ｻ蜒丞�騾� */
img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* 笏�笏�笏� hero 蠕ｮ隱ｿ謨ｴ 笏�笏�笏� */

.hero-symbol {
    margin-bottom: 12px;
}

.hero-logo-wrap {
    margin-bottom: 12px;
}

.hero-subtitle {
    margin-top: -4px;
}

/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蟷�ｪｿ謨ｴ�医せ繝槭�陦ｨ遉ｺ逕ｨ�� */
.section {
    margin-bottom: 32px;
}

/* PC 縺ｧ縺ｯ Hero 繧貞ｮ悟�荳ｭ螟ｮ驟咲ｽｮ縺ｫ縺吶ｋ */
@media (min-width: 768px) {
    .hero {
        max-width: 760px;
        margin: 0 auto 80px;  /* 荳贋ｸ九�菴咏區縺ｯ縺雁･ｽ縺ｿ縺ｧ */
        text-align: center;
    }

    .hero-logo,
    .hero-symbol {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-subtitle {
        text-align: center;
    }
}

/* 繝倥ャ繝�繝ｼ繝ｭ繧ｴ��VG�� */
.header-logo {
    height: 26px;   /* 蟆上＆縺吶℃縺壼､ｧ縺阪☆縺弱★縲∵怙繧らｾ弱＠縺�リ繝薙し繧､繧ｺ */
    width: auto;
    display: block;
}

.profile-en {
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.profile-ja {
  font-size: 14px;
  line-height: 1.9;
}
/* Releases */
.release-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.release-item {
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.release-title {
  font-size: 16px;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.release-meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #999;
  margin-bottom: 0.3rem;
}

.release-note {
  font-size: 13px;
  line-height: 1.8;
}

/* Live */
.live-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.live-item {
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.live-date {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #666;
  text-transform: uppercase;
}

.live-place {
  font-size: 14px;
  margin: 0.2rem 0;
}

.live-note,
.live-note-small {
  font-size: 13px;
  line-height: 1.8;
}

.live-note-small {
  color: #888;
  margin-top: 0.5rem;
}

.section {
  max-width: 760px;
  margin: auto;
}

.release-item {
  padding-bottom: 1.5rem;
}

.site-footer {
  padding: 2rem 0 3rem;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.site-footer .footer-name {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.site-footer .footer-links a {
  text-decoration: none;
  color: #666;
  letter-spacing: 0.05em;
}

.site-footer .footer-links a:hover {
  text-decoration: underline;
}

<footer class="site-footer">
  <p class="footer-name">ﾂｩ eyeKAKU</p>
  <p class="footer-links">
    <a href="https://www.instagram.com/kakugyo_ishiyama/" target="_blank" rel="noopener">Instagram</a>
    /
    <a href="https://www.tunecore.co.jp/artists/Kakugyo" target="_blank" rel="noopener">Tunecore</a>
  </p>
</footer>

/* ========== NAVIGATION ========== */
.site-nav {
  text-align: right;         /* 蜿ｳ蟇�○ */
  padding: 16px 40px 0;      /* 荳翫→蜿ｳ縺ｫ蟆代＠菴咏區 */
  font-size: 13px;
  letter-spacing: 0.15em;    /* 繝翫ン縺｣縺ｽ縺�ヤ繝｡ */
}

.site-nav a {
  color: #111;               /* 鮟偵↓縺吶ｋ */
  text-decoration: none;     /* 荳狗ｷ壹ｒ豸医☆ */
  margin-left: 24px;         /* 繝｡繝九Η繝ｼ蜷悟｣ｫ縺ｮ髢馴囈 */
}

.site-nav a:hover {
  opacity: 0.6;              /* 繝帙ヰ繝ｼ縺ｧ蟆代＠阮�￥ */
}

/* PROFILE visual image */
.profile-visual {
  width: 100%;
  max-width: 340px; /* 竊� 莉�360縲�380縺舌ｉ縺�↑縺ｮ縺ｧ蟆代＠荳九£繧� */
  display: block;
  margin: 0 auto 0.5rem auto;
  border-radius: 6px;
}

/* Illustration credit */
.illust-credit {
  text-align: center;
  font-size: 0.8rem;      /* 蟆上＆縺乗而縺医ａ */
  color: #555;            /* 阮�＞鮟� */
  margin-bottom: 2rem;    /* 縺薙�荳九↓繧ｹ繝壹�繧ｹ繧剃ｽ懊ｋ��ROFILE譁�∈�� */
  font-weight: 300;       /* 邏ｰ蟄� */
  letter-spacing: 0.5px;  /* 縺ｻ繧薙�蟆代＠荳雁刀縺ｫ */
}

/* LATEST RELEASES 窶� jacket layout */
.release-list {
  margin-top: 2.5rem;
}

.release-item {
  text-align: center;
  margin-bottom: 3rem;
}

.release-jacket {
  width: 100%;
  max-width: 320px;      /* 繧ｸ繝｣繧ｱ繝�ヨ縺ｮ譛�螟ｧ繧ｵ繧､繧ｺ */
  display: block;
  margin: 0 auto 1rem;   /* 荳ｭ螟ｮ蟇�○�倶ｸ九↓菴咏區 */
  border-radius: 4px;
}

.release-title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.release-meta {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #777;
}

.release-desc {
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

/* ===== Scroll fade-in for releases ===== */
.release-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}

/* 逕ｻ髱｢蜀�↓蜈･縺｣縺溘ｉ驕ｩ逕ｨ縺輔ｌ繧九け繝ｩ繧ｹ */
.release-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 蜍輔″縺瑚協謇九↑莠ｺ蜷代¢��S縺ｮ險ｭ螳壼ｰ企㍾�� */
@media (prefers-reduced-motion: reduce) {
  .release-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Streaming players under releases */
.release-players {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;         /* Spotify 縺ｨ Apple Music 縺ｮ髢馴囈 */
  align-items: center;
}

.release-players iframe {
  width: 100%;
  max-width: 360px;     /* 繝励Ξ繧､繝､繝ｼ縺ｮ譛�螟ｧ蟷�ｼ亥･ｽ縺ｿ縺ｧ隱ｿ謨ｴOK�� */
}

/* 繝ｼ繝ｼ繝ｼ繝ｼ繝ｼ Releases: 繝励Ξ繧､繝､繝ｼ縺ｾ繧上ｊ 繝ｼ繝ｼ繝ｼ繝ｼ繝ｼ */

/* 縲交沁ｧ Listen on縲阪Α繝玖ｦ句�縺� */
.release-listen-label {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
}

/* 髢矩哩繝懊ち繝ｳ */
.release-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  border: 1px solid #333;
  background: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.1s ease;
  margin-bottom: 1rem;
}

.release-toggle:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: translateY(-1px);
}

.release-toggle.is-open {
  background: #111;
  color: #fff;
}

/* 繝励Ξ繧､繝､繝ｼ譛ｬ菴難ｼ壽怙蛻昴�髢峨§縺ｦ縺翫￥ */
.release-players {
  display: none;           /* 繧｢繧ｳ繝ｼ繝�ぅ繧ｪ繝ｳ逕ｨ */
  margin-top: 0.5rem;
}

/* 髢九＞縺溘→縺阪↓陦ｨ遉ｺ */
.release-players.is-open {
  display: block;
}

/* Spotify / Apple iframe 縺ｮ髢薙�菴咏區 */
.release-players iframe {
  display: block;
  width: 100%;
  margin: 0 0 1.5rem;      /* 竊� 繧ｳ繧ｳ縺ｧ窶憺俣縺ｮ菴咏區窶昴ｒ隱ｿ謨ｴ */
}

/* 譛�蠕後� iframe 縺ｮ荳倶ｽ咏區縺 縺大ｰ代＠蟆上＆縺� */
.release-players iframe:last-of-type {
  margin-bottom: 0.5rem;
}

/* 繝ｼ繝ｼ繝ｼ繝ｼ繝ｼ 繧ｹ繝槭�逕ｨ隱ｿ謨ｴ 繝ｼ繝ｼ繝ｼ繝ｼ繝ｼ */
@media (max-width: 768px) {
  /* 繧ｹ繝槭�縺ｧ縺ｯ繝励Ξ繧､繝､繝ｼ縺ｮ鬮倥＆繧貞ｰ代＠菴弱ａ縺ｫ */
  .release-players iframe[src*="open.spotify.com"] {
    height: 232px;        /* 蜈�: 352px */
  }

  .release-players iframe[src*="music.apple.com"] {
    height: 320px;        /* 蜈�: 450px */
  }

  .release-toggle {
    width: 100%;
    max-width: 320px;
  }

  .release-listen-label {
    text-align: center;
  }
}