@charset "UTF-8";

/* ====================================
   基本設定・共通項目
   ==================================== */
:root {
  --main-color: #0f2540;
  --accent-color: #9c1a1a;
  --text-color: #333333;
  --bg-gray: #f4f7f9;
  --white: #ffffff;
  
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Oswald', sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
::selection {
  background-color: var(--accent-color);
  color: var(--white);
}
html{
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-jp);
  color: var(--text-color);
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin: 0;
  background-color: var(--white);
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

/* ====================================
   2. ヘッダー
   ==================================== */
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1200;
  background-color: rgba(10, 25, 45, 0.95);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  backdrop-filter: blur(5px);
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
}
#logo {
  display: flex;
  align-items: center; /* 縦方向中央 */
  line-height: 1;      /* 行間による余計な余白をリセット */
}
#logo img {
  display: block;      /* インライン要素特有の隙間を排除 */
  height: 40px;        /* PCサイズ */
  transform: translateY(3px);
}
#nav-pc ul {
  display: flex;
  list-style: none;
  gap: 30px;
  margin: 0;
  padding: 0;
}
#nav-pc a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}
#nav-pc a:hover {
  color: var(--accent-color);
}
#nav-pc a span {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--accent-color);
  margin-bottom: 2px;
  letter-spacing: 0.1em;
  transition: 0.3s;
}
#nav-pc a:hover span {
  opacity: 0.8;
}


/* ====================================
   フッター
   ==================================== */
footer {
    background-color: #222;
    color: #fff;
    padding: 80px 0 30px;
    font-family: 'Noto Sans JP', sans-serif;
}
.footer-inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.footer-left {
    width: 45%;
}
.footer-logo img {
    width: 240px;
    margin-bottom: 30px;
}
.footer-company-info p {
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #ccc;
    font-weight: 400;
}
.footer-company-info .footer-name {
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 15px;
}
.map-link-btn {
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    transition: 0.3s;
}
.map-link-btn:hover {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.footer-copy {
    margin-top: 60px;
    font-size: 0.7rem;
    color: #666;
    font-family: var(--font-en);
    letter-spacing: 0.05em;
}
.footer-right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
}
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav li {
    margin-bottom: 25px;
    text-align: right;
}
.footer-nav li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    position: relative;
}
.footer-nav li a:hover {
    color: var(--accent-color);
    transform: translateX(-10px);
}


/* ====================================
   SPナビ & アニメーション設定
   ==================================== */
#nav-sp-btn {
  display: none;
  position: relative;
  width: 30px;
  height: 24px;
  cursor: pointer;
  z-index: 1001;
}
#nav-sp-btn span {
  position: absolute;
  left: 0; width: 100%; height: 2px;
  background-color: #fff;
  transition: all 0.3s;
}
#nav-sp-btn span:nth-child(1) { 
  top: 0; 
}
#nav-sp-btn span:nth-child(2) { 
  top: 11px; 
}
#nav-sp-btn span:nth-child(3) { 
  bottom: 0; 
}
#nav-sp-btn.active span:nth-child(1) { 
  top: 11px; 
  transform: rotate(45deg); 
}
#nav-sp-btn.active span:nth-child(2) { 
  opacity: 0; 
}
#nav-sp-btn.active span:nth-child(3) { 
  bottom: 11px; 
  transform: rotate(-45deg); 
}

/* SPメニュー本体 */
#nav-sp {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100vh;
  background-color: var(--main-color);
  z-index: 1000;
  display: flex;
  visibility: hidden; 
  opacity: 0;
  transition: all 0.3s ease;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#nav-sp.active {
  visibility: visible;
  opacity: 1;
}
#nav-sp .nav-sp-logo { 
  margin-bottom: 40px; 
}
#nav-sp .nav-sp-logo img { 
  width: 200px; 
}
#nav-sp ul { 
  list-style: none; 
  padding: 0; 
  text-align: center; 
}
#nav-sp ul li { 
  margin-bottom: 20px; 
}
#nav-sp ul li a { 
  color: #ffffff; 
  font-size: 1.2rem; 
  font-weight: 700; 
}


/* ====================================
   トップページ（メインビジュアル）
   ==================================== */
.main-visual {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 5px solid var(--accent-color);
}
.mv-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.mv-bg-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv-bg-container::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.mv-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mv-text-vertical {
  writing-mode: vertical-rl; 
  font-family: var(--font-jp);
  color: var(--white);
  height: 60vh;
  line-height: 2; 
}
.mv-copy-main {
  font-size: 3.5rem;
  font-weight: 900;
  margin-left: 40px;
  letter-spacing: 0.1em;
}
.mv-copy-sub {
  font-size: 1.1rem;
  font-weight: 700;
  margin-left: 40px;
  border-right: 2px solid var(--accent-color);
  padding-right: 20px;
  color: var(--white);
  line-height: 1.8;
  display: flex;   
  justify-content: flex-end;
  height: 100%;
}

/* ====================================
   トップページ（セクション共通レイアウト）
   ==================================== */
.section-layout {
  position: relative;
  padding: 150px 0;
  overflow: hidden;
}
.bg-text {
  position: absolute;
  top: 20px;
  left: 40px;
  font-family: var(--font-en);
  font-size: 15rem;
  font-weight: 700;
  color: rgba(15, 37, 64, 0.07); 
  z-index: 0;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.bg-text.right {
  left: auto;
  right: 40px;
  text-align: right;
}
.content-wrapper {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.image-area {
  width: 55%;
  position: relative;
}
.image-area::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  border: 3px solid var(--accent-color);
  z-index: 0;
}
.image-area img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  border: 1px solid #ddd;
}
.text-area {
  width: 40%;
  background: var(--white);
  padding: 60px;
  margin-left: -20px;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.section-sub-title {
  display: block;
  font-family: var(--font-en);
  color: var(--accent-color);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 15px;
}
.section-title {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 30px;
  color: var(--main-color);
  border-bottom: none;
}
.text-body {
  font-size: 1rem;
  margin-bottom: 40px;
  color: #555;
  line-height: 2;
}
.link-btn-arrow {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--main-color);
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 5px;
}
.link-btn-arrow::after {
  content: "→";
  margin-left: 15px;
  color: var(--accent-color);
  transition: transform 0.3s;
}
.link-btn-arrow:hover::after {
  transform: translateX(10px);
}

/* ====================================
   トップページ（Worksセクション専用（3カラム））
   ==================================== */
.works-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.works-header {
  max-width: 700px;
  margin-bottom: 60px;
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}
.work-card {
  display: block;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  border-top: 3px solid transparent;
}
.work-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border-top: 3px solid var(--accent-color);
}
.card-img {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.work-card:hover .card-img img {
  transform: scale(1.1);
}
.card-num {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent-color);
  color: #fff;
  font-family: var(--font-en);
  padding: 5px 15px;
  font-size: 1.2rem;
  font-weight: 700;
}
.card-txt {
  padding: 25px;
}
.card-txt h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--main-color);
  border-bottom: 1px solid var(--accent-color);
  padding-bottom: 10px;
}
.card-txt p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
}
.works-btn-area {
  display: flex;
  justify-content: center; 
  margin-top: 60px;
  width: 100%;
}


/* ====================================
   TOP PAGE SPECIFIC (index.html)
   ==================================== */
.about_us .image-area,
.company .image-area {
  width: 35%;
  position: relative;
}
.about_us .text-area,
.company .text-area {
  width: 60%;
  margin-left: 0;
  background: var(--white);
  padding: 60px;
  position: relative;
  z-index: 2;
}
.works-header {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 60px;
}
.about_us .content-wrapper,
.company .content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ====================================
   トップページ（Contactセクション）
   ==================================== */
.contact {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 150px 0;
  margin-top: 100px;
  background-image: url('/image/hero.JPG'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.contact::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(15, 37, 64, 0.85);
    z-index: 1;
}
.contact-inner {
  position: relative;
  z-index: 2;
}
.contact-title {
  font-family: var(--font-en);
  font-size: 3.5rem;
  margin-bottom: 5px;
  color: var(--accent-color);
}
.contact-sub {
    font-weight: 700;
    margin-bottom: 30px;
}
.contact-text {
  margin: 30px auto;
  max-width: 600px;
}
.link-btn-style {
  display: inline-block;
  padding: 20px 60px;
  background: var(--accent-color);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  position: relative;
  z-index: 2;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
}
.link-btn-style:hover {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  margin-bottom: 10px;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border: 2px solid var(--accent-color);
  background-color: #fffbfb;
}



/* ====================================
   下層ページ共通スタイル
   ==================================== */
.page-header {
  height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  overflow: hidden;
}
.page-header-bg {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  z-index: 0;
}
.page-header-bg img {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  opacity: 0.4;
  object-position: center 35% !important;
}
.page-about .page-header-bg img { 
  object-position: center 25%; 
}
.page-works .page-header-bg img { 
  object-position: 40% 25%; 
}
.page-header-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.page-title {
  font-family: var(--font-en);
  font-size: 4rem;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}
.page-sub {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-color);
}
.section-title-center {
  text-align: center;
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 50px;
}
.section-bg-gray {
  background-color: var(--bg-gray);
  padding: 100px 0;
}
.display-block {
  display: block !important;
}

/* ====================================
   About Us / Works ページ共通パーツ
   ==================================== */
.about-message .section-title,
.works-name .section-title {
  font-size: 1.8rem;
}
.static-card {
  cursor: default !important;
}
.static-card:hover {
  transform: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
  border-top-color: transparent !important;
}
.static-card .card-txt h3,
.card-title-accent {
  color: var(--accent-color) !important;
  border-bottom-color: var(--accent-color) !important;
}
.check-list {
  list-style: none; 
  padding: 0; 
  margin-top: 20px;
}
.check-list li {
  position: relative; 
  padding-left: 25px; 
  margin-bottom: 10px;
  font-weight: 700; 
  color: var(--main-color);
}
.check-list li::before {
  content: '✔'; 
  position: absolute; 
  left: 0; 
  color: var(--accent-color);
}

/* ====================================
   WORKSページ：タブ＆アコーディオン
   ==================================== */
.section-layout.works-name {
  padding: 50px 0;
}
.works-name .content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.works-name .image-area {
  width: 40%;
  position: relative;
}
.works-name .image-area img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.works-name .image-area::before {
  top: 15px;
  left: 15px;
  border-width: 2px;
}
.works-name .text-area {
  width: 53%;
  background: var(--white);
  padding: 35px 45px;
  margin-left: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border-radius: 8px;
}
.works-name .section-title {
  font-size: 1.8rem;
  margin-bottom: 15px;
}
.works-name .text-body {
  font-size: 0.95rem; 
  margin-bottom: 20px;
  line-height: 1.7;
}
.works-name .check-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 20px;
}
.works-name .text-body {
  margin-bottom: 25px;
}
.works-tab-wrapper {
  background-color: var(--white);
  padding: 40px 0;
  position: sticky;
  top: 70px;
  z-index: 100;
}
.works-tab-nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-item {
  flex: 1;
  max-width: 200px;
  padding: 15px 10px 25px;
  background-color: #f4f7f9;
  border: 2px solid var(--main-color);
  border-radius: 8px;
  color: var(--main-color);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden; 
  transition: all 0.2s ease;
}
.tab-item::after {
  content: "";
  position: absolute;
  bottom: 0; 
  left: 0;  
  right: 0;  
  height: 10px; 
  background-color: var(--main-color);
  transition: background-color 0.2s ease;
}
.tab-item.active {
  background-color: #ffffff; 
  color: var(--accent-color); 
  border-color: var(--main-color);
  box-shadow: 0 10px 25px rgba(15, 37, 64, 0.15);
  transform: translateY(-3px);
  z-index: 2;
}
.tab-item.active::after {
  background-color: var(--accent-color);
}
.tab-panel {
  display: none !important;
}
.tab-panel.active {
  display: block !important;
}
.accordion-header {
  display: none;
}

/* ====================================
   Company (CEO Message) ページ専用
   ==================================== */
.ceo-message .text-area {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.ceo-message .text-area .section-title {
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
.ceo-message .section-sub-title {
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.ceo-signature {
  text-align: right;
  font-weight: 700;
  margin-top: 30px;
  font-size: 1.1rem;
}
.table-container {
  background: #fff; 
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.company-table {
  width: 100%; 
  border-collapse: collapse; 
  border-top: 1px solid #eee;
}
.company-table th, .company-table td {
  padding: 25px; 
  border-bottom: 1px solid #eee; 
  text-align: left;
}
.company-table th {
  width: 25%; 
  background-color: var(--bg-gray);
  font-weight: 700; 
  color: var(--main-color);
}
.section-access { 
  padding: 100px 0; 
}
.map-container {
  width: 90%; 
  max-width: 1200px; 
  margin: 0 auto;
}

/* ====================================
   Contact ページ専用
   ==================================== */
.contact-page-section { 
  padding: 100px 0; 
}
.form-wrapper { 
  max-width: 800px; 
}
.tel-info-box {
  background: #fff; 
  padding: 40px 30px; 
  margin: 0 auto 50px;
  max-width: 600px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
  text-align: center;
}
.tel-lead-text { 
  margin-bottom: 25px;
  font-size: 0.95rem; 
}
.tel-number-display {
  border: 2px solid var(--accent-color);
  padding: 20px; 
  display: block; 
  width: 100%;
}
.tel-label {
  font-family: var(--font-en); 
  color: var(--accent-color);
  font-weight: 700; 
  font-size: 2.6rem; 
  margin-bottom: 0;
}
.tel-number {
  font-family: var(--font-en); 
  font-size: 2.2rem; 
  font-weight: 700;
  line-height: 1.2; 
  margin-bottom: 5px; 
  color: var(--main-color);
}
.tel-hours { 
  font-size: 0.8rem; 
  color: #666; 
}
.tel-link {
  color: inherit;       /* 親要素（.tel-number）の色を継承 */
  text-decoration: none; /* 下線を消す */
  transition: opacity 0.3s;
}
.tel-link:active,
.tel-link:hover {
  opacity: 0.7;
}

.contact-form {
  background: #fff; 
  padding: 60px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.form-row { 
  margin-bottom: 25px; 
}
.form-label { 
  font-weight: 700; 
  margin-bottom: 8px; 
  display: block; 
}
.required, .optional {
  color: #ffffff; 
  font-size: 0.7rem; 
  padding: 2px 5px;
  margin-left: 10px; 
  vertical-align: middle;
}
.required { 
  background: var(--accent-color); 
}
.optional { 
  background: #999; 
}
.privacy-policy-inline { 
  margin-top: 50px; 
}
.privacy-policy-inline dl { 
  font-size: 0.9rem; 
  line-height: 1.8; 
}
.privacy-policy-inline dt { 
  font-weight: bold; 
  margin-top: 20px; 
}
.privacy-policy-inline dd { 
  margin: 0 0 10px; 
}
.privacy-policy-inline ul { 
  padding-left: 20px; 
  margin: 5px 0; 
}
.privacy-scroll-box {
  height: 150px; 
  overflow-y: scroll; 
  border: 1px solid #ccc;
  padding: 15px; 
  background: #f9f9f9; 
  font-size: 0.85rem;
}
.privacy-scroll-box > *:first-child {
  margin-top: 0;
}
.privacy-lead { 
  margin-top: 0; 
  margin-bottom: 15px; 
}
.privacy-area { 
  text-align: center; 
  margin: 30px 0; 
}
.privacy-check {
  cursor: pointer; 
  display: inline-flex; 
  align-items: center;
  justify-content: center;
}
.privacy-check input { 
  width: auto !important; 
  margin-right: 10px; 
}
.submit-area { 
  text-align: center; 
}
.submit-btn, 
.contact-form .link-btn-style {
  border: 2px solid var(--accent-color);
  cursor: pointer; 
  width: 100%; 
  max-width: 400px;
}
.contact-form .link-btn-style:hover {
  background-color: #fff;
  color: var(--accent-color) !important;
  border-color: var(--accent-color);
}






/* ======================================================
　 TABLET & SMARTPHONE (1024px以下すべてに適用)
  ★PCからタブレット・スマホへ切り替わる境界線
   ====================================================== */
@media screen and (max-width: 1024px) {

  /* --- 共通コンテナの調整 --- */
  .container,
  .header-inner,
  .content-wrapper,
  .works-container,
  .footer-inner,
  .map-container {
    width: 92%; /* 左右に4%ずつの余裕を確保 */
    max-width: none;
    margin-left: auto;  /* ★追加：左側の余白を自動に */
    margin-right: auto;
  }

  /* --- 1. ヘッダー：PCナビを維持しつつスリム化 --- */
  .header-inner {
    padding: 15px 20px;
  }
  #logo img {
    height: 35px; /* 40pxから微減 */
  }
  #nav-pc ul {
    gap: 18px; /* 30pxから縮小 */
  }
  #nav-pc a {
    font-size: 13px;
  }
  #nav-pc a span {
    font-size: 10px; /* 12pxから2px下げる */
    margin-bottom: 0; /* 下の日本語との隙間をゼロに */
  }

  /* --- 2. メインビジュアル：視認性とインパクトの両立 --- */
  .main-visual {
    height: 105vh; /* PC(100vh)より少し短くし、下の「About Us」をチラ見せしてスクロールを促す */
    border-bottom: 5px solid var(--accent-color);
  }
  .mv-copy-main {
    font-size: 3.4rem; /* 3.5remから微減。縦書きを維持する限界のサイズ */
    margin-left: 40px;
  }

  /* --- 3. セクション共通：余白と背景文字の調整 --- */
  .section-layout {
    padding: 80px 0; /* 150pxから大幅に絞り、リズムを速める */
  }
  .bg-text {
    font-size: 10rem; /* 15remから縮小。背景としての存在感を適正化 */
    top: 10px;
    left: 20px;
    color: rgba(15, 37, 64, 0.05) !important; /* 透明度をさらに下げて可読性を優先 */
  }
  .bg-text.right {
    right: 20px;
  }

  /* --- 4. About Us：レイアウト比率の最適化 --- */
  .about_us .content-wrapper {
    align-items: center;
    gap: 0; /* paddingで調整するためgapは0に */
  }
  .about_us .image-area {
    width: 42%; /* 35%から拡大。写真の迫力を維持 */
  }
  .about_us .text-area {
    width: 55%; /* 60%から微減 */
    padding: 40px; /* 60pxから縮小し、テキストの横幅を確保 */
    margin-left: -30px; /* 画像との重なりを維持して奥行きを出す */
  }
  .section-title {
    font-size: 2rem; /* 2.4remから調整。タブレットで1〜2行に収まるサイズ */
    line-height: 1.4;
  }
  .text-body {
    font-size: 0.95rem; /* 1remから微減 */
    line-height: 1.8;
    margin-bottom: 30px;
  }

  /* --- 6. Contact：余白と文字サイズの適正化 --- */
  .contact {
    padding: 100px 0; /* 150pxから縮小。850px以下は599px版の80pxへ自然に繋ぐ */
    margin-top: 80px; /* 100pxから微減 */
  }
  .contact-title {
    font-size: 2.8rem;
  }
  .contact-text {
    width: 90%;
    max-width: 650px;
    margin: 25px auto 40px;
    font-size: 1rem;
    line-height: 1.8;
  }

  /* --- 7. フッター：レイアウトの微調整とコピーライト中央寄せ --- */
  .footer-flex-wrapper {
    flex-wrap: wrap;
  }
  .footer-left {
    width: 50%;
  }
  .footer-right {
    width: 50%;
    justify-content: flex-end;
  }
  .footer-copy {
    width: 100%;
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* --- 1. 下層ページ共通：ページヘッダー --- */
  .page-header {
    height: 400px;
  }
  .page-title {
    font-size: 3.2rem;
    letter-spacing: 0.15em;
  }
  .page-sub {
    font-size: 1.1rem;
  }

  /* --- 2. About Us ページ：メッセージセクション --- */
  .about-message .content-wrapper {
    align-items: center;
  }
  .about-message .image-area {
    width: 45%;
  }
  .about-message .text-area {
    width: 52%;
    padding: 40px;
    margin-left: -30px;
  }
  .works-name .image-area {
    width: 45%;
  }
  .works-name .text-area {
    width: 52%;
    padding: 30px 35px;
  }
  .works-name .section-title {
    font-size: 1.6rem;
  }
  .works-tab-wrapper {
    padding: 20px 0;
    position: sticky;
    top: 60px;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #eee; /* 境界線を明確に */
  }
  .works-tab-nav {
    display: flex;
    justify-content: center; /* 基本は中央寄せ！ */
    flex-wrap: wrap;         /* 折り返しを許可 */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
  }

  .tab-item {
    flex: 0 1 auto;      /* 勝手に広がらず、中身に合わせる */
    min-width: 160px;    /* 2段になった時に貧相にならないよう、少し幅を持たせる */
    padding: 12px 15px 22px;
    font-size: 0.9rem;
  }

  /* 1. 代表挨拶：読みやすい文字幅と余白 */
  .ceo-message .text-area {
    width: 100% !important;
    padding: 60px 40px; /* タブレットで窮屈にならない余白 */
    margin: 0;
  }
  .ceo-message .section-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    text-align: center;
  }
  .map-container iframe {
    height: 400px; /* 600px付近でも画面を占領しすぎない高さ */
  }
  /* --- Contactページ：1024px以下基本 --- */
  .contact-page-section {
    padding: 60px 0;
  }
  .form-wrapper {
    max-width: 100%; /* コンテナ幅(92%)いっぱいに広げる */
  }
  .contact-form {
    padding: 40px; /* PC版の60pxからスリム化 */
  }
  .privacy-scroll-box {
    height: 200px; /* タブレットで見やすいように少し高さを出す */
  }



  /* --- 850px以下でハンバーガーをONにする --- */
  @media (max-width: 850px) {
    #nav-pc { display: none; }
    /* 599px以下のデザインをここ（850px〜）に完全移植 */
    #nav-sp-btn {
      display: flex !important;
      position: relative;
      z-index: 1100;
      width: 40px;
      height: 40px;
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #nav-sp-btn span {
      display: block;
      width: 30px;
      height: 2px;
      background-color: #fff;
      transition: all 0.4s ease;
      position: absolute;
    }
    #nav-sp-btn span:nth-child(1) { top: 12px; }
    #nav-sp-btn span:nth-child(2) { top: 20px; }
    #nav-sp-btn span:nth-child(3) { top: 28px; }

    #nav-sp-btn::after {
      content: "MENU";
      position: absolute;
      bottom: -5px;
      font-size: 8px;
      font-family: var(--font-en);
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #fff;
    }

    #nav-sp-btn.active span:nth-child(1) { top: 20px; transform: rotate(45deg); background-color: var(--accent-color); }
    #nav-sp-btn.active span:nth-child(2) { opacity: 0; }
    #nav-sp-btn.active span:nth-child(3) { top: 20px; transform: rotate(-45deg); background-color: var(--accent-color); }
    #nav-sp-btn.active span { background-color: var(--accent-color) !important; }
    #nav-sp-btn.active::after { content: "CLOSE"; color: var(--accent-color); }

    .main-visual {
      height: 80vh;
    }
    .mv-content {
      justify-content: center;
    }
    .mv-text-vertical {
      writing-mode: horizontal-tb;
      height: auto;
      text-align: center;
      margin: 0;
    }
    .mv-copy-main {
      margin-left: 0;
      font-size: clamp(2.2rem, 7vw, 3rem);
      line-height: 1.4;
      margin-bottom: 30px;
    }
    .mv-copy-sub {
      margin-left: 0;
      border-right: none;
      border-top: 2px solid var(--accent-color);
      padding-top: 20px;
      padding-right: 0;
      justify-content: center;
      font-size: 1.1rem;
      letter-spacing: 0.2em;
    }

    /* 背景文字を縦書きへ */
    .bg-text {
      writing-mode: vertical-rl;
      font-size: clamp(6rem, 15vw, 10rem);
      top: 0;
      left: -10px;
      height: 100%;
      color: rgba(15, 37, 64, 0.06) !important;
    }
    .bg-text.right {
      right: auto !important;
      left: -10px;
      text-align: left !important;
    }

    /* About Us / Company を縦積みに変更 */
    .about_us .content-wrapper,
    .company .content-wrapper {
      flex-direction: column;
      gap: 40px;
    }
    .about_us .image-area,
    .company .image-area {
      width: calc(100% - 20px) !important;
      margin: 0 0 20px 0 !important;
      padding-right: 10px;
      padding-bottom: 10px;
    }
    .about_us .text-area,
    .company .text-area {
      width: 100%;
      margin: 0;
      padding: 50px 30px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    .link-btn-arrow {
      display: flex;
      justify-content: center;
      width: fit-content;
      margin: 0 auto;
    }

    /* Works：2+1の特殊レイアウト実装 */
    .works-header {
      max-width: 100%;
      text-align: center;
      margin-bottom: 50px;
    }
    .card-txt {
      padding: 20px;
    }
    .card-txt h3 {
      font-size: 1.15rem;
    }
    .works-btn-area {
      margin-top: 40px;
    }

    .contact {
      padding: 80px 0;
    }
    .contact-title {
      font-size: clamp(2.5rem, 10vw, 2.8rem);
    }
    .contact-text {
      font-size: 0.95rem;
    }
    .contact .link-btn-style {
      padding: 18px 50px;
    }

    .footer-flex-wrapper {
      flex-direction: column;
      align-items: center;
    }
    .footer-left,
    .footer-right {
      width: 100%;
      text-align: center;
    }
    .footer-right {
      margin-top: 40px;
      justify-content: center;
    }
    .footer-nav li {
      text-align: center;
      margin-bottom: 20px;
    }
    .footer-logo img {
      margin: 0 auto 30px;
    }
    .page-header {
      height: 350px;
    }
    .page-title {
      font-size: 2.8rem;
    }

    /* メッセージセクションの縦積み化 */
    .about-message .content-wrapper {
      flex-direction: column;
      gap: 40px;
    }
    .about-message .image-area {
      width: calc(100% - 20px) !important;
      margin: 0 0 10px 0 !important;
    }
    .about_us .text-area,
    .about-message .text-area {
      width: 100% !important;
      margin: 0 !important;
      padding: 50px 30px;
    }

    /* 私たちの3つの強み：余白調整 */
    .static-card {
      padding: 35px 25px !important;
    }

    /* Works詳細：縦積みに変更 */
    .works-name .content-wrapper {
      flex-direction: column;
    }
    .works-name .image-area {
      width: 100% !important;
    }
    .works-name .image-area img {
      aspect-ratio: 16 / 9;
      object-position: center 43% !important;
      object-fit: cover;
      border-radius: 0;
    }
    .works-name .image-area::before {
      display: none;
    }
    .works-name .text-area {
      width: 100% !important;
      padding: 40px 20px;
      box-shadow: none;
      border-bottom: 1px solid #eee;
    }
    .works-name .check-list {
      display: block;
      margin-top: 25px;
    }
    .works-name .check-list li {
      margin-bottom: 12px;
    }
    .table-container {
      padding: 20px !important;
    }
    .company-table tr, 
    .company-table th, 
    .company-table td {
      display: block !important;
      width: 100% !important;
    }
    .company-table th {
      background-color: transparent;
      color: var(--accent-color);
      padding: 20px 0 5px 0 !important; /* 項目名を強調 */
      border-bottom: none;
      font-size: 0.9rem;
    }
    .company-table td {
      padding: 0 0 20px 0 !important;
      border-bottom: 1px solid #eee; /* 各行の区切り線 */
      font-size: 1.1rem;
    }
    .company-table tr:last-child td {
      border-bottom: none;
    }
    /* --- @media (max-width: 850px) の中に追加 --- */
    .tel-info-box {
      padding: 30px 20px;
      margin-bottom: 30px;
    }
    .tel-label {
      font-size: 2rem;
    }
    .tel-number {
      font-size: clamp(1.8rem, 5vw, 2.2rem); /* 画面幅に合わせて最適化 */
    }
    .contact-form {
      padding: 40px 30px; /* 左右の余白をさらに調整 */
    }
    .submit-area .link-btn-style {
      width: 100%; /* タブレット縦〜スマホではボタンを横いっぱいに */
      max-width: 400px; /* 広がりすぎ防止 */
      border-radius: 50px;
    }
  }


  @media (min-width: 600px) and (max-width: 925px) {
    .tab-item {
      /* 3つ並べるために計算（33.3%から隙間分を引く） */
      width: calc(32% - 12px) !important; 
      min-width: 140px;
      flex: 0 0 auto !important; /* 勝手に伸び縮みさせない */
      padding: 12px 10px 20px;
    }
  }

  /* --- 926px以上の時（タブレット横〜PC手前）の調整 --- */
  @media (min-width: 926px) {
    .tab-item {
      flex: 0 1 auto;
      min-width: 170px;
      padding: 12px 15px 22px;
    }
  }


  /* --- 5. Works：600px以上の時だけ2+1 --- */
  @media (min-width: 600px) {
    .works-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
    }
    .work-card {
      width: calc(50% - 15px);
    }
    .work-card:last-child {
      width: calc(50% - 15px);
    }
  }
}


/* ======================================================
   　SMARTPHONE ONLY (599px以下に適用)
   ★「最小320px」までをカバーする完全縦積み設定
   ====================================================== */
/* ======================================================
   SMARTPHONE ONLY (599px以下)
   ====================================================== */
@media screen and (max-width: 599px) {

  /* --- 1. ヘッダーの調整 --- */
  .header-inner {
    padding: 10px 15px; /* 最小幅320pxを考慮して余白を最小限に */
  }
  #logo img {
    height: 30px; /* 小さな画面でロゴが場所を取りすぎないように調整 */
  }
  #nav-pc {
    display: none; /* PCナビを完全に非表示 */
  }
  #nav-sp-btn {
    display: block; /* ハンバーガーボタンを出現させる */
  }
  /* --- ハンバーガーボタンの「✕」化と位置調整 --- */
  #nav-sp-btn {
    display: flex !important;
    position: relative;
    z-index: 1100; /* メニュー本体より上に配置 */
    width: 40px;   /* 少し押しやすくサイズアップ */
    height: 40px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* 三本線の基本スタイル */
  #nav-sp-btn span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fff;
    transition: all 0.4s ease; /* アニメーションを少し滑らかに */
    position: absolute;
  }

  #nav-sp-btn span:nth-child(1) { top: 12px; }
  #nav-sp-btn span:nth-child(2) { top: 20px; }
  #nav-sp-btn span:nth-child(3) { top: 28px; }

  /* メニューが開いている時（active）の「✕」アニメーション */
  #nav-sp-btn.active span:nth-child(1) {
    top: 20px;
    transform: rotate(45deg); /* 右に45度回転 */
    background-color: var(--accent-color); /* 閉じるときは赤色にして目立たせる */
  }

  #nav-sp-btn.active span:nth-child(2) {
    opacity: 0; /* 真ん中の線は消す */
  }

  #nav-sp-btn.active span:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg); /* 左に45度回転 */
    background-color: var(--accent-color);
  }

  /* ボタンの下に「MENU / CLOSE」の文字を入れる（隠し味） */
  #nav-sp-btn::after {
    content: "MENU";
    position: absolute;
    bottom: -5px;
    font-size: 8px;
    font-family: var(--font-en);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    transition: 0.3s;
  }
  #nav-sp-btn.active span {
  background-color: var(--accent-color) !important; 
  }

  #nav-sp-btn.active::after {
    content: "CLOSE";
    color: var(--accent-color);
  }
  /* --- 2. メインビジュアル（MV）の調整 --- */
  .main-visual {
    height: 80vh; /* スマホでは全画面だと少し長いため、少しだけ短く */
    border-bottom: 4px solid var(--accent-color);
  }
  .mv-content {
    justify-content: center; /* 中央寄せに切り替え */
    padding: 0 15px;
  }
  .mv-text-vertical {
    writing-mode: horizontal-tb; /* 縦書きを解除（横書きへ） */
    height: auto;
    text-align: center;
    margin: 0;
  }
  .mv-copy-main {
    margin-left: 0;
    /* 320px幅でも文字が溢れないように自動調整 (clamp) */
    font-size: clamp(1.6rem, 8vw, 2.2rem); 
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
  }
  .mv-copy-main .line {
    display: block; /* 各フレーズを強制改行させてリズムを作る */
  }
  .mv-copy-sub {
    margin-left: 0;
    border-right: none; /* PCの縦線を消す */
    border-top: 2px solid var(--accent-color); /* 上側に赤い線を配置してバランス調整 */
    padding-top: 15px;
    padding-right: 0;
    justify-content: center;
    font-size: 0.95rem;
    letter-spacing: 0.15em;
  }
  /* --- 1. 共通レイアウト＆背景文字の縦書き化 --- */
  .section-layout {
    padding: 60px 0;
    /* overflow: hidden; はPC設定で効いているので、はみ出した文字はカットされます */
  }

  .bg-text {
    display: block; /* 復活させます */
    writing-mode: vertical-rl; /* 【重要】ここを縦書きに変更 */
    font-size: clamp(5rem, 20vw, 8rem); /* 画面幅に合わせてサイズを流動的に */
    top: 0; /* 少し上にずらして見切れさせる */
    left: -10px;  /* 画面の左端に寄せる */
    height: 100%; /* セクションの高さいっぱいに */
    line-height: 1;
    color: rgba(15, 37, 64, 0.08) !important;
    opacity: 1; /* コンテンツの邪魔にならないよう、かなり薄く */
    white-space: nowrap;
    z-index: 0; /* 最背面へ */
    pointer-events: none;
    
    /* PCで右寄せだった「WORKS」なども、スマホでは左側の縦書きに統一 */
    right: auto !important;
    text-align: left !important;
    font-weight: 900; /* 太くして視認性を確保 */
  }
  .section-bg-gray .bg-text {
    color: rgba(15, 37, 64, 0.05) !important;
  }
  /* --- 3. About Us & Company セクション（共通） --- */
  .about_us .content-wrapper,
  .company .content-wrapper {
    flex-direction: column; /* 横並びを縦並びに変更 */
    gap: 30px; /* 写真と文章の間の距離を確保 */
    width: 90%; /* 左右に余白を確保 */
    position: relative;
    z-index: 1;
  }

  /* 写真エリアと文章エリアを両方100%幅に */
  .about_us .image-area,
  .company .image-area {
    width: calc(100% - 15px) !important; /* 枠のズレ分だけ幅を引く */
    margin: 0 0 20px 0 !important;
    position: relative;
    /* 枠をずらすスペースを確保するため、右と下に余白を作る */
    padding-right: 8px;
    padding-bottom: 8px;
  }

  .image-area img {
    width: 100%;
    border: none; /* PC用のグレー枠は消してスッキリさせる */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 代わりに少し影をつけて浮かせる */
    position: relative;
    z-index: 2; /* 枠線より前に出す */
  }

  .image-area::before {
    /* ずらし幅を小さくして画面内に収める */
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent-color);
    z-index: -1; /* 画像の後ろへ */
  }

  .about_us .text-area,
  .company .text-area {
    width: 100%;
    margin: 0;
    padding: 30px 20px; /* スマホで見やすい余白感に */
    box-shadow: none; /* 狭い画面では影がうるさくなるのでフラットに */
    border: 1px solid #eee; /* 境界をはっきりさせるための細い線 */
    background: rgba(255, 255, 255, 0.95); /* 背景文字がほんのり透けるとお洒落 */
  }
  
  .section-title {
    text-align: center; /* タイトルを中央寄せ */
    font-size: clamp(1.4rem, 6vw, 1.7rem); /* 最小スマホでも1行〜2行に収まるサイズ */
    line-height: 1.5;
    margin-bottom: 25px;
    word-break: break-all; /* 変なところで切れないように */
  }
  .text-body {
    text-align: left;
    font-size: 0.95rem;
    margin-bottom: 35px;
    padding: 0 5px; /* 左右にわずかな余白 */
  }
  .link-btn-arrow {
    display: flex;
    justify-content: center; /* 矢印も含めて中央寄せ */
    width: fit-content;
    margin: 0 auto; /* ブロック要素として中央配置 */
    padding-bottom: 8px;
    font-size: 1rem;
  }

  /* --- 4. Works（実績・事業）セクション --- */
  .works-header {
    text-align: left; /* スマホでは中央寄せより左寄せの方が読みやすい */
    margin-bottom: 40px;
  }

  .works-grid {
    grid-template-columns: 1fr; /* 3列から1列へ強制変更 */
    gap: 40px; /* カード同士がくっつかないように間隔をあける */
  }

  .work-card,
  .static-card {
    /* PC版の「transparent（透明）」を強制的に上書きして赤色を出す */
    border-top: 3px solid var(--accent-color) !important;
    
    /* スマホで触った時に勝手に浮き上がらないように固定 */
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
  }

  /* ホバー（タップ）した時の余計なエフェクトを無効化 */
  .work-card:hover,
  .static-card:hover {
    transform: none !important;
    border-top: 3px solid var(--accent-color) !important;
  }

  /* カード内の画像が拡大しっぱなしにならないように調整 */
  .work-card:hover .card-img img {
    transform: none !important;
  }

  .card-txt {
    padding: 20px;
  }

  .card-txt h3 {
    font-size: 1.1rem;
  }

  .works-btn-area {
    margin-top: 40px;
  }

  /* --- 5. Contact（トップページ下部） --- */
  .contact {
    padding: 80px 0; /* 上下の余白を少し詰め、リズムを速める */
    margin-top: 60px; /* 前のセクションとの間隔 */
    background-attachment: scroll; /* スマホでの挙動を安定させるため、パララックスはオフ推奨 */
  }

  .contact-title {
    font-size: clamp(2.5rem, 12vw, 3.2rem); /* 画面幅に合わせてタイトルサイズを調整 */
    margin-bottom: 10px;
  }

  .contact-sub {
    font-size: 1rem;
    margin-bottom: 25px;
    letter-spacing: 0.1em;
  }

  .contact-text {
    margin: 20px auto 40px;
    width: 90%; /* 左右に少し余白を持たせ、読みやすくする */
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: left; /* 中央揃えより左寄せの方が、スマホでは長文が読みやすい */
  }

  /* お問い合わせボタンのスマホ最適化 */
  .contact .link-btn-style {
    display: inline-block; /* 横いっぱいに広げず、中身に合わせる */
    width: auto;
    min-width: 240px; /* 小さくしすぎず、押しやすさを確保する最小幅 */
    margin: 0 auto;
    padding: 14px 40px; /* 上下を少し詰め、左右にゆとりを持たせる */
    font-size: 0.95rem;
    
    /* --- 楕円形にするための設定 --- */
    border-radius: 50px; /* 十分に大きな数値を指定することでカプセル型に */
    
    box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* 影も少し柔らかく */
    transition: all 0.3s ease;
  }

  /* タップした瞬間のフィードバックをより分かりやすく */
  .contact .link-btn-style:active {
    transform: translateY(2px) scale(0.98); /* わずかに沈み込む演出 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  /* --- 6. Footer（フッター） --- */
  footer {
    padding: 60px 0 30px; /* 上下の余白をスマホ用に調整 */
    text-align: center; /* 全体を中央寄せの基点にする */
  }

  .footer-flex-wrapper {
    flex-direction: column; /* 横並びを解除して縦積みに */
    align-items: center; /* 全ての要素を中央寄せに揃える */
  }

  .footer-left, 
  .footer-right {
    width: 100%; /* 全幅を確保 */
    text-align: center;
  }

  /* ロゴのサイズ調整 */
  .footer-logo img {
    width: 200px; /* PC版(240px)より一回り小さく */
    margin: 0 auto 25px;
    display: block;
  }

  /* 住所・連絡先情報 */
  .footer-company-info p {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  /* Google Map リンクをタップしやすく */
  .map-link-btn {
    display: inline-block;
    padding: 10px 0; /* タップ範囲を縦に広げる */
    font-size: 0.9rem;
  }

  /* ナビゲーションエリア（区切り線を入れて整理） */
  .footer-right {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 連絡先とメニューの間に薄い線を入れる */
    width: 100%;
    display: flex;            /* ベースから継承されているので明示しなくても良いですが、 */
    justify-content: center;  /* ★PC版の flex-end を center で上書きします */
  }
  .footer-nav {
    list-style: none;
    padding: 0; /* ★重要：ブラウザ標準の左パディングをリセット */
    margin: 0;
  }

  .footer-nav li {
    text-align: center; /* PCの右寄せを解除して左寄せに */
    margin-bottom: 25px; /* リンク同士の間隔を空けて誤操作防止 */
  }

  .footer-nav li a {
    display: inline-block; /* 中央寄せを維持しつつ、クリック範囲を適切に */
    font-size: 1.3rem;     /* 指で追いやすい大きさ */
    font-family: var(--font-en);
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 5px 20px;     /* タップできる領域を左右に広げる */
  }
  .footer-nav li a:active {
    color: var(--accent-color);
    transform: scale(0.95); /* 押した瞬間に少し小さくなるフィードバック */
  }

  /* コピーライト */
  .footer-copy {
    width: 100%;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* メニューとの間に薄い仕切り */
    text-align: center;
    font-size: 0.65rem;
    color: #888;
  }


  /* ======================================================
     ABOUT US ページ専用：スマホ調整
     ====================================================== */

  /* --- 1. ページヘッダー（職人の背景画像エリア） --- */
  .page-header {
    height: 350px; /* PC(500px)から半分に。コンテンツへ早く辿り着けるように */
  }
  /* 背景画像の位置を微調整（職人の手元や顔が隠れないように） */
  .page-about .page-header-bg img {
    object-position: center center; /* 中央を基準にする */
  }
  .page-title {
    font-size: 2.8rem; /* 領域が広がった分、文字も少しだけ存在感を出す */
    margin-bottom: 8px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 15px rgba(0,0,0,0.5); /* 視認性確保のために影を少し強調 */
  }
  .page-sub {
    font-size: 1rem;
    font-weight: 700;
  }

  /* --- 2. メッセージセクション（職人の写真＋文章） --- */
  /* すでに共通設定で .content-wrapper は縦積みになっていますが、
     about-message 固有の余白調整を行います */
  .about-message .content-wrapper {
    flex-direction: column; /* 縦積み */
    gap: 40px;
  }
  .about-message .image-area {
    width: calc(100% - 15px) !important; /* 赤枠のズレ分を引いて全幅 */
    margin: 0 auto 10px !important;
  }
  .about-message .text-area {
    width: 100% !important;
    margin-left: 0 !important; /* PC版のマイナスマージンを解除 */
    padding: 35px 20px;
    box-shadow: none; /* スマホではフラットにして可読性優先 */
    border: 1px solid #eee;
    background: #fff;
  }
  .about-message .section-title {
    font-size: clamp(1.4rem, 6vw, 1.7rem);
    text-align: center;
    line-height: 1.5;
    margin-bottom: 25px;
  }
  .about-message .text-body {
    text-align: left;
    margin-bottom: 0; /* 下にボタンがない場合は0でOK */
  }

  /* --- 3. 私たちの3つの強み（カードセクション） --- */
  .section-bg-gray {
    padding: 60px 0; /* 上下の余白をスマホ用に凝縮 */
  }
  .section-title-center {
    font-size: 1.6rem;
    margin-bottom: 40px;
  }
  
  /* カードグリッドを1列に */
  .works-container .works-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  /* カード自体の調整（ホバー禁止をスマホでも維持） */
  .static-card {
    padding: 30px 20px !important;
  }
  .static-card .card-txt {
    padding: 0;
  }
  .card-title-accent {
    font-size: 1.15rem;
    margin-bottom: 15px;
    padding-bottom: 8px;
    display: inline-block;
    border-bottom: 2px solid var(--accent-color) !important;
  }
  .static-card .card-title-accent {
    border-bottom: 2px solid var(--accent-color) !important;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: inline-block;
  }
  .static-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: left;
  }


  /* ======================================================
     WORKS ページ専用：スマホ調整
     ====================================================== */

  /* --- 1. ページヘッダー（About Usと統一） --- */
  .page-works .page-header {
    height: 350px;
  }
  /* 背景画像の位置調整（ダクトや設備が綺麗に見えるように） */
  .page-works .page-header-bg img {
    object-position: 40% center; 
  }

  /* --- 2. タブナビゲーションの非表示 --- */
  /* スマホでは画面上部に固定されるタブは場所を取るため非表示に */
  .works-tab-wrapper {
    display: block; /* 非表示を解除 */
    background-color: var(--white);
    padding: 10px 0;
    position: sticky;
    top: 45px; /* ヘッダーのすぐ下に固定 */
    z-index: 100;
    border-bottom: 1px solid #eee;
  }
  /* 右端に「続きがある」ことを示すグラデーション */
  .works-tab-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* 下のタブを触れるようにする */
    z-index: 5;
  }
  .works-tab-wrapper .container {
    width: 100% !important;   /* コンテナの横幅制限を解除 */
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .works-tab-nav {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* 指の動きに吸い付くスクロール */
    justify-content: flex-start !important;
    padding: 15px 50px 20px !important;
    gap: 12px;
    scrollbar-width: thin; /* Firefoxでスクロールバーを隠す */
    scrollbar-color: var(--accent-color) #eee;
  }
  .works-tab-nav::-webkit-scrollbar {
    display: block !important; /* 非表示設定を解除 */
    height: 4px;    /* 邪魔にならない細さに設定 */
  }
  /* スクロールバーの「動く部分（つまみ）」 */
  .works-tab-nav::-webkit-scrollbar-thumb {
    background-color: var(--accent-color); /* 倉敷メンテナンス機工の赤 */
    border-radius: 10px;
  }
  /* スクロールバーの「通り道（レール）」 */
  .works-tab-nav::-webkit-scrollbar-track {
    background-color: #eee; /* 薄いグレーで存在感を抑える */
    margin: 0 15px; /* バーの両端が画面端に付きすぎないように調整 */
  }
  /* 最初のタブ（Service 01）の配置を確定させる */
  .works-tab-nav li:first-child {
    margin-left: 0;
  }

  .tab-item {
    flex: 0 0 auto !important;
    min-width: 140px; 
    padding: 10px 5px 18px; /* 少し高さを抑える */
    font-size: 0.8rem;
    scroll-snap-align: start; /* スクロールが止まる位置を補正 */
    border: 1px solid var(--main-color);
    border-radius: 6px;
    text-align: center;
    background: var(--bg-gray);
    transition: all 0.2s;
  }
  /* 選択中のタブ：赤色で強調 */
  .tab-item.active {
    background-color: var(--white);
    color: var(--accent-color);
    border: 2px solid var(--accent-color); /* 枠線を少し太くして強調 */
    font-weight: 700;
  }

  .tab-item.active::after {
    background-color: var(--accent-color); /* 下線の色も連動 */
  }
  /* --- 3. アコーディオンヘッダー（Service 01...）の表示 --- */
  .accordion-header {
    display: none; /* PC版の display: none; を解除 */
    background-color: var(--main-color);
    color: #fff;
    padding: 20px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-left: 5px solid var(--accent-color);
    margin-bottom: 0;
    position: relative;
    z-index: 10;
  }

  /* --- 4. 各パネル（事業内容）のレイアウト調整 --- */
  .tab-panel {
    display: none !important; /* スマホでは全て表示、またはJSで切り替え */
    padding-bottom: 0;
  }
  .tab-panel.active {
    display: block !important;
    animation: fadeIn 0.4s ease-out; /* 切り替え時にふわっと出す */
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .works-name .content-wrapper {
    flex-direction: column; /* 縦積み */
    gap: 0; /* アコーディオンヘッダー直後のため隙間を調整 */
    padding: 0;
    width: 100%;
  }

  .works-name .image-area {
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* 事業内容の写真の枠線をスマホ用に調整 */
  .works-name .image-area::before {
    display: none; /* 重なりが複雑になるため、Worksページでは枠を消してスッキリさせる */
  }

  .works-name .image-area img {
    border-radius: 0; /* 写真を端まで見せる */
    border: none;
    aspect-ratio: 16 / 9; /* スマホで見やすい横長に統一 */
    object-position: center 43% !important;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .works-name .text-area {
    width: 100% !important;
    padding: 40px 20px;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #eee;
  }

  /* 事業内容ページのチェックリストを1列に */
  .works-name .check-list {
    display: block; /* 2列グリッドを解除 */
    margin-top: 25px;
  }

  .works-name .check-list li {
    margin-bottom: 15px;
    font-size: 0.95rem;
  }

  /* 空の li がある場合の調整 */
  .works-name .check-list li:empty {
    display: none;
  }

  /* --- CONTACTセクション（スマホ時の中央寄せ対応） --- */
  .contact-text {
    text-align: center !important; /* ★左寄せ設定を強制的に上書きして中央へ */
    margin: 20px auto 40px;      /* 左右marginをautoにして中央配置を確実に */
    width: 90%;
    font-size: 0.95rem;
    line-height: 1.8;
  }

  /* ついでにタイトルとサブタイトルも確実に中央へ（念のため） */
  .contact-inner {
    text-align: center;
    width: 100%;
  }

  .contact .link-btn-style {
    display: inline-block;
    margin: 0 auto; /* ボタンもブロック要素として中央に配置 */
  }

  /* ======================================================
     COMPANY ページ専用：スマホ調整
     ====================================================== */

  /* --- 1. ページヘッダー（外観画像） --- */
  /* 他の下層ページと高さを統一 */
  .page-header {
    height: 300px;
  }
  .page-header-bg img {
    object-position: center 60%; /* 建物の入り口付近が見えるように調整 */
  }

  /* --- 2. 代表挨拶セクション --- */
  .ceo-message {
    padding: 60px 0;
  }
  .ceo-message .section-title-center {
    font-size: clamp(1.4rem, 6vw, 1.7rem) !important; 
    margin-bottom: 40px;
  }

  .ceo-message .text-area {
    width: 100% !important;
    max-width: none;
    padding: 0; /* 背景を白くせず、シンプルに文字を読ませる */
    box-shadow: none;
  }

  .ceo-message .section-header {
    text-align: center;
    margin-bottom: 30px;
  }

  .ceo-message .section-title {
    font-size: clamp(1.2rem, 5.5vw, 1.5rem); /* 長いタイトルを1行〜2行で収める */
    line-height: 1.6;
  }
  .ceo-message .text-area .section-title {
    /* 画面幅に合わせて流動的に縮小 */
    font-size: clamp(1.05rem, 4.8vw, 1.5rem) !important;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 30px;
    
    /* 440px以下で1行を死守するための設定 */
    white-space: nowrap; 
    letter-spacing: -0.02em; /* 字間をわずかに詰め、横幅を節約 */
    display: block;
    width: 100%;
  }

  .ceo-message .text-body {
    text-align: left; /* 本文は左寄せ */
    font-size: 0.95rem;
    line-height: 1.8;
  }
  .ceo-signature {
    margin-top: 30px;
    font-size: 1rem;
    /* 署名はあえて右寄せのまま、信頼感を演出 */
  }

  /* --- 3. 会社概要（テーブルの縦積み化） --- */
  .table-container {
    padding: 0 !important; /* ★左右の余白を0にして、ボーダーを端まで伸ばす */
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden; /* 角丸などの処理があればはみ出し防止 */
  }
  .company-table,
  .company-table tbody,
  .company-table tr {
    display: block !important;
    width: 100% !important;
  }

  .company-table {
    padding-top: 10px !important; /* 一番上の線の上の余白 */
    border-top: 1px solid #eee; /* 表の天辺の線 */
  }
  .company-table tr {
    border-bottom: 1px solid #eee; /* 各項目の下の線 */
    /* 上下の余白をpaddingで取り、左右にしっかり余白を確保 */
    padding: 25px 20px; 
    margin-bottom: 0; /* ★隙間（マージン）を消して線を繋げる */
  }

  .company-table tr:last-child {
    border-bottom: none; /* 最後の線は不要 */
  }

  .company-table th, 
  .company-table td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    text-align: left;
    border: none !important;
  }

  .company-table th {
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px; /* 項目名と内容の間の距離 */
  }

  .company-table td {
    font-size: 1rem;
    color: var(--main-color);
    line-height: 1.6;
  }

  /* --- 4. アクセス（Google Map） --- */
  .section-access {
    padding: 60px 0 80px;
  }

  .map-container {
    width: 100%;
    padding: 0 15px;
  }

  .map-container iframe {
    height: 350px; /* スマホでは500pxは長すぎるので短縮 */
    border-radius: 8px; /* 角を丸めてスマホの画面に馴染ませる */
  }


  /* ======================================================
     CONTACT ページ専用：スマホ調整
     ====================================================== */

  .contact-page-section {
    padding: 40px 0 60px; /* 上下の余白を少し詰め、入力を促す */
  }

  /* --- 1. 電話案内ボックス --- */
  .tel-info-box {
    padding: 30px 15px;
    margin-bottom: 30px;
  }
  .tel-label {
    font-size: 1.8rem; /* 少しだけ小さくしてスマホ画面に収める */
  }
  .tel-number {
    font-size: 1.8rem;
    word-break: break-all;
  }
  .tel-link {
    text-decoration: none; /* リンクであることを明示 */
    color: var(--main-color);
    font-weight: 700;
  }
  .tel-link:active {
    opacity: 0.7;
  }

  /* --- 2. フォームエリア全体の調整 --- */
  .contact-form {
    padding: 40px 15px; /* 左右の余白を削り、入力欄の幅を最大限確保 */
    box-shadow: none; /* スマホではフラットにしてスッキリさせる */
    border: 1px solid #eee;
  }

  .form-row {
    margin-bottom: 25px;
  }

  .form-label {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }

  .required, .optional {
    margin-left: 8px; /* ラベルとの間隔を微調整 */
    font-size: 0.65rem;
  }

  /* 入力欄を指でタップしやすいサイズにする */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    padding: 15px 12px;
    font-size: 16px !important; /* iPhoneで入力時にズームされるのを防ぐ設定 */
    border-radius: 4px;
  }

  /* --- 3. プライバシーポリシー（横幅最大化と視認性） --- */
  .privacy-policy-inline {
    margin-top: 40px;
    width: 100%;
  }

  .privacy-scroll-box {
    width: 100% !important; /* 横幅を目一杯使う */
    height: 250px; /* PC版(150px)より高くして、一度に読める量を増やす */
    padding: 20px 15px;
    background: #fdfdfd;
    border: 1px solid #ddd;
    line-height: 1.6;
    font-size: 0.85rem;
  }

  /* 同意チェックボックスの押しやすさ */
  .privacy-area {
    margin: 35px 0;
    text-align: center;
  }

  .privacy-check {
    display: flex;
    align-items: flex-start; /* チェックボックスを上揃えに */
    justify-content: center;
    text-align: left;
    cursor: pointer;
  }

  .privacy-check input {
    width: 24px !important; /* チェックボックスを少し大きくして押しやすく */
    height: 24px !important;
    margin-right: 12px;
    margin-top: -2px;
  }

  .check-text {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
  }

  /* 送信ボタンのスマホ最適化 */
  .submit-area .link-btn-style {
    width: 100%; /* スマホでは横幅いっぱいのボタンにして押しやすく */
    max-width: none;
    padding: 18px 0;
    font-size: 1.1rem;
    border-radius: 50px; /* 他のボタンと統一して丸く */
  }







  @media screen and (max-width: 409px) {
    .header-inner {
      padding: 6px 8px; /* 左右の余白をさらに削る */
    }

    #logo img {
      height: 20px; /* ロゴを一回り小さくして余白（呼吸）を確保 */
      transform: translateY(1.5px);
    }

    #nav-sp-btn {
      transform: scale(0.75); /* ハンバーガーボタンも少しスケールダウン */
      transform-origin: right center; /* 右端を基準に小さくする */
    }
  }

  @media screen and (max-width: 350px) {
    .about_us .link-btn-arrow {
      font-size: 0.85rem; /* 1remから少し下げて、1行に収まるように調整 */
      letter-spacing: 0.02em; /* 字間をわずかに詰めて幅を節約 */
      white-space: nowrap; /* ★重要：何があっても改行させない */
    }

    /* ついでに、320px幅でタイトルが大きすぎる場合の保険 */
    .section-title {
      font-size: 1.35rem;
    }
  }

  @media (max-width: 340px) {
    .ceo-message .text-area .section-title {
      white-space: normal; 
      font-size: 1.2rem !important;
      word-break: keep-all; /* 単語の途中で変に切れないようにする */
    }
  }

  @media screen and (max-width: 335px) {
    .works-name .section-title {
      font-size: 1.15rem !important; /* 1.35remからさらにダウン */
      letter-spacing: -0.02em;       /* 文字の間をわずかに詰め、横幅を節約 */
      white-space: nowrap;           /* ★重要：何があっても1行に収める */
      margin-left: -5px;             /* 左右のパディングに少し食い込ませて余裕を作る */
      margin-right: -5px;
    }

    /* 他のセクションタイトルもバランスを見て微調整 */
    .section-title {
      font-size: 1.25rem;
    }
  }
}