@charset "utf-8";
/* ==========================================================================
   有限会社 関谷商店  style.css
   - 旧サイト（html_v101）の見た目・エフェクトを踏襲しつつ全面リライト
   - jQuery / bxSlider / FontAwesome 依存を撤廃（純 CSS + vanilla JS）
   - ブレイクポイント：1024px（タブレット）／599px（スマホ）… 旧サイトと同一
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  --c-blue: #007fc2;        /* メインブルー */
  --c-blue-2: #3399ce;      /* 事業紹介 偶数ブロック */
  --c-blue-nav: #5375a3;    /* 下層ナビ CONTACT */
  --c-blue-top: #3f98ef;    /* ページトップボタン */
  --c-green: #559f46;       /* ボタン hover / SP CONTACT */
  --c-green-dark: #015841;  /* 下層 SP メニューボタン */
  --c-green-hover: #01281d;
  --c-yellow: #ffff66;      /* NEWS 見出し */
  --c-gray: #eeeeee;
  --c-gray-2: #cccccc;
  --c-gray-3: #7d7d7d;
  --c-gray-4: #bfbfbf;
  --c-line: #dddddd;
  --c-text: #000000;
  --c-link: #434343;
  --c-red: #ff0000;
  --font-sans: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  --font-serif: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", YuMincho, serif;
  --w-home: 1200px;
  --w-sub: 1000px;
  --z-splash: 999;
  --z-drawer: 151;
  --z-overlay: 150;
  --z-pagetop: 60;
  --z-burger: 30;
  --z-mobilenav: 20;
}

/* --------------------------------------------------------------------------
   1. リセット／ベース
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
form, input, textarea, button, p, figure, figcaption, table, th, td, address {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 160%;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-weight: 700;
}
body { background: #fff; overflow-x: hidden; }
img { max-width: 100%; height: auto; vertical-align: middle; }
ul, ol { list-style: none; }
a { color: var(--c-link); text-decoration: none; transition: opacity .3s; }
a:hover { opacity: .6; }
p, li, dt, dd { text-align: left; }
input, textarea, button, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
iframe { display: block; border: 0; max-width: 100%; }
table { border-collapse: collapse; }
address { font-style: normal; }
ruby rt { font-size: .5em; font-weight: 400; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--c-blue-top); outline-offset: 2px; }

/* 電話リンク：PC ではクリック不可（旧サイト踏襲）、SP ではタップで発信 */
@media (min-width: 1025px) { a[href^="tel:"] { pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   2. 汎用クラス
   -------------------------------------------------------------------------- */
.inner { width: 95%; max-width: var(--w-sub); margin-left: auto; margin-right: auto; }
.home .inner { max-width: var(--w-home); }
.flex  { display: flex; flex-wrap: wrap; }
.flexb { display: flex; flex-wrap: wrap; justify-content: space-between; }
.flexc { display: flex; flex-wrap: wrap; justify-content: center; }
.rpic  { flex-direction: row-reverse; }
.sp { display: none; }
.fs12, .fs14 { font-size: 14px; }
.blue { color: var(--c-blue); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1024px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}

/* スクロール連動フェードイン（旧 .fead-mv → .mv） */
.fade { opacity: 0; transition: opacity .6s ease-out; }
.fade.is-visible { opacity: 1; }

/* ページトップボタン（100px スクロールで右からスライドイン） */
#page_top {
  position: fixed;
  right: -50px;
  bottom: 0;
  z-index: var(--z-pagetop);
  width: 50px;
  height: 50px;
  background: var(--c-blue-top);
  opacity: .6;
  transition: right .3s ease, opacity .3s;
}
#page_top.is-shown { right: 0; }
#page_top a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; }
#page_top a:hover { opacity: 1; }
#page_top svg { width: 25px; height: 25px; fill: #fff; }

/* Google マップ */
.map iframe { width: 100%; }

/* --------------------------------------------------------------------------
   3. トップページ（body.home）
   -------------------------------------------------------------------------- */

/* 3-1. スプラッシュ（ロゴがフェードアップ → 1.5 秒後に全体がフェードアウト） */
#splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
  background: var(--c-blue);
  color: #fff;
  text-align: center;
  transition: opacity .6s ease;
}
#splash.is-hide { opacity: 0; pointer-events: none; }
#splash_logo {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .6s ease;
}
#splash_logo.is-hide { opacity: 0; }
#splash_logo img { width: 300px; opacity: 0; animation: fadeUp .5s ease forwards; }
#splash_logo p {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 24px;
  color: #fff;
  text-align: center;
}
#splash_logo .fs14 { display: block; font-size: 14px; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(100px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 599px) {
  #splash_logo img { width: 220px; }
  #splash_logo p { font-size: 20px; }
}

/* 3-2. ヘッダー（メインビジュアルに重ねる） */
.home #wrapper { max-width: 100%; overflow: hidden; }
.home #header { position: relative; z-index: 1; }
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  padding: 30px 20px;
  transition: .5s;
}
.site-header .inner { width: 100%; max-width: var(--w-home); }
.site-header .logo { width: 30%; }
.site-header .logo a:hover { opacity: 1; }
.site-header .logo img {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
          drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
          drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff)
          drop-shadow(1px -1px 0 #fff) drop-shadow(-1px -1px 0 #fff);
}
#nav { width: 70%; }
#nav .inner { position: relative; }
#nav .hamburger { display: none; }
.global-nav ul {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 80%;
}
.global-nav li a {
  display: inline-block;
  width: 100%;
  padding: 15px 0 0 15px;
  margin-right: 20px;
  color: #fff;
  white-space: nowrap;
}
.global-nav li:last-child a {
  position: relative;
  width: 200px;
  margin-right: 2%;
  padding: 15px 0;
  border: 1px solid #fff;
  border-radius: 30px;
  text-align: center;
}
.global-nav li:last-child a::before {
  content: "";
  position: absolute;
  top: 19px;
  right: 20px;
  width: 10px;
  height: 16px;
  background: url(../images/b_w_aw_icon.png) no-repeat;
}

/* メインビジュアル */
.tit_pic img { width: 100%; }
.banner-link {
  position: absolute;
  bottom: 24px;
  left: 20px;
  z-index: 2;
  display: inline-block;
  max-width: 300px;
  line-height: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.banner-link:hover { opacity: 1; }
@media (max-width: 1024px) { .banner-link { max-width: 240px; bottom: 16px; left: 16px; } }
@media (max-width: 599px)  { .banner-link { max-width: 180px; bottom: 10px; left: 10px; } }

/* 3-3. NEWS 帯（縦スライド：PC のみ、JS 制御） */
.home_news { display: flex; align-items: center; background: var(--c-blue); }
.home_news .inner { max-width: 1000px; }
.home_news .left { width: 70%; }
.home_news .left .flex { align-items: center; }
.home_news h2 {
  width: 10%;
  padding: 20px 0;
  color: var(--c-yellow);
  text-align: center;
  text-transform: uppercase;
}
.home_news .right { width: 30%; padding-top: 10px; }
.home_news .right a {
  display: block;
  width: 200px;
  padding: 10px 0;
  border: 1px solid #fff;
  border-radius: 100px;
  color: #fff;
  text-align: center;
}
.news-ticker { width: 80%; }
.news-ticker.is-slider { overflow: hidden; }
.news-ticker.is-slider ul { transition: transform .5s ease; will-change: transform; }
.news-ticker.is-slider li { display: flex; align-items: center; }
.news-ticker li a { display: block; width: 100%; padding: 20px; background: var(--c-blue); color: #fff; }
.news-ticker .day { display: inline-block; margin-right: 20px; font-size: .8rem; color: #fff; }
.home_news h2 .sub, .news-ticker .badge, .news-dots { display: none; }

/* 3-4. 循環型社会の実現に向けて */
.home_future { padding: 130px 0; }
.home_future h2 img { padding-bottom: 30px; }
.home_future .tbox { width: 45%; }
.home_future .pic { position: relative; width: 46.75%; }
.home_future .pic::before {
  content: "";
  position: absolute;
  top: -63px;
  right: 0;
  width: 434px;
  height: 126px;
  background: url(../images/b_future_logo.png) no-repeat;
}
.home_future .pic li:first-child { width: 100%; padding-bottom: 20px; }
.home_future .pic li:nth-child(n+2) { width: 48%; }
.home_future .pic img { border-radius: 10px; }
.home_future p { font-weight: 100; }
.home_future .fs36b { display: block; padding-bottom: 64px; font-size: 36px; font-weight: 700; line-height: 1.4; }
.home_future .fs18b { display: block; padding-bottom: 20px; font-size: 18px; font-weight: 700; }

/* 3-5. 会社紹介（青帯） */
.home_about { padding: 90px 0; background: var(--c-blue); }
.home_about .pic { width: 50%; }
.home_about .pic img { border-radius: 10px; }
.home_about .tbox { position: relative; width: 45%; }
.home_about .tbox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 177px;
  height: 51px;
  background: url(../images/b_about_logo.png) no-repeat;
}
.home_about .tbox h3 { padding: 60px 0 30px; }
.home_about .tbox .fs24b { font-size: 24px; color: #fff; }
.home_about .tbox p { color: #fff; }
.home_about .tbox h3 + p { padding-bottom: 20px; }
.home_about .btn a {
  display: block;
  width: 300px;
  padding: 15px 0;
  border: 1px solid #fff;
  border-radius: 10px;
  background: var(--c-blue);
  color: #fff;
  text-align: center;
}

/* 3-6. できること */
.home_service { padding: 45px 0 65px; }
.home_service .h3c { position: relative; padding: 107px 0 50px; font-size: 24px; text-align: center; }
.home_service .h3c::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 340px;
  height: 104px;
  background: url(../images/b_service-_logo.png) no-repeat;
  transform: translateX(-50%);
}
.home_service .h3c + p { padding-bottom: 60px; font-weight: 100; text-align: center; }
.home_service ul { padding-bottom: 70px; }
.home_service li { width: 32%; margin: 0 auto; font-size: 24px; text-align: center; }
.home_service li img { margin-bottom: 20px; border-radius: 10px; }
.home_service .noitem a {
  display: block;
  max-width: 400px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid #000;
  border-radius: 10px;
  color: #000;
  font-size: 14px;
  text-align: center;
}

/* 3-7. 事業紹介（斜め分割の 4 ブロック） */
.home_work .inner { max-width: 1000px; }
.work_box { position: relative; padding: 72px 0 64px; isolation: isolate; }
.work_box::before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(30% + 100px);
  z-index: 1;
  width: 1500px;
  height: 100%;
  background: var(--c-blue);
}
.work_box:nth-child(2n)::before { right: auto; left: calc(30% + 100px); background: var(--c-blue-2); }
.work_box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 40%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
}
.work_box:nth-child(2n)::after { right: auto; left: 0; background-position: left top; }
.work_box.pic1::after { background-image: url(../images/b_company_01.jpg); }
.work_box.pic2::after { background-image: url(../images/b_company_02.jpg); }
.work_box.pic3::after { background-image: url(../images/b_company_03.jpg); }
.work_box.pic4::after { background-image: url(../images/b_company_04.jpg); }
.work_box .inner { position: relative; z-index: 2; }
.work_box .tbox { width: 54%; margin-right: auto; }
.work_box:nth-child(2n) .tbox { margin-left: auto; margin-right: 0; }
.work_box .h3s { display: block; padding-bottom: 40px; }
.work_box .h3s img { display: inline-block; }
.work_box .h3s .b { display: block; padding-top: 10px; color: #fff; font-size: 34px; line-height: 1.4; }
.work_box p { padding-bottom: 30px; color: #fff; font-size: 16px; line-height: 1.8; }
.work_box .btn a {
  position: relative;
  z-index: 0;
  display: block;
  width: 300px;
  padding: 20px 0;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  transition: .3s;
}
.work_box .btn a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-green);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .3s ease;
}
.work_box .btn a:hover { color: #fff; opacity: 1; }
.work_box .btn a:hover::before { transform: scaleX(1); transform-origin: 0 50%; }

/* 3-8. アクセス */
.home_access { padding: 80px 0; }
.home_access .inner { max-width: 1000px; }
.home_access .h3s { position: relative; padding-top: 50px; font-size: 24px; }
.home_access .h3s::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 197px;
  height: 48px;
  background: url(../images/b_access_logo.png) no-repeat;
}
.home_access .fs24b { padding-bottom: 20px; font-size: 24px; }
.home_access li { padding-bottom: 10px; }
.home_access li a { color: #000; }
.home_access .map { width: 100%; max-width: 530px; border-radius: 10px; overflow: hidden; }
.home_access .map iframe { height: 357px; }
.home_access .btn a {
  display: block;
  width: 300px;
  padding: 15px 0;
  border-radius: 10px;
  background: var(--c-blue);
  color: #fff;
  text-align: center;
}

/* 3-9. フッター（トップ） */
.footer-home { padding: 80px 0 0; background: var(--c-blue); }
.footer-home .inner { max-width: 1000px; }
.footer-home .tbox { width: 45%; }
.footer-home .tbox h2, .footer-home .tbox p, .footer-home .tbox li { color: #fff; }
.footer-home .tbox h2 { padding-bottom: 20px; font-size: 36px; }
.footer-home .tbox li { padding-bottom: 10px; }
.footer-home .tbox li a { color: #fff; }
.footer-home .sitemap li a { display: block; margin-right: 20px; color: #fff; }
.footer-home .sitemap li:last-child a { margin-right: 0; }
.footer-home .create_kb { padding: 10px 3% 10px 0; }
.footer-home .create_kb p { color: #fff; font-size: 12px; font-weight: 400; text-align: right; }
.footer-home .create_kb a { color: #fff; }
.footer-home .copyright { padding: 15px 0; color: #fff; font-size: 14px; font-weight: 100; text-align: center; }

/* 3-10. トップページ レスポンシブ */
@media (max-width: 1024px) {
  /* ハンバーガー */
  #nav .hamburger {
    display: block;
    position: fixed;
    top: 12px;
    right: 13px;
    z-index: var(--z-burger);
    width: 42px;
    height: 42px;
    cursor: pointer;
  }
  #nav .hamburger span {
    position: absolute;
    left: 6px;
    width: 30px;
    height: 2px;
    background: #000;
    transition: .3s ease-in-out;
  }
  #nav .hamburger span:nth-child(1) { top: 10px; }
  #nav .hamburger span:nth-child(2) { top: 20px; }
  #nav .hamburger span:nth-child(3) { top: 30px; }
  #nav .hamburger.active { transform: rotate(45deg); transition: all .3s ease-in-out .6s; }
  #nav .hamburger.active span:nth-child(2) { width: 0; }
  #nav .hamburger.active span:nth-child(1),
  #nav .hamburger.active span:nth-child(3) { transition-delay: .3s; }
  #nav .hamburger.active span:nth-child(1) { transform: translateY(4px); }
  #nav .hamburger.active span:nth-child(3) { transform: translateY(-16px) rotate(90deg); }

  /* 全画面ナビ（右からスライドイン） */
  .global-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-mobilenav);
    width: 100%;
    background: #28415c;
    text-align: center;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .9s, visibility 0s .9s;
  }
  .global-nav.active { transform: translateX(0); visibility: visible; transition: transform .9s; }
  .global-nav ul { position: static; display: block; width: 100%; background: #fff; }
  .global-nav li { width: 100%; border-bottom: 1px solid var(--c-line); }
  .global-nav li:last-child { border-bottom: 0; }
  .global-nav li a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 20px 0;
    background: var(--c-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 100;
    text-align: center;
    white-space: normal;
  }
  .global-nav li:last-child a { width: 100%; border: 0; border-radius: 0; background: var(--c-green); }
  body.nav-open { overflow: hidden; }

  .home_news { padding: 30px 0; }
  .home_news h2 { display: block; width: 100%; font-size: 30px; }
  .home_news .left { width: 100%; margin-bottom: 30px; }
  .home_news .right { width: 100%; }
  .home_news .right a { margin: 0 auto; }
  .news-ticker { width: 100%; }

  .home_about { padding-top: 100px; }

  .work_box::before { display: none; }
  .work_box::after, .work_box:nth-child(2n)::after { width: 100%; }
  .work_box .tbox, .work_box:nth-child(2n) .tbox {
    width: 95%;
    margin: 0 auto;
    padding: 5%;
    background: rgba(0, 127, 194, .8);
  }
  .work_box .h3s { padding-bottom: 15px; font-size: 20px; }
  .work_box .h3s img { display: block; margin: 0 auto; padding-bottom: 20px; }
  .work_box .h3s .b { padding-left: 0; font-size: 24px; text-align: center; }
  .work_box .h3s .b br { display: none; }
  .work_box p { text-align: center; }
  .work_box .btn a { width: 300px; margin: 0 auto; font-size: 14px; }

  .home_access .tbox { padding-bottom: 30px; }

  .footer-home .tbox { width: 100%; padding-bottom: 30px; }
  .footer-home .sitemap { display: none; }
  .footer-home .copyright { font-size: 10px; }
}
@media (max-width: 599px) {
  .home #main br { display: none; }
  .site-header { position: relative; padding: 10px; }
  .site-header .logo { width: 50%; }
  .tit_pic img { aspect-ratio: 4 / 5; object-fit: cover; }


  .home_future { padding: 50px 0; }
  .home_future h2 img { width: 80%; padding-bottom: 10px; }
  .home_future .tbox { width: 100%; margin: 0 auto; padding-bottom: 50px; }
  .home_future .fs36b { font-size: 24px; }
  .home_future .pic { width: 100%; margin: 0 auto; }
  .home_future .pic::before { top: -35px; right: auto; left: 0; background-size: 40%; }

  .home_about .pic, .home_about .tbox { width: 100%; margin: 0 auto; padding-bottom: 20px; }

  .home_service li { width: 48%; padding-bottom: 20px; font-size: 18px; }
  .home_service li img { display: block; margin: 0 auto 10px; }

  .work_box p { text-align: left; }
}

/* --------------------------------------------------------------------------
   4. 下層ページ共通（body.sub）
   -------------------------------------------------------------------------- */

/* 4-1. ヘッダー（青帯 + タイトル画像） */
.hd_tit { padding: 25px 0; background: var(--c-blue); }
.hd_tit .left { width: auto; min-width: 28%; }
.hd_tit .site-name { padding-top: 10px; color: #fff; font-size: 28px; text-align: left; }
.hd_tit .site-name a { color: #fff; }
.hd_tit .site-name .fs14, .hd_tit .site-name .fs14s { display: block; color: #fff; font-size: 14px; line-height: 1; }
.hd_tit .site-name .fs14 { padding-bottom: 5px; }
.hd_tit .right { width: 20%; }
.hd_tit .right p { color: #fff; }
.hd_tit .right .tel { padding: 2px 0; font-size: 20px; }
.hd_tit .right .tel a { color: #fff; }
.hd_tit .right .tel::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: -3px;
  background: url(../images/hd_tel.png) no-repeat center / contain;
}
.hd_tit .right .time { padding-left: 1em; }
.hd_main .h288 img { width: 100%; }

/* 4-2. グローバルナビ */
#gnav { position: relative; background: var(--c-blue); }
#gnav .menu-btn { display: none; }
#gnav ul { display: flex; width: 100%; max-width: 1000px; margin: 0 auto; }
#gnav li { flex: 1 1 0; }
#gnav li a { display: block; padding: 17px 13px; color: #fff; text-align: center; }
#gnav li .fs16b { display: block; font-size: 16px; }
#gnav li:last-child { background: var(--c-blue-nav); }
#gnav li a[aria-current="page"] { opacity: .85; }

/* 4-3. ページ見出し */
.subtit h1 { padding-bottom: 75px; text-align: center; }
.subtit .fs28b { display: block; padding: 100px 0 0; font-size: 28px; text-align: center; }

/* 4-4. 下層テーブル（会社概要・お知らせ詳細） */
.sub table { width: 89.5%; margin: 0 auto; }
.sub table tr { border: 1px solid var(--c-line); }
.sub table th { width: 30%; padding: 10px; background: var(--c-gray); color: #000; text-align: center; }
.sub table td { width: 60%; padding: 20px 0 20px 20px; background: #fff; text-align: left; }
.sub table td a { color: #000; }

/* 4-5. CONTACT 帯（全下層共通） */
#contact {
  background: var(--c-blue) url(../images/contact_pic.jpg) no-repeat right center;
}
#contact .contactbox { width: 100%; }
#contact .tbox { width: 41.5%; }
#contact h3 { padding: 70px 0 15px; color: #fff; font-size: 16px; }
#contact .fs28b { display: block; color: #fff; font-size: 28px; text-align: left; }
#contact .formbt a {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-bottom: 35px;
  border: 4px solid var(--c-gray-4);
  background: #fff;
  color: var(--c-link);
  font-size: 16px;
  line-height: 75px;
  text-align: center;
}
#contact .formbt img { margin-right: 20px; }
#contact .tel p { color: #fff; }
#contact .tel h4 { padding-bottom: 80px; color: #fff; font-size: 28px; }
#contact .tel h4 a { color: #fff; }
#contact .tel h4 img { margin-right: 20px; }

/* 4-6. フッター（下層） */
.footer-sub { padding-top: 40px; }
.footer-sub .ftaddress .site-name { color: #000; font-size: 28px; }
.footer-sub .ftaddress .site-name a { color: #000; }
.footer-sub .ftaddress .site-name .fs14, .footer-sub .ftaddress .site-name .fs14s { display: block; color: #000; font-size: 14px; line-height: 1; }
.footer-sub .ftaddress .site-name .fs14s { padding-left: 8%; }
.footer-sub .ftaddress p a { color: #000; }
.footer-sub .links { width: 60%; }
.footer-sub .links ul { display: flex; width: 100%; padding-right: 10%; }
.footer-sub .links li { width: 25%; text-align: center; }
.footer-sub .links li a { display: block; padding: 17px 13px 0; color: #000; text-align: center; }
.footer-sub .links .fs16b { display: block; color: var(--c-blue); font-size: 16px; }
#copyright { width: 100%; margin-top: 110px; background: var(--c-blue); }
#copyright p { color: #fff; line-height: 50px; text-align: center; }

/* 4-7. 下層 レスポンシブ（ヘッダー／ドロワーナビ／CONTACT／フッター） */
@media (max-width: 1024px) {
  .hd_tit .left { width: 100%; }
  .hd_tit .right { display: none; }
  .hd_tit .site-name .fs14s { padding-left: 2%; }

  /* 右端に緑のメニューボタン → 200px のドロワーが右からスライドイン */
  #gnav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-drawer);
    width: 200px;
    height: 100%;
    padding: 0;
    transform: translateX(200px);
    transition: transform .5s ease;
  }
  #gnav.action { transform: translateX(0); }
  #gnav .inner { width: 100%; height: 100%; padding-top: 2px; }
  #gnav ul { display: block; width: auto; height: 100%; overflow-y: auto; }
  #gnav li { flex: none; width: auto; border-bottom: 1px solid #fff; }
  #gnav li a {
    padding: 8px 7px 8px 20px;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: left;
  }
  #gnav li a:hover { background: var(--c-green-hover); opacity: 1; }
  #gnav li img { display: none; }
  #gnav .menu-btn {
    display: block;
    position: absolute;
    top: 0;
    left: -44px;
    width: 38px;
    height: 38px;
    margin: 2px;
    border: 1px solid #fff;
    background: var(--c-green-dark);
    box-shadow: 0 0 0 2px var(--c-green-dark);
    opacity: .8;
    cursor: pointer;
  }
  #gnav .menu-btn .n {
    position: absolute;
    top: 50%;
    left: 6px;
    display: block;
    width: 26px;
    height: 2px;
    margin-top: -1px;
    padding: 0;
    background: #fff;
    text-indent: -9999px;
    transition: transform .1s ease;
  }
  #gnav .menu-btn .n::before,
  #gnav .menu-btn .n::after {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    transition: transform .1s ease, top .1s ease;
  }
  #gnav .menu-btn .n::before { top: -8px; }
  #gnav .menu-btn .n::after  { top: 8px; }
  #gnav.action .menu-btn .n { transform: rotate(-45deg); }
  #gnav.action .menu-btn .n::before,
  #gnav.action .menu-btn .n::after { top: 0; left: 0; transform: rotate(90deg); }
  body.overlay::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: #000;
    opacity: .3;
  }

  .footer-sub .ftaddress { padding-top: 20px; }
}
@media (max-width: 599px) {
  .sub table { width: 100%; }
  #contact .tbox { width: 100%; }
  .footer-sub .links { display: none; }
}

/* --------------------------------------------------------------------------
   5. 会社案内（about.html）
   -------------------------------------------------------------------------- */
#about .wrap { width: 95%; margin: 0 auto; }
#about .g_line { margin-bottom: 40px; background: var(--c-blue); }
#about .g_line h3 { padding-left: 3.5%; color: #fff; font-size: 28px; line-height: 60px; }
#about .inbox { padding-bottom: 100px; }
#about .inbox .pic { width: 41.3%; }
#about .inbox .tbox { width: 49%; }
#about .inbox .tbox h4 { padding-bottom: 30px; font-size: 20px; }
#about .inbox .tbox p { padding-bottom: 20px; }
#about .daihyou { padding-top: 50px; text-align: right; }
#about .daihyou .mincho { padding-left: 20px; font-family: var(--font-serif); font-size: 20px; }
#about .company { padding-bottom: 100px; }
#about .company h3 { padding-bottom: 55px; font-size: 24px; text-align: center; }
@media (max-width: 599px) {
  #about .inbox .pic { width: 100%; padding-bottom: 20px; text-align: center; }
  #about .inbox .tbox { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. 事業案内（works.html）
   -------------------------------------------------------------------------- */
#works { padding-bottom: 100px; }
#works .box h3 { width: 75%; margin: 0 auto; padding-bottom: 75px; color: var(--c-blue); font-size: 36px; text-align: center; }
#works .wrap h4 { padding-bottom: 40px; font-size: 24px; text-align: center; }
#works .workslist dl { width: 33%; padding-bottom: 70px; border-bottom: 1px solid var(--c-gray); }
#works .workslist dd img { display: block; margin: 0 auto; padding-bottom: 30px; }
#works .workslist dt { padding-bottom: 10px; color: var(--c-blue); font-size: 24px; text-align: center; }
#works .workslist dt + dd { font-size: 16px; text-align: center; }
#works .g_line { margin-bottom: 40px; padding-left: 3.5%; background: var(--c-blue); line-height: 60px; }
#works .itemlist h3 { color: #fff; font-size: 28px; }
#works .item { width: 95.4%; margin: 0 auto; padding-bottom: 35px; }
#works .item .pic { width: 35.8%; }
#works .item .tbox { width: 52.1%; padding-top: 25px; }
#works .item .tbox h4 { padding-bottom: 25px; font-size: 24px; }
#works .item .tbox p { padding-bottom: 20px; }
#works .noitem { margin-bottom: 60px; border: 4px dotted var(--c-gray); }
#works .noitem h4 {
  position: relative;
  margin-bottom: 30px;
  padding: .6em;
  background: var(--c-blue);
  color: #fff;
  font-size: 24px;
}
#works .noitem h4::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top-color: var(--c-blue);
}
#works .noitem .tbox { width: 82.5%; margin: 0 auto; padding: 30px 0; }
#works .noitem li { padding-left: 1em; line-height: 1.9; list-style-type: decimal; }
#works .flow h3 { color: #fff; font-size: 24px; }
#works .flow h3 + p { padding: 70px 0 45px; text-align: center; }
#works .flow .contact dl { position: relative; display: block; width: 37%; margin: 0 auto; padding-bottom: 100px; }
#works .flow .contact dl::before {
  content: url(../images/track_pic.png);
  position: absolute;
  top: -50%;
  left: 125%;
}
#works .flow .contact dt {
  padding-left: 60px;
  background: url(../images/works/icon_01.gif) no-repeat left center;
  font-size: 38px;
}
#works .flow .contact dt a { color: #000; }
#works .flow .contact dd { font-size: 24px; text-align: center; }
#works .flow dd .time { padding-left: 1em; }
#works .kikai .pic { width: 100%; }
#works .kikai .item .tbox { width: 100%; }
#works .kikai h4 { color: var(--c-blue); }
#works .kikai li { padding-bottom: 20px; font-size: 18px; }
#works .kikai .boder { border-bottom: 2px dotted #333; color: #333; font-size: 18px; }
#works .kikai dl { padding: 60px 0 40px; }
#works .kikai dt { padding-bottom: 20px; border-bottom: 1px solid #000; font-size: 18px; }
#works .kikailist { width: 100%; margin: 0 auto; padding: 20px 0; }
#works .kikailist ul { width: 49%; }
#works .kikailist li { padding: 15px 0; font-size: 16px; font-weight: 400; }
#works .kikailist li:nth-child(odd) { background: var(--c-gray); }

/* STEP フロー */
.flowlist { position: relative; margin-bottom: 120px; padding-left: 120px; }
.flowlist::before {
  content: "";
  position: absolute;
  top: 0;
  left: 120px;
  display: block;
  width: 15px;
  height: 100%;
  margin-left: -8px;
  background: var(--c-gray);
}
.flowlist li { position: relative; }
.flowlist li:not(:last-child) { margin-bottom: 8vh; }
.flowlist li .icon {
  position: absolute;
  top: 0;
  left: -120px;
  z-index: 10;
  display: block;
  padding: 8px 20px;
  background: var(--c-blue);
  color: #fff;
  font-size: 12px;
}
.flowlist li .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent var(--c-blue);
  transform: translateY(-50%);
}
.flowlist li dl { position: relative; padding-left: 70px; }
.flowlist li dl::before,
.flowlist li dl::after { content: ""; position: absolute; top: 15px; display: block; }
.flowlist li dl::before { left: -4px; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--c-blue); }
.flowlist li dl::after { left: 5px; width: 50px; border-bottom: 1px dashed #999; }
.flowlist li dl dt { margin-bottom: 1vh; color: var(--c-blue); font-size: 20px; font-weight: 600; }

/* 事業案内ページ内 ACCESS */
#access { padding: 70px 0 100px; background: var(--c-gray); }
#access h3 { padding-bottom: 60px; text-align: center; }
#access .fs28b { display: block; font-size: 28px; text-align: center; }
#access .pic { width: 45%; max-width: 450px; }
#access .pic iframe { height: 300px; }
#access .address { width: 48%; }
#access .address dl { display: flex; width: 90%; max-width: 480px; padding: 5%; border-bottom: 1px solid var(--c-gray-3); }
#access .address dt { flex: 0 0 108px; color: #000; font-size: 18px; }
#access .address dd { color: #000; font-size: 18px; }
#access .address dd a { color: #000; }

@media (max-width: 1024px) {
  #works .box h3 { width: 95%; font-size: 25px; }
  #works .workslist dl { width: 48%; margin-bottom: 50px; }
  #works .flow h3 { font-size: 18px; }
  #works .flow h3 + p { padding: 20px 0; }
  #works .flow .contact dl { width: 80%; }
  #works .flow .contact dl::before { display: none; }
  #works .flow .contact dt { width: 370px; margin: 0 auto; white-space: nowrap; }
}
@media (max-width: 599px) {
  #works .item .pic { width: 100%; text-align: center; }
  #works .item .tbox { width: 100%; }
  #works .workslist dl { width: 100%; }
  #works .flow .contact dt { width: auto; font-size: 28px; }
  #works .kikailist ul { width: 100%; }
  .flowlist { padding-left: 90px; }
  .flowlist::before { left: 90px; }
  .flowlist li .icon { left: -90px; padding: 8px 12px; }
  .flowlist li dl { padding-left: 40px; }
  .flowlist li dl::after { width: 25px; }
  #access .pic { width: 100%; max-width: none; padding-bottom: 20px; text-align: center; }
  #access .address { width: 100%; }
}

/* --------------------------------------------------------------------------
   7. お知らせ（news.html / news_detail*.html）
   -------------------------------------------------------------------------- */
#news { padding-bottom: 100px; }
#news .newslist ul { width: 100%; max-width: 1000px; margin-bottom: 50px; border-top: 1px solid var(--c-gray-2); border-bottom: 1px solid var(--c-gray-2); }
#news .newslist li { padding: 15px 7.5%; }
#news .newslist li:nth-child(2n) { background: var(--c-gray); }
#news .newslist li a { display: block; }
#news .newslist .redb { padding-left: 20px; color: orangered; }
#news .newslist .day { display: inline-block; margin-right: 1em; color: var(--c-gray-3); font-size: 14px; }

/* ページャー */
.pager .pagination { margin: 0; padding: 0; text-align: center; }
.pager .pagination li { position: relative; display: inline-block; width: 50px; height: 50px; margin: 0 2px; background: var(--c-blue); text-align: center; }
.pager .pagination li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; }
.pager .pagination li a:hover,
.pager .pagination li a.active { background: var(--c-gray); color: #000; opacity: 1; }

/* 詳細 */
#news .newsdetail { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 2px solid var(--c-gray); }
#news .newsdetail .title { width: 100%; }
#news .newsdetail h3 { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--c-gray); font-size: 24px; }
#news .newsdetail p { padding-bottom: 10px; font-size: 16px; }
#news .newsdetail .tbox { padding: 20px 0; }
#news .newsdetail .tbox2 { padding: 20px 0 50px; }
#news .newsdetail .tbox2.pt30 { padding: 30px 0 50px; }
#news .newsdetail .tbox2.pb30 { padding: 20px 0 30px; }
#news .newsdetail .fs24 { font-size: 24px; }
#news .newsdetail .pic { width: 100%; margin: 0 auto; padding-bottom: 30px; text-align: center; }
#news .newsdetail .pic.w45 { width: 45%; }
#news .newsdetail .gantan h4 { padding: 30px 0; font-family: sans-serif; font-size: 24px; text-align: center; }
#news .newsdetail .gantan p { text-align: center; }
#news .newsdetail .gantan p:last-child { padding: 20px 0; }
#news .newsdetail .redb { color: red; }
#news .newsdetail .red { color: red; }
#news .newsdetail ul { padding: 20px 0 20px 1em; }
#news .newsdetail li { padding: 10px 0; font-size: 16px; }
#news .newsdetail .fontnormal { padding: 10px 0; font-weight: 400; }
#news .newsdetail .fontnormal a { color: var(--c-blue); text-decoration: underline; }
#news .newsdetail dt { font-size: 14px; }
#news .newsdetail dd { font-size: 14px; }
#news .newsdetail dd:last-child { margin-bottom: 20px; }
#news .newsdetail dl.interview { padding-left: 20px; border-left: 2px solid #000; }
#news .newsdetail .kaitori li .under { background: linear-gradient(transparent 50%, yellow 50%); }
#news .newsdetail .recruit_txt a { display: inline-block; padding: 0 10px; color: blue; }
#news .newsdetail .graybox103 { margin: 20px 0; padding: 2% 5%; border-radius: 4px; background: var(--c-gray); }
#news .newsdetail .graybox103 .italicbold { color: #333; font-style: italic; }
#news .newsdetail .graybox103 .italic { color: #333; font-style: italic; font-weight: 400; }
#news .newsdetail .reiwa3 .tbox { width: 55%; }
#news .newsdetail .reiwa3 .tbox.w100 { width: 100%; }
#news .newsdetail .reiwa3 .w33 { width: 44%; }
#news .newsdetail .pdf_dl a { display: inline-block; width: 250px; margin: 20px 0; padding: 15px 0; text-align: center; }
#news .newsdetail .pdf_dl.border a { display: block; border: 1px solid #000; border-radius: 4px; }
#news .newsdetail .wrap { padding-bottom: 20px; }
#news .newsdetail .news-h4 {
  position: relative;
  margin-bottom: 50px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
  color: #333;
  font-size: 1.5em;
}
#news .newsdetail .news-figure { margin: 0 0 20px; text-align: left; }
#news .newsdetail .news-figure img { display: block; max-width: 500px; height: auto; }
#news .newsdetail .news-figure.wide img { max-width: 1000px; width: 100%; }
#news .newsdetail .news-figure.auto img { max-width: 100%; }
#news .newsdetail table { margin: 0 auto 10px; }
.sekitani-image-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; padding-bottom: 20px; }
.sekitani-image-fig { display: flex; justify-content: center; }
.sekitani-image-fig img { display: block; width: 100%; max-width: 500px; max-height: 500px; height: auto; object-fit: cover; }

/* 一覧に戻る */
#news .bt { position: relative; display: block; max-width: 235px; margin: 0 auto; border: 1px solid var(--c-gray-2); border-radius: 4px; text-align: center; }
#news .bt a { display: block; width: 100%; line-height: 50px; text-align: center; }
#news .bt a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .pager .pagination li { display: none; }
  .pager .pagination li.pre, .pager .pagination li.next { display: inline-block; width: 40%; height: 50px; }
  .pager .pagination li.pre span::after { content: "　前の10件へ"; }
  .pager .pagination li.next span::before { content: "次の10件へ　"; }
}
@media (max-width: 599px) {
  #news .newsdetail br { display: none; }
  #news .newsdetail .reiwa3 .tbox { width: 100%; margin: 0 auto; }
  #news .newsdetail .reiwa3 .w33 { width: 70%; margin: 0 auto; }
  #news .newsdetail .pic.w45 { width: 95%; text-align: center; }
  #news .newsdetail .news-figure img { max-width: 100%; }
  .sekitani-image-wrap { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. アクセス（access.html）
   -------------------------------------------------------------------------- */
#accesspage { padding-bottom: 100px; }
#accesspage .map { width: 45%; margin: 0 auto; }
#accesspage .map iframe { height: 450px; }
#accesspage .tbox { width: 50%; }
#accesspage .tbox h3 { padding-bottom: 20px; font-size: 24px; text-align: left; }
#accesspage .tbox h3 + p { padding-bottom: 40px; }
#accesspage .tbox .tel { padding-bottom: 35px; font-size: 36px; }
#accesspage .tbox .tel a { color: #000; }
#accesspage .tbox .tel::before {
  content: "";
  display: inline-block;
  width: 46px;
  height: 46px;
  margin-right: 9px;
  vertical-align: -8px;
  background: url(../images/access/icon_01.gif) no-repeat left center;
}
@media (max-width: 599px) {
  #accesspage .map { width: 100%; padding-bottom: 30px; }
  #accesspage .tbox { width: 100%; }
  #accesspage .tbox h3 { text-align: center; }
  #accesspage .tbox p { padding-bottom: 20px; text-align: center; }
  #accesspage .tbox .tel { font-size: 28px; text-align: center; }
}

/* --------------------------------------------------------------------------
   9. お問い合わせ（contact.html / contact_check.php / thanks.html）
   -------------------------------------------------------------------------- */
#contact_form .contxt { border-bottom: 1px solid var(--c-gray); }
#contact_form .contxt p { padding-bottom: 50px; text-align: center; }
#contact_form .contxt dl { width: 100%; max-width: 370px; margin: 0 auto; }
#contact_form .contxt dt {
  margin-bottom: 35px;
  padding-left: 60px;
  background: url(../images/works/icon_01.gif) no-repeat left center;
  font-size: 38px;
}
#contact_form .contxt dt a { color: #000; }
#contact_form .contxt dd { padding-bottom: 85px; text-align: center; }

.contact1 { width: 95%; max-width: 980px; margin: 0 auto; padding: 0 0 80px; }
.contact1 .txt { padding: 0 0 80px; }
.contact1 .txt p { text-align: center; }
.contact1 p { padding: 0 0 20px; }
.contact1 table { width: 100%; margin: 0; }
.contact1 table tr { border: 0; }
.contact1 table th { width: 220px; padding: 8px 0; background: #fff; font-size: 16px; text-align: left; vertical-align: top; }
.contact1 table td { width: auto; padding: 0 0 20px; background: #fff; }
.contact1 table th strong { padding-left: 20px; color: var(--c-red); font-weight: 400; }
.contact1 input[type="text"],
.contact1 input[type="email"],
.contact1 input[type="tel"],
.contact1 textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--c-gray-3);
  border-radius: 4px;
  background: #fff;
  font-weight: 400;
  transition: border-color .2s, box-shadow .2s;
}
.contact1 input:focus, .contact1 textarea:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(0, 127, 194, .15); outline: none; }
.contact1 input:user-invalid, .contact1 textarea:user-invalid { border-color: var(--c-red); }
.contact1 #zip { max-width: 250px; }
.contact1 #ask { height: 250px; resize: vertical; }
.contact1 .u { display: block; padding: 5px 0 0; }
.contact1 .table { padding: 0 0 60px; }
.contact1 .formbtn { padding: 0 0 20px; }
.contact1 .formbtn li { width: 48%; max-width: 250px; margin: 0 1% 10px; }
.contact1 .formbtn #send,
.contact1 .formbtn .sendbtn {
  display: block;
  width: 100%;
  padding: 10px 2.5%;
  border: 0;
  background: var(--c-blue);
  color: #fff;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  transition: opacity .3s;
}
.contact1 .formbtn #send:hover,
.contact1 .formbtn .sendbtn:hover { opacity: .6; }
.contact1 .backbtn a {
  display: block;
  width: 100%;
  padding: 16.5px 2.5%;
  background: var(--c-gray-2);
  color: var(--c-text);
  font-size: 24px;
  text-align: center;
  cursor: pointer;
}
.contact1 .checked table td { padding: 8px 0 20px; white-space: pre-wrap; word-break: break-all; }
.contact1 .error { display: block; color: var(--c-red); }
.contact1 .error-box { margin-bottom: 32px; padding: 20px 24px; border: 1px solid #e57373; border-radius: 4px; background: #fff0f0; }
.contact1 .error-box p { padding: 0 0 4px; color: #c62828; font-size: 14px; }
.contact1 .privacy { padding-bottom: 20px; font-size: 14px; font-weight: 400; text-align: center; }
.contact1 .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks h3 { padding: 0 0 10px; text-align: center; }
.thanks p { text-align: center; }
.thanks p a { text-decoration: underline; }
.thanks .note { padding-top: 10px; font-size: 13px; font-weight: 400; color: #555; }
@media (max-width: 1024px) {
  .contact1 table th, .contact1 table td { font-size: 14px; }
}
@media (max-width: 599px) {
  #contact_form .contxt dt { font-size: 28px; }
  .contact1 table th { display: block; width: 100%; margin-bottom: 10px; background: var(--c-gray); padding: 8px 10px; }
  .contact1 table td { display: block; width: 100%; }
  .contact1 .table { padding-bottom: 30px; }
  .contact1 .formbtn #send, .contact1 .formbtn .sendbtn, .contact1 .backbtn a { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   10. トップ NEWS（スマホ幅）：横スワイプのカード型
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .home_news { padding: 22px 0 16px; }
  .home_news .inner > .flex {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title link"
      "track track"
      "dots  dots";
    align-items: end;
    row-gap: 14px;
  }
  .home_news .left, .home_news .left > .flex,
  .home_news .right, .home_news .right p { display: contents; }
  .home_news h2 {
    grid-area: title;
    width: auto;
    padding: 0;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: .08em;
    text-align: left;
  }
  .home_news h2 .sub {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: none;
  }
  .home_news .right { padding: 0; }
  .home_news .right a {
    grid-area: link;
    width: auto;
    margin: 0;
    padding: 7px 12px 7px 16px;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
  }
  .home_news .right a .newslink::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    vertical-align: 1px;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    transform: rotate(45deg);
  }
  /* トラック：画面端まで広げて、次のカードを少し見せる */
  .news-ticker {
    grid-area: track;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .news-ticker ul {
    display: flex;
    gap: 10px;
    padding: 2px 2.5vw 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2.5vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .news-ticker ul::-webkit-scrollbar { display: none; }
  .news-ticker li {
    flex: 0 0 78%;
    display: block;
    scroll-snap-align: start;
  }
  .news-ticker li a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    margin: 0;
    padding: 14px 16px 30px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #000;
    box-shadow: 0 2px 10px rgba(0, 40, 80, .18);
  }
  .news-ticker li a:hover { opacity: 1; }
  .news-ticker li a::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--c-blue);
    border-right: 2px solid var(--c-blue);
    transform: rotate(45deg);
  }
  .news-ticker .day {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--c-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
  }
  .news-ticker .badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: orangered;
    color: #fff;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .06em;
  }
  .news-ticker .ttl {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.55;
    text-wrap: balance;
  }
  /* 現在位置のドット */
  .news-dots {
    grid-area: dots;
    display: flex;
    justify-content: center;
    gap: 6px;
    min-height: 6px;
  }
  .news-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .45);
    transition: width .3s, background-color .3s;
  }
  .news-dots i.is-active { width: 18px; background: var(--c-yellow); }
}