/* フォント */
@font-face {
  font-family: "PPPPAcma-Light-Light";
  src: url("assets/font/PPAcma-Light.woff2") format("woff2");
}

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background: #4C17AD;
  color: #fff;
  overflow-x: hidden;
}

.font-en {
  font-family: "PPAcma-Light", sans-serif;
  font-weight: 300;
}

h2 { 
  font-family: "PPAcma-Light", sans-serif;
  font-weight: 300;
  font-size: 70px;
  margin: 0;
}


.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #4C17AD;
  z-index: -1;
  overflow: hidden;
}

.content {
  position: relative;
  z-index: 1;
}

/* ノイズ */
.noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: url("assets/noise.png");
  background-size: 700px;

  opacity: 0.1;
  mix-blend-mode: screen;

  animation: noise 1.8s steps(3) infinite;
}

@keyframes noise {
  0%   { background-position: 0 0; }
  25%  { background-position: 50px 100px; }
  50%  { background-position: -100px 50px; }
  75%  { background-position: 100px -50px; }
  100% { background-position: 0 0; }
}

.fv-noise {
  position: absolute;
  width: 100%;
  height: 100%;

  background: url("assets/noise.png");
  background-size: 700px;

  opacity: 0.1;
  mix-blend-mode: screen;

  animation: noise 1.8s steps(3) infinite;

  pointer-events: none;
}

/* header */
.header {
  position: fixed;
  top: 40px;
  right: 60px;
  z-index: 100;
}

@media (max-width: 767px) {
  .header {
    top: 20px;
    left: 25px;
    right: auto;
  }
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 50px; /* 項目間の余白 */
}

.nav li {
  margin-bottom: 10px;
  position: relative;
}

.nav a {
  text-decoration: none;
  color: #fff;
  font-size: 28px;
  font-family: "PPAcma-Light", sans-serif;
}

@media (max-width: 767px) {
  .nav a {
    font-size: 20px;
  }
}

.nav li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);

  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;

  opacity: 0; /* ← 初期は非表示 */
  transition: 0.2s;
}

.nav li.current::before {
  opacity: 1;
}

.nav li:hover::before {
  opacity: 1;
}


/* FV */
.fv {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.fv-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-title {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  font-family: "PPAcma-Light";
  font-weight: 300;
  font-size: 8vw;
  line-height: 1.1;
}

/* Profile */
.profile {
  padding: 120px 12%;
}

.profile-grid {
  display: flex;
  flex-direction: column;
}

/* Profile PC表示 */
@media (min-width: 768px) {

  .profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
    align-items: start;
  }
}

.profile-text {
  letter-spacing: 0.03em;
  font-weight: 300;
  margin-top: 24px;
  line-height: 2.1;
  max-width: 520px;
}

.profile-name {
  font-size: 26px;
  line-height: 1.4;
  font-weight: 300;
}

.profile-name span {
  font-size: 18px;
  opacity: 0.8;
}

.profile-content {
  max-width: 600px;
  margin-top: 24px;
}

.profile-title {
  position: static;
}

@media (min-width: 768px) {
  .profile-title {
    position: sticky;
    top: 100px;
  }
}

/* Profile SP表示 */

@media (max-width: 767px) {

  .profile-grid {
    gap: 24px;
  }

}

/* Slider */
.slider {
  overflow: hidden;
  margin: 80px 0;
}

.slider-track {
  display: flex;
  width: max-content;
  animation: slide 20s linear infinite;
}

.slider img {
  width: 400px;
  margin-right: 20px;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Skills */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ← 完全50:50 */
  gap: 80px;
  padding: 120px 6% 100px 6%;
  font-size: 14px;
}

/* Skills SP表示 */
@media (max-width: 767px) {
  .skills-grid {
    grid-template-columns: 1fr; /* ← 縦積み */
    gap: 40px;
  }
}

.tags span {
  display: inline-block;
  background: #fff;
  color: #4C17AD;
  padding: 6px 12px;
  margin: 5px;
}

/* Award */
.award {
  padding: 120px 6% 100px 6%;
}

.award-grid {
  display: flex;
  flex-direction: column;
}

/* award PC表示 */
@media (min-width: 768px) {

  .award-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
    align-items: start;
  }
}

.award-text {
  letter-spacing: 0.03em;
}

.award-name {
  font-size: 20px;
  line-height: 1.6;
}

.award-name span {
  font-size: 16px;
  opacity: 0.8;
}

.award-text {
  margin-top: 24px;
  line-height: 1.8;
  max-width: 520px;
}

.award-content {
  max-width: 600px;
  margin-top: 20px;
}

/* award SP表示 */
@media (max-width: 767px) {


  .award-grid {
    gap: 24px;
  }

}


/* フッター */
.footer {
  padding: 60px 40px 30px 0;
  display: flex;
  justify-content: flex-end;
}

.footer-text {
  font-family: "PPAcma-Light";
  font-weight: 200;
  letter-spacing: 0.1em;
  font-size: 14px;
}




/* ===========================================================================
   Worksここから
=========================================================================== */

/* =========================
  Worksページ用カラー切替
========================= */


.works-page {
  background: #fff;
}

/* ナビを青に */

.works-page .nav a {
  color: #4C17AD;
}

.works-page .nav li.current::before {
  background: #4C17AD;
}

.works-page .nav li::before {
  background: #4C17AD;
}

/* =========================
  Category
========================= */

.category {
  padding: 120px 3% 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: "PPAcma-Light", sans-serif;
  font-size: 20px;
  font-weight: 200;
  justify-content: center;
}

.category span {
  cursor: pointer;
  color: #B3B3B3;
}

.category span.active {
  color: #4C17AD;
}

/* =========================
  Grid
========================= */

.works-grid {
  padding: 0 3% 120px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 100px 80px;
}

@media (max-width: 1200px) {
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* =========================
  Card
========================= */

.thumb {
  width: 100%;
  aspect-ratio: 11 / 14;
  background: #ccc;
  margin-bottom: 8px;
  overflow: hidden;
  transition: transform 0.4s ease;
}
/* hover */
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transform: scale(1); /* ← 初期状態 必須 */
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.work-card:hover .thumb img {
  transform: scale(1.08);
  opacity: 0.9;
}


.title {
  font-size: 14px;
  color: #1F1F1F;

  display: flex;
  align-items: center;
  gap: 8px;
}
.title::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #1F1F1F;
  border-radius: 50%;
  display: inline-block;
  transform: translateY(1px);
}

/* =========================
  Detail
========================= */

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 120px 5%;
}

@media (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.left {
  position: sticky;
  top: 120px;
}

.title-lg {
  font-size: 28px;
  margin-bottom: 10px;
}

.cat {
  font-size: 14px;
  color: #4C17AD;
  margin-bottom: 20px;
}

.text {
  line-height: 1.8;
  margin: 40px 0;
}

.full-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #ccc;
  margin-bottom: 40px;
}

.back {
  margin-top: 80px;
  color: #4C17AD;
  text-decoration: none;
  display: inline-block;
}

/* リッチエディタ調整 */
.text {
  overflow-wrap: break-word;
}

.text img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 40px 0;
}

/* =========================
  Footer
========================= */

.footer-works {
  padding: 60px 40px 30px 0;
  display: flex;
  justify-content: flex-end;
}

.footer-text-works {
  font-family: "PPAcma-Light";
  color: #4C17AD;
  font-weight: 200;
  letter-spacing: 0.1em;
  font-size: 14px;
}

/* =========================
  Works Detail 調整
========================= */

/* 2カラム比率 */
.container {
  grid-template-columns: 30% 1fr; /* ← 左を30%に */
  align-items: start;
}

/* 左カラム */
.left {
  position: sticky;
  top: 145px;
}

.left .thumb {
  width: 100%;
}

/* SPは縦 */
@media (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
  }

  .left {
    position: static;
  }
}

/* =========================
  文字色修正
========================= */

.works-page .title-lg,
.works-page .text {
  color: #1F1F1F;
}

/* =========================
  カテゴリフォント
========================= */

.cat {
  font-family: "PPAcma-Light", sans-serif;
  color: #4C17AD;
}

/* =========================
  戻るボタン（センター配置）
========================= */

.back {
  display: block;
  text-align: center;
  margin: 120px auto 0;
  color: #4C17AD;
  text-decoration: none;
  font-family: "PPAcma-Light", sans-serif;
}

/* 右カラムの中から外すため */
.container .back {
  grid-column: 1 / -1; /* ← 2カラムまたいで中央に */
}

.container {
  gap: 80px;
}