@charset "UTF-8";
/* style.scss */
/* _reset.scss
   2025 modern reset / base styles
   - Low-specificity（:where）で上書きしやすい
   - HTML5要素のdisplay指定は不要（現行ブラウザは既定OK）
   - アクセシビリティ & OS挙動に寄り添った最小限の整形
*/
/* 推奨: OSのテーマを尊重（必要なければ削除可） */
:root {
  color-scheme: light dark;
}

/* 全要素のbox-sizingをborder-boxに */
*, *::before, *::after {
  box-sizing: border-box;
}

/* モバイルでのテキスト拡大挙動の統一 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 余白と行間の初期化は「低特異性」で。
   見出し・段落などは後段のコンポーネントで上書き想定 */
:where(body) {
  margin: 0;
  line-height: 1.5; /* 可読性重視のデフォルト */
  -webkit-tap-highlight-color: transparent;
}

/* 見出し・段落などのデフォルト余白をゼロに（ユーティリティで管理） */
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

/* リスト記号を一旦無効化（必要な箇所で再付与） */
:where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* a要素の初期化。色は継承、下線はユーティリティで制御 */
:where(a) {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

/* 強調・挿入・削除のデフォルト。
   旧resetの派手な背景色は撤廃し、最小限に */
:where(em, i) {
  font-style: italic;
}

:where(strong, b) {
  font-weight: bolder;
}

:where(del) {
  text-decoration: line-through;
}

:where(ins) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(mark) {
  background: transparent;
  color: inherit;
  font-weight: inherit;
}

/* 引用の引用符はCSS依存を避ける（コンテンツとして必要ならHTML側で） */
:where(blockquote, q) {
  quotes: none;
}

:where(blockquote)::before,
:where(blockquote)::after,
:where(q)::before,
:where(q)::after {
  content: none;
}

/* テーブルは最小限のリセット */
:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

:where(th, td) {
  padding: 0;
}

/* hrは単純な1pxラインに */
:where(hr) {
  height: 0;
  border: 0;
  border-top: 1px solid currentColor;
  margin: 1rem 0;
  opacity: 0.2;
}

/* 画像や埋め込みメディアの振る舞い */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  max-width: 100%;
}

:where(img, svg, video) {
  height: auto;
}

/* フォーム系のリセット（2025簡略版） */
:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
}

:where(button) {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

:where(input[type=search]) {
  appearance: none; /* 標準プロパティ */
  -webkit-appearance: none; /* Safari対応（警告が出ない順序） */
  outline-offset: 0;
}

:where(textarea) {
  resize: vertical;
}

/* アクセシビリティ: キーボードフォーカスの可視化 */
:where(:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* アクセシビリティ: モーションを減らすユーザー設定に追従 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* 旧reset由来の時代遅れプロパティの整理:
   - outline:0; → フォーカス不可視になるため削除
   - background:transparentの乱用 → a等の必要箇所に限定
   - HTML5要素のdisplay:block指定 → 不要（現行ブラウザは既定OK）
   - abbr/dfnの下線 → 意図しない点線表示を避け削除（UI側で必要時に付与）
*/
/* _variable.scss
   共通変数定義（Dart Sass対応 / 2025）
-------------------------------------------------- */
/* --------------------------------------------------
   breakpoint（レスポンシブ設定）
   使用例は下の // 行コメントを参照
-------------------------------------------------- */
/* --------------------------------------------------
   layout order（z-index管理）
   使用例：
   // 例: z-index: map-get($z-index, 'header-1');
-------------------------------------------------- */
/* _mixin.scss
   2025-ready mixins (Dart Sass 2.x/3.x 対応)
-------------------------------------------------- */
/* --------------------------------------------------
   breakpoint / レスポンシブ
-------------------------------------------------- */
/* --------------------------------------------------
   [上下余白] section padding 
-------------------------------------------------- */
/* --------------------------------------------------
   [共通] color / background
   ※ & { ... } で包み、mixed-decls 警告を出さない
-------------------------------------------------- */
/* --------------------------------------------------
   [文字装飾]
-------------------------------------------------- */
/* ストライプ線（文字：下） */
/* ＼ sideup ／（文字：両サイド） */
/* _mixin.scss の sideup を完全置換 */
/* --------------------------------------------------
   [共通] br (SP非表示 / PC表示)
-------------------------------------------------- */
/* --------------------------------------------------
   [共通] img (背景系)
-------------------------------------------------- */
/* 親相対 + 暗幕 */
/* --------------------------------------------------
   [共通] width:100% + margin:0 auto
-------------------------------------------------- */
/* --------------------------------------------------
   [共通] col (カラム)
   ※ & { ... } で mixed-decls 回避
-------------------------------------------------- */
/* --------------------------------------------------
   [共通] btn (ボタン)
-------------------------------------------------- */
/* 拡大ボタン（親に overflow:hidden 推奨） */
/* ノーマルボタン */
/* --------------------------------------------------
    relative / absolute / fixed / static
-------------------------------------------------- */
/* --------------------------------------------------
    transform-center
-------------------------------------------------- */
/* --------------------------------------------------
    max-width ( section / 375 / 500 / 800 / 1000 / 1200 / 1500 )
-------------------------------------------------- */
/* --------------------------------------------------
    背景 三角 triangle
-------------------------------------------------- */
/* _common.scss
   ベース要素共通スタイル
-------------------------------------------------- */
/* --------------------------------------------------
    body / main
-------------------------------------------------- */
body {
  overflow-y: scroll; /* スクロールバーのずれ防止 */
  margin: 0;
  text-align: center;
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
body {
  position: relative;
}
body {
  background: #ffffff;
}
body {
  color: #0f2350;
}

main {
  overflow: hidden;
}
main {
  position: relative;
}

/* _font.scss
   Typography base & headings (2025-ready, no mixed-decls warnings)
-------------------------------------------------- */
/* @use 'variable' as *; // 変数が必要な場合だけ有効化 */
/* --------------------------------------------------
    Root font-size & body
-------------------------------------------------- */
/* 16px * 0.625 = 10px (= 1rem) */
html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem; /* 16px */
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: left;
  font-family: "Lato", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------
    Mixins & Utilities
-------------------------------------------------- */
.font-bold {
  font-weight: 600;
}

.bold {
  border-bottom: 2px dotted #0aada6;
  padding-bottom: 3px;
  font-weight: 700;
}

/* --------------------------------------------------
    Top view title
-------------------------------------------------- */
.top-title h1 {
  text-align: left;
  text-shadow: 4px 4px 5px #1f1f1f;
  font-weight: 600;
  line-height: 1.4;
  font-size: 3.2rem;
  letter-spacing: 1.1px;
}
.top-title h1 {
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  .top-title h1 {
    font-size: 5.5rem;
  }
}
@media screen and (min-width: 1500px) {
  .top-title h1 {
    font-size: 6rem;
  }
}

/* --------------------------------------------------
    color
-------------------------------------------------- */
h1, h2, h3, h4 {
  color: #0f2350;
}

/* --------------------------------------------------
    Headings
-------------------------------------------------- */
/* h1 */
h1 {
  text-align: center;
  display: inline-block;
  font-weight: 800;
  line-height: 1;
  font-size: 3.8rem;
  margin-bottom: 35px;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 6rem;
    margin-bottom: 50px;
  }
}

/* h2 */
h2 {
  font-size: 2.2rem;
  font-weight: 600;
  text-align: center;
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 2.7rem;
    text-align: left;
  }
}

/* h3 */
h3 {
  font-size: 2rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  h3 {
    font-size: 2.5rem;
  }
}

/* h4 */
h4 {
  font-size: 1.9rem;
  text-align: center;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  h4 {
    font-size: 2rem;
  }
}

/* 段落 */
p {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  p {
    font-size: 1.8rem;
  }
}

/* _header.scss */
/* mq などで使用 */
/* $z-index マップ用 */
/* --------------------------------------------------
   Header
-------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  /* ---------- Logo ---------- */
  /* ---------- Hamburger ---------- */
  /* ---------- 開いた時（白いバツマーク） ---------- */
  /* ---------- SP Navigation Overlay ---------- */
  /* ---------- Body lock utility ---------- */
  /* ---------- Motion Reduce ---------- */
}
header .logo {
  position: absolute;
  top: 8px;
  left: 5px;
  z-index: 10001;
  display: block;
  width: 90px;
}
@media screen and (min-width: 768px) {
  header .logo {
    top: 10px;
    left: 20px;
  }
}
header .logo .logo__link {
  display: block;
}
header .logo .logo__link .logo__img {
  display: block;
  width: 90px;
  height: 40px; /* SP高さ */
  object-fit: contain;
}
@media screen and (min-width: 768px) {
  header .logo .logo__link .logo__img {
    height: 50px; /* PC高さ */
  }
}
header .logo .logo__link:hover .logo__img {
  opacity: 0.5;
}
header .logo .logo__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
header .el_humburger {
  position: absolute;
  top: 15px;
  right: 13px;
  z-index: 10000;
  width: 35px;
  height: auto;
  padding-top: 1px;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  will-change: transform;
}
@media screen and (min-width: 768px) {
  header .el_humburger {
    top: 20px;
    right: 20px;
  }
}
header .el_humburger span {
  background: #000;
  display: block;
  width: 100%;
  margin: 0 auto 9px;
  height: 1px;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
header .el_humburger span:last-child {
  margin-bottom: 0;
}
header .el_humburger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
header.js_humburgerOpen .el_humburger span {
  background: #fff;
}
header.js_humburgerOpen .el_humburger .top {
  transform: translateY(10px) rotate(-45deg);
  transform-origin: center;
}
header.js_humburgerOpen .el_humburger .middle {
  opacity: 0;
}
header.js_humburgerOpen .el_humburger .bottom {
  transform: translateY(-10px) rotate(45deg);
  transform-origin: center;
}
header .uq_spNavi {
  display: none;
}
header .uq_spNavi.js_appear {
  position: fixed;
  inset: 0;
  display: block;
  z-index: 9998; /* headerの下 */
}
header .uq_spNavi .uq_spNavi_screen {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
header .uq_spNavi .uq_spNavi_screen .navigation {
  padding: 20vh 0 0 0;
  text-align: center;
}
header .uq_spNavi .uq_spNavi_screen .navigation .navigation_item {
  margin-bottom: 7vh;
}
header .uq_spNavi .uq_spNavi_screen .navigation .navigation_item a {
  text-decoration: none;
  font-size: 1.9rem;
  transition: color 0.2s ease;
}
header .uq_spNavi .uq_spNavi_screen .navigation .navigation_item a {
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  header .uq_spNavi .uq_spNavi_screen .navigation .navigation_item a {
    font-size: 2.4rem;
  }
}
header .uq_spNavi .uq_spNavi_screen .navigation .navigation_item a:hover {
  color: #fcc800;
}
header .uq_spNavi .uq_spNavi_screen .navigation .navigation_item a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
header .js_fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  header .el_humburger,
  header .el_humburger span {
    transition-duration: 0.001ms !important;
  }
}

/* _footer.scss (Flat, logo visible, no mixed-decls) */
#footer {
  position: relative;
}
#footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
#footer .footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 16/9;
}
#footer .footer-in {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 1200px;
}
#footer .footer-in .col {
  display: block;
  padding: 60px 15px;
}
@media screen and (min-width: 768px) {
  #footer .footer-in .col {
    display: flex;
    padding: 100px 30px;
  }
}
#footer .footer-in .col .footer-info {
  width: 100%;
  font-size: 1.3rem;
  line-height: 1.8;
  text-align: left;
  padding-bottom: 80px;
}
@media screen and (min-width: 768px) {
  #footer .footer-in .col .footer-info {
    display: block;
    padding-right: 50px;
  }
}
#footer .footer-in .col .footer-info .logo {
  display: block;
  width: 90px;
  margin-bottom: 20px;
}
#footer .footer-in .col .footer-info .logo .logo__link {
  display: block;
}
#footer .footer-in .col .footer-info .logo .logo__img {
  display: block;
  width: 90px;
  height: auto;
}
@media screen and (min-width: 768px) {
  #footer .footer-in .col .footer-info .logo .logo__img {
    width: 90px;
  }
}
#footer .footer-in .col .footer-info .logo .logo__link:hover .logo__img {
  opacity: 0.5;
}
#footer .footer-in .col .footer-info p {
  font-size: 1.4rem;
  text-align: left;
}
#footer .footer-in .col .footer-info p {
  color: #ffffff;
}
#footer .footer-in .col .footer-company {
  width: 100%;
}
@media screen and (min-width: 768px) {
  #footer .footer-in .col .footer-company {
    display: block;
  }
}
#footer .footer-in .col .footer-company li {
  text-align: left;
  list-style: none;
}
#footer .footer-in .col .footer-company li {
  color: #ffffff;
}
#footer .footer-in .col .footer-company .title {
  font-size: 2rem;
  line-height: 1.8;
  padding-bottom: 5px;
}
#footer .footer-in .col .footer-company .text {
  font-size: 1.3rem;
  line-height: 1.8;
}
#footer .footer-in .copyright {
  margin: 0 auto;
  font-size: 1.2rem;
  padding-bottom: 20px;
}
#footer .footer-in .copyright {
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  #footer .footer-in .copyright {
    font-size: 1.4rem;
  }
}

/* _top.scss
   TOP page sections (2025-ready)
-------------------------------------------------- */
/* --------------------------------------------------
    TOP
-------------------------------------------------- */
#top {
  background: #ffffff;
}
#top .bg-top {
  position: relative;
  display: block;
  width: 100%;
  margin: 80px auto 0;
  height: 400px;
}
@media screen and (min-width: 768px) {
  #top .bg-top {
    margin: 100px auto 0;
    height: 600px;
  }
}
@media screen and (min-width: 1500px) {
  #top .bg-top {
    margin: 100px auto 0;
    height: 700px;
  }
}
#top .bg-top .bg-top__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 16/9;
  image-rendering: auto;
}
#top .bg-top .in-section {
  position: relative;
  z-index: 1;
}
#top .bg-top .in-section {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  #top .bg-top .in-section {
    max-width: 1050px;
    padding: 0 25px;
  }
}
#top .bg-top .in-section .top-title {
  text-align: left;
  padding-top: 130px;
}
@media screen and (min-width: 768px) {
  #top .bg-top .in-section .top-title {
    padding-top: 180px;
  }
}
@media screen and (min-width: 1500px) {
  #top .bg-top .in-section .top-title {
    padding-top: 240px;
  }
}

/* --------------------------------------------------
   yurayura
-------------------------------------------------- */
#yurayura {
  min-height: 80px;
  margin-top: 10px;
}
#yurayura {
  position: relative;
}
@media screen and (min-width: 768px) {
  #yurayura {
    min-height: 110px;
  }
}
#yurayura .in-yurayura {
  display: block;
  margin: 0 auto;
}
#yurayura .in-yurayura {
  position: absolute;
}
#yurayura .in-yurayura {
  top: 0;
}
#yurayura .in-yurayura {
  right: 0;
}
#yurayura .in-yurayura {
  left: 0;
}
#yurayura .in-yurayura p {
  text-align: center;
  display: block;
}
#yurayura .in-yurayura p {
  color: #0f2350;
}
#yurayura .in-yurayura i {
  text-align: center;
  display: block;
  margin: 0 auto;
  font-size: 3rem;
}
#yurayura .in-yurayura i {
  color: #0f2350;
}

/* --------------------------------------------------
    NEWS
-------------------------------------------------- */
#news {
  text-align: center;
  padding: 80px 0;
}
@media screen and (min-width: 768px) {
  #news {
    padding: 100px 0;
  }
}
#news .in-section {
  /* 視覚的非表示（スクリーンリーダー用見出し） */
  /* グリッド本体 */
  /* 各セル（白背景の小さなカード） */
  /* ロゴ画像の見え方を統一 */
  /* ダーク背景のフッターなどで白縁を付けたい時
  （必要なら .pay-grid--on-dark を UL に付与）
  */
  /* もし背景画像クラス方式（.img-pay01…）を使いたい場合のセル版
  <li><span class="pay-logo logo-visa"></span></li> のように使う
  */
}
#news .in-section {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  #news .in-section {
    max-width: 1050px;
    padding: 0 25px;
  }
}
#news .in-section .in-text {
  margin-bottom: clamp(25px, 3vw, 40px);
}
#news .in-section .in-text p {
  font-size: clamp(1.6rem, 1.4rem + 0.3vw, 1.8rem);
  text-align: left;
}
#news .in-section .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#news .in-section #payment {
  margin-top: 2rem;
}
#news .in-section .pay-grid {
  /* リスト素の余白をリセット */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px;
  align-items: center;
  justify-items: center;
  /* タブレット以上で少し広げる */
}
@media screen and (min-width: 768px) {
  #news .in-section .pay-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
  }
}
#news .in-section .pay-grid > li {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px; /* 縦が潰れないように */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media screen and (min-width: 768px) {
  #news .in-section .pay-grid > li {
    padding: 14px;
    min-height: 80px;
  }
}
#news .in-section .pay-grid > li:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
#news .in-section .pay-grid img {
  display: block;
  width: 100%;
  max-width: 110px; /* セル内の最大幅 */
  aspect-ratio: 3/2; /* ロゴの表示枠比率（ざっくり） */
  object-fit: contain; /* はみ出さない */
  image-rendering: -webkit-optimize-contrast; /* 低解像度PNG対策 */
  backface-visibility: hidden;
  transform: translateZ(0);
}
@media screen and (min-width: 768px) {
  #news .in-section .pay-grid img {
    max-width: 140px;
  }
}
#news .in-section .pay-grid--on-dark > li {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(120%) blur(2px);
}
#news .in-section .pay-logo {
  display: block;
  width: 100%;
  max-width: 110px;
  aspect-ratio: 3/2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  #news .in-section .pay-logo {
    max-width: 140px;
  }
}

/* --------------------------------------------------
    ABOUT
-------------------------------------------------- */
#about {
  text-align: center;
  padding: 80px 0 0;
}
#about {
  background: #f5f5fa;
}
@media screen and (min-width: 768px) {
  #about {
    padding: 100px 0 0;
  }
}
#about .in-section {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  #about .in-section {
    max-width: 800px;
    padding: 0 25px;
  }
}
#about .in-section .in-text {
  margin-bottom: 60px;
}
@media screen and (min-width: 768px) {
  #about .in-section .in-text {
    margin-bottom: 80px;
  }
}
#about .in-section .in-text p {
  text-align: left;
}
#about .about__bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

/* --------------------------------------------------
    COMPANY
-------------------------------------------------- */
#company {
  text-align: center;
  padding: 80px 0;
}
@media screen and (min-width: 768px) {
  #company {
    padding: 100px 0;
  }
}
#company .in-section {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  #company .in-section {
    max-width: 1050px;
    padding: 0 25px;
  }
}
#company .in-section table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 100%;
}
#company .in-section table {
  background: #ffffff;
}
#company .in-section table tr {
  border-top: 1px solid #808080;
}
#company .in-section table tr:last-child {
  border-bottom: 1px solid #808080;
}
#company .in-section table tr .title {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.7rem);
  text-align: left;
  padding-right: 15px;
  width: 16vw;
}
#company .in-section table tr .title {
  color: #0f2350;
}
@media screen and (min-width: 768px) {
  #company .in-section table tr .title {
    width: 20vw;
  }
}
#company .in-section table tr .text {
  padding: clamp(2.8vh, 2vh + 1vw, 3vh) 0;
  font-size: clamp(1.5rem, 1.3rem + 0.3vw, 1.7rem);
  line-height: 1.6;
  text-align: left;
}
#company .in-section table tr .text .map-btn {
  margin: 20px auto 0;
}
#company .in-section table tr .text .map-btn .gray-btn {
  border: 2px solid #17184b;
}
#company .in-section table tr .text .map-btn .gray-btn {
  background: #0f2350;
}
#company .in-section table tr .text .map-btn .gray-btn:hover {
  color: #0f2350;
}
#company .in-section table tr .text .map-btn .btn-open {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-size: 1.6rem;
  line-height: 42px;
  overflow: hidden;
  width: 150px;
  height: 50px;
  z-index: 1;
}
#company .in-section table tr .text .map-btn .btn-open {
  position: relative;
}
#company .in-section table tr .text .map-btn .btn-open {
  color: #ffffff;
}
#company .in-section table tr .text .map-btn .btn-open::after {
  transition: 0.2s;
  opacity: 0;
  z-index: -1;
  content: "";
  width: 100%;
  height: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
#company .in-section table tr .text .map-btn .btn-open::after {
  background: #ffffff;
}
#company .in-section table tr .text .map-btn .btn-open::after {
  position: absolute;
}
#company .in-section table tr .text .map-btn .btn-open::after {
  top: 50%;
}
#company .in-section table tr .text .map-btn .btn-open::after {
  left: 50%;
}
#company .in-section table tr .text .map-btn .btn-open:hover::after {
  height: 240%;
  opacity: 1;
}
#company .in-section table tr .text .map-btn .btn-open:active::after {
  height: 340%;
  opacity: 1;
}
#company .in-section table tr .text .map-btn .btn-open:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --------------------------------------------------
    SERVICE
-------------------------------------------------- */
#seavice {
  text-align: center;
  padding: 80px 0;
}
@media screen and (min-width: 768px) {
  #seavice {
    padding: 100px 0;
  }
}
#seavice {
  background: #0f2350;
}
#seavice .in-section {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  #seavice .in-section {
    max-width: 1050px;
    padding: 0 25px;
  }
}
#seavice .in-section h1 {
  color: #ffffff;
}
#seavice .in-section .list {
  border-radius: 20px;
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 1fr; /* すべて縦並び */
  gap: 0;
}
#seavice .in-section .list {
  background: #ffffff;
}
@media screen and (min-width: 768px) {
  #seavice .in-section .list {
    padding: 30px 30px;
  }
}
#seavice .in-section .list .col {
  display: block;
  padding: clamp(30px, 3vw, 30px) 0;
  text-align: center;
  border-bottom: 1px solid #808080;
}
#seavice .in-section .list .col {
  background: #ffffff;
}
#seavice .in-section .list .col:last-child {
  border-bottom: none;
}
@media screen and (min-width: 768px) {
  #seavice .in-section .list .col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
}
#seavice .in-section .list .col .in-img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 15px;
}
@media screen and (min-width: 768px) {
  #seavice .in-section .list .col .in-img {
    width: 50%;
    padding-bottom: 0;
  }
}
#seavice .in-section .list .col .in-img .service__img {
  display: block;
  width: auto;
  height: 150px;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  #seavice .in-section .list .col .in-img .service__img {
    height: 220px;
  }
}
#seavice .in-section .list .col .in-text {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #seavice .in-section .list .col .in-text {
    text-align: left;
    width: 60%;
  }
}
#seavice .in-section .list .col .in-text span {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: clamp(5px, 1vw, 10px);
}
#seavice .in-section .list .col .in-text span {
  color: #fcc800;
}
#seavice .in-section .list .col .in-text h2 {
  line-height: 1;
  padding-bottom: clamp(20px, 1.5vw, 20px);
}
#seavice .in-section .list .col .in-text h2 br {
  display: block;
}
@media screen and (min-width: 768px) {
  #seavice .in-section .list .col .in-text h2 br {
    display: none;
  }
}
#seavice .in-section .list .col .in-text p {
  text-align: left;
}
#seavice .in-section .list .col .in-text .in-add {
  display: block;
  margin-top: 8px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #seavice .in-section .list .col .in-text .in-add {
    text-align: left;
  }
}
#seavice .in-section .list .col .in-text .in-add a {
  display: inline-block;
  font-size: clamp(1.7rem, 1.5rem + 0.3vw, 1.9rem);
  font-weight: 600;
}
#seavice .in-section .list .col .in-text .in-add a {
  color: #0f2350;
}
#seavice .in-section .list .col .in-text .in-add a:hover {
  color: #fcc800;
}
#seavice .in-section .list .col .in-text .in-add a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --------------------------------------------------
    RECRUIT
-------------------------------------------------- */
#recruit {
  text-align: center;
  padding: 80px 0;
}
@media screen and (min-width: 768px) {
  #recruit {
    padding: 100px 0;
  }
}
#recruit {
  background: #0f2350;
}
#recruit .in-section {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  #recruit .in-section {
    max-width: 1050px;
    padding: 0 25px;
  }
}
#recruit .in-section .in-text h1 {
  color: #ffffff;
}
#recruit .in-section .in-text h3 {
  margin-bottom: clamp(20px, 3vw, 35px);
  /* 先に“本体の宣言”だけを単独ルールで吐く */
  /* 擬似要素も単独ルールで吐く（混在を作らない） */
}
#recruit .in-section .in-text h3 {
  position: relative;
  color: #0f2350; /* dblu 相当。既存の @include color-dblu でもOK */
  text-align: center;
  font-weight: bold;
}

#recruit .in-section .in-text h3::before {
  color: inherit;
  margin-right: 1rem;
  content: "＼";
}

#recruit .in-section .in-text h3::after {
  color: inherit;
  margin-left: 1rem;
  content: "／";
}

#recruit .in-section .in-text h3 {
  color: #ffffff;
}
#recruit .in-section .in-text h3::before {
  color: #ffffff;
}
#recruit .in-section .in-text h3::after {
  color: #ffffff;
}
#recruit .in-recruit table {
  margin: 0 auto 60px;
  border-collapse: collapse;
  width: 100%;
}
#recruit .in-recruit table tr {
  border-top: 1px solid #19448e;
}
#recruit .in-recruit table tr:last-child {
  border-bottom: 1px solid #19448e;
}
#recruit .in-recruit table tr .title {
  font-size: clamp(1.2rem, 1.1rem + 0.3vw, 1.6rem);
  text-align: left;
  padding-right: 15px;
  width: 20vw;
}
#recruit .in-recruit table tr .title {
  color: #2ca9e1;
}
#recruit .in-recruit table tr .text {
  padding: clamp(2.8vh, 2vh + 1vw, 3vh) 0;
  font-size: clamp(1.5rem, 1.3rem + 0.3vw, 1.7rem);
  line-height: 1.6;
  text-align: left;
}
#recruit .in-recruit table tr .text {
  color: #ffffff;
}

/* --------------------------------------------------
    CONTACT
-------------------------------------------------- */
#contact {
  text-align: center;
  padding: 80px 0;
}
@media screen and (min-width: 768px) {
  #contact {
    padding: 100px 0;
  }
}
#contact {
  background: #f5f5fa;
}
#contact .in-section {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  #contact .in-section {
    max-width: 1050px;
    padding: 0 25px;
  }
}
#contact .in-section .text-box {
  margin-bottom: clamp(30px, 5vw, 60px);
}
#contact .in-section .text-box h3 {
  margin-bottom: 25px;
  line-height: 40px;
}
#contact .in-section .text-box p {
  font-size: clamp(11pt, 10pt + 0.3vw, 13pt);
  text-align: center;
}
#contact .in-section .text-box p:last-child {
  text-align: left;
}
@media screen and (min-width: 768px) {
  #contact .in-section .text-box p:last-child {
    text-align: center;
  }
}
#contact .in-section .text-box p br {
  display: none;
}
@media screen and (min-width: 768px) {
  #contact .in-section .text-box p br {
    display: block;
  }
}
#contact .in-section .in-add {
  /* sp */
  /* pc */
}
#contact .in-section .in-add {
  display: block;
}
@media screen and (min-width: 768px) {
  #contact .in-section .in-add {
    display: flex;
  }
}
#contact .in-section .in-add a {
  display: block;
  text-align: center;
  border-radius: 10px;
  padding: clamp(20px, 3vw, 30px) 0;
  width: 100%;
  margin: 0 auto 30px;
}
#contact .in-section .in-add a {
  color: #ffffff;
}
#contact .in-section .in-add a {
  background: #0f2350;
}
@media screen and (min-width: 768px) {
  #contact .in-section .in-add a {
    margin-bottom: 0;
  }
  #contact .in-section .in-add a:nth-of-type(2n+1) {
    margin-right: 5%;
  }
}
#contact .in-section .in-add a span {
  width: 100%;
  text-align: center;
  font-size: clamp(1.9rem, 1.6rem + 0.5vw, 2.3rem);
}
#contact .in-section .in-add a span i {
  display: block;
  font-size: 3.3rem;
  margin-bottom: 15px;
}
#contact .in-section .in-add a:last-child {
  margin-top: 15px;
}
@media screen and (min-width: 768px) {
  #contact .in-section .in-add a:last-child {
    margin-top: 0;
    margin-left: 5%;
  }
}
#contact .in-section .in-add a:hover {
  color: #0f2350;
}
#contact .in-section .in-add a:hover {
  background: #fcc800;
}
#contact .in-section .in-add a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}/*# sourceMappingURL=style.css.map */