@charset "UTF-8";

html, body {
    color: black;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    scroll-behavior: smooth; /* スムーズにスクロール */
    font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  }


/*
  ===============================================================
  右下スクロール
  ===============================================================
*/
.scroll-indicator {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-start; /* 上端揃え */
  z-index: 10;
}

.scroll-line {
  width: 1px;
  height: 150px;
  background-color: black;
  margin-right: 5px;
}

.scroll-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 14px;
  color: black;
  letter-spacing: 2px;
  font-weight: bold;
  text-transform: uppercase;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.scroll-indicator {
  animation: fadeInOut 2s infinite;
}


/*
  ===============================================================
  新ナビゲーション 2025
  ===============================================================
*/

.global-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 32px; /* 余白を少し広げて余裕を出す */
  background: rgba(255, 255, 255, .92);
  z-index: 100;
}

.nav-logo {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #000;
  text-decoration: none;
  font-size: 15px;
}
.nav-logo img {
  height: 46px;
}

/* PCナビ */
.global-nav > ul {
  display: flex;
  gap: 36px; /* 項目間隔を広げる */
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-nav > ul > li {
  position: relative;
}

.global-nav > ul > li > a,
.contact-link {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: #000;
  font-size: 16px;       /* フォント大きめ */
  font-weight: 700;      /* 太字で力強く */
  letter-spacing: 0.5px; /* 少し字間を広げてかっこよく */
}

/* Contact ボタン（PC） */
.contact-desktop {
  background: #14255D;
  color: #fff !important;
  border-radius: 20px;
  padding: 10px 20px;
}
.contact-desktop:hover {
  background: #0d1a44;
}

/* スマホ時：ロゴ右テキストの行間を狭くする */
@media (max-width: 1100px) {
  .nav-logo span {
    line-height: 1.1;   /* 行間の縮小（標準よりかなり狭め） */
    font-size: 12px;    /* 必要なら文字サイズも微調整 */
    display: inline-block;
  }
}


/* ===== PC: ドロップダウン ===== */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #eee;
  display: none;
  padding: 8px 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
  z-index: 200;
}
.submenu li a {
  display: block;
  padding: 10px 14px;
  color: #000;
  text-decoration: none;
  font-size: 15px;
}
.submenu li a:hover {
  background: #ddd;
}
.has-submenu:hover > .submenu {
  display: block;
}
.global-nav > ul > li:hover > a {
  background: #14255D;
  color: #fff;
  border-radius: 6px;
}

/* ===== ハンバーガー/モバイル ===== */
.hamburger {
  display: none;
  width: 28px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #000;
  border-radius: 2px;
}

/* モバイルドロワー */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 78%;
  max-width: 360px;
  height: 100vh;
  background: #14255D;
  color: #fff;
  z-index: 300;
  transition: right .3s ease;
  padding: 80px 18px 24px;
}
.mobile-nav.active {
  right: 0;
}
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: none;
  z-index: 250;
}
.mobile-overlay.active {
  display: block;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.submenu-toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  color: #fff;
  border: none;
  padding: 14px 10px;
  font-size: 16px;  /* 大きめ */
  font-weight: 700;
  cursor: pointer;
}
.submenu-toggle::after {
  content: "▾";
  float: right;
  transition: transform .2s ease;
}
.mobile-item.open .submenu-toggle::after {
  transform: rotate(180deg);
}
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: rgba(255, 255, 255, .08);
  border-radius: 8px;
  margin: 0 0 6px;
  padding: 0 0;
}
.mobile-submenu li a {
  display: block;
  padding: 10px 12px;
  color: #fff !important;   /* 白に統一 */
  text-decoration: none;
  font-size: 15px;
}
.mobile-submenu li a:hover {
  background: rgba(255, 255, 255, .12);
}

/* Contact（モバイル用） */
.mobile-nav .contact-link {
  display: block;
  background: #14255D;
  color: #fff !important; /* 白に統一 */
  font-size: 16px;
  font-weight: 700;
  padding: 12px 14px;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 20px;
  margin-top: 8px;
}

/* モバイル：単独リンク（Recruit など）も他と同じ書体に */
.mobile-menu-list .mobile-item > a {
  display: block;
  padding: 14px 10px;
  color: #fff !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.mobile-menu-list .mobile-item > a:hover {
  background: rgba(255,255,255,.12);
  border-radius: 8px;
}


/* ===== ブレークポイント ===== */
@media (max-width: 1024px) {
  .global-nav {
    display: none;
  }
  .contact-desktop {
    display: none;
  }
  .hamburger {
    display: flex; /* 確実に表示 */
  }
}

/*
  ===============================================================
  新ナビゲーション 2025　終了
  ===============================================================
*/


/*
  ===============================================================
  TOP画像3枚に対するテキスト アニメーション
  ===============================================================
*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

.slide-text {
  position: absolute;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;       /* 太字 */
  opacity: 0;
  transition: opacity 2.5s ease; /* 画像と同じフェード時間 */
  pointer-events: none;
  z-index: 2;
}

/* 1枚目 */
.design-service {
  top: 20%;
  right: 10%;
  font-size: 10vw;
  text-align: right;
}

/* 2枚目 */
.idea {
  top: 50%;
  right: 5%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 11vw;
  letter-spacing: 0.2em;
}

/* 3枚目 */
.creativity {
  bottom: 15%;
  left: 10%;
  font-size: 10vw;
}


/* ====== レスポンシブ ====== */
@media (max-width: 768px) {
  .nav-center,
  .contact-btn {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}


/*
  ===============================================================
  TOP画像3枚に対するテキスト アニメーション　終了
  ===============================================================
*/










/*
  ===============================================================
  ヘッダー
  ===============================================================
*/



/*
  ===============================================================
  背景部分 index.html 3枚画像スクロール
  ===============================================================
*/
  /* 背景部分を固定 */
  .background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* 背景画像の指定例。適宜変更してください */
    background-size: cover;
    z-index: 1;
  }

  .background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 2.5s ease-in-out;
  }

  .bg1 {
    opacity: 1;
  }
  
  .bg2 {
    opacity: 0;
  }

/* 黒のオーバーレイ */
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.30);
    z-index: 5;
  }

  /* ページインジケーター */
.indicator-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
  }
  
  .indicator {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: background-color 0.3s ease-in-out;
  }
  
  .indicator.active {
    background-color: rgba(255, 255, 255, 1);
  }


  /* 背景部分終了 */





/*
  ===============================================================
  背景部分 index以外　1枚固定　★#main-atherも連動
  ===============================================================
*/
.background-container-ather {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  /* 背景画像の指定例。適宜変更してください */
  background-size: cover;
  z-index: 1;
}

.background-ather img {
  width: 100%;
  height: 663px;
  object-fit: cover;
  object-position: center;
}

/* オーバーレイの追加 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3); /* ここで薄暗いオーバーレイを追加 */
  pointer-events: none; /* クリックを透過させる */
}


/*
  ===============================================================
  メインコンテンツ　aboutus.htmlの画像1枚固定 2025
  ===============================================================
*/
#main-ather {
  position: relative;
  z-index: 5;
  /* コンテンツを読みやすくするための背景色（半透明） */
  width: 100%;
  margin-top: 0vh;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0px;
}
/*
===============================================================
メインコンテンツ　aboutus.htmlの画像1枚固定 2025　終了
===============================================================
*/

/*
  ===============================================================
  メインコンテンツ　contact.htmlの画像なし 2025
  ===============================================================
*/
#main-ather-content {
  position: relative;
  z-index: 5;
  /* コンテンツを読みやすくするための背景色（半透明） */
  width: 100%;
  margin-top: 5vh;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0px;
}
/*
===============================================================
メインコンテンツ　aboutus.htmlの画像1枚固定 2025　終了
===============================================================
*/





/*
  ===============================================================
  メインコンテンツ（3枚画像スクロールverの上部からの位置出し）
  ===============================================================
*/
  
#main {
    position: relative;
    z-index: 2;
    /* コンテンツを読みやすくするための背景色（半透明） */
    width: 100%;
    margin-top: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
  }


/* =========================
   メインテキスト2025
   ========================= */
.main-message {
  text-align: center;
  margin: 60px auto;
  max-width: 900px;
  padding: 0 20px;
}

.main-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  line-height: 1.4;
}

.main-title::after {
  content: "";
  display: block;
  width: 80%;
  height: 2px;
  background: #14255D; /* 線の色 */
  margin: 8px auto 0;
}

.main-sub {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* ===== スマホ（〜767px） ===== */
@media (max-width: 767px) {
  .main-message {
    margin: 32px auto;     /* 余白を詰める */
    padding: 0 16px;       /* サイド余白を少し縮める */
    max-width: 640px;
  }
  .main-title {
    font-size: 18px;       /* タイトル小さめ */
    padding-bottom: 6px;
    margin-bottom: 14px;
  }
  .main-title::after {
    width: 72%;            /* 線を少し短く */
    height: 2px;
  }
  .main-sub {
    font-size: 14px;       /* 本文を読みやすいサイズに */
    line-height: 1.9;
  }
}

/* ===== タブレット（768〜1024px）任意 ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-message {
    margin: 48px auto;
    padding: 0 20px;
    max-width: 800px;
  }
  .main-title {
    font-size: 22px;
  }
  .main-sub {
    font-size: 15px;
  }
}

/* =========================
   メインテキスト2025終了
   ========================= */



/* =========================
   Design Sections
   ========================= */
:root{
  --ink:#14255D;
  --ink-weak:#2a3b7d;
  --paper:#fff;
  --paper-gray:#f0f1f4;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:14px;
}

.design-sections{
  max-width: 1160px;
  margin: 40px auto 80px;
  padding: 0 16px;
  display: grid;
  gap: 48px;
}

.design-card{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.card--gray{ background: var(--paper-gray); }

/* --- 上部のループテキスト（静かめ） --- */
.marquee{
  height: clamp(64px, 12vw, 130px);
  overflow:hidden;
  position: relative;
  isolation: isolate;
  /* 端がふわっと消えるマスク（動きを柔らかく） */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  position:absolute; inset:0;
  display:inline-flex; align-items:center;
  white-space:nowrap; gap:4rem;
  font-family: "Montserrat", "Noto Sans JP", system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(38px, 8.2vw, 84px);
  line-height:1;
  color:#000;
  opacity:.08;          /* 超低コントラストで上品に */
  mix-blend-mode:multiply;
  animation: marquee-left 28s linear infinite;
}
@keyframes marquee-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
/* 動きを抑えたい人のために */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation-duration: 999s; }
}

/* --- 画像＆オーバーレイ見出し --- */
.card-media{
  position: relative;
  margin:0;
  overflow:hidden;
}
.card-media img{
  width:100%; height:auto; display:block;
  transform: scale(1.02);
  transition: transform .8s ease;
}
.card-media::after{
  /* 下側を少し暗くして文字が読めるように */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

/* 初期状態（スクロールでふわっと） */
.reveal{ opacity:0; transform: translateY(16px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .7s ease, transform .7s ease; }
.reveal.in img{ transform: scale(1); }

/* 左下のタイトル（行別に改行） */
.card-title{
  position:absolute; left:16px; bottom:16px;
  display:flex; flex-direction:column; gap:2px;
  color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.35);
  font-family: "Montserrat", "Noto Sans JP", system-ui, sans-serif;
  font-weight:800;
  letter-spacing:.6px;
  font-size: clamp(20px, 3.3vw, 34px);
  line-height:1.05;
}
.card-title--3{ gap:4px; }

/* --- フッター行 --- */
.card-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 18px 18px;
  background: transparent;
}
.card-lead{
  margin:0;
  color:#222;
  font-size:14px;
}

/* --- View more ボタン --- */
.btn-view{
  display:inline-block;
  padding:10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color:#fff; text-decoration:none; font-weight:700;
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 16px rgba(20,37,93,.18);
}
.btn-view:hover{
  background: var(--ink-weak);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(20,37,93,.26);
}



/* ===== 日本語だけ大きめに ===== */
.card-lead {
  margin: 0;
  color: #222;
  font-size: 14px;
  line-height: 1.7;
}
.card-lead .lead-em {
  font-weight: 800;
  font-size: 16px;              /* スマホ */
  letter-spacing: .2px;
}
@media (min-width: 768px){
  .card-lead { font-size: 15px; }
  .card-lead .lead-em { font-size: 18px; }   /* PCで少し大きく */
}
@media (min-width: 1060px){
  .card-lead .lead-em { font-size: 19px; }
}

/* ===== 画像が“少し浮く”エフェクト ===== */
/* カード全体の影をほんの少し強める */
.design-card{
  transition: box-shadow .35s ease, transform .35s ease;
}
.design-card:hover{
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}

/* 画像だけをふわっと浮かせる（上に2〜4px & わずかに拡大） */
.card-media{
  transition: transform .45s ease, box-shadow .45s ease;
  will-change: transform;
}
.design-card:hover .card-media{
  transform: translateY(-4px);
}
.design-card:hover .card-media img{
  transform: scale(1.05);       /* 既存の scale(1) から滑らかに拡大 */
}

/* 既存の reveal アニメーションと両立させるための微調整 */
.reveal.in .card-media img,
.reveal.in img{
  transform: scale(1);          /* 表示後の基準値 */
}






/* --- レスポンシブ --- */
@media (max-width: 767px){
  .design-sections{ gap:32px; }
  .card-footer{ flex-direction:column; align-items:flex-start; }
  .btn-view{ align-self:flex-end; }
}


/* =========================
　Design Sections 終了
========================= */


/* =========================
　About Us セクション2025
========================= */


.about-us{
  position: relative;
  max-width: 1160px;
  margin: 60px auto 90px;
  padding: 0 16px 0 72px; /* 左にラベルの余白を作る */
}

/* 右側だけ角丸のグレースラブ */
.about-bg{
  position: absolute;
  right: 0;
  top: 18px;
  width: min(760px, 88%);
  height: clamp(260px, 36vw, 420px);
  background: #e9ebf1;
  border-radius: 42px 0 0 42px;
  z-index: 0;
}

/* 大きな縦書きラベル（薄く） */
.about-label{
  position: absolute;
  left: 12px;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 7.5vw, 82px);
  letter-spacing: 0.04em;
  color: #000;
  opacity: .12;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* コンテンツ配置 */
.about-content{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
  padding-top: 44px;
}

/* テキスト部 */
.about-text h3{
  font-size: clamp(18px, 2.6vw, 24px);
  margin: 0 0 8px;
  font-weight: 700;
}
.about-link{
  display: inline-block;
  color: #1e49c7;
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 18px;
}
.about-link:hover{ text-decoration: underline; }
.about-cta{
  margin-top: 6px;
  display: flex;
  justify-content: flex-end; /* 右寄せ（見本に合わせて） */
}

/* 画像カード（白枠＋影＋角丸） */
.about-photo{
  margin: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 10px;
  overflow: hidden;
  transition: transform .45s ease, box-shadow .45s ease;
}
.about-photo img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  transform: scale(1.00);
  transition: transform .6s ease;
}
/* 画像を“少し浮かせる” */
.about-photo:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
}
.about-photo:hover img{ transform: scale(1.03); }

/* News スラブ（背景） */
.news-slab{
  position: relative;
  z-index: 0;
  width: min(840px, 90%);
  margin: clamp(36px, 5vw, 52px) 0 0 auto; /* 右寄せ・上余白 */
  background: #e9ebf1;
  border-radius: 36px 0 36px 36px; /* 右上以外に丸み */
  padding: clamp(16px, 2.6vw, 24px);
}

/* 白いニュースカード */
.news-card{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: clamp(16px, 2.6vw, 24px);
}
.news-title{
  margin: 0 0 10px;
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
}
.news-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-list li{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid #eee;
}
.news-list li:first-child{ border-top: 0; }
.news-date{
  color: #666;
  font-size: 13px;
  white-space: nowrap;
}
.news-link{
  color: #0d3ea3;
  text-decoration: none;
  font-size: 14px;
}
.news-link:hover{ text-decoration: underline; }

/* フェードアップ（既存 .reveal と連携） */
.reveal{ opacity: 0; transform: translateY(16px); }
.reveal.in{ opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

/* ========== レスポンシブ ========== */
@media (max-width: 960px){
  .about-us{ padding-left: 56px; }
  .about-content{ grid-template-columns: 1fr; }
  .about-cta{ justify-content: flex-start; }
  .about-bg{
    top: 10px;
    width: 100%;
    height: clamp(220px, 48vw, 360px);
    border-radius: 0 0 42px 42px;
  }
  .news-slab{
    width: 100%;
    border-radius: 24px;
  }
}

@media (max-width: 640px){
  .about-us{ padding-left: 44px; margin: 40px auto 70px; }
  .about-label{ left: 4px; font-size: clamp(26px, 9vw, 60px); }
}



/* ================= About Us v2 ================= */
.aboutus-v2{
  position: relative;
  max-width: 1160px;
  margin: 50px auto 80px;
  padding: 20px 16px;           /* 外周余白 */
}

/* コンテンツ全体を囲う角丸グレー（右側が見えるように右余白を多めに） */
.aboutus-bg{
  position: absolute;
  inset: 0;
  background: #e9ebf1;
  border-radius: 28px;          /* 角丸 */
  z-index: 0;
}

/* 白いカード（左に縦書き） */
.aboutus-card{
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  padding: 28px 28px 24px 110px; /* 左に縦書き分の余白 */
  margin: 18px 56px 24px 22px;   /* 右側にグレーを見せるため右だけ広め */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* 左の縦書きラベル（白枠の“上”に配置） */
.aboutus-vlabel{
  position: absolute;
  left: 18px;
  top: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;     /* 縦書き時のラテン文字表示を安定 */
  transform: rotate(180deg);
  white-space: nowrap;         /* ← これで改行させない */
  word-break: keep-all;        /* ← 途中改行の抑止 */
  line-height: 1;              /* 余白を詰めて一列に */
  font-family: "Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 7.8vw, 80px);
  letter-spacing: .04em;
  color: #000;
  opacity: .12;
  user-select: none;
  pointer-events: none;
}

/* 2カラム：左テキスト / 右画像 */
.aboutus-grid{
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(16px, 3vw, 36px);
  align-items: start;
}

/* 左テキスト */
.aboutus-text h3{
  margin: 0 0 8px;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 22px);
}
.aboutus-link{
  display: inline-block;
  color: #1e49c7;
  text-decoration: none;
  font-weight: 700;
}
.aboutus-link:hover{ text-decoration: underline; }

/* 右：画像 + 右下の View more（画像の“下辺・右寄せ”） */
.aboutus-media{}
.aboutus-photo{
  margin: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  transition: transform .45s ease, box-shadow .45s ease;
}
.aboutus-photo:hover{ transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0,0,0,.16); }
.aboutus-photo img{ display:block; width:100%; height:auto; }

/* 画像の右下にボタン（カード内の配置） */
.aboutus-cta{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;    /* 右寄せ */
}

/* ===== News（同じグレー領域の中） ===== */
.aboutus-news{
  position: relative;
  z-index: 1;
  margin: 0 56px 28px 22px;     /* 白カードと揃える */
  background: #e0e3ea;          /* 少し濃いグレーで分節 */
  border-radius: 18px 18px 18px 18px;
  padding: 18px 22px 20px;
}
.news-title{
  margin: 0 0 8px;
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
}
.news-list{
  list-style: none; margin:0; padding:0;
}
.news-list li{
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #d5d9e2;
}
.news-list li:first-child{ border-top: 0; }
.news-date{ color:#666; font-size:13px; white-space:nowrap; }
.news-link{ color:#0d3ea3; text-decoration:none; font-size:14px; }
.news-link:hover{ text-decoration:underline; }

/* ===== reveal を使ったフェード（既存と揃える） ===== */
.reveal{ opacity:0; transform: translateY(16px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }

/* ===== Responsive ===== */
@media (max-width: 960px){
  .aboutus-card{ padding-left: 90px; margin-right: 28px; }
  .aboutus-news{ margin-right: 28px; }
  .aboutus-grid{ grid-template-columns: 1fr; }
  .aboutus-cta{ justify-content: flex-end; }
}
@media (max-width: 640px){
  .aboutus-card{ padding-left: 70px; margin: 14px 18px 18px 14px; }
  .aboutus-news{ margin: 0 18px 18px 14px; }
  .aboutus-vlabel{ left: 10px; font-size: clamp(28px, 9vw, 60px); }
}


/* =========================
　About Us セクション2025　終了
========================= */

/* =========================
　キャッチコピー無限ループ2025
========================= */

/* ===== Infinite Message Loop ===== */
.msg-loop{
  background: transparent;          /* 透明背景 */
  overflow: hidden;
  padding: 10px 0;                  /* 上下の余白（お好みで） */
  /* 両端のフェードが欲しければ下2行をON
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  */
}

/* 横並びのトラックを無限に流す */
.msg-track{
  display: inline-flex;
  align-items: center;
  gap: 36px;                        /* セパレーター以外の最低間隔 */
  white-space: nowrap;
  will-change: transform;
  animation: msg-marquee 28s linear infinite;  /* 速度はお好みで */
}

/* 右→左へ流す（内容を2セット入れているので -50% で継ぎ目が消える） */
@keyframes msg-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 1ユニット（星 + 2行テキスト） */
.msg-item{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  color: #9a9a9a;
}
.msg-star{
  font-size: 18px;
  line-height: 1;
}
.msg-text{
  font-family: "Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.5;
  color: #888;
  margin: 0;
  text-transform: uppercase;        /* 画像に近いトーン */
}

/* 縦線セパレーター */
.msg-sep{
  display: inline-block;
  width: 1px;
  height: 32px;                     /* 画像の見た目に近い高さ */
  background: #bdbdbd;
  margin: 0 36px;                   /* 両側の空き */
  flex: 0 0 auto;
}

/* スマホ微調整 */
@media (max-width: 640px){
  .msg-text{ font-size: 12px; }
  .msg-sep{ height: 26px; margin: 0 24px; }
}

/* =========================
　キャッチコピー無限ループ終了 2025
========================= */

/* =========================
　会社概要ページ（aboutus.html) 2025
========================= */

/* ========== AboutUs 固定ヒーロー ========== */
.company-hero{
  position: relative;
  height: clamp(46vh, 56vw, 62vh);
  display: grid;
  place-items: center start;
  overflow: hidden;
  color: #fff;
}
/* ===== HERO: 目に見えるズーム＆パン + ライトの走査 ===== */
.company-hero__bg{
  position: absolute; inset: 0;
  background: url("../img/company/company-profile.jpg") center/cover no-repeat;
  z-index: 0;
  will-change: transform, opacity;
  animation: kenburns-pan 16s ease-in-out infinite alternate;
}

/* 画像上を斜めに走る一本の強いハイライト */
.company-hero__bg::after{
  content:"";
  position:absolute; inset:-30% -50%;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 47%,
    rgba(255,255,255,.38) 50%,   /* 真ん中を濃く強調 */
    rgba(255,255,255,0) 53%);
  mix-blend-mode: screen;
  pointer-events:none;
  animation: sweep 6s linear infinite;
}
@keyframes sweep {
  from { transform: translateX(-100%) translateY(-100%); }
  to   { transform: translateX(100%) translateY(100%); }
}

/* 高級感ノイズ（控えめ） */
.company-hero__bg::before{
  content:"";
  position:absolute; inset:0;
  background: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
  opacity:.2;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* タイトル可読性のための既存オーバーレイ（濃度を少しだけ上げるならここで） */
.company-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.35));
  z-index: 1;
}

/* Keyframes */
@keyframes kenburns-pan{
  0%   { transform: scale(1.05) translate3d(-3%, -2%, 0) rotate(0.001deg); }
  100% { transform: scale(1.18) translate3d( 4%,  2%, 0) rotate(0.001deg); }
}
@keyframes sweep{
  0%   { transform: translateX(-60%) rotate(0.001deg); opacity:.55; }
  100% { transform: translateX( 60%) rotate(0.001deg); opacity:.35; }
}

/* 動きが苦手な環境の配慮 */
@media (prefers-reduced-motion: reduce){
  .company-hero__bg{ animation: none; }
  .company-hero__bg::after{ animation: none; }
}




.company-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
  z-index: 1;
}
.company-hero__inner {
  position: relative;
  z-index: 2;
  width: min(1160px, 92%);
  margin-inline: auto;

  /* ★中央寄せではなく左上寄せに変更 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  padding-top: 0vh;   /* 上からの余白 */
  padding-left: 0vw;  /* 左からの余白 */
}

.company-eyebrow {
  margin: 0 0 10px;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .18em;
  opacity: .8;
  font-family: "Montserrat","Noto Sans JP",system-ui,sans-serif;
}

.company-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.2;

  /* ★左寄せ */
  text-align: left;

  /* ★フォントカラーを白に変更 */
  color: #fff;
  opacity: 0.8;   /* Company Profile と同じ透明度を適用 */
}

/* ========== 会社概要 ========== */
.company-main{
  background: #0f1b3f;
  color: #eef2ff;
  padding: clamp(28px, 4vw, 44px) 0 70px;
}
.company-profile{
  width: min(1160px, 92%); margin: 0 auto;
}
.company-profile__title{
  margin: 0 0 16px;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
}

.company-profile__grid{
  display: grid;
  gap: clamp(20px, 2.6vw, 28px); /* 余白を広めに */
}

/* 1行カード */
.company-row{
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: start;
  gap: 18px;

  background: #0f1b3f; /* 背景を統一 */
  border: 0.5px solid rgba(255,255,255,.12); /* ★もっと薄い枠線 */

  border-radius: 14px;
  padding: clamp(14px, 2.4vw, 18px) clamp(16px, 2.6vw, 22px);

  box-shadow: none;
  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease,
              background .35s ease, border-color .35s ease;
}

/* ホバー時：立体的に浮かせる影 */
.company-row:hover,
.company-row:focus-within{
  transform: translateY(-6px);
  background: #0f1b3f;
  border-color: transparent;
  box-shadow: 
    0 12px 24px rgba(0,0,0,.45),
    0 0 28px rgba(0,0,0,.35);
}

.company-row dt{
  font-weight: 700; color: #cfd7ff;
  letter-spacing: .02em; line-height: 1.7;
}
.company-row dd{
  margin: 0; color: #eef2ff;
  line-height: 1.9;
}
.company-row a{ color:#9db7ff; text-decoration: underline; }
.company-row a:hover{ color:#c9d7ff; }

/* 小さめ注釈 */
.company-row dd small{
  color: #c9cfe9; opacity: .85;
}

/* === レスポンシブ === */
@media (max-width: 720px){
  .company-row{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 14px 16px;
  }
  .company-row dt{ font-size: 13px; opacity: .9; }
  .company-row dd{ font-size: 14px; }
}


/* === 会社概要の直下に画像配置 === */

.company-visual{
  width: min(1160px, 92%);
  margin: clamp(24px, 5vw, 48px) auto clamp(48px, 8vw, 80px);
}

/* カード本体：角丸＋薄いアウトライン＋深めの影（ホバーで強化） */
.kv-card{
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.03);                 /* 紺背景となじませる */
  outline: 1px solid rgba(255,255,255,.20);          /* 薄いフレーム */
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  transform-style: preserve-3d;
  transition: transform .6s ease, box-shadow .6s ease, outline-color .6s ease;
  will-change: transform, box-shadow;
}

/* 画像：軽くグレースケール→ホバーで色戻し＆ズーム */
.kv-card img{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.02);
  filter: grayscale(20%) contrast(1.05) saturate(.95);
  transition: transform .8s ease, filter .8s ease;
  will-change: transform, filter;
}

/* 入場アニメ（revealと相性良し）：中央からふわっと出現 */
.kv-card{
  --clip: 10%;
  -webkit-mask: radial-gradient(120% 120% at 50% 50%, #000 0 calc(100% - var(--clip)), transparent calc(100% - var(--clip)));
  mask: radial-gradient(120% 120% at 50% 50%, #000 0 calc(100% - var(--clip)), transparent calc(100% - var(--clip)));
}
.reveal.in .kv-card{ --clip: 0%; transition: mask 1s ease, -webkit-mask 1s ease; }

/* シャイン（一本の光の帯が斜めに走る） */
.kv-card::after{
  content:"";
  position:absolute; inset:-40% -60%;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 46%,
      rgba(255,255,255,.85) 50%,       /* 目立つ一本の帯 */
      rgba(255,255,255,0) 54%);
  mix-blend-mode: screen;
  transform: translateX(-30%) rotate(0.001deg);
  opacity: .0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.kv-card:hover::after{
  opacity: .7;
  animation: sweep-strong 1.1s ease-out forwards;
}
@keyframes sweep-strong{
  0%   { transform: translateX(-30%) translateY(0) rotate(12deg); }
  100% { transform: translateX(65%)  translateY(0) rotate(12deg); }
}

/* ホバー：少し持ち上げて奥行き・影を強く */
.kv-card:hover{
  transform: translateY(-8px) rotateX(.6deg) rotateY(-.6deg);
  outline-color: transparent;
  box-shadow: 0 28px 70px rgba(0,0,0,.48);
}
.kv-card:hover img{
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.06) saturate(1.08);
}

/* 低速回線/モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .kv-card,
  .kv-card img,
  .kv-card::after{
    transition: none;
    animation: none;
  }
}

/* 既存の .reveal 用（未定義なら） */
.reveal{ opacity:0; transform: translateY(12px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .7s ease, transform .7s ease; }




/* ===== Philosophy（経営理念） ===== */
.philosophy {
  position: relative;
  background: #0f1b3f;  /* 紺背景 */
  color: #eef2ff;
  padding: clamp(36px, 6vw, 64px) 0 clamp(48px, 7vw, 80px);
  overflow: hidden;
}

/* 左の縦書き VISION */
.ph-vlabel {
  position: absolute;
  left: 0; /* 左端固定 */
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: "Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(38px, 8.5vw, 92px);
  color: rgba(255,255,255,.12);
  user-select: none;
  pointer-events: none;
}

/* 中央寄せされた本文コンテナ */
.ph-inner {
  width: min(1160px, 92%);
  margin-inline: auto;

  /* VISION分の余白を確保 */
  padding-left: clamp(70px, 12vw, 140px);
}

/* 見出し */
.ph-title {
  margin: 0 0 clamp(14px, 2.2vw, 20px);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 24px);
}

.ph-card { margin: clamp(20px, 3vw, 28px) 0; }

.ph-box {
  position: relative;
  background: #0f1b3f;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  padding: clamp(16px, 3vw, 26px);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ph-box:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(0,0,0,.42);
}

.ph-eyebrow {
  margin:0 0 6px;
  color:#cfd7ff;
  font-size:clamp(12px,1.9vw,14px);
  font-weight:600;
  letter-spacing:.06em;
}
.ph-headline {
  margin:0;
  font-size:clamp(20px,3.4vw,30px);
  font-weight:800;
  line-height:1.4;
}
.ph-body { margin-top: clamp(14px, 2.4vw, 18px); }
.ph-body p { margin:0 0 1em; line-height:1.9; color:#eef2ff; }



/* --- モバイル調整 --- */
@media (max-width: 640px){
  .ph-inner {
    padding-left: clamp(40px, 9vw, 64px); /* VISIONが見切れないように少し余白 */
  }
  .ph-vlabel { font-size: clamp(28px, 7.5vw, 56px); }
}

/* =========================
　会社概要ページ（aboutus.html) 2025 終了
========================= */





/* =========================
　CSRページ（csr.html) 2025 
========================= */

/* ========== CSR HERO（晴れたピッチ・爽快バージョン） ========== */
.csr-hero {
  position: relative;
  height: clamp(55vh, 58vw, 70vh);
  display: grid;
  place-items: center start;
  overflow: hidden;
  color: #fff;
}

/* 背景：明るめのズームパン */
.csr-hero__bg {
  position: absolute;
  inset: 0;
  background: url("../img/csr/csr-top.jpg") center/cover no-repeat;
  z-index: 0;
  will-change: transform, filter;
  animation: csr-zoom-pan 14s ease-in-out infinite alternate;
  filter: brightness(1.05) contrast(1.08) saturate(1.15); /* 晴れた感じを強調 */
}

/* 風を切るような光の筋（軽やかに） */
.csr-hero__bg::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.0) 40%,
    rgba(255,255,255,0.15) 60%,
    rgba(255,255,255,0.0) 100%
  );
  mix-blend-mode: screen;
  animation: breeze-light 7s linear infinite;
  pointer-events: none;
}

/* 太陽光のきらめき（柔らかい光球が動く） */
.csr-hero__bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 20% 25%, rgba(255,255,200,.35) 0%, transparent 60%),
              radial-gradient(circle at 70% 35%, rgba(255,255,255,.28) 0%, transparent 70%);
  mix-blend-mode: screen;
  opacity: .7;
  animation: sunflare 9s ease-in-out infinite alternate;
  pointer-events: none;
}

/* 青空と芝生の鮮やかさを強調するオーバーレイ */
.csr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,120,255,0.25) 0%,
    rgba(0,180,80,0.15) 50%,
    rgba(0,0,0,0.35) 100%
  );
  z-index: 1;
}

/* コンテンツ（テキスト部分はそのまま） */
.csr-hero__inner {
  position: relative;
  z-index: 2;
  width: min(1160px, 92%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 2vw;
  animation: title-pop 1.6s cubic-bezier(0.25, 1.1, 0.5, 1) both;
}

.csr-eyebrow {
  margin: 0 0 14px;
  font-size: clamp(14px, 1.8vw, 18px);  /* かなり小さめに抑える */
  letter-spacing: .18em;
  opacity: .85;
  font-family: "Montserrat","Noto Sans JP",system-ui,sans-serif;
  text-transform: uppercase;
  line-height: 1.4;
}

.csr-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 100px); /* CSRをかなり大きく */
  line-height: 1.1;
  text-align: left;
  color: #fff;
  letter-spacing: .04em;
  text-shadow: 0 6px 20px rgba(0,0,0,0.55),
               0 0 32px rgba(0,150,255,0.65);
}


/* ===== アニメーション ===== */
@keyframes csr-zoom-pan {
  0%   { transform: scale(1.05) translate3d(-2%, -1%, 0); }
  50%  { transform: scale(1.15) translate3d(2%, 2%, 0); }
  100% { transform: scale(1.10) translate3d(4%, -2%, 0); }
}

@keyframes breeze-light {
  0%   { transform: translateX(-20%) translateY(-10%); opacity: 0.25; }
  50%  { transform: translateX(20%) translateY(10%); opacity: 0.4; }
  100% { transform: translateX(-20%) translateY(-10%); opacity: 0.25; }
}

@keyframes sunflare {
  0%   { transform: scale(1) translateX(-10%) translateY(0); opacity: .5; }
  50%  { transform: scale(1.1) translateX(5%) translateY(5%); opacity: .8; }
  100% { transform: scale(1) translateX(-5%) translateY(-5%); opacity: .6; }
}

@keyframes title-pop {
  0%   { opacity: 0; transform: scale(0.9) translateY(40px); }
  60%  { opacity: 1; transform: scale(1.05) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

/* 動きが苦手な環境の配慮 */
@media (prefers-reduced-motion: reduce) {
  .csr-hero__bg, .csr-hero__bg::before, .csr-hero__bg::after,
  .csr-hero__inner { animation: none; }
}



/* ========== CSR Sponsor Section ========== */
/* ========== CSR Sponsor Section（既存） ========== */
.csr-sponsor{
  background:#f7fbff;
  color:#0b1c3d;
  padding: clamp(48px,6vw,84px) 0;
}
.csr-sponsor__inner{
  width: min(1160px,92%);
  margin: 0 auto;
  text-align: center;
}
.csr-sponsor__title{
  margin: 0;
  font-weight: 800;
  line-height: 1.4;
  font-size: clamp(22px,3.2vw,34px);
  letter-spacing: .03em;
}

/* ▼ 中央から左右に伸びる青いライン（アニメ前は見えない） */
.csr-sponsor__divider{
  display: inline-block;
  width: clamp(140px,22vw,300px);
  height: 3px;
  margin: clamp(10px,1.8vw,16px) auto clamp(18px,3vw,28px);
  background: linear-gradient(90deg,#0057ff 0%, #00b0ff 100%);
  border-radius: 999px;

  /* 追加：中央スケール演出（初期は0で非表示） */
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
}

/* 交差監視で .in が付いたとき伸びる */
.reveal-line.in{
  animation: line-grow 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes line-grow{
  0%   { opacity: 0; transform: scaleX(0); }
  30%  { opacity: 1; transform: scaleX(.2); }
  100% { opacity: 1; transform: scaleX(1); }
}

/* テキスト */
.csr-sponsor__text{
  color:#223;
  font-size: clamp(14px,1.6vw,16px);
  line-height: 2;
  opacity:.95;
}
.csr-sponsor__text p{ margin: 0 0 .9em; }

/* ▼ ロゴ：サイズ少し小さく・ゆっくり浮き出す */
.csr-sponsor__logo{
  margin: clamp(28px,5vw,42px) auto 0;
  /* 以前より小さめに */
  max-width: min(560px, 74%);
}
.csr-sponsor__logo img{
  display:block;
  width:100%;
  height:auto;

  /* 初期状態：より奥から・少し強めのボカし */
  opacity:0;
  transform: translateY(28px) scale(.93);
  filter: blur(8px);

  /* ゆっくり・なめらかに */
  transition:
    opacity 1.6s cubic-bezier(.2,.8,.2,1),
    transform 1.6s cubic-bezier(.2,.8,.2,1),
    filter 1.6s ease;
  will-change: opacity, transform, filter;
}

/* 表示トリガー（既存のreveal-popに合わせる） */
.reveal-pop.in img{
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .csr-sponsor__divider{ transform:none; opacity:1; animation:none; }
  .csr-sponsor__logo img{ transition:none; opacity:1; transform:none; filter:none; }
}



/* ========== CSR：横浜FC ECO PARTNER（下段セクション） ========== */
.csr-eco{
  background:#f5f5f5;
  padding: clamp(56px,6vw,96px) 0;
  color:#0b1c3d;
}
.csr-eco__inner{
  width:min(1160px,92%);
  margin:0 auto;
  text-align:center;
}

/* 見出し＋ライン（中央→左右に伸びる演出は .reveal-line で発火） */
.csr-eco__title{
  margin:0;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.02em;
  font-size: clamp(22px,3vw,32px);
}
.csr-eco__title span{
  font-size: clamp(20px,2.6vw,26px);
  opacity:.9;
}
.csr-eco__divider{
  display:inline-block;
  width: clamp(150px,22vw,320px);
  height:3px;
  margin: clamp(12px,2vw,18px) auto clamp(20px,3vw,28px);
  background: linear-gradient(90deg,#0057ff 0%, #00b0ff 100%);
  border-radius:999px;
  transform: scaleX(0);
  transform-origin:center;
  opacity:0;
}
/* 既存の .reveal-line.in に line-grow が設定済みなら不要。未定義なら下記も追加
@keyframes line-grow{0%{opacity:0;transform:scaleX(0)}30%{opacity:1;transform:scaleX(.2)}100%{opacity:1;transform:scaleX(1)}}
.reveal-line.in{animation:line-grow .9s cubic-bezier(.2,.8,.2,1) forwards}
*/

.csr-eco__lead{
  max-width: 880px;
  margin: 0 auto clamp(24px,3.2vw,40px);
  font-size: clamp(14px,1.7vw,16px);
  line-height: 2;
  color:#2a3550;
}

/* ロゴ列 */
.csr-eco__brands{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(18px,3.6vw,42px);
  margin: clamp(10px,2.5vw,26px) 0 clamp(24px,4vw,40px);
}
.csr-eco__brands img{
  height: auto;
  max-height: clamp(44px,9vw,86px);
  width:auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.08));
}
.csr-eco__brands .brand--yokohama{ max-height: clamp(66px,11vw,120px); }
.csr-eco__brands .brand--eco{ max-height: clamp(44px,8vw,78px); }
.csr-eco__brands .brand--msd{ max-height: clamp(52px,9vw,92px); }
.csr-eco__brands .brand--x{
  font-size: clamp(30px,6vw,54px);
  line-height:1;
  color:#1e4bd8;
  text-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* 写真グリッド */
.csr-eco__gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px,2vw,18px);
}
.csr-eco__shot{
  margin:0;
  border-radius: 12px;
  overflow: hidden;
  background:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(12px);
  transition: transform .35s ease, box-shadow .35s ease;
}
.csr-eco__shot img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1.0);
  transition: transform .5s ease;
}
.csr-eco__shot:hover{
  transform: translateY(0);
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
}
.csr-eco__shot:hover img{
  transform: scale(1.03);
}

/* ふわっと表示（既存の .reveal-pop に合わせる） */
.reveal-pop{ opacity:0; transform: translateY(14px); }
.reveal-pop.in{ opacity:1; transform:none; transition: opacity .9s ease, transform .9s ease; }

/* レスポンシブ */
@media (max-width: 920px){
  .csr-eco__brands{ flex-wrap:wrap; }
  .csr-eco__gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .csr-eco__gallery{ grid-template-columns: 1fr; }
  .csr-eco__brands .brand--x{ order: 2; width: 100%; text-align: center; }
}


/* =========================
　CSRページ（csr.html) 2025 終了
========================= */

/* =========================
　creativeページ（creative.html) 2025 
========================= */

/* ===== Production ===== */
:root{
  --ink:#14255D;
  --ink-weak:#2a3b7d;
  --card-bg:#fff;
  --card-shadow: 0 14px 36px rgba(0,0,0,.10);
  --brand: #0057ff;
  --brand2:#00b0ff;
}

.prod{
  background:#FFF;
  color:#111;
  padding: clamp(60px,8vw,100px) 0;
}
.prod__inner{
  width:min(1160px,92%);
  margin:0 auto;
  text-align:center;
}

.prod__title{
  margin:0;
  font-weight:800;
  font-size: clamp(24px,3.4vw,32px);
  letter-spacing:.02em;
}
.prod__sub{
  display:block;
  margin-top:6px;
  font-weight:700;
  font-size: clamp(14px,2vw,18px);
  color:#222;
  opacity:.75;
}

/* 中央から左右に伸びるライン */
/* ===== Production の線を Web制作と同じ挙動に統一 ===== */
/* もともとの .prod__divider の transform/opacity/gradient 定義は不要なので上書きします */
.prod__divider{
  width: 0;                 /* ← 最初は 0px */
  height: 1px;              /* 太さも同じ */
  background: #002060;      /* 色も同じ（お好みで変更可） */
  margin: 15px auto;        /* 中央配置 */
  border-radius: 0;         /* 太字見え防止 */
  animation: wp-line-grow 1.2s ease forwards;  /* ← 左右に広がらず、中央で一定幅まで伸びる */
  /* 既存の scaleX/transform-origin/opacity は使わない */
}

/* 万一 .reveal-line を付けていた場合も、こちらを優先させる */
.prod__divider.reveal-line{
  animation: wp-line-grow 1.2s ease forwards !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Web 制作の線で使っているものと同じキーフレーム（未定義なら併記） */
@keyframes wp-line-grow {
  from { width: 0; opacity: 0; }
  to   { width: 220px; opacity: 1; } /* 必要なら 220px を調整 */
}


.prod__lead{
  margin: 0 auto clamp(24px,4vw,48px);
  max-width: 820px;
  font-size: clamp(14px,1.6vw,16px);
  line-height: 2;
  color:#444;
}

/* Grid */
.prod__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px,3vw,36px);
}
@media (max-width: 920px){
  .prod__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .prod__grid{ grid-template-columns: 1fr; }
}

/* Card */
.prod-card{
  background: var(--card-bg);
  border-radius: 18px;
  padding: clamp(18px,2.6vw,24px) clamp(16px,2.6vw,22px);
  box-shadow: var(--card-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform, box-shadow;
  position: relative;
  isolation:isolate;  /* シャインの重なり制御 */
}

/* “ふわっと＋少しズーム”で入ってくる（スクロール時） */
.reveal-up{ opacity:0; transform: translateY(16px) scale(.98); }
.reveal-up.in{ 
  opacity:1; transform:none; 
  transition: opacity .8s ease, transform .8s ease; 
}

/* アイコンブロック */
.prod-card__media{
  position: relative;
  display:grid; place-items:center;
  width: clamp(110px,12vw,150px);
  height: clamp(110px,12vw,150px);
  margin: 10px auto 14px;
  border-radius: 22px;
  background: radial-gradient(120% 120% at 30% 20%, #f7faff 0%, #eef3ff 60%, #e6edff 100%);
  box-shadow: 0 10px 24px rgba(0,0,50,.10), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease;
}
.prod-card__media img{
  width: 62%;
  height: auto;
  display:block;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.08));
  transition: transform .35s ease;
}

/* 走るシャイン（hover） */
.prod-card__media .shine{
  content:"";
  position:absolute; inset:-30%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
  transform: translateX(-60%) rotate(12deg);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
}

/* Hover：カード少し持ち上がる + アイコン浮く + シャイン走る */
.prod-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,30,.14);
}
.prod-card:hover .prod-card__media{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,50,.16), inset 0 1px 0 rgba(255,255,255,1);
}
.prod-card:hover .prod-card__media img{
  transform: translateY(-2px) scale(1.03);
}
.prod-card:hover .prod-card__media .shine{
  opacity:.9;
  animation: prod-sweep 1.1s ease-out forwards;
}
@keyframes prod-sweep{
  0%{ transform: translateX(-60%) rotate(12deg); }
  100%{ transform: translateX(60%) rotate(12deg); }
}

/* Tilt（軽い傾き・奥行） */
.prod-card{
  perspective: 800px;
}
.prod-card:hover .prod-card__media{
  transform: translateY(-2px) rotateX(.8deg) rotateY(-.8deg);
}

/* タイトル */
.prod-card__title{
  margin: 10px 0 0;
  font-weight: 800;
  font-size: clamp(16px,2.2vw,18px);
  letter-spacing:.02em;
  color:#111;
}
.prod-card__title span{
  display:block;
  margin-top:4px;
  font-weight: 700;
  font-size: clamp(12px,1.8vw,14px);
  color:#555;
  opacity:.85;
}

/* スタッガー（連続で気持ちよく出す） */
.prod__grid .reveal-up:nth-child(1){ transition-delay: .0s; }
.prod__grid .reveal-up:nth-child(2){ transition-delay: .07s; }
.prod__grid .reveal-up:nth-child(3){ transition-delay: .14s; }
.prod__grid .reveal-up:nth-child(4){ transition-delay: .21s; }
.prod__grid .reveal-up:nth-child(5){ transition-delay: .28s; }
.prod__grid .reveal-up:nth-child(6){ transition-delay: .35s; }

/* 動きが苦手な環境配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1; transform:none; }
  .prod-card:hover,
  .prod-card:hover .prod-card__media,
  .prod-card:hover .prod-card__media img{ transform:none; box-shadow: var(--card-shadow); }
  .prod-card__media .shine{ animation:none; opacity:0; }
}



/* ========== Web実績：横スクロール ========== */
.work-marquee{
  background: #f5f7fa;
  padding: clamp(20px,4vw,40px) 0;
}
.work-marquee__viewport{
  width: min(1160px, 92%);
  margin-inline: auto;
  overflow: hidden;
  position: relative;

  /* 両端をふわっと隠すマスク */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.work-marquee__track{
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  /* duration は JSが --wm-duration に入れてくれます */
  animation: wm-loop var(--wm-duration, 40s) linear infinite;
  will-change: transform;
}

.work-marquee:hover .work-marquee__track{ /* ホバーで一時停止 */
  animation-play-state: paused;
}

.work-marquee li{
  list-style: none;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.work-marquee img{
  display: block;
  height: clamp(160px, 24vw, 260px);
  width: auto;
  object-fit: cover;
}

/* カード軽めの動き（かっこよく） */
.work-marquee li:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  filter: saturate(1.1) contrast(1.05);
}

/* 右→左：JSが入れる --loop-distance(px) ぶんだけ動かす */
@keyframes wm-loop{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--loop-distance, 0px))); }
}

/* 動きが苦手な環境配慮 */
@media (prefers-reduced-motion: reduce){
  .work-marquee__track{ animation: none; }
}




/* Web 制作テキスト部分 */
.web-production {
  text-align: center;
  padding: 60px 20px 40px;
  background: #f9f9f9;
}

.wp-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  margin: 0;
}

.wp-title span {
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 400;
}

.wp-line {
  width: 0;
  height: 1px;
  background: #002060;
  margin: 15px auto;
  animation: wp-line-grow 1.2s ease forwards;
}

@keyframes wp-line-grow {
  from { width: 0; opacity: 0; }
  to   { width: 220px; opacity: 1; }
}

.wp-text {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-top: 15px;
}

/* =========================
　creativeページ（creative.html) 2025  終了
========================= */


/* =========================
　onlineページ（online.html) 2025 
========================= */

/* Online Business セクション */
.online-business {
  text-align: center;
  padding: 80px 20px 40px;
  background: #f9f9f9;
}

.ob-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  margin: 0;
  color: #111;
}

/* 新しいライン演出（下からフェード＆伸びる） */
.ob-line {
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #002060, #00b0ff); /* 青系グラデーション */
  margin: 15px auto;
  opacity: 0;
  transform: translateY(6px);
  animation: ob-line-grow 1.4s ease-out forwards;
}

@keyframes ob-line-grow {
  0%   { width: 0; opacity: 0; transform: translateY(6px); }
  40%  { opacity: 1; }
  100% { width: 240px; opacity: 1; transform: translateY(0); }
}




/* ===== Online Business 内容セクション ===== */
.ob-sections{
  background:#f7f7f8;
  padding: clamp(50px,6vw,90px) 0;
}
.ob-inner{
  width:min(1160px,92%);
  margin:0 auto;
  display:grid;
  gap: clamp(40px,5vw,70px);
}

/* 2カラム（画像 / テキスト） */
.ob-row{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px,3vw,40px);
  align-items:center;
}
.ob-row.is-reverse{
  grid-template-columns: 1fr 1.2fr;
}
.ob-row.is-reverse .ob-media{ order:2; }
.ob-row.is-reverse .ob-text{  order:1; }

/* 画像カード（浮遊・ズーム・シャイン） */
.ob-media{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  transform: translateZ(0);               /* GPU ヒント */
  transition: transform .45s ease, box-shadow .45s ease;
  isolation:isolate;
}
.ob-media img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
  transition: transform 1.0s ease, filter .6s ease;
}

/* シャイン（斜めに走る光） */
.ob-media::after{
  content:"";
  position:absolute; inset:-40% -60%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 46%,
                                       rgba(255,255,255,.8) 50%,
                                       rgba(255,255,255,0) 54%);
  mix-blend-mode: screen;
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
}

/* hover 効果 */
.ob-media:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,0,0,.18);
}
.ob-media:hover img{
  transform: scale(1.07);
  filter: saturate(1.08) contrast(1.06);
}
.ob-media:hover::after{
  opacity:.85;
  animation: ob-sweep 1.1s ease-out forwards;
}
@keyframes ob-sweep{
  0%   { transform: translateX(-30%) rotate(12deg); }
  100% { transform: translateX(65%)  rotate(12deg); }
}

/* テキスト */
.ob-text h3{
  margin: 0 0 12px;
  font-size: clamp(18px,2.6vw,22px);
  font-weight: 700;
  letter-spacing:.02em;
}
.ob-text p{
  margin:0;
  line-height: 1.95;
  color:#333;
  font-size: clamp(14px,1.7vw,16px);
}

/* スクロール入場（既存 .reveal-up と同じ挙動を想定） */
.reveal-up{ opacity:0; transform: translateY(16px) scale(.98); }
.reveal-up.in{ opacity:1; transform:none; transition: opacity .8s ease, transform .8s ease; }

/* レスポンシブ */
@media (max-width: 920px){
  .ob-row,
  .ob-row.is-reverse{
    grid-template-columns: 1fr;
  }
  .ob-row.is-reverse .ob-media,
  .ob-row.is-reverse .ob-text{
    order: initial;
  }
}

/* 動きが苦手な環境配慮 */
@media (prefers-reduced-motion: reduce){
  .ob-media,
  .ob-media img,
  .ob-media::after{ transition:none; animation:none; }
  .reveal-up{ opacity:1; transform:none; }
}



/* ===== Online Shop Section ===== */
.online-shop {
  text-align: center;
  padding: 80px 20px;
  background: #f9f9f9;
}

.os-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  margin: 0;
}

.os-title span {
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 400;
}

.os-line {
  width: 0;
  height: 2px;
  background: #000; /* 黒色に統一 */
  margin: 15px auto;
  animation: wp-line-grow 1.2s ease forwards;
}

@keyframes wp-line-grow {
  from { width: 0; opacity: 0; }
  to   { width: 220px; opacity: 1; }
}

.os-text {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-top: 15px;
}

/* ロゴアイコン */
.os-logos {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  gap: clamp(40px, 8vw, 100px);
  flex-wrap: wrap;
}

.os-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #111;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.os-logo img {
  width: clamp(60px, 10vw, 90px);
  height: auto;
  margin-bottom: 10px;
  transition: transform 0.4s ease;
}

.os-logo span {
  font-size: 14px;
  font-weight: 500;
}

.os-logo:hover {
  transform: translateY(-6px);
  filter: brightness(1.15);
}

.os-logo:hover img {
  transform: scale(1.1);
}


/* ========== Orchid Section ========== */
.orchid {
  background: #f9f9f9;
  text-align: center;
  padding: 70px 20px;
}

.orchid__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  margin: 0;
}
.orchid__title span {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
}
.orchid__line {
  width: 0;
  height: 1px;
  background: #002060;
  margin: 15px auto 20px;
  animation: line-grow 1.2s ease forwards;
}
@keyframes line-grow {
  from { width: 0; opacity: 0; }
  to   { width: 220px; opacity: 1; }
}
.orchid__lead {
  max-width: 720px;
  margin: 0 auto 40px;
  line-height: 1.8;
  font-size: 14px;
  color: #333;
}

/* ---------- Hero 基準 ---------- */
.orchid__hero{
  position: relative;
}
.orchid__hero > img{
  display:block; width:100%; height:auto;
}

/* ---------- 中央に重ねる本体 ---------- */
.orchid__branding{
  position: absolute !important;
  top:50%; left:50%;
  /* 中央寄せの基準はこれ。以降の .reveal を上書きしても必ず維持する */
  transform: translate(-50%, -50%);
  text-align:center;
  z-index:2;
  width:min(92%,780px);
  pointer-events:none;
}

/* ロゴ・受賞バナーの視認性 */
.orchid__logo{
  width: clamp(160px, 26vw, 260px);
  margin: 0 auto 10px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.orchid__name{
  margin: 0 0 16px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  color:#fff;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}
.orchid__awards{
  display:flex; justify-content:center; gap: clamp(10px, 3vw, 28px);
}
.orchid__award{
  width: clamp(90px, 16vw, 160px);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}

/* スマホ微調整（任意） */
@media (max-width: 640px){
  .orchid__branding{ transform: translate(-50%, calc(-50% - 4vh)); }
}

/* ---------- reveal-up を中央寄せと両立させる専用上書き ---------- */
/* ここがポイント：中央寄せ(translate -50%,-50%) を“必ず”含めて定義 */
.orchid__branding.reveal-up{
  opacity: 0;
  transform: translate(-50%, -50%) translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
.orchid__branding.reveal-up.in{
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}


/* ===== Scroll Reveal Animations ===== */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
}

/* Links */
.orchid__links {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.orchid-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #111;
  transition: transform .3s ease;
}

.orchid__icon {
  width: 80px;          /* 統一サイズ */
  height: 80px;         /* 正方形の枠を強制 */
  object-fit: contain;  /* 縦横比を保持して収める */
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.orchid-link p {
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

.orchid-link:hover .orchid__icon {
  transform: scale(1.1);
}
.orchid-link:hover p {
  color: #d63384; /* orchidカラー */
}

/* =========================
　onlineページ（online.html) 2025  終了
========================= */


/* =========================
　コンタクトページ（contact.html) 2025 
========================= */

/* ===== Contact ===== */
.contact{ background:#f5f7fa; padding:60px 16px 80px; }
.contact__inner{ width:min(860px,92%); margin:0 auto; }

.contact__title{ text-align:center; margin:0; font-weight:700; font-size:clamp(24px,3.2vw,32px); }
.contact__title span{ display:block; margin-top:6px; font-weight:500; font-size:clamp(14px,2vw,18px); }
.contact__line{ width:0; height:1px; background:#002060; margin:14px auto 16px;
  animation: c-line-grow 1s ease forwards; }
@keyframes c-line-grow{ from{width:0;opacity:.0} to{width:220px;opacity:1} }
.contact__lead{ text-align:center; color:#444; font-size:14px; line-height:1.9; margin:0 0 26px; }

/* form */
.contact__form{ display:grid; grid-template-columns:1fr; gap:12px; }
.f-label{ font-size:14px; color:#222; margin-top:8px; }
.req{ color:#d22; font-size:.9em; margin-left:.25em; }
.f-input, .f-textarea, .contact__submit, .consent{ font-size:15px; }
.f-input, .f-textarea{
  width:100%; border:1px solid #e1e4ea; background:#fff;
  padding:12px 14px; border-radius:10px; outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.f-textarea{ resize:vertical; min-height:140px; }
.f-input:focus, .f-textarea:focus{
  border-color:#8aa7ff; box-shadow:0 0 0 3px rgba(0,87,255,.12);
}

/* 同意 */
.consent{ margin:6px 0 10px; }
.consent__label{ display:flex; align-items:center; gap:8px; user-select:none; }
.consent input[type="checkbox"]{ width:16px; height:16px; }

/* ボタン */
.contact__submit{
  justify-self:center;
  margin-top:8px;
  width:min(260px,70%);
  padding:12px 18px;
  border:none; border-radius:999px;
  background:#0d1b4a; color:#fff; font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition: transform .15s ease, opacity .2s ease, box-shadow .25s ease, background .2s ease;
}
.contact__submit:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.18); }
.contact__submit[disabled]{ opacity:.45; pointer-events:none; }

/* エラー */
.form-error{ color:#d22; font-size:13px; min-height:1.2em; margin:2px 0 0; }

/* 蜜壺（隠し） */
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Consent */
.consent { margin-top: 18px; }
.consent__title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 8px;
}
.consent__box{
  height: 220px;
  overflow: auto;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
  line-height: 1.7;
  font-size: 13px;
  white-space: pre-wrap;      /* pre でも折り返し */
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}
.consent__box.read { outline: 2px solid #e6f2ff; }
.consent__agree {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 14px;
}
.consent__agree input[disabled] { filter: grayscale(1); cursor: not-allowed; }
.consent__hint { margin: 6px 0 0; font-size: 12px; color: #666; }




/* ========== Recruit Section (revised) ========== */
:root{
  --recruit-bg:#f6f7fb;
  --recruit-ink:#111;
  --recruit-weak:#545b66;
  --card-shadow: 0 14px 36px rgba(0,0,0,.10);
  --brand:#002060;
}

.recruit{
  background:#f3f4f6;
  padding: clamp(64px,7.5vw,96px) 20px;
  display:grid; place-items:center;
}

.recruit__card{
  width:min(980px,94%);
  background:#fff;
  border-radius:22px;
  box-shadow: var(--card-shadow);
  padding: clamp(34px,4.6vw,56px) clamp(26px,4.6vw,56px);   /* 余白UP */
}

.recruit__kicker{
  margin:0 0 10px;
  text-align:center;
  color: var(--brand);
  font-weight:700;
  letter-spacing:.08em;               /* 文字間ほんのり */
  font-size: clamp(12px,1.5vw,13px);
}

.recruit__title{
  margin:0 0 80px;                    /* タイトル下の余白拡大 */
  text-align:center;
  font-size: clamp(30px,4.2vw,42px);
  letter-spacing:.06em;
  font-weight:800;
  color: var(--recruit-ink);
}

.recruit__body{
  color: var(--recruit-weak);
  font-size: clamp(14px,1.65vw,15.5px);
  line-height: 2;                      /* 行間ゆったり */
  letter-spacing:.02em;
  width:min(840px,100%);
  margin: 0 auto;
}

.recruit__body > p{                   /* 段落の間隔を広げる */
  margin: 0 0 40px;
}
.recruit__bullets{
  margin: 14px 0 16px 1em;
  padding:0;
}
.recruit__bullets li{
  margin: 6px 0;
}

/* 職種アイテム */
.recruit__jobs{
  margin: clamp(30px,4.6vw,44px) auto 6px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(24px,3.6vw,40px);         /* アイテム間の余白UP */
  width:min(840px,100%);
  text-align:center;
}

.job{
  user-select:none;
  transition: transform .25s ease, filter .25s ease;
}

.job__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 96px;                         /* アイコン統一サイズ */
  height: 96px;
  margin: 0 auto 12px;
}
.job__icon img{
  width:100%; height:100%; object-fit:contain; display:block;
}
/* 画像が無いときのFontAwesome代替 */
.job__fa{
  display:none;
  font-size: 54px;
  color:#6b7280;
}

.job__name{
  display:block;
  font-size: clamp(13.5px,1.7vw,15px);
  letter-spacing:.02em;
}

/* “カード化”はせず、軽い反応だけ */
.job:hover{ transform: translateY(-3px); filter:saturate(1.05); }

@media (max-width:820px){
  .recruit__jobs{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:520px){
  .recruit__jobs{ grid-template-columns: 1fr; }
}


/* =========================
　コンタクトページ（contact.html) 2025  終了
========================= */


/* =========================
　店舗・空間（interior.html) 2025 
========================= */

/* ========== MSD WORKS (店舗・空間デザイン) ========== */
:root{
  --ink:#0f2240;
  --sub:#334a6b;
  --brand:#1a3cff;
  --brand2:#00b0ff;
  --panel:#0f1d3b;
  --card-bg:#fff;
  --ring: 0 0 0 1px rgba(0,0,0,.04) inset;
  --shadow: 0 14px 36px rgba(8,18,40,.16);
}

.msdw__inner{
  width:min(1160px,92%);
  margin-inline:auto;
  padding: clamp(48px,7vw,80px) 0;
}

/* 小見出し */
.msdw__overline{
  text-align:center;
  font-size:12px;
  letter-spacing:.06em;
  color:#7a889d;
  margin:0 0 6px;
}
.msdw__kicker{
  text-align:center;
  font-weight:700;
  font-size: clamp(18px,2.2vw,20px);
  color:#111;
  margin:0 0 18px;
  position:relative;
}
.msdw__kicker::after{
  content:"";
  display:block;
  width: clamp(120px,24vw,220px);
  height:1px;
  margin: 12px auto 0;
  background: #222;
  opacity:.7;
}

/* バナーヘッダー */
.msdw__hero{
  background: linear-gradient(100deg, var(--panel) 0%, #12214a 100%);
  color:#fff;
  border-radius: 16px;
  padding: clamp(20px,5vw,32px) clamp(20px,6vw,40px);
  text-align:center;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.msdw__hero::before{
  /* 横に流れるほのかなライン */
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(120% 120% at -10% 50%, rgba(255,255,255,.08), transparent 55%),
              linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: msdw-sheen 6s linear infinite;
  pointer-events:none;
}
@keyframes msdw-sheen{ from{transform:translateX(-40%)} to{transform:translateX(40%)} }

.msdw__eyebrow{
  display:inline-block;
  font-weight:700;
  letter-spacing:.08em;
  font-size:12px;
  opacity:.85;
  margin-bottom:6px;
}
.msdw__copy{
  margin:0;
  font-size: clamp(16px,2.6vw,22px);
  letter-spacing:.02em;
}
.msdw__copy b{
  color:#bfe0ff;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* グリッド（必要なら） */
.msdw__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px,3vw,28px);
  margin-top: 40px; /* 下げたい量を指定 */
}
@media (max-width: 760px){
  .msdw__grid{ grid-template-columns: 1fr; }
}

/* カード */
.msdw-card{
  background: var(--card-bg, #fff);
  border-radius: 18px;
  padding: clamp(18px,2.6vw,22px);
  box-shadow: var(--ring, 0 0 0 0 rgba(0,0,0,0)), var(--shadow, 0 14px 36px rgba(0,0,0,.10));
  transition: transform .35s ease, box-shadow .35s ease;
}
.msdw-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--ring, 0 0 0 0 rgba(0,0,0,0)), 0 22px 54px rgba(8,18,40,.22);
}

/* 見出し（日本語＋英語サブ） */
.msdw-card__title{
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: #0f2240;
  margin: 0 0 2px;
  line-height: 1.2;
}
.msdw-card__subtitle{
  display:block;
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 400;
  color:#666;
  letter-spacing:.08em;
  margin-top: 4px;
}

/* 画像と説明（既存があればそのままでOK） */
.msdw-card__media{ margin: 12px 0 10px; }
.msdw-card__media img{ width:100%; height:auto; display:block; border-radius:12px; }
.msdw-card__desc{ font-size:14px; line-height:1.8; color:#444; margin:8px 0 0; }



/* 画像 */
.msdw-card__media{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  aspect-ratio: 4 / 3;
  background:#f4f6fa;
  margin-bottom: 12px;
  transform: translateZ(0);
}
.msdw-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s;
}
.msdw-card:hover .msdw-card__media img{ transform: scale(1.05); filter:saturate(1.05); }

/* 走るシャイン */
.msdw-card__shine{
  position:absolute; inset:-20%;
  background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.6) 50%, transparent 55%);
  mix-blend-mode: screen; opacity:0;
  transition: opacity .25s ease;
}
.msdw-card:hover .msdw-card__shine{
  opacity:.9; animation: msdw-sweep 1.1s ease-out forwards;
}
@keyframes msdw-sweep{ from{transform:translateX(-50%) rotate(12deg)} to{transform:translateX(50%) rotate(12deg)} }

.msdw-card__desc{
  margin: 0;
  text-align:center;
  color:#334;
  font-size: clamp(13px,1.8vw,14px);
  line-height:1.8;
}

/* 既存の .reveal-up がある前提でOK */


/* ===== Achievements ===== */
.achv{
  background:#f7f8fb;
  padding: clamp(52px, 7vw, 96px) 0;
  overflow-x: hidden;                     /* 横スクロール根絶（影/拡大対策） */
}

/* 見出し */
.achv__head{ text-align:center; width:min(1100px,92%); margin:0 auto; }
.achv__eyebrow{ margin:0 0 6px; font-size: clamp(12px,1.6vw,14px); color:#6b78a1; letter-spacing:.08em; }
.achv__title{ margin:0; font-weight:700; font-size: clamp(22px,3.2vw,30px); color:#0f2240; }
.achv__line{ width:0; height:1px; background:#0f2240; margin:14px auto 34px; animation: wp-line-grow 1s ease forwards; }
@keyframes wp-line-grow { from{width:0;opacity:0} to{width:220px;opacity:1} }

/* グリッド：最大1160pxに収め、ギャップ最小化＆安全マージン */
.achv__grid{
  max-width: 1160px;                      /* セクションの横幅に必ず収める */
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(6px, 1.6vw, 12px);/* 端で影や拡大が当たらない余白 */
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* PC：3枚横 */
  gap: clamp(6px, 0.9vw, 12px);                      /* ギャップを小さく＝画像大きく */
}
@media (max-width: 960px){
  .achv__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));/* SP：2枚横 */
    gap: 8px;
    padding-inline: 8px;
  }
}

/* ====== カード（figure） ====== */
.achv-card{
  position: relative;
  overflow: visible;                        /* figcaption を切らない */
  border-radius: 16px;
  aspect-ratio: 16 / 9;                     /* ワイドで見栄えUP */
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.achv-card img{
  width: 100%; height: 100%; object-fit: cover; display:block;
  border-radius: 16px;                      /* 角丸は画像側に */
  box-shadow: 0 10px 24px rgba(20,40,80,.12);
  transform: scale(1.02);
  transition: transform .5s ease;
}

/* ホバー演出（ズーム＋シャドウ＋光） */
.achv-card::after{
  content:""; position:absolute; inset:0; border-radius:16px;
  background: radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 48%),
              linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,20,40,.28) 100%);
  opacity:0; transition: opacity .35s ease; pointer-events:none;
}
.achv-card:hover img{ transform: scale(1.06); filter: saturate(1.05) contrast(1.03); }
.achv-card:hover::after{ opacity:1; }

/* --- Achievements: hover時の薄黒オーバーレイを無効化 --- */
.achv-card::after{
  content: none !important;   /* 擬似要素そのものを出さない */
}
.achv-card:hover::after{
  opacity: 0 !important;      /* 念のため */
}

/* ====== 画像下の2行キャプション ====== */
.achv-cap{
  display: block;
  text-align: center;
  margin-top: 8px;                           /* 画像との間隔は最小限 */
  line-height: 1.55;
}
.achv-cap__title{
  display: block;
  font-weight: 700;
  color: #0f2240;
  font-size: clamp(13px, 1.6vw, 14px);
}
.achv-cap__loc{
  display: block;
  color: #667090;
  font-size: clamp(12px, 1.5vw, 13px);
}

/* ===== ライトボックス（既存） ===== */
.achv-lightbox{
  position: fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background: rgba(9,14,30,.75); z-index: 9999; backdrop-filter: blur(2px);
}
.achv-lightbox.is-open{ display:flex; }
.achv-lightbox__img{ max-width: 92vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.achv-lightbox__btn,.achv-lightbox__close{
  position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer; line-height:1;
  backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease;
}
.achv-lightbox__btn{ top:50%; transform:translateY(-50%); font-size:42px; padding:.4em .4em; border-radius:12px; }
.achv-prev{ left: 3vw; } .achv-next{ right:3vw; }
.achv-lightbox__close{ top:4vh; right:3vw; font-size:32px; padding:.35em .5em; border-radius:12px; }
.achv-lightbox__btn:hover,.achv-lightbox__close:hover{ background:rgba(255,255,255,.24); transform: translateY(-50%) scale(1.05); }
.achv-lightbox__close:hover{ transform:none; }

/* 既存の “ふわっと出現” と連携 */
.reveal-up{ opacity:0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal-up.in{ opacity:1; transform:none; }




/* ===== Store Planning ===== */
.plan{
  background:#f7f8fb;
  padding: clamp(56px, 7vw, 96px) 0;
}

.plan__head{
  text-align:center;
  width:min(1100px,92%);
  margin:0 auto;
}
.plan__eyebrow{
  margin:0 0 6px;
  font-size: clamp(12px,1.6vw,14px);
  color:#6b78a1;
  letter-spacing:.08em;
}
.plan__title{
  margin:0;
  font-weight:700;
  font-size: clamp(22px,3.2vw,30px);
  color:#0f2240;
}
.plan__line{
  width:0; height:1px; background:#0f2240;
  margin:14px auto 34px;
  animation: wp-line-grow 1s ease forwards;
}
/* 既にあれば重複OK */
@keyframes wp-line-grow{from{width:0;opacity:0} to{width:220px;opacity:1}}

.plan__grid{
  width:min(1160px,92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px,2.4vw,28px);
}
@media (max-width: 920px){
  .plan__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* カード */
.plan-card{
  background:#fff;
  border-radius:16px;
  padding: clamp(16px,2vw,20px);
  box-shadow: 0 10px 24px rgba(15,34,64,.10);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.plan-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(15,34,64,.18);
  filter: saturate(1.02) contrast(1.02);
}

.plan-card__media{
  display:grid; place-items:center;
  aspect-ratio: 1 / 1;
  margin: 6px 0 12px;
}
.plan-card__media img{
  width: min(86%, 280px);
  height: auto;
  display:block;
}

.plan-card__title{
  margin:0 0 8px;
  text-align:center;
  font-weight:800;
  font-size: clamp(16px,2.4vw,20px);
  letter-spacing:.02em;
}
.plan-card__title--pink{ color:#ff3d8a; } /* 見出しの差し色 */

.plan-card__desc{
  margin:0;
  text-align:center;
  color:#333;
  font-size: clamp(13px,1.6vw,14px);
  line-height:1.8;
}



/* =========================
　店舗・空間（interior.html) 2025  終了
========================= */


/*
  ===============================================================
  フッター　会社概要 フッター 2025
  ===============================================================
*/


.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  margin: 80px 0; /* 上下の余白 */
  @media(width <= 960px) {
    grid-template-columns: 1fr; /* タブレット以下は1カラム */
    gap: 40px;
    margin: 60px 0;
  }
}

/* PC: 画像左 */
.img-left .image {
  order: -1;
}

/* PC: 画像右 */
.img-right .text {
  order: -1;
}

/* 画像のスタイル */
.image {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  @media(width <= 960px) {
    border-radius: 10px;
  }
  img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    @media(width <= 960px) {
      aspect-ratio: 4 / 3;
    }
  }
}

/* テキストのスタイル */
.text {
  @media(width <= 600px) {
    padding-inline: 20px;
  }
  h3 {
    color: #14255D;
    font-size: 28px;
    font-weight: 700;
    margin-top: 20px;
    @media(width <= 600px) {
      font-size: 24px;
    }
  }
  p {
    margin-top: 20px;
    @media(width <= 600px) {
      font-size: 14px;
    }
  }
}

/* タブレット・スマホで画像とテキストを交互に並べる */
@media (width <= 960px) {
  .layout {
    grid-template-columns: 1fr; /* すべて1カラム */
  
  }

  .img-left .image,
  .img-right .image,
  .img-left .text,
  .img-right .text {
    order: 0; /* order をリセット */
  }

  /* 偶数番目の .layout の画像をテキストの前にする */
  .layout:nth-of-type(even) .image {
    order: -1;
  }

  /* 偶数番目の .layout のテキストを画像の後にする */
  .layout:nth-of-type(even) .text {
    order: 1;
  }
}

/* 初期状態（非表示 + 位置ずらし） */
.image {
  opacity: 0;
  transform: scale(0.8) translateY(50px); /* 縮小しつつ下から上へ */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.text {
  opacity: 0;
  transform: translateY(-50px); /* 上から下へ */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* スクロール時に表示されるエフェクト */
.show .image {
  opacity: 1;
  transform: translateY(0);
}

.show .text {
  opacity: 1;
  transform: translateY(0);
}


/* 会社概要 company.html 終了*/





/* SHOP情報 */
  .shop-section{
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    position: relative;
    margin: 20px 0 0 0; /* top余白 */
  }

/* 背景グレー用　SHOP情報 2025*/
  .shop-section-ather{
  background-color: #dfe2e2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  position: relative;
  margin: 20px 0 0 0; /* top余白 */
}

  .shop-container {
    max-width: 1160px;
    margin: 0 auto;
    height: 630px;
    padding: 20px 20px;
  }

  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 40px 60px;
  }

  .text {
    h3 {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      margin: 0 0 20px;
      display: flex;
      align-items: baseline;
      gap: 1em;
      span {
        font-size: 0.6em;
      }
    }

    h3 a {
      font-size: 20px;
    }

    h3 a:hover {
      color: #fc84ca;
    }

  dl {
    display: grid;
    grid-template-columns: 100px 1fr;
    @media (width <= 600px){
      grid-template-columns: 80px 1fr;
    }
    dt,dd {
      font-size: 14px;
      padding: 10px;
      border-top: 1px solid #ccc;
    }
    dd img {
      height: 20px;
      margin-right: 10px;
    }
    dd a:hover {
      color: #fc84ca;
    }
  }
}
  .map {
    border-radius: 15px;
    overflow: hidden;
    iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 5 / 4;
    }
  }

  .copyright {
    text-align: center;
    font-size: 12px;
    }
/* SHOP情報 終了*/


/* コンタクト */
  .contact-container {
    padding: 50px 20px;
    text-align: center;
  }

  .heading-group {
    text-align: center;
    margin: 0 0 60px;

    h2 {
    font-size: 40px; 
    font-weight: 700;
    }

    span {
      font-size: 20px; 
    }
  }

  .contact-container {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
    margin-inline: auto;
    max-width: 700px;
  }

  .label {
    margin-bottom: 20px;
  }

  .description {
    br {
      display: none;
    }
  }

  .number {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    img {
      width: 1em;
    }
  }

  .number:hover{
    color: #fc84ca;
  }

  .hour {
    font-size: 13px;
    display: block;
    margin-top: 1em;
  }
  .button {
    display: inline-block;
    color: #fff;
    background-color: #14255D;
    padding: 1em 5em;
    border-radius: 8px;
  }
  .button:hover{
    background-color: #fc84ca;
  }

}
/* コンタクト 終了*/





/* フッター一番下 */
.last {
  color: #fff;
  background-color: #14255D;
  padding: 50px 20px 50px;
  display: grid;
  justify-items: center;
  gap: 40px;

}
.logo {
  display: flex;
  flex-direction: column;   /* 縦並びにする */
  align-items: center;      /* 横方向の中央揃え */
  text-align: center;       /* テキストを中央寄せ */
  gap: 8px;                 /* 画像とテキストの間の余白 */
  color: #fff;              /* 文字色（背景が濃い色なので白推奨） */
  text-decoration: none;    /* リンク下線を消す */
}

.logo img {
  display: block;
  height: 60px;
  margin: 0 auto;
}

  .last ul {
    display: flex;
    gap: 40px;
  }

  a {
    font-size: 13px;
  }

  footer {
    position: relative;
    z-index: 2;
    /* コンテンツを読みやすくするための背景色（半透明） */
    width: 100%;
    margin-top: 20vh;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
  }

    footer-ather {
    position: relative;
    z-index: 2;
    /* コンテンツを読みやすくするための背景色（半透明） */
    width: 100%;
    margin-top: 20vh;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
  }
/* フッター終了 */


/* iPad（縦横 768〜1024px）をスマホと同じレイアウトへ揃える */
@media (min-width: 768px) and (max-width: 1024px) {

  /* =====================================
     コンテンツ幅（会社情報 & Contact 共通）
     ===================================== */
  #footer .shop-container,
  #footer .contact .container {
    max-width: 700px;
    width: 92%;
    margin: 0 auto;
  }

  /* ======================
     会社情報 見出し関連
     ====================== */
  #footer .shop-section h2 {
    font-size: 18px;
  }

  #footer .shop-section h3 a {
    font-size: 20px;      /* 「株式会社MSD」大きめ */
    font-weight: 700;     /* 太字 */
  }

  #footer .shop-section h3 span {
    font-size: 12px;
  }

  /* =========================================
     会社情報：項目左／内容右＋行の上にアンダーライン
     （←これがズレない正しい引き方）
     ========================================= */
  #footer .shop-section dl {
    margin-top: 24px;
    border-top: none;     /* ← 一番上の線は消す（ズレの原因） */
    padding: 0;
  }

  #footer .shop-section dt,
  #footer .shop-section dd {
    padding: 8px 0;
    border-top: 1px solid #ccc;  /* ← 各行の上に線（ズレない） */
    font-size: 14px;
    line-height: 1.7;
  }

  #footer .shop-section dt {
    float: left;
    width: 6.5em;          /* 項目幅調整 */
    font-weight: 400;
  }

  #footer .shop-section dd {
    margin-left: 6.5em;    /* コンテンツを右側に揃える */
  }

  #footer .shop-section dl::after {
    content: "";
    display: block;
    clear: both;
  }

  /* =========================
     マップを横幅いっぱいに
     ========================= */
  #footer .shop-section .map {
    margin-top: 24px;
  }

  #footer .shop-section .map iframe {
    display: block;
    width: 100%;
    height: 260px;
  }

  /* =========================
     Contact 見出し
     ========================= */
  #footer .contact .heading-group h2 {
    font-size: 28px;    /* 大きめ & 太字 */
    font-weight: 700;
  }

  #footer .contact .heading-group span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
  }

  /* =========================
     Contact レイアウト（1カラム）
     ========================= */
  #footer .contact .contact-container .layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  #footer .contact .tel,
  #footer .contact .form {
    width: 100%;
    text-align: center;
  }

  /* =========================
     メールアイコン＋アドレス横並び
     ========================= */
  #footer .contact .tel .number {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;     /* アドレス大きく */
    font-weight: 700;    /* 太字 */
  }

  #footer .contact .tel img {
    width: 52px;
    height: auto;
  }

  /* =========================
     「こちらへ」ボタン
     ========================= */
  #footer .contact .form .button {
    display: inline-block;
    padding: 14px 64px;
    border-radius: 999px;
    background: #163979;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
  }
}





/*
  ===============================================================
  ★レスポンシブ　スマートフォンやタブレットに対応　★
  ===============================================================
*/

/*
  ======================================
  ヘッダーレスポンシブ
  ======================================
*/
@media (max-width: 768px) {
  .header {
    left: auto;
    right: 20px;
  }

  .header-right {
    display: none;
  }

  .menu-button {
    position: fixed;
    width: 81px;
    top: 20px;
    right: 30px;
    z-index: 100;
    background: none;
    border: none;
    color: #fff;
  }

  /* ハンバーガーメニューボタンのアニメーション */
  .menu-icon::after,
  .menu-icon-ather::after {
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border:1px solid white;
    border-radius: 50%;
    animation: cercle 2.0s infinite;
  }
  
  @keyframes cercle {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  .menu-icon,
  .menu-icon-ather {
    width: 50px;
    height: 50px;
    margin: 5px;
  }

  .menu-icon span
  .menu-icon-ather span {
    width: 20px;
    height: 2px;
  }

  .menu-icon span:nth-child(1),
  .menu-icon-ather span:nth-child(1) { /* 三本線（上）位置の調整 スマホ*/
    top: calc(15% - 1px);
  }

  .menu-icon span:nth-child(3),
  .menu-icon-ather span:nth-child(3) { /* 三本線（下）位置の調整 スマホ*/
    top: calc(49% + 4px);
  }

 .mobile-menu {
  width: 300px;
}

/*
  ======================================
  ヘッダーレスポンシブ　終了
  ======================================
*/

/*
  ===============================================================
  背景部分 index以外　1枚固定　★#main-atherも連動
  ===============================================================
*/
.background-container-ather {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  /* 背景画像の指定例。適宜変更してください */
  background-size: cover;
  z-index: 1;
}

.background-ather img {
  width: 100%;
  height: 52vh;
  object-fit: cover;
  object-position: center;
}

/* オーバーレイの追加 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3); /* ここで薄暗いオーバーレイを追加 */
  pointer-events: none; /* クリックを透過させる */
}


/* メインロゴ index.html*/
.main-logo {
  position: absolute; /* section追加してもロゴが真ん中になるように修正: relative から absolute へ */
  color:#fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ロゴ index.html以外（ather）*/
.main-logo-ather {
  position: absolute; /* section追加してもロゴが真ん中になるように修正: relative から absolute へ */
  color:#fff;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.main-logo p,
.main-logo-ather p {
  font-size: 20px;
  font-weight: 700;
}

.main-logo img,
.main-logo-ather img {
  max-width: 200px;
  width: 100%;
  height: auto;
}

.aword {
  display: flex;  /* Flexboxを有効にして子要素を横並びにする */
  align-items: center; /* 中央揃え */
  justify-content: center; /* 水平方向の中央揃え、必要に応じて */
  max-width: 165px;
  padding: 0px 0 5px 0;
}

.aword img {
    height: 80px;  /* 各画像の高さを100pxに固定 */
    margin-right: 5px;  /* 画像間の間隔を10pxに */
}

/* 最後の画像の右余白を削除 */
.aword img:last-child {
    margin-right: 0;
}

/* メインロゴ index.html 終了*/




  #main {
    padding: 10px 20px 10px 10px;
    margin-top: 100vh; /* 小さいデバイスではマージントップを減少 */
  }

/* メインナビ */
  .main-nav-list {
    gap: 11px; /* ナビ間のスペースを縮小 */
  }
  .main-nav-item {
    font-size: 12px !important; /* 確実に適用 */
    padding: 8px 16px;
  }
/* メインナビ終了 */

/* News */
  .news-container {
    width: 95%;
    margin: 30px auto;
    padding: 15px;
  }

  .news-title {
    font-size: 20px; /* タイトルのフォントサイズを小さく */
  }

  .news-item {
    padding-left: 0; /* スマホでは左から0px */
  }

  .news-date {
    padding: 10px 20px; /* 日付のパディングを調整 */
  }

  .news-link {
    font-size: 14px; /* リンクのフォントサイズを調整 */
  }
/* News 終了*/

/* コンセプト */
  .concept-container {
    flex-direction: column; /* Flex項目を縦方向に並べる */
    padding: 10px 0 20px 0; /* 上余白を調整 */
    height: auto; /* 高さを自動調整 */
  }

  .concept-title {
    position: static; /* 絶対位置指定を解除 */
    left: auto; /* 左の位置指定を解除 */
    margin: 10px 0; /* 上下の余白のみを指定 */
    width: 100%; /* 幅を親要素全体に広げる */
    text-align: center; /* テキストを中央揃えにする */
    font-size: 18px; /* スマホでは少し小さめのフォントサイズに調整 */
  }

  .concept-container img {
    height: auto; /* 画像の高さを自動調整 */
  }

  .overlay-text {
    font-size: 15px; /* オーバーレイテキストのフォントサイズを小さく */
  }

  .concept-btn {
    top: 80%; /* スマホではボタンの位置を画面の中央に */
    left: 50%;
    transform: translate(-50%, 0%); /* スマホではボタンを完全に中心に配置 */
    padding: 10px 30px;
  }
/* コンセプト 終了*/



/* メニュー */

  .menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 550px;
  }

  .youto-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 500px;
  }

  .type-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
  }

  .cost-title,
  .youto-title,
  .type-title {
    order: -1; /* タイトルを最初に表示 */
    font-size: 18px;
    margin: 10px 5%;
    text-align: center;
  }

  .menu-list {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
/* メニュー 終了*/

/* コンタクト */
  .contact-container {
    .layout {
      display: grid;
      grid-template-columns: 1fr;
    }
  }  
/* コンタクト 終了*/

/* お祝いに贈る胡蝶蘭 */
  .product-container {
    justify-content: center;
  }
  .product-card {
    width: 47%;
  }
/* お祝いに贈る胡蝶蘭 終了*/


/* ショップ情報 */
.shop-section {
  display: flex;
  justify-content: start; /* 上揃え */
  align-items: start; /* 縦方向も上揃え */
  height: 980px;
  padding: 0 0;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
}

.text {
  h2 {
    font-size: 16px;
  }

  h3 {
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    display: flex;
    align-items: baseline;
    gap: 1em;

    }
  }

  h3 a {
    display: block; /* ブロック要素にして改行 */
    font-size: 1.2rem;
    text-decoration: none;
    color: #000;
  }

  h3 span {
    display: block; /* ブロック要素にして下に配置 */
    font-size: 0.9rem;
    color: #666;
  }

  dl dt {
    font-size: 12px;
  }


/* ショップ情報 終了*/


/* フッター一番下 */
.last {
  color: #fff;
  background-color: #14255D;
  padding: 40px 20px 20px;
  display: grid;
  justify-items: center;
  gap: 40px;

}
  .logo {
    display: block;
    img {
      display: block;
      height: 60px;
    }
  }

  .last ul {
    display: flex;
    gap: 18px;
  }

  a {
    font-size: 13px;
  }

  footer {
    position: relative;
    z-index: 2;
    /* コンテンツを読みやすくするための背景色（半透明） */
    width: 100%;
    margin-top: 20vh;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
  }

/* フッター終了 */










/* レスポンシブ 終了*/
}