@charset "utf-8";


/* --- 初期化の基本スタイル --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ヘッダー全体を常に上部に固定 */
.header {
  position: fixed;   /* 画面上部に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;      /* ヘッダーの高さを固定 */
  display: flex;
  justify-content: flex-end; /* 中身を右側に寄せる */
  align-items: center;
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.3); /* 70％の透過 */
  backdrop-filter: blur(5px);               /* すりガラス効果 */
  z-index: 1000;     /* 一番手前に表示 */
}

/* ヘッダー固定でメインコンテンツが裏に潜り込むのを防ぐ */
.main-content {
  padding-top: 80px; /* ヘッダーの高さ(60px) + 余白(20px) */
  padding-left: 20px;
  padding-right: 20px;
}

/* チェックボックス本体は常に隠す */
#menu-btn-check {
  display: none;
}

/* --- PC用スタイル (画面幅 769px 以上) --- */
@media screen and (min-width: 769px) {
  /* PC時はハンバーガーボタンを隠す */
  .menu-btn {
    display: none;
  }

  .nav-list {
    display: flex;
    list-style: none;
    gap: 20px;
  }

  .nav-item a {
    color: #030455;
    text-decoration: none;
    font-size: 0.95rem;
  }

  .nav-item a:hover {
    opacity: 0.7;
  }
}

/* --- スマホ用スタイル (画面幅 768px 以下) --- */
@media screen and (max-width: 768px) {
  /* 右上のハンバーガーアイコン（青色） */
  .menu-btn {
    position: relative;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 1001; /* メニューが開いた時もボタンを押せるようさらに上へ */
    cursor: pointer;
  }

  /* アイコンの三本線（青色） */
  .menu-btn span,
  .menu-btn span::before,
  .menu-btn span::after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #020366; /* 青色 */
    position: absolute;
    transition: all 0.3s ease-in-out;
  }

  /* 上下の線 */
  .menu-btn span::before {
    bottom: 8px;
  }
  .menu-btn span::after {
    top: 8px;
  }

  /* チェックがついたら三本線を「×」に変形 */
  #menu-btn-check:checked ~ .menu-btn span {
    background-color: transparent;
  }
  #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* スマホ用全画面メニュー（初期状態は左に隠す） */
  .nav {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 100%; /* 初期位置：右の外側 */
    z-index: 999;
    background-color: rgba(35, 17, 114, 0.7);
    transition: all 0.4s ease;
  }

  .nav-list {
    padding-top: 100px;
    list-style: none;
    text-align: center;
  }

  .nav-item {
    margin-bottom: 25px;
  }

  .nav-item a {
    position: relative;     /* アンダーラインの位置基準にするため必須 */
  display: inline-block;
  text-decoration: none;
  color: #fff;            /* 文字色 */
  font-size: 1.2rem;
  padding-bottom: 6px;    /* 文字とアンダーラインの間の余白 */

  }

  .nav-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;            /* 線の太さ（お好みで調整） */
  
  /* 虹色のグラデーションを指定 */
  background: linear-gradient(
    to right, 
    #ff2a2a, /* 赤 */
    #ff7f00, /* 橙 */
    #ffeb3d, /* 黄 */
    #2ecc71, /* 緑 */
    #3498db, /* 青 */
    #9b59b6  /* 紫 */
  );
  
  /* 普段（通常時）は縮小して非表示にしておく */
  transform: scaleX(0);
  transform-origin: left; /* 左側を起点にして伸び縮みさせる */
  transition: transform 0.3s ease-in-out; /* 変化のスピードと滑らかさ */
}

/* マウスオーバー（ホバー）したとき */
.nav-item a:hover::after {
  transform: scaleX(1);   /* 横幅を100%に広げて表示する */
}


  /* チェックがついたら左の外側からスライドイン */
  #menu-btn-check:checked ~ .nav {
    left: 0;
  }
}

/* トップに戻るボタンのデザイン */
.page-top-btn {
  position: fixed;       /* 画面に対して位置を固定 */
  bottom: 30px;          /* 画面の下端からの距離 */
  right: 30px;           /* 画面の右端からの距離 */
  z-index: 999;          /* 他の要素の下に隠れないよう手前に配置 */
  
  width: 50px;
  height: 50px;
  background-color: rgba(0, 123, 255, 0.7);
  color: #fff;
  border-radius: 50%;    /* 丸いボタンにする */
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  
  /* 普段は非表示（透明にしておく） */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

/* 上向きの矢印（CSSで簡易的に作成） */
.page-top-btn .arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
  margin-bottom: 2px;
}

/* ホバー時の演出 */
.page-top-btn:hover {
  background-color: #0056b3;
  transform: translateY(-3px); /* わずかに浮き上がる */
}

/* JavaScriptでこのクラスが追加されたときに表示する */
.page-top-btn.is-active {
  opacity: 1;
  visibility: visible;
}


/* .main {
  margin-left: 3%;
  margin-right: 3%;
} */

.main-rogo {
  margin-left: 5%;
  margin-right: 3%;

  padding-top: 20%;
  padding-bottom: 15%;
}

/* ------仕切り用波線-------- */

.wave-container {
  width: 100%;
  line-height: 0; /* 画像の下の隙間を消すおまじない */
}

.wave-container svg {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------波線ここまで */


/* 左右の要素を並べるフレックスボックス */
.content-container {
  margin-left: 3%;
  margin-right: 3%;
  margin-bottom: 3%;
  display: flex;
  justify-content: space-between;
  align-items:flex-start; 
  gap: 40px;          /* テキストと写真の間隔 */
}

/* テキストエリアのスタイル */
.text-area {
  flex: 1; /* 柔軟に幅を広げる */
}

.text-area h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
}

.text-area p {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
 
  background-color: rgba(255, 255, 255, 0.50); 
  line-height: 1.7;                              /* 行間を整えて読みやすくする */
  text-align: justify;            /* 両端揃えにする */
  text-justify: inter-ideograph;   /* 日本語の文字間を調整して綺麗に揃える */

}

/* 写真エリアのスタイル */
.image-area {
  flex: 1; /* テキストエリアと同じ比率で幅を取る */
}

.image-area img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 角を少し丸くする（お好みで） */
  object-fit: cover;
  display: block;
}

/* 制作情報のリスト全体 */
.work-details {
  list-style: none;     /* リストの黒丸を消す */
  padding-left: 10px;
  margin: 15px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;            /* 項目ごとの縦の間隔 */
}

/* 各項目のレイアウト */
.work-details li {
  display: flex;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 「制作意図：」などのラベル部分 */
.work-details .label {
  position: relative;
  font-weight: bold;
  min-width: 105px;     /* アイコン分の余白を考慮して少し広げる */
  color: #333;
  padding-left: 16px;   /* アイコンを配置するスペースを空ける */
}

/* ラベルの左側にCSSで綺麗な右三角（▶）を表示する */
.work-details .label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  
  /* 三角形のサイズと形状を設定 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px; /* 上の高さ・下の高さ・右の長さ */
  
  /* 4方向の色（上・右・下を透明にして、左側だけに色をつけることで右三角になる） */
  border-color: transparent transparent transparent #f72585; /* お好みの色に変更可能 */
}

/* 実際のテキストが入る部分 */
.work-details .text {
  color: #555;          /* 必要に応じて文字色を調整 */
}



/* --- スマホ用スタイル (画面幅 768px 以下) --- */
@media screen and (max-width: 768px) {
  .content-container {
    flex-direction: column; /* スマホでは縦並びにする */
    gap: 30px;
  }
  
  .content2-container {
    /* 縦並び（column）にしつつ、順番を逆（reverse）にする */
    flex-direction: column-reverse; 
    gap: 30px;
    }
  
  .text-area {
    text-align: left;
  }
  .text-area h2 {
    font-size: 1.2rem;
  }

}
/* スマホ用スタイルここまで */




/* リンクボタン仕様 */
.pdf-btn-wrapper {
  display: flex;
  justify-content: center; /* 左右の中央に配置 */
  margin-top: 20px;        /* 上のコンテンツとの余白 */
  margin-bottom: 50px;     /* 下のコンテンツとの余白 */
}

.pdf-btn,.video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                    /* アイコンと文字の間隔 */

  background: linear-gradient(
    135deg,       /* 斜め（右下に向かう角度） */
    #000000 0%,   /* 左側をスタート */
    #000000 68%,  /* 全体の約70%近くまでしっかり黒を維持 */
    #00b4d8 75%,  /* ここから右側30%のエリアで斜めに虹色に変化 */
    #7209b7 82%,  /* 紫系 */
    #f72585 89%,  /* ピンク・赤系 */
    #ff7000 94%,  /* オレンジ系 */
    #ffd60a 100%  /* 右端：黄色 */
  );

  color: #fff;                 /* 文字色 */
  padding: 12px 24px;          /* ボタンの余白（大きさを調整できます） */
  border-radius: 30px;         /* 角を丸くする（四角にしたい場合は 4px などにしてください） */
  text-decoration: none;       /* 下線を消す */
  font-size: 0.95rem;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-in-out; /* ふわっと変化させる */
  margin-top: 15px;            /* 上の要素との余白 */
}

/* ボタンの中の簡易的なPDFアイコン（CSSで作成） */
.pdf-btn .pdf-icon {
  display: inline-block;
  width: 14px;
  height: 16px;
  background-color: #fff;
  border-radius: 2px;
  position: relative;
}

/* アイコンのめくれた部分の表現 */
.pdf-btn .pdf-icon::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, transparent 50%, #030303 50%);
}


/* 「動画を見る」ボタン内の再生三角アイコン */
.video-btn .video-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px; /* 三角形を作成 */
  border-color: transparent transparent transparent #ffffff;
}

/* ホバー（マウスオーバー）したときの演出 */
.pdf-btn:hover,
.video-btn:hover {
  opacity: 0.75;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}




/* フッター用波のコンテナ */
.footer-container {
  width: 100%;
  line-height: 0; /* SVGの下に生じる謎の隙間を消す重要なおまじない */
  background-color: transparent; /* 必要に応じて背景調整 */
  margin-bottom: -3px; /* 【追加】これでSVGとフッターが重なり、隙間が消えます！ */
}

.footer-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.footer {
  padding-left: 3%;
  padding-right: 3%;
  padding-bottom: 10%;
  text-align: right;
  background-color: #333333; /* 波のパスの色（fill）と統一する */
  color: #fff;
  text-align: center;
  font-size: clamp(10px, 2.5vw, 14px);
}