@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* Works */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ラジオボタン */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* --- 1. フィルタリングボタンを中央に配置 --- */
.filter-wrapper {
  width: 100%;
}

/* ラジオボタン自体は完全に隠す */
.filter-wrapper input[type="radio"] {
  display: none;
}

/* ボタンのコンテナ（ここが中央配置の肝です） */
.filter-buttons {
  display: flex;
  align-items: center;
  /* 縦方向中央 */
  gap: 15px;
  /* ボタン同士の間隔 */
  width: 100%;
  margin: 50px 0;
  /* 上下の余白 */
}

/* 可愛くてぷっくりしたボタン */
.filter-btn {
  display: inline-block;
  padding: 10px 35px;
  background-color: #f4f4f4;
  color: #777;
  border-radius: 50px;
  /* 角丸 */
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 0 #e0e0e0;
  /* ぷっくりした影 */
  text-align: center;
}

/* 選択されたボタン（ピンク色） */
#filter-all:checked~.filter-buttons label[for="filter-all"],
#filter-web:checked~.filter-buttons label[for="filter-web"],
#filter-graphic:checked~.filter-buttons label[for="filter-graphic"] {
  background-color: #4cb4f0;
  color: #fff;
  box-shadow: 0 0px 0 #4cb4f0;
  /* 影を消す */
  transform: translateY(4px);
  /* 実際に少し沈ませる */
}


/* --- 2. 作品グリッドを2カラムにする --- */


/* --- 3. ふわっと浮き上がるアニメーション --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.work-card {
  /* 最初からアニメーションを適用 */
  animation: fadeInUp 0.8s ease backwards;
}

/* カードの中身のホバー演出（画像） */
.work-image {
  overflow: hidden;
  border-radius: 10px;
  /* 画像も少し角丸にすると可愛いです */
}

.work-image img {
  transition: transform 0.5s ease;
}

.work-card:hover img {
  transform: scale(1.1);
  /* ホバー時に少しズーム */
}


/* --- 4. フィルタリングの仕組み --- */
/* Web選択時にGraphicを隠す */
#filter-web:checked~.works-grid .work-card:not(.category-web) {
  display: none;
}

/* Graphic選択時にWebを隠す */
#filter-graphic:checked~.works-grid .work-card:not(.category-graphic) {
  display: none;
}

/* --- スマホでは1列にする（オプション） --- */
@media screen and (max-width: 768px) {
  .works-grid {
    grid-template-columns: 1fr;
  }

  .filter-btn {
    padding: 8px 20px;
    /* スマホではボタンを少し小さく */
    font-size: 14px;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* Works */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ヒーローセクション全体 */

.works-container {
  width: 95%;
  /* 固定幅をやめて全幅にする */
  /* トップの額縁と同じ余白を指定（これで画像の端とタイトルの端が揃う） */
  padding-left: clamp(20px, 5vw, 90px);
  padding-right: clamp(20px, 5vw, 90px);
  margin: 200px auto 150px auto;

}

/* テキストエリア（タイトルとメタ情報）のレイアウト */
.works-text-area {
  display: flex;
  justify-content: space-between;
  /* 左右に配置 */
  align-items: flex-end;
  /* 下揃え（お好みで flex-start に変更可） */
  flex-wrap: wrap;
}


/* 左側：タイトル周り */
.label-project {
  font-size: 13px;
  color: #888;
  margin-bottom: 15px;
  font-weight: 400;
  font-family: "superclarendon";
}

.main-title {
  font-size: 42px;
  /* 大きめのフォント */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: #222;
  margin: 0;
}

/* 右側：メタ情報リスト */
.works-meta-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 行間 */
}

.works-row {
  display: flex;
}

.works-row dt {
  min-width: 80px;
  /* 左側のラベル幅を固定 */
  color: #aaa;
  font-weight: 400;
}

.works-row dd {
  color: #666;
  font-weight: 500;
}

.border {
  border: 1px #aaa solid;
  margin: 18px 0 60px 0;
}

/* 画像エリア */
.works-image-wrapper {
  width: 100%;
  overflow: hidden;
  /* 画像自体に背景色がある場合は不要ですが、
       プレースホルダー用に薄い背景をつけています */
  background-color: #f0f2f5;
}

.works-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 内容 */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.project {
  width: 95%;
  /* 固定幅をやめて全幅にする */
  /* トップの額縁と同じ余白を指定（これで画像の端とタイトルの端が揃う） */
  padding-left: clamp(20px, 5vw, 90px);
  padding-right: clamp(20px, 5vw, 90px);

  margin: 0 auto;
  box-sizing: border-box;
}

/* リスト全体のレイアウト */
.project-info {
  width: 100%;
}

/* 各行のレイアウト (CSS Grid) */
.info-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  /* 左側固定幅、右側可変 */
  gap: 20px;
  padding: 30px 0;
  border-top: solid 1px #e5e5e5;
  margin: 0;
  align-items: start;
}

.info-row:last-child {
  border-bottom: solid 1px #e5e5e5;
}

/* 左側の見出し (dt) */
.info-row dt {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  display: flex;
  /* 日本語と英語のベースラインを揃える */

  /* ↓ 英語ラベルとの位置微調整用。baselineのままでもOKですが、
     もしddとズレるならここを center などに調整します */
  display: flex;
  align-items: baseline;
  line-height: 2em;
  /* ★ddと同じ行高さを指定する */
}

/* 英語のラベル (url, range etc) */
.en-label {
  font-weight: normal;
  font-size: 12px;
  color: #bbb;
  margin-left: 15px;

  display: inline-block;
  /* 横に並べる */
  vertical-align: middle;
  /* 垂直方向の微調整 */
  font-family: "superclarendon";

}

/* 右側の本文 (dd) */
.info-row dd {
  font-size: 15px;
  color: #444;
  line-height: 2.5em;
  margin: 0;
  /* --- ここから追加 --- */
  text-align: justify;
  /* 文字を左右いっぱいに広げて端を揃える */
  text-justify: inter-character;
  /* 日本語の文字間を調整して端を揃える */
  word-break: break-all;
  /* 長い英単語などが来ても強制的に端で改行する */
  /* -------------------- */
}

/* リンクのスタイル */
.info-row dd a {
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.info-row dd a:hover {
  border-bottom: 1px solid #333;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* モップアップ */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.mockup {
  margin: 150px 0;
  padding: 0;
  /* divの内側余白もなくす */
}

.mockup img {
  width: 100%;
  /* 画面幅いっぱいに広げる */
  height: auto;
  /* 縦横比を維持 */
  display: block;
  /* 下の余白を消すためにブロック表示 */
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* works09のモップアップ */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.works-mockup {
  margin-top: 150px;
  display: flex;
}

.works-mockup img {
  width: calc(50% - 10px);
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 全体図 */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.site-img {
  display: flex;
  justify-content: space-between;
  width: 95%;
  /* 固定幅をやめて全幅にする */
  /* トップの額縁と同じ余白を指定（これで画像の端とタイトルの端が揃う） */
  padding-left: clamp(20px, 5vw, 90px);
  padding-right: clamp(20px, 5vw, 90px);

  margin: 0 auto;
  box-sizing: border-box;
  align-items: flex-start;
  margin: 150px auto;
}

.pc {
  width: 65%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.pho {
  width: 25%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.img {
  width: 50%;
  margin: 0 auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 次のページ　コマンド（リサイズ版） */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.next-page {
  width: 95%;
  /* 95%から100%へ。paddingで制御するため */
  padding-left: clamp(20px, 5vw, 90px);
  padding-right: clamp(20px, 5vw, 90px);
  box-sizing: border-box;

  margin: 80px auto;
  /* 150pxから100pxへ。上下の余白を少し詰めました */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 各パーツの共通設定 */
.back,
.next,
.next-img {
  display: flex;
  align-items: center;
  gap: 15px;
  /* 文字と円の間隔を少し広げてスッキリ */
}

/* テキストリンクの基本サイズ */
.next-page a {
  text-decoration: none;
  font-size: 24px;
  /* 36pxから大幅に縮小。読みやすい本文サイズへ */
  color: #333;
  letter-spacing: 0.05em;
}

/* 一覧へ戻る（中央）の文字サイズ */
.next-img a {
  font-size: 24px;
  /* 中央は少し控えめに */
  color: #888;
  transition: color 0.3s ease;
}

.next-img a:hover {
  color: #333;
}

/* テキストリンクの波線ホバー */
.next-page a:not(.arrow-link):hover {
  text-decoration: underline wavy #333;
  text-underline-offset: 4px;
}

/* 円形の矢印外枠 */
.arrow-wrap {
  width: 60px;
  /* 100pxから60pxへ大幅縮小 */
  height: 60px;
  /* 100pxから60pxへ大幅縮小 */
  border: 1px solid #ddd;
  /* 線を少し薄くして上品に */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: all 0.3s ease;
}

/* 円のホバー時 */
.arrow-link:hover .arrow-wrap {
  background-color: #FFD54F;
  border-color: #FFD54F;
}

/* 矢印（左）の棒 */
.left {
  position: relative;
  display: inline-block;
  width: 20px;
  /* 少し短く */
  height: 1px;
  /* 線の太さを1pxにして繊細に */
  background-color: currentColor;
}

.left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  /* 羽を小さく */
  height: 1px;
  background-color: currentColor;
  transform: rotate(-45deg);
  transform-origin: left top;
}

/* 矢印（右）の棒 */
.right {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: currentColor;
}

.right::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 1px;
  background-color: currentColor;
  transform: rotate(45deg);
  transform-origin: right top;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* Canva*/
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* Canvaを囲む親要素の設定 */
.canva-container {
  width: 85%;
  /* 固定幅をやめて全幅にする */
  /* トップの額縁と同じ余白を指定（これで画像の端とタイトルの端が揃う） */
  padding-left: clamp(20px, 5vw, 90px);
  padding-right: clamp(20px, 5vw, 90px);
  aspect-ratio: 16 / 9;
  /* これだけで16:9の比率を維持します */
  min-height: 190px;
  /* 数値は適当でOK。これを入れるだけで安定感が違います */
  margin: 40px auto;
  background-color: #f9f9f9;
  /* 読み込み前の背景色 */
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
  /* 他の要素の下に潜り込まないように */
}

/* iframeを親のサイズいっぱいに広げる */
.canva-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* レスポンシブ対応 (スマホ向け max-width: 800px) */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (max-width: 800px) {

  /* --- 共通設定（固定幅の解除と確実な余白の確保） --- */
  .works-container,
  .project,
  .site-img,
  .next-page,
  .canva-container {
    width: 100%;
    /* 90%ではなく100%にし、内側のpaddingで余白を作る */
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }



  /* --- 1. ヒーローセクション（タイトルと画像） --- */
  .hero-section {
    flex-direction: column;
    /* 縦並びに変更 */
    border-radius: 0;
    margin-bottom: 40px;
    background-color: #ffffff;
    min-height: 50vh;
  }

  .sub-title-container {
    flex-direction: column;
    padding: 80px 20px 0;
    gap: 30px;
  }

  .about-sub-title {
    text-align: center;
  }

  .content-left {
    text-align: center;
    /* タイトルを中央揃え */
  }

  .image-right {
    width: 120%;
    height: auto;
  }

  /* --- 2. Works一覧ページ（フィルターとグリッド） --- */
  .filter-buttons {
    flex-wrap: nowrap;
    /* 折り返さず1行に並べる */
    justify-content: space-between;
    gap: 10px;
    /* 隙間を少し狭く */
    padding: 0 20px;
  }

  .filter-btn {
    width: 100%;
    /* 3つが均等な幅になるように設定 */
    padding: 10px 0;
    font-size: 13px;
    /* スマホ向けに少し縮小 */
  }

  .works-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 確実に1列にする */
    gap: 30px;
  }

  /* --- 3. Works詳細ページ（各作品の個別ページ） --- */
  .works-container {
    margin-top: 130px;
    margin-bottom: 60px;
  }

  .project,
  .mockup,
  .site-img,
  .next-page {
    margin: 60px auto;
  }

  /* タイトルとメタ情報エリア */
  .works-text-area {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .main-title {
    font-size: 7vw;
    /* スマホでも存在感を残しつつ縮小 */
  }

  .n-sports-title {
    font-size: 6vw;
  }

  .paris-title {
    font-size: vw;
  }

  .works-meta-group {
    width: 100%;
  }

  .border {
    margin: 20px 0 30px 0;
  }

  /* 作品詳細情報（表組部分） */
  .info-row {
    grid-template-columns: 1fr;
    /* 縦並びに変更 */
    gap: 5px;
    padding: 20px 0;
  }

  .info-row dt {
    margin-bottom: 4px;
    align-items: center;
  }

  .info-row dd {
    font-size: 14px;
    line-height: 1.8em;
    text-align: left;
    /* スマホでは両端揃えを解除して自然に */
  }

  /* 画像（全体図）エリア */
  .site-img {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .pc {
    width: 100%;
  }

  .pho {
    width: 60%;
    /* 50%だと小さすぎることがあるので調整 */
    margin: 0 auto;
  }

  /* ページ送り（次のページ等） */
  .next-page {
    margin: 60px auto;
  }

  .next-page a {
    font-size: 13px;
    /* はみ出さないように縮小 */
  }

  .arrow-wrap {
    width: 40px;
    height: 40px;
  }

  .canva-container {
    margin: 30px auto;
  }
}