@charset "UTF-8";

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

* { box-sizing: border-box; }

p {
  margin: 0;
  font-family: "Zen Maru Gothic", "Marcellus", sans-serif;
  color: #2F2F2F;
}

.h2_top_about,
.h2_top_works {
  font-size: 3.2rem; /* 32px */
  letter-spacing: 0.04em;
}

.h2_contact {
  font-size: 6rem;
  text-align: center;
}

h3.h3_topPage{
  font-size: 2.4rem;
  text-align: left;
  margin: 10px 0 20px;
  opacity: 0.85;
}

@media (min-width: 1200px){
.h2_top_about,
.h2_top_works {
  font-size: 6rem; 
  font-weight: 400〜500;
  letter-spacing: 0.04em;
}
}

/* ========= FV ========= */

.fv-container { position: relative; overflow: hidden; } /* 念のため */

/* 外枠（位置・幅の管理だけ） */
.fv-marquee{
  position: absolute;
  top: 23vh;
  width: min(1200px, 100%);
  pointer-events: none;
}

/* 流れる文字 */
.fv_slider{
  display: inline-block;
  white-space: nowrap;
  opacity: 0.4;
  font-size: 8rem;

  font-family: "Zen Maru Gothic", sans-serif;

  /* ★ 縁だけ白・中は透明 */
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #fff;

  /* ★ 右 → 左に流す */
  animation: fvMarquee 26s linear infinite;
}

/* アニメーション */
@keyframes fvMarquee{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ========= FV流れるテキスト ここまで========= */

/* ========= FV 文字が1文字ずつ ========= */
  .fv-container{
    position: relative;
    width: 100%;
    height: 80vh;
  }
  
  h1.fv-text{
    position: absolute;
    top: 40vh;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 4rem;
  }
  
  /* 文字が1文字ずつ出る */
  .fv-text span{
    opacity: 0;
    display: inline-block;
    animation: fadeChar 1s forwards;
  }
  
  .fv-text span:nth-child(1)  { animation-delay: .6s; }
  .fv-text span:nth-child(2)  { animation-delay: .67s; }
  .fv-text span:nth-child(3)  { animation-delay: .74s; }
  .fv-text span:nth-child(4)  { animation-delay: .81s; }
  .fv-text span:nth-child(5)  { animation-delay: .88s; }
  .fv-text span:nth-child(6)  { animation-delay: .95s; }
  .fv-text span:nth-child(7)  { animation-delay: 1.05s; }
  .fv-text span:nth-child(8)  { animation-delay: 1.12s; }
  .fv-text span:nth-child(9)  { animation-delay: 1.19s; }
  .fv-text span:nth-child(10) { animation-delay: 1.26s; }
  .fv-text span:nth-child(11) { animation-delay: 1.33s; }
  .fv-text span:nth-child(12) { animation-delay: 1.40s; }
  .fv-text span:nth-child(13) { animation-delay: 1.47s; }
  .fv-text span:nth-child(14) { animation-delay: 1.54s; }
  .fv-text span:nth-child(15) { animation-delay: 1.61s; }
  
  @keyframes fadeChar{
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
  }


/* ========= FV 文字が1文字ずつ ========= */
@media (min-width: 1200px){
.fv-container{
  position: relative;
  width: 100%;
  height: 100vh;
}

h1.fv-text{
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 6rem;
}

/* 文字が1文字ずつ出る */
.fv-text span{
  opacity: 0;
  display: inline-block;
  animation: fadeChar 1s forwards;
}

.fv-text span:nth-child(1)  { animation-delay: .6s; }
.fv-text span:nth-child(2)  { animation-delay: .67s; }
.fv-text span:nth-child(3)  { animation-delay: .74s; }
.fv-text span:nth-child(4)  { animation-delay: .81s; }
.fv-text span:nth-child(5)  { animation-delay: .88s; }
.fv-text span:nth-child(6)  { animation-delay: .95s; }
.fv-text span:nth-child(7)  { animation-delay: 1.05s; }
.fv-text span:nth-child(8)  { animation-delay: 1.12s; }
.fv-text span:nth-child(9)  { animation-delay: 1.19s; }
.fv-text span:nth-child(10) { animation-delay: 1.26s; }
.fv-text span:nth-child(11) { animation-delay: 1.33s; }
.fv-text span:nth-child(12) { animation-delay: 1.40s; }
.fv-text span:nth-child(13) { animation-delay: 1.47s; }
.fv-text span:nth-child(14) { animation-delay: 1.54s; }
.fv-text span:nth-child(15) { animation-delay: 1.61s; }

@keyframes fadeChar{
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
}



/* ========= FV流れるテキスト Works（PCで固定演出）========= */

@media (min-width: 1200px){
.fv-container { position: relative; overflow: hidden; } /* 念のため */

/* 外枠（位置・幅の管理だけ） */
.fv-marquee{
  position: absolute;
  top: 23vh;
  width: min(1200px, 100%);
  pointer-events: none;
}

/* 流れる文字 */
.fv_slider{
  display: inline-block;
  white-space: nowrap;
  opacity: 0.4;
  font-size: 16rem;

  font-family: "Zen Maru Gothic", sans-serif;

  /* ★ 縁だけ白・中は透明 */
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px #fff;

  /* ★ 右 → 左に流す */
  animation: fvMarquee 26s linear infinite;
}

/* アニメーション */
@keyframes fvMarquee{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
}

/* ========= FV流れるテキスト ここまで========= */
@media (min-width: 1200px){
.fv_text {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 8rem;
}
}

/* =========================
   FV Cloud Animation
   待機 → 登場 → ぷかぷか → 退場
   ========================= */

/* 共通（初期は非表示） */
.fv-cloud{
  position: absolute;
  top: 58vh;
  width: 48%;
  z-index: 5;

  opacity: 0;                 /* 初期は見えない */
  transform: translateY(20px);/* ちょい下げておく */

  transition:
    left 1.5s ease,
    right 1.5s ease,
    opacity 1.2s ease,
    transform 1s ease;
}

/* メニューは常に上 */
.site-header{ z-index: 1000; }
.nav__header{ z-index: 1200; }
.openbtn{ position: relative; z-index: 1300; }

/* 待機位置（画面の外側寄り） */
.cloud-left{
  left: -20%;
  right: auto;
}
.cloud-right{
  right: -20%;
  left: auto;
}

/* 登場（左右から入ってくる） */
.cloud-start-left{
  left: 5% !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.cloud-start-right{
  right: 5% !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 退場（左右に広がって消える） */
.cloud-hide-left{
  left: -40% !important;
  opacity: 0 !important;
  transform: translateY(0) !important;
}
.cloud-hide-right{
  right: -40% !important;
  opacity: 0 !important;
  transform: translateY(0) !important;
}

/* ぷかぷか（登場中だけ） */
@keyframes cloudFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.cloud-start-left,
.cloud-start-right{
  animation: cloudFloat 4s ease-in-out infinite;
}


/* ========= PCビュー (min-width: 1200px) のみの上書き修正 ========= */

/* 雲 */
@media (min-width: 1200px){
  /* --- 雲の初期設定（SP/PC共通設定） --- */
  .fv-cloud {
    position: absolute; 
    top: 55vh;
    width: 40%; /* SPの幅 */
    
    /* ... (以下、全部削除) ... */
    animation: cloudFloat 4s ease-in-out infinite;
  }
  }



/* ▼ 下向き・中塗り三角形 */
.sparkle{
  width: 0;
  height: 0;

  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 26px solid rgba(255,255,255,.35);

  filter: blur(.2px);
  /* opacity: .9; */
}

/* ズラし用（偶数列） */
.sparkle:nth-child(even){
  transform: translateY(30px);
}

/* scroll文字 */
.sparkle-txt{
  position: absolute;
  margin-top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .3em;
  color: rgba(255,255,255,.6);
}
  
  /* 縦に順番に */
  /* 1列目（上→下） */
  .sparkle:nth-child(1){
    animation-delay: 0s;
  }
  
  /* 2列目  */
  .sparkle:nth-child(4){
    animation-delay: .4s;
  }
  
  /* 3列目  */
  .sparkle:nth-child(7){
    animation-delay: .8s;
  }
  /* 縦に順番に ここまで*/
  
  /* フワッと出て消える */
  @keyframes sparkleBlink{
    0%{
      opacity: 0;
      transform: scale(0.6);
    }
    40%{
      opacity: 1;
      transform: scale(1);
    }
    70%{
      opacity: .6;
    }
    100%{
      opacity: 0;
      transform: scale(0.6);
    }
  }
  /* フワッと出て消える　ここまで */
  
  /* 儚く */
  .sparkle::before,
  .sparkle::after{
    border: 1px solid rgba(255,255,255,0.6);
  }
  



/* ========= FV ここまで ========= */


/* ===== scroll indicator SP===== */
.sparkle-grid{
  position: absolute;
  left: 50%;
  top: 95px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;

  /* 縦並び */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

/* ▼ 下向き三角（大きめ） */
.sparkle{
  width: 0;
  height: 0;

  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 18px solid rgba(255,255,255,.9);

  opacity: .2;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.15));

  animation: scrollBlink 1.4s ease-in-out infinite;
}

/* 順番に点滅 */
.sparkle:nth-of-type(1){ animation-delay: 0s; }
.sparkle:nth-of-type(2){ animation-delay: .2s; }
.sparkle:nth-of-type(3){ animation-delay: .4s; }

/* scroll テキスト（大きめ） */
.sparkle-txt{
  margin-top: 140px;
  font-size: 17px;        
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

/* 点滅アニメーション */
@keyframes scrollBlink{
  0%, 100%{
    opacity: .2;
    transform: translateY(0);
  }
  50%{
    opacity: 1;
    transform: translateY(3px);
  }
}


/* ===== scroll indicator  PC===== */
@media (min-width: 1200px){
.sparkle-grid{
  position: absolute;
  left: 50%;
  top: 95px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;

  /* 縦並び */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

/* ▼ 下向き三角（大きめ） */
.sparkle{
  width: 0;
  height: 0;

  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 18px solid rgba(255,255,255,.9);

  opacity: .2;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.15));

  animation: scrollBlink 1.4s ease-in-out infinite;
}

/* 順番に点滅 */
.sparkle:nth-of-type(1){ animation-delay: 0s; }
.sparkle:nth-of-type(2){ animation-delay: .2s; }
.sparkle:nth-of-type(3){ animation-delay: .4s; }

/* scroll テキスト（大きめ） */
.sparkle-txt{
  margin-top: 140px;
  font-size: 17px;        
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

/* 点滅アニメーション */
@keyframes scrollBlink{
  0%, 100%{
    opacity: .2;
    transform: translateY(0);
  }
  50%{
    opacity: 1;
    transform: translateY(3px);
  }
}}




/* ========= About ========= */
/* .aboutSectionTop{
  max-width: 360px;
  width: auto;
  margin:  0 auto 0;
  position: relative; 
  overflow: hidden;   
  padding: 0 2% 130px;
} */

.h2_wap{
  margin: 60px 0 9px;

}

.aboutDetail{
  text-align: center;
  margin-bottom: 150px;
}

.message_wap {
  text-align: left;
  /* padding: 0 2%; */
}

.name{
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-weight: 700;
}

.small{ font-size: 1.4rem; }

/* 写真エリア（親）に relative が必要（なければ付けて） */
.photo-wap{
  position: relative;
  display: inline-block;
  overflow: visible;
  margin-top: 35px;
}


/* 目立つ丸ボタン */
.photo-fab{
  position: absolute;
  left: 50%;
  bottom: -28px;                 /* 写真から少しはみ出す */
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.18),
    0 0 0 8px rgba(255,255,255,0.22);

  text-decoration: none;
  cursor: pointer;
  z-index: 5;

  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

/* ＋の見た目 */
.photo-fab__icon{
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  color: rgba(0,0,0,0.75);
  transition: transform .22s ease, color .22s ease;
}

/* ホバーで浮く＋光る＋回転 */
.photo-fab:hover{
  transform: translateX(-50%) translateY(-4px);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.22),
    0 0 0 10px rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.92);
}

.photo-fab:hover .photo-fab__icon{
  transform: rotate(90deg);
}

/* クリックで少し沈む */
.photo-fab:active{
  transform: translateX(-50%) translateY(-1px) scale(0.98);
}

/* キーボード操作の見た目 */
.photo-fab:focus-visible{
  outline: none;
  box-shadow:
    0 22px 55px rgba(0,0,0,0.22),
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 0 8px rgba(0,0,0,0.25);
}

/* ========= 宇宙 ========= */

/* 宇宙演出レイヤー（About内だけ） */
.planet--area{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* テキスト・写真は前面 */
.h2_wap,
.aboutDetail{
  position: relative;
  z-index: 1;
}

/* 惑星本体 */
.planet{
  position: absolute;
  top: 400px;
  left: 0;

  width: clamp(280px, 27vw, 760px);
  height: auto;
  pointer-events: none;

  transform: translate(110vw, -25vh) scale(0.7);
  opacity: 0;

  /* ★ここを書き換える */
  animation: planetFloat 11s cubic-bezier(.4,0,.2,1) infinite;

  will-change: transform, opacity;
  animation: planetFloat 14s cubic-bezier(.22,1,.36,1) infinite;
  animation: planetFallback 7s ease-in-out infinite;
}

@keyframes planetFallback{
  0%   { transform: translate(80vw,-10vh) scale(.75); opacity: 0; }
  10%  { opacity: 1; }
  40%  { transform: translate(70vw,25vh) scale(1.15); }
  70%  { transform: translate(20vw,55vh) scale(.75); }
  100% { transform: translate(70vw,85vh) scale(.55); opacity: .95; }
}

/* アニメーション */
@keyframes planetFloat{
  /* 右上からふんわり出現 */
  0%{
    transform: translate(110vw, -25vh) scale(0.7) rotate(-6deg);
    opacity: 0;
    filter: blur(2px);
  }

  12%{
    opacity: 1;
    filter: blur(0);
  }

  /* 中央を通過（少し大きく） */
  50%{
    transform: translate(52vw, 32vh) scale(1.05) rotate(2deg);
    opacity: 1;
  }

  /* 左へ流れながら消える */
  100%{
    transform: translate(-35vw, 42vh) scale(0.85) rotate(8deg);
    opacity: 0;
    filter: blur(2px);
  }

}

/* ========= 宇宙 ここまで========= */


/* ========= About  SP ========= */

#about{
  --diamond: rgba(255,255,255,.75);

  position: relative;
  overflow: hidden;
  isolation: isolate;

  padding: clamp(300px, 24vw, 316px) 16px;
  /* max-width: 1280px; */
  margin: 0 auto;

  background-color: var(--bg-base);

  /* ===== 大きめ菱形 ===== */
  background-image:
    linear-gradient(45deg,
      transparent 48%,
      var(--diamond) 48%,
      var(--diamond) 49%,
      transparent 14%
    ),
    linear-gradient(-45deg,
      transparent 48%,
      var(--diamond) 48%,
      var(--diamond) 49%,
      transparent 14%
    );

  /* 菱形のサイズ（←ここが重要） */
  background-size: 64px 64px;
  background-position: center;
}


#about .about__inner{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  min-height: min(560px, 80vw);
}

/* ===== ガラスカード（画像の四角） ===== */
#about .aboutCard{
  position: relative;
  width: min(760px, 92vw);
  aspect-ratio: 1.35 / 1; /* 画像の比率っぽく */
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;

  background: var(--card-bg);
  border: 2px solid rgba(170,190,205,.55);
  box-shadow:
    0 50px 90px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

/* 内側の薄い枠 */
#about .aboutCard::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.35);
  pointer-events:none;
}

/* ===== タイポ ===== */
#about .aboutCard__title{
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-size: 4rem;
  letter-spacing: .04em;
  margin: 0 0 110px;
  color: rgba(90,90,100,.9);
}

#about .aboutCard__name{
  margin: 225px 0 4px;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: .02em;
}

#about .aboutCard__role{
  margin: 0 0 18px;
  font-size: 1.5rem;
  color: var(--text-sub);
  letter-spacing: .10em;
}

#about .aboutCard__text{
  margin-top: 30px;
  max-width: 60ch;
  font-size: 1.8rem;
  line-height: 2;
  color: rgba(60,60,70,.85);
}

/* ===== CTA（中央の＋）必要 ===== */
#about .aboutCard__cta{
  margin-top: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.35);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
  transition: transform .18s ease, background .18s ease;
} 
#about .aboutCard__cta:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.45);
}

#about .aboutCard__plus{
  position: relative;
  width: 14px;
  height: 14px;
}

#about .aboutCard__plus::before,
#about .aboutCard__plus::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: rgba(70,70,80,.7);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

#about .aboutCard__plus::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ===== about装飾 ===== */
#about .deco{
  position: absolute;
  pointer-events:none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
}

/* ===== 装飾（画像のみ表示） ===== */
#about .deco{
  position: absolute;
  pointer-events: none;
  left: -20%;
  top: clamp(20px, 3vw, 34px);
  width: 250px;
  height: clamp(280px, 14vw, 160px);
  transform: rotate(-14deg);

  /* 背景・枠は完全に削除 */
  background: none;
  border: none;
  border-radius: 0;

  /* 画像にだけ影を落とす */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));

  display: block;
}



/* 実画像 */
#about .deco--sticker img.soushoku{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 切り抜きPNG想定 */
  display: block;
}

#about .deco--ring img{
  width: 100%;
  height: auto;
  display: block;
}


/* 右側のリング */
#about .deco.deco--ring{
 display: none;}


/* 下の宝石 */
#about .deco.deco--gem{
  left: 10%;
  top: 970px;
  width: 100px;
  height: 100px;
  transform: rotate(-10deg);
}


/* ========= About  PC ========= */


/* About（PCレイアウト） */
@media (min-width: 1200px){

  .name{
    margin-bottom: 10px;
    font-size: 2.6rem;
    text-align: left;
    font-weight: 700;
    
  }
  .small {
    font-size: 1.8rem;
    margin-left: 13px;
  }
    .aboutDetail{
      display: flex;
      gap: 155px;
      justify-content: center;
      margin-bottom: 600px;
    }
  
    .message{
        font-size: 2.3rem;   /* 今より少し大きく */
        line-height: 2;      /* 行間ゆったり */
        max-width: 580px;    /* 横幅制限 */
      }
    }
  
    
  
    .myPhoto{
      margin-bottom: 0;
    }
  
  
  
  .photo-fab{
    animation: fabFloat 2.8s ease-in-out infinite;
  }
  @keyframes fabFloat{
    0%,100%{ transform: translateX(-50%) translateY(0); }
    50%    { transform: translateX(-50%) translateY(-3px); }
  }
  
  
  

  

@media (min-width: 1200px){
#about{
  --diamond: rgba(255,255,255,.75);

  position: relative;
  overflow: hidden;
  isolation: isolate;

  padding: clamp(118px, 24vw, 316px) 16px;
  max-width: 1280px;
  margin: 0 auto;

  background-color: var(--bg-base);

  /* ===== 大きめ菱形 ===== */
  background-image:
    linear-gradient(45deg,
      transparent 48%,
      var(--diamond) 48%,
      var(--diamond) 49%,
      transparent 14%
    ),
    linear-gradient(-45deg,
      transparent 48%,
      var(--diamond) 48%,
      var(--diamond) 49%,
      transparent 14%
    );

  /* 菱形のサイズ（←ここが重要） */
  background-size: 64px 64px;
  background-position: center;
}


#about .about__inner{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  min-height: min(560px, 80vw);
}

/* ===== ガラスカード（画像の四角） ===== */
#about .aboutCard{
  position: relative;
  width: min(760px, 92vw);
  aspect-ratio: 1.35 / 1; /* 画像の比率っぽく */
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;

  background: var(--card-bg);
  border: 2px solid rgba(170,190,205,.55);
  box-shadow:
    0 50px 90px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

/* 内側の薄い枠 */
#about .aboutCard::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.35);
  pointer-events:none;
}

/* ===== タイポ ===== */
#about .aboutCard__title{
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-size: 4rem;
  letter-spacing: .04em;
  margin: 0 0 110px;
  color: rgba(90,90,100,.9);
}

#about .aboutCard__name{
  margin: 190px 0 4px;
  font-size: 5rem;
  font-weight: 600;
  letter-spacing: .02em;
}

#about .aboutCard__role{
  margin: 0 0 18px;
  font-size: 1.5rem;
  color: var(--text-sub);
  letter-spacing: .10em;
}

#about .aboutCard__text{
  margin-top: 30px;
  max-width: 60ch;
  font-size: 1.8rem;
  line-height: 2;
  color: rgba(60,60,70,.85);
}

/* ===== CTA（中央の＋）必要 ===== */
#about .aboutCard__cta{
  margin-top: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.35);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
  transition: transform .18s ease, background .18s ease;
} 
#about .aboutCard__cta:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.45);
}

#about .aboutCard__plus{
  position: relative;
  width: 14px;
  height: 14px;
}

#about .aboutCard__plus::before,
#about .aboutCard__plus::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: rgba(70,70,80,.7);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

#about .aboutCard__plus::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ===== about装飾 ===== */
#about .deco{
  position: absolute;
  pointer-events:none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
}

/* ===== 装飾（画像のみ表示） ===== */
#about .deco{
  position: absolute;
  pointer-events: none;
  left: -20%;
  top: clamp(20px, 3vw, 34px);
  width: 250px;
  height: clamp(280px, 14vw, 160px);
  transform: rotate(-14deg);

  /* 背景・枠は完全に削除 */
  background: none;
  border: none;
  border-radius: 0;

  /* 画像にだけ影を落とす */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));

  display: block;
}

/* 画像ラッパー（装飾なし） */
#about .deco--sticker .deco__img{
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  border-radius: 0;
  display: block;
}

/* 実画像 */
#about .deco--sticker img.soushoku{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 切り抜きPNG想定 */
  display: block;
}

#about .deco--ring img{
  width: 100%;
  height: auto;
  display: block;
}


/* 右側のリング */
#about .deco.deco--ring{
  display: block;
  top: 396px;
  right: auto !important;
  bottom: clamp(140px, 12vw, 220px) !important;

  width: 209px;
  height: auto !important;

  transform: rotate(-18deg) !important; /* 好みで */
  transform-origin: 50% 50%;}


/* 下の宝石 */
#about .deco.deco--gem{
  left: clamp(160px, 20vw, 260px);
  top: 900px;
  width: 100px;
  height: 100px;
  transform: rotate(-10deg);
}
}




/* 右下の写真枠（影なし） */
#about .photoFrame{
  position: absolute;
  /* right: -130px; */
  top: 78px;
  width: 290px;
  height: clamp(108px, 14vw, 156px);

  /* 影は外す */
  box-shadow: none;
  /* display: grid;
  place-items: center; */
}

/* 画像だけに影 */
#about .photoFrame img.soushoku{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* 画像の形に沿って影が出る */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.18));
}


/* ===== Responsive ===== */
@media (max-width: 540px){
  #about .aboutCard{
    width: 94vw;
    aspect-ratio: auto;
    padding: 28px 20px;
  }
  #about .deco--gem{ display:none; }
  #about .deco--ring2{ display:none; }
  #about .photoFrame{
    right: 14px;
    bottom: 14px;
    transform: rotate(2deg);
  }
}


/* 共通（最小） */
#about .deco{
  position: absolute;
  pointer-events: none;
  display: block;
}




/* ===== 右上くるくる ===== */
#about .deco--ring2{
  left: 84%; 
  top: 300px;
  width: 183px;
  height: auto !important;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
  /* animation: ringSpin 18s linear infinite; */
}

#about .deco--ring img{
  width: 100%;
  height: auto;
  display: block;
}

@keyframes ringSpin{
  to { transform: rotate(360deg); }
}




/* ボタン全体ラッパー */
.btn_wap{
  margin-top: 55px;

  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center;    /* 横中央 */
  justify-content: center;

  text-align: center;
  gap: 5px; /* テキストと＋の間 */
}

/* テキスト */
.btn_txt{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(80,80,90,.7);
}

/* ＋ボタン（既存を活かす） */
.aboutCard__cta{
  display: grid;
  place-items: center;
}

/* ========= 宇宙 ========= */

/* 宇宙演出レイヤー（About内だけ） */
.planet--area{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* テキスト・写真は前面 */
.h2_wap,
.aboutDetail{
  position: relative;
  z-index: 1;
}

/* 惑星本体 */
.planet{
  position: absolute;
  top: 400px;
  left: 0;

  width: clamp(280px, 27vw, 760px);
  height: auto;
  pointer-events: none;

  transform: translate(110vw, -25vh) scale(0.7);
  opacity: 0;

  /* ★ここを書き換える */
  animation: planetFloat 11s cubic-bezier(.4,0,.2,1) infinite;

  will-change: transform, opacity;
  animation: planetFloat 14s cubic-bezier(.22,1,.36,1) infinite;
  animation: planetFallback 7s ease-in-out infinite;
}

@keyframes planetFallback{
  0%   { transform: translate(80vw,-10vh) scale(.75); opacity: 0; }
  10%  { opacity: 1; }
  40%  { transform: translate(70vw,25vh) scale(1.15); }
  70%  { transform: translate(20vw,55vh) scale(.75); }
  100% { transform: translate(70vw,85vh) scale(.55); opacity: .95; }
}

/* アニメーション */
@keyframes planetFloat{
  /* 右上からふんわり出現 */
  0%{
    transform: translate(110vw, -25vh) scale(0.7) rotate(-6deg);
    opacity: 0;
    filter: blur(2px);
  }

  12%{
    opacity: 1;
    filter: blur(0);
  }

  /* 中央を通過（少し大きく） */
  50%{
    transform: translate(52vw, 32vh) scale(1.05) rotate(2deg);
    opacity: 1;
  }

  /* 左へ流れながら消える */
  100%{
    transform: translate(-35vw, 42vh) scale(0.85) rotate(8deg);
    opacity: 0;
    filter: blur(2px);
  }

}


/* ========= 宇宙 ここまで========= */

/* About（PCレイアウト） */
@media (min-width: 1200px){

  .name{
    margin-bottom: 10px;
    font-size: 2.6rem;
    text-align: left;
    font-weight: 700;
    
  }
  .small {
    font-size: 1.8rem;
    margin-left: 13px;
  }
    .aboutDetail{
      display: flex;
      gap: 155px;
      justify-content: center;
      margin-bottom: 600px;
    }
  
    .message{
        font-size: 2.3rem;   /* 今より少し大きく */
        line-height: 2;      /* 行間ゆったり */
        max-width: 580px;    /* 横幅制限 */
      }
    }
  
    
  
    .myPhoto{
      margin-bottom: 0;
    }
  
  
  
  .photo-fab{
    animation: fabFloat 2.8s ease-in-out infinite;
  }
  @keyframes fabFloat{
    0%,100%{ transform: translateX(-50%) translateY(0); }
    50%    { transform: translateX(-50%) translateY(-3px); }
  }
  









  /* =========================
   Works（Base / Mobile First）
   ========================= */

/* セクション全体 */
.H2_worksTitleWap{
  max-width: 360px;
  margin: 0 auto;
  min-height: 300vh;
  position: relative;
}

/* タイトル */
.works_title{
  font-family: "Marcellus", sans-serif;
  margin-bottom: 15px;
  font-size: 2.8rem;
  font-weight: 500;
}
.works_meta{
  font-family: "Marcellus", sans-serif;
  font-size: 1.8rem;
  opacity: 0.8;
  line-height: 1.5;
}

/* カード（sticky） */
.works-card{
  position: sticky;
  top: 64px; /* SP基準 */
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.works-header{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ALL WORKボタン */
.btn-allwork{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  background-color: #F7F7F7;
  border-radius: 40px;
  color: #333;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: .25s;
}
.btn-allwork:hover{
  background-color: #f5f6f7;
  transform: translateY(-2px);
}

.works-line{
  height: 1px;
  background: rgba(0,0,0,0.12);
}

/* パネル（重ねてis-activeだけ表示） */
.works-panels{
  position: relative;
  height: 540px; /* SP基準 */
  overflow: hidden;
}
.works-panel{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.works-panel.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* mockup+text（SPは縦積み） */
.mockup_wap{
  width: 100%;
  margin-bottom: 60px;
}
.works_text{
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
}

/* スクロールトリガー */
.works-scroll-step{
  height: 100vh;
  width: 1px;
  margin: 0;
  pointer-events: none;
}

/* ===== モックアップ：横スライダー（共通） ===== */
.mockup{
  position: relative;
}

.mockup-slider{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 16px;
  padding: 18px 6px 14px 6px; /* SP基準 */
  touch-action: pan-x; /* 横スワイプ優先（SP安定） */
}
.mockup-slider::-webkit-scrollbar{ display: none; }

.mockup-track{
  display: flex;
  flex-wrap: nowrap;         /* ★縦に並ぶ事故を防ぐ */
  gap: 14px;                 /* SP基準 */
}

.mockup-slide{
  flex: 0 0 100%;
  min-width: 100%;           /* ★縦に並ぶ事故を防ぐ */
  scroll-snap-align: start;
  display: block;
  padding-top: 18px;         /* SP基準 */
  box-sizing: border-box;
}

.mockup-slide img{
  width: 100%;
  height: auto;
  display: block;
}

/* ドット（共通） */
.mockup-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.mockup-dots .dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  opacity: .35;
  transform: scale(1);
  transition: opacity .2s, transform .2s;
}
.mockup-dots .dot.is-active{
  background: rgba(0,0,0,0.7);
  opacity: 1;
  transform: scale(1.25);
}

/* ＋ボタン（共通：まずSPで無難に） */
.works-plus{
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  color: #333;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  z-index: 5;
}
.works-plus:hover{ transform: translateY(-1px); }
.works-plus:focus-visible{
  outline: 2px solid #333;
  outline-offset: 3px;
}


/* =========================
   Tablet（600px〜）
   ========================= */
@media (min-width: 600px){
  .H2_worksTitleWap{
    max-width: 720px;
    padding: 0 24px;
  }

  .works-card{
    top: 80px;
    padding: 26px;
    border-radius: 18px;
  }

  .works-panels{
    height: 560px;
  }

  /* 横並び（TB〜） */
  .mockup_wap{
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 60px;
  }

  .works_text{ padding-top: 0; }

  .works_title{ font-size: 3.0rem; }
  .works_meta{ font-size: 1.8rem; }

  .mockup-slider{
    padding: 22px 10px 16px 10px;
    border-radius: 18px;
  }
  .mockup-track{ gap: 16px; }
  .mockup-slide{ padding-top: 24px; }

  .mockup-dots{
    gap: 10px;
    margin-top: 14px;
  }
  .mockup-dots .dot{
    width: 10px;
    height: 10px;
  }

  .works-plus{
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
  }
}


/* =========================
   PC（1024px〜）
   ========================= */
@media (min-width: 1024px){
  .H2_worksTitleWap{
    max-width: 980px;
    padding: 0 40px;
  }

  .works-card{
    top: 96px;
    padding: 32px;
    border-radius: 20px;
  }

  .works-panels{
    height: 600px;
  }

  .works-header{ gap: 16px; }

  .btn-allwork{
    width: 120px;
    height: 44px;
    font-size: 1.1rem;
  }

  .mockup_wap{
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
  }

  .works_title{ font-size: 3.4rem; }
  .works_meta{ font-size: 1.9rem; }
}


/* =========================
   PC大（1200px〜）
   ========================= */
@media (min-width: 1200px){
  .H2_worksTitleWap{
    max-width: 1320px;
  }

  .works-card{
    top: 130px;
  }

  .works_title{ font-size: 4rem; }
  .works_meta{ font-size: 2.4rem; }

  .works-header{ gap: 20px; }

  .btn-allwork{
    width: 140px;
    height: 60px;
    font-size: 1.4rem;
  }

  /* ここで「flexにしたい」なら grid を上書きしてOK */
  .mockup_wap{
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .mockup{
    flex: 0 0 55%;
  }

  .works_text{
    flex: 1;
  }

  /* PCだけ余白を大きくしたいならここで */
  .mockup-slider{
    padding: 0; /* 
PCは余白なし */
  }

  .mockup-slide{
    padding: 47px 56px 19px 80px;
  }
}


/* =========================
   大画面（1280px〜）
   ========================= */
@media (min-width: 1280px){
  .H2_worksTitleWap{
    max-width: 1100px; /* ここは好み。1320を維持したいなら消してOK */
  }
}