@charset "UTF-8";
/*
Theme Name: ito-original-theme
Description: 伊藤工務店（Ito Komuten）様向けに最適化された、超軽量で高パフォーマンスな国産WordPressスターターテーマ。
Version: 1.0.0
Text Domain: ito-original-theme
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: unset;
  color: currentColor;
}

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 変数 */
:root {
  --f1: 2.44em; /* 39.04px */
  --f2: 1.95em; /* 31.2px */
  --f3: 1.56em; /* 24.96px */
  --f4: 1.25em; /* 20px */
  --f5: 1em; /* 16px */
  --f6: 0.8em; /* 12.8px */
  --myw: 1000px; /* 標準幅 */
  --font-base:
    "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic",
    sans-serif;
  --font-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* 斜め角度（サイト全体で共通） */
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;
}

img,
iframe,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin-left: 0;
  margin-right: 0;
}

body *,
body *::before,
body *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-base);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--text);
  background-color: #f5f5f5;
}

/* スクリーンリーダー用のテキスト */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Font Family Utilities */
.font-montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
}

.font-noto {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
}

/* Scroll Animations */
.js-fade-up {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-fade-up.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-on-load {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 共通セクションタイトル */
.section-title {
  text-align: center;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .section-title {
    margin-bottom: 60px;
  }
}
.section-title__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}
.section-title__main {
  font-size: 24px;
  font-weight: 900;
  color: #05337e;
  margin: 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .section-title__main {
    font-size: 40px;
  }
}

/* ==========================================================================
   SP Global Sticky Bottom Navigation Bar (モバイル下部固定ナビゲーション)
   ========================================================================== */
@media (max-width: 1023px) {
  body {
    padding-bottom: 57px; /* Prevent sticky bottom bar from covering content at the very bottom */
  }
}

.sp-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 57px;
  display: flex;
  z-index: 9999;
}
@media (min-width: 1024px) {
  .sp-bottom-bar {
    display: none;
  }
}
.sp-bottom-bar__btn {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  transition: opacity 0.3s ease;
  letter-spacing: 0;
}
.sp-bottom-bar__btn:hover {
  opacity: 0.9;
}
.sp-bottom-bar__btn svg {
  position: absolute;
  right: 7%; /* SPで約11px相当の位置（ボタン幅約125pxに対して9%≒11.2px） */
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 9px;
  display: block;
}
.sp-bottom-bar__btn svg path {
  fill: #d90505; /* Chevron arrow is red */
}
.sp-bottom-bar__btn--bussan {
  background-color: #7d9abf;
}
.sp-bottom-bar__btn--recruit {
  background-color: #28bada;
}
.sp-bottom-bar__btn--contact {
  background-color: #05337e;
}

/* 猫ページ専用の下部固定ナビゲーションバーのスタイル（白背景、茶枠・茶文字） */
body.page-template-page-cat .sp-bottom-bar,
body.page-template-page-cat-php .sp-bottom-bar,
body:has(.cat-page) .sp-bottom-bar,
body:has(.cat-blog-page) .sp-bottom-bar,
body:has(.cat-blog-detail-page) .sp-bottom-bar,
body.post-type-archive-cat_blog .sp-bottom-bar,
body.single-cat_blog .sp-bottom-bar {
  background-color: #ffffff;
  border-top: 1px solid #664242;
  border-bottom: 1px solid #664242;
  border-left: 1px solid #664242;
  border-right: 1px solid #664242;
}
body.page-template-page-cat .sp-bottom-bar__btn,
body.page-template-page-cat-php .sp-bottom-bar__btn,
body:has(.cat-page) .sp-bottom-bar__btn,
body:has(.cat-blog-page) .sp-bottom-bar__btn,
body:has(.cat-blog-detail-page) .sp-bottom-bar__btn,
body.post-type-archive-cat_blog .sp-bottom-bar__btn,
body.single-cat_blog .sp-bottom-bar__btn {
  background-color: #ffffff !important;
  color: #664242 !important;
  border-right: 1px solid #664242;
}
body.page-template-page-cat .sp-bottom-bar__btn:last-child,
body.page-template-page-cat-php .sp-bottom-bar__btn:last-child,
body:has(.cat-page) .sp-bottom-bar__btn:last-child,
body:has(.cat-blog-page) .sp-bottom-bar__btn:last-child,
body:has(.cat-blog-detail-page) .sp-bottom-bar__btn:last-child,
body.post-type-archive-cat_blog .sp-bottom-bar__btn:last-child,
body.single-cat_blog .sp-bottom-bar__btn:last-child {
  border-right: none;
}
body.page-template-page-cat .sp-bottom-bar__btn svg path,
body.page-template-page-cat-php .sp-bottom-bar__btn svg path,
body:has(.cat-page) .sp-bottom-bar__btn svg path,
body:has(.cat-blog-page) .sp-bottom-bar__btn svg path,
body:has(.cat-blog-detail-page) .sp-bottom-bar__btn svg path,
body.post-type-archive-cat_blog .sp-bottom-bar__btn svg path,
body.single-cat_blog .sp-bottom-bar__btn svg path {
  fill: #664242 !important;
}

/**
 * Header Styles
 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: transparent; /* メインビジュアルの上に重ねるため背景透明 */
  height: 57px;
  /* 下層ページのSPのみ背景を#f5f5f5にする（ボタン以外） */
}
@media (max-width: 1023px) {
  body:not(.home) .header {
    background-color: #f5f5f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
}
@media (min-width: 1024px) {
  .header {
    height: 57px; /* ボタンサイズ・ナビゲーションボタン（57px）と同一に維持 */
  }
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding-left: 20px; /* 左側のロゴと端との空き具合 */
  padding-right: 0; /* 右上の赤いボタンをピッタリ端に寄せるため0 */
}
@media (min-width: 1024px) {
  .header__inner {
    padding-left: 30px; /* 左から30px */
  }
}
.header {
  /* ロゴのサイズ調整 (幅 212px) */
}
.header__logo {
  display: flex;
  align-items: center;
  height: 100%;
}
@media (min-width: 1024px) {
  .header__logo {
    align-items: flex-start;
    padding-top: 19px; /* topから19px */
  }
}
.header__logo a {
  display: block;
  transition: opacity 0.3s ease;
}
.header__logo a:hover {
  opacity: 0.7;
}
.header__logo-img {
  width: 212px; /* ご指定のロゴ幅 */
  height: auto; /* アスペクト比を維持 */
  display: block;
}
@media (min-width: 1024px) {
  .header__logo-img {
    width: 285px; /* PC用ロゴサイズ指定 */
    height: 36px;
  }
}
.header {
  /* 右側コンテナ */
}
.header__right {
  display: flex;
  align-items: center;
  height: 100%;
}
.header {
  /* ナビゲーションメニュー (SP時は非表示) */
}
.header__nav {
  display: none;
}
@media (min-width: 1024px) {
  .header__nav {
    display: flex;
    align-items: center;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .header__nav-btn {
    position: relative; /* 子要素の絶対配置の基準にする */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    box-sizing: border-box;
  }
}
@media (min-width: 1024px) {
  .header__nav-btn--bussan {
    background-color: #7d9abf;
    width: 169px;
  }
  .header__nav-btn--bussan:hover {
    background-color: #ffffff;
    color: #7d9abf;
    border-color: #7d9abf;
  }
}
@media (min-width: 1024px) {
  .header__nav-btn--recruit {
    background-color: #28bada;
    width: 169px;
  }
  .header__nav-btn--recruit:hover {
    background-color: #ffffff;
    color: #28bada;
    border-color: #28bada;
  }
}
@media (min-width: 1024px) {
  .header__nav-btn--contact {
    background-color: #05337e;
    width: 169px;
  }
  .header__nav-btn--contact:hover {
    background-color: #ffffff;
    color: #05337e;
    border-color: #05337e;
  }
}
@media (min-width: 1024px) {
  .header__nav-btn:hover .header__nav-arrow {
    transform: translate(10px, -50%);
  }
}
@media (min-width: 1024px) {
  .header__nav-arrow {
    position: absolute;
    right: 15px; /* 右から15px */
    top: 50%;
    transform: translateY(-50%); /* 上下中央揃え */
    width: 8px;
    height: 9px;
    display: block;
    transition: transform 0.3s ease;
  }
}
.header {
  /* ハンバーガーボタン (赤色 #D90505 / サイズ 62px * 57px) */
}
.header__hamburger {
  width: 62px;
  height: 57px;
  background-color: #d90505;
  border: 1px solid transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 線の上下余白（間隔）は 10px */
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}
.header__hamburger:hover {
  background-color: #d90505;
  border-color: #d90505;
}
.header__hamburger:hover .header__hamburger-line {
  background-color: #ffffff;
}
.header__hamburger.is-active {
  background-color: #d90505;
  border-color: #d90505;
}
.header__hamburger.is-active .header__hamburger-line {
  background-color: #ffffff;
}
.header__hamburger.is-active .header__hamburger-line:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.header__hamburger.is-active .header__hamburger-line:nth-child(2) {
  opacity: 0;
}
.header__hamburger.is-active .header__hamburger-line:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}
.header {
  /* ハンバーガーの線 (サイズ 26px * 1px / 白色) */
}
.header__hamburger-line {
  display: block;
  width: 26px;
  height: 1px;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

/* body menu open state */
body.menu-open {
  overflow: hidden;
  /* Menu open header white background */
}
body.menu-open .header {
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* ==========================================================================
   SP Nav Drawer Menu Styles (モバイルドロワーメニュー)
   ========================================================================== */
.sp-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.sp-nav.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.sp-nav__inner {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.sp-nav__inner--sp {
  display: block;
}
@media (min-width: 1024px) {
  .sp-nav__inner--sp {
    display: none;
  }
}
.sp-nav__inner--pc {
  display: none;
}
@media (min-width: 1024px) {
  .sp-nav__inner--pc {
    display: block;
  }
}
.sp-nav__body {
  height: calc(100% - 57px);
  overflow-y: auto;
  padding: 117px 20px 40px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.sp-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 216px;
}
.sp-nav__item {
  border-bottom: 1px solid #e2e8f0;
}
.sp-nav__item--cat {
  border-bottom: 1px solid #fadbda;
}
.sp-nav__item--heading {
  border-bottom: none;
}
.sp-nav__item--sub {
  border-bottom: none;
}
.sp-nav__item--sub .sp-nav__link {
  padding: 8px 0 8px 60px;
  font-weight: 500;
  color: #000000;
}
.sp-nav__item--sub-last {
  border-bottom: 1px solid #e2e8f0;
}
.sp-nav__item--sub-last .sp-nav__link {
  padding: 8px 0 16px 60px;
  font-weight: 500;
  color: #000000;
}
.sp-nav__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #05337e;
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: 0.15em;
  transition: color 0.3s ease;
}
.sp-nav__link--interview {
  letter-spacing: 0.05em;
}
.sp-nav__link:hover {
  color: #d90505;
}
.sp-nav__link--cat {
  color: #664242;
}
.sp-nav__link--heading {
  padding: 20px 0 8px;
  cursor: default;
  pointer-events: none;
}
.sp-nav__link--heading:hover {
  color: #05337e;
}
.sp-nav__link-arrow {
  width: 8px;
  height: 9px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.sp-nav__link:hover .sp-nav__link-arrow {
  transform: translateX(4px);
}
.sp-nav__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 0 24px;
}
.sp-nav__sns-link {
  display: block;
  width: 40px;
  height: 40px;
  transition: opacity 0.3s ease;
}
.sp-nav__sns-link:hover {
  opacity: 0.8;
}
.sp-nav__sns-link svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sp-nav__privacy-link {
  font-size: 16px;
  font-weight: 700;
  color: #05337e;
  text-decoration: none;
  transition: color 0.3s ease;
}
.sp-nav__privacy-link:hover {
  color: #d90505;
}
.sp-nav__bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 57px;
  display: flex;
  z-index: 10;
}
.sp-nav__btn {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  gap: 8px;
  transition: opacity 0.3s ease;
}
.sp-nav__btn:hover {
  opacity: 0.9;
}
.sp-nav__btn svg {
  width: 8px;
  height: 9px;
  display: block;
}
.sp-nav__btn svg path {
  fill: #d90505;
}
.sp-nav__btn--bussan {
  background-color: #7d9abf;
}
.sp-nav__btn--recruit {
  background-color: #28bada;
}
.sp-nav__btn--contact {
  background-color: #05337e;
}
.sp-nav {
  /* ==========================================================================
     PC Nav Drawer Menu Styles (PC版ドロワーレイアウト)
     ========================================================================== */
}
.sp-nav__pc-body {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  height: 100%;
  padding: 147px 66px 40px;
  box-sizing: border-box;
  position: relative;
}
.sp-nav__pc-columns {
  display: flex;
  justify-content: flex-end;
  height: 502px;
}
.sp-nav__pc-col {
  width: 216px;
  flex-shrink: 0;
}
.sp-nav__pc-col:nth-child(2) {
  margin-left: 60px;
}
.sp-nav__pc-col:nth-child(3) {
  margin-left: 90px;
}
.sp-nav__pc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sp-nav__pc-item {
  border-bottom: 1px solid #e2e8f0;
}
.sp-nav__pc-item:not(:first-child) {
  padding-top: 30px;
}
.sp-nav__pc-item--cat {
  border-bottom: 1px solid #fadbda;
}
.sp-nav__pc-item--heading {
  border-bottom: none;
}
.sp-nav__pc-item--sub {
  border-bottom: none;
  padding-top: 11px !important;
}
.sp-nav__pc-item--sub .sp-nav__pc-link {
  padding: 0 0 8px;
  padding-left: 60px;
  font-weight: 500;
  color: #000000;
}
.sp-nav__pc-item--sub-last {
  border-bottom: 1px solid #e2e8f0;
  padding-top: 11px !important;
}
.sp-nav__pc-item--sub-last .sp-nav__pc-link {
  padding: 0 0 32px;
  padding-left: 60px;
  font-weight: 700;
  color: #000000;
}
.sp-nav__pc-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 30px;
  font-size: 16px;
  font-weight: 700;
  color: #05337e;
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: 0.15em;
  transition: color 0.3s ease;
}
.sp-nav__pc-link--interview {
  letter-spacing: 0.05em;
}
.sp-nav__pc-link:hover {
  color: #d90505;
}
.sp-nav__pc-link--cat {
  color: #664242;
}
.sp-nav__pc-link--heading {
  padding: 0 0 12px;
  cursor: default;
  pointer-events: none;
}
.sp-nav__pc-link--heading:hover {
  color: #05337e;
}
.sp-nav__pc-arrow {
  width: 8px;
  height: 9px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.sp-nav__pc-link:hover .sp-nav__pc-arrow {
  transform: translateX(4px);
}
.sp-nav__pc-cat-image {
  margin-top: 30px;
  width: 175px;
  margin-left: auto;
}
.sp-nav__pc-cat-img {
  width: 100%;
  height: auto;
  display: block;
}
.sp-nav__pc-footer {
  margin-top: 240px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}
.sp-nav__pc-sns-link {
  display: block;
  width: 40px;
  height: 40px;
  transition: opacity 0.3s ease;
}
.sp-nav__pc-sns-link:hover {
  opacity: 0.8;
}
.sp-nav__pc-sns-link svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sp-nav__pc-privacy-link {
  font-size: 16px;
  font-weight: 700;
  color: #05337e;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.sp-nav__pc-privacy-link:hover {
  color: #d90505;
}

.front-main {
  width: 100%;
  overflow: hidden;
}

@keyframes fadeInText {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInBg {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.3);
  }
}
@keyframes fadeInSimple {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bounceArrow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
.front-hero {
  position: relative;
  width: 100%;
  height: 667px;
  z-index: 10;
}
@media (min-width: 1024px) {
  .front-hero {
    height: 768px;
  }
}
@media (min-width: 1366px) {
  .front-hero {
    height: 56.25vw; /* Perfectly maintains the widescreen 16:9 aspect ratio above 1366px */
    max-height: 960px; /* Safe ceiling to prevent excessive height on ultra-wide viewports */
  }
}
.front-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.front-hero__bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.front-hero__bg-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.front-hero__content {
  position: absolute;
  top: 316px;
  left: 7px;
  z-index: 5;
  width: calc(100% - 14px);
}
@media (min-width: 1024px) {
  .front-hero__content {
    top: 197px;
    bottom: auto;
    left: 131px;
    width: auto;
  }
}
@media (min-width: 1366px) {
  .front-hero__content {
    top: min(14.42vw, 277px); /* Proportional fluid offset scaling up to 1920px */
    left: min(9.59vw, 184px); /* Proportional fluid offset scaling up to 1920px */
  }
}
.front-hero__catchphrase {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0);
  padding: 10px 11px 8px;
  border-radius: 0;
  animation: fadeInBg 1.5s ease forwards;
}
@media (min-width: 1024px) {
  .front-hero__catchphrase {
    background-color: transparent;
    animation: none;
    padding: 0;
  }
}
.front-hero__catchphrase-text {
  font-family: var(--font-base);
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  line-height: 160%;
  letter-spacing: 0.09em;
  margin: 0;
}
@media (min-width: 1024px) {
  .front-hero__catchphrase-text {
    font-size: 50px;
    line-height: 180%;
    letter-spacing: 0.09em;
  }
}
@media (min-width: 1366px) {
  .front-hero__catchphrase-text {
    font-size: min(3.66vw, 70px); /* Proportional fluid font-size scaling up to 1920px */
  }
}
.front-hero__catchphrase-line {
  display: inline-block;
  opacity: 0;
  animation: fadeInText 1.2s ease forwards; /* 全体を少し早めに */
}
.front-hero__catchphrase-line:nth-of-type(1) {
  animation-delay: 0.1s; /* 出だしを早める */
}
.front-hero__catchphrase-line:nth-of-type(2) {
  animation-delay: 0.7s; /* 2行目の間隔を詰める */
}
.front-hero__scroll {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #d90505;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-top: 12px;
  margin-left: 10px;
}
@media (min-width: 1024px) {
  .front-hero__scroll {
    font-size: 20px;
    margin-top: 26px;
    margin-left: 0px;
    gap: 8px;
  }
}
@media (min-width: 1366px) {
  .front-hero__scroll {
    font-size: min(1.46vw, 28px); /* Proportional fluid font-size scaling up to 1920px */
    margin-top: min(1.9vw, 36px); /* Proportional fluid vertical margin scaling */
    gap: min(0.58vw, 11px); /* Proportional fluid gap scaling */
  }
}
.front-hero__scroll-icon {
  width: 10px;
  height: 10px;
  display: block;
  animation: bounceArrow 2s infinite ease-in-out;
}
@media (min-width: 1024px) {
  .front-hero__scroll-icon {
    width: 12px;
    height: 12px;
  }
}
@media (min-width: 1366px) {
  .front-hero__scroll-icon {
    width: min(0.88vw, 17px); /* Proportional fluid icon width scaling up to 1920px */
    height: min(0.88vw, 17px); /* Proportional fluid icon height scaling up to 1920px */
  }
}
.front-hero__bar {
  position: absolute;
  bottom: -30px;
  left: -10%;
  width: 120%;
  height: 6px;
  background-color: #d90505;
  z-index: 2;
  transform: rotate(-7.5deg);
  transform-origin: left bottom;
  opacity: 0;
  animation: fadeInSimple 0.8s ease 0.3s forwards;
}
@media (min-width: 1024px) {
  .front-hero__bar {
    bottom: 99px;
    height: 3px;
    transform-origin: right bottom;
  }
}
.front-hero__banner-bg {
  position: absolute;
  bottom: -24px;
  left: -10%;
  width: 120%;
  height: 113px;
  background-color: rgba(5, 51, 126, 0.85);
  mix-blend-mode: multiply;
  z-index: 3;
  transform: rotate(-7.5deg);
  transform-origin: left bottom;
}
@media (min-width: 1024px) {
  .front-hero__banner-bg {
    bottom: 102px;
    height: 220px;
    transform-origin: right bottom;
  }
}
.front-hero__banner {
  position: absolute;
  bottom: -24px;
  left: -10%;
  width: 120%;
  height: 113px;
  z-index: 4;
  transform: rotate(-7.5deg);
  transform-origin: left bottom;
}
@media (min-width: 1024px) {
  .front-hero__banner {
    bottom: 102px;
    height: 220px;
    transform-origin: right bottom;
  }
}
.front-hero__banner-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
@media (min-width: 1024px) {
  .front-hero__banner-inner {
    padding: 0;
    justify-content: center;
  }
}
.front-hero__banner-text {
  font-family: var(--font-en);
  font-size: clamp(27px, 13px + 3.73vw, 35px);
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin: 0 0 0 10px;
}
@media (min-width: 1024px) {
  .front-hero__banner-text {
    font-size: clamp(27px, 13px + 3.73vw, 64px);
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin: 0;
  }
}
.front-hero__highlight {
  color: #d90505;
}
.front-hero__banner-indent {
  display: inline-block;
  padding-left: calc(1em + 10px);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .front-hero__banner-indent {
    padding-left: 7.5em;
  }
}
.front-intro {
  position: relative;
  width: 100%;
  height: 375px;
  z-index: 1;
  overflow: hidden;
  background-color: #0d0d0d;
}
@media (min-width: 1024px) {
  .front-intro {
    height: 410px;
  }
}
@media (min-width: 1366px) {
  .front-intro {
    height: 30vw;
  }
}
.front-intro__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.front-intro__bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
@media (min-width: 1024px) {
  .front-intro__bg-img {
    -o-object-position: center top;
       object-position: center top;
  }
}
.front-intro__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1e1e1e;
  opacity: 0.68; /* 不透明度 68% */
  mix-blend-mode: multiply; /* Figmaの「暗さをプラス」に対応 (multiply / darken) */
  z-index: 2;
}
.front-intro__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 65px;
}
@media (min-width: 1024px) {
  .front-intro__content {
    align-items: center;
    padding-top: 0;
  }
}
.front-intro__content-inner {
  width: 100%;
  max-width: 1100px;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}
@media (min-width: 1024px) {
  .front-intro__content-inner {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    align-items: center;
    gap: 108px;
    margin-top: -74px;
  }
}
.front-intro__text-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1024px) {
  .front-intro__text-group {
    align-items: center;
  }
}
.front-intro__sub {
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 120%;
}
@media (min-width: 1024px) {
  .front-intro__sub {
    font-size: 36px;
  }
}
.front-intro__title {
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.15em;
  line-height: 140%;
  margin: 0;
}
@media (min-width: 1024px) {
  .front-intro__title {
    font-size: 40px;
  }
}
.front-intro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 237px;
  height: 53px;
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  letter-spacing: 0;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .front-intro__btn {
    width: 296px;
    height: 83px;
  }
}
.front-intro__btn:hover {
  background-color: #05337e;
  border-color: #05337e;
}
.front-intro__btn:hover .front-intro__btn-arrow {
  transform: translate(10px, -50%);
}
.front-intro__btn-text {
  margin-right: 10px;
}
.front-intro__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
@media (min-width: 1024px) {
  .front-intro__btn-arrow {
    right: 28px;
  }
}
.front-news {
  position: relative;
  width: 100%;
  z-index: 20;
  margin-top: -13vw;
  background-color: transparent;
  padding-top: 84px;
  padding-bottom: 100px;
}
@media (min-width: 1024px) {
  .front-news {
    padding-top: calc(13vw - 16px);
    padding-bottom: calc(13vw - 11px);
  }
}
.front-news__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(13vw + 6px);
  background-color: #d90505;
  z-index: 4;
  clip-path: polygon(0 13vw, 100% 0, 100% 6px, 0 calc(13vw + 6px));
}
.front-news__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #ffffff;
  clip-path: polygon(0 13vw, 100% 0, 100% calc(100% - 13vw), 0 100%);
  overflow: hidden;
}
.front-news__bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 59% center;
     object-position: 59% center;
  opacity: 0.6;
}
@media (min-width: 1024px) {
  .front-news__bg-img {
    transform: scale(1.2);
    transform-origin: left center;
  }
}
.front-news__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 51, 126, 0.71);
  z-index: 2;
}
.front-news__content {
  position: relative;
  z-index: 5;
  width: 100%;
}
.front-news__content-inner {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .front-news__content-inner {
    max-width: 752px;
    padding-inline: unset;
  }
}
.front-news__header {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .front-news__header {
    margin-bottom: 16px;
  }
}
.front-news__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 120%;
}
@media (min-width: 1024px) {
  .front-news__sub {
    font-size: 13px;
  }
}
.front-news__title {
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.1em;
  line-height: 140%;
  margin: 8px 0 0 0;
}
@media (min-width: 1024px) {
  .front-news__title {
    font-size: 40px;
    margin-top: unset;
  }
}
.front-news__list {
  width: 100%;
  margin: 0 0 60px 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .front-news__list {
    margin-bottom: 60px;
  }
}
.front-news__item {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.front-news__item:first-child {
  border-top: none;
}
.front-news__item:first-child .front-news__item-link {
  padding-top: 0;
  margin-top: 0;
}
@media (min-width: 1024px) {
  .front-news__item:first-child .front-news__item-link {
    padding: 24px 0;
    margin-top: 0;
  }
}
.front-news__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.front-news__item-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 10px 16px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
@media (min-width: 1024px) {
  .front-news__item-link {
    flex-direction: row;
    align-items: center;
    gap: 30px;
    padding: 24px 0px;
  }
}
.front-news__item-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.front-news__date {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .front-news__date {
    font-size: 15px;
  }
}
.front-news__item-title {
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .front-news__item-title {
    font-size: 16px;
    -webkit-line-clamp: 1;
  }
}
.front-news__btn-wrapper {
  display: flex;
  justify-content: center;
}
.front-news__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 51px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .front-news__btn {
    width: 219px;
    height: 54px;
    font-size: 16px;
  }
}
.front-news__btn:hover {
  background-color: #ffffff;
  border-color: #05337e;
  color: #05337e;
}
.front-news__btn:hover .front-news__btn-arrow {
  transform: translate(10px, -50%);
  filter: invert(13%) sepia(80%) saturate(6018%) hue-rotate(352deg) brightness(89%) contrast(93%);
}
.front-news__btn-text {
  margin-right: 10px;
}
.front-news__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
@media (min-width: 1024px) {
  .front-news__btn-arrow {
    right: 28px;
  }
}
.front-about {
  position: relative;
  width: 100%;
  z-index: 10;
  margin-top: -13vw;
  padding-top: 142px;
}
.front-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  clip-path: polygon(0 13vw, 100% 0, 100% calc(100% - 13vw), 0 100%);
}
@media (min-width: 1024px) {
  .front-about::before {
    clip-path: polygon(0 13vw, 100% 0, 100% calc(100% - 13vw), 0 100%);
  }
}
.front-about .sp-only {
  display: block;
}
@media (min-width: 1024px) {
  .front-about .sp-only {
    display: none;
  }
}
@media (min-width: 1024px) {
  .front-about {
    padding-top: 0;
  }
}
.front-about__content {
  position: relative;
  z-index: 5;
  width: 100%;
}
.front-about__container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .front-about__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: none;
    width: calc(100% - (80px + 97 * (100vw - 1024px) / 342));
    margin-left: calc(80px + 97 * (100vw - 1024px) / 342);
    padding: 0;
    gap: 0;
  }
}
@media (min-width: 1500px) {
  .front-about__container {
    margin-left: calc((100vw - 1500px) / 2 + 215px);
    width: 1285px;
  }
}
.front-about__left {
  width: 100%;
}
@media (min-width: 1024px) {
  .front-about__left {
    position: relative;
    z-index: 10; /* Ensures text columns always layer on top of overlapping gallery images */
    width: 348px;
    margin-left: 0;
    padding-top: calc(13vw + 112px); /* Equals exactly 290px at 1366px screen width */
    padding-bottom: unset;
  }
}
@media (min-width: 1500px) {
  .front-about__left {
    padding-top: 307px; /* Locked padding-top above 1500px ceiling */
    padding-bottom: unset; /* Locked padding-bottom above 1500px ceiling */
  }
}
.front-about__header {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .front-about__header {
    text-align: left;
  }
}
.front-about__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: bold;
  color: #d90505;
  letter-spacing: 0.05em;
  line-height: 120%;
}
@media (min-width: 1024px) {
  .front-about__sub {
    font-size: 13px;
  }
}
.front-about__title {
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: 900;
  color: #000000;
  letter-spacing: 0.15em;
  line-height: 140%;
  margin: 5px 0 0 0;
}
@media (min-width: 1024px) {
  .front-about__title {
    font-size: 40px;
  }
}
.front-about__text-group {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .front-about__text-group {
    align-items: flex-start;
    text-align: left;
    gap: 30px;
    margin-bottom: 90px;
  }
}
.front-about__lead {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 1024px) {
  .front-about__lead {
    font-size: 20px;
    font-weight: 900;
  }
}
.front-about__desc {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 1.8;
  margin: 0;
}
@media (min-width: 1024px) {
  .front-about__desc {
    font-size: 16px;
  }
}
.front-about__highlight-wrapper {
  padding: 0;
}
.front-about__highlight {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  margin: 0;
}
@media (min-width: 1024px) {
  .front-about__highlight {
    font-size: 22px;
    font-weight: 900;
  }
}
.front-about__subdesc {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 1.8;
  margin: 0;
}
@media (min-width: 1024px) {
  .front-about__subdesc {
    font-size: 16px;
  }
}
.front-about .front-about__lead,
.front-about .front-about__highlight-wrapper {
  line-height: 2;
}
.front-about__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-bottom: 90px;
}
@media (min-width: 1024px) {
  .front-about__action {
    flex-direction: row;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 0;
  }
}
.front-about__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 51px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .front-about__btn {
    width: 219px;
    height: 54px;
    font-size: 16px;
    flex-shrink: 0;
  }
}
.front-about__btn:hover {
  background-color: #ffffff;
  border-color: #05337e;
  color: #05337e;
}
.front-about__btn:hover .front-about__btn-arrow {
  transform: translate(10px, -50%);
  filter: invert(13%) sepia(80%) saturate(6018%) hue-rotate(352deg) brightness(89%) contrast(93%);
}
.front-about__btn-text {
  margin-right: 10px;
}
.front-about__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: auto;
  display: block;
  transition: all 0.3s ease;
}
@media (min-width: 1024px) {
  .front-about__btn-arrow {
    right: 28px;
  }
}
.front-about__right {
  width: 100%;
}
@media (min-width: 1024px) {
  .front-about__right {
    position: relative;
    width: calc(520px + 239 * (100vw - 1024px) / 342);
    height: calc(852px + 319 * (100vw - 1024px) / 342);
  }
}
@media (min-width: 1500px) {
  .front-about__right {
    width: 852px;
    height: 1266px;
  }
}
.front-about__gallery {
  display: flex;
  flex-direction: column;
  position: relative;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}
@media (min-width: 376px) {
  .front-about__gallery {
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) {
  .front-about__gallery {
    display: block;
    height: 100%;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    position: relative;
  }
}
.front-about__gallery-item {
  position: relative;
  overflow: hidden;
}
.front-about__gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.front-about__gallery-item--01 {
  width: 68%;
  aspect-ratio: 255/283;
  z-index: 1;
  margin-left: 0;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .front-about__gallery-item--01 {
    position: absolute;
    top: 0; /* Align perfectly to the top-right corner of the section */
    right: 0; /* Always perfectly flush to right screen edge */
    width: 100%;
    aspect-ratio: 759/780;
  }
}
.front-about__gallery-item--02 {
  width: 48.8%;
  aspect-ratio: 183/108;
  margin-left: auto;
  margin-right: 0;
  margin-top: -4%;
  z-index: 2;
}
@media (min-width: 1024px) {
  .front-about__gallery-item--02 {
    position: absolute;
    top: calc(530px + 266 * (100vw - 1024px) / 342); /* Exactly 16px below Image 01 bottom at lg breakpoint */
    right: 0;
    width: calc(350px + 171 * (100vw - 1024px) / 342);
    aspect-ratio: 521/307;
    margin-top: 0;
  }
}
@media (min-width: 1500px) {
  .front-about__gallery-item--02 {
    top: 891px;
    width: 588px;
  }
}
.front-about__gallery-item--03 {
  width: 48.8%;
  aspect-ratio: 183/108;
  aspect-ratio: 183/130;
  margin-left: 15.47%;
  margin-right: auto;
  margin-top: 4.26%;
  z-index: 3;
}
@media (min-width: 1024px) {
  .front-about__gallery-item--03 {
    position: absolute;
    right: calc(366px + 171 * (100vw - 1024px) / 342); /* Exactly 16px to the left of Image 02 horizontally */
    top: calc(682px + 266 * (100vw - 1040px) / 342); /* Exactly 168px below Image 01 bottom at lg breakpoint */
    width: calc(250px + 78 * (100vw - 1024px) / 342);
    aspect-ratio: 328/223;
    margin-top: 0;
  }
}
@media (min-width: 1500px) {
  .front-about__gallery-item--03 {
    right: 604px;
    top: 1043px;
    width: 328px;
  }
}
.front-support {
  position: relative;
  width: 100%;
  z-index: 1;
  margin-top: -32px;
  padding-bottom: 60px;
  overflow: hidden;
}
.front-support::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0px;
  background-color: #d90505;
  z-index: 1;
}
@media (min-width: 1024px) {
  .front-support::before {
    width: calc(80px + 86 * (100vw - 1024px) / 342);
    top: 13vw;
    bottom: calc(180px - 0.13 * calc(80px + 86 * (100vw - 1024px) / 342));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.13 * calc(80px + 86 * (100vw - 1024px) / 342)), 0 100%);
  }
}
@media (min-width: 1500px) {
  .front-support::before {
    width: calc((100vw - 1500px) / 2 + 215px);
    bottom: calc(180px - 0.13 * calc((100vw - 1500px) / 2 + 215px));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.13 * calc((100vw - 1500px) / 2 + 215px)), 0 100%);
  }
}
@media (min-width: 1024px) {
  .front-support {
    margin-top: -122px;
    padding-bottom: 120px;
  }
}
.front-support__header {
  position: relative;
  width: 100%;
  z-index: 6;
}
.front-support__red-bar {
  position: relative;
  background-color: #d90505;
  width: 100%;
  height: calc(80px + 13vw);
  clip-path: polygon(0 13vw, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .front-support__red-bar {
    height: calc(120px + 13vw);
  }
}
.front-support__red-text {
  position: absolute;
  left: 5%;
  bottom: 48px;
  font-family: var(--font-en);
  font-size: 27px;
  font-weight: 900;
  color: #9b1717;
  opacity: 0.5;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1;
  text-align: left;
  transform: skewY(-7.5deg);
}
@media (min-width: 1024px) {
  .front-support__red-text {
    bottom: 84px;
    left: calc(80px + 86 * (100vw - 1024px) / 342);
    font-size: 64px;
  }
}
@media (min-width: 1500px) {
  .front-support__red-text {
    left: calc((100vw - 1500px) / 2 + 215px);
  }
}
.front-support__blue-bar {
  position: relative;
  background-color: #05337e;
  margin-left: 0px;
  width: 100%;
  height: calc(100px + 13vw);
  margin-top: calc(-13vw - 2px);
  z-index: 5;
  clip-path: polygon(0 13vw, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .front-support__blue-bar {
    margin-left: calc(80px + 86 * (100vw - 1024px) / 342);
    width: calc(100% - (80px + 86 * (100vw - 1024px) / 342));
  }
}
@media (min-width: 1500px) {
  .front-support__blue-bar {
    margin-left: calc((100vw - 1500px) / 2 + 215px);
    width: calc(100% - calc((100vw - 1500px) / 2 + 215px));
  }
}
.front-support__blue-bar-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px;
}
@media (min-width: 1024px) {
  .front-support__blue-bar-inner {
    padding-bottom: 24px;
  }
}
.front-support__deco-red {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  background-color: #d90505;
  z-index: 10;
}
@media (min-width: 1024px) {
  .front-support__deco-red {
    width: 16px;
    left: -16px;
  }
}
.front-support__title {
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .front-support__title {
    font-size: 40px;
    position: absolute;
    left: calc(50vw - calc(80px + 86 * (100vw - 1024px) / 342));
    transform: translateX(-50%);
    letter-spacing: 0.15em;
  }
}
@media (min-width: 1500px) {
  .front-support__title {
    left: calc(50vw - calc((100vw - 1500px) / 2 + 215px));
  }
}
.front-support__content {
  position: relative;
  z-index: 4;
  margin-top: -1px;
}
.front-support__container {
  display: flex;
  flex-direction: column;
  margin-left: 0;
  width: 100%;
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .front-support__container {
    flex-direction: row;
  }
}
.front-support__item {
  position: relative;
  display: block;
  height: 215px; /* SP時の高さ */
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
}
@media (min-width: 768px) {
  .front-support__item {
    flex: 1;
    height: auto;
    aspect-ratio: 912/530;
  }
}
.front-support__item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.front-support__item-bg picture,
.front-support__item-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.front-support__item:hover .front-support__item-bg img {
  transform: scale(1.08);
}
.front-support__item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 黒色 0.5 */
  z-index: 2;
  transition: background-color 0.4s ease;
}
.front-support__item:hover .front-support__item-overlay {
  background-color: rgba(0, 0, 0, 0.3); /* ホバー時は少し明るく */
}
.front-support__item-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 20px;
  text-align: center;
}
.front-support__item-sub {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0px;
}
@media (min-width: 1024px) {
  .front-support__item-sub {
    font-size: 13px;
    margin-bottom: 0px;
  }
}
.front-support__item-title {
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.15em;
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .front-support__item-title {
    font-size: 32px;
  }
}
.front-support__item-arrow {
  position: absolute;
  left: auto;
  right: 78px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  width: 9px;
  height: 13px;
  filter: brightness(0) invert(1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (min-width: 768px) {
  .front-support__item-arrow {
    right: 40px;
  }
}
@media (min-width: 1024px) {
  .front-support__item-arrow {
    right: 112px;
    width: 12px;
  }
}
.front-support__item:hover .front-support__item-arrow {
  transform: translate(10px, -50%);
}
.front-support__footer {
  position: relative;
  width: 100%;
  z-index: 3;
}
.front-support__footer-bar {
  position: relative;
  margin-left: 16px;
  width: calc(100% - 16px);
  height: 132px;
  min-height: 132px;
  max-height: 132px;
  z-index: 5;
}
.front-support__footer-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #05337e;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13vw), 0 100%);
}
@media (min-width: 1024px) {
  .front-support__footer-bar {
    margin-left: calc(80px + 86 * (100vw - 1024px) / 342);
    width: calc(100% - (80px + 86 * (100vw - 1024px) / 342));
    height: 182px;
    min-height: 182px;
    max-height: 182px;
  }
}
@media (min-width: 1500px) {
  .front-support__footer-bar {
    margin-left: calc((100vw - 1500px) / 2 + 215px);
    width: calc(100% - calc((100vw - 1500px) / 2 + 215px));
  }
}
.front-support__footer-deco-red {
  position: absolute;
  left: -16px;
  top: 0;
  height: 72px;
  width: 16px;
  background-color: #d90505;
  z-index: 10;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2px), 0 100%);
}
@media (min-width: 1024px) {
  .front-support__footer-deco-red {
    width: 16px;
    clip-path: none;
    height: 112px;
  }
}
.front-blog {
  position: relative;
  width: 100%;
  z-index: 1;
  padding-top: 60px;
  padding-bottom: 150px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .front-blog {
    padding-top: 100px;
    padding-bottom: 260px;
  }
}
.front-blog__container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 768px) {
  .front-blog__container {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  .front-blog__container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: none;
    width: calc(100% - calc(90px + 87 * (100vw - 1024px) / 342));
    margin-left: calc(90px + 87 * (100vw - 1024px) / 342);
    padding: 0;
    gap: 0;
  }
}
@media (min-width: 1500px) {
  .front-blog__container {
    margin-left: calc((100vw - 1500px) / 2 + 226px);
    width: calc(100% - calc((100vw - 1500px) / 2 + 226px));
  }
}
.front-blog__left {
  width: 100%;
}
@media (min-width: 1024px) {
  .front-blog__left {
    width: 296px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 106px;
  }
}
.front-blog__header {
  text-align: center;
}
@media (min-width: 1024px) {
  .front-blog__header {
    text-align: left;
  }
}
.front-blog__sub {
  display: block;
  font-family: "Montserrat", var(--font-en), sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #d90505;
  letter-spacing: 0.05em;
  line-height: 120%;
  margin-bottom: 5px;
}
.front-blog__title {
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: 900;
  color: #000000;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 1024px) {
  .front-blog__title {
    font-size: 40px;
  }
}
.front-blog__action {
  display: flex;
  align-items: center;
  gap: 20px;
}
.front-blog__action--pc {
  display: none;
}
@media (min-width: 1024px) {
  .front-blog__action--pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 219px;
  }
}
.front-blog__action--sp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
}
@media (min-width: 1024px) {
  .front-blog__action--sp {
    display: none;
  }
}
.front-blog__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 51px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .front-blog__btn {
    width: 219px;
    height: 54px;
    font-size: 16px;
  }
}
.front-blog__btn:hover {
  background-color: #ffffff;
  border-color: #05337e;
  color: #05337e;
}
.front-blog__btn:hover .front-blog__btn-arrow {
  transform: translate(10px, -50%);
  filter: invert(13%) sepia(80%) saturate(6018%) hue-rotate(352deg) brightness(89%) contrast(93%);
}
.front-blog__btn-text {
  margin-right: 10px;
}
.front-blog__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
@media (min-width: 1024px) {
  .front-blog__btn-arrow {
    right: 28px;
  }
}
.front-blog__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.front-blog__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #c8c8c8;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  color: #c8c8c8;
}
.front-blog__nav-btn.is-active {
  background-color: #c8c8c8;
  border-color: #c8c8c8;
  color: #ffffff;
}
@media (hover: hover) {
  .front-blog__nav-btn:hover {
    border-color: #a0a0a0;
    color: #a0a0a0;
    background-color: #f7f7f7;
  }
  .front-blog__nav-btn:hover.is-active {
    background-color: #b0b0b0;
    border-color: #b0b0b0;
    color: #ffffff;
  }
}
.front-blog__nav-icon {
  width: 8px;
  height: 14px;
  display: block;
  color: inherit;
  transition: color 0.3s ease;
}
.front-blog__right {
  width: 100%;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .front-blog__right {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    padding-left: 16px;
    padding-right: 0;
  }
}
@media (min-width: 1024px) {
  .front-blog__right {
    width: calc(100% - 296px);
    padding-left: 60px;
  }
}
@media (min-width: 1500px) {
  .front-blog__right {
    padding-left: 80px;
  }
}
.front-blog__slider {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.front-blog__slider.is-dragging {
  cursor: grabbing;
}
.front-blog__slider::-webkit-scrollbar {
  display: none;
}
.front-blog__slider-inner {
  display: flex;
  padding-bottom: 30px;
}
@media (max-width: 1023px) {
  .front-blog__slider-inner {
    gap: 0;
  }
  .front-blog__slider-inner::after {
    content: "";
    display: block;
    width: calc(100vw - 316px);
    flex-shrink: 0;
  }
}
@media (min-width: 1024px) {
  .front-blog__slider-inner {
    gap: 24px;
  }
}
.front-blog__card {
  width: 300px;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .front-blog__card {
    width: 344px;
  }
}
@media (max-width: 1023px) {
  .front-blog__card {
    margin-right: 20px;
  }
  .front-blog__card:last-child {
    margin-right: 0;
  }
}
.front-blog__card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.front-blog__card-link:hover .front-blog__card-img {
  transform: scale(1.15);
}
.front-blog__card-link:hover .front-blog__card-title {
  color: #05337e;
}
.front-blog__card-img-wrapper {
  width: 300px;
  height: 198px;
  overflow: hidden;
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .front-blog__card-img-wrapper {
    width: 344px;
    height: 200px;
  }
}
.front-blog__card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
.front-blog__card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.front-blog__card-date {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .front-blog__card-date {
    font-size: 15px;
  }
}
.front-blog__card-cat {
  display: inline-block;
  background-color: #05337e;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 12px 5px;
  border-radius: 100px;
  line-height: 1;
}
@media (min-width: 1024px) {
  .front-blog__card-cat {
    font-size: 15px;
    padding: 6px 18px;
  }
}
.front-blog__card-title {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  line-height: 1.6;
  margin: 0;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .front-blog__card-title {
    font-size: 16px;
  }
}
.front {
  /* ==========================================================================
     50周年バナーセクション (50th Anniversary Banner)
     ========================================================================== */
}
.front-banner {
  width: 100%;
  max-width: 500px;
  margin: 90px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .front-banner {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  .front-banner {
    max-width: 1000px;
    margin: 140px 0 0;
    padding: 0;
    margin-left: calc(90px + 87 * (100vw - 1024px) / 342);
  }
}
@media (min-width: 1500px) {
  .front-banner {
    margin-left: calc((100vw - 1500px) / 2 + 226px);
  }
}
.front-banner__link {
  display: block;
  width: 100%;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.front-banner__link:hover {
  opacity: 0.9;
}
.front-banner__img {
  width: 100%;
  height: auto;
  display: block;
}
.front {
  /* ==========================================================================
     採用情報セクション (Recruitment Section)
     ========================================================================== */
}
.front-recruit {
  position: relative;
  width: 100%;
  z-index: 1;
  margin-top: -32px;
  padding-bottom: 60px;
  overflow: hidden;
}
.front-recruit::before {
  content: "";
  position: absolute;
  top: 13vw;
  left: 0;
  bottom: 192px;
  width: 16px;
  background-color: #05337e;
  z-index: 1;
}
@media (min-width: 1024px) {
  .front-recruit::before {
    width: calc(80px + 86 * (100vw - 1024px) / 342);
    top: 13vw;
    bottom: calc(280px - 0.13 * calc(80px + 86 * (100vw - 1024px) / 342));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.13 * calc(80px + 86 * (100vw - 1024px) / 342)), 0 100%);
  }
}
@media (min-width: 1500px) {
  .front-recruit::before {
    width: calc((100vw - 1500px) / 2 + 215px);
    bottom: calc(280px - 0.13 * calc((100vw - 1500px) / 2 + 215px));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.13 * calc((100vw - 1500px) / 2 + 215px)), 0 100%);
  }
}
@media (min-width: 1024px) {
  .front-recruit {
    margin-top: -122px;
    padding-bottom: 120px;
    overflow: hidden;
  }
}
.front-recruit__header {
  position: relative;
  width: 100%;
  z-index: 6;
}
.front-recruit__navy-bar {
  position: relative;
  background-color: #05337e;
  width: 100%;
  height: calc(80px + 13vw);
  clip-path: polygon(0 13vw, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .front-recruit__navy-bar {
    height: calc(120px + 13vw);
  }
}
.front-recruit__navy-text {
  position: absolute;
  left: 5%;
  bottom: 50px;
  font-family: var(--font-en);
  font-size: 27px;
  font-weight: 900;
  color: #061426;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1;
  text-align: left;
  transform: skewY(-7.5deg);
  opacity: 0.9;
}
@media (min-width: 1024px) {
  .front-recruit__navy-text {
    bottom: 80px;
    left: calc(80px + 86 * (100vw - 1024px) / 342);
    font-size: 64px;
  }
}
@media (min-width: 1500px) {
  .front-recruit__navy-text {
    left: calc((100vw - 1500px) / 2 + 215px);
  }
}
.front-recruit__cyan-bar {
  position: relative;
  background-color: #28bada;
  margin-left: 16px;
  width: calc(100% - 16px);
  height: calc(100px + 13vw);
  margin-top: calc(-13vw - 2px);
  z-index: 5;
  clip-path: polygon(0 13vw, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .front-recruit__cyan-bar {
    margin-left: calc(80px + 86 * (100vw - 1024px) / 342);
    width: calc(100% - (80px + 86 * (100vw - 1024px) / 342));
    clip-path: polygon(0 13vw, 100% 0, 100% 200%, 0 200%);
  }
}
@media (min-width: 1500px) {
  .front-recruit__cyan-bar {
    margin-left: calc((100vw - 1500px) / 2 + 215px);
    width: calc(100% - calc((100vw - 1500px) / 2 + 215px));
  }
}
.front-recruit__cyan-bar-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 1024px) {
  .front-recruit__cyan-bar-inner {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 50px;
  }
}
.front-recruit__deco-navy {
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 16px;
  background-color: #05337e;
  z-index: 10;
}
.front-recruit__content {
  position: relative;
  z-index: 4;
  margin-top: -1px;
}
@media (min-width: 1024px) {
  .front-recruit__content {
    z-index: auto;
  }
}
.front-recruit__container {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  width: calc(100% - 16px);
}
@media (min-width: 1024px) {
  .front-recruit__container {
    flex-direction: row;
    margin-left: calc(80px + 86 * (100vw - 1024px) / 342);
    width: calc(100% - (80px + 86 * (100vw - 1024px) / 342));
    align-items: stretch;
    height: 390px;
  }
}
@media (min-width: 1500px) {
  .front-recruit__container {
    margin-left: calc((100vw - 1500px) / 2 + 215px);
    width: calc(100% - calc((100vw - 1500px) / 2 + 215px));
    background-color: #28bada;
  }
}
.front-recruit__left {
  position: relative;
  background-color: #28bada;
  width: 100%;
  z-index: 4;
  padding: 40px 20px 80px;
  text-align: center;
}
@media (min-width: 1024px) {
  .front-recruit__left {
    max-width: 507px;
    width: 42.25%;
    height: 440px;
    margin-bottom: -50px;
    padding: 30px 40px 80px;
    padding-left: 77px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
}
@media (min-width: 1366px) {
  .front-recruit__left {
    padding-left: 77px;
  }
}
@media (min-width: 1500px) {
  .front-recruit__left {
    padding-left: 80px;
  }
}
.front-recruit__title-group {
  text-align: center;
  position: relative;
  left: -8px;
}
@media (min-width: 1024px) {
  .front-recruit__title-group {
    position: relative;
    text-align: left;
    left: 0;
    padding-left: 77px;
    top: 60px;
    z-index: 10;
  }
}
@media (min-width: 1366px) {
  .front-recruit__title-group {
    padding-left: 77px;
  }
}
@media (min-width: 1500px) {
  .front-recruit__title-group {
    padding-left: 80px;
  }
}
.front-recruit__sub {
  display: block;
  font-family: "Montserrat", var(--font-en), sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #d90505;
  letter-spacing: 0.05em;
  line-height: 120%;
  text-align: center;
  margin-bottom: 8px;
}
@media (min-width: 1024px) {
  .front-recruit__sub {
    font-size: 15px;
    margin-bottom: 12px;
    text-align: left;
  }
}
.front-recruit__title {
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05;
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .front-recruit__title {
    font-size: 40px;
  }
}
.front-recruit__desc {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.8;
  letter-spacing: 0.14em;
  margin: 0 auto 40px;
  width: 68vw;
  max-width: 450px;
  text-align: center;
  position: relative;
  left: -8px;
}
@media (min-width: 1024px) {
  .front-recruit__desc {
    font-size: 16px;
    line-height: 1.9;
    margin: 0;
    margin-bottom: 30px;
    width: 100%;
    max-width: 344px;
    text-align: left;
    left: 0;
  }
}
.front-recruit__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 255px;
  margin: 0 auto;
  position: relative;
  left: -8px;
}
@media (min-width: 1024px) {
  .front-recruit__actions {
    width: 100%;
    max-width: 344px;
    margin: 0;
    left: 0;
  }
}
.front-recruit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 255px;
  height: 51px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .front-recruit__btn {
    width: 100%;
    height: 54px;
    font-size: 16px;
  }
}
.front-recruit__btn:hover {
  background-color: #ffffff;
  border-color: #05337e;
  color: #05337e;
}
.front-recruit__btn:hover .front-recruit__btn-arrow {
  transform: translate(10px, -50%) rotate(45deg);
}
.front-recruit__btn-text {
  margin-right: 10px;
}
.front-recruit__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  display: block;
  transition: transform 0.3s ease;
  border-top: 2px solid #d90505;
  border-right: 2px solid #d90505;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
}
@media (min-width: 1024px) {
  .front-recruit__btn-arrow {
    right: 28px;
  }
}
.front-recruit__right {
  position: relative;
  width: 100%;
  z-index: 3;
  margin-top: 0;
  background-color: #28bada;
}
@media (min-width: 1024px) {
  .front-recruit__right {
    width: 57.75%;
    margin-top: 0;
    display: flex;
    align-items: flex-start;
    background-color: transparent;
    position: relative;
    top: -68px;
    z-index: 6;
  }
}
@media (min-width: 1366px) {
  .front-recruit__right {
    width: calc(100% - 507px);
  }
}
.front-recruit__img-wrapper {
  width: 83.2vw;
  max-width: calc(100% - 16px);
  height: 87.4666666667vw;
  overflow: hidden;
  margin-left: auto;
  margin-bottom: -220px;
}
.front-recruit__img-wrapper picture {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 1024px) {
  .front-recruit__img-wrapper {
    width: 100%;
    max-width: 880px;
    aspect-ratio: 693/729;
    height: auto;
    min-height: auto;
    max-height: none;
    margin-left: 0;
    margin-bottom: 0;
  }
}
.front-recruit__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
  display: block;
}
.front-recruit__footer {
  position: relative;
  width: 100%;
  z-index: 3;
}
.front-recruit__footer-bar {
  position: relative;
  margin-left: 16px;
  width: calc(100% - 16px);
  height: 132px;
  min-height: 132px;
  max-height: 132px;
  z-index: 5;
}
.front-recruit__footer-bar::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #28bada;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13vw), 0 100%);
}
@media (min-width: 1024px) {
  .front-recruit__footer-bar {
    margin-left: calc(80px + 86 * (100vw - 1024px) / 342);
    width: calc(100% - (80px + 86 * (100vw - 1024px) / 342));
    height: 260px;
    min-height: 260px;
    max-height: 282px;
  }
}
@media (min-width: 1500px) {
  .front-recruit__footer-bar {
    margin-left: calc((100vw - 1500px) / 2 + 215px);
    width: calc(100% - calc((100vw - 1500px) / 2 + 215px));
  }
}
.front-recruit__footer-deco-red {
  margin-top: -1px;
  position: absolute;
  left: -16px;
  top: 0;
  height: 42px;
  width: 16px;
  background-color: #05337e;
  z-index: 10;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2px), 0 100%);
}
@media (min-width: 1024px) {
  .front-recruit__footer-deco-red {
    display: none;
  }
}
.front {
  /* ==========================================================================
     グループカンパニーセクション (Group Company Section)
     ========================================================================== */
}
.front-group {
  margin-top: 90px;
  position: relative;
  width: 100%;
  z-index: 1;
  padding: 0 0 100px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .front-group {
    margin-top: 40px;
    padding: 0px 0 140px;
  }
}
.front-group__container {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .front-group__container {
    margin-left: 0;
    width: 100%;
  }
}
@media (min-width: 1500px) {
  .front-group__container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
}
.front-group__card {
  width: 100%;
}
@media (min-width: 1024px) {
  .front-group__card {
    display: grid;
    grid-template-columns: 50.7320644217% 1fr;
    -moz-column-gap: 6.6617862372%;
         column-gap: 6.6617862372%;
    align-items: start;
  }
}
.front-group__image-wrapper {
  width: 100%;
  aspect-ratio: 1125/678;
  overflow: hidden;
}
.front-group__image-wrapper picture {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 1024px) {
  .front-group__image-wrapper {
    width: 100%;
    aspect-ratio: 693/354;
    height: auto;
  }
}
.front-group__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.front-group__content {
  padding: 30px 16px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .front-group__content {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 0;
    text-align: left;
  }
}
.front-group__header {
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .front-group__header {
    margin-bottom: 60px;
  }
}
.front-group__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: bold;
  color: #d90505;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  margin-bottom: 5px;
}
@media (min-width: 1024px) {
  .front-group__sub {
    margin-bottom: 8px;
  }
}
.front-group__title {
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: bold;
  color: #0d0d0d;
  margin: 0;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .front-group__title {
    font-size: 40px;
  }
}
.front-group__desc {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.14em;
  margin: 0 auto 60px;
  max-width: 450px;
}
@media (min-width: 1024px) {
  .front-group__desc {
    font-size: 20px;
    line-height: 1.9;
    margin: 0;
    margin-bottom: 84px;
    max-width: none;
  }
}
.front-group__br-sp {
  display: inline;
}
@media (min-width: 1024px) {
  .front-group__br-sp {
    display: none;
  }
}
.front-group__actions {
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .front-group__actions {
    margin: 0;
  }
}
.front-group__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 219px;
  height: 54px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .front-group__btn {
    font-size: 16px;
  }
}
.front-group__btn:hover {
  background-color: #ffffff;
  border-color: #05337e;
  color: #05337e;
}
.front-group__btn:hover .front-group__btn-arrow {
  transform: translate(10px, -50%) rotate(45deg);
}
.front-group__btn-text {
  margin-right: 10px;
}
.front-group__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  display: block;
  transition: transform 0.3s ease;
  border-top: 2px solid #d90505;
  border-right: 2px solid #d90505;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
}
@media (min-width: 1024px) {
  .front-group__btn-arrow {
    right: 24px;
  }
}
.front {
  /* ==========================================================================
     猫社員こうふく日和バナーセクション (Cat Banner Section)
     ========================================================================== */
}
.front-kouhuku-banner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 140px;
  padding: 0 16px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .front-kouhuku-banner {
    margin-bottom: 140px;
  }
}
@media (min-width: 1000px) {
  .front-kouhuku-banner {
    padding: 0;
  }
}
.front-kouhuku-banner__link {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}
.front-kouhuku-banner__link:hover {
  opacity: 0.7;
}
.front-kouhuku-banner__picture {
  display: block;
  width: 100%;
}
.front-kouhuku-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

.page-hero {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 375/154; /* 375px幅で154pxの比率を維持して拡大 */
  background-color: #f5f5f5; /* 背景デフォルト */
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: 57px; /* ヘッダーから下の位置に配置（ヘッダー高 57px） */
}
@media (min-width: 1024px) {
  .page-hero {
    height: auto;
    aspect-ratio: 1366/296; /* 1366px幅のときに296pxの高さになる比率。以降も維持 */
    margin-top: 0; /* PCでTOPページ・Aboutと同様に画面上端から配置し、透明ヘッダーを被せる */
  }
}
.page-hero__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 100%;
}
@media (min-width: 1024px) {
  .page-hero__inner {
    padding: 0 40px;
    position: static; /* 中央寄せコンテナの基準を解除し、画面左端を基準にする魔法 */
  }
}
.page-hero__title-area {
  color: #ffffff;
  position: absolute;
  top: 40.9090909091%; /* 高さに合わせて比率で位置を調整 */
  left: 20px;
  z-index: 15;
}
@media (min-width: 1024px) {
  .page-hero__title-area {
    position: absolute;
    top: 36.4864864865%; /* 上から108pxの比率 */
    left: 0;
    padding-left: 0;
    width: 100%;
  }
}
.page-hero__title {
  font-family: var(--font-en);
  font-size: 32px; /* SP 32px */
  font-weight: 900; /* SP 900 */
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin: 0;
  font-style: italic;
}
@media (min-width: 1024px) {
  .page-hero__title {
    font-size: 4.6852122987vw; /* 1366pxで64px */
    margin-left: 8.4919472914vw; /* paddingではなくmarginで画面左端からの位置指定 */
    padding-left: 0;
  }
}
.page-hero__subtitle {
  font-family: var(--font-base);
  font-size: 12px; /* SP 12px */
  font-weight: 900; /* SP 900 */
  letter-spacing: 0.05em;
  margin-top: 4px;
  display: block;
}
@media (min-width: 1024px) {
  .page-hero__subtitle {
    font-size: 1.4641288433vw; /* 1366pxで20px */
    margin-top: 0.7320644217vw; /* 指定通り上からの空き */
    margin-left: 7.6866764275vw; /* paddingではなくmarginで画面左端からの位置指定 */
    padding-top: 0;
    padding-left: 0;
  }
}
.page-hero {
  /* 背景画像コンテナ（中央に見える写真） */
}
.page-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.page-hero__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.page-hero {
  /* 左側青カバー */
}
.page-hero__cover-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 36.5333333333%; /* 375px幅のときの137pxの比率 */
  height: 100%;
  background-color: #05337e; /* 色: #05337E */
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 56.204379562% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .page-hero__cover-left {
    width: 27.6720351391%; /* 1366pxで378pxの比率 */
    clip-path: polygon(0 0, 100% 0, 56.3492063492% 100%, 0 100%); /* 底辺213px */
  }
}
.page-hero {
  /* 右側台形カバー */
}
.page-hero__cover-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 30.6666666667%; /* 375px幅のときの115pxの比率 */
  height: 100%;
  background-color: #05337e;
  mix-blend-mode: multiply;
  z-index: 3;
  clip-path: polygon(43.4782608696% 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .page-hero__cover-right {
    width: 27.6720351391%; /* 1366pxで378pxの比率 */
    clip-path: polygon(43.6507936508% 0, 100% 0, 100% 100%, 0 100%); /* 上辺213px (378-213=165) */
  }
}

/* パンくずリスト */
.breadcrumb {
  background-color: #f5f5f5; /* デフォルト背景 */
  padding: 8px 0; /* ヒーローからの余白8px */
  font-size: 13px;
  font-weight: 500; /* Medium指定 */
  color: #000000; /* ベースを真っ黒に */
}
.breadcrumb__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px; /* 左右の余白16px */
}
.breadcrumb {
  /* プラグインが出力するspanタグ等も強制的に真っ黒にする */
}
.breadcrumb span {
  color: #000000;
}
.breadcrumb a {
  color: #000000; /* リンクも真っ黒に */
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: #05337e;
  text-decoration: underline;
}
.breadcrumb__separator {
  margin: 0 8px;
  color: #000000;
}
.breadcrumb__current {
  color: #000000;
}

/* ==========================================================================
   About Us Page Styles
   ========================================================================== */
.about-page {
  font-family: var(--font-base);
  color: #333333;
  line-height: 1.8;
  overflow: hidden;
  background-color: #f5f5f5; /* 基本背景をF5F5F5に設定 */
}
@media (min-width: 1024px) {
  .about-page {
    background-image: var(--about-intro-bg-pc);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
}
.about-page br.u-pc-only {
  display: none;
}
@media (min-width: 1024px) {
  .about-page br.u-pc-only {
    display: block;
  }
}
.about-page {
  /* ヒーローセクションのレスポンシブ（アスペクト比維持）対応 */
}
.about-page__hero {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 375/154; /* 375px幅で154pxの比率を維持して拡大 */
  background-color: #f5f5f5; /* 背景デフォルト */
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: 57px; /* ヘッダーから下の位置に配置（ヘッダー高 57px） */
}
@media (min-width: 1024px) {
  .about-page__hero {
    height: auto;
    aspect-ratio: 1366/296; /* 1366px幅のときに296pxの高さになる比率。以降も維持 */
    margin-top: 0; /* PCでTOPページと同様に画面上端から配置し、透明ヘッダーを被せる */
  }
}
.about-page__hero-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 100%;
}
@media (min-width: 1024px) {
  .about-page__hero-inner {
    padding: 0 40px;
    position: static; /* 中央寄せコンテナの基準を解除し、画面左端を基準にする魔法 */
  }
}
.about-page__hero-title-area {
  color: #ffffff;
  position: absolute;
  top: 40.9090909091%; /* 高さに合わせて比率で位置を調整 */
  left: 20px;
  z-index: 15;
}
@media (min-width: 1024px) {
  .about-page__hero-title-area {
    position: absolute;
    top: 36.4864864865%; /* 上から108pxの比率 */
    left: 0;
    padding-left: 0;
    width: 100%;
  }
}
.about-page__hero-title {
  font-family: var(--font-en);
  font-size: 32px; /* SP 32px */
  font-weight: 900; /* SP 900 */
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin: 0;
  font-style: italic;
}
@media (min-width: 1024px) {
  .about-page__hero-title {
    font-size: 4.6852122987vw; /* 1366pxで64px */
    margin-left: 8.4919472914vw; /* paddingではなくmarginで画面左端からの位置指定 */
    padding-left: 0;
  }
}
.about-page__hero-subtitle {
  font-family: var(--font-base);
  font-size: 12px; /* SP 12px */
  font-weight: 900; /* SP 900 */
  letter-spacing: 0.05em;
  margin-top: 4px;
  display: block;
}
@media (min-width: 1024px) {
  .about-page__hero-subtitle {
    font-size: 1.4641288433vw; /* 1366pxで20px */
    margin-top: 0.7320644217vw; /* 指定通り上からの空き */
    margin-left: 7.6866764275vw; /* paddingではなくmarginで画面左端からの位置指定 */
    padding-top: 0;
    padding-left: 0;
  }
}
.about-page__hero {
  /* 背景画像コンテナ */
}
.about-page__hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.about-page__hero-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.about-page__hero {
  /* 左側青カバー */
}
.about-page__hero-cover-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 36.5333333333%; /* 375px幅のときの137pxの比率 */
  height: 100%;
  background-color: #05337e; /* 色: #05337E */
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 56.204379562% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .about-page__hero-cover-left {
    width: 27.6720351391%; /* 1366pxで378pxの比率 */
    clip-path: polygon(0 0, 100% 0, 56.3492063492% 100%, 0 100%); /* 底辺213px */
  }
}
.about-page__hero {
  /* 右側台形カバー */
}
.about-page__hero-cover-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 30.6666666667%; /* 375px幅のときの115pxの比率 */
  height: 100%;
  background-color: #05337e;
  mix-blend-mode: multiply;
  z-index: 3;
  clip-path: polygon(43.4782608696% 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1024px) {
  .about-page__hero-cover-right {
    width: 27.6720351391%; /* 1366pxで378pxの比率 */
    clip-path: polygon(43.6507936508% 0, 100% 0, 100% 100%, 0 100%); /* 上辺213px (378-213=165) */
  }
}
.about-page {
  /* 1. イントロセクション */
}
.about-page__intro {
  position: relative;
  padding: 88px 16px 0px;
  overflow: hidden;
  background-color: #f5f5f5;
}
@media (min-width: 1024px) {
  .about-page__intro {
    min-height: 560px;
    padding: 67px 0 378px;
    background-color: transparent;
  }
}
.about-page__intro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--about-intro-bg-sp);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: auto 101.6vw;
  background-position: center calc(57px + 41.066vw);
  opacity: 1;
}
@media (min-width: 1024px) {
  .about-page__intro-bg {
    display: none;
  }
}
.about-page__intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 上部と下部の両方を背景色 #f5f5f5 で馴染ませる（SPのバランスは維持） */
  background: linear-gradient(to bottom, #f5f5f5 0%, rgba(245, 245, 245, 0) 15%, rgba(245, 245, 245, 0) 65%, #f5f5f5 85%, #f5f5f5 100%);
}
@media (min-width: 1024px) {
  .about-page__intro::after {
    background: linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 30%, rgba(245, 245, 245, 0.5) 100%);
  }
}
.about-page__intro-inner {
  position: relative;
  z-index: 3;
  max-width: 486px;
  margin: 0;
  max-width: 486px;
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 1024px) {
  .about-page__intro-inner {
    max-width: none;
    margin: 0;
    margin-inline: 0;
    padding: 0 0 0 12.6647144949vw;
  }
}
.about-page__intro-catch {
  font-size: 32px;
  font-weight: 900;
  color: #000000;
  line-height: 1.8;
  letter-spacing: 0.09em;
  margin: 0 0 30px;
}
@media (min-width: 1024px) {
  .about-page__intro-catch {
    font-size: 50px;
    line-height: 1.8;
    margin: 0 0 50px 0;
  }
}
@media (min-width: 1024px) {
  .about-page__intro-catch br.u-sp-only {
    display: none;
  }
}
.about-page__intro-catch .highlight-blue {
  display: inline;
  color: #05337e;
}
@media (min-width: 1024px) {
  .about-page__intro-catch .highlight-blue {
    border-bottom: 0;
  }
}
.about-page__intro-catch .highlight-red {
  display: inline;
  color: #d90505;
}
@media (min-width: 1024px) {
  .about-page__intro-catch .highlight-red {
    border-bottom: 0;
  }
}
.about-page__intro-text {
  max-width: 460px;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  line-height: 1.67;
  letter-spacing: 0.12em;
  text-align: left;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .about-page__intro-text {
    max-width: 415px;
    margin-left: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.12em;
  }
}
.about-page__intro-text p {
  margin-bottom: 0;
  letter-spacing: 0.15em;
}
.about-page__intro-text p:last-child {
  margin-bottom: 0;
}
.about-page {
  /* 2. 理念セクション */
}
.about-page__philosophy {
  padding: 140px 16px 160px;
  background-color: #f5f5f5; /* 基本背景 */
}
@media (min-width: 1024px) {
  .about-page__philosophy {
    padding: 0;
    background-color: transparent;
    position: relative;
  }
  .about-page__philosophy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(245, 245, 245, 0.5) 0%, rgba(245, 245, 245, 0.8) 35%, #f5f5f5 70%, #f5f5f5 100%);
  }
}
.about-page__philosophy-inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.about-page__philosophy-header {
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .about-page__philosophy-header {
    margin-bottom: 60;
  }
}
.about-page__philosophy-subtitle {
  font-size: 24px;
  font-weight: 900;
  color: #d90505;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .about-page__philosophy-subtitle {
    font-size: 40px;
  }
}
.about-page__philosophy-lead {
  font-size: 15px;
  font-weight: 900;
  color: #d90505;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .about-page__philosophy-lead {
    font-size: 40px;
  }
}
.about-page__philosophy-intro-desc {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  text-align: center;
  line-height: 1.8;
  margin-top: 60px;
  letter-spacing: 0.15em;
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .about-page__philosophy-intro-desc {
    font-size: 20px;
  }
}
@media (min-width: 1024px) {
  .about-page__philosophy-intro-desc br.u-sp-only {
    display: none;
  }
}
.about-page__philosophy-intro-desc .highlight-red {
  color: #d90505;
  font-weight: 700;
}
.about-page__philosophy-intro-desc .highlight-blue {
  color: #05337e;
  font-weight: 700;
}
.about-page__philosophy-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
}
@media (min-width: 1024px) {
  .about-page__philosophy-cards {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: unset;
  }
}
.about-page__philosophy-card {
  background-color: #ffffff;
  width: 238px;
  height: 285px;
  border-radius: 0;
  box-shadow: 7px 7px 0 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  box-sizing: border-box;
  padding: 40px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  letter-spacing: 0.1em;
}
.about-page__philosophy-card-title {
  font-size: 24px;
  font-weight: 900;
  color: #05337E;
  margin-bottom: 30px;
  line-height: 1.2;
  border-bottom: none;
  display: block;
  padding-bottom: 0;
}
.about-page__philosophy-card-items {
  width: 100%;
  margin-bottom: auto;
  line-height: 1.4;
}
.about-page__philosophy-card-items p {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 10px 0;
  letter-spacing: 0.1em;
}
.about-page__philosophy-card-items p:last-child {
  margin-bottom: 0;
}
.about-page {
  /* 3. 伊藤工務店の強みセクション */
}
.about-page__strengths {
  padding: 0px 16px 30px;
  position: relative;
  margin-top: -6.5vw; /* Pull up to hide gap under philosophy section */
}
.about-page__strengths::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #e6e8eb;
  transform: skewY(-7.5deg);
  transform-origin: top left;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .about-page__strengths {
    padding: 160px 0 130px;
    margin-top: -90px;
    background-color: #f5f5f5;
  }
  .about-page__strengths::before {
    top: calc(250px + 6.58vw);
  }
}
.about-page__strengths .section-title {
  letter-spacing: 0.15em;
}
.about-page__strengths .section-title__sub {
  text-transform: none;
  font-weight: 700;
  margin-bottom: 0;
}
.about-page__strengths .section-title__main {
  font-size: 24px;
  font-weight: 900;
  color: #000000;
}
@media (min-width: 1024px) {
  .about-page__strengths .section-title__main {
    font-size: 40px;
  }
}
.about-page__strengths-inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (min-width: 1024px) {
  .about-page__strengths-inner {
    max-width: 1500px;
    width: 100%;
    margin-inline: auto;
    margin-top: 2.5%;
  }
}
.about-page__strengths-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 60px;
}
@media (min-width: 1024px) {
  .about-page__strengths-items {
    gap: 80px;
    margin-top: 80px;
  }
}
.about-page__strengths-item {
  position: relative;
  background-color: #ffffff;
  width: 100%;
  max-width: 343px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(5, 51, 126, 0.05);
  border-radius: 0;
}
@media (min-width: 1024px) {
  .about-page__strengths-item {
    flex-direction: row;
    max-width: none;
    width: 100%;
    margin-top: 0;
    background-color: transparent;
    box-shadow: none;
    align-items: center;
    gap: 0;
  }
  .about-page__strengths-item:nth-child(even) {
    flex-direction: row-reverse;
  }
  .about-page__strengths-item:nth-child(even) .about-page__strengths-body {
    margin-left: 0;
    margin-right: 12.9575402635%;
  }
  .about-page__strengths-item:nth-child(even) .about-page__strengths-img-block {
    margin-left: 0;
    margin-right: -4.6852122987%;
  }
}
@media (min-width: 1366px) {
  .about-page__strengths-item:nth-child(even) .about-page__strengths-body {
    margin-right: calc(50% - 506px);
    margin-left: 0;
  }
  .about-page__strengths-item:nth-child(even) .about-page__strengths-img-block {
    width: calc(50% + 76px);
    margin-right: -64px;
    margin-left: 0;
  }
}
.about-page__strengths-body {
  padding: 74px 16px 70px;
  text-align: left;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
@media (min-width: 1024px) {
  .about-page__strengths-body {
    width: 36.1639824305%;
    height: auto;
    flex-grow: 0;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(5, 51, 126, 0.05);
    padding: 55px 45px 55px 35px;
    margin-left: 12.9575402635%;
    z-index: 2;
    box-sizing: border-box;
    padding: 76px 51px 60px;
  }
}
@media (min-width: 1366px) {
  .about-page__strengths-body {
    width: 494px;
    margin-left: calc(50% - 506px);
  }
}
.about-page__strengths-num {
  position: absolute;
  top: -44px;
  left: 35px;
  font-family: var(--font-en);
  font-size: 105px;
  font-weight: 900;
  font-style: italic;
  color: #05337e;
  line-height: 1;
  z-index: 10;
  letter-spacing: normal;
}
.about-page__strengths-item-title {
  font-size: 20px;
  font-weight: 900;
  color: #05337e;
  line-height: 1.4;
  margin-bottom: 20px;
  text-align: left;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .about-page__strengths-item-title {
    margin-bottom: 28px;
  }
}
.about-page__strengths-item-desc {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  line-height: 1.7;
  text-align: left;
  margin: 0;
  letter-spacing: 0.05em;
}
.about-page__strengths-img-block {
  width: 343px;
  height: 155px;
  margin: 0 auto;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .about-page__strengths-img-block {
    width: 55.5636896047%;
    height: auto;
    aspect-ratio: 759/342;
    margin: 0;
    margin-left: -4.6852122987%;
    flex-shrink: 0;
    z-index: 1;
  }
}
@media (min-width: 1366px) {
  .about-page__strengths-img-block {
    width: calc(50% + 76px);
    height: 342px;
    margin-left: -64px;
  }
}
.about-page__strengths-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.about-page {
  /* 4. 地域社会貢献セクション */
}
.about-page__contribution {
  padding: 80px 16px;
  background-color: #f5f5f5; /* 基本背景 */
  padding-bottom: 220px;
}
@media (min-width: 1024px) {
  .about-page__contribution {
    padding: 120px 0 180px; /* 下部余白を180pxに増やし、採用バナーの上方向のはみ出し（傾斜）を回避 */
  }
}
.about-page__contribution .section-title {
  margin-bottom: 60px;
}
.about-page__contribution .section-title__sub {
  font-family: "Montserrat", sans-serif;
  text-transform: none;
  color: #d90505;
  margin-bottom: unset;
}
.about-page__contribution .section-title__main {
  color: #000000;
}
.about-page__contribution-inner {
  max-width: 500px; /* SPからMDまでは横幅が広がりすぎないよう500pxに制限 */
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 1024px) {
  .about-page__contribution-inner {
    max-width: 1004px;
    width: 100%;
  }
}
.about-page__contribution-lead {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px auto;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  line-height: 2;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .about-page__contribution-lead {
    margin-bottom: 70px;
  }
}
@media (min-width: 1024px) {
  .about-page__contribution-lead br.u-sp-only {
    display: none;
  }
}
.about-page__contribution-items {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.about-page__contribution-item {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .about-page__contribution-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
  }
}
.about-page__contribution-img-block {
  width: 100%;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .about-page__contribution-img-block {
    width: 414px;
    height: 226px;
    flex-shrink: 0;
  }
}
.about-page__contribution-img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (min-width: 1024px) {
  .about-page__contribution-img {
    width: 100%;
    height: 100%;
  }
}
.about-page__contribution-info-block {
  width: 100%;
}
@media (min-width: 1024px) {
  .about-page__contribution-info-block {
    width: 560px;
    flex-shrink: 0;
  }
}
.about-page__contribution-header-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .about-page__contribution-header-block {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
}
.about-page__contribution-badge-block {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #28bada;
  color: #ffffff;
  width: 100%;
  aspect-ratio: 343/92;
  gap: 10px;
}
@media (min-width: 1024px) {
  .about-page__contribution-badge-block {
    width: 137px;
    height: 92px;
    aspect-ratio: unset;
    flex-shrink: 0;
  }
}
.about-page__contribution-badge-label {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.about-page__contribution-badge-num {
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  display: inline-block;
  margin-top: -6px;
}
.about-page__contribution-item-title {
  font-size: 20px;
  font-weight: 900;
  color: #28bada;
  line-height: 1.4;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .about-page__contribution-item-title {
    text-align: left;
    margin-top: 0;
    line-height: 1.8;
  }
}
.about-page__contribution-item-title br.u-pc-only {
  display: none;
}
@media (min-width: 1024px) {
  .about-page__contribution-item-title br.u-pc-only {
    display: block;
  }
}
@media (min-width: 1024px) {
  .about-page__contribution-item-title br.u-sp-only {
    display: none;
  }
}
.about-page__contribution-item-desc {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  line-height: 1.7;
  text-align: left;
  margin: 0;
  letter-spacing: 0.15em;
}

/* 5. 採用案内バナーセクション */
.about-page__recruit {
  position: relative;
  width: 100%;
  background-color: transparent; /* 背景色は斜め変形させるため::beforeで描画 */
  z-index: 5;
}
@media (min-width: 1024px) {
  .about-page__recruit {
    padding: 0;
    margin: 0;
    background-color: #f5f5f5; /* 画面幅100%に広がるグレー背景（固定背景画像の透過を防ぐ） */
  }
}
.about-page__recruit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 476px; /* 背景の青の高さを476pxに設定 */
  background-color: #05337e;
  z-index: 1;
  transform: skewY(-7.5deg); /* 右肩上がり（-7.5deg） */
  transform-origin: top left;
}
@media (min-width: 1024px) {
  .about-page__recruit::before {
    width: 100%;
    height: 423px; /* ご指定の高さ612pxに修正 */
    top: min(6.58vw, 98.7px); /* 中央で回転させるため、1500px以上でも同じY座標を維持 */
    left: 0;
    transform-origin: center;
    transform: skewY(-7.5deg);
    clip-path: none;
  }
}
.about-page__recruit-container {
  position: relative;
  width: 100%;
  padding: 60px 0 100px; /* カード開始を108pxにし、下部余白を60pxに設定 */
  margin-top: -30px;
}
@media (min-width: 1024px) {
  .about-page__recruit-container {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 1500px; /* 横幅が広がりすぎないように1500pxで制限 */
    margin: 0 auto; /* 1500px以上の画面で左右に余白を設けて中央寄せ */
    height: calc(603.24px + min(13.16vw, 197.4px)); /* 1366pxの時に正確に783pxになり、1500px以上では広がりすぎない */
    overflow: hidden;
  }
}
.about-page__recruit-bg-text {
  position: absolute;
  top: 4px;
  left: 26px;
  font-family: "Montserrat", sans-serif;
  font-size: 36px; /* ウォーターマークのフォントサイズを36pxに修正 */
  font-weight: 900;
  font-style: italic;
  color: #02112e; /* 視認性の高い極濃紺 */
  opacity: 0.95;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  letter-spacing: -0.02em;
  transform: skewY(-7.5deg); /* 右肩上がり（-7.5deg） */
  transform-origin: center;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .about-page__recruit-bg-text {
    font-size: 64px;
    top: calc(min(13.16vw, 197.4px) + 18px);
    left: 140px;
    transform-origin: left top;
    transform: skewY(-7.5deg);
  }
}
.about-page__recruit-card-wrapper {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  width: calc(100% - 30px);
  max-width: 1004px;
  height: 430px;
  z-index: 5;
}
@media (min-width: 1024px) {
  .about-page__recruit-card-wrapper {
    position: absolute;
    top: calc(min(6.58vw, 98.7px) + 40px);
    right: 0;
    left: 140px;
    width: calc(100% - 140px);
    max-width: none;
    height: 542px;
    margin: 0;
  }
}
.about-page__recruit-card {
  position: absolute;
  inset: 0;
  background-color: #28bada;
  transform-origin: center;
  transform: skewY(-7.5deg);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .about-page__recruit-card {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    background-color: #28bada;
    transform: none; /* skewYを解除し、真っ直ぐなコンテナにする */
    clip-path: polygon(0 calc(min(13.16vw, 197.4px) - 18.4px), 100% 0, 100% calc(100% - (min(13.16vw, 197.4px) - 18.4px)), 0 100%); /* 背景のskewYと完全に同じ角度 */
  }
}
.about-page__recruit-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.about-page__recruit-img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #28bada;
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}
.about-page__recruit-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 65% 15%;
     object-position: 65% 15%; /* 左右は60%で固定。上下の数値をさらに小さく(15%)して、画像の上部をもっと写すようにしました */
  display: block;
  transform: scale(1.34) skewY(7.5deg); /* 逆方向に変形し、1.5倍ズームにする */
  transform-origin: center 30%; /* ズームの起点を少し上に変更。これがないと中心から拡大されて画像上部が枠外に押し出されてしまいます */
  z-index: 1;
}
@media (min-width: 1024px) {
  .about-page__recruit-img {
    transform: none; /* 枠のskewを解除したため、画像も一切拡大（scale）する必要がなくなり、画像全体がそのまま綺麗に表示されます！ */
  }
}
.about-page__recruit-inner {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  padding: 35px 50px 20px 20px; /* 上部余白を60pxから35pxに縮小してはみ出しを防ぐ */
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .about-page__recruit-inner {
    transform: translateX(-70px); /* 140pxの余白による右寄りを相殺し、画面全体のど真ん中に配置！ */
    padding: 0;
    justify-content: center;
    align-items: center;
  }
}
.about-page__recruit-subtitle {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 1.5; /* line-heightを2から1.4に縮小 */
  margin-top: 0;
  margin-bottom: 24px; /* 下部余白を30pxから20pxに縮小 */
  letter-spacing: 0.1em;
  text-indent: 0.1em; /* letter-spacingのズレを相殺 */
  text-shadow: 0 4px 15px rgba(5, 51, 126, 0.4);
}
@media (min-width: 1024px) {
  .about-page__recruit-subtitle {
    font-size: 40px;
    line-height: 2; /* PC時は元の高さに */
    margin-bottom: 30px;
    margin-top: 30px;
  }
  .about-page__recruit-subtitle br {
    display: none; /* PCでは改行なしにする */
  }
}
.about-page__recruit-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* 余白を縮める */
  width: 100%;
}
@media (min-width: 480px) {
  .about-page__recruit-btns {
    flex-direction: row;
    flex-wrap: wrap; /* 4つのボタンが折り返して綺麗に収まるように */
    justify-content: center;
    gap: 16px 20px;
  }
}
.about-page__recruit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  height: 50px; /* ボタンの高さを低く */
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 15px; /* 文字サイズを少し抑える */
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  background-color: transparent;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .about-page__recruit-btn {
    width: 240px; /* 4つ並べた時に収まるサイズに */
    height: 60px; /* ボタンの高さを低く */
    font-size: 18px;
  }
}
.about-page__recruit-btn-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 9px;
  transition: transform 0.3s ease;
}
.about-page__recruit-btn:hover {
  background-color: #05337e; /* ホバーでネイビーに */
  border-color: #05337e;
  color: #ffffff; /* テキストは白のまま */
}
.about-page__recruit-btn:hover .about-page__recruit-btn-arrow {
  transform: translate(4px, -50%); /* 赤の矢印は右へ */
}

.company-page {
  font-family: var(--font-base);
  color: #333333;
  line-height: 1.8;
  overflow: hidden;
  background-color: #f5f5f5;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .company-page {
    padding-bottom: 100px;
  }
}
.company-page .section-title__sub {
  margin-bottom: unset;
  letter-spacing: 0.15em;
}
.company-page .section-title__main {
  letter-spacing: 0.15em;
  color: #000;
}
.company-page {
  /* 会社案内ページでは、次のセクションに合わせてパンくずの背景色を白にする */
}
.company-page {
  /* 1. メッセージセクション */
}
.company-page__message {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .company-page__message {
    padding: 140px 0;
  }
}
.company-page__message::before {
  content: "";
  position: absolute;
  top: 240px;
  bottom: 200px;
  left: 0;
  width: 100%;
  background-color: #e6e8eb;
  z-index: 0;
  transform: skewY(-7.5deg);
  transform-origin: top right;
}
@media (min-width: 1024px) {
  .company-page__message::before {
    top: 200px;
    bottom: 790px;
  }
}
.company-page__message-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.company-page__message .section-title {
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .company-page__message .section-title {
    margin-bottom: 90px;
  }
}
@media (min-width: 1024px) {
  .company-page__message .section-title__main {
    color: #000;
  }
}
@media (min-width: 1024px) {
  .company-page__message .section-title__sub {
    margin-bottom: unset;
  }
}
.company-page__message-lead {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  color: #000000;
  margin-bottom: 100px;
  letter-spacing: 0.15em;
}
.company-page__message-lead .br-pc {
  display: none;
}
.company-page__message-lead .br-sp {
  display: inline;
}
@media (min-width: 1024px) {
  .company-page__message-lead {
    font-size: 20px;
    line-height: 2.2;
    margin-bottom: 60px;
  }
  .company-page__message-lead .br-pc {
    display: inline;
  }
  .company-page__message-lead .br-sp {
    display: none;
  }
}
.company-page__message-box-wrapper {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 1024px) {
  .company-page__message-box-wrapper {
    position: relative;
    margin-left: 80px;
    width: calc(100% - 80px);
    margin-right: 0;
    max-width: none;
  }
}
@media (min-width: 1200px) {
  .company-page__message-box-wrapper {
    margin-left: 120px;
    width: calc(100% - 120px);
  }
}
@media (min-width: 1366px) {
  .company-page__message-box-wrapper {
    margin-left: calc((100vw - 1034px) / 2);
    width: calc(100% - (100vw - 1034px) / 2);
  }
}
.company-page__message-box {
  background-color: #05337e;
  color: #ffffff;
  padding: 70px 16px 60px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  transform: skewY(-7.5deg);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .company-page__message-box {
    flex-direction: row-reverse;
    padding: 0 0 0 55px;
    height: 940px;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
    width: 100%;
    max-width: none;
  }
}
.company-page__message-body {
  flex: 1;
  transform: skewY(7.5deg);
}
@media (min-width: 1024px) {
  .company-page__message-body {
    flex: 0 0 506px;
    width: 506px;
    margin-top: 40px;
  }
}
.company-page__message-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.15em;
  margin-top: 0;
  margin-bottom: 30px;
  color: #ffffff;
}
@media (min-width: 1024px) {
  .company-page__message-title {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 30px;
  }
}
.company-page__message-text {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.15em;
  margin-bottom: 30px;
  color: #ffffff;
}
@media (min-width: 1024px) {
  .company-page__message-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
  }
}
.company-page__message-signature {
  font-size: 20px;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-align: left;
  margin: 0;
}
@media (min-width: 1024px) {
  .company-page__message-signature {
    font-size: 20px;
    text-align: left;
  }
}
.company-page__message-signature .name {
  font-size: 20px;
  margin-left: 10px;
}
@media (min-width: 1024px) {
  .company-page__message-signature .name {
    font-size: 20px;
  }
}
.company-page__message-photo {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  transform: skewY(7.5deg);
}
.company-page__message-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 1024px) {
  .company-page__message-photo {
    width: 100%;
    max-width: 627px;
    height: 552px;
    flex-shrink: 1;
    margin: 0;
    top: -80px;
    position: relative;
  }
}
.company-page__message-img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (min-width: 1024px) {
  .company-page__message-img {
    height: 100%;
  }
}
.company-page {
  /* 2. 会社概要セクション */
}
.company-page__profile {
  position: relative;
  z-index: 1;
  padding: 60px 0 140px;
}
.company-page__profile::before {
  display: none;
}
@media (min-width: 1024px) {
  .company-page__profile::before {
    display: block;
    content: "";
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #e6e8eb;
    z-index: 0;
    transform: skewY(-7.5deg);
    transform-origin: top right;
  }
}
@media (min-width: 1024px) {
  .company-page__profile {
    padding: 100px 0 40px;
  }
}
.company-page__profile .section-title {
  margin-bottom: 60px;
}
.company-page__profile .section-title__sub {
  margin-bottom: unset;
}
.company-page__profile .section-title__main {
  color: #000;
}
.company-page__profile-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .company-page__profile-inner {
    max-width: 760px;
  }
}
.company-page__profile-table {
  width: 100%;
}
.company-page__profile-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 0;
  border-bottom: none;
  letter-spacing: 0.1em;
}
.company-page__profile-row:last-child {
  margin-bottom: 0;
}
@media (min-width: 480px) {
  .company-page__profile-row {
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 20px;
  }
}
@media (min-width: 1024px) {
  .company-page__profile-row {
    gap: 30px;
  }
}
.company-page__profile-label {
  font-weight: 700;
  color: #000000;
  font-size: 16px;
  width: 100%;
  margin-bottom: 5px;
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .company-page__profile-label {
    width: 260px;
    margin-bottom: 0;
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .company-page__profile-label {
    width: 100px;
  }
}
.company-page__profile-value {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  flex: 1;
  margin: 0;
  line-height: 1.7;
}
@media (min-width: 480px) {
  .company-page__profile-value {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .company-page__profile-value {
    width: 630px;
    flex: none;
  }
}
.company-page__profile-branch {
  margin-bottom: 24px;
}
.company-page__profile-branch:last-child {
  margin-bottom: 0;
}
.company-page__profile-branch-name {
  display: block;
  font-weight: 400;
  color: #000000;
  margin-bottom: 0;
  font-size: 16px;
}
.company-page__profile-branch-heading {
  display: block;
  font-weight: 500;
  color: #000000;
  margin-bottom: 0;
  font-size: 16px;
}
.company-page__profile-branch-address {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}
.company-page__profile-branch-note {
  margin: 8px 0 0;
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
}
.company-page__profile-detail-text {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: #000000;
  line-height: 1.7;
}
.company-page__profile-detail-label {
  font-weight: 600;
}
.company-page {
  /* 3. 沿革セクション */
}
.company-page__history {
  position: relative;
  z-index: 1;
  padding: 0 0 140px;
}
.company-page__history::before {
  display: none;
}
@media (min-width: 1024px) {
  .company-page__history::before {
    display: block;
    content: "";
    position: absolute;
    top: -10px;
    bottom: 240px;
    left: 0;
    width: 100%;
    background-color: #e6e8eb;
    z-index: 0;
    transform: skewY(-7.5deg);
    transform-origin: bottom right;
  }
}
@media (min-width: 1024px) {
  .company-page__history {
    padding: 100px 0 175px;
  }
}
.company-page__history-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .company-page__history-inner {
    max-width: 604px;
  }
}
.company-page__history .section-title {
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .company-page__history .section-title {
    margin-bottom: 90px;
  }
}
.company-page__history .section-title__sub {
  margin-bottom: unset;
}
.company-page__history .section-title__main {
  color: #000;
}
.company-page__history-timeline {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.company-page__history-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 0;
  border-bottom: none;
  letter-spacing: 0.1em;
}
.company-page__history-row:last-child {
  margin-bottom: 0;
}
@media (min-width: 480px) {
  .company-page__history-row {
    margin-bottom: 20px;
  }
}
@media (min-width: 1024px) {
  .company-page__history-row {
    gap: 30px;
  }
}
.company-page__history-year {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  width: 98px;
  flex-shrink: 0;
  margin-bottom: 0;
}
@media (min-width: 480px) {
  .company-page__history-year {
    width: 180px;
  }
}
@media (min-width: 1024px) {
  .company-page__history-year {
    width: 100px;
  }
}
.company-page__history-event {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  flex: 1;
  line-height: 1.7;
}
@media (min-width: 480px) {
  .company-page__history-event {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .company-page__history-event {
    width: 490px;
    flex: none;
  }
}
.company-page {
  /* 4. 表彰・受賞セクション */
}
.company-page__awards {
  padding: 0px 0px 140px;
}
@media (min-width: 1024px) {
  .company-page__awards {
    padding: 100px 0;
  }
}
.company-page__awards-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .company-page__awards-inner {
    padding: 0;
  }
}
.company-page__awards-cards {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 1024px) {
  .company-page__awards-cards {
    gap: 90px;
  }
}
.company-page__awards-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .company-page__awards-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: none;
    width: 100%;
    margin-inline: unset;
    padding-left: clamp(16px, (100vw - 1100px) / 2, 200px);
    padding-right: 0;
  }
  .company-page__awards-card:nth-child(even) {
    flex-direction: row-reverse;
    padding-left: 0;
    padding-right: clamp(16px, (100vw - 1100px) / 2, 200px);
  }
  .company-page__awards-card:nth-child(even) .company-page__awards-body {
    margin-right: 0;
    margin-left: -60px;
  }
}
@media (min-width: 1024px) and (min-width: 1366px) {
  .company-page__awards-card:nth-child(even) .company-page__awards-body {
    margin-left: -80px;
    margin-right: 0;
  }
}
.company-page__awards-img-block {
  width: 100%;
  height: auto;
  aspect-ratio: 343/155;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .company-page__awards-img-block {
    height: 380px;
    flex: 1;
    aspect-ratio: auto;
  }
}
@media (min-width: 1366px) {
  .company-page__awards-img-block {
    height: 342px;
  }
}
.company-page__awards-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.company-page__awards-body {
  padding: 30px 16px;
  background-color: #e6e8eb;
  text-align: center;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .company-page__awards-body {
    width: 480px;
    flex: 0 0 480px;
    padding: 50px 60px;
    margin-right: -60px;
    z-index: 2;
  }
}
@media (min-width: 1366px) {
  .company-page__awards-body {
    width: 496px;
    flex: 0 0 496px;
    margin-right: -80px;
  }
}
.company-page__awards-title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  margin-top: 0;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
  text-align: center;
}
@media (min-width: 1024px) {
  .company-page__awards-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
}
.company-page__awards-desc {
  font-size: 16px;
  color: #000000;
  line-height: 1.8;
  margin: 0;
  letter-spacing: 0.1em;
  text-align: left;
}
@media (min-width: 1024px) {
  .company-page__awards-desc {
    font-size: 16px;
    letter-spacing: 0.1em;
  }
}
.company-page__awards {
  /* 新しい受賞歴セクション */
}
.company-page__awards-history-section {
  width: 100%;
  max-width: 1200px;
  margin: 0px auto 0;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .company-page__awards-history-section {
    max-width: 984px;
    margin-top: 50px;
    padding: 0;
  }
}
.company-page__awards-history-title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  text-align: center;
  margin-bottom: 60px;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .company-page__awards-history-title {
    margin-bottom: 60px;
  }
}
.company-page__awards-history-images {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 30px;
  padding-inline: 14px;
}
@media (min-width: 768px) {
  .company-page__awards-history-images {
    flex-direction: row;
    justify-content: center;
    gap: 21px;
    margin-bottom: 60px;
  }
}
.company-page__awards-history-image-item {
  flex: 1;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .company-page__awards-history-image-item {
    flex: 0 0 314px;
    width: 314px;
    max-width: 314px;
  }
}
.company-page__awards-history-img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.company-page__awards-history-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.company-page__awards-history-row {
  display: flex;
  flex-direction: column;
  padding: 16px 30px;
  border-radius: 4px;
  font-weight: 400;
  background-color: #ffffff;
}
.company-page__awards-history-row:nth-child(even) {
  background-color: transparent;
}
@media (min-width: 1024px) {
  .company-page__awards-history-row {
    flex-direction: row;
    align-items: start;
    padding: 16px 30px;
    margin-bottom: 0;
    border-radius: 0;
  }
}
.company-page__awards-history-col {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}
.company-page__awards-history-col:last-child {
  margin-bottom: 0;
}
.company-page__awards-history-col .pc-only {
  display: none;
}
@media (min-width: 1024px) {
  .company-page__awards-history-col {
    font-size: 16px;
    margin-bottom: 0;
    padding-right: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .company-page__awards-history-col .pc-only {
    display: inline;
  }
  .company-page__awards-history-col--org {
    width: 30%;
    font-weight: 400;
    color: #000;
  }
  .company-page__awards-history-col--date {
    width: 18%;
    font-weight: 400;
    color: #000;
  }
  .company-page__awards-history-col--name {
    width: 27%;
    font-weight: 400;
    color: #000;
  }
  .company-page__awards-history-col--project {
    width: 25%;
    padding-right: 0;
    font-weight: 400;
    color: #000;
  }
}
.company-page {
  /* 5. アクセスセクション */
}
.company-page__access {
  padding: 0px 0 140px;
}
@media (min-width: 1024px) {
  .company-page__access {
    padding: 40px 0 100px;
  }
}
.company-page__access-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.company-page__access .section-title {
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .company-page__access .section-title {
    margin-bottom: 90px;
  }
}
.company-page__access .section-title__sub {
  margin-bottom: unset;
}
.company-page__access .section-title__main {
  color: #000;
}
.company-page__access-content {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 1024px) {
  .company-page__access-content {
    gap: 150px;
  }
}
.company-page__access-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 1024px) {
  .company-page__access-group {
    gap: 30px;
  }
}
.company-page__access-group--hirono {
  gap: 20px;
}
@media (min-width: 1024px) {
  .company-page__access-group--hirono {
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .company-page__access-group--hirono .company-page__access-card {
    max-width: 683px;
    margin: 0 auto;
  }
}
.company-page__access-row {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 1024px) {
  .company-page__access-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
.company-page__access-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 1024px) {
  .company-page__access-card {
    max-width: none;
    margin-inline: unset;
  }
}
.company-page__access-img-block {
  width: 100%;
  height: auto;
  aspect-ratio: 343/176;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .company-page__access-img-block {
    height: auto;
    aspect-ratio: 683/351;
  }
}
.company-page__access-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.company-page__access-info {
  padding: 20px 0 0;
  text-align: left;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .company-page__access-info {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    text-align: left;
  }
}
.company-page__access-name {
  font-size: 16px;
  font-weight: 500;
  margin-top: 0;
  line-height: 1.7;
}
.company-page__access-address {
  font-size: 15px;
  color: #333333;
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 1024px) {
  .company-page__access-address {
    font-size: 16px;
  }
}
.company-page__access-map-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) {
  .company-page__access-map-block {
    gap: 20px;
  }
}
.company-page__access-map {
  width: 100%;
  height: 200px;
  max-width: 990px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .company-page__access-map {
    height: 450px;
  }
}
@media (min-width: 1366px) {
  .company-page__access-map {
    height: 501px;
  }
}
.company-page__access-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.company-page__access-note {
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin: 0;
}
@media (min-width: 1024px) {
  .company-page__access-note {
    font-size: 16px;
    margin-left: 30px;
  }
}

/* Business Page Styles */
.business-page {
  font-family: var(--font-base);
  color: #333333;
  line-height: 1.8;
  overflow: hidden;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .business-page {
    padding-bottom: unset;
  }
}
.business-page {
  /* セクションタイトルの微調整 */
}
.business-page .section-title__main {
  color: #000000;
  letter-spacing: 0.2em;
}
.business-page .section-title__sub {
  margin-bottom: 0;
  letter-spacing: 0.2em;
}
.business-page {
  /* SP/PC 表示切り替え用ユーティリティ */
}
.business-page .u-sp-only {
  display: inline;
}
@media (min-width: 1024px) {
  .business-page .u-sp-only {
    display: none;
  }
}
.business-page {
  /* 1. リード文セクション */
}
.business-page__intro {
  padding: 60px 16px 90px;
}
@media (min-width: 1024px) {
  .business-page__intro {
    padding: 140px 0;
  }
}
.business-page__intro-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.business-page__intro-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  color: #000000;
  margin: 0;
  letter-spacing: 0.12em;
}
@media (min-width: 1024px) {
  .business-page__intro-text {
    font-size: 20px;
    line-height: 2.2;
  }
}
.business-page {
  /* 2. 当社の施工・管理体制セクション */
}
.business-page__system {
  padding: 0px 0 140px;
}
.business-page__system .section-title {
  margin-bottom: 140px;
}
@media (min-width: 1024px) {
  .business-page__system {
    padding: 0px 0 170px;
  }
}
.business-page__system-inner {
  max-width: 1100px;
  max-width: 1124px;
  margin: 0 auto;
  padding: 0 16px;
}
.business-page__system-cards {
  display: flex;
  flex-direction: column;
  gap: 140px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .business-page__system-cards {
    flex-direction: row;
    gap: 50px;
    margin-top: 60px;
  }
}
.business-page__system-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .business-page__system-card {
    width: calc((100% - 40px) / 2);
  }
}
.business-page__system-card {
  /* 画像ブロック - タグがはみ出せるように overflow: visible にし、picture に overflow: hidden を適用 */
}
.business-page__system-card-img-block {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 512/312;
  overflow: visible;
}
.business-page__system-card-img-block picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.business-page__system-card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.business-page__system-card {
  /* 斜めタグ（System 1 / System 2） */
}
.business-page__system-card-tag {
  position: absolute;
  top: -66px;
  left: -16px;
  width: 183px;
  height: 80px;
  background-color: #28bada;
  color: #000000; /* 文字色黒 */
  z-index: 10;
  transform: skewY(-7.5deg);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 20px;
  gap: 8px;
  line-height: 1;
  box-sizing: border-box;
}
.business-page__system-card-tag-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px; /* System 20px */
  letter-spacing: 0.1em;
  display: inline-block;
  margin-bottom: 0;
  transform: skewY(7.5deg);
}
.business-page__system-card-tag-num {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 105px; /* 105px */
  line-height: 0.72;
  letter-spacing: -0.02em;
  display: inline-block;
  font-style: italic;
  transform: skewY(7.5deg) translateY(20px);
}
.business-page__system-card-body {
  padding: 20px 0 0;
}
.business-page__system-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 15px;
  line-height: 1.5;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .business-page__system-card-title {
    letter-spacing: 0.05em;
    font-size: 20px; /* PCでも20pxに固定 */
  }
}
.business-page__system-card-desc {
  font-size: 16px; /* 16px */
  line-height: 1.8;
  margin: 0;
  letter-spacing: 0.125em;
}
.business-page {
  /* 3. 対応工事一覧セクション */
}
.business-page__works {
  padding: 0px 0;
}
@media (min-width: 1024px) {
  .business-page__works {
    padding: 0px 0;
  }
}
.business-page__works .section-title {
  margin-bottom: 60px;
}
.business-page__works-inner {
  max-width: 1093px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .business-page__works-inner {
    max-width: 1125px;
  }
}
.business-page__works {
  /* Flexboxで配置することで、2段目の2つを中央寄せにする */
}
.business-page__works-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px 20px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .business-page__works-grid {
    gap: 59px 53px;
    margin-top: 60px;
  }
}
.business-page__works-item {
  width: 100%;
  max-width: 329px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.business-page__works-item:hover {
  opacity: 0.85;
}
@media (min-width: 1024px) {
  .business-page__works-item {
    width: calc((100% - 106px) / 3);
    max-width: 329px;
  }
}
.business-page__works-item-img-block {
  width: 100%;
  aspect-ratio: 329/250;
  overflow: hidden;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .business-page__works-item-img-block {
    aspect-ratio: 329/250;
  }
}
.business-page__works-item-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.business-page__works-item-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .business-page__works-item-title {
    font-size: 20px;
  }
}
.business-page__works-btn-block {
  margin-top: 90px;
  text-align: center;
}
@media (min-width: 1024px) {
  .business-page__works-btn-block {
    margin-top: 140px;
  }
}
.business-page__works-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 295px;
  height: 54px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #05337e;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-sizing: border-box;
}
.business-page__works-btn:hover {
  background-color: #ffffff;
  color: #05337e;
  border-color: #05337e;
}
.business-page__works-btn:hover .business-page__works-btn-arrow {
  transform: translateX(5px) rotate(45deg);
}
.business-page__works-btn-arrow {
  display: block;
  transition: transform 0.3s ease;
  border-top: 2px solid #d90505;
  border-right: 2px solid #d90505;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  margin-left: 16px;
  margin-top: -1px;
}
.business-page {
  /* 4. グループ会社紹介セクション */
}
.business-page__group {
  padding: 140px 0 140px;
}
@media (min-width: 1024px) {
  .business-page__group {
    padding: 140px 0 200px;
  }
}
.business-page__group-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
@media (min-width: 1024px) {
  .business-page__group-inner {
    padding: 0;
  }
}
.business-page__group-card {
  position: relative;
  width: 100%;
  height: 305px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
@media (min-width: 1024px) {
  .business-page__group-card {
    height: 305px;
  }
}
.business-page__group-img-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.business-page__group-img-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #848484;
  mix-blend-mode: multiply;
}
.business-page__group-img-block picture {
  display: block;
  width: 100%;
  height: 100%;
}
.business-page__group-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.business-page__group-body {
  position: relative;
  z-index: 2;
  padding-top: 46px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
@media (min-width: 1024px) {
  .business-page__group-body {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 90px;
    max-width: 1093px;
    margin: 0 auto;
    padding: 0 16px;
    padding-top: 0;
    text-align: left;
  }
}
.business-page__group-header {
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .business-page__group-header {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.business-page__group-sub {
  display: block;
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .business-page__group-sub {
    font-size: 36px;
    margin-bottom: 10px;
  }
}
.business-page__group-title {
  font-family: var(--font-base);
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .business-page__group-title {
    font-size: 40px;
    letter-spacing: 0.25em;
  }
}
.business-page__group-desc {
  display: none;
}
.business-page__group-btn-block {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 1024px) {
  .business-page__group-btn-block {
    width: auto;
  }
}
.business-page__group-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 297px;
  height: 72px;
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
}
@media (min-width: 1024px) {
  .business-page__group-btn {
    width: 366px;
    height: 82px;
    font-size: 16px;
  }
}
.business-page__group-btn:hover {
  background-color: #ffffff;
  color: #05337e;
  border-color: #ffffff;
}
.business-page__group-btn:hover .business-page__group-btn-arrow {
  transform: translate(5px, -50%) rotate(45deg);
}
.business-page__group-btn-arrow {
  display: none;
}
@media (min-width: 1024px) {
  .business-page__group-btn-arrow {
    display: block;
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid #d90505;
    border-right: 2px solid #d90505;
    width: 8px;
    height: 8px;
    transition: transform 0.3s ease;
  }
}

/* Ito Bussan Page Styles */
.bussan-page {
  font-family: var(--font-base);
  line-height: 1.8;
  overflow: hidden;
  margin-top: 57px;
}
@media (min-width: 1024px) {
  .bussan-page .breadcrumb__inner {
    max-width: 1366px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 103px !important;
  }
}
@media (min-width: 1024px) {
  .bussan-page {
    margin-top: 57px;
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .bussan-page .breadcrumb {
    order: 2;
  }
}
@media (min-width: 1024px) {
  .bussan-page .breadcrumb__inner {
    padding: 0;
  }
}
.bussan-page {
  /* グリーティング専用タイトル */
}
.bussan-page .bussan-greet .bussan-section-title {
  margin-bottom: 60px;
  text-align: center;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet .bussan-section-title {
    margin-bottom: 90px;
  }
}
.bussan-page .bussan-greet .bussan-section-title .bussan-section-title__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  text-transform: none;
  letter-spacing: 0.15em;
}
.bussan-page .bussan-greet .bussan-section-title .bussan-section-title__main {
  font-size: 26px;
  font-weight: 900;
  color: #000000;
  letter-spacing: 0.15em;
  margin: 0;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet .bussan-section-title .bussan-section-title__main {
    font-size: 40px;
  }
}
.bussan-page .bussan-hero {
  position: relative;
  padding: 0;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero {
    order: 1;
  }
}
.bussan-page .bussan-hero__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 166.6666666667vw;
  z-index: 1;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__backdrop {
    display: block;
    height: 605px;
  }
}
.bussan-page .bussan-hero__backdrop-bg {
  position: absolute;
  top: -4.2666666667vw;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #d2d6db;
  transform: skewY(-7.5deg);
  transform-origin: top right;
  z-index: 1;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__backdrop-bg {
    margin-top: 0px;
  }
}
.bussan-page .bussan-hero__backdrop-text {
  position: absolute;
  top: 11.7333333333vw;
  left: 16px;
  font-family: var(--font-en);
  font-size: 36px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #ffffff;
  white-space: nowrap;
  transform: rotate(-7.5deg);
  transform-origin: left top;
  z-index: 10;
}
@media (min-width: 480px) {
  .bussan-page .bussan-hero__backdrop-text {
    font-size: 54px;
  }
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__backdrop-text {
    display: block;
    font-size: 105px;
    top: 150px;
    left: 60px;
    z-index: 10;
  }
}
@media (min-width: 1024px) and (min-width: 1366px) {
  .bussan-page .bussan-hero__backdrop-text {
    left: calc(60px + (100vw - 1366px) / 2);
  }
}
.bussan-page .bussan-hero__backdrop-text-red {
  color: #d90505;
  font-style: italic;
}
.bussan-page .bussan-hero__inner {
  max-width: 1093px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  padding: 40px 16px 0px;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__inner {
    padding: 100px 0 0px;
  }
}
.bussan-page .bussan-hero__visual {
  width: 66.6666666667vw;
  height: auto;
  aspect-ratio: 250/327;
  overflow: hidden;
  border-radius: 0;
  position: absolute;
  top: 10.6666666667vw;
  right: 0;
  z-index: 5;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__visual {
    position: relative;
    top: 0;
    right: 0;
    width: 48.9019033675vw;
    height: auto;
    margin-left: auto;
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    aspect-ratio: 668/684;
    border-radius: 0;
    z-index: 5;
  }
}
@media (min-width: 1024px) and (min-width: 1366px) {
  .bussan-page .bussan-hero__visual {
    width: 668px;
    margin-right: -136.5px;
  }
}
.bussan-page .bussan-hero__visual-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.bussan-page .bussan-hero__blue-box {
  background-color: #05337e;
  color: #ffffff;
  padding: 77.3333333333vw 4.2666666667vw 10.6666666667vw 8vw;
  border-radius: 0;
  width: 86.9333333333vw;
  height: auto;
  margin-top: 18.6666666667vw;
  margin-left: auto;
  margin-right: -4.2666666667vw;
  position: relative;
  z-index: 3;
  box-shadow: none;
  transform: skewY(-7.5deg);
  transform-origin: top right;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__blue-box {
    position: absolute;
    top: 120px;
    left: calc(166px - (50vw - 50%));
    right: calc(50% - 50vw);
    width: auto;
    height: auto;
    min-height: 58.5651537335vw;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 60px 48px 160px;
    border-radius: 0;
    box-shadow: none;
    z-index: 3;
  }
}
@media (min-width: 1024px) and (min-width: 1366px) {
  .bussan-page .bussan-hero__blue-box {
    left: 29.5px;
    right: -136.5px;
    min-height: 800px;
  }
}
.bussan-page .bussan-hero__box-inner {
  transform: skewY(7.5deg);
  transform-origin: top right;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__box-inner {
    max-width: clamp(240px, 412px - (1366px - 100vw) * 0.5, 412px);
    margin-top: 90px;
  }
}
.bussan-page .bussan-hero__box-label {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  color: #d90505;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__box-label {
    font-size: 13px;
    margin-bottom: 12px;
  }
}
.bussan-page .bussan-hero__box-title {
  font-size: 30px;
  font-weight: 900;
  margin: 0;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__box-title {
    font-size: 40px;
    letter-spacing: 0.15em;
  }
}
.bussan-page .bussan-hero__box-tagline {
  font-size: 18px;
  font-weight: 700;
  margin: 30px 0 0 0;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__box-tagline {
    font-size: 20px;
    margin-top: 50px;
    letter-spacing: 0.15em;
  }
}
.bussan-page .bussan-hero__box-desc {
  font-size: 16px;
  line-height: 1.8;
  margin: 16px 0 0 0;
  color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__box-desc {
    font-size: 16px;
    margin-top: 30px;
  }
}
.bussan-page .bussan-hero__gallery {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__gallery {
    position: relative;
    z-index: 6;
    flex-direction: row;
    gap: 24px;
    margin-top: calc(1238.4px - 78.95vw);
  }
}
@media (min-width: 1366px) {
  .bussan-page .bussan-hero__gallery {
    margin-top: 60px;
  }
}
.bussan-page .bussan-hero__gallery-item {
  width: 100%;
  max-width: 443px;
  margin: 0 auto;
  aspect-ratio: 343/202;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-hero__gallery-item {
    width: calc((100% - 48px) / 3);
    max-width: none;
    margin: 0;
    aspect-ratio: 343/230;
  }
}
.bussan-page .bussan-hero__gallery-item picture {
  display: block;
  width: 100%;
  height: 100%;
}
.bussan-page .bussan-hero__gallery-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.bussan-page {
  /* ご挨拶セクション (Greeting) */
}
.bussan-page .bussan-greet {
  padding: 140px 16px;
  background-color: #f5f5f5;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet {
    padding: 140px 40px;
    order: 3;
  }
}
.bussan-page .bussan-greet__inner {
  max-width: 984px;
  margin: 0 auto;
}
.bussan-page .bussan-greet__container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet__container {
    flex-direction: row;
    gap: 4.39238653vw;
  }
}
@media (min-width: 1024px) and (min-width: 1366px) {
  .bussan-page .bussan-greet__container {
    gap: 30px;
  }
}
.bussan-page .bussan-greet__content {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet__content {
    flex: 1 0 auto;
    margin: 0;
    flex: 0 0 605px;
    width: 605px;
  }
}
.bussan-page .bussan-greet__subheading {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
  margin-bottom: 30px;
  color: #000000;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet__subheading {
    text-align: left;
    margin-bottom: 35px;
  }
}
.bussan-page .bussan-greet__text {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet__text {
    font-size: 16px;
    margin-bottom: 26px;
  }
}
.bussan-page .bussan-greet__text p {
  margin: 0;
}
.bussan-page .bussan-greet__signature {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet__signature {
    font-size: 20px;
  }
}
.bussan-page .bussan-greet__photo {
  width: 100%;
  max-width: 343px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-greet__photo {
    flex: 0 0 33.4553440703vw;
    max-width: 457px;
    margin: 0;
  }
}
@media (min-width: 1024px) and (min-width: 1366px) {
  .bussan-page .bussan-greet__photo {
    flex-basis: 457px;
  }
}
.bussan-page .bussan-greet__img {
  width: 100%;
  height: auto;
  display: block;
}
.bussan-page {
  /* 3. 取扱商品セクション (Products) */
}
.bussan-page .bussan-products {
  padding: 0px 16px 140px;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products {
    padding: 0px 40px 140px;
    order: 5;
  }
}
.bussan-page .bussan-products .bussan-section-title {
  margin-bottom: 60px;
  text-align: center;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products .bussan-section-title {
    margin-bottom: 90px;
  }
}
.bussan-page .bussan-products .bussan-section-title .bussan-section-title__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  text-transform: none;
  letter-spacing: 0.15em;
}
.bussan-page .bussan-products .bussan-section-title .bussan-section-title__main {
  font-size: 26px;
  font-weight: 900;
  color: #000000;
  letter-spacing: 0.15em;
  margin: 0;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products .bussan-section-title .bussan-section-title__main {
    font-size: 40px;
  }
}
.bussan-page .bussan-products__inner {
  max-width: 984px;
  margin: 0 auto;
}
.bussan-page .bussan-products__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products__list {
    gap: 90px;
  }
}
.bussan-page .bussan-products__item {
  display: flex;
  flex-direction: column;
  background-color: #e6e8eb;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products__item {
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .bussan-page .bussan-products__item .bussan-products__image-wrapper {
    margin-right: calc((100% - 100vw) / 2);
    margin-left: -80px;
  }
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products__item--reverse {
    flex-direction: row-reverse;
  }
  .bussan-page .bussan-products__item--reverse .bussan-products__image-wrapper {
    margin-left: calc((100% - 100vw) / 2);
    margin-right: -80px;
  }
}
.bussan-page .bussan-products__body {
  padding: 30px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products__body {
    width: 496px;
    flex-shrink: 0;
    background-color: #e6e8eb;
    padding: 50px 60px;
    position: relative;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  }
}
.bussan-page .bussan-products__title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  margin: 0 0 16px;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products__title {
    font-size: 24px;
    margin-bottom: 24px;
    letter-spacing: 0.15em;
  }
}
.bussan-page .bussan-products__desc {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  text-align: left;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products__desc {
    font-size: 16px;
  }
}
.bussan-page .bussan-products__image-wrapper {
  width: 100%;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products__image-wrapper {
    width: 759px;
    height: 342px;
    aspect-ratio: 759/342;
    flex-shrink: 0;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }
}
.bussan-page .bussan-products__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-products__img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.bussan-products__image-wrapper:hover .bussan-page .bussan-products__img {
  transform: scale(1.05);
}
.bussan-page {
  /* 4. 店舗案内セクション (Store Info) */
}
.bussan-page .bussan-access {
  padding: 0px 16px 200px;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-access {
    padding: 0px 40px 200px;
    order: 6;
  }
}
.bussan-page .bussan-access .bussan-section-title {
  margin-bottom: 60px;
  text-align: center;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-access .bussan-section-title {
    margin-bottom: 90px;
  }
}
.bussan-page .bussan-access .bussan-section-title .bussan-section-title__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  text-transform: none;
  letter-spacing: 0.15em;
}
.bussan-page .bussan-access .bussan-section-title .bussan-section-title__main {
  font-size: 26px;
  font-weight: 900;
  color: #000000;
  letter-spacing: 0.15em;
  margin: 0;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-access .bussan-section-title .bussan-section-title__main {
    font-size: 40px;
  }
}
.bussan-page .bussan-access__inner {
  max-width: 984px;
  margin: 0 auto;
}
.bussan-page .bussan-access__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .bussan-page .bussan-access__content {
    max-width: none;
  }
}
.bussan-page .bussan-access__map {
  width: 100%;
  aspect-ratio: 343/174;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #eef2f6;
}
.bussan-page .bussan-access__map iframe {
  width: 100%;
  height: 100% !important;
}
@media (min-width: 768px) {
  .bussan-page .bussan-access__map {
    aspect-ratio: 16/9;
  }
}
@media (min-width: 1024px) {
  .bussan-page .bussan-access__map {
    aspect-ratio: auto;
    height: 498px;
  }
}
.bussan-page .bussan-access__info {
  width: 100%;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-access__info {
    max-width: 984px;
    margin: 0 auto;
    letter-spacing: 0.18em;
  }
}
.bussan-page .bussan-access__name {
  font-size: 16px;
  color: #000000;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-access__name {
    letter-spacing: 0.18em;
  }
}
.bussan-page .bussan-access__address {
  font-size: 16px;
  color: #000000;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-access__address {
    letter-spacing: 0.18em;
  }
}
.bussan-page .bussan-access__list {
  list-style: none;
  padding-left: 2em;
}
.bussan-page .bussan-access__list li {
  position: relative;
  padding-left: 1em;
  font-size: 16px;
  line-height: 1.8;
  color: #000000;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .bussan-page .bussan-access__list li {
    letter-spacing: 0.18em;
  }
}
.bussan-page .bussan-access__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #000000;
  font-weight: bold;
}
.bussan-page .bussan-access__list li:last-child {
  margin-bottom: 0;
}
body .bussan-page .front-blog {
  background-color: #f5f5f5;
  padding-top: 0;
  padding-bottom: 140px;
  margin-top: 0;
}
@media (min-width: 1024px) {
  body .bussan-page .front-blog {
    order: 4;
    padding-top: 0;
    padding-bottom: 140px;
    margin-top: 0;
  }
}
body .bussan-page .front-blog__container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 768px) {
  body .bussan-page .front-blog__container {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  body .bussan-page .front-blog__container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    padding: 0;
    gap: 0;
    align-items: center;
  }
}
body .bussan-page .front-blog__header {
  text-align: center;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  body .bussan-page .front-blog__header {
    text-align: center;
    margin-bottom: 60px;
  }
}
body .bussan-page .front-blog__right {
  width: 100%;
  overflow: hidden;
}
@media (max-width: 1023px) {
  body .bussan-page .front-blog__right {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    padding-left: 16px;
    padding-right: 0;
  }
}
@media (min-width: 1024px) {
  body .bussan-page .front-blog__right {
    width: 100%;
    padding-left: 0;
    margin-bottom: 60px;
  }
}
body .bussan-page .front-blog__slider {
  width: 100%;
}
@media (min-width: 1024px) {
  body .bussan-page .front-blog__slider {
    padding-left: calc(50vw - 492px);
  }
}
@media (min-width: 1024px) {
  body .bussan-page .front-blog__card {
    width: 350px;
  }
}
@media (min-width: 1024px) {
  body .bussan-page .front-blog__card-img-wrapper {
    width: 350px;
    height: 230px;
  }
}
body .bussan-page .front-blog__action-centered {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 60px;
  width: 100%;
}
@media (min-width: 1024px) {
  body .bussan-page .front-blog__action-centered {
    flex-direction: column;
    gap: 24px;
    width: auto;
  }
}

/* ==========================================================================
   Working Environment Page Styles (_environment.scss)
   ========================================================================== */
.environment-page {
  font-family: var(--font-base);
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .environment-page .u-sp-only {
    display: none !important;
  }
}
.environment-page .u-pc-only {
  display: none !important;
}
@media (min-width: 1024px) {
  .environment-page .u-pc-only {
    display: inline !important;
  }
}
@media (min-width: 1024px) {
  .environment-page .breadcrumb__inner {
    max-width: 1366px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 103px !important;
  }
}
.environment-page .env-section-title {
  text-align: center;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .environment-page .env-section-title {
    margin-bottom: 90px;
  }
}
.environment-page .env-section-title__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  letter-spacing: 0.1em;
  margin-bottom: 0px;
}
.environment-page .env-section-title__main {
  font-size: 24px;
  font-weight: 900;
  color: #000000;
  margin: 0;
}
@media (min-width: 1024px) {
  .environment-page .env-section-title__main {
    font-size: 40px;
  }
}
.environment-page {
  /* ------------------------------------------------------------------------
     1. Intro Section (.env-intro)
     ------------------------------------------------------------------------ */
}
.environment-page .env-intro {
  padding: 0;
}
@media (min-width: 1024px) {
  .environment-page .env-intro {
    padding-left: 390px;
    padding-right: 137px;
    position: relative;
  }
}
@media (min-width: 1366px) {
  .environment-page .env-intro {
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
  }
}
.environment-page .env-intro__top {
  padding: 60px 20px 60px;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__top {
    padding: 140px 40px 90px 0;
  }
}
.environment-page .env-intro__bottom {
  position: relative;
  padding: 0px 16px 80px;
  margin-top: 0px;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__bottom {
    padding: 0 40px 120px 0;
    margin-top: 0;
  }
}
.environment-page .env-intro__bottom::before {
  content: "";
  position: absolute;
  top: 84px;
  bottom: 4px;
  left: 0;
  right: 0;
  background-color: #e6e8eb;
  transform: skewY(-7.5deg);
  transform-origin: center;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__bottom::before {
    top: 112px;
    bottom: -300px;
    left: -390px;
    right: -137px;
  }
}
@media (min-width: 1024px) and (min-width: 1366px) {
  .environment-page .env-intro__bottom::before {
    left: calc(-50vw + 293px);
    right: calc(-50vw + 546px);
  }
}
.environment-page .env-intro__inner {
  position: relative;
  z-index: 2;
  max-width: 984px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__inner {
    margin-left: 93px;
    margin-right: auto;
    max-width: 746px;
  }
}
.environment-page .env-intro .env-subtitle {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.environment-page .env-intro .env-title {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  line-height: 1.8;
  margin: 0;
}
@media (min-width: 1024px) {
  .environment-page .env-intro .env-title {
    font-size: 20px;
  }
}
.environment-page .env-intro__slogan {
  font-size: 28px;
  font-weight: 900;
  color: #d90505;
  margin: 0 0 60px;
  letter-spacing: 0.15em;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__slogan {
    font-size: 40px;
    margin-bottom: 90px;
    line-height: 1.5;
  }
}
.environment-page .env-intro__text {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.15em;
  margin-bottom: 60px;
}
.environment-page .env-intro__text p {
  margin: 0 0 18px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__text p {
    font-size: 20px;
  }
}
.environment-page .env-intro__text p:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__text {
    margin-bottom: 0px;
  }
}
.environment-page .env-intro__grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__grid {
    position: absolute;
    left: -483px;
    top: -306px;
    width: 390px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    z-index: 3;
    margin: 0;
    max-width: none;
  }
}
.environment-page .env-intro__grid-row {
  display: flex;
  gap: 0;
  width: 87.4666666667vw;
}
.environment-page .env-intro__grid-row--top {
  margin-left: -4.2666666667vw;
  margin-right: auto;
}
.environment-page .env-intro__grid-row--bottom {
  margin-right: -4.2666666667vw;
  margin-left: auto;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__grid-row {
    display: contents;
  }
}
.environment-page .env-intro__grid-item {
  width: 43.7333333333vw;
  height: 30.6666666667vw;
  overflow: hidden;
}
.environment-page .env-intro__grid-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 1024px) {
  .environment-page .env-intro__grid-item {
    width: 390px;
    height: 274px;
    border-radius: 0;
  }
}
.environment-page {
  /* ------------------------------------------------------------------------
     2. Our Policy Section (.env-policy)
     ------------------------------------------------------------------------ */
}
.environment-page .env-policy {
  position: relative;
  z-index: 5;
  padding: 0 20px 60px;
}
@media (min-width: 1024px) {
  .environment-page .env-policy {
    padding: 0 137px 140px 390px;
  }
}
@media (min-width: 1366px) {
  .environment-page .env-policy {
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
  }
}
.environment-page .env-policy__inner {
  max-width: 984px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .environment-page .env-policy__inner {
    margin-left: 93px;
    margin-right: auto;
    max-width: 746px;
  }
}
.environment-page .env-policy__header {
  background-color: #05337e;
  color: #ffffff;
  text-align: center;
  width: 100%;
  max-width: 343px;
  height: 43px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.environment-page .env-policy__header h3 {
  font-family: var(--font-base);
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .environment-page .env-policy__header {
    max-width: 100%;
    height: 44px;
  }
  .environment-page .env-policy__header h3 {
    font-size: 20px;
  }
}
.environment-page .env-policy__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 60px 0;
}
@media (min-width: 1024px) {
  .environment-page .env-policy__cards {
    flex-direction: row;
    padding: 40px 0;
  }
}
.environment-page .env-policy__card {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 78px 20px 60px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  margin: 48px auto 0;
  width: 62.1333333333vw;
  max-width: 233px;
}
@media (min-width: 1024px) {
  .environment-page .env-policy__card {
    padding: 76px 20px 40px;
    margin: 48px 0 0;
    width: auto;
    max-width: none;
  }
}
.environment-page .env-policy__card-icon {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
}
.environment-page .env-policy__card-icon img,
.environment-page .env-policy__card-icon svg {
  width: 96px;
  height: 96px;
  -o-object-fit: contain;
     object-fit: contain;
}
.environment-page .env-policy__card-title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  margin: 0 0 30px;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .environment-page .env-policy__card-title {
    font-size: 22px;
  }
}
.environment-page .env-policy__card-subtitle {
  font-size: 16px;
  font-weight: 900;
  color: #05337e;
  display: block;
  margin-top: 4px;
}
@media (min-width: 1024px) {
  .environment-page .env-policy__card-subtitle {
    margin-top: 0;
  }
}
.environment-page .env-policy__card-desc {
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  margin: 0;
}
.environment-page {
  /* ------------------------------------------------------------------------
     3. Benefit Section (.env-benefit)
     ------------------------------------------------------------------------ */
}
.environment-page .env-benefit {
  padding: 0px 16px 140px;
}
@media (min-width: 1024px) {
  .environment-page .env-benefit {
    padding: 0px 40px 140px;
    position: relative;
    z-index: 6;
  }
}
.environment-page .env-benefit__inner {
  max-width: 984px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .environment-page .env-benefit__inner {
    max-width: 1092px;
  }
}
.environment-page .env-benefit__images {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .environment-page .env-benefit__images {
    flex-direction: row;
    gap: 54px;
    margin-bottom: 52px;
  }
}
.environment-page .env-benefit__image-wrapper {
  flex: 1;
  overflow: hidden;
  aspect-ratio: 16/10;
}
@media (min-width: 1024px) {
  .environment-page .env-benefit__image-wrapper {
    aspect-ratio: 519/348;
  }
}
.environment-page .env-benefit__image-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.environment-page .env-benefit__text-area {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 1024px) {
  .environment-page .env-benefit__text-area {
    max-width: unset;
  }
}
.environment-page .env-benefit__subheadline {
  font-size: 20px;
  font-weight: 900;
  color: #000000;
  line-height: 1.6;
  margin: 0 0 24px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .environment-page .env-benefit__subheadline {
    font-size: 24px;
    margin-bottom: 30px;
  }
}
.environment-page .env-benefit__desc {
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
  margin: 0;
  color: #000000;
  text-align: left;
}
@media (min-width: 1024px) {
  .environment-page .env-benefit__desc {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.05em;
  }
}
.environment-page {
  /* ------------------------------------------------------------------------
     4. Futaba Living Environment Section (.env-living)
     ------------------------------------------------------------------------ */
}
.environment-page .env-living {
  padding: 0px 16px 140px;
}
@media (min-width: 1024px) {
  .environment-page .env-living {
    padding: 0px 40px 140px;
  }
}
.environment-page .env-living__inner {
  max-width: 984px;
  margin: 0 auto;
}
.environment-page .env-living__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 1024px) {
  .environment-page .env-living__list {
    gap: 90px;
  }
}
.environment-page .env-living__item {
  display: flex;
  flex-direction: column;
  background-color: #e6e8eb;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .environment-page .env-living__item {
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .environment-page .env-living__item .env-living__image-wrapper {
    margin-right: calc((100% - 100vw) / 2);
    margin-left: -80px;
  }
}
@media (min-width: 1024px) {
  .environment-page .env-living__item--reverse {
    flex-direction: row-reverse;
  }
  .environment-page .env-living__item--reverse .env-living__image-wrapper {
    margin-left: calc((100% - 100vw) / 2);
    margin-right: -80px;
  }
}
.environment-page .env-living__body {
  padding: 30px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .environment-page .env-living__body {
    width: 496px;
    flex-shrink: 0;
    background-color: #e6e8eb;
    padding: 50px 60px;
    position: relative;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  }
}
.environment-page .env-living__title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .environment-page .env-living__title {
    font-size: 24px;
    letter-spacing: 0.15em;
  }
}
.environment-page .env-living__desc {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  text-align: left;
  letter-spacing: 0.15em;
}
.environment-page .env-living__desc--dormitory {
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .environment-page .env-living__desc {
    font-size: 16px;
  }
}
.environment-page .env-living__image-wrapper {
  width: 100%;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .environment-page .env-living__image-wrapper {
    width: 759px;
    height: 342px;
    aspect-ratio: 759/342;
    flex-shrink: 0;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }
}
.environment-page .env-living__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
@media (min-width: 1024px) {
  .environment-page .env-living__img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.env-living__image-wrapper:hover .environment-page .env-living__img {
  transform: scale(1.05);
}
.environment-page {
  /* ------------------------------------------------------------------------
     5. Welfare Benefits Section (.env-welfare)
     ------------------------------------------------------------------------ */
}
.environment-page .env-welfare {
  padding: 0px 16px 200px;
}
.environment-page .env-welfare .env-section-title {
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .environment-page .env-welfare {
    padding: 0px 40px 200px;
    margin-bottom: 0px;
  }
}
.environment-page .env-welfare__inner {
  max-width: 984px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .environment-page .env-welfare__inner {
    max-width: 1092px;
  }
}
.environment-page .env-welfare__list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .environment-page .env-welfare__list {
    gap: 0;
  }
}
.environment-page .env-welfare__item {
  display: flex;
  flex-direction: column;
  padding: 30px 16px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  letter-spacing: 0.12em;
}
.environment-page .env-welfare__item:nth-child(odd) {
  background-color: #ffffff;
}
@media (min-width: 1024px) {
  .environment-page .env-welfare__item {
    max-width: none;
    margin: 0;
    flex-direction: row;
    align-items: start;
    gap: 40px;
    padding: 16px 30px;
  }
}
.environment-page .env-welfare__title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  margin: 0;
  line-height: 1.7;
}
@media (min-width: 1024px) {
  .environment-page .env-welfare__title {
    width: 240px;
    flex-shrink: 0;
  }
}
.environment-page .env-welfare__desc {
  font-size: 16px;
  line-height: 1.7;
  color: #000000;
  font-weight: 400;
  margin: 0;
}
@media (min-width: 1024px) {
  .environment-page .env-welfare__desc {
    flex-grow: 1;
  }
}

/* ==========================================================================
   Member Detail Page (Hiroshi Ito) Styles
   ========================================================================== */
.member-detail-page {
  font-family: var(--font-base);
  color: #333333;
  line-height: 1.8;
  overflow: hidden;
  background-color: #ffffff; /* SP background is white */
  /* PCのみ順序を入れ替え（ヒーローの下にパンくず） */
}
@media (min-width: 1024px) {
  .member-detail-page {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5; /* PC background is gray */
  }
}
.member-detail-page .breadcrumb {
  margin-top: 57px; /* SPで固定ヘッダーの下に配置 */
  position: relative;
  z-index: 2; /* グレー背景の上に表示 */
}
@media (min-width: 1024px) {
  .member-detail-page .breadcrumb {
    order: 2; /* PCでヒーローの下に配置 */
    margin-top: 0;
  }
}
.member-detail-page {
  /* -------------------------------------------
     Content Wrapper Section
     ------------------------------------------- */
}
.member-detail-page .member-detail-content-wrapper {
  background-color: #ffffff; /* SPでも念のため白背景 */
  width: 100%;
}
@media (min-width: 1024px) {
  .member-detail-page .member-detail-content-wrapper {
    order: 3;
    position: relative;
    width: 100%;
    padding-top: 158px; /* 斜めカット分の余白を上部に追加 */
    background-color: transparent; /* PCではラッパー自体は透明にして子要素のはみ出しを許可 */
  }
  .member-detail-page .member-detail-content-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 152px; /* 下に80pxの隙間（灰色の縁） */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1200px;
    background-color: #ffffff; /* 白背景はここで描画 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    clip-path: polygon(0 158px, 100% 0, 100% calc(100% - 158px), 0 100%);
    z-index: 0; /* コンテンツの下に配置 */
  }
}
.member-detail-page {
  /* -------------------------------------------
     Hero Section
     ------------------------------------------- */
}
.member-detail-page .member-detail-hero {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible; /* SPで文字や赤背景ボックスをはみ出させる */
  margin-top: 0;
  /* SP gray background is drawn by .member-profile::before extending upward */
}
@media (max-width: 1023px) {
  .member-detail-page .member-detail-hero {
    z-index: 1; /* Ensure hero content sits above the profile gray bg */
  }
}
@media (min-width: 1024px) {
  .member-detail-page .member-detail-hero {
    order: 1; /* PCで最上部に配置 */
    aspect-ratio: 1366/683; /* PC: 1366x683 */
    overflow: hidden; /* PCは画像枠内に収める */
  }
}
.member-detail-page .member-detail-hero__bg {
  position: relative; /* SPで画像の高さを自然に確保 */
  width: 100%;
  aspect-ratio: 375/188; /* SPの画像アスペクト比 */
  z-index: 2; /* Put it above the gray background pseudo-element */
}
@media (min-width: 1024px) {
  .member-detail-page .member-detail-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}
.member-detail-page .member-detail-hero__bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.member-detail-page .member-detail-hero__content {
  position: relative; /* SPで画像の下から配置 */
  z-index: 5;
  width: 100%;
  margin-top: -26px; /* SPで赤ボックス of 1st line overlaps image bottom slightly */
  padding: 0 20px 20px 20px; /* Add bottom padding on SP to separate name */
}
@media (min-width: 1024px) {
  .member-detail-page .member-detail-hero__content {
    position: absolute; /* PCで画像の上に重ねる */
    top: 0;
    left: 0;
    height: 100%;
    margin-top: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }
}
.member-detail-page .member-detail-hero__inner {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .member-detail-page .member-detail-hero__inner {
    max-width: var(--myw);
    padding: 0 0px;
    margin-top: 50px; /* PC offset */
    margin-left: 102px; /* left offset 102px */
  }
}
.member-detail-page .member-detail-hero {
  /* キャッチコピー（赤い背景に白文字） */
}
.member-detail-page .member-detail-hero__catchphrase {
  display: block;
  color: #ffffff;
  margin: 0 0 0px 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .member-detail-page .member-detail-hero__catchphrase {
    margin-bottom: 16px;
  }
}
.member-detail-page .member-detail-hero__catchphrase-line {
  display: inline-block;
  background-color: #d90505;
  color: #ffffff;
  font-size: 18px; /* SP：指定サイズ */
  font-weight: 900;
  line-height: 1.6;
  padding: 4px 12px;
  margin-bottom: 7px;
  letter-spacing: 0.15em; /* SP：指定レタースペース */
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .member-detail-page .member-detail-hero__catchphrase-line {
    font-size: 32px;
    padding: 0px 20px;
    margin-bottom: 8px;
    letter-spacing: 0.15em;
  }
}
@media (min-width: 1200px) {
  .member-detail-page .member-detail-hero__catchphrase-line {
    font-size: 40px;
    padding: 0px 20px;
    margin-bottom: 8px;
    letter-spacing: 0.15em;
  }
}
.member-detail-page .member-detail-hero {
  /* 英語名（斜体、太字） */
}
.member-detail-page .member-detail-hero__name-en {
  font-family: var(--font-en);
  font-size: 40px; /* SP：指定サイズ */
  font-weight: 900;
  font-style: italic;
  color: #05337e; /* SP：白背景上のため濃い青に変更 */
  margin: 0;
  letter-spacing: 0.05em;
  text-shadow: none;
  line-height: 1;
  margin-top: 20px;
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .member-detail-page .member-detail-hero__name-en {
    font-size: 48px;
    color: #05337e; /* Navy for PC */
    padding-left: 16px;
    line-height: 1.3;
  }
  .member-detail-page .member-detail-hero__name-en span {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 4px 16px;
    display: inline-block;
  }
}
@media (min-width: 1200px) {
  .member-detail-page .member-detail-hero__name-en {
    font-size: 64px;
    color: #05337e; /* Navy for PC */
    line-height: 1.3;
  }
  .member-detail-page .member-detail-hero__name-en span {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 4px 20px;
    display: inline-block;
  }
}
.member-detail-page {
  /* -------------------------------------------
     Profile Section
     ------------------------------------------- */
}
.member-detail-page .member-profile {
  padding: 0px 0 60px 0; /* SP: 余白を30pxに縮める */
  position: relative;
}
.member-detail-page .member-profile::before {
  content: "";
  position: absolute;
  top: -560px; /* SP: ヒーロー＋パンくず領域まで上方向にカバー */
  left: 0;
  width: 100%;
  height: 650px; /* 400px(上方向) + 250px(padding30px + 写真高さの約半分) = 写真の上下中央あたり */
  background-color: #f5f5f5;
  z-index: 0;
  transform: skewY(-7.5deg);
  transform-origin: bottom left;
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile::before {
    display: none; /* PCではラッパーで白背景を描画するため不要 */
  }
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile {
    order: 3;
    padding: 60px 0 140px 0;
    overflow: hidden; /* 斜め背景の下部をフラットに切り落とす */
    position: relative;
    z-index: 2;
    margin-inline: auto;
    max-width: 865px;
    margin-top: -195px;
  }
}
.member-detail-page .member-profile__container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2; /* 斜め背景の上に重ねる */
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__container {
    max-width: 1200px;
    padding: 0;
    flex-direction: column; /* PC：縦積みレイアウト */
    align-items: stretch;
  }
}
.member-detail-page .member-profile__image {
  width: 100%;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__image {
    width: 100%;
    z-index: 2;
    border-radius: 0;
    box-shadow: none;
  }
}
.member-detail-page .member-profile__image img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.member-detail-page .member-profile {
  /* プロフィールカード（SPは透明、PCは白背景でオーバーラップ） */
}
.member-detail-page .member-profile__card {
  width: 100%;
  color: #05337e; /* SP：濃い青テキスト */
  margin-top: 20px; /* SP：画像との間隔 */
  position: relative;
  z-index: 5;
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__card {
    width: 100%;
    background-color: transparent; /* PC：透明背景 */
    color: #05337e; /* PC：ネイビーテキスト */
    margin-left: 0;
    margin-bottom: 0;
    box-shadow: none;
  }
}
.member-detail-page .member-profile__card-inner {
  padding: 0; /* SP：パディング無し */
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__card-inner {
    max-width: 865px;
    margin: 0;
    padding: 0 0px;
    display: grid;
    grid-template-columns: 156px minmax(0, 540px);
    grid-template-rows: auto auto auto;
    -moz-column-gap: 24px;
         column-gap: 24px;
    row-gap: 0;
    align-items: start;
  }
}
.member-detail-page .member-profile__tag-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 15px;
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__tag-block {
    display: contents; /* PC：子要素をgridに直接参加させる */
  }
}
.member-detail-page .member-profile {
  /* 入社年リボン（SPは斜めカットのネイビーリボン、PCもネイビーバッジ） */
}
.member-detail-page .member-profile__dept {
  background-color: #05337e; /* SP：ネイビー */
  color: #ffffff; /* SP：白文字 */
  font-size: 20px; /* SP：大きめサイズ */
  font-weight: 700;
  padding: 0 20px 0 30px; /* SP：上下パディングなし、左右のみ */
  display: flex;
  align-items: center; /* SP：テキストを上下中央揃え */
  width: 100%;
  height: 64px; /* SP：高さを64pxに指定 */
  clip-path: polygon(0 0, 100% 0, 232px 100%, 0 100%); /* SP：下側の幅を正確に232pxに指定 */
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__dept {
    grid-column: 1;
    grid-row: 1/3; /* バッジはfields+nameの2行分 */
    background-color: #05337e; /* PC：ネイビー背景 */
    color: #ffffff; /* PC：白文字 */
    font-size: 20px;
    font-weight: 700;
    padding: 0 20px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 93px;
    clip-path: polygon(0 0, 100% 0, 105px 100%, 0 100%); /* PC：台形カット */
    letter-spacing: 0.15em;
    line-height: 1.5;
    align-self: start;
  }
}
.member-detail-page .member-profile {
  /* 所属・役職 */
}
.member-detail-page .member-profile__fields {
  font-size: 16px;
  font-weight: 700;
  color: #05337e; /* SP：濃い青 */
  letter-spacing: 0.15em;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__fields {
    grid-column: 2;
    grid-row: 1;
    color: #05337e; /* PC：ネイビー */
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
  }
}
.member-detail-page .member-profile {
  /* 名前 */
}
.member-detail-page .member-profile__name {
  font-size: 32px; /* SP：指定サイズ */
  font-weight: 700;
  color: #05337e; /* SP：濃い青 */
  margin: 0 0 15px 0;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__name {
    grid-column: 2;
    grid-row: 2;
    font-size: 36px;
    color: #05337e; /* PC：ネイビー */
    border-bottom: none;
    padding-bottom: 0;
    margin: 8px 0 0 0;
  }
}
.member-detail-page .member-profile__name-suffix {
  font-size: 20px; /* SP：指定サイズ */
  font-weight: 500;
  color: #05337e; /* SP：濃い青 */
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__name-suffix {
    font-size: 20px;
    color: #05337e; /* PC：ネイビー */
  }
}
.member-detail-page .member-profile {
  /* 説明文 */
}
.member-detail-page .member-profile__desc {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  color: #000;
  letter-spacing: 0.1em;
  font-weight: 400;
}
@media (min-width: 1024px) {
  .member-detail-page .member-profile__desc {
    grid-column: 2;
    grid-row: 3;
    font-size: 16px;
    line-height: 2;
    color: #333;
    margin-top: 16px;
  }
}
.member-detail-page {
  /* -------------------------------------------
     Interview Section
     ------------------------------------------- */
}
.member-detail-page .member-interview {
  padding: 0px 0;
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview {
    order: 4;
    padding: 0px 0 168px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
}
.member-detail-page .member-interview__container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px 120px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview__container {
    max-width: 1277px; /* 1229px有効幅 + 左右24pxパディング */
    padding: 0 24px;
    gap: 140px;
    overflow: visible; /* 画像がビューポート端まではみ出す */
  }
}
.member-detail-page .member-interview__row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview__row {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0 60px;
    align-items: start;
    overflow: visible;
  }
}
.member-detail-page .member-interview__row {
  /* 奇数行（Q1, Q3）：画像左・テキスト右、画像はビューポート左端まで */
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview__row:nth-child(odd) {
    grid-template-columns: calc(643px - min(max((100vw - 1229px) / 2, 0px), 85.5px) - 24px) 1fr;
  }
  .member-detail-page .member-interview__row:nth-child(odd) .member-interview__img-col {
    grid-column: 1;
    grid-row: 2;
    margin-left: calc(max(min((100vw - 1229px) / -2, 0px), -85.5px) - 24px);
    width: 643px;
  }
  .member-detail-page .member-interview__row:nth-child(odd) .member-interview__content {
    grid-column: 2;
    grid-row: 2;
    max-width: 526px;
    width: 100%;
    justify-self: start;
  }
  .member-detail-page .member-interview__row {
    /* 偶数行（Q2, Q4）：テキスト左・画像右、画像はビューポート右端まで */
  }
  .member-detail-page .member-interview__row:nth-child(even) {
    grid-template-columns: 1fr calc(643px - min(max((100vw - 1229px) / 2, 0px), 85.5px) - 24px);
  }
  .member-detail-page .member-interview__row:nth-child(even) .member-interview__content {
    grid-column: 1;
    grid-row: 2;
    max-width: 526px;
    width: 100%;
    justify-self: end;
  }
  .member-detail-page .member-interview__row:nth-child(even) .member-interview__img-col {
    grid-column: 2;
    grid-row: 2;
    margin-right: calc(max(min((100vw - 1229px) / -2, 0px), -85.5px) - 24px);
    width: 643px;
  }
}
.member-detail-page .member-interview__img-col {
  width: 100%;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview__img-col {
    width: 100%;
    aspect-ratio: 643/397;
    overflow: hidden;
  }
}
.member-detail-page .member-interview__img-col img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview__img-col img {
    height: 100%;
  }
}
.member-detail-page .member-interview__text-col {
  width: 100%;
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview__text-col {
    display: contents; /* PC：子要素をgridに直接参加させる */
  }
}
.member-detail-page .member-interview {
  /* 赤い見出し＋赤線 */
}
.member-detail-page .member-interview__title {
  font-size: 18px;
  font-weight: 900;
  color: #d90505;
  margin: 0 0 30px 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview__title {
    grid-column: 1/-1; /* 全幅に広がる */
    grid-row: 1;
    justify-self: center; /* 画面中央に配置 */
    font-size: 40px;
    max-width: 1092px;
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .member-detail-page .member-interview__title::after {
    content: "";
    flex: 1;
    height: 2px;
    background-color: #d90505;
  }
}
.member-detail-page .member-interview__content {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .member-detail-page .member-interview__content {
    font-size: 16px;
  }
}
.member-detail-page .member-interview__content p {
  margin: 0 0 16px 0;
}
.member-detail-page .member-interview__content p:last-child {
  margin-bottom: 0;
}
.member-detail-page {
  /* -------------------------------------------
     1日の流れ Section
     ------------------------------------------- */
}
.member-detail-page .member-timeline {
  padding: 60px 0;
  background-color: rgba(40, 186, 218, 0.13); /* #28BADA 13% */
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .member-detail-page .member-timeline {
    order: 5;
    padding: 90px 0 60px;
    position: relative;
    z-index: 2;
    max-width: 1016px;
  }
}
.member-detail-page .member-timeline__container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .member-detail-page .member-timeline__container {
    max-width: 1016px;
    padding: 0 60px;
  }
}
.member-detail-page .member-timeline__heading {
  font-size: 40px;
  font-weight: 900;
  color: #05337e; /* ネイビー */
  text-align: center;
  margin-top: -94px; /* 背景の上に飛び出す */
  margin-bottom: 30px;
  letter-spacing: 0.15em;
  position: relative;
}
@media (min-width: 1024px) {
  .member-detail-page .member-timeline__heading {
    font-size: 40px;
    margin-top: -130px;
    margin-bottom: 60px;
  }
}
.member-detail-page .member-timeline__row {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 1024px) {
  .member-detail-page .member-timeline__row {
    flex-direction: row;
    gap: 30px;
  }
}
.member-detail-page .member-timeline {
  /* 左カラム：タイムライン */
}
.member-detail-page .member-timeline__list-col {
  width: 100%;
}
@media (min-width: 1024px) {
  .member-detail-page .member-timeline__list-col {
    width: 60%;
  }
}
.member-detail-page .member-timeline {
  /* 右カラム：ギャラリー */
}
.member-detail-page .member-timeline__gallery-col {
  width: 100%;
}
@media (min-width: 1024px) {
  .member-detail-page .member-timeline__gallery-col {
    width: 40%;
  }
}
.member-detail-page .member-timeline__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  padding-left: 0;
  /* 縦のライン削除 */
}
.member-detail-page .member-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 16px; /* column gap 16px */
  position: relative;
  z-index: 2;
}
.member-detail-page .member-timeline {
  /* 時間バッジ（カプセル型ネイビー） */
}
.member-detail-page .member-timeline__time-block {
  width: 82px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.member-detail-page .member-timeline__time {
  background-color: #05337e;
  color: #ffffff;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  width: 82px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px; /* カプセル型 */
  text-align: center;
  line-height: 1; /* 上下中央揃え精度向上 */
  padding-top: 1px; /* 視覚的な上寄り補正 */
}
.member-detail-page .member-timeline__detail {
  margin-left: 0;
  padding-top: 2px;
}
.member-detail-page .member-timeline__item-title {
  display: none; /* 見出し不要 */
}
.member-detail-page .member-timeline__item-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #000;
  margin: 0;
}
@media (min-width: 1024px) {
  .member-detail-page .member-timeline__item-desc {
    letter-spacing: 0.1em;
  }
}
.member-detail-page .member-timeline {
  /* 写真ギャラリー */
}
.member-detail-page .member-timeline__gallery {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.member-detail-page .member-timeline__gallery-item {
  width: 100%;
  overflow: hidden;
}
.member-detail-page .member-timeline__gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.member-detail-page {
  /* -------------------------------------------
     Back Button Section
     ------------------------------------------- */
}
.member-detail-page .member-detail-back {
  padding: 60px 0 200px;
  text-align: center;
}
@media (min-width: 1024px) {
  .member-detail-page .member-detail-back {
    order: 6;
    padding: 90px 0 200px;
    position: relative;
    z-index: 2;
  }
}
.member-detail-page .member-detail-back__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 343px;
  height: 56px;
  background-color: #fff; /* デフォルトは透明（白背景） */
  color: #05337e; /* デフォルトはネイビー文字 */
  border: 2px solid #05337e;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .member-detail-page .member-detail-back__btn {
    width: 343px;
    height: 56px;
  }
}
.member-detail-page .member-detail-back__btn:hover {
  background-color: #05337e; /* ホバーでネイビー塗りつぶし */
  color: #ffffff; /* 白文字 */
  border-color: #05337e;
}
.member-detail-page .member-detail-back__btn:hover .member-detail-back__btn-arrow {
  border-color: #ffffff; /* 矢印も白に変更 */
  transform: translate(6px, -50%) rotate(45deg); /* 矢印を少し右へスライド */
}
.member-detail-page .member-detail-back__btn-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid #d90505; /* 赤矢印 */
  border-right: 2px solid #d90505;
  transition: all 0.3s ease;
}

/* ==========================================================================
   Jobs Page (仕事内容) Styles
   ========================================================================== */
.jobs-page {
  font-family: var(--font-base);
  line-height: 1.8;
  overflow: hidden;
  background-color: #f5f5f5; /* All viewports background is light gray */
}
@media (min-width: 1024px) {
  .jobs-page .sp-only {
    display: none !important;
  }
}
.jobs-page {
  /* -------------------------------------------
     Jobs Intro Section (職種紹介)
     ------------------------------------------- */
}
.jobs-page .jobs-intro {
  padding: 60px 0;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-intro {
    padding: 140px 0 120px;
  }
}
.jobs-page .jobs-intro__container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .jobs-page .jobs-intro__container {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-intro__container {
    max-width: 1500px;
    padding: 0;
  }
}
.jobs-page .jobs-intro__title-block {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-intro__title-block {
    margin-bottom: 80px;
  }
}
.jobs-page .jobs-intro__sub-title {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  color: #d90505;
  letter-spacing: 0.2em;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-intro__sub-title {
    font-size: 13px;
  }
}
.jobs-page .jobs-intro__main-title {
  font-size: 28px;
  font-weight: 900;
  color: #000000;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-intro__main-title {
    font-size: 40px;
  }
}
.jobs-page .jobs-intro__third-title {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #05337e;
  margin-top: 10px;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-intro__third-title {
    font-size: 24px;
    margin-top: 15px;
  }
}
.jobs-page .jobs-intro__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.jobs-page {
  /* 職種カード */
}
.jobs-page .jobs-card {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card {
    display: block;
  }
}
.jobs-page .jobs-card__img-block {
  width: calc(100vw - 51px);
  max-width: 324px;
  height: 110px;
  margin-left: -16px;
  margin-right: auto;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .jobs-page .jobs-card__img-block {
    max-width: 680px;
    height: 220px;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card__img-block {
    width: 82.21vw;
    max-width: 1123px;
    height: 381px;
    margin-left: calc(-50vw + 50%);
    margin-right: auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
  }
}
@media (min-width: 1500px) {
  .jobs-page .jobs-card__img-block {
    margin-left: 0;
  }
}
.jobs-page .jobs-card__img-block img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.jobs-page .jobs-card__content-wrapper {
  width: 100%;
  margin-top: -24px; /* 画像と白カードの重なり幅を調整 */
  position: relative;
  z-index: 1;
  padding: 0;
}
@media (min-width: 768px) {
  .jobs-page .jobs-card__content-wrapper {
    margin-top: -60px;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card__content-wrapper {
    margin-top: -230px;
    padding: 0;
  }
}
.jobs-page .jobs-card__content {
  background-color: #ffffff;
  padding: 64px 16px 30px;
  position: relative;
  width: 100%;
  max-width: 342px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .jobs-page .jobs-card__content {
    max-width: 700px;
    padding: 80px 30px 40px;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card__content {
    padding: 278px 90px 60px;
    width: 91%;
    max-width: 1092px;
    margin-left: auto;
    margin-right: auto;
  }
}
.jobs-page .jobs-card__num {
  position: absolute;
  top: 92px; /* ナンバーの位置を調整して画像に重ねる */
  left: max(17px, 50% - 154px);
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 900;
  font-style: italic;
  color: #d90505;
  line-height: 1;
  z-index: 3;
}
@media (min-width: 768px) {
  .jobs-page .jobs-card__num {
    font-size: 60px;
    top: 140px;
    left: max(30px, 50% - 320px);
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card__num {
    font-size: 105px;
    top: 300px;
    left: calc(4.5% + 86px);
  }
}
@media (min-width: 1200px) {
  .jobs-page .jobs-card__num {
    left: calc(50% - 460px);
  }
}
.jobs-page .jobs-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #05337e;
  margin: 0 0 15px 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card__title {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
.jobs-page .jobs-card__desc {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 0px 0;
  letter-spacing: 0.1em;
  font-weight: 400;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card__desc {
    font-size: 16px;
  }
}
.jobs-page .jobs-card__details {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.7;
}
.jobs-page .jobs-card__details li {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card__details li {
    font-size: 16px;
  }
}
.jobs-page .jobs-card {
  /* 偶数番目のカードは画像を右端に寄せる (SP/PC共通) */
}
.jobs-page .jobs-card:nth-child(even) .jobs-card__img-block {
  margin-left: auto;
  margin-right: -16px;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card:nth-child(even) .jobs-card__img-block {
    margin-left: auto;
    margin-right: calc(-50vw + 50%);
  }
}
@media (min-width: 1500px) {
  .jobs-page .jobs-card:nth-child(even) .jobs-card__img-block {
    margin-right: 0;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-card:nth-child(even) .jobs-card__content {
    margin-left: auto;
    margin-right: auto;
  }
}
.jobs-page {
  /* -------------------------------------------
     Staff Interviews Section (社員インタビュー一覧)
     ------------------------------------------- */
}
.jobs-page .jobs-interviews {
  padding: 60px 0 350px;
  background-color: #ffffff; /* 白背景 */
  position: relative;
  z-index: 2;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews {
    padding: 0px 0 220px;
    scroll-margin-top: 97px;
  }
}
.jobs-page .jobs-interviews::before {
  content: "";
  position: absolute;
  top: -86px;
  left: 0;
  width: 100%;
  height: 274px;
  background-color: #f5f5f5;
  transform: skewY(-7.5deg);
  transform-origin: top left;
  z-index: 1;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews::before {
    height: calc(180px + 6.58vw);
  }
}
.jobs-page .jobs-interviews::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 240px;
  background-color: #f5f5f5;
  transform: skewY(-7.5deg);
  transform-origin: bottom left;
  z-index: 1;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews::after {
    height: 380px;
    bottom: -340px;
  }
}
.jobs-page .jobs-interviews__container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 27px;
  position: relative;
  z-index: 3;
}
@media (min-width: 768px) {
  .jobs-page .jobs-interviews__container {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__container {
    max-width: 1092px;
    padding: 0;
  }
}
.jobs-page .jobs-interviews__header {
  text-align: center;
  margin-bottom: 50px;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__header {
    margin-bottom: 90px;
    margin-top: 16px;
  }
}
.jobs-page .jobs-interviews__title {
  font-size: 28px;
  font-weight: 900;
  color: #05337e;
  margin: 0 0 60px 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__title {
    font-size: 40px;
    margin-bottom: 140px;
  }
}
.jobs-page .jobs-interviews__lead {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  margin: 0;
  letter-spacing: 0.09em;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__lead {
    font-size: 20px;
    letter-spacing: 0.15em;
  }
}
.jobs-page .jobs-interviews__group {
  margin-bottom: 90px;
}
.jobs-page .jobs-interviews__group:last-child {
  margin-bottom: 0;
}
.jobs-page .jobs-interviews__group-title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  margin: 0 0 25px 0;
  letter-spacing: 0.15em;
  text-align: center;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__group-title {
    font-size: 20px;
    margin-bottom: 30px;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__group-title.text-center {
    display: block;
    text-align: center;
    padding-right: 0;
    position: relative;
  }
}
.jobs-page .jobs-interviews__grid {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
@media (min-width: 768px) {
  .jobs-page .jobs-interviews__grid {
    display: grid;
    gap: 40px 30px;
  }
}
@media (min-width: 768px) {
  .jobs-page .jobs-interviews__grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 63px;
         column-gap: 63px;
    row-gap: 50px;
  }
}
@media (min-width: 768px) {
  .jobs-page .jobs-interviews__grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__grid.cols-2 {
    max-width: 707px;
    -moz-column-gap: 63px;
         column-gap: 63px;
  }
}
.jobs-page .jobs-interviews__flex-cols {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 768px) {
  .jobs-page .jobs-interviews__flex-cols {
    flex-direction: row;
    gap: 30px;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__flex-cols {
    gap: 63px;
    max-width: 707px;
  }
}
.jobs-page .jobs-interviews__subgroup {
  width: 100%;
}
@media (min-width: 768px) {
  .jobs-page .jobs-interviews__subgroup {
    width: calc(50% - 15px);
  }
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__subgroup {
    width: calc(50% - 31.5px);
  }
}
.jobs-page .jobs-interviews__subgroup .interview-card {
  margin-bottom: 50px;
}
.jobs-page .jobs-interviews__subgroup .interview-card:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .jobs-page .jobs-interviews__subgroup .interview-card {
    margin-bottom: 50px;
  }
  .jobs-page .jobs-interviews__subgroup .interview-card:last-child {
    margin-bottom: 0;
  }
}
.jobs-page {
  /* インタビューメンバーカード */
}
.jobs-page .interview-card {
  display: block;
  background-color: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .jobs-page .interview-card {
    max-width: 500px;
  }
}
@media (min-width: 1024px) {
  .jobs-page .interview-card {
    max-width: 100%;
    margin: 0;
  }
}
.jobs-page .interview-card__img-block {
  width: 100%;
  aspect-ratio: 380/240;
  overflow: hidden;
  position: relative;
}
@media (min-width: 1024px) {
  .jobs-page .interview-card__img-block {
    aspect-ratio: 322/188;
  }
}
.jobs-page .interview-card__img-block img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.jobs-page .interview-card__body {
  padding: 12px 0 0px;
  position: relative;
}
@media (min-width: 1024px) {
  .jobs-page .interview-card__body {
    padding: 12px 0 16px;
  }
}
.jobs-page .interview-card {
  /* 赤背景のキャッチコピー (角丸) */
}
.jobs-page .interview-card__catch {
  margin: 0px 0 20px 0; /* 画像に食い込ませる */
  position: relative;
  z-index: 5;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .jobs-page .interview-card__catch {
    margin: 0px 0 16px 0;
  }
}
.jobs-page .interview-card__catch-line {
  display: inline-block;
  background-color: #d90505;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  padding: 4px 10px;
  margin-bottom: 4px;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .jobs-page .interview-card__catch-line {
    font-size: 20px;
  }
}
.jobs-page .interview-card__catch-line:last-child {
  margin-bottom: 0;
}
.jobs-page .interview-card__dept {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  letter-spacing: 0.05em;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .jobs-page .interview-card__dept {
    font-size: 16px;
  }
}
.jobs-page .interview-card__name {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin: 0;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}
@media (min-width: 1024px) {
  .jobs-page .interview-card__name {
    font-size: 20px;
  }
}
.jobs-page .interview-card__suffix {
  font-size: 14px;
  font-weight: 700;
}
.jobs-page .interview-card {
  /* ホバー時の挙動 */
}
.jobs-page .interview-card:hover .interview-card__img-block img {
  transform: scale(1.05);
}
.jobs-page .interview-card:hover .interview-card__name {
  color: #d90505;
}

/* ==========================================================================
   Requirements Page (募集要項) Styles
   ========================================================================== */
.requirements-page {
  font-family: var(--font-base);
  line-height: 1.8;
  overflow: hidden;
  background-color: #f5f5f5; /* Light gray background */
}
@media (min-width: 1024px) {
  .requirements-page .sp-only {
    display: none !important;
  }
}
.requirements-page {
  /* -------------------------------------------
     Requirements Section
     ------------------------------------------- */
}
.requirements-page .requirements {
  padding: 60px 0 200px;
}
@media (min-width: 1024px) {
  .requirements-page .requirements {
    padding: 140px 0 200px;
  }
}
.requirements-page .requirements__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .requirements-page .requirements__container {
    padding: 0 40px;
  }
}
.requirements-page .requirements__title-block {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .requirements-page .requirements__title-block {
    margin-bottom: 140px;
  }
}
.requirements-page .requirements__sub-title {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  color: #d90505;
  letter-spacing: 0.1em;
  text-transform: capitalize;
}
.requirements-page .requirements__main-title {
  font-size: 28px;
  font-weight: 900;
  color: #000000;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .requirements-page .requirements__main-title {
    font-size: 40px;
  }
}
.requirements-page .requirements__accordion-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 984px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .requirements-page .requirements__accordion-list {
    gap: 30px;
  }
}
.requirements-page {
  /* -------------------------------------------
     Accordion Item
     ------------------------------------------- */
}
.requirements-page .requirements-item {
  background-color: #ffffff;
  transition: all 0.3s ease;
  overflow: hidden;
}
.requirements-page .requirements-item__header {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  outline: none;
  position: relative;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-item__header {
    padding: 30px 74px;
  }
}
.requirements-page .requirements-item__header:hover .requirements-item__title {
  color: #05337e;
}
.requirements-page .requirements-item__title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.8;
  color: #05337e;
  transition: color 0.3s ease;
  width: 100%;
  text-align: center;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-item__title {
    font-size: 32px;
    padding: 0;
  }
}
.requirements-page .requirements-item__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-item__icon {
    right: 40px;
    width: 38px;
    height: 38px;
  }
}
.requirements-page .requirements-item__icon::before, .requirements-page .requirements-item__icon::after {
  content: "";
  position: absolute;
  background-color: #d90505;
  transition: transform 0.3s ease;
  top: 50%;
  left: 50%;
}
.requirements-page .requirements-item__icon {
  /* Horizontal line */
}
.requirements-page .requirements-item__icon::before {
  width: 100%;
  height: 2px;
  margin-left: -50%;
  margin-top: -1px;
}
.requirements-page .requirements-item__icon {
  /* Vertical line */
}
.requirements-page .requirements-item__icon::after {
  width: 2px;
  height: 100%;
  margin-left: -1px;
  margin-top: -50%;
}
.requirements-page .requirements-item {
  /* Open state modifications */
}
.requirements-page .requirements-item.active .requirements-item__icon::after {
  transform: rotate(90deg) scaleY(0);
}
@media (min-width: 1024px) {
  .requirements-page .requirements-item.active .requirements-item__header {
    padding: 60px 74px;
  }
}
.requirements-page .requirements-item__content {
  display: none;
}
.requirements-page .requirements-item__inner {
  padding: 40px 20px 0;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-item__inner {
    padding: 0px 74px;
  }
}
.requirements-page .requirements-item__btn-area {
  text-align: center;
  margin-top: 90px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-item__btn-area {
    margin-top: 90px;
    margin-left: -80px;
    margin-right: -80px;
    margin-bottom: 60px;
  }
}
.requirements-page {
  /* -------------------------------------------
     Requirements Detail (dl/dt/dd structure)
     ------------------------------------------- */
}
.requirements-page .requirements-detail {
  margin: 0;
  padding: 0;
}
.requirements-page .requirements-detail__row {
  display: block;
  margin-bottom: 30px;
  border: none;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-detail__row {
    display: flex;
    margin-bottom: 40px;
  }
}
.requirements-page .requirements-detail__label {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 16px 0;
  display: block;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-detail__label {
    width: 180px;
    flex-shrink: 0;
    margin: 0;
    padding-right: 30px;
  }
}
.requirements-page .requirements-detail__value {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-detail__value {
    flex-grow: 1;
    line-height: 1.7;
  }
}
.requirements-page {
  /* -------------------------------------------
     Requirements Button
     ------------------------------------------- */
}
.requirements-page .requirements-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 54px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0;
  border: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-btn {
    width: 344px;
  }
}
.requirements-page .requirements-btn__text {
  margin-right: 10px;
}
.requirements-page .requirements-btn__arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
@media (min-width: 1024px) {
  .requirements-page .requirements-btn__arrow {
    right: 28px;
  }
}
.requirements-page .requirements-btn:hover {
  opacity: 0.8;
}
.requirements-page .requirements-btn:hover .requirements-btn__arrow {
  transform: translate(5px, -50%);
}

/* ==========================================================================
   Entry Form Styles (入力・確認・完了共通)
   ========================================================================== */
.entry-page {
  font-family: var(--font-base);
  line-height: 1.8;
  overflow: hidden;
  background-color: #f5f5f5; /* Light gray background */
}
@media (min-width: 1024px) {
  .entry-page .sp-only {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .entry-page .pc-only {
    display: none !important;
  }
}
.entry-page {
  /* -------------------------------------------
     Entry Section Header / Description
     ------------------------------------------- */
}
.entry-page .entry-form-sec {
  padding: 60px 0 200px;
}
@media (min-width: 1024px) {
  .entry-page .entry-form-sec {
    padding: 100px 0 150px;
  }
}
.entry-page .entry-form-sec__container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .entry-page .entry-form-sec__container {
    padding: 0 40px;
  }
}
.entry-page .entry-form-sec__desc {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #05337e;
  line-height: 2;
  margin-bottom: 60px;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .entry-page .entry-form-sec__desc {
    font-size: 20px;
    margin-bottom: 60px;
  }
}
.entry-page {
  /* -------------------------------------------
     Progress Steps (進捗ステップ)
     ------------------------------------------- */
}
.entry-page .entry-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 389px; /* 374px + 15px (arrow width) */
  margin: 0 auto 60px;
  padding: 0 15px 0 0; /* 右側の飛び出し分の幅をパディングで相殺 */
  list-style: none;
  width: 100%;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .entry-page .entry-steps {
    max-width: 496px; /* 476px + 20px (arrow width) */
    padding: 0 20px 0 0;
    margin-bottom: 80px;
  }
}
.entry-page .entry-steps__item {
  position: relative;
  text-align: center;
  background-color: #e6e8eb; /* デフォルト：STEP 3の色 */
  color: #ffffff;
  height: 58px; /* SP・PC共通で高さを58pxに統一 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important; /* 角丸なし */
}
@media (min-width: 1024px) {
  .entry-page .entry-steps__item {
    height: 85px;
  }
}
.entry-page .entry-steps__item .step-num {
  font-family: var(--font-en);
  font-size: 11px; /* 11pxに統一 */
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
@media (min-width: 1024px) {
  .entry-page .entry-steps__item .step-num {
    font-size: 14px;
    margin-bottom: 6px;
  }
}
.entry-page .entry-steps__item .step-txt {
  font-size: 12px; /* 12pxに統一 */
  font-weight: 700;
  line-height: 1.1;
  display: block;
}
@media (min-width: 1024px) {
  .entry-page .entry-steps__item .step-txt {
    font-size: 18px;
  }
}
.entry-page .entry-steps__item {
  /* 各ステップの横幅比率 (90px : 174px : 110px) */
}
.entry-page .entry-steps__item:nth-child(1) {
  flex: 90;
}
.entry-page .entry-steps__item:nth-child(2) {
  flex: 174;
}
.entry-page .entry-steps__item:nth-child(3) {
  flex: 110;
}
.entry-page .entry-steps__item {
  /* 矢印（矢羽）の作成 */
}
.entry-page .entry-steps__item::after {
  content: "";
  position: absolute;
  right: -15px; /* 15pxに統一 */
  top: 0;
  width: 0;
  height: 0;
  border-top: 29px solid transparent; /* 高さの半分 29px */
  border-bottom: 29px solid transparent;
  border-left: 15px solid #e6e8eb;
  z-index: 2;
}
@media (min-width: 1024px) {
  .entry-page .entry-steps__item::after {
    right: -20px;
    border-top-width: 42.5px;
    border-bottom-width: 42.5px;
    border-left-width: 20px;
  }
}
.entry-page .entry-steps__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 29px solid transparent; /* 高さの半分 29px */
  border-bottom: 29px solid transparent;
  border-left: 15px solid #f5f5f5;
  z-index: 1;
}
@media (min-width: 1024px) {
  .entry-page .entry-steps__item::before {
    border-top-width: 42.5px;
    border-bottom-width: 42.5px;
    border-left-width: 20px;
  }
}
.entry-page .entry-steps__item:first-child::before {
  display: none;
}
.entry-page .entry-steps__item {
  /* 各ステップごとのステータスカラー */
}
.entry-page .entry-steps__item.is-step2 {
  background-color: #d7dadf;
}
.entry-page .entry-steps__item.is-step2::after {
  border-left-color: #d7dadf;
}
.entry-page .entry-steps__item.is-active {
  background-color: #05337e;
  color: #ffffff;
}
.entry-page .entry-steps__item.is-active::after {
  border-left-color: #05337e;
}
.entry-page {
  /* -------------------------------------------
     Form Stacked Layout
     ------------------------------------------- */
}
.entry-page .form-fields-container {
  max-width: 600px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 30px; /* 項目間の縦余白 */
}
@media (min-width: 1024px) {
  .entry-page .form-fields-container {
    max-width: 760px;
    gap: 40px;
    margin-bottom: 140px;
  }
}
.entry-page .form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  letter-spacing: 0.1em; /* 全体的に letter-spacing 0.1em */
}
.entry-page .form-group__label-area {
  display: flex;
  align-items: center;
  margin-bottom: 15px; /* ラベルと入力欄の間の余白 */
}
.entry-page .form-group__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  width: 47px; /* 横幅 47px に固定 */
  height: 24px; /* 高さ 24px に固定 */
  margin-right: 8px; /* バッジとテキストの間 */
  border-radius: 0; /* 角丸なし */
  letter-spacing: 0.1em;
  line-height: 1;
}
.entry-page .form-group__badge.is-required {
  background-color: #d90505;
  color: #ffffff;
}
.entry-page .form-group__badge.is-optional {
  background-color: #d2d6db;
  color: #ffffff;
}
.entry-page .form-group__label {
  font-size: 15px; /* 15px に修正 */
  font-weight: 500; /* 500 (normal) */
  letter-spacing: 0.15em;
}
.entry-page .form-group__input-area {
  width: 100%;
  position: relative;
}
.entry-page {
  /* -------------------------------------------
     Input Elements
     ------------------------------------------- */
}
.entry-page .form-input-text {
  width: 100%;
  height: 48px;
  border: 1px solid #d2d6db;
  background-color: #ffffff; /* 白背景 */
  padding: 10px 16px;
  font-size: 16px;
  font-family: inherit;
  border-radius: 0; /* 角丸なし */
  outline: none;
  transition: border-color 0.3s ease;
}
.entry-page .form-input-text:focus {
  border-color: #05337e;
}
.entry-page .form-textarea {
  width: 100%;
  height: 250px;
  border: 1px solid #cccccc;
  background-color: #ffffff; /* 白背景 */
  padding: 14px 16px;
  font-size: 16px;
  font-family: inherit;
  border-radius: 0; /* 角丸なし */
  outline: none;
  resize: vertical;
  transition: border-color 0.3s ease;
}
.entry-page .form-textarea:focus {
  border-color: #05337e;
}
.entry-page {
  /* Zip Code (郵便番号入力欄) */
}
.entry-page .form-zip-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.entry-page .form-zip-row .form-input-text {
  width: 150px;
}
.entry-page {
  /* Confirm Text (確認画面のプレビュー表示) */
}
.entry-page .form-confirm-text {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-all;
  padding-bottom: 8px;
  border-bottom: 1px solid #d2d6db;
}
.entry-page {
  /* Radio Buttons (希望職種) */
}
.entry-page .form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 1024px) {
  .entry-page .form-radio-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 76px;
  }
}
.entry-page .form-radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px; /* 15px に修正 */
  font-weight: 500; /* 500 (normal) */
  color: #000000;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.entry-page .form-radio-label input[type=radio] {
  display: none;
}
.entry-page .form-radio-label input[type=radio]:checked + .form-radio-label__dummy {
  border-color: #05337e;
}
.entry-page .form-radio-label input[type=radio]:checked + .form-radio-label__dummy::after {
  transform: translate(-50%, -50%) scale(1);
}
.entry-page .form-radio-label__dummy {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #d2d6db;
  background-color: #ffffff;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.3s ease;
}
.entry-page .form-radio-label__dummy::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 12px;
  height: 12px;
  background-color: #05337e;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.entry-page {
  /* Privacy / Consent Box */
}
.entry-page .form-consent {
  margin: 60px auto 60px;
  text-align: center;
  width: 100%;
  max-width: 600px;
}
@media (min-width: 1024px) {
  .entry-page .form-consent {
    max-width: 760px;
  }
}
.entry-page .form-consent__desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #000000;
  margin: 0 auto 30px;
  text-align: center;
  letter-spacing: 0.15em;
}
.entry-page .form-consent__link {
  color: #05337e;
  text-decoration: underline;
  transition: opacity 0.3s ease;
}
.entry-page .form-consent__link:hover {
  opacity: 0.7;
}
.entry-page .form-checkbox-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px; /* 15px に修正 */
  font-weight: 500; /* 500 に修正 */
  color: #000000;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  letter-spacing: 0.1em;
}
.entry-page .form-checkbox-label input[type=checkbox] {
  display: none;
}
.entry-page .form-checkbox-label input[type=checkbox]:checked + .form-checkbox-label__dummy {
  border-color: #05337e;
}
.entry-page .form-checkbox-label input[type=checkbox]:checked + .form-checkbox-label__dummy::after {
  transform: rotate(45deg) scale(1);
}
.entry-page .form-checkbox-label__dummy {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #d2d6db;
  background-color: #ffffff;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.3s ease;
}
.entry-page .form-checkbox-label__dummy::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border-right: 2.5px solid #05337e;
  border-bottom: 2.5px solid #05337e;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s ease;
}
.entry-page {
  /* Notes Box (注意事項) */
}
.entry-page .form-notes {
  max-width: 600px;
  margin: 50px auto 60px;
  text-align: left;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .entry-page .form-notes {
    max-width: 760px;
    margin-bottom: 140px;
  }
}
.entry-page .form-notes__title {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}
.entry-page .form-notes__desc {
  font-size: 16px; /* 16px に修正 */
  font-weight: 400; /* 400 に修正 */
  line-height: 1.8;
  color: #000000;
  margin: 0;
}
.entry-page {
  /* -------------------------------------------
     Buttons & Navigation Actions
     ------------------------------------------- */
}
.entry-page .form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .entry-page .form-actions {
    max-width: 760px;
    flex-direction: row;
    justify-content: center;
    gap: 90px;
  }
}
.entry-page .form-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 219px; /* 横幅 219px に固定 */
  height: 54px; /* 高さ 54px に固定 */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 0; /* 角丸なし */
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.entry-page .form-actions__btn-text {
  margin-right: 10px;
}
.entry-page .form-actions__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.entry-page .form-actions__btn.is-primary {
  background-color: #05337e;
  color: #ffffff;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.entry-page .form-actions__btn.is-primary:hover {
  background-color: #ffffff;
  border-color: #05337e;
  color: #05337e;
}
.entry-page .form-actions__btn.is-primary:hover .form-actions__btn-arrow {
  transform: translate(10px, -50%);
  filter: invert(13%) sepia(80%) saturate(6018%) hue-rotate(352deg) brightness(89%) contrast(93%);
}
.entry-page .form-actions__btn.is-secondary {
  background-color: #d2d6db;
  color: #ffffff;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.entry-page .form-actions__btn.is-secondary .form-actions__btn-arrow {
  filter: brightness(0) invert(1); /* 戻るボタンの通常時は白矢印 */
}
.entry-page .form-actions__btn.is-secondary:hover {
  background-color: #ffffff;
  border-color: #d2d6db;
  color: #d2d6db;
}
.entry-page .form-actions__btn.is-secondary:hover .form-actions__btn-arrow {
  transform: translate(10px, -50%);
  filter: none; /* ホバー時はフィルター解除で赤矢印に戻す */
}
.entry-page .form-actions__btn.is-disabled {
  background-color: #cccccc !important;
  color: #ffffff !important;
  cursor: not-allowed;
  box-shadow: none;
}
.entry-page {
  /* -------------------------------------------
     Thanks Page (完了画面) Special Styles
     ------------------------------------------- */
}
@media (min-width: 1024px) {
  .entry-page.is-thanks-page .entry-form-sec {
    padding-top: 140px;
  }
}
.entry-page.is-thanks-page .thanks-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  text-align: center;
  margin: 0 auto 40px;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .entry-page.is-thanks-page .thanks-page-title {
    margin-bottom: 90px;
  }
}
.entry-page.is-thanks-page .thanks-block {
  background-color: transparent !important;
  padding: 0;
  text-align: center;
  border-radius: 0;
  box-shadow: none;
  margin-top: 90px;
}
.entry-page.is-thanks-page .thanks-block__desc {
  font-size: 15px;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto 60px;
  letter-spacing: 0.15em;
  font-weight: 400;
}
@media (min-width: 1024px) {
  .entry-page.is-thanks-page .thanks-block__desc {
    font-size: 15px;
    margin-bottom: 140px;
  }
}
.entry-page.is-thanks-page .thanks-btn {
  width: 220px !important;
  height: 54px !important;
}

/* ==========================================================================
   Contact Page Styles (お問い合わせページ専用スタイル)
   ========================================================================== */
.contact-page {
  /* 電話お問い合わせセクション */
}
.contact-page .contact-tel-sec {
  text-align: center;
  padding: 60px 16px 40px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec {
    padding: 140px 40px 90px;
  }
}
.contact-page .contact-tel-sec__lead {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  line-height: 2;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec__lead {
    font-size: 20px;
    margin-bottom: 74px;
  }
}
.contact-page .contact-tel-sec__card {
  background-color: #ffffff;
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 20px;
  border: 1px solid #e6e8eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec__card {
    max-width: 760px;
    padding: 45px 0 55px;
  }
}
.contact-page .contact-tel-sec__title {
  font-size: 18px; /* SPの時 18px */
  font-weight: 700;
  color: #05337e; /* ネイビー */
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec__title {
    font-size: 20px;
  }
}
.contact-page .contact-tel-sec__time {
  font-size: 13px; /* SPの時 13px */
  font-weight: 500;
  color: #05337e; /* ネイビー */
  margin: 0 0 30px;
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec__time {
    font-size: 14px;
    margin-bottom: 30px;
  }
}
.contact-page .contact-tel-sec__numbers {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec__numbers {
    gap: 0px;
  }
}
.contact-page .contact-tel-sec__num-item {
  font-size: 20px; /* SPの時 20px */
  font-weight: 700; /* bold */
  color: #05337e; /* ネイビー */
  line-height: 1.5;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec__num-item {
    font-size: 32px;
  }
}
.contact-page .contact-tel-sec__num-item--hirono {
  order: 1; /* SPで広野が上 */
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec__num-item--hirono {
    order: 2; /* PCで広野が下 */
  }
}
.contact-page .contact-tel-sec__num-item--futaba {
  order: 2; /* SPで双葉が下 */
}
@media (min-width: 1024px) {
  .contact-page .contact-tel-sec__num-item--futaba {
    order: 1; /* PCで双葉が上 */
  }
}
.contact-page {
  /* メールでお問い合わせ見出しバー */
}
.contact-page .contact-email-header {
  background-color: #05337e;
  color: #ffffff;
  text-align: center;
  max-width: 600px;
  margin: 20px 16px 40px; /* 左右の余白を16pxに設定 */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .contact-page .contact-email-header {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 90px;
  }
}
.contact-page .entry-steps {
  margin-bottom: 90px !important;
}
.contact-page .form-radio-group {
  justify-content: space-between !important;
}
@media (min-width: 1024px) {
  .contact-page .form-radio-group {
    -moz-column-gap: 60px;
         column-gap: 60px;
    justify-content: flex-start !important;
  }
}

/* ==========================================================================
   Privacy Policy Page Styles (プライバシーポリシー専用スタイル)
   ========================================================================== */
.policy-page {
  font-family: var(--font-base);
  line-height: 1.8;
  color: #333333;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .policy-page .sp-only {
    display: none;
  }
}
.policy-page .policy-body-sec {
  padding: 60px 16px 200px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .policy-page .policy-body-sec {
    padding: 140px 40px 150px;
    max-width: 1172px; /* 1092px content width + 80px padding */
  }
}
.policy-page {
  /* ヘッダー部分 */
}
.policy-page .policy-header {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .policy-page .policy-header {
    margin-bottom: 90px;
  }
}
.policy-page .policy-header__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  color: #d90505; /* 赤色 */
  letter-spacing: 0.2em;
}
@media (min-width: 1024px) {
  .policy-page .policy-header__sub {
    font-size: 16px;
  }
}
.policy-page .policy-header__main {
  font-size: 24px;
  font-weight: 900;
  color: #000000;
  margin: 0 0 60px;
  line-height: 1.4;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .policy-page .policy-header__main {
    font-size: 36px;
    margin-bottom: 90px;
  }
}
.policy-page .policy-header__lead {
  font-size: 16px;
  color: #05337e; /* テーマカラーの青 */
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .policy-page .policy-header__lead {
    font-size: 16px;
    line-height: 2;
    max-width: 1092px;
  }
}
.policy-page {
  /* セクション本体 */
}
.policy-page .policy-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 1024px) {
  .policy-page .policy-content {
    gap: 50px;
    max-width: 1092px;
  }
}
.policy-page .policy-section__title {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 20px;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .policy-page .policy-section__title {
    font-size: 18px;
    margin-bottom: 20px;
  }
}
.policy-page .policy-section__text {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  text-align: justify;
}
.policy-page .policy-section__list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.policy-page .policy-section__list li {
  position: relative;
  padding-left: 1.2em;
  text-indent: -1.2em; /* 2行目以降のインデント相殺 */
}
.policy-page {
  /* お問い合わせ窓口ブロック */
}
.policy-page .policy-contact {
  padding-top: 60px;
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .policy-page .policy-contact {
    margin-top: 30px;
    padding-top: 50px;
    font-size: 15px;
  }
}
.policy-page .policy-contact__title {
  font-weight: 700;
  color: #000000;
  margin-bottom: 8px;
}
.policy-page .policy-contact__desc {
  margin-bottom: 20px;
}
.policy-page .policy-contact__company {
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
}
/* ==========================================================================
   Projects List Page Styles (工事実績一覧専用スタイル)
   ========================================================================== */
.projects-page {
  font-family: var(--font-base);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.projects-page .pc-only {
  display: none;
}
@media (min-width: 1024px) {
  .projects-page .pc-only {
    display: inline;
  }
}
.projects-page .projects-sec {
  padding: 0;
}
.projects-page .projects-container {
  padding: 60px 16px 200px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .projects-page .projects-container {
    padding: 140px 40px 150px;
    max-width: 1172px; /* 1092px content width + 80px padding */
  }
}
.projects-page {
  /* カテゴリータブ */
}
.projects-page .projects-categories {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 60px;
  width: 100%;
}
@media (min-width: 1024px) {
  .projects-page .projects-categories {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 16px 20px;
    margin-bottom: 135px;
    max-width: 680px;
    margin-inline: auto;
  }
}
.projects-page .projects-cat-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
@media (min-width: 1024px) {
  .projects-page .projects-cat-row {
    display: contents;
  }
}
.projects-page .projects-cat-btn {
  font-size: 16px;
  font-weight: 400;
  color: #05337e;
  background-color: transparent;
  border: 1px solid #05337e;
  border-radius: 100px; /* Capsule shape */
  padding: 0px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .projects-page .projects-cat-btn {
    font-size: 16px;
    padding: 0px 16px;
  }
}
.projects-page .projects-cat-btn:hover {
  background-color: #05337e;
  color: #ffffff;
}
.projects-page .projects-cat-btn.is-active {
  background-color: #05337e;
  color: #ffffff;
  pointer-events: none; /* Disable clicking active tab */
}
.projects-page {
  /* カードグリッド */
}
.projects-page .projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  width: 100%;
  margin-bottom: 90px;
}
@media (min-width: 1024px) {
  .projects-page .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 90px 30px;
    margin-bottom: 80px;
  }
}
.projects-page {
  /* カード本体 */
}
.projects-page .projects-card {
  background-color: transparent;
  display: flex;
  flex-direction: column;
}
.projects-page .projects-card:hover .projects-card__img {
  transform: scale(1.05);
}
.projects-page .projects-card:hover .projects-card__title {
  color: #05337e;
}
.projects-page .projects-card__img-wrapper {
  width: 100%;
  aspect-ratio: 343/199;
  overflow: hidden;
  background-color: #e6e8eb;
}
@media (min-width: 1024px) {
  .projects-page .projects-card__img-wrapper {
    aspect-ratio: 343/199;
  }
}
.projects-page .projects-card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}
.projects-page .projects-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.projects-page .projects-card__date {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}
.projects-page .projects-card__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  background-color: #05337e;
  padding: 3px 10px;
  border-radius: 50px;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .projects-page .projects-card__badge {
    font-size: 12px;
    padding: 4px 12px;
  }
}
.projects-page .projects-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  line-height: 1.6;
  margin: 16px 0 0;
  transition: color 0.3s ease;
}
@media (min-width: 1024px) {
  .projects-page .projects-card__title {
    font-size: 16px;
    margin-top: 15px;
  }
}
.projects-page {
  /* ページネーション */
}
.projects-page .projects-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .projects-page .projects-pagination {
    margin-top: 140px;
    max-width: 344px;
    margin-inline: auto;
  }
}
.projects-page .projects-pagination__num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}
@media (min-width: 1024px) {
  .projects-page .projects-pagination__num {
    font-size: 18px;
  }
}
.projects-page .projects-pagination__num:hover {
  color: #05337e;
}
.projects-page .projects-pagination__num.is-active {
  color: #05337e;
  font-weight: 700;
  pointer-events: none;
}
.projects-page .projects-pagination__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #05337e;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 1024px) {
  .projects-page .projects-pagination__arrow {
    width: 24px;
    height: 24px;
  }
}
.projects-page .projects-pagination__arrow:hover {
  opacity: 0.8;
}
.projects-page .projects-pagination__arrow-img {
  width: 8px;
  height: auto;
  display: block;
}
.projects-page .projects-pagination__arrow--prev {
  visibility: hidden;
}
.projects-page .projects-pagination__arrow--prev .projects-pagination__arrow-img {
  transform: scaleX(-1);
}
.projects-page .projects-pagination__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  transform: translateY(-4px); /* Vertically center baseline dots */
}
@media (min-width: 1024px) {
  .projects-page .projects-pagination__dots {
    font-size: 18px;
    transform: translateY(-5px);
  }
}

/* ==========================================================================
   Projects Detail Page Styles (工事実績詳細専用スタイル)
   ========================================================================== */
.projects-detail-page {
  font-family: var(--font-base);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.projects-detail-page .projects-detail-sec {
  padding: 0;
}
.projects-detail-page .projects-detail-container {
  padding: 60px 16px 200px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-container {
    padding: 140px 40px 150px;
    max-width: 1172px; /* 1092px content width + 80px padding */
  }
}
.projects-detail-page .projects-detail-header {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-header {
    margin-bottom: 90px;
  }
}
.projects-detail-page .projects-detail-header__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  letter-spacing: 0.15em;
}
.projects-detail-page .projects-detail-header__main {
  font-size: 24px;
  font-weight: 900;
  color: #000000;
  margin: 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-header__main {
    font-size: 40px;
  }
}
.projects-detail-page .projects-detail-content {
  width: 100%;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-content {
    max-width: 1092px;
    margin-inline: auto;
  }
}
.projects-detail-page .projects-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: #05337e;
  line-height: 1.8;
  text-align: center;
  margin: 0 0 60px;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-title {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 90px;
  }
}
.projects-detail-page .projects-detail-img-wrapper {
  width: 100%;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-img-wrapper {
    margin-bottom: 60px;
    max-width: 100%;
    margin-inline: auto;
  }
}
.projects-detail-page .projects-detail-img {
  width: 100%;
  height: auto;
  display: block;
}
.projects-detail-page .projects-detail-table {
  margin-bottom: 90px;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-table {
    margin-bottom: 100px;
    max-width: 100%;
    margin-inline: auto;
  }
}
.projects-detail-page .projects-detail-row {
  display: flex;
  margin: 0;
  padding: 30px 0;
  border-bottom: 1px solid #e6e8eb;
  font-size: 16px;
  gap: 10px;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-row {
    padding: 30px 40px;
    font-size: 16px;
  }
}
.projects-detail-page .projects-detail-label {
  font-weight: 700;
  color: #000000;
  width: 80px;
  flex-shrink: 0;
  margin: 0;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-label {
    width: 120px;
  }
}
.projects-detail-page .projects-detail-val {
  margin: 0;
  flex: 1;
  color: #000000;
  line-height: 1.8;
  font-weight: 400;
}
.projects-detail-page .projects-detail-nav {
  display: grid;
  grid-template-areas: "back back" "prev next";
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-nav {
    display: flex;
    justify-content: space-between;
    grid-template-areas: none;
    margin-top: 100px;
    max-width: 540px;
    margin-inline: auto;
  }
}
.projects-detail-page .projects-detail-nav__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  transition: color 0.3s ease;
}
.projects-detail-page .projects-detail-nav__btn:hover {
  color: #05337e;
}
.projects-detail-page .projects-detail-nav__btn--prev {
  grid-area: prev;
  justify-self: start;
}
.projects-detail-page .projects-detail-nav__btn--prev .projects-detail-nav__arrow-img {
  transform: scaleX(-1);
}
.projects-detail-page .projects-detail-nav__btn--next {
  grid-area: next;
  justify-self: end;
}
.projects-detail-page .projects-detail-nav__btn-text {
  display: inline-block;
}
.projects-detail-page .projects-detail-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #05337e;
  transition: opacity 0.3s ease;
}
.projects-detail-page .projects-detail-nav__arrow:hover {
  opacity: 0.8;
}
.projects-detail-page .projects-detail-nav__arrow-img {
  width: 8px;
  height: auto;
  display: block;
}
.projects-detail-page .projects-detail-nav__back {
  grid-area: back;
  justify-self: center;
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .projects-detail-page .projects-detail-nav__back {
    margin-bottom: 0;
  }
}
.projects-detail-page .projects-detail-nav__back-link {
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
  letter-spacing: 0.1em;
  font-weight: 400;
}
.projects-detail-page .projects-detail-nav__back-link:hover {
  color: #05337e;
  border-bottom-color: #05337e;
}

/* ==========================================================================
   News List Page Styles (お知らせ一覧専用スタイル)
   ========================================================================== */
.news-page {
  font-family: var(--font-base);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.news-page .news-sec {
  padding: 0;
}
.news-page .news-container {
  padding: 60px 16px 200px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .news-page .news-container {
    padding: 140px 40px 150px;
    max-width: 1172px; /* 1092px content width + 80px padding */
  }
}
.news-page .news-header {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .news-page .news-header {
    margin-bottom: 90px;
  }
}
.news-page .news-header__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  letter-spacing: 0.15em;
}
.news-page .news-header__main {
  font-size: 24px;
  font-weight: 900;
  color: #000000;
  margin: 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .news-page .news-header__main {
    font-size: 40px;
  }
}
.news-page .news-list {
  width: 100%;
  margin-bottom: 90px;
}
@media (min-width: 1024px) {
  .news-page .news-list {
    margin-bottom: 90px;
    max-width: 760px;
    margin-inline: auto;
  }
}
.news-page .news-item {
  border-bottom: 1px solid #e6e8eb;
}
.news-page .news-item:first-child .news-item__link {
  padding-top: 0;
}
.news-page .news-item__link {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 30px 0px;
  text-decoration: none;
  color: #000000;
  transition: background-color 0.3s ease;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .news-page .news-item__link {
    padding: 30px 0px;
    align-items: center;
  }
}
.news-page .news-item__link:hover .news-item__title {
  color: #28bada;
}
.news-page .news-item__date {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0;
}
.news-page .news-item__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #000000;
  flex: 1;
  transition: color 0.3s ease;
  letter-spacing: 0.15em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .news-page .news-item__title {
    font-size: 16px;
    -webkit-line-clamp: 1;
  }
}
.news-page .news-item__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.news-page .news-item__arrow-img {
  width: 9px;
  height: 15px;
  display: block;
  margin-top: 6px;
}
.news-page {
  /* ページネーション */
}
.news-page .news-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .news-page .news-pagination {
    max-width: 368px;
    margin-inline: auto;
  }
}
.news-page .news-pagination__num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}
@media (min-width: 1024px) {
  .news-page .news-pagination__num {
    font-size: 18px;
  }
}
.news-page .news-pagination__num:hover {
  color: #05337e;
}
.news-page .news-pagination__num.is-active {
  color: #05337e;
  font-weight: 700;
  pointer-events: none;
}
.news-page .news-pagination__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #05337e;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 1024px) {
  .news-page .news-pagination__arrow {
    width: 24px;
    height: 24px;
  }
}
.news-page .news-pagination__arrow:hover {
  opacity: 0.8;
}
.news-page .news-pagination__arrow-img {
  width: 8px;
  height: auto;
  display: block;
}
.news-page .news-pagination__arrow--prev {
  visibility: hidden;
}
.news-page .news-pagination__arrow--prev .news-pagination__arrow-img {
  transform: scaleX(-1);
}
.news-page .news-pagination__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  transform: translateY(-4px); /* Vertically center baseline dots */
}
@media (min-width: 1024px) {
  .news-page .news-pagination__dots {
    font-size: 18px;
    transform: translateY(-5px);
  }
}

/* ==========================================================================
   News Detail Page Styles (お知らせ詳細専用スタイル)
   ========================================================================== */
.news-detail-page {
  font-family: var(--font-base);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.news-detail-page .news-detail-sec {
  padding: 0;
}
.news-detail-page .news-detail-container {
  padding: 60px 16px 200px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-container {
    padding: 140px 40px 150px;
    max-width: 1172px; /* 1092px content width + 80px padding */
  }
}
.news-detail-page .news-detail-header {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-header {
    margin-bottom: 90px;
  }
}
.news-detail-page .news-detail-header__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  letter-spacing: 0.15em;
}
.news-detail-page .news-detail-header__main {
  font-size: 24px;
  font-weight: 900;
  color: #000000;
  margin: 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-header__main {
    font-size: 40px;
  }
}
.news-detail-page .news-detail-content {
  width: 100%;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-content {
    max-width: 760px;
    margin-inline: auto;
  }
}
.news-detail-page .news-detail-article-header {
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-article-header {
    margin-bottom: 50px;
  }
}
.news-detail-page .news-detail-date {
  display: block;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 16px;
  letter-spacing: 0;
}
.news-detail-page .news-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-title {
    font-size: 24px;
    line-height: 1.6;
  }
}
.news-detail-page .news-detail-body {
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  line-height: 1.8;
  letter-spacing: 0.08em;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-body {
    font-size: 16px;
  }
}
.news-detail-page .news-detail-body p {
  margin: 0 0 24px;
}
.news-detail-page .news-detail-body p:last-child {
  margin-bottom: 0;
}
.news-detail-page .news-detail-body figure {
  margin: 0 0 30px;
}
.news-detail-page .news-detail-body figure img {
  width: 100%;
  height: auto;
  display: block;
}
.news-detail-page .news-detail-body h2,
.news-detail-page .news-detail-body h3,
.news-detail-page .news-detail-body h4,
.news-detail-page .news-detail-body h5,
.news-detail-page .news-detail-body h6 {
  font-weight: 700;
  line-height: 1.4;
  margin: 40px 0 20px;
  color: #000000;
}
.news-detail-page .news-detail-body h2 {
  font-size: 20px;
  padding: 14px 20px;
  background-color: #f8fafc;
  border-left: 4px solid #05337e; /* テーマカラーの紺色 */
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0 6px 6px 0;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-body h2 {
    font-size: 24px;
    padding: 16px 24px;
  }
}
.news-detail-page .news-detail-body h3 {
  font-size: 18px;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  letter-spacing: 0.08em;
}
.news-detail-page .news-detail-body h3::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #28bada; /* アクセントカラーのライトブルー */
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-body h3 {
    font-size: 20px;
    padding-bottom: 12px;
  }
  .news-detail-page .news-detail-body h3::after {
    width: 60px;
  }
}
.news-detail-page .news-detail-body h4 {
  font-size: 16px;
  border-left: 3px solid #28bada; /* ライトブルー */
  padding-left: 10px;
  letter-spacing: 0.08em;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-body h4 {
    font-size: 18px;
    padding-left: 12px;
  }
}
.news-detail-page .news-detail-body h5 {
  font-size: 15px;
  border-left: 2px solid #7d9abf; /* グレーブルー */
  padding-left: 8px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-body h5 {
    font-size: 16px;
    padding-left: 10px;
  }
}
.news-detail-page .news-detail-body h6 {
  font-size: 14px;
  border-bottom: 1px dotted #cbd5e1;
  padding-bottom: 4px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-body h6 {
    font-size: 15px;
    padding-bottom: 6px;
  }
}
.news-detail-page .news-detail-body ul,
.news-detail-page .news-detail-body ol {
  margin: 0 0 24px;
  padding-left: 20px;
}
.news-detail-page .news-detail-body li {
  margin-bottom: 8px;
}
.news-detail-page .news-detail-body li:last-child {
  margin-bottom: 0;
}
.news-detail-page .news-detail-img-wrapper {
  width: 100%;
  margin: 30px 0;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-img-wrapper {
    margin: 60px 0;
  }
}
.news-detail-page .news-detail-img {
  width: 100%;
  height: auto;
  display: block;
}
.news-detail-page .news-detail-nav {
  display: grid;
  grid-template-areas: "prev next" "back back";
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 60px;
  row-gap: 30px;
}
@media (min-width: 1024px) {
  .news-detail-page .news-detail-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    grid-template-areas: none;
    margin-top: 140px;
    max-width: 575px;
    margin-inline: auto;
    row-gap: 0;
  }
}
.news-detail-page .news-detail-nav__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  transition: color 0.3s ease;
}
.news-detail-page .news-detail-nav__btn:hover {
  color: #28bada;
}
.news-detail-page .news-detail-nav__btn--prev {
  grid-area: prev;
  justify-self: start;
}
.news-detail-page .news-detail-nav__btn--prev .news-detail-nav__arrow-img {
  transform: scaleX(-1);
}
.news-detail-page .news-detail-nav__btn--next {
  grid-area: next;
  justify-self: end;
}
.news-detail-page .news-detail-nav__btn-text {
  display: inline-block;
}
.news-detail-page .news-detail-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #05337e;
  transition: opacity 0.3s ease;
}
.news-detail-page .news-detail-nav__arrow:hover {
  opacity: 0.8;
}
.news-detail-page .news-detail-nav__arrow-img {
  width: 8px;
  height: auto;
  display: block;
}
.news-detail-page .news-detail-nav__back {
  grid-area: back;
  justify-self: center;
  text-align: center;
}
.news-detail-page .news-detail-nav__back-link {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: 0.1em;
}
.news-detail-page .news-detail-nav__back-link:hover {
  color: #28bada;
}

/* ==========================================================================
   Blog List Page Styles (ブログ一覧専用スタイル)
   ========================================================================== */
.blog-page {
  font-family: var(--font-base);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.blog-page .blog-sec {
  padding: 0;
}
.blog-page .blog-container {
  padding: 60px 16px 200px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .blog-page .blog-container {
    padding: 140px 40px 150px;
    max-width: 1172px; /* 1092px content width + 80px padding */
  }
}
.blog-page .blog-header {
  text-align: center;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .blog-page .blog-header {
    margin-bottom: 90px;
  }
}
.blog-page .blog-header__sub {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #d90505;
  letter-spacing: 0.15em;
}
.blog-page .blog-header__main {
  font-size: 24px;
  font-weight: 900;
  color: #000000;
  margin: 0;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .blog-page .blog-header__main {
    font-size: 40px;
  }
}
.blog-page {
  /* 2カラムレイアウト */
}
.blog-page .blog-layout {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}
@media (min-width: 1024px) {
  .blog-page .blog-layout {
    flex-direction: row;
    gap: 76px;
    align-items: flex-start;
  }
}
.blog-page {
  /* メインコンテンツ */
}
.blog-page .blog-main {
  width: 100%;
  flex: 1;
  min-width: 0;
}
.blog-page {
  /* サイドバー */
}
.blog-page .blog-sidebar {
  width: 300px;
  margin-inline: auto;
  order: -1; /* SPでは上部に配置 */
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 1024px) {
  .blog-page .blog-sidebar {
    margin-inline: unset;
    flex-shrink: 0;
    order: 0; /* PCでは右側に配置 */
    gap: 30px;
  }
}
.blog-page {
  /* ウィジェット */
}
.blog-page .blog-widget {
  width: 100%;
}
.blog-page .blog-widget--categories {
  background-color: #ffffff;
  border: 1px solid #e6e8eb;
  padding: 24px 24px 32px;
}
.blog-page .blog-widget__title {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 16px;
  letter-spacing: 0.1em;
}
.blog-page {
  /* 検索フォーム */
}
.blog-page .blog-search-field {
  width: 100%;
  height: 52px;
  border: 1px solid #e6e8eb;
  background-color: #ffffff;
  padding: 10px 32px;
  font-size: 16px;
  color: #000000;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}
.blog-page .blog-search-field:focus {
  border-color: #05337e;
}
.blog-page {
  /* カテゴリーリスト */
}
.blog-page .blog-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-page .blog-cat-btn {
  display: inline-block;
  background-color: #05337e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  padding: 3px 14px;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.blog-page .blog-cat-btn:hover, .blog-page .blog-cat-btn.is-active {
  background-color: #28bada;
}
.blog-page {
  /* カードグリッド */
}
.blog-page .blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: 100%;
  margin-bottom: 60px;
}
@media (min-width: 480px) {
  .blog-page .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .blog-page .blog-grid {
    gap: 60px 30px;
    margin-bottom: 90px;
  }
}
.blog-page {
  /* カード */
}
.blog-page .blog-card {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.blog-page .blog-card:hover .blog-card__img {
  transform: scale(1.05);
}
.blog-page .blog-card:hover .blog-card__title {
  color: #28bada;
}
.blog-page .blog-card__img-wrapper {
  width: 100%;
  aspect-ratio: 343/199;
  overflow: hidden;
  background-color: #e6e8eb;
}
.blog-page .blog-card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-page .blog-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.blog-page .blog-card__date {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  letter-spacing: 0;
}
.blog-page .blog-card__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  background-color: #05337e;
  padding: 3px 10px;
  border-radius: 50px;
  line-height: 1.3;
}
.blog-page .blog-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  line-height: 1.6;
  margin: 16px 0 0;
  transition: color 0.3s ease;
}
.blog-page {
  /* ページネーション */
}
.blog-page .blog-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 40px;
  flex-wrap: nowrap;
}
@media (min-width: 1024px) {
  .blog-page .blog-pagination {
    margin-top: 90px;
    max-width: 344px;
    margin-inline: auto;
  }
}
.blog-page .blog-pagination__num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}
@media (min-width: 1024px) {
  .blog-page .blog-pagination__num {
    font-size: 18px;
  }
}
.blog-page .blog-pagination__num:hover {
  color: #28bada;
}
.blog-page .blog-pagination__num.is-active {
  color: #05337e;
  font-weight: 700;
  pointer-events: none;
}
.blog-page .blog-pagination__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #05337e;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 1024px) {
  .blog-page .blog-pagination__arrow {
    width: 24px;
    height: 24px;
  }
}
.blog-page .blog-pagination__arrow:hover {
  opacity: 0.8;
}
.blog-page .blog-pagination__arrow-img {
  width: 8px;
  height: auto;
  display: block;
}
.blog-page .blog-pagination__arrow--prev {
  visibility: hidden;
}
.blog-page .blog-pagination__arrow--prev .blog-pagination__arrow-img {
  transform: scaleX(-1);
}
.blog-page .blog-pagination__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  transform: translateY(-4px); /* Vertically center baseline dots */
}
@media (min-width: 1024px) {
  .blog-page .blog-pagination__dots {
    font-size: 18px;
    transform: translateY(-5px);
  }
}
.blog-page {
  /* 猫ブログなどの3カラム表示用 */
}
@media (min-width: 480px) {
  .blog-page .blog-grid--three-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .blog-page .blog-grid--three-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Blog Detail Page Styles (ブログ詳細専用スタイル)
   ========================================================================== */
.blog-detail-page .blog-container {
  padding-top: 30px;
}
.blog-detail-page .blog-detail-article {
  width: 100%;
}
.blog-detail-page .blog-detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-meta {
    margin-bottom: 30px;
  }
}
.blog-detail-page .blog-detail-date {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  letter-spacing: 0;
}
.blog-detail-page .blog-detail-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  background-color: #05337e;
  padding: 3px 10px;
  border-radius: 50px;
  line-height: 1.3;
}
.blog-detail-page .blog-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  line-height: 1.6;
  margin: 0 0 30px;
  letter-spacing: 0.15em;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-title {
    font-size: 28px;
    margin-bottom: 50px;
  }
}
.blog-detail-page .blog-detail-img-wrapper {
  width: 100%;
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-img-wrapper {
    margin-bottom: 60px;
  }
}
.blog-detail-page .blog-detail-img {
  width: 100%;
  height: auto;
  display: block;
}
.blog-detail-page .blog-detail-body {
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  line-height: 1.8;
  letter-spacing: 0.08em;
  padding-bottom: 60px;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-body {
    font-size: 16px;
    padding-bottom: 60px;
  }
}
.blog-detail-page .blog-detail-body p {
  margin: 0 0 24px;
}
.blog-detail-page .blog-detail-body p:last-child {
  margin-bottom: 0;
}
.blog-detail-page .blog-detail-body figure {
  margin: 0 0 30px;
}
.blog-detail-page .blog-detail-body figure img {
  width: 100%;
  height: auto;
  display: block;
}
.blog-detail-page .blog-detail-body h2,
.blog-detail-page .blog-detail-body h3,
.blog-detail-page .blog-detail-body h4,
.blog-detail-page .blog-detail-body h5,
.blog-detail-page .blog-detail-body h6 {
  font-weight: 700;
  line-height: 1.4;
  margin: 40px 0 20px;
  color: #000000;
}
.blog-detail-page .blog-detail-body h2 {
  font-size: 20px;
  padding: 14px 20px;
  background-color: #f8fafc;
  border-left: 4px solid #05337e; /* テーマカラーの紺色 */
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0 6px 6px 0;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-body h2 {
    font-size: 24px;
    padding: 16px 24px;
  }
}
.blog-detail-page .blog-detail-body h3 {
  font-size: 18px;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  letter-spacing: 0.08em;
}
.blog-detail-page .blog-detail-body h3::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #28bada; /* アクセントカラーのライトブルー */
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-body h3 {
    font-size: 20px;
    padding-bottom: 12px;
  }
  .blog-detail-page .blog-detail-body h3::after {
    width: 60px;
  }
}
.blog-detail-page .blog-detail-body h4 {
  font-size: 16px;
  border-left: 3px solid #28bada; /* ライトブルー */
  padding-left: 10px;
  letter-spacing: 0.08em;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-body h4 {
    font-size: 18px;
    padding-left: 12px;
  }
}
.blog-detail-page .blog-detail-body h5 {
  font-size: 15px;
  border-left: 2px solid #7d9abf; /* グレーブルー */
  padding-left: 8px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-body h5 {
    font-size: 16px;
    padding-left: 10px;
  }
}
.blog-detail-page .blog-detail-body h6 {
  font-size: 14px;
  border-bottom: 1px dotted #cbd5e1;
  padding-bottom: 4px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-body h6 {
    font-size: 15px;
    padding-bottom: 6px;
  }
}
.blog-detail-page .blog-detail-body ul,
.blog-detail-page .blog-detail-body ol {
  margin: 0 0 24px;
  padding-left: 20px;
}
.blog-detail-page .blog-detail-body li {
  margin-bottom: 8px;
}
.blog-detail-page .blog-detail-body li:last-child {
  margin-bottom: 0;
}
.blog-detail-page .blog-detail-nav {
  display: grid;
  grid-template-areas: "back back" "prev next";
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 0px;
  row-gap: 30px;
}
@media (min-width: 1024px) {
  .blog-detail-page .blog-detail-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    grid-template-areas: none;
    margin-top: 60px;
    row-gap: 0;
    max-width: 575px;
    margin-inline: auto;
  }
}
.blog-detail-page .blog-detail-nav__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  transition: color 0.3s ease;
}
.blog-detail-page .blog-detail-nav__btn:hover {
  color: #28bada;
}
.blog-detail-page .blog-detail-nav__btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.blog-detail-page .blog-detail-nav__btn--prev {
  grid-area: prev;
  justify-self: start;
}
.blog-detail-page .blog-detail-nav__btn--prev .blog-detail-nav__arrow-img {
  transform: scaleX(-1);
}
.blog-detail-page .blog-detail-nav__btn--next {
  grid-area: next;
  justify-self: end;
}
.blog-detail-page .blog-detail-nav__btn-text {
  display: inline-block;
}
.blog-detail-page .blog-detail-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #05337e;
  transition: opacity 0.3s ease;
}
.blog-detail-page .blog-detail-nav__arrow:hover {
  opacity: 0.8;
}
.blog-detail-page .blog-detail-nav__arrow-img {
  width: 8px;
  height: auto;
  display: block;
}
.blog-detail-page .blog-detail-nav__back {
  grid-area: back;
  justify-self: center;
  text-align: center;
}
.blog-detail-page .blog-detail-nav__back-link {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: 0.1em;
}
.blog-detail-page .blog-detail-nav__back-link:hover {
  color: #28bada;
}

/* ==========================================================================
   フッター (Footer Section)
   ========================================================================== */
.footer {
  color: #05337e;
  position: relative;
  width: 100%;
  z-index: 10;
  overflow: hidden;
  padding-top: 18vw;
  padding-bottom: 15px;
}
@media (min-width: 1024px) {
  .footer {
    padding-top: 14vw;
    padding-bottom: 8px;
  }
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #d2d7df;
  clip-path: polygon(0 13vw, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
}
@media (min-width: 1024px) {
  .footer::before {
    clip-path: polygon(0 13vw, 100% 0, 100% 100%, 0 100%);
  }
}
.footer {
  /* --------------------------------------------------------------------------
     スローガンエリア (Slogan Area)
     -------------------------------------------------------------------------- */
}
.footer__slogan-wrapper {
  width: 100%;
  max-width: 400px;
  margin: -9.2vw auto 30px;
  padding: 0 16px;
  box-sizing: border-box;
  transform: skewY(-7.5deg);
  transform-origin: top left;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .footer__slogan-wrapper {
    max-width: 900px;
    padding: 0 28px;
  }
}
@media (min-width: 1024px) {
  .footer__slogan-wrapper {
    max-width: 1330px;
    margin-top: -4.6vw;
    margin-bottom: 0px;
    padding: 0 40px;
  }
}
.footer__slogan {
  font-family: var(--font-en);
  font-size: 27px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  color: #05337e;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .footer__slogan {
    font-size: clamp(47px, calc(2.843vw + 25.17px), 68px);
    line-height: 1.1;
  }
}
@media (min-width: 1024px) {
  .footer__slogan {
    font-size: 64px;
  }
}
.footer__slogan-line {
  display: block;
}
.footer__slogan-line--1 {
  text-align: left;
  padding-left: 2px;
}
@media (min-width: 768px) {
  .footer__slogan-line--1 {
    display: block;
    padding-left: 0;
  }
}
.footer__slogan-line--2 {
  text-align: right;
  padding-right: 2px;
  margin-top: 10px;
}
@media (min-width: 768px) {
  .footer__slogan-line--2 {
    display: block;
    padding-right: 0;
    margin-top: 12px;
  }
}
.footer__slogan-text--red {
  color: #d90505;
}
.footer {
  /* --------------------------------------------------------------------------
     フッターメインコンテンツ (Main Content)
     -------------------------------------------------------------------------- */
}
.footer__main {
  width: 100%;
  position: relative;
  z-index: 2;
}
.footer__container {
  width: 100%;
  max-width: 1206px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .footer__container {
    max-width: 1230px;
    padding: 0 40px;
  }
}
.footer__row {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-width: 400px;
}
@media (min-width: 768px) {
  .footer__row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: none;
    gap: 25px;
  }
}
@media (min-width: 1024px) {
  .footer__row {
    gap: 60px;
  }
}
.footer {
  /* --------------------------------------------------------------------------
     左カラム：会社情報 (Company Info)
     -------------------------------------------------------------------------- */
}
.footer__company {
  order: 2;
  margin-top: 50px;
}
@media (min-width: 768px) {
  .footer__company {
    order: 1;
    margin-top: 0;
    flex: 1;
    max-width: 400px;
  }
}
@media (min-width: 1024px) {
  .footer__company {
    flex: 0 0 37.2719374457%;
    max-width: none;
  }
}
.footer__logo-sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .footer__logo-sns {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    margin-bottom: 60px;
  }
}
.footer__logo {
  display: inline-block;
  transition: opacity 0.3s ease;
}
.footer__logo:hover {
  opacity: 0.7;
}
.footer__logo-img {
  width: 263px;
  height: auto;
  display: block;
}
@media (min-width: 1024px) {
  .footer__logo-img {
    width: 344px;
  }
}
.footer__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
@media (min-width: 1024px) {
  .footer__sns-link {
    width: 40px;
    height: 40px;
  }
}
.footer__sns-link svg {
  width: 40px;
  height: 40px;
  transition: fill 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.footer__sns-link:hover svg {
  fill: #d90505;
  transform: scale(1.18) rotate(6deg);
}
.footer__sns-icon {
  display: block;
}
.footer__office {
  margin-bottom: 30px;
  text-align: center;
}
@media (min-width: 1024px) {
  .footer__office {
    text-align: left;
  }
}
.footer__office:last-child {
  margin-bottom: 0;
}
.footer__office--hirono .footer__office-tel-fax {
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .footer__office--hirono .footer__office-tel-fax {
    font-size: 15px;
    justify-content: flex-start;
    gap: 24px;
    margin-bottom: 0;
  }
}
.footer__office--hirono .footer__office-address {
  white-space: nowrap;
  color: #000000;
  letter-spacing: 0.08em;
}
.footer__office-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.footer__office-label--honsha {
  background-color: #05337e;
  width: 92px;
  height: 26px;
}
@media (min-width: 1024px) {
  .footer__office-label--honsha {
    width: 104px;
    margin-bottom: 0px;
  }
}
.footer__office-label--hirono {
  background-color: #7a828a;
  width: 140px;
  height: 26px;
}
@media (min-width: 1024px) {
  .footer__office-label--hirono {
    width: 104px;
    margin-bottom: 0px;
  }
}
.footer__office-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1024px) {
  .footer__office-contact {
    align-items: flex-start;
  }
}
.footer__office-tel-fax {
  font-family: "Montserrat", var(--font-en), sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #05337e;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 0.08em;
}
@media (min-width: 1024px) {
  .footer__office-tel-fax {
    font-size: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    white-space: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }
}
.footer__office-tel-fax--stacked {
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1024px) {
  .footer__office-tel-fax--stacked {
    flex-direction: row;
    flex-wrap: wrap;
    white-space: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0px;
    margin-bottom: 0;
    letter-spacing: 0.03em;
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}
.footer__office-address {
  font-family: "Noto Sans JP", var(--font-base), sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  text-align: left;
  display: inline-block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  color: #000;
}
@media (min-width: 1024px) {
  .footer__office-address {
    font-size: 15px;
    text-align: left;
    display: block;
    max-width: 100%;
  }
}
.footer__office-zip {
  display: block;
  margin-bottom: 4px;
  font-family: inherit;
  font-weight: inherit;
}
@media (min-width: 1024px) {
  .footer__office-zip {
    display: inline;
    margin-bottom: 0;
    margin-right: 8px;
  }
}
.footer__office-addr-text {
  display: block;
  font-family: inherit;
  font-weight: inherit;
}
@media (min-width: 1024px) {
  .footer__office-addr-text {
    display: inline;
  }
}
.footer {
  /* --------------------------------------------------------------------------
     右カラム：ナビゲーションメニュー (Navigation Columns)
     -------------------------------------------------------------------------- */
}
.footer__nav {
  order: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 0;
       column-gap: 0;
  row-gap: 0;
  position: relative;
  padding-bottom: 100px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .footer__nav {
    order: 2;
    margin: 0;
  }
}
@media (min-width: 1024px) {
  .footer__nav {
    display: flex;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
    flex: 0 0 49.7827975673%;
    position: static;
    padding-bottom: 0;
    max-width: none;
  }
}
@media (max-width: 1023px) {
  .footer__nav-col--1 {
    grid-column: 1;
    grid-row: 1/3;
  }
}
@media (max-width: 1023px) {
  .footer__nav-col--2 {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 1023px) {
  .footer__nav-col--3 {
    grid-column: 2;
    grid-row: 2;
    margin-top: 28px;
  }
}
.footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__nav-item {
  margin-bottom: 16px;
}
@media (min-width: 1024px) {
  .footer__nav-item {
    margin-bottom: 28px;
  }
}
.footer__nav-item:last-child {
  margin-bottom: 0;
}
.footer__nav-item--sp-only {
  display: block;
}
@media (min-width: 1024px) {
  .footer__nav-item--sp-only {
    display: none;
  }
}
.footer__nav-item--pc-only {
  display: none;
}
@media (min-width: 1024px) {
  .footer__nav-item--pc-only {
    display: block;
  }
}
.footer__nav-link {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: #05337e;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
}
.footer__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #d90505;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (min-width: 1024px) {
  .footer__nav-link {
    padding-bottom: unset;
    font-size: 16px;
  }
}
.footer__nav-link:hover {
  color: #d90505;
}
.footer__nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.footer__nav-sublist {
  list-style: none;
  padding: 16px 0 0 16px;
  margin: 0;
}
@media (min-width: 1024px) {
  .footer__nav-sublist {
    padding: 20px 0 0 16px;
  }
}
.footer__nav-subitem {
  margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .footer__nav-subitem {
    margin-bottom: 12px;
  }
}
.footer__nav-subitem:last-child {
  margin-bottom: 0;
}
.footer__nav-sublink {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: #000000;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  padding-bottom: 2px;
}
.footer__nav-sublink--interview {
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .footer__nav-sublink {
    font-size: 16px;
  }
}
.footer__nav-sublink:hover {
  color: #d90505;
}
.footer {
  /* --------------------------------------------------------------------------
     お問い合わせボタン (Inquiry Button)
     -------------------------------------------------------------------------- */
}
.footer__actions {
  margin-top: 30px;
}
@media (max-width: 1023px) {
  .footer__actions {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
    z-index: 10;
  }
}
@media (min-width: 1024px) {
  .footer__actions {
    position: static;
    display: block;
    margin-left: -20px;
  }
}
.footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 51px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  letter-spacing: 0.05em;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid transparent;
}
@media (min-width: 1024px) {
  .footer__btn {
    width: 219px;
    height: 54px;
    font-size: 14px;
  }
}
.footer__btn:hover {
  background-color: #ffffff;
  border-color: #05337e;
  color: #05337e;
}
.footer__btn:hover .footer__btn-arrow {
  transform: translate(10px, -50%) rotate(45deg);
}
.footer__btn-text {
  margin-right: 10px;
}
.footer__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  display: block;
  transition: transform 0.3s ease;
  border-top: 2px solid #d90505;
  border-right: 2px solid #d90505;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
}
@media (min-width: 1024px) {
  .footer__btn-arrow {
    right: 24px;
  }
}
.footer {
  /* --------------------------------------------------------------------------
     コピーライト (Copyright)
     -------------------------------------------------------------------------- */
}
.footer__copyright {
  font-family: var(--font-en);
  font-size: clamp(9px, 2.6vw, 11px);
  color: #000;
  text-align: center;
  margin-top: 50px;
  white-space: nowrap;
  letter-spacing: 0.05em;
  margin-left: -28px;
  margin-right: -28px;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .footer__copyright {
    font-size: 12px;
    margin-top: 20px;
    white-space: normal;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }
}

/**
 * Cat Page & Cat Blog Stylesheet
 */
/* Common Variables & Mixins for Cat Page */
@keyframes catPageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cat-page {
  background: transparent;
  color: #000;
  font-family: "Zen Maru Gothic", sans-serif;
  overflow-x: clip;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: catPageFadeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (min-width: 1024px) {
  .cat-page .sp-only {
    display: none !important;
  }
}
.cat-page .fade-in-img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.cat-page .fade-in-img.loaded {
  opacity: 1 !important;
}
.cat-page .cat-page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}
.cat-page .cat-page-bg__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.cat-page .cat-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .cat-page .cat-container {
    max-width: 1160px;
  }
}
.cat-page .cat-container .breadcrumb {
  background-color: transparent !important;
}
.cat-page .cat-container .breadcrumb__inner {
  padding-inline: unset;
}
@media (min-width: 1024px) {
  .cat-page .cat-container .breadcrumb {
    display: none;
  }
}
.cat-page .cat-section-title {
  text-align: center;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1024px) {
  .cat-page .cat-section-title {
    margin-bottom: 90px;
  }
}
.cat-page .cat-section-title__icon {
  width: 66px;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}
@media (min-width: 1024px) {
  .cat-page .cat-section-title__icon {
    width: 88px;
    margin-bottom: 16px;
  }
}
.cat-page .cat-section-title__icon-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.2s ease-in-out;
}
.cat-page .cat-section-title__icon-img.is-switching {
  opacity: 0;
}
.cat-page .cat-section-title__jp {
  font-size: 32px;
  font-weight: 700;
  color: #664242; /* brown */
  background: linear-gradient(transparent 50%, #fde2e2 50%);
  padding-inline: 16px;
  display: inline-block;
  line-height: 1.4;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .cat-page .cat-section-title__jp {
    font-size: 40px;
    letter-spacing: 0.05em;
  }
}
.cat-page .cat-section-title__en {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #664242; /* gold/brown */
  letter-spacing: 0.05em;
  margin-top: 6px;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .cat-page .cat-section-title__en {
    font-size: 24px;
    margin-top: 8px;
    margin-top: unset;
  }
}
.cat-page .cat-section-title__time {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #664242;
  margin-top: 4px;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .cat-page .cat-section-title__time {
    font-size: 40px;
    margin-top: 30px;
  }
}
.cat-page {
  /* ==========================================================================
     1. Cat Hero Styles
     ========================================================================== */
}
.cat-page .cat-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 375/223; /* アスペクト比を 375 x 223 に設定 */
  background-color: #fff5d8;
  overflow: hidden;
}
.cat-page .cat-hero__breadcrumb {
  display: none;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__breadcrumb {
    display: block;
    position: absolute;
    top: 110px; /* PCロゴ（ヘッダー）の少し下に配置 */
    left: 30px; /* 店名ロゴの左余白と同じ30px */
    z-index: 8;
  }
  .cat-page .cat-hero__breadcrumb .breadcrumb {
    padding: 0;
    background: transparent;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif; /* Noto Sans JPに設定 */
  }
  .cat-page .cat-hero__breadcrumb .breadcrumb,
  .cat-page .cat-hero__breadcrumb .breadcrumb span,
  .cat-page .cat-hero__breadcrumb .breadcrumb a,
  .cat-page .cat-hero__breadcrumb .breadcrumb span *,
  .cat-page .cat-hero__breadcrumb .breadcrumb a * {
    color: #664242 !important;
  }
  .cat-page .cat-hero__breadcrumb .breadcrumb__inner {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    padding-inline: 0;
  }
  .cat-page .cat-hero__breadcrumb .breadcrumb__inner a {
    text-decoration: none !important;
    transition: color 0.3s ease;
  }
  .cat-page .cat-hero__breadcrumb .breadcrumb__inner a:hover {
    color: #d90505 !important;
    text-decoration: underline !important;
  }
  .cat-page .cat-hero__breadcrumb .breadcrumb__separator {
    margin: 0 8px !important;
  }
  .cat-page .cat-hero__breadcrumb .breadcrumb__current {
    font-weight: 700 !important;
  }
}
.cat-page .cat-hero__nav-buttons {
  display: none;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__nav-buttons {
    display: flex;
    -moz-column-gap: 24px;
         column-gap: 24px;
    position: absolute;
    top: 74px; /* ナビゲーション（ヘッダー高さ80px）の下16px */
    right: 16px; /* 右から16px */
    z-index: 10;
  }
}
.cat-page .cat-hero__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 127px;
  height: 38px;
  background-color: #ffffff;
  border: 1.5px solid #664242;
  border-radius: 19px;
  color: #664242;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  font-family: "Noto Sans JP", sans-serif;
}
.cat-page .cat-hero__nav-btn:hover, .cat-page .cat-hero__nav-btn.is-active {
  background-color: #fff5d8;
  color: #664242;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero {
    height: auto;
    aspect-ratio: 1366/811;
  }
}
.cat-page .cat-hero__bg {
  width: 100%;
  height: 100%;
  background-color: transparent;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__bg {
    background-image: url("./img/cat/hero-pc.webp");
    background-attachment: fixed;
    background-size: 100vw auto;
    background-position: center top;
  }
}
.cat-page .cat-hero__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -o-object-position: center 30%;
     object-position: center 30%;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__img {
    display: none;
  }
}
.cat-page .cat-hero__wave {
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  z-index: 5;
  line-height: 0;
  background: url("./img/cat/background_tile.jpg") repeat;
  -webkit-mask-image: url("./img/cat/wave.webp");
  mask-image: url("./img/cat/wave.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  visibility: hidden;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__wave {
    bottom: -40px;
  }
}
.cat-page .cat-hero__wave.wave-loaded {
  visibility: visible;
}
.cat-page .cat-hero__wave-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1000/260;
  display: block;
  opacity: 0;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__wave-img {
    aspect-ratio: 1366/316;
  }
}
.cat-page .cat-hero {
  /* 黄色いコンテンツエリア */
}
.cat-page .cat-hero__wave-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 6;
  padding-bottom: 10px; /* 下部からの立ち上がり調整 */
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__wave-area {
    position: static;
    padding-bottom: 24px;
  }
}
.cat-page .cat-hero__wave-container {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  padding: 0 20px;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__wave-container {
    position: static;
    max-width: 1080px;
    padding: 0 16px;
  }
}
.cat-page .cat-hero {
  /* ロゴタイトル画像 */
}
.cat-page .cat-hero__logo-image {
  width: 88.5%; /* 375pxの時に332px (332 / 375 ≒ 88.5%) */
  max-width: 532px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1024px) {
  .cat-page .cat-hero__logo-image {
    position: absolute;
    top: 65%; /* 1366pxの時に517px (517 / 811 ≒ 63.75%) */
    right: 11.2%; /* 1366pxの時に153px (153 / 1366 ≒ 11.2%) */
    width: 48.316vw;
    max-width: none;
    margin: 0;
    z-index: 7;
  }
}
.cat-page .cat-hero__logo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 332/88;
  display: block;
  transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.cat-page__breadcrumb-sp {
  display: block;
  padding-top: 15px;
  padding-bottom: 5px;
}
.cat-page__breadcrumb-sp .breadcrumb {
  padding: 0;
  background: transparent;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
}
.cat-page__breadcrumb-sp .breadcrumb,
.cat-page__breadcrumb-sp .breadcrumb span,
.cat-page__breadcrumb-sp .breadcrumb a,
.cat-page__breadcrumb-sp .breadcrumb span *,
.cat-page__breadcrumb-sp .breadcrumb a * {
  color: #664242 !important;
}
.cat-page__breadcrumb-sp .breadcrumb__inner {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  padding-inline: 0;
}
.cat-page__breadcrumb-sp .breadcrumb__inner a {
  text-decoration: none !important;
  transition: color 0.3s ease;
}
.cat-page__breadcrumb-sp .breadcrumb__inner a:hover {
  color: #d90505 !important;
  text-decoration: underline !important;
}
.cat-page__breadcrumb-sp .breadcrumb__separator {
  margin: 0 8px !important;
}
.cat-page__breadcrumb-sp .breadcrumb__current {
  font-weight: 700 !important;
}
@media (min-width: 1024px) {
  .cat-page__breadcrumb-sp {
    display: none; /* PCでは非表示 */
  }
}
.cat-page {
  /* ==========================================================================
     1.5. Cat Intro Styles (導入メッセージ)
     ========================================================================== */
}
.cat-page .cat-intro {
  background: transparent;
  padding-top: 30px;
  padding-bottom: 90px;
  text-align: center;
  color: #664242; /* ロゴと同一 of ブラウン */
}
@media (min-width: 1024px) {
  .cat-page .cat-intro {
    padding-top: 0px;
    padding-bottom: 225px;
    position: relative;
  }
}
.cat-page .cat-intro__content {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .cat-page .cat-intro__content {
    margin-bottom: 30px;
  }
}
.cat-page .cat-intro__lead {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .cat-page .cat-intro__lead {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 32px;
  }
  .cat-page .cat-intro__lead br {
    display: none;
  }
}
.cat-page .cat-intro__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .cat-page .cat-intro__text {
    font-size: 16px;
    line-height: 2.2;
    color: #664242; /* 優しい薄めのブラウン */
  }
}
.cat-page .cat-intro__img-wrapper {
  max-width: 320px; /* 画像の猫2匹の表示サイズ調整 */
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) {
  .cat-page .cat-intro__img-wrapper {
    width: 23.938vw; /* 1366pxの時に327px (327 / 13.66 ≒ 23.938vw) */
    max-width: none;
    height: auto;
    aspect-ratio: 327/217;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: unset;
    top: 140px;
    left: 10.615vw; /* 1366pxの時に145px (145 / 13.66 ≒ 10.615vw) */
    z-index: 2;
  }
}
.cat-page .cat-intro__img {
  width: 100%;
  height: auto;
  display: block;
}
.cat-page {
  /* ==========================================================================
     2. Cat Profiles Styles
     ========================================================================== */
}
.cat-page .cat-profiles {
  padding: 0px 0;
  background: transparent;
}
.cat-page .cat-profiles__grid {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .cat-page .cat-profiles__grid {
    flex-direction: row;
    justify-content: center;
    gap: 120px;
  }
}
.cat-page .cat-profile-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .cat-page .cat-profile-card {
    margin: 0;
    width: 35.578vw; /* 1366pxの時に486px (486 / 13.66 ≒ 35.578vw) */
    max-width: 486px;
  }
}
.cat-page .cat-profile-card__header {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}
.cat-page .cat-profile-card__img-wrapper {
  max-width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  border-radius: 50%;
  overflow: hidden;
  background-color: #eee;
  z-index: 2;
}
@media (min-width: 1024px) {
  .cat-page .cat-profile-card__img-wrapper {
    width: 83.539%; /* 1366pxの時に406px (406 / 486 ≒ 83.539%) */
    max-width: 406px;
    height: auto;
    align-self: flex-end;
  }
}
.cat-page .cat-profile-card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cat-page .cat-profile-card__name-badge {
  align-self: flex-start;
  margin-top: -20px;
  background-color: #fadbda;
  color: #664242; /* brown */
  border: 1.5px solid #664242; /* matched border outline */
  font-weight: 700;
  font-size: 40px;
  width: 240px;
  height: 96px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  z-index: 3;
}
@media (min-width: 1024px) {
  .cat-page .cat-profile-card__name-badge {
    margin-left: 0;
    margin-top: -70px;
  }
}
.cat-page .cat-profile-card__info {
  width: 100%;
  text-align: left;
  background-color: #ffffff;
  border: 1.5px solid #664242; /* matched border outline */
  border-radius: 40px;
  padding: 24px 16px;
  box-shadow: 0 4px 15px rgba(102, 66, 66, 0.04);
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .cat-page .cat-profile-card__info {
    padding: 24px 32px 26px;
    border-radius: 24px;
  }
}
.cat-page .cat-profile-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .cat-page .cat-profile-card__list {
    row-gap: 20px;
  }
}
.cat-page .cat-profile-card__list li {
  position: relative;
  padding-left: 22px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #664242; /* brown */
}
.cat-page .cat-profile-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 15px;
  background: url("./img/cat/ciecle.svg") no-repeat center;
  background-size: contain;
}
.cat-page .cat-profile-card__label {
  color: #664242;
  font-weight: 700;
  font-size: 16px;
}
.cat-page {
  /* ==========================================================================
     2.5. Cat Schedule Section Styles (ねこ社員の1日)
     ========================================================================== */
}
.cat-page .cat-schedule {
  background-color: #ffffff;
  padding-bottom: 140px;
  position: relative;
  z-index: 1;
}
.cat-page .cat-schedule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./img/cat/dot.svg");
  background-repeat: repeat;
  background-size: 375px 180px;
  background-position: center top;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule::before {
    background-size: 100vw auto;
    background-position: center top;
    top: calc(21.08vw - 1px); /* サブピクセルの隙間対策で1px上に重ねる */
    height: calc(100% - 21.08vw + 1px);
  }
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule::after {
    content: "";
    position: absolute;
    top: calc(21.08vw - 1px); /* サブピクセルの隙間対策で1px上に重ねる */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: -2;
    pointer-events: none;
  }
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule {
    background-color: transparent !important;
    padding-bottom: 21.08vw;
    height: 250vh;
  }
}
.cat-page .cat-schedule__wave {
  width: 100%;
  line-height: 0;
  background: url("./img/cat/background_tile.jpg") repeat;
  -webkit-mask-image: url("./img/cat/wave.webp");
  mask-image: url("./img/cat/wave.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-bottom: 50px;
  transform: scaleY(-1);
  margin-top: -1px;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule__wave {
    margin-top: 0;
    margin-bottom: unset;
    transform: scaleY(-1) rotate(180deg);
    background: #ffffff !important;
    position: relative;
  }
  .cat-page .cat-schedule__wave::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("./img/cat/dot.svg") !important;
    background-repeat: repeat !important;
    background-size: 100vw auto !important;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
    transform: scaleY(-1) rotate(180deg);
  }
}
.cat-page .cat-schedule__wave-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1000/260;
  display: block;
  opacity: 0;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule__wave-img {
    aspect-ratio: 1366/288;
  }
}
.cat-page .cat-schedule .cat-container {
  position: relative;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(100px, (100vw - 1024px) * 0.37 + 100px, 226px);
    height: 100%;
  }
}
.cat-page .cat-schedule .cat-schedule-title-wrapper {
  position: relative;
  width: 100%;
  display: block;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-schedule-title-wrapper {
    width: 306px;
    flex-shrink: 0;
    margin-left: clamp(80px, (100vw - 1024px) * 0.17 + 80px, 139px); /* 1024pxで80px、1366pxで139pxに可変調整して中央寄りに */
  }
}
.cat-page .cat-schedule .cat-section-title {
  padding: 16px 0;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-section-title {
    padding: 0;
    max-width: 270px;
    width: 100%;
  }
}
.cat-page .cat-schedule .cat-section-title.is-sticky {
  position: fixed;
  left: 0;
  transform: none !important;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  z-index: 10;
  background-color: #ffffff;
  background-image: url("./img/cat/dot.svg");
  background-repeat: repeat;
  background-size: 375px 180px;
  opacity: 1 !important;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-section-title.is-sticky {
    position: fixed;
    background: none !important;
    max-width: 270px;
    padding: 0;
  }
}
.cat-page .cat-schedule .cat-section-title.is-absolute {
  position: absolute;
  left: 0;
  transform: none !important;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  z-index: 10;
  background-color: #ffffff;
  background-image: url("./img/cat/dot.svg");
  background-repeat: repeat;
  background-size: 375px 180px;
  opacity: 1 !important;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-section-title.is-absolute {
    position: absolute;
    background: none !important;
    max-width: 270px;
    padding: 0;
  }
}
.cat-page .cat-schedule .cat-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 600px;
  margin: 40px auto 0;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-schedule-list {
    flex: none;
    margin: 0;
    width: 425px;
    max-width: 425px;
    position: relative;
    height: 580px;
    gap: 0;
  }
}
.cat-page .cat-schedule .cat-schedule-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-schedule-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }
  .cat-page .cat-schedule .cat-schedule-item.is-active {
    opacity: 1 !important;
    visibility: visible !important;
  }
}
.cat-page .cat-schedule .cat-schedule-item.is-active:not(:last-child)::before {
  opacity: 1;
}
.cat-page .cat-schedule .cat-schedule-item:not(:last-child)::before {
  content: "";
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 60px;
  background: url("./img/cat/footprint.svg") no-repeat center;
  background-size: contain;
  margin-left: -50px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-schedule-item:not(:last-child)::before {
    width: 74px;
    height: 107px;
    margin-left: -265px;
    bottom: 0px;
    opacity: 1;
    transition: none;
  }
}
.cat-page .cat-schedule .cat-schedule-item:nth-child(even):not(:last-child)::before {
  left: 63%;
  margin-left: 6px;
  transform: translateX(-50%) scaleX(-1);
}
@media (min-width: 1024px) {
  .cat-page .cat-schedule .cat-schedule-item:nth-child(even):not(:last-child)::before {
    left: 50%;
    margin-left: 210px;
    transform: translateX(-50%) scaleX(-1);
  }
}
.cat-page .cat-schedule .cat-schedule-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 0;
  height: 163px;
  border-left: 2px dashed #664242;
  margin: 24px auto 0;
}
.cat-page .cat-schedule .cat-schedule-item__title {
  font-size: 16px;
  font-weight: 400;
  color: #664242;
  position: relative;
  padding-left: 24px;
  margin: 0;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}
.cat-page .cat-schedule .cat-schedule-item__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 15px;
  background: url("./img/cat/ciecle.svg") no-repeat center;
  background-size: contain;
}
.cat-page .cat-schedule .cat-schedule-item__desc {
  font-size: 16px;
  font-weight: 500;
  color: #664242;
  position: relative;
  padding-left: 24px;
  margin: 0 0 16px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  line-height: 1.6;
  text-align: left;
}
.cat-page .cat-schedule .cat-schedule-item__desc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 15px;
  background: url("./img/cat/ciecle.svg") no-repeat center;
  background-size: contain;
}
.cat-page .cat-schedule .cat-schedule-item__img-wrapper {
  width: 100%;
  max-width: 420px;
  border-radius: 24px;
  overflow: hidden;
}
.cat-page .cat-schedule .cat-schedule-item__img {
  width: 100%;
  height: auto;
  display: block;
}
.cat-page {
  /* ==========================================================================
     3. Cat Blog Section Styles
     ========================================================================== */
}
.cat-page .cat-blog-sec {
  padding: 90px 0;
  background: transparent;
}
@media (min-width: 1024px) {
  .cat-page .cat-blog-sec {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
.cat-page .cat-blog-sec .cat-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .cat-page .cat-blog-sec .cat-blog-grid {
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
  }
}
.cat-page .cat-blog-sec__btn-area {
  margin-top: 50px;
  text-align: center;
}
@media (min-width: 1024px) {
  .cat-page .cat-blog-sec__btn-area {
    margin-top: 90px;
    padding-bottom: 2px;
  }
}
.cat-page .cat-blog-sec__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1.5px solid #664242;
  color: #664242;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  width: 100%;
  max-width: 270px; /* 270pxに変更 */
  height: 63px; /* 63pxに変更 */
  border-radius: 31.5px; /* 高さに合わせて角丸を変更 */
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.cat-page .cat-blog-sec__btn:hover {
  background-color: #664242;
  color: #ffffff;
}
.cat-page .cat-blog-card {
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #664242;
  transition: box-shadow 0.3s ease;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .cat-page .cat-blog-card {
    max-width: none;
    margin: unset;
  }
}
.cat-page .cat-blog-card:hover .cat-blog-card__img {
  transform: scale(1.15);
}
.cat-page .cat-blog-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cat-page .cat-blog-card__img-wrapper {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: #f5f5f5;
}
.cat-page .cat-blog-card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  display: block;
  transform: scale(1.08);
}
.cat-page .cat-blog-card__content {
  padding: 16px 16px 32px;
}
.cat-page .cat-blog-card__date {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #664242; /* brown */
  font-family: "Montserrat", sans-serif;
  margin-bottom: 8px;
}
.cat-page .cat-blog-card__category-wrap {
  margin-bottom: 12px;
}
.cat-page .cat-blog-card__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 28px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 400;
  color: #ffffff;
  background-color: #664242; /* brown */
  border-radius: 14px;
  line-height: 1;
}
.cat-page .cat-blog-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #664242;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-page .cat-blog-card__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #664242;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-page .cat-blog-card__more {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: #bd7d4a;
  font-weight: 700;
}
.cat-page {
  /* ==========================================================================
     4. Cat Points (Timeline-like Layout)
     ========================================================================== */
}
.cat-page .cat-points {
  padding: 80px 0;
  background: transparent;
}
.cat-page .cat-points__list {
  position: relative;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Dotted line connecting items on SP */
}
.cat-page .cat-points__list::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-left: 2px dashed #bd7d4a;
  opacity: 0.5;
}
@media (min-width: 1024px) {
  .cat-page .cat-points__list::before {
    left: 50%;
    transform: translateX(-50%);
  }
}
.cat-page .cat-point-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 45px; /* Leave space for the left dotted line dot */
}
@media (min-width: 1024px) {
  .cat-page .cat-point-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    gap: 0;
  }
  .cat-page .cat-point-item:nth-child(even) {
    flex-direction: row-reverse;
  }
}
.cat-page .cat-point-item__header {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #f3e5d1;
  z-index: 2;
}
@media (min-width: 1024px) {
  .cat-page .cat-point-item__header {
    width: 46%;
    padding: 30px;
  }
}
.cat-page .cat-point-item__num-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}
.cat-page .cat-point-item__num {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #d90505;
  line-height: 1;
}
.cat-page .cat-point-item__num-label {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #bd7d4a;
}
.cat-page .cat-point-item__title {
  font-size: 18px;
  font-weight: 700;
  color: #5c4e3c;
  margin-bottom: 12px;
}
.cat-page .cat-point-item__desc {
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  margin: 0;
}
.cat-page .cat-point-item__img-wrapper {
  border-radius: 16px;
  overflow: hidden;
  background-color: #eee;
  z-index: 2;
  aspect-ratio: 16/10;
  width: 100%;
}
@media (min-width: 1024px) {
  .cat-page .cat-point-item__img-wrapper {
    width: 46%;
  }
}
.cat-page .cat-point-item__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cat-page .cat-point-item {
  /* Node Dot overlaying the timeline line */
}
.cat-page .cat-point-item::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 28px;
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  border: 3px solid #bd7d4a;
  border-radius: 50%;
  z-index: 3;
}
@media (min-width: 1024px) {
  .cat-page .cat-point-item::after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 4px solid #bd7d4a;
  }
}

/* ==========================================================================
   Cat Pages - Header Hamburger Color Override
   ========================================================================== */
body:has(.cat-page) .header__hamburger,
body:has(.cat-blog-page) .header__hamburger,
body:has(.cat-blog-detail-page) .header__hamburger,
body.page-template-page-cat .header__hamburger,
body.page-template-page-cat-php .header__hamburger,
body.post-type-archive-cat_blog .header__hamburger,
body.single-cat_blog .header__hamburger {
  background-color: #664242;
}
body:has(.cat-page) .header__hamburger:hover,
body:has(.cat-blog-page) .header__hamburger:hover,
body:has(.cat-blog-detail-page) .header__hamburger:hover,
body.page-template-page-cat .header__hamburger:hover,
body.page-template-page-cat-php .header__hamburger:hover,
body.post-type-archive-cat_blog .header__hamburger:hover,
body.single-cat_blog .header__hamburger:hover {
  background-color: #664242;
  border-color: #664242;
}
body:has(.cat-page) .header__hamburger:hover .header__hamburger-line,
body:has(.cat-blog-page) .header__hamburger:hover .header__hamburger-line,
body:has(.cat-blog-detail-page) .header__hamburger:hover .header__hamburger-line,
body.page-template-page-cat .header__hamburger:hover .header__hamburger-line,
body.page-template-page-cat-php .header__hamburger:hover .header__hamburger-line,
body.post-type-archive-cat_blog .header__hamburger:hover .header__hamburger-line,
body.single-cat_blog .header__hamburger:hover .header__hamburger-line {
  background-color: #ffffff;
}
body:has(.cat-page) .header__hamburger.is-active,
body:has(.cat-blog-page) .header__hamburger.is-active,
body:has(.cat-blog-detail-page) .header__hamburger.is-active,
body.page-template-page-cat .header__hamburger.is-active,
body.page-template-page-cat-php .header__hamburger.is-active,
body.post-type-archive-cat_blog .header__hamburger.is-active,
body.single-cat_blog .header__hamburger.is-active {
  background-color: #664242;
  border-color: #664242;
}
body:has(.cat-page) .header__hamburger.is-active .header__hamburger-line,
body:has(.cat-blog-page) .header__hamburger.is-active .header__hamburger-line,
body:has(.cat-blog-detail-page) .header__hamburger.is-active .header__hamburger-line,
body.page-template-page-cat .header__hamburger.is-active .header__hamburger-line,
body.page-template-page-cat-php .header__hamburger.is-active .header__hamburger-line,
body.post-type-archive-cat_blog .header__hamburger.is-active .header__hamburger-line,
body.single-cat_blog .header__hamburger.is-active .header__hamburger-line {
  background-color: #ffffff;
}

/* ==========================================================================
   Cat Pages - Prevent Header from Overlapping Hero
   ========================================================================== */
body:has(.cat-page),
body.page-template-page-cat,
body.page-template-page-cat-php {
  padding-top: 57px; /* Prevent header overlay on mobile */
}
body:has(.cat-page) .header,
body.page-template-page-cat .header,
body.page-template-page-cat-php .header {
  background: url("./img/cat/background_tile.jpg") repeat, #fff5d8; /* 猫ページの背景テクスチャ・黄色っぽい色に変更 */
  box-shadow: none;
}
@media (min-width: 1024px) {
  body:has(.cat-page),
  body.page-template-page-cat,
  body.page-template-page-cat-php {
    padding-top: 0; /* Let header overlay the hero on PC for Cat TOP */
  }
  body:has(.cat-page) .header,
  body.page-template-page-cat .header,
  body.page-template-page-cat-php .header {
    background-color: transparent !important;
    background: transparent !important; /* 透明にする */
    box-shadow: none;
  }
}

body:has(.cat-blog-page),
body:has(.cat-blog-detail-page),
body.post-type-archive-cat_blog,
body.single-cat_blog {
  padding-top: 57px; /* Prevent header overlay on mobile */
  background: url("./img/cat/background_tile.jpg") repeat, #fff5d8 !important; /* body全体に黄色テクスチャ背景を設定 */
}
body:has(.cat-blog-page) .header,
body:has(.cat-blog-detail-page) .header,
body.post-type-archive-cat_blog .header,
body.single-cat_blog .header {
  background: url("./img/cat/background_tile.jpg") repeat, #fff5d8; /* 猫ページの背景テクスチャ・黄色っぽい色に変更 */
  box-shadow: none;
}
@media (min-width: 1024px) {
  body:has(.cat-blog-page),
  body:has(.cat-blog-detail-page),
  body.post-type-archive-cat_blog,
  body.single-cat_blog {
    padding-top: 0; /* Let header overlay the content on PC */
  }
  body:has(.cat-blog-page) .header,
  body:has(.cat-blog-detail-page) .header,
  body.post-type-archive-cat_blog .header,
  body.single-cat_blog .header {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none;
  }
}

@media (min-width: 1024px) {
  body:has(.cat-page) .footer::before,
  body:has(.cat-blog-page) .footer::before,
  body:has(.cat-blog-detail-page) .footer::before,
  body.page-template-page-cat .footer::before,
  body.page-template-page-cat-php .footer::before,
  body.post-type-archive-cat_blog .footer::before,
  body.single-cat_blog .footer::before {
    background-color: #ffffff !important;
    background-image: url("./img/cat/dot.svg") !important;
    background-repeat: repeat !important;
    background-size: 100vw auto !important;
    opacity: 0.5;
  }
}
@media (min-width: 1024px) {
  body:has(.cat-page) .header__right,
  body:has(.cat-blog-page) .header__right,
  body:has(.cat-blog-detail-page) .header__right,
  body.page-template-page-cat .header__right,
  body.page-template-page-cat-php .header__right,
  body.post-type-archive-cat_blog .header__right,
  body.single-cat_blog .header__right {
    background-color: #ffffff;
    box-shadow: none;
  }
  body:has(.cat-page) .header__nav-btn,
  body:has(.cat-blog-page) .header__nav-btn,
  body:has(.cat-blog-detail-page) .header__nav-btn,
  body.page-template-page-cat .header__nav-btn,
  body.page-template-page-cat-php .header__nav-btn,
  body.post-type-archive-cat_blog .header__nav-btn,
  body.single-cat_blog .header__nav-btn {
    background-color: #ffffff !important;
    color: #664242 !important;
    border: 1px solid #664242 !important;
    border-right: none !important; /* 隣り合うボタンの境界線の重なりを防ぐため右枠線を消す */
    width: 169px;
  }
  body:has(.cat-page) .header__nav-btn .header__nav-arrow,
  body:has(.cat-blog-page) .header__nav-btn .header__nav-arrow,
  body:has(.cat-blog-detail-page) .header__nav-btn .header__nav-arrow,
  body.page-template-page-cat .header__nav-btn .header__nav-arrow,
  body.page-template-page-cat-php .header__nav-btn .header__nav-arrow,
  body.post-type-archive-cat_blog .header__nav-btn .header__nav-arrow,
  body.single-cat_blog .header__nav-btn .header__nav-arrow {
    filter: brightness(0) saturate(100%) invert(27%) sepia(19%) saturate(842%) hue-rotate(317deg) brightness(96%) contrast(87%);
  }
  body:has(.cat-page) .header__nav-btn:hover,
  body:has(.cat-blog-page) .header__nav-btn:hover,
  body:has(.cat-blog-detail-page) .header__nav-btn:hover,
  body.page-template-page-cat .header__nav-btn:hover,
  body.page-template-page-cat-php .header__nav-btn:hover,
  body.post-type-archive-cat_blog .header__nav-btn:hover,
  body.single-cat_blog .header__nav-btn:hover {
    background-color: #fff5d8 !important;
    color: #664242 !important;
  }
  body:has(.cat-page) .header__nav-btn--contact,
  body:has(.cat-blog-page) .header__nav-btn--contact,
  body:has(.cat-blog-detail-page) .header__nav-btn--contact,
  body.page-template-page-cat .header__nav-btn--contact,
  body.page-template-page-cat-php .header__nav-btn--contact,
  body.post-type-archive-cat_blog .header__nav-btn--contact,
  body.single-cat_blog .header__nav-btn--contact {
    border-right: 1px solid #664242 !important; /* 一番右のコンタクトボタンだけ右枠線を復活させる */
  }
}

/* ==========================================================================
   Cat Pages - Font Family Override
   ========================================================================== */
.cat-page,
.cat-blog-page,
.cat-blog-detail-page {
  font-family: "Zen Maru Gothic", sans-serif;
}

/* ==========================================================================
   Cat Pages - Disable SP Bottom Bar Padding on Body
   ========================================================================== */
@media (max-width: 1023px) {
  body:has(.cat-page) {
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   Cat Footer Styles (footer--cat)
   ========================================================================== */
.footer--cat {
  background-color: #ffffff !important; /* 猫トップページは元の白背景に戻す */
  color: #ffffff !important;
  padding-top: 0 !important;
  padding-bottom: 0px !important;
  margin-bottom: 0 !important;
}
.footer--cat::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; /* 猫トップページは元の0pxから開始する点線に戻す */
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  background-image: url("./img/cat/dot.svg") !important;
  background-repeat: repeat !important;
  background-size: 375px 180px !important;
  background-position: center top !important;
  opacity: 0.5 !important;
  z-index: -1 !important;
  clip-path: none !important;
}
@media (min-width: 1024px) {
  .footer--cat::before {
    background-size: 100vw auto !important;
    background-position: center 0px !important;
  }
}
body:has(.cat-blog-page) .footer--cat, body:has(.cat-blog-detail-page) .footer--cat {
  background-color: transparent !important;
}
body:has(.cat-blog-page) .footer--cat::before, body:has(.cat-blog-detail-page) .footer--cat::before {
  top: 90px !important; /* 波の裏からドット背景を開始する */
  height: calc(100% - 90px) !important;
}
@media (min-width: 1024px) {
  body:has(.cat-blog-page) .footer--cat::before, body:has(.cat-blog-detail-page) .footer--cat::before {
    top: 282px !important;
    height: calc(100% - 282px) !important;
  }
}
.footer--cat .footer__main {
  padding-bottom: 15px;
}
.footer--cat .footer__wave {
  width: 100%;
  line-height: 0;
  background-color: #664242;
  -webkit-mask-image: url("./img/cat/wave.webp");
  mask-image: url("./img/cat/wave.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleX(-1);
  margin-bottom: -1px;
}
@media (min-width: 1024px) {
  .footer--cat .footer__wave {
    height: 282px;
  }
}
.footer--cat .footer__wave-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1000/260;
  display: block;
}
@media (min-width: 1024px) {
  .footer--cat .footer__wave-img {
    height: 282px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.footer--cat .footer__slogan-wrapper,
.footer--cat .footer__main {
  background-color: #664242;
}
.footer--cat .footer__slogan-wrapper {
  transform: none !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 16px 20px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .footer--cat .footer__slogan-wrapper {
    max-width: none !important;
    margin-top: 0;
    margin-bottom: 0 !important;
  }
}
.footer--cat .footer__slogan-img-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
@media (min-width: 1024px) {
  .footer--cat .footer__slogan-img-wrapper {
    gap: 16px;
    margin-top: -220px;
  }
}
.footer--cat .footer__slogan-img {
  height: auto;
  display: block;
}
.footer--cat .footer__slogan-img--1 {
  width: 75%;
  max-width: 440px;
  align-self: flex-start;
}
.footer--cat .footer__slogan-img--2 {
  width: 75%;
  max-width: 440px;
  align-self: flex-end;
}
.footer--cat .footer__slogan-img--sp {
  display: block;
}
@media (min-width: 1024px) {
  .footer--cat .footer__slogan-img--sp {
    display: none !important;
  }
}
.footer--cat .footer__slogan-img--pc {
  display: none;
}
@media (min-width: 1024px) {
  .footer--cat .footer__slogan-img--pc {
    display: block !important;
    width: 75.915vw !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}
.footer--cat .footer__nav-link,
.footer--cat .footer__nav-sublink,
.footer--cat .footer__office-tel-fax,
.footer--cat .footer__office-address,
.footer--cat .footer__copyright,
.footer--cat .footer__office-tel-fax--stacked .footer__office-tel,
.footer--cat .footer__office-tel-fax--stacked .footer__office-fax,
.footer--cat .footer__office--hirono .footer__office-tel-fax,
.footer--cat .footer__office--hirono .footer__office-address {
  color: #ffffff !important;
}
.footer--cat .footer__nav-link::after {
  background-color: #ffffff !important;
}
.footer--cat .footer__nav-link:hover {
  color: #fadbda !important;
}
.footer--cat .footer__nav-sublink:hover {
  color: #fadbda !important;
}
.footer--cat .footer__sns-link svg {
  fill: #ffffff !important;
}
.footer--cat .footer__sns-link:hover svg {
  fill: #fadbda !important;
}
.footer--cat .footer__sns-icon-img {
  width: 40px !important;
  height: 40px !important;
  display: block;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.footer--cat .footer__sns-link:hover .footer__sns-icon-img {
  transform: scale(1.18) rotate(6deg);
}
.footer--cat .footer__office-label--honsha {
  background-color: #fadbda !important;
  color: #664242 !important;
}
.footer--cat .footer__office-label--hirono {
  background-color: #fff5d8 !important;
  color: #664242 !important;
}
.footer--cat .footer__btn {
  background-color: #fff5d8 !important;
  color: #664242 !important;
}
.footer--cat .footer__btn .footer__btn-arrow {
  border-top-color: #664242 !important;
  border-right-color: #664242 !important;
}
.footer--cat .footer__btn:hover {
  background-color: #ffffff !important;
  color: #664242 !important;
  border-color: #ffffff !important;
}
.footer--cat .footer__logo a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: #ffffff !important;
  width: 282px !important;
  height: 51px !important;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .footer--cat .footer__logo a {
    width: 344px !important;
    height: 62px !important;
  }
}
.footer--cat .footer__logo .footer__logo-img {
  width: auto !important;
  height: 28px !important;
  max-width: 90% !important;
  display: block;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .footer--cat .footer__logo .footer__logo-img {
    height: 34px !important;
  }
}

/* ==========================================================================
   Cat Page Back To Top Button Style
   ========================================================================== */
.cat-page-topbtn {
  position: fixed;
  bottom: 62px;
  right: 16px;
  width: 50px;
  height: 50px;
  z-index: 9999 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
@media (min-width: 1024px) {
  .cat-page-topbtn {
    bottom: 80px;
    width: 80px;
    height: 80px;
  }
}
.cat-page-topbtn img {
  width: 100%;
  height: 100%;
  display: block;
}
.cat-page-topbtn.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}
.cat-page-topbtn:hover {
  transform: translateY(-6px) scale(1.05);
}

/* ==========================================================================
   Cat Speech Bubble Styles (ブログ用吹き出し)
   ========================================================================== */
.cat-bubble-chat {
  display: flex;
  margin-bottom: 32px;
  align-items: flex-start; /* 頭合わせにするため上揃えに変更 */
  width: 100%;
  gap: 28px; /* SPデフォルト: 28px */
}
@media (min-width: 1024px) {
  .cat-bubble-chat {
    gap: 72px; /* PC: 矢印幅が48pxのため、隙間72pxにして先端余白を24pxにする */
  }
}
.cat-bubble-chat .cat-bubble-avatar {
  width: 75px !important;
  height: 75px !important;
  text-align: center;
  flex-shrink: 0;
  margin-top: 24px; /* 猫の顔の上に 24px の余白を追加 */
}
.cat-bubble-chat .cat-bubble-avatar .wp-block-image,
.cat-bubble-chat .cat-bubble-avatar figure {
  width: 75px !important;
  height: 75px !important;
  margin: 0 !important;
}
.cat-bubble-chat .cat-bubble-avatar img {
  width: 75px !important;
  height: 75px !important;
  border-radius: 50% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border: 1px solid #664242 !important;
  display: block !important;
  margin: 0 auto !important;
}
.cat-bubble-chat .cat-bubble-avatar .cat-bubble-name {
  display: none; /* デザインに合わせて名前非表示 */
}
.cat-bubble-chat .cat-bubble-content {
  max-width: 75%;
  position: relative;
}
.cat-bubble-chat .cat-bubble-text {
  padding: 24px 32px;
  background: #ffffff; /* 白背景 */
  border: 1px solid #664242; /* 茶色線 1px */
  border-radius: 24px;
  font-size: 16px; /* フォントサイズ 16px */
  color: #664242; /* 茶色文字 */
  line-height: 1.8;
  margin: 0 !important;
  position: relative;
  font-family: "Zen Maru Gothic", sans-serif;
  min-height: 96px; /* 1行の時に矢印がはみ出たりデザインが崩れるのを防ぐための最小高 */
}
.cat-bubble-chat {
  /* 左から出る吹き出し (こう) */
}
.cat-bubble-chat.bubble-left {
  flex-direction: row;
}
.cat-bubble-chat.bubble-left .cat-bubble-text::before {
  content: "";
  position: absolute;
  top: 51px; /* 24px(顔の上余白) + 37.5px(顔中心) - 10px(矢印半高) ≒ 51px に移動 */
  left: -24px; /* SP: 1px外側に移動（食い込み調整） */
  width: 24px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><path d="M24,0.5 L1,10 L24,19.5" fill="%23fff" stroke="%23664242" stroke-width="1"/></svg>');
  z-index: 1;
}
@media (min-width: 1024px) {
  .cat-bubble-chat.bubble-left .cat-bubble-text::before {
    left: -48px; /* PC: 1px外側に移動（食い込み調整） */
    width: 48px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20"><path d="M48,0.5 L1,10 L48,19.5" fill="%23fff" stroke="%23664242" stroke-width="1"/></svg>');
  }
}
.cat-bubble-chat {
  /* 右から出る吹き出し (ふく) */
}
.cat-bubble-chat.bubble-right {
  flex-direction: row-reverse;
}
.cat-bubble-chat.bubble-right .cat-bubble-content {
  margin-left: 0;
}
.cat-bubble-chat.bubble-right .cat-bubble-text::before {
  content: "";
  position: absolute;
  top: 51px; /* 24px(顔の上余白) + 37.5px(顔中心) - 10px(矢印半高) ≒ 51px に移動 */
  right: -24px; /* SP: 1px外側に移動（食い込み調整） */
  width: 24px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><path d="M0,0.5 L23,10 L0,19.5" fill="%23fff" stroke="%23664242" stroke-width="1"/></svg>');
  z-index: 1;
}
@media (min-width: 1024px) {
  .cat-bubble-chat.bubble-right .cat-bubble-text::before {
    right: -48px; /* PC: 1px外側に移動（食い込み調整） */
    width: 48px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20"><path d="M0,0.5 L47,10 L0,19.5" fill="%23fff" stroke="%23664242" stroke-width="1"/></svg>');
  }
}

/**
 * Cat Blog Page Stylesheet
 */
.cat-blog-page {
  padding-top: 0px; /* モバイルヘッダー分の余白 */
  padding-bottom: 0px;
  background: url("./img/cat/background_tile.jpg") repeat, #fff5d8;
  position: relative;
}
@media (min-width: 1024px) {
  .cat-blog-page {
    padding-top: 80px; /* PCヘッダー分の余白 */
  }
}
.cat-blog-page {
  /* パンくず・上部ナビゲーション */
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-nav {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.cat-blog-page .cat-blog-nav__inner {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-nav__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.cat-blog-page .cat-blog-nav {
  /* パンくずリストの上書き（猫ページ用） */
}
.cat-blog-page .cat-blog-nav .breadcrumb {
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  font-family: "Noto Sans JP", sans-serif !important;
}
.cat-blog-page .cat-blog-nav .breadcrumb,
.cat-blog-page .cat-blog-nav .breadcrumb span,
.cat-blog-page .cat-blog-nav .breadcrumb a,
.cat-blog-page .cat-blog-nav .breadcrumb span *,
.cat-blog-page .cat-blog-nav .breadcrumb a * {
  color: #664242 !important; /* ブラウン（#664242）にする */
}
.cat-blog-page .cat-blog-nav .breadcrumb__inner {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  padding-inline: 0 !important;
}
.cat-blog-page .cat-blog-nav .breadcrumb__inner a {
  text-decoration: none !important;
  transition: color 0.3s ease;
}
.cat-blog-page .cat-blog-nav .breadcrumb__inner a:hover {
  color: #d90505 !important;
  text-decoration: underline !important;
}
.cat-blog-page .cat-blog-nav .breadcrumb__separator {
  margin: 0 8px !important;
}
.cat-blog-page .cat-blog-nav .breadcrumb__current {
  font-weight: 700 !important;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-nav .breadcrumb {
    position: absolute;
    top: 110px; /* PCロゴ（ヘッダー）の少し下に配置 */
    left: 30px; /* 左余白 30px */
    z-index: 8;
  }
}
.cat-blog-page .cat-blog-nav__buttons {
  display: none;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-nav__buttons {
    display: flex;
    -moz-column-gap: 24px;
         column-gap: 24px;
    position: absolute;
    top: 74px; /* ナビゲーション（ヘッダー高さ80px相当）の下16px */
    right: 16px; /* 右から16px */
    z-index: 10;
  }
}
.cat-blog-page .cat-blog-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 127px;
  height: 38px;
  background-color: #ffffff;
  border: 1.5px solid #664242;
  border-radius: 19px;
  color: #664242;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  font-family: "Noto Sans JP", sans-serif;
}
.cat-blog-page .cat-blog-nav__btn:hover, .cat-blog-page .cat-blog-nav__btn.is-active {
  background-color: #fff5d8;
  color: #664242;
}
.cat-blog-page {
  /* タイトルエリア */
}
.cat-blog-page .cat-blog-title-area {
  text-align: center;
  padding-top: 76px;
  padding-bottom: 60px;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-title-area {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
.cat-blog-page .cat-blog-title-area .cat-blog-title {
  font-size: 16px;
  font-weight: 700;
  color: #664242;
  margin: 0;
  position: relative;
  display: inline-block;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.cat-blog-page .cat-blog-list-sec {
  padding-bottom: 140px;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-list-sec {
    padding-bottom: 140px;
  }
}
.cat-blog-page .cat-blog-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-container {
    max-width: 1092px;
    padding: 0 20px;
  }
}
.cat-blog-page .cat-blog-layout {
  display: block;
}
.cat-blog-page .cat-blog-main {
  width: 100%;
}
.cat-blog-page .cat-blog-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media (min-width: 768px) {
  .cat-blog-page .cat-blog-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-list-grid {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 36px;
         column-gap: 36px;
    row-gap: 30px;
  }
}
.cat-blog-page {
  /* ブログカード */
}
.cat-blog-page .cat-blog-card {
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #664242;
  transition: box-shadow 0.3s ease;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-card {
    max-width: none;
    margin: unset;
  }
}
.cat-blog-page .cat-blog-card:hover .cat-blog-card__img {
  transform: scale(1.15);
}
.cat-blog-page .cat-blog-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cat-blog-page .cat-blog-card__img-wrapper {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: #f5f5f5;
}
.cat-blog-page .cat-blog-card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  display: block;
  transform: scale(1.08);
}
.cat-blog-page .cat-blog-card__content {
  padding: 16px 16px 32px;
}
.cat-blog-page .cat-blog-card__date {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #664242; /* brown */
  font-family: "Montserrat", sans-serif;
  margin-bottom: 8px;
}
.cat-blog-page .cat-blog-card__category-wrap {
  margin-bottom: 12px;
}
.cat-blog-page .cat-blog-card__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 28px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 400;
  color: #ffffff;
  background-color: #664242; /* brown */
  border-radius: 14px;
  line-height: 1;
}
.cat-blog-page .cat-blog-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #664242;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-blog-page .cat-blog-card__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #664242;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-blog-page .cat-blog-card__more {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: #bd7d4a;
  font-weight: 700;
  transition: color 0.3s ease;
}
.cat-blog-page .cat-blog-card__more:hover {
  color: #d90505;
}
.cat-blog-page {
  /* 専用ページネーション */
}
.cat-blog-page .cat-pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination {
    margin-top: 140px;
  }
}
.cat-blog-page .cat-pagination .pagination {
  display: block;
  width: 100%;
}
.cat-blog-page .cat-pagination .nav-links {
  display: flex;
  flex-direction: column; /* 「前へ」「次へ」と「数字」を縦並びにするための基準 */
  align-items: center;
  gap: 24px;
  width: 100%;
}
.cat-blog-page .cat-pagination {
  /* 「前へ」「次へ」をまとめるコンテナ用疑似ラッパー（plain outputでのflex折り返し制御） */
}
.cat-blog-page .cat-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px; /* サンプルのサイズ 54x54 に合わせる */
  height: 54px;
  padding: 0 4px;
  border-radius: 50%;
  border: 1px solid #664242;
  background-color: #ffffff;
  color: #664242;
  font-size: 16px; /* 16pxに変更 */
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  order: 2; /* 通常の数字ボタンは下段に配置 */
  font-family: "Zen Maru Gothic", sans-serif;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination .page-numbers {
    min-width: 54px;
    height: 54px;
    font-size: 16px;
    order: unset; /* PCでは元の並び順に戻す */
  }
}
.cat-blog-page .cat-pagination .page-numbers.current {
  border-color: #664242;
  background-color: #ffffff;
  color: #664242;
  cursor: default;
}
.cat-blog-page .cat-pagination .page-numbers:not(.current):hover {
  background-color: #fadbda;
  color: #664242;
}
.cat-blog-page .cat-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  cursor: default;
  min-width: 24px;
  height: 54px; /* 他の数字ボタンと同じ高さにする */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px; /* 「...」文字を円の垂直中心に引き下げる微調整 */
}
.cat-blog-page .cat-pagination .page-numbers.prev, .cat-blog-page .cat-pagination .page-numbers.next {
  border: none;
  background: transparent;
  border-radius: 0;
  min-width: auto;
  height: auto;
  padding: 0;
  color: #664242;
  font-size: 16px; /* 16pxに変更 */
  font-weight: 700;
  order: 1; /* 「前へ」「次へ」を上段に配置 */
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination .page-numbers.prev, .cat-blog-page .cat-pagination .page-numbers.next {
    font-size: 16px;
    order: unset; /* PCでは元の並び順に戻す */
  }
}
.cat-blog-page .cat-pagination .page-numbers.prev:hover, .cat-blog-page .cat-pagination .page-numbers.next:hover {
  background: transparent;
  color: #d90505;
}
.cat-blog-page .cat-pagination .page-numbers.prev {
  /* 左寄せ/右寄せで前へ・次へを配置するためのマージン制御 */
}
@media (max-width: 1023px) {
  .cat-blog-page .cat-pagination .page-numbers.prev {
    margin-right: auto;
  }
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination .page-numbers.prev {
    margin-right: 64px !important;
  }
}
@media (max-width: 1023px) {
  .cat-blog-page .cat-pagination .page-numbers.next {
    margin-left: auto;
  }
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination .page-numbers.next {
    margin-left: 64px !important;
  }
}
.cat-blog-page .cat-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 50px; /* 上部に前へ・次へのスペースを作る */
  gap: 16px; /* column gap 16px に変更 */
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination .nav-links {
    padding-top: 0;
    flex-wrap: nowrap;
    gap: 16px;
  }
}
@media (max-width: 1023px) {
  .cat-blog-page .cat-pagination .nav-links .page-numbers.prev,
  .cat-blog-page .cat-pagination .nav-links .page-numbers.next {
    position: absolute;
    top: 0;
  }
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination .nav-links .page-numbers.prev,
  .cat-blog-page .cat-pagination .nav-links .page-numbers.next {
    position: static;
    transform: none !important;
  }
}
@media (max-width: 1023px) {
  .cat-blog-page .cat-pagination .nav-links .page-numbers.prev {
    left: 50%;
    transform: translateX(calc(-100% - 36px)); /* 中央から左に36px寄せる (間隔72pxの半分) */
  }
}
@media (max-width: 1023px) {
  .cat-blog-page .cat-pagination .nav-links .page-numbers.next {
    left: 50%;
    right: auto;
    transform: translateX(36px); /* 中央から右に36px寄せる (間隔72pxの半分) */
  }
}
.cat-blog-page .cat-pagination__prev-inner, .cat-blog-page .cat-pagination__next-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 間隔 16px */
  font-size: 16px; /* 16px */
  color: #664242;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif; /* zenmaruに変更 */
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination__prev-inner, .cat-blog-page .cat-pagination__next-inner {
    font-size: 16px;
    gap: 16px;
  }
}
.cat-blog-page .cat-pagination__footprint {
  width: 25px; /* 25pxに変更 */
  height: 25px; /* 25pxに変更 */
  display: inline-block;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-pagination__footprint {
    width: 25px;
    height: 25px;
  }
}

/* ==========================================================================
   Cat Blog Detail Section Styles
   ========================================================================== */
.cat-blog-page .cat-blog-detail-sec {
  padding-bottom: 140px;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-article {
  background: transparent;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-header {
  text-align: left;
  max-width: 700px;
  margin: 0 auto 40px;
  padding-top: 76px;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-header {
    margin-bottom: 30px;
    padding-top: 90px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-date {
  display: block;
  font-size: 12px;
  color: #664242;
  font-family: "Zen Maru Gothic", sans-serif;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: #664242;
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-title {
    font-size: 24px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-img-wrapper {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 30px;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content {
  max-width: 700px;
  margin: 0 auto 60px;
  font-size: 16px;
  line-height: 2;
  color: #664242;
  font-weight: 400;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content p {
  margin-bottom: 24px;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content p {
    margin-bottom: 30px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content figure {
  margin: 0 0 30px;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content figure img {
  width: 100%;
  height: auto;
  display: block;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h2,
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h3,
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h4,
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h5,
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h6 {
  font-weight: 700;
  line-height: 1.4;
  margin: 40px 0 20px;
  color: #664242;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h2 {
  font-size: 20px;
  padding: 14px 20px;
  background-color: #fff5d8; /* 猫テーマの薄黄色 */
  border-left: 4px solid #664242; /* 猫テーマのブラウン */
  border-bottom: 1px solid #fadbda;
  border-radius: 0 6px 6px 0;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h2 {
    font-size: 24px;
    padding: 16px 24px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h3 {
  font-size: 18px;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #fadbda;
  letter-spacing: 0.08em;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h3::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #bd7d4a; /* 猫テーマのゴールドブラウン */
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h3 {
    font-size: 20px;
    padding-bottom: 12px;
  }
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h3::after {
    width: 60px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h4 {
  font-size: 16px;
  border-left: 3px solid #bd7d4a; /* ゴールドブラウン */
  padding-left: 10px;
  letter-spacing: 0.08em;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h4 {
    font-size: 18px;
    padding-left: 12px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h5 {
  font-size: 15px;
  border-left: 2px solid #fadbda; /* ライトピンクブラウン */
  padding-left: 8px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h5 {
    font-size: 16px;
    padding-left: 10px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h6 {
  font-size: 14px;
  border-bottom: 1px dotted #fadbda;
  padding-bottom: 4px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content h6 {
    font-size: 15px;
    padding-bottom: 6px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content ul,
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content ol {
  margin: 0 0 24px;
  padding-left: 20px;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content li {
  margin-bottom: 8px;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-content li:last-child {
  margin-bottom: 0;
}
.cat-blog-page .cat-blog-detail-sec {
  /* 猫の吹き出し（speech bubble） */
}
.cat-blog-page .cat-blog-detail-sec .cat-speech {
  display: flex;
  align-items: center;
  gap: 57px;
  margin-bottom: 30px;
  width: 100%;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech--left {
  flex-direction: row;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech--left .cat-speech__bubble::before {
  left: -30px;
  border-width: 10px 30px 10px 0;
  border-color: transparent #664242 transparent transparent;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech--left .cat-speech__bubble::after {
  left: -28.5px;
  border-width: 10px 30px 10px 0;
  border-color: transparent #ffffff transparent transparent;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech--right {
  flex-direction: row-reverse;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech--right .cat-speech__bubble::before {
  right: -30px;
  border-width: 10px 0 10px 30px;
  border-color: transparent transparent transparent #664242;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech--right .cat-speech__bubble::after {
  right: -28.5px;
  border-width: 10px 0 10px 30px;
  border-color: transparent transparent transparent #ffffff;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech__avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid #664242;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech__bubble {
  background-color: #ffffff;
  border: 1.5px solid #664242;
  border-radius: 20px;
  padding: 25px 30px;
  position: relative;
  max-width: calc(100% - 132px);
  box-sizing: border-box;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech__bubble p {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: #664242;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech__bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
}
.cat-blog-page .cat-blog-detail-sec .cat-speech__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
}
.cat-blog-page .cat-blog-detail-sec {
  /* ページネーション（前後記事） */
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav {
  margin-top: 60px;
}
@media (min-width: 1024px) {
  .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav {
    margin-top: 140px;
  }
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__prev, .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__next {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #664242;
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__prev:hover, .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__next:hover {
  color: #d90505;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__prev.is-disabled, .cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__next.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__prev {
  margin-right: 40px;
  gap: 16px;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__next {
  margin-left: 40px;
  gap: 16px;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__footprint {
  width: 25px;
  height: 25px;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 53px;
  border-radius: 26.5px;
  border: 1px solid #664242;
  background-color: #ffffff;
  color: #664242;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s ease;
}
.cat-blog-page .cat-blog-detail-sec .cat-blog-detail-nav__back-link:hover {
  background-color: #fadbda;
}

/* ==========================================================================
   404 Error Page Styles (404エラーページ専用スタイル)
   ========================================================================== */
.error-page .error-sec {
  padding: 80px 0 140px;
  background-color: #f5f5f5;
}
@media (min-width: 1024px) {
  .error-page .error-sec {
    padding: 100px 0 180px;
  }
}
.error-page .error-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.error-page .error-content {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}
@media (min-width: 1024px) {
  .error-page .error-content {
    padding: 60px 40px;
  }
}
.error-page .error-title {
  font-size: 20px;
  font-weight: 700;
  color: #05337e;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .error-page .error-title {
    font-size: 24px;
    margin-bottom: 30px;
  }
}
.error-page .error-text {
  font-size: 15px;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .error-page .error-text {
    font-size: 16px;
    margin-bottom: 50px;
  }
}
.error-page .error-btn-wrap {
  display: flex;
  justify-content: center;
}
.error-page .error-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  height: 56px;
  background-color: #05337e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(5, 51, 126, 0.15);
}
.error-page .error-btn:hover {
  background-color: #28bada;
  box-shadow: 0 4px 16px rgba(40, 186, 218, 0.25);
  color: #ffffff;
  transform: translateY(-2px);
}/*# sourceMappingURL=style.css.map */