@charset 'utf-8'; /*文字コード指定*/
/* ページ本体は最初非表示 */
/* 全要素の基本設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

#page-wrapper {
  background: transparent;
  visibility: hidden;
}

/* ローディング画面 */
#loading-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #000000; /* ← 黒背景 */
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease;
}

#loading-screen svg {
  width: 120px;
  height: 120px;
  stroke: #ffffff;
  opacity: 0.95;
  animation: glowPulse 1.6s ease-in-out infinite;
}

#loading-screen .noscript-message {
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 1.6;
  padding: 0 20px;
}

  /* 白い光のグロー */
@keyframes glowPulse {
  0% {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 1))
            drop-shadow(0 0 28px rgba(255, 255, 255, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
  }
}

/* すべて読み込み完了後にページを表示 */
#page-wrapper.page-loaded {
  visibility: visible;
}

/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
	margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
	padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	border: 0; /*境界線指定*/
}

html {
    height: 100vh;
    height: 100dvh;
    overflow: visible;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: linear-gradient(135deg,
        #f0dde5 0%,
        #d4a8bb 50%,
        #a890a0 100%
    );
}

body {
    height: 100vh;
    height: 100dvh;
    background: transparent;
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 88%;
    line-height: 2;
}

    /* ガラス背景 */
.glass-bg {
  position: absolute;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  top: 0;
  bottom: unset; /* inset の bottom を上書き */
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.22) 40%,
    rgba(255, 255, 255, 0.06) 100%
  );

  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

ol, ul {
	list-style: none; /*リストマーカーの種類指定(noneはなし)*/
}
a {
	color: #333; /*文字色指定*/
}
a:hover {
	text-decoration: none; /*テキストの装飾指定(下線、上線など)*/
}


h1 {
	font-family: 'Zen Kurenaido';
	font-size: 2.9em;
	line-height: 40px; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
              font-weight: 400;
	text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
	padding: 10px; /*ボックス内側の余白*/
}
/*中央上の見出し*/

h2 {
	font-size: 2.5em;
	font-weight: normal; /*フォントの太さ指定*/
	font-family: 'Dancing Script', cursive; /*フォントの種類指定(左から優先順位)*/
	text-align: center; /*行の水平方向の揃え方*/
	margin-bottom: 14px;
}

/*メインの内容*/

article {
	width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
}
article li, p {
	font-size: 1.6em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
}

/*レスポンシブ設定*/

@media screen and (max-width: 768px) {
h3, p, ol, li, th, td, dl {
	font-size: 1.4em !important;
}
h1 {
	font-size: 2.4em;
	width: auto; /*幅指定*/
	padding: 0; /*ボックス内側の余白*/
}
}

/* ▼ タブバー共通 */
.tab-nav {
  position: fixed;
  z-index: 999;
  display: flex;
  gap: 12px;
}

/* ▼ PC：左側に縦1列 */
@media (min-width: 600px) {
  .tab-nav {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.07);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    padding: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    /* ▼ JS から入る値（説明文の最大幅） */
    --label-width: 0px;

    /* ▼ ホバーしていないときは最小サイズ */
    padding-right: 12px;

    /* ▼ アイコン間隔も縮小率に連動 */
    gap: clamp(4px, 2vh, 12px);
    transition: padding-right 0.25s ease;
  }

  /* ▼ ホバー時だけ説明文ぶん広がる */
  .tab-nav:hover {
    padding-right: calc(12px + var(--label-width));
  }

  .tab-button {
    position: relative;
    width: clamp(7px, 10vh, 56px);
    height: clamp(7px, 10vh, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* gap があるので不要 */
  }

  /* ▼ 説明文（背景なし） */
  .tab-button::after {
    content: attr(data-label);
    position: absolute;
    right: 0;
    transform: translateX(100%) translateY(-50%);
    background: none;
    padding-left: clamp(3px, 3vh, 12px);
    top: 50%;
    font-family: 'Dancing Script', cursive;
    font-size: clamp(7px, 5vh, 24px);
    color: #666;
    white-space: nowrap;
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.25s ease, color 0.25s ease;
  }

  /* ▼ ホバー時に説明文を表示 */
  .tab-nav:hover .tab-button::after {
    opacity: 1;
  }

/* ▼ アクティブ時の説明文の色（白） */
  .tab-button.active::after {
    color: #ffffff;
  }

/* ▼ アイコンの SVG サイズ */
  .tab-button svg {
    width: clamp(7px, 10vh, 56px);
    height: clamp(7px, 10vh, 56px);
  }
}

@media (max-width: 599px) {
  .tab-nav {
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: calc(100% - 40px);
    max-width: 400px;

    padding: 8px 16px;
    background: rgba(168, 144, 160, 0.70);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    z-index: 999;
  }

  .tab-button {
    flex: 1 1 auto;

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

    /* ▼ 横幅に応じて縮む*/
    width: clamp(20px, 12vw, 40px);
    height: clamp(20px, 12vw, 40px);
  }

  .tab-button::after {
    display: none;
  }

  .tab-button svg {
    width: clamp(20px, 12vw, 40px);
    height: clamp(20px, 12vw, 40px);
    filter:
      drop-shadow(0 0 2px rgba(168, 144, 160, 0.95));
    stroke: #666;
    transition: stroke 0.25s ease;
  }

  .tab-button.active svg {
    stroke: #ffffff;
  }
}

.tab-button {
  will-change: filter;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-button svg {
  stroke: #666; /* ← 非アクティブ時の色を明示 */
  transition: 0.25s ease;
}

/* ▼ アクティブ時に光る */
@media (hover: hover) {
  .tab-button:hover {

    filter:
      drop-shadow(0 0 10px rgba(255,255,255,0.8))      /* 中心の強い光 */
      drop-shadow(0 0 28px rgba(255,255,255,0.65))    /* 中間の広がり */
      drop-shadow(0 0 48px rgba(255,255,255,0.55))    /* 外側に大きく広がる光 */
      drop-shadow(0 0 72px rgba(255,255,255,0.35));  /* 最も外側の淡い光 */
  }

  .tab-button.active:hover {
    filter: none !important;
  }
}

.tab-button.active svg {
  stroke: #ffffff;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,0.9))
    drop-shadow(0 0 12px rgba(255,255,255,0.5));
}

/* ▼ PC：左側の縦タブ（アイコン縮小対応） */
@media (min-width: 600px) {
  .tab-button svg {
    width: clamp(7px, 10vh, 56px);
    height: clamp(7px, 10vh, 56px);
  }
}

.tab-content {
  will-change: transform;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

@media (min-width: 600px) {
  .tab-content {
    padding: 60px 20px 60px; /* 上:余白 下:タブバー分 */
    margin-left: 120px; /* ← tab-nav の幅ぶん右にずらす */
    width: calc(100% - 120px); /* ← 必要に応じて縮む */
  }
}

@media (max-width: 599px) {
  .tab-content {
    padding: 50px 20px 80px;
  }
}

.tab-content.active {
  opacity: 1;
  pointer-events: auto;
}

/* 中身を包むラッパー */
.tab-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: flex-start; /* 通常は上寄せ */
  font-family: 'Zen Kurenaido';
}

/* 短いスライドだけ中央寄せ */
.tab-content.center .tab-inner {
  justify-content: center;
}

.profile-card {
  padding: 32px;
  border-radius: 24px;
}

/* PCでは横並び */
.profile-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}

@media (max-width: 768px) {
  .profile-block {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .profile-text {
    margin-top: 30px;
  }
}

/* p の前に余白をつける */
.profile-desc {
  margin-top: 30px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .profile-desc {
    margin-top: 20px;
  }
}

.profile-photo {
  flex-shrink: 0; /* ← 画像が引き伸ばされるのを防ぐ */
}

.profile-photo img {
  width: 250px;
  height: auto;
  border-radius: 18px; /* ← 程よい角丸 */
  display: block;
}

/* スマホでは縦並び */
@media (max-width: 768px) {
  .profile-block {
    flex-direction: column;
    text-align: center;
  }

  .profile-photo img {
    width: 70%;
    margin: 0 auto;
  }
}

.white-card {
  background: rgba(255, 255, 255, 0.35); /* ← 半透明の白（ガラスのベース） */
  border-radius: 24px;        /* ← 大きな角丸（ガラス感に合う） */
  padding: 48px;
  max-width: 900px;
  margin: 0 auto 48px;
  border: 1px solid rgba(255, 255, 255, 0.55); /* ← ガラスの縁の光 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);    /* ← 下に落ちる柔らかい影 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
}

@media (max-width: 736px) {
  .white-card {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .white-card {
    padding: 18px;
  }
}

/* 文章 */
.white-card p {
  line-height: 1.7;
  margin-bottom: 6px;
}

.ds-center {
  font-family: 'Dancing Script', cursive;
  text-align: center;
  font-size: 1.5rem; /* お好みで調整 */
}

.scroll-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 12px;
  padding: 6px;
  cursor: pointer;
  transition: 0.25s ease;
}

.scroll-icon:hover {
  background: rgba(255,255,255,0.48);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15),
    0 0 8px rgba(255,255,255,0.45);
}

.scroll-icon svg {
  display: block;
  color: #333;
}

.my-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC：3列 */
  gap: 16px;
}

/* 写真（切らない・縦横比そのまま） */
.my-gallery img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

/* 2列に変更 */
@media (max-width: 980px) {
  .my-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pswp__img {
  padding-top: 60px !important; /* ← 上の黒帯ぶんだけ余白を確保 */
  object-fit: contain !important;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 12px;
  padding: 0.3rem 0.7rem;
  margin-top: 0.3rem;
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 1.2rem;
  font-weight: 400 !important;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
  cursor: pointer;
  transition: 0.25s ease;
}

.link-btn:hover {
  background: rgba(255,255,255,0.48);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15),
    0 0 8px rgba(255,255,255,0.45);
}

.link-btn__svg svg {
  display: block;
}

.soundcloud {
  color: #FF5500;
}

.youtube {
  color: #FF0000;
}

/* 白カード全体 */
.contact-card {
  max-width: 600px;
}

/* ラベル */
.contact-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 1.15rem;
  opacity: 0.8;
}

/* 入力欄 */
.contact-card input,
.contact-card select,
.contact-card textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  font-family: 'Zen Kurenaido', sans-serif;
  color: #333;
  font-size: 1.2rem;
  transition: 0.2s ease;
}

/* フォーカス時の光る感じ */
.contact-card input:focus,
.contact-card select:focus,
.contact-card textarea:focus {
  outline: none;
  border-color: #999;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

textarea {
  resize: none;
}

/* 送信ボタン */
.contact-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55); /* ガラスの縁の光 */
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.35);       /* ← 白ベースのガラス */
  color: #333;                                 /* ← 白背景上では黒文字が最適 */
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 1.1rem;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
  cursor: pointer;
  transition: 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);      /* 下に落ちる影は控えめに */
}

/* ホバー時：光がふわっと強くなる */
.contact-btn:hover {
  background: rgba(255, 255, 255, 0.48);        /* 少し明るく */
  box-shadow:
    0 6px 18px rgba(0,0,0,0.15),
    0 0 10px rgba(255,255,255,0.45);            /* ガラスの反射光 */
}

#thanks {
  display: none;
  position: fixed;
  inset: 0;
  overflow-y: auto; /* ← カードが大きいときはスクロール */
  padding: 40px 20px;
  z-index: 10;
}

/* 中央寄せ用クラス */
#thanks.center {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#thanks .tab-inner {
  display: block;
  min-height: auto;
  height: auto;
  justify-content: unset;
  align-items: unset;
}

/* PC レイアウト（tab-nav の幅ぶん右にずらす） */
@media (min-width: 600px) {
  #thanks {
    left: 120px;
    width: calc(100% - 120px);
  }
}

#copyright {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 12px 0;
  font-size: 1rem;
  opacity: 0.8;
  font-family: 'Zen Kurenaido', sans-serif;
  color: #fff;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#copyright.no-transition {
  transition: none;
}

@media (max-width: 599px) {
  #copyright {
    bottom: 70px;
  }
}

.is-zooming * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.is-zooming .tab-content {
  overflow: hidden !important;
}

.is-zooming svg {
  filter: none !important;
}

.is-zooming .tab-nav {
  display: none !important;
}

.is-zooming #copyright {
  display: none;
}