/* ============================== リセットCSS ============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ============================== ルート変数 ============================== */ :root {
  --header-height: 120px;
  --header-padding-top: 120px;
}
/* ============================== ヘッダーのスタイル ============================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  box-sizing: border-box;
}
/* ロゴのスタイル */
.logo img {
  height: auto;
  width: 30vw;
  max-width: 1000px;
}
/* ナビゲーションのスタイル */
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  max-width: 100%;
}
.nav-menu li {
  margin-left: 10px;
  margin-right: 10px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.nav-menu a {
  font-weight: normal;
  font-size: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: black;
  padding: 5px 30px;
  background-color: #dbeef5; /* さらに薄い水色 */
  position: relative;
  transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
  z-index: 1;
}
/* ホバー時のカーテンアニメーション（左右から中央へ） */
.nav-menu a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background-color: #a3cde1; /* さらに薄い青色 */
  transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
  z-index: -1;
}
.nav-menu a:hover::before {
  width: 100%;
  left: 0;
}
.nav-menu a:hover {
  font-weight: bold;
  color: black; /* 文字の視認性を確保 */
}
/* アイコンと文字の配置 */
.nav-menu img {
  width: 55px;
  height: 55px;
  margin-bottom: 5px;
  transition: transform 0.3s ease-in-out;
}
.nav-menu a:hover img {
  transform: rotate(25deg) scale(1.2); /* ホバー時に回転＆拡大 */
}
@media (max-width :1250px) {
  .header {
    flex-direction: column;
    height: 110px;
  }
  .logo img {
    width: 400px;
  }
  .nav-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 55px;
    gap: 0 !important;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    z-index: 1000;
    padding: 5px 0;
  }
  .nav-menu a {
    padding: 5px 15px;
  }
  .nav-menu li {
    flex: 1;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
  }
  .nav-menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 0.75rem;
  }
  .nav-menu li img {
    width: 35px;
    height: 35px;
    margin-bottom: 0px;
  }
  .nav-menu li a:hover {
    color: #0078d4;
  }
}
/* ========== 滞在ページのナビ色変化 ========== */
.nav-menu li.current a {
  background-color: #a3cde1;
  font-weight: bold;
}
.nav-menu li.current a::before {
  display: none;
}
.nav-menu li.current a img {
  transform: scale(1.3);
  transform: rotate(25deg) scale(1.2);
}
/* ============================== メインコンテンツ ============================== */
main {
  padding-top: 120px;
}
@media (max-width:1250px) {
  main {
    padding-top: 110px;
  }
}
/* ============================== メインビジュアル（ヒーローセクション） ============================== */
/* メインビジュアルの高さを調整（少し短く） */
.hero {
  position: relative;
  width: 100%;
  height: 70vh; /* 画面の70%の高さ */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
/* 背景動画 */
.hero-video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
}
/* 文字の視認性向上（白みがかったレイヤー） */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3); /* 30%の白をオーバーレイ */
  z-index: 1;
}
/* キャッチコピー全体配置 */
.hero-content {
  position: absolute;
  text-align: center;
  z-index: 2;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* キャッチコピーの見た目 */
.hero-content h1 {
  font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "MS PMincho", serif;
  font-size: 4rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.6;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  padding: 10px;
  opacity: 0;
  transform: translateY(30px); /* 下からの浮上 */
  animation: fadeSlideIn 1.5s ease-out forwards;
}
/* +αカラー */
.hero-content .accent {
  color: #f9b24e;
}
/* アニメーション定義 */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.main {
  overflow-x: hidden;
}
/* ============================== 共通のセクションタイトル ============================== */
.section-title {
  font-size: 5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  line-height: 4rem;
  margin: 1rem 0rem 1rem 0rem; /* ← 縦幅を狭めたい場合などに調整 */
}
@media (max-width :750px) {
  .section-title {
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin: 0.5rem 0rem 0.5rem 0rem; /* ← 縦幅を狭めたい場合などに調整 */
  }
}
/* ============================== 私たちについて ============================== */
.about-section {
  text-align: center;
  padding: 60px 20px;
}
.subcopy {
  font-size: 1.8rem;
  color: #666;
  margin: 20px 0px 20px 0px;
  font-weight: bold;
}
.about-text p {
  font-size: 1.2rem;
}
@media (max-width :750px) {
  .subcopy {
    font-size: 1.8rem;
    margin: 5px 0px 5px 0px;
  }
}
/* ============================== 概要セクション ============================== */
/* ============================== 製品案内 & 印刷依頼 共通 ============================== */
.products-text h2, .printing-text h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: black; /* ここで黒に指定 */
}
.products-section, .printing-section {
  display: block;
  position: relative;
  background-color: #f9f9f9;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  margin: 50px 0 50px 0;
}
/* ホバー時に少し浮かせる */
.products-section:hover, .printing-section:hover {
  transform: scale(1.02);
}
/* カーテンアニメーション */
.products-section::before, .printing-section::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;
  pointer-events: none; /* ←これを追加！ */
}
.products-section::before {
  left: -100%;
  background-color: rgba(0, 120, 150, 0.1);
}
.products-section:hover::before {
  left: 0;
}
.printing-section::before {
  right: -100%;
  background-color: rgba(0, 120, 150, 0.1);
}
.printing-section:hover::before {
  right: 0;
}
/* コンテンツのレイアウト */
.products-content, .printing-content {
  display: flex;
  align-items: top;
  max-width: 1500px;
  margin: 20px auto 0px auto;
}
/* テキストエリア */
.products-text, .printing-text {
  flex: 1;
  text-align: center;
  padding: 20px;
}
.products-text h2, .printing-text h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}
.products-text p, .printing-text p {
  font-size: 1.2rem;
  line-height: 1.6;
}
/* 画像エリア */
.products-images, .printing-images {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 15px;
}
/* 平行四辺形の画像 */
.image-container {
  position: relative;
  width: 250px;
  height: 350px;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}
.detail-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: bold !important;
  color: white !important;
  background-color: #0078d4;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 120, 212, 0.2);
  position: relative;
  overflow: hidden;
}
.detail-button::after {
  content: "→";
  font-size: 1.2rem;
  transition: transform 0.3s ease-in-out;
}
.detail-button:hover {
  background-color: #005fa3;
  box-shadow: 0 6px 14px rgba(0, 120, 212, 0.3);
}
.detail-button:hover::after {
  transform: translateX(4px);
}
.explain-text {
  margin-bottom: 10px !important;
}
/* ============================== 企業情報 ============================== */
.company-section {
  display: flex;
  justify-content: center;
  margin: 10px 0 10px 0;
}
.company-content {
  display: flex;
  align-items: top;
  background-color: #f9f9f9; /* 製品案内・印刷依頼と統一 */
  max-width: 1500px;
  width: 100%;
  padding: 40px;
  border-radius: 10px;
}
.company-text {
  flex: 1;
  text-align: center;
}
.company-text h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.company-text p {
  font-size: 1.2rem;
  line-height: 1.8;
}
/* 画像エリア */
.company-image {
  flex: 1;
  text-align: right;
  display: flex;
  justify-content: center;
  padding-bottom: 30px
}
.company-image img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  border-radius: 5px;
  transition: transform 0.3s ease-in-out;
}
/* ============================== フッタースタイル ============================== */
.footer {
  background-color: white; /* 背景色を指定 */
  color: black;
  padding: 20px 0;
  text-align: center;
}
.footer-info {
  padding: 15px 0px 0px 0px;
  margin: 20px 0px 0px 0px;
}
.footer-info p {
  margin: 3px 0; /* 各情報間の余白 */
  font-size: 0.9em;
}
/* 企業ロゴのスタイル */
.footer-logo {
  margin-bottom: 10px; /* ロゴと住所情報の間に余白 */
}
.footer-logo-image {
  max-width: 400px; /* ロゴの最大幅 */
  height: auto;
}
/* フッターナビゲーションメニュー */
.footer-nav {
  margin-top: 15px;
}
.footer-menu {
  list-style: none; /* リストのマーカーを削除 */
  padding: 0;
  margin: 0px 0px 20px 0px;
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  justify-content: center; /* ナビゲーションを中央揃え */
  gap: 15px; /* リンク間の余白 */
}
.footer-menu li {
  margin: 0;
}
.footer-menu li a {
  color: black;
  text-decoration: none;
  font-size: 1.0em;
  transition: color 0.3s;
}
/* リンクのホバーエフェクト */
.footer-menu li a:hover {
  color: #FF6B6B; /* ホバー時のリンク色 */
}
@media (max-width :500px) {
  .footer-menu {
    max-width: 300px;
    margin: 0 auto;
  }
  .footer-menu li {
    width: 25%; /* 3列に分ける */
  }
}
/* ============================== お問い合わせエリア ============================== */
.contact-section {
  position: relative;
  text-align: center;
  padding: 50px 20px;
  font-family: Arial, sans-serif;
  width: 100%;
  background-color: #f9f9f9;
  border-radius: 10px;
  margin-top: 40px;
}
/* 背景画像 */
.contact-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.contact-background .background-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をエリア全体にカバー */
  opacity: 0.2; /* 半透明効果 */
}
/* テキスト内容 */
.contact-content {
  position: relative; /* 背景の上に配置 */
}
/* お問い合わせのテキスト */
.contact-area p {
  margin: 10px 0;
  font-size: 18px;
}
.contact-section h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}
.contact-section p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}
.contact-button {
  display: inline-block;
  padding: 15px 30px;
  font-size: 1.2rem;
  color: white;
  background-color: orange;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}
.contact-button:hover {
  background-color: darkorange;
}
@media (max-width :750px) {
  /* 背景画像 */
  .contact-background {
    height: 88%;
  }
  .contact-section {
    padding: 50px 10px;
  }
  /* お問い合わせのテキスト */
  .contact-area p {
    margin: 10px 0;
    font-size: 12px;
  }
  .contact-section h2 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }
  .contact-section p {
    font-size: 1.0rem;
    margin-bottom: 20px;
  }
  .contact-button {
    font-size: 1.0rem;
  }
}
/* ============================== ローディング ============================== */
/* ローディング画面全体（既存そのまま） */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
html.show-loader #loading-screen {
  display: flex;
}
/* ▼ コマ送りスプライト本体（新規） */
.sprite {
  --frame-w: 257.142857px;
  --frame-h: 300px;
  --frames: 99; /* ← 74 → 99 に更新 */
  --scale: 1.5;
  --duration: 4.0s;
  width: calc(var(--frame-w) * var(--scale));
  height: calc(var(--frame-h) * var(--scale));
  background:
    center 0 / calc(var(--frame-w) * var(--scale)) calc(var(--frame-h) * var(--frames) * var(--scale)) no-repeat url("../images/svg/saru_animation.svg");
  /* 1回だけ再生して最後のコマで静止 */
  animation: spritePlay var(--duration) steps(var(--frames), end) 1 forwards;
  will-change: background-position;
}
@keyframes spritePlay {
  from {
    background-position: center 0;
  }
  /* - (300px × 99 × scale) に到達させる */
  to {
    background-position: center calc(-1 * (var(--frame-h) * var(--frames) * var(--scale)));
  }
}
/* スマホ・タブレットなどでは非表示 */
@media (max-width: 767px), (pointer: coarse) {
  .sprite {
    --scale: 0.7;
  }
}
/* デフォルト（PC時）：上部ナビ表示 */
.nav-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  gap: 15px;
  padding: 0;
  margin: 0;
}
/* ============================== サルメニュー ============================== */
/* 右下固定の土台 */
.saru-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  /* クリックできるように */
  pointer-events: auto;
}
/* スプライト（静止：1コマ目だけ見せる） */
.saru-sprite {
  /* saru_menu.svg は 257.142857 × 3000（=300×10） */
  --frame-w: 257.142857px;
  --frame-h: 300px;
  --frames: 10;
  --scale: 1.0; /* 表示サイズ。大きければ調整してください */
  width: calc(var(--frame-w) * var(--scale));
  height: calc(var(--frame-h) * var(--scale));
  background:
    center 0 / /* 1コマ目を表示 */
    calc(var(--frame-w) * var(--scale)) /* 幅は1コマ分 */
    calc(var(--frame-h) * var(--frames) * var(--scale)) /* 縦は全コマ分 */
    no-repeat url("../images/svg/saru_menu.svg");
}
/* スマホ・タブレットなどでは非表示 */
@media (max-width: 767px), (pointer: coarse) {
  .saru-fab {
    display: none;
  }
}
/* （先取り）ホバー中は最終コマを見せる：吹き出し実装前でも入れてOK */
@media (hover: hover) {
  .saru-fab:hover .saru-sprite {
    background-position: center calc(-1 * (var(--frame-h) * (var(--frames) - 1) * var(--scale)));
    cursor: pointer;
  }
}
/* 吹き出し本体（初期は非表示） */
.saru-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  min-width: 180px;
  margin: auto 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 10001;
}
/* 吹き出しの三角 */
.saru-bubble::after {
  content: "";
  position: absolute;
  right: 50%; /* 先端の位置を微調整 */
  top: 100%;
  border: 8px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .08));
}
/* 各メニュー項目 */
.bubble-item {
  display: block;
  padding: 10px 30px;
  border-radius: 8px;
  text-decoration: none;
  color: #222;
  font-size: 25px;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  background: #E5E4DF;
}
.bubble-item:hover, .bubble-item:focus {
  background: #0080CC;
  color: white;
  outline: none;
  transition: all 0.3s;
  transform: scale(1.1)
}
/* PCの hover / キーボード focus で開く */
@media (hover: hover) {
  .saru-fab:hover .saru-bubble, .saru-fab:focus-within .saru-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
    pointer-events: auto;
  }
  /* ホバー中は最終コマを見せる（フォーカス時も同様） */
  .saru-fab:hover .saru-sprite, .saru-fab:focus-within .saru-sprite {
    background-position: center calc(-1 * (var(--frame-h) * (var(--frames) - 1) * var(--scale)));
    cursor: pointer;
  }
}
/* スマホ・タブレットでは非表示（前回の指定があればそれでOK） */
@media (max-width: 767px), (pointer: coarse) {
  .saru-fab {
    display: none;
  }
}
/* 念のためローダーを最前面に（z-index逆転の保険） */
#loading-screen {
  z-index: 100000;
}
/* ============================== 任意改行 ============================== */
.sp-only {
  display: none;
}
/* スマホ（例：600px以下）で表示 */
@media (max-width: 600px) {
  .sp-only {
    display: inline;
  }
}
/* ============================== TOPページレスポンシブ ============================== */
@media (max-width:1250px) {
  .hero-content h1 {
    font-size: 3rem; /* 文字サイズ縮小 */
    padding: 8px;
  }
  .hero {
    height: 50vh; /* 高さを少し低めに */
  }
  .products-text, .printing-text {
    order: 2;
    padding: 5px 20px 20px 20px;
  }
  .products-images, .printing-images {
    gap: 0px;
    margin: 5px 0px 5px 0px;
    order: 1;
  }
  .products-content, .printing-content {
    display: flex;
    flex-direction: column;
    margin: 0px auto 0px auto;
  }
  .image-container {
    width: 30vw;
    height: 30vw;
  }
}
@media (max-width:640px) {
  .hero-content h1 {
    font-size: 2.4rem; /* スマホではさらに小さく */
  }
}
@media (max-width:600px) {
  .hero {
    height: 40vh; /* 高さを少し低めに */
  }
  .hero-content h1 {
    font-size: 1.8rem; /* スマホではさらに小さく */
    padding: 6px;
    line-height: 1.4;
  }
  .about-text p {
    font-size: 1.0rem;
  }
  .products-text p, .printing-text p {
    font-size: 1.0rem;
  }
}