/* ===== リセット & 基本設定 ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
}

body {
  width: 100%;
  overflow-x: hidden; /* 横スクロール防止 */
  font-family: "Noto Sans JP", sans-serif;
  padding-top: 72px; /* ヘッダーの高さ分 */
}
/* =====================
  ヘッダー
===================== */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 1000;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}
.header-logo span {
  font-family: "游明朝", "Yu Mincho", "游明朝体",
               "Hiragino Mincho ProN",
               "Hiragino Mincho Pro",
               "Noto Serif JP",
               serif;
  font-size:18px;
}
.header-nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  transform: translateX(160px);
  font-weight:800;
}
/* ===== ヘッダーナビ 下線ホバー ===== */
.header-nav a {
  position: relative;
  text-decoration: none;
  color: #1a3c7c;
  font-weight: 700;
}

/* 下線 */
.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #A0E1FF; /* ← 下線色（変更OK） */
  transition: width 0.3s ease;
}

/* ホバー時 */
.header-nav a:hover::after {
  width: 100%;
}

.header-contact {
  background: #A0E1FF;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}
.header-contact:hover {
  background: #6fc6ef;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
/* 表示切り替え */
.pc-only { display: block; }
.sp-only { display: none; }

/* ハンバーガー */
.hamburger {
  background: none;
  border: none;
  width: 32px;
  height: 23px;
  position: fixed;
  cursor: pointer;
  margin-right: 50px;
  top: 37px;        /* ヘッダー高さに合わせて */
  right: 20px;
  z-index: 10000;
}
.hamburger span {
  position: absolute;
  left: 18px;
  width: 100%;
  height: 2px;
  background: #1a3c7c;
  transition: all 0.3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* スマホメニュー */

.sp-menu ul {
  list-style: none;
  padding-top: 140px;      /* ヘッダー分 */
  padding-left: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* ← 縦中央 */
  align-items: center; 
  gap: 15px;
}
.sp-menu li {
  margin-bottom: 30px;
  text-align: center;
}
.sp-menu a {
  font-size: 20px;
  font-weight: 700;
  color: #1a3c7c;
  text-decoration: none;
}

/* お問い合わせ（スマホ） */
.sp-contact a {
  display: inline-block;
  background: #A0E1FF;
  color: #fff;
  padding: 14px 24px;
  border-radius: 30px;
}

/* スマホメニュー（完全フルスクリーン） */
.sp-menu {
  position: fixed;
  inset: 0;                 /* ← これが本物の全画面 */
  background: #fff;          /* 今の赤 */
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 開いた状態 */
.sp-menu.active {
  opacity: 1;
  pointer-events: auto;
}

/* 中身はヘッダー分だけ下げる */
.sp-menu ul {
  padding-top: 140px;       /* ← ヘッダー高さ＋余白 */
  text-align: center;
}

/* ハンバーガー × */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 10px;
}

/* ===== スマホ ===== */
@media screen and (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: block; }

  .header-inner {
    padding: 15px;
  }
  .header {
    height: 90px;
  }
  .header-logo span {
    font-size: 22px;   /* ← 好みで調整 */
    font-weight: 700;  /* 少し太くすると見栄えUP */
  }
  /* ロゴ全体の間隔 */
  .header-logo {
    gap: 6px; /* ロゴと文字の距離 */
    transform: translateY(6px);
  }

  /* ロゴ画像を小さく */
  .header-logo img {
    height: 50px;   /* ← ここで調整（28〜36pxが無難） */
    width: auto;
  }
  /* スマホ専用タイトル帯の設定 */
  .sp-page-title {
    display: block;
    width: 100%;             /* ヘッダーと同じ幅（画面いっぱい） */
    background-color: #A0E1FF; /* お写真の黄色 */
    padding: 12px 20px;      /* 上下の厚みと左右の余白 */
    text-align: left;        /* 左寄せ（中央ならcenter） */
    
    /* ヘッダーが固定(fixed)されている場合の重なり防止 */
    position: relative;
    z-index: 10;
    margin-top: 16px;
  }

  .sp-page-title span {
    color: #fff;             /* 文字色（白抜き） */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
}



/* =====================
  ファーストビュー
===================== */
.fv {
  position: relative;
  height: 100vh;
  padding-top: 80px; /* ヘッダー分 */
  overflow: hidden;
}

/* 背景（透け画像） */
.fv-bg {
  position: absolute;
  inset: 0;
  background: url("image/niti-fvwrap.png") center/cover no-repeat;
  opacity: 0.15;
  z-index: 1;
}

/* 左の斜めブルー */
.fv-blue-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 50%;
  background-color: #1a2942;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 2;
}

/* 右下の斜めブルー */
.fv-blue-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35%;
  height: 40%;
  background-color: #1a2942;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 2;
}

.fv-inner {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* テキスト */
.fv-text {
  margin-top: 40px; /* ← 数値を調整 */
}
.fv-text h1 {
  font-size: 50px;
  line-height: 1.5;
  color: #000;
  font-family: "游明朝", "Yu Mincho", "游明朝体",
               "Hiragino Mincho ProN",
               "Hiragino Mincho Pro",
               "Noto Serif JP",
               serif;
   margin-left: 85px;
   white-space: nowrap;
   margin-top: -20px;
}

.fv-text h1 span {
  color: #1a3c7c;
  font-weight: bold;
}

.fv-en {
  margin-top: 20px;
  margin-left: 90px;
  display: inline-block;
  background: #A0E1FF;
  color: #fff;
  padding: 8px 16px;
  font-size: 20px;
  font-family: "游明朝", "Yu Mincho", "游明朝体",
               "Hiragino Mincho ProN",
               "Hiragino Mincho Pro",
               "Noto Serif JP",
               serif;
               
}

.fv-slide,
.fv-image-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease; /* 少しゆっくり */
}

.fv-slide.active,
.fv-image-slide.active {
  opacity: 1;
}
.fv-slide-wrap {
  position: relative;
  min-height: 220px;
}

.fv-images-wrap {
  position: relative;
  width: 360px;
  height: 420px;
}

.fv-images img {
  width: 100%;
  display: block;
}

.img-back {
  position: relative;
  z-index: 1;
  left: -220px; 
  top: -60px;
  width: 90%;
}

.img-front {
  position: absolute;
  right: 30px;
  bottom: 0;
  transform: translateY(-90px); /* ← bottom:-60px をやめる */
  width: 90%;
  z-index: 2;
}
@media screen and (max-width:768px){

  .fv{
    height: auto;
    min-height: 100vh;
    padding-top: 70px;
  }

  /* 青三角 */
  .fv-blue-left{
    width: 65%;
    height: 32%;
  }

  .fv-blue-right{
    width: 65%;
    height: 32%;
  }

  .fv-inner{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 30px 20px 80px;
  }

  /* 画像エリア */
  .fv-images-wrap{
    width: 100%;
    max-width: 340px;
    height: 420px;
    margin-bottom: 0px;
    transform: translateY(-30px);
  }

  .img-back{
    width: 75%;
    left: 0;
    top: 85px;
  }

  .img-front{
    width: 75%;
    right: 0;
    bottom: 10px;
    transform: none;
  }

  /* テキスト */
  .fv-text{
    margin-top: 0;
    text-align: center;
    width: 100%;
  }

  .fv-slide-wrap{
    min-height: auto;
  }

  .fv-text h1{
    font-size: 30px;
    line-height: 1.6;
    margin: 0;
    white-space: normal;
    
    transform: translateY(-10px);
  }

  /* 英文帯 */
  .fv-en{
    display: block;
    width: fit-content;
    margin: 25px auto 0;
    font-size: 14px;
    padding: 10px 18px;
  }

}
.sub-fv {
  position: relative;
  height: 100vh;
  padding-top: 80px; /* ヘッダー分 */
  overflow: hidden;
}

/* 背景 */
.sub-fv-bg {
  position: absolute;
  inset: 0;
  background: url("image/niti-fvwrap.png") center / cover no-repeat;
  opacity: 0.15;
  z-index: 1;
}

/* 左の斜め */
.sub-fv-blue-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 50%;
  background-color: #1a2942;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 2;
}

/* 右下の斜め */
.sub-fv-blue-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35%;
  height: 40%;
  background-color: #1a2942;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 2;
}

.sub-fv-inner {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* テキスト */
.sub-fv-text {
  margin-left: 85px;
}

.sub-fv-title {
  font-size: 50px;
  line-height: 1.4;
  color: #1a3c7c;
  font-family: "游明朝", "Yu Mincho", "游明朝体",
               "Hiragino Mincho ProN",
               "Hiragino Mincho Pro",
               "Noto Serif JP",
               serif;
   margin-left: 85px;
}

.sub-fv-en {
  margin-top: 20px;
  display: inline-block;
  background: #A0E1FF;
  color: #fff;
  padding: 8px 16px;
  font-size: 20px;
  font-family: "游明朝", "Yu Mincho", "游明朝体",
               "Hiragino Mincho ProN",
               "Hiragino Mincho Pro",
               "Noto Serif JP",
               serif;
}

/* 画像 */
.sub-fv-image {
  width: 380px;
  margin-right: 180px;
}

.sub-fv-image img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 768px) {
  .sub-fv {
    display: none;
  }
}
/* ===== フッター ===== */
.footer {
  position: relative;
  padding: 120px 20px 80px;
  background:
    linear-gradient(
      135deg,
      rgba(20, 30, 70, 0.95),
      rgba(40, 60, 120, 0.95)
    ),
    url("image/footer-bg.png"); /* ← 透け感のある背景画像 */
  background-size: cover;
  background-position: center;
  color: #fff;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* ロゴ・会社名 */
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}

.footer-brand img {
  height: 42px;
}

.footer-company {
  font-size: 22px;
  font-family: "Yu Mincho", "游明朝体", "YuMincho", serif;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* 住所 */
.footer-address {
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.85;
  margin-bottom: 40px;
}

/* ライン */
.footer-line {
  width: 60%;
  height: 1px;
  background: rgba(255,255,255,0.4);
  margin: 0 auto 40px;
}

/* ナビ */
.footer-nav ul {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  position: relative;
}

/* ホバー */
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: #fff;
  transition: 0.3s;
}

.footer-nav a:hover::after {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .footer {
    display: none;
  }
}
/* ===== 会社概要 ===== */
.company {
  padding: 20px 20px 80px;
  background: #F5F5F5;
}

.company-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* 見出し */
.company-title {
  display: block;
  width: fit-content; 
  padding: 8px 90px;
  background: #A0E1FF;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  margin: 0 auto 60px;
  text-align: center;
}

/* 表全体 */
.company-table {
  border-top: 1px solid #ccc;
  max-width: 700px;   /* ← 好きな幅に調整 */
  margin: 0 auto; 
}

/* 行 */
.company-row {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 24px 0;
}

/* 左項目 */
.company-row dt {
  width: 200px;
  font-weight: 600;
  color: #333;
}

/* 右内容 */
.company-row dd {
  width: calc(100% - 200px);
  margin: 0;
  line-height: 1.8;
  color: #333;
}
@media screen and (max-width:768px){

  .company{
    padding: 40px 20px 60px;
  }

  .company-inner{
    max-width: 100%;
  }

  .company-title{
    font-size: 18px;
    padding: 10px 50px;
    margin-bottom: 35px;
  }

  .company-table{
    border: none;
    max-width: 100%;
  }

  .company-row{
    display: block;
    padding: 0;
    margin-bottom: 25px;
    border: none;
  }

  /* グレーの帯 */
  .company-row dt{
    width: 100%;
    background: #d8d7d7;
    padding: 14px 18px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 700;
    color: #222;
  }

  /* 内容 */
  .company-row dd{
    width: 100%;
    margin: 0;
    padding: 18px;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.9;
    font-size: 15px;
    color: #333;
  }

  /* メールだけ折り返し */
  .company-row dd{
    word-break: break-word;
  }

}

/* ===== パララックスブロック ===== */
.parallax-section {
  width: 100%;
  padding: 120px 0; /* 上下余白 */
  background: #F5F5F5;
}

.parallax-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 枠 */
.parallax-frame {
  border: 20px solid #365184; /* ← 指定どおり */
  overflow: hidden;
}

/* パララックス画像 */
.parallax-image {
  width: 100%;
  height: 500px; /* 高さはここで調整 */
  background-image: url("image/niti-para02.png"); /* ← 用意した画像 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* ← パララックスの肝 */
}
@media screen and (max-width: 768px) {
  .parallax-section {
    display: none;
  }
}
.recruit {
  position: relative;
  overflow: hidden;
  padding: 120px 0 30px; 
  background: #F5F5F5;
}

.recruit-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* ==================
   横スクロール文字
================== */

.recruit-marquee {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  overflow: hidden;
  transform: translateY(-50%);
  z-index: 1;
}

.recruit-marquee-track {
  display: flex;
  width: fit-content;
  animation: marquee 30s linear infinite;
}

.recruit-marquee span {
  font-size: clamp(70px, 9vw, 160px);
  font-weight: 900;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px #d6d6d6;
  margin-right: 100px;
}

@keyframes marquee {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* ==================
   タイトル
================== */

.recruit-head {
  text-align: center;
  position: relative;
  z-index: 5;
  transform: translateX(-150px);
}

.recruit-sub {
  color: #A0E1FF;
  font-weight: bold;
  font-size: 1.4rem;
  transform: translateX(-200px);
}
.recruit-sub .highlight {
  color: #365184;      /* ← 採用中だけ色変更（好きな色に） */
}
.recruit-title {
  font-size: clamp(50px, 7vw, 80px);
  line-height: 1;
  font-weight: 900;
  color: #365184;
  margin-bottom: -20px;
  transform: translateX(-80px); 
  position: relative; /* ← これが最重要 */
  z-index: 3;
}

.recruit-title span {
  font-family: 'Allura', cursive;
  color: #A0E1FF;
  font-size: .8em;
  display: inline-block;      /* ← 回転に必須 */
  transform: rotate(-18.44deg) translateX(-80px);
  position: absolute; 
  z-index: 10;                 /* ← 一番上 */
  pointer-events: none;  
  
}

.recruit-copy {
  margin-top: 30px;
  font-size: 1.4rem;
  font-weight: bold;
  transform: translateX(-100px);
  display: inline-block; 
  background: #fff;           /* ← 白い背景 */
  padding: 8px 24px;  
  position: relative;
  z-index: 1;
  color: #365184;
}

/* ==================
   ポイント
================== */

.recruit-points {
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 5;
  transform: translateX(-500px); 
}

.point {
  width: 220px;
  background: #365184;
  color: #fff;
  padding: 20px;
  position: absolute;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.18);
}

.point span {
  display: block;
  color: #5dd3ff;
  font-size: .8rem;
  margin-bottom: 10px;
  font-weight:600;
}

.point01 {
  top: 0;
  left: 0;
}

.point02 {
  top: 0;
  left: 230px;
}

.point03 {
  top: 100px;
  left: 120px;
}
.point p {
  font-weight: 700; /* または bold */
  text-align: center;
}
/* ==================
   メイン画像
================== */

.recruit-image {
  text-align: center;
  position: relative;
  z-index: 4;
}

.recruit-image img {
  width: 650px;
  max-width: 90%;
  transform: translateY(-40px); 
}

/* ==================
   工具
================== */

.tool-img {
  position: absolute;
  left: 40px;
  bottom: 40px;
  width: 260px;
  z-index: 5;
}

/* ==================
   ボタン
================== */

.recruit-btn {
  display: block;
  width: 350px;
  background: #f8f8f8;
  text-align: center;
  padding: 35px;
  margin: 40px auto 0;
  text-decoration: none;
  position: relative;
  z-index: 5;
  border: 2px solid transparent;
  transition: all .3s ease;
}
.recruit-btn:hover {
  border-color: #365184;
  background: #fff;
}
.recruit-btn span {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: #081441;
}

.recruit-btn small {
  color: #6dd5ff;
  font-weight:800;
  font-size:15px;
}
@media screen and (max-width: 768px) {

  /* =====================
     全体
  ===================== */
  .recruit {
    padding: 80px 20px 0;
    margin-top:-470px;
  }

  .recruit-inner {
    max-width: 100%;
  }

  /* 横スクロール文字は非表示 */
  .recruit-marquee {
    display: none;
  }

  /* =====================
     タイトル周り
  ===================== */
  .recruit-head {
    transform: none;
    text-align: center;
  }
  .recruit-title {
    position: relative;
    transform: none; 
    overflow: visible;
    font-size:60px;
  }
  .recruit-title span {
    position: absolute;
    top: 60%;
    left: auto;
    right: 30px; 
    transform: translate(8px, -50%) rotate(-15deg);
    white-space: nowrap;
    font-size:40px;
  }
  .recruit-sub {
  font-size:20px;
  transform: translateX(-70px);
    text-align: center;
}
  .recruit-copy {
    margin: 30px auto 40px;
    transform: translateX(8px); 
    font-size:20px;
    font-weight:700;
  }

  /* =====================
     ポイント＋ボタン
     👉 中央ブロック
  ===================== */
  .recruit-points {
    position: static;
    transform: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 30px;
    margin-top: 30px;
  }

  .point {
    position: static;
    width: 100%;
    padding: 18px;
  }

  .point03 {
    grid-column: 1 / -1; /* 横いっぱい */
  }

  /* ボタンもこの流れで中央に */
  .recruit-btn {
    width: 100%;
    margin: 30px auto 40px;
  }

  /* =====================
     人物画像：最下部
  ===================== */
  .recruit-image {
    margin-top: -20px;
  }

  .recruit-image img {
    width: 110%;
    transform: none;
    max-width:none;
    transform: translateX(-5%);
  }

  /* =====================
     工具画像はスマホ非表示
  ===================== */
  .tool-img {
    display: none;
  }

}
.contact-form-section{
  padding:120px 20px;
}

.contact-heading{
  text-align:center;
  margin-bottom:60px;
}

.contact-label{
  display:inline-block;
  background:#A0E1FF;
  color:#365184;
  font-weight:800;
  font-size:1.2rem;
  padding:10px 80px;
  margin-bottom:30px;
}

.contact-text{
  max-width:650px;
  margin:0 auto;
  line-height:1.8;
  font-size:0.95rem;
}

.contact-form-wrap{
  max-width:1100px;
  margin:0 auto;
  background:#f3f8fc;
  padding:80px 100px;
}

.form-group{
  margin-bottom:40px;
}

.form-group label{
  display:block;
  font-weight:700;
  margin-bottom:12px;
  color:#081441;
}

.form-group input,
.form-group textarea{
  width:100%;
  max-width:550px;
  border:1px solid #cfd8df;
  border-radius:8px;
  padding:14px;
  font-size:16px;
  background:#fff;
}

.form-group textarea{
  max-width:100%;
  height:250px;
  resize:vertical;
}

.contact-btn{
  display:block;
  margin:60px auto 0;
  width:240px;
  height:65px;
  border:none;
  border-radius:50px;
  background:#081441;
  color:#fff;
  font-size:1.3rem;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.contact-btn:hover{
  transform:translateY(-3px);
}
/* =====================
  お問い合わせフォーム（スマホ）
===================== */
@media screen and (max-width: 768px) {

  .contact-form-section{
    padding: 60px 16px;
  }

  .contact-heading{
    margin-bottom: 40px;
  }

  .contact-label{
    font-size: 1rem;
    padding: 8px 40px;
    margin-bottom: 20px;
  }

  .contact-text{
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .contact-form-wrap{
    padding: 40px 20px;
  }

  .form-group{
    margin-bottom: 28px;
  }

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

  .form-group input,
  .form-group textarea{
    max-width: 100%;
    font-size: 15px;
    padding: 12px;
  }

  .form-group textarea{
    height: 180px;
  }

  .contact-btn{
    width: 100%;
    height: 56px;
    font-size: 1.1rem;
    margin-top: 40px;
  }
}
/* ==========================================
   サービスセクション全体
   ========================================== */
.service-section {
  padding-top: 80px;      /* 上側の余白はそのまま */
  padding-bottom: 20px;   /* ★下側の余白を 80px → 40px に縮める */
  padding-left: 20px;     /* 左側の余白 */
  padding-right: 20px;    /* 右側の余白 */
  background-color: #F5F5F5; /* 背景色（デザインに合わせて調整してください） */
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
  overflow: hidden; /* ボルトなどの はみ出し防止 */
}

.service-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

/* ==========================================
   左側：テキストコンテンツ
   ========================================== */
.service-content {
  flex: 1;
  max-width: 500px;
}

/* タイトル部分 */
.service-title-wrap {
  margin-bottom: 30px;
  margin-left: 80px;
}

.service-sub-title {
  display: block;
  font-size: 19px;
  color: #365184; 
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  font-weight:800;
  margin-left: 15px;
}
/* 「プロフェッショナル」だけ色を変える設定 */
.service-sub-title .color-change {
  color: #A0E1FF; /* ★ここにお好みの色を入れてください（例：手書き文字と同じ青グレーなど） */
}
.service-main-title {
  position: relative;
  font-size: 80px;
  font-weight:900;
  color: #365184; /* 濃紺 */
  line-height: 1;
  margin: 0 0 5px 0;
  letter-spacing: 0.05em;
}

/* 「Check it」の重ね文字 */
.service-accent-text {
  position: absolute;
  left: 220px;
  bottom: -10px;
  font-size: 55px;
  font-family: 'Allura', cursive;
  color: #A0E1FF; 
  font-weight: 700;
  transform: rotate(-10deg);
  white-space: nowrap;
}

.service-catch {
  font-size: 20px;
  font-weight: bold;
  color: #365184;
  margin: 0;
  display: inline-block;    /* 文字の幅に合わせる */
  background-color: #ffffff; /* 背景を白にする */
  padding: 4px 12px;
  margin-left: 20px;
}

/* 紹介文 */
.service-text {
  font-size: 16px;
  font-weight:700;
  line-height: 1.8;
  color: #000;
  margin-bottom: 70px;
  margin-left: 90px;
  margin-top: 50px;
}

/* 読みやすさ向上のための太字強調（必要に応じてクラスを当ててください） */
.service-text strong {
  font-weight: bold;
}

/* READMORE ボタン */
.service-btn-wrap {
  display: block;
  margin-left: 120px;
}

.service-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
  background-color: #fff; /* ほんのり透ける白（1.0にすると真っ白になります） */
  padding: 30px 60px;
  border: 2px solid transparent; /* 通常時は透明な枠線を敷いておく */
  transition: all 0.3s ease;
}
.service-btn:hover {
  border-color: #365184; /* ホバーしたときに濃紺の枠線を出す */
  background-color: #ffffff; /* 背景は白のまま（もし少し変えたい場合はここを調整） */
}
.service-btn .btn-eng {
  display: block;
  font-size: 25px;
  font-weight:800;
  color: #1a2942;
  line-height: 1;
  letter-spacing: 0.05em;
}

.service-btn .btn-jp {
  display: block;
  font-size: 15px;
  font-weight:800;
  color: #A0E1FF;
  margin-top: 4px;
  letter-spacing: 0.05em;
}


/* ==========================================
   右側：地図＆グラフィックエリア
   ========================================== */
.service-graphic-area {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px; /* 位置調整用の高さ確保 */
}

/* 地図のコンテナ（このサイズを基準にピンを絶対配置する） */
.map-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px; /* 地図画像の横幅に合わせて調整 */
}

.map-image {
  width: 130%;
  height: auto;
  display: block;
  transform: translateX(-60px) translateY(-60px);
}

/* 地図上のピン共通スタイル */
.map-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  white-space: nowrap;
}

/* 黒い丸（・） */
.pin-dot {
  width: 6px;
  height: 6px;
  background-color: #365184;
  border-radius: 50%;
  display: inline-block;
}

.pin-label {
  color: #365184; /* ★ここにお好みの色を入れてください（例：濃紺） */
  font-weight:700;
  font-size:15px
}
/* --- 各拠点の位置調整 (要微調整) ---
   地図画像の左上(0,0)から、％で位置を指定しています。
   実際の地図画像のピン位置に合わせて％の数値を変更してください。 */

/* 広島市 */
.pin-hiroshima {
  top: 57%;
  left: 46%;
}

/* 呉市 */
.pin-kure {
  top: 62%;
  left: 50%;
}

/* 東広島市 */
.pin-higashi-hiroshima {
  top: 59%;
  left: 57%;
}


/* 右下のボルト画像 */
.bolt-image {
  position: absolute;
  bottom: -20px;
  right: 60px;
  width: 130px; /* デザインに合わせたサイズに調整してください */
  height: auto;
  z-index: 10;
  pointer-events: none; /* ボルトがボタンなどの邪魔をしないように */
}
@media screen and (max-width: 768px){
  
  .service-container{
    flex-direction: column;
    gap: 0;
    position: relative;
  }
    .service-content{
    max-width: 100%;
    z-index: 2;
    position: relative;
  }

  .service-title-wrap,
  .service-btn-wrap{
    margin-left: 0;
    text-align: left;
  }

  .service-main-title{
    font-size: 60px;
  }

  .service-accent-text{
    font-size: 36px;
    left: 180px;
    bottom: -6px;
  }
  .service-text{
  margin-left: 20px;
  }
  .service-catch{
  margin-left: -10px;
  }
   .service-graphic-area{
    order: 2;                 /* ← 一番下へ */
    width: 100%;
    min-height: 260px;
    margin-top: -120px;       /* ← テキストの裏に潜り込ませる */
    z-index: 1;
    opacity: 0.25;            /* ← 背景感 */
    pointer-events: none;
  }
  .map-wrapper{
    max-width: none;
    width: 100%;
    transform: translate(80px, -500px);
  }

  .map-image{
    width: 160%;
    transform: translateX(-30%) translateY(0);
  }
  .map-pin{
    font-size: 12px;
    opacity: 0.7;
  }

  .pin-dot{
    width: 5px;
    height: 5px;
  }
  .map-pin.pin-hiroshima{
  left: 65px;  /* ← 数値を増やすほど左へ */
  top: calc(57% + 5vh);
  }
  .map-pin.pin-kure{
  top: calc(62% + 2vh + 25px); /* ← 少し下 */
  left: calc(50% - 80px); 
}
.map-pin.pin-higashi-hiroshima{
  top: calc(59% + 2vh + 17px); /* ← 少し下 */
  left: calc(57% - 87px);     /* ← 少し左 */
}
   .bolt-image{
    display:none;
  }

}
/* ==========================================
   会社概要（About Us）セクション全体
   ========================================== */
.about-us-section {
  position: relative;
  background-color: #1a2942; /* 特徴的な濃紺の背景色 */
  padding: 100px 0 160px 0;  /* 下部にはみ出す写真のスペースを考慮して、下のpaddingを広めに */
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  /* overflow: hidden; は写真のはみ出しを消してしまうため、ここでは書きません */
}

.about-us-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  min-height: 500px; /* レイアウト崩れ防止の高さ確保 */
  display: flex;
  justify-content: flex-end; /* コンテンツを右側に寄せる */
  padding: 0 40px;
}

/* ==========================================
   左側：重機画像（絶対配置で左側に固定）
   ========================================== */
.about-us-heavy-machinery {
  position: absolute;
  top: -40px; /* 上側にも少しはみ出させる場合（デザインに合わせて調整） */
  left: 0;
  width: 45%; /* コンテナに対しての横幅 */
  z-index: 2;
}

.machinery-image {
  width: 160%;
  height: auto;
  display: block;
  transform: scaleX(-1) translateX(230px) translateY(-70px);
}

/* ==========================================
   右側：テキストコンテンツ
   ========================================== */
.about-us-content {
  width: 50%; /* 右側半分を使う */
  position: relative;
  z-index: 3;
}

/* タイトル部分 */
.about-us-title-wrap {
  margin-bottom: 40px;
}

.about-us-sub-title {
  display: block;
  font-size: 20px;
  color: #A0E1FF; 
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  margin-left: 20px;
}

.about-us-main-title {
  position: relative;
  font-size: 72px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin: 0 0 5px 0;
  letter-spacing: 0.05em;
  
}

/* 「About Us」の重ね文字 */
.about-us-accent-text {
  position: absolute;
  left: 260px;
  bottom: -10px;
  font-size: 55px;
  font-family: 'Allura', cursive;
  color: #A0E1FF;
  font-weight: 700;
  transform: rotate(-10deg);
  white-space: nowrap;
}

/* 白枠のキャッチコピー */
.about-us-catch {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  color: #365184;
  background-color: #ffffff;
  padding: 6px 16px;
  margin: 0;
  margin-left: 20px;
}

/* 紹介文テキスト */
.about-us-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  color: #ffffff;
  margin-bottom: 40px;
  margin-left: 40px;
}

/* SERVICEブロックと合わせたホバーボタン */
.about-us-btn-wrap {
  display: block;
}

.about-us-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 25px 50px;
  background-color: #ffffff;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  margin-left: 70px;
}

.about-us-btn:hover {
  border-color: #ffffff;
  background-color: transparent; /* ホバーで背景が透明になり、文字と枠線が白になる */
}

.about-us-btn:hover .about-btn-eng {
  color: #ffffff;
}

.about-btn-eng {
  display: block;
  font-size: 25px;
  font-weight:800;
  color: #365184;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.about-btn-jp {
  display: block;
  font-size: 15px;
  font-weight:800;
  color: #A0E1FF;
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* 右上のボルト画像 */
.about-us-bolt {
  position: absolute;
  top: 170px;
  right: 10%;
  width: 100px;
  height: auto;
  z-index: 2;
  transform: rotate(15deg);
}

/* ==========================================
   下部：写真の無限自動スクロール（はみ出し構造）
   ========================================== */
.about-us-scroll-box {
  position: absolute;
  bottom: -250px; /* ★ここで下のセクションにどれくらいはみ出させるかを調整します */
  left: 30%;      /* 重機と被りすぎないように、少し右側からスタート */
  width: 70%;     /* スクロールを表示するエリアの横幅 */
  overflow: hidden; /* この枠からはみ出たスライドを見えなくする */
  z-index: 10;    /* 次のセクションの上に重なるように高く設定 */
}

/* 横に並べて動かすトラック */
.about-us-track {
  display: flex;
  width: calc(300px * 6 + 20px * 6); /* (画像の幅300px + 余白20px) * 6枚分 */
  animation: scrollRight 20s linear infinite; /* 20秒かけてループ（左から右へ） */
}

.about-us-slide {
  width: 300px; /* 写真1枚の横幅 */
  height: 300px; /* 写真1枚の高さ（比率に合わせて調整してください） */
  margin-right: 20px; /* 写真同士の間隔 */
  flex-shrink: 0;
}

.about-us-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を崩さずに枠線いっぱいに収める */
  border: 3px solid #ffffff; /* 写真の周りの白枠 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 綺麗に重なるように軽い影をプラス */
}

/* 左から右へ動かすアニメーション設定 */
@keyframes scrollRight {
  0% {
    transform: translateX(calc(-320px * 3)); /* 最初に3枚分左にずらした状態からスタート */
  }
  100% {
    transform: translateX(0);
  }
}
@media screen and (max-width: 768px) {
  html,
  body {
  overflow-x: hidden;
}
}
@media screen and (max-width: 768px){

  /* ===============================
     セクション全体
  =============================== */
  .about-us-section{
    padding: 80px 0 80px;
  }

  .about-us-container{
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 20px;
    margin-top: -80px;
  }

  /* ===============================
     重機画像（absolute解除）
  =============================== */
  .about-us-heavy-machinery{
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    margin-bottom: 40px;
    transform: translate(90px, 20px); 
    z-index: 1;
  }

  .machinery-image{
    width: 130%;
    transform: none;
    margin-left: -10%;
  }

  /* ===============================
     テキストコンテンツ
  =============================== */
  .about-us-content{
    width: 100%;
    text-align: center;
    position: relative;   /* ← 中のabsolute用の基準 */
    z-index: 2;
  }
  .about-us-title-wrap{
    position: absolute;
    top: -350px;        /* ← 重機にかぶせる */
    left: 0;
    right: 0;
    z-index: 3;
  }
  .about-us-sub-title{
    margin-left: 0;
    font-size: 20px;
  }

  .about-us-main-title{
    font-size: 60px;
  }

  /* About Us 装飾文字 */
  .about-us-accent-text{
    position: absolute;
    left: 230px;
    bottom: -20px;
    font-size: 40px;
  }

  .about-us-catch{
    margin: 10px auto 0;
    font-size: 18px;
  }

  .about-us-text{
    margin: -10px auto 60px;
    font-size: 18px;
    line-height: 1.9;
  }

  /* ===============================
     ボタン
  =============================== */
  .about-us-btn{
    margin: 0 auto;
    padding: 20px 40px;
  }

  /* ===============================
     ボルト非表示（スマホはごちゃつく）
  =============================== */
  .about-us-bolt{
    display: none;
  }

  /* ===============================
     写真スクロール（★最重要）
     absolute解除して下に配置
  =============================== */
  .about-us-scroll-box{
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 60px;
  }

  .about-us-track{
    animation-duration: 25s;
  }

  .about-us-slide{
    width: 220px;
    height: 220px;
  }
}
/* =====================
  事業内容 詳細ブロック
===================== */
.biz-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 20px 10px; 
}
.biz-wrap {
  background-color: #fff;
}
/* 各ブロック */
.biz-item {
  margin-bottom: 120px;
  text-align: center;
}

/* 水色タイトル帯 */
.biz-title {
  display: inline-block;
  background: #A0E1FF;
  color: #365184;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 30px;
  margin-bottom: 60px;
}

/* 画像＋テキスト */
.biz-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* 画像 */
.biz-image {
  flex: 0 0 380px;
}

.biz-image img {
  width: 100%;
  display: block;
}

/* テキスト */
.biz-text {
  flex: 1;
  font-size: 15px;
  line-height: 2;
  color: #333;
  margin-top: 20px; 
}
/* 機械メンテナンス（2番目）と家屋解体（4番目）を反転 */
.biz-item:nth-child(2) .biz-content,
.biz-item:nth-child(4) .biz-content {
  flex-direction: row-reverse;
}
@media screen and (max-width:768px){

  .biz-detail{
    padding: 60px 20px 10px;
  }

  /* ブロック間隔 */
  .biz-item{
    margin-bottom: 80px;
  }

  /* タイトル */
  .biz-title{
    font-size: 18px;
    padding: 10px 20px;
    margin-bottom: 30px;
    line-height: 1.5;
  }

  /* レイアウト */
  .biz-content{
    flex-direction: column !important;
    align-items: center;
    gap: 25px;
  }

  /* 画像 */
  .biz-image{
    flex: none;
    width: 100%;
    max-width: 280px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .biz-image img{
    width: 100%;
    display: block;
  }

  /* テキスト */
  .biz-text{
    margin-top: 0;
    font-size: 14px;
    line-height: 2;
    text-align: left;
  }

}
/* =====================
  求人情報 中身
===================== */
.job-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 20px 20px;
}

/* 各ブロック */
.job-item {
  margin-bottom: 120px;
}

/* タイトル（ネジ付き） */
.job-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}

.job-title {
  background: #A0E1FF;
  color: #365184;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 50px;
  position: relative;
}

.job-bolt {
  width: 38px;
  height: auto;
  top: -10px; 
}
.job-bolt.left {
  left: 50%;
  transform: translateX(55px); /* ← 左ネジ位置 */
  z-index:10;
}

.job-bolt.right {
  left: 50%;
  transform: translateX(-58px);  /* ← 右ネジ位置 */
}
/* コンテンツ */
.job-content {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  max-width: 900px;   /* 好きな幅 */
  margin: 0 auto; 
}

/* 画像 */
.job-image {
  flex: 0 0 340px;
}

.job-image img {
  width: 100%;
  display: block;
}

/* テキスト */
.job-text {
  flex: 1;
  font-size: 15px;
  line-height: 2;
  color: #333;
  margin-top: 10px;
}
/* 画像右・文字左 */
.job-item.reverse .job-content {
  flex-direction: row-reverse;
}
.job-item.text-shift .job-text {
  margin-left: 60px; /* ← 好きな量で調整 */
}
@media screen and (max-width:768px){

  .job-detail{
    padding: 60px 20px 20px;
  }

  /* ブロック間 */
  .job-item{
    margin-bottom: 80px;
  }

  /* タイトル */
  .job-title-wrap{
    gap: 12px;
    margin-bottom: 30px;
  }

  .job-title{
    font-size: 18px;
    padding: 10px 28px;
    text-align: center;
    
  }

  /* ネジ */
  .job-bolt{
    width: 30px;
  }

  .job-bolt.left{
    transform: translateX(40px);
  }

  .job-bolt.right{
    transform: translateX(-40px);
  }

  /* コンテンツ */
  .job-content{
    flex-direction: column !important;
    gap: 25px;
    align-items: center;
  }

  /* 画像 */
  .job-image{
    flex: none;
    width: 100%;
    max-width: 280px;
    margin: 20px auto 20px;
  }

  .job-image img{
    width: 100%;
    display: block;
  }

  /* テキスト */
  .job-text{
    margin: 0 !important;
    font-size: 14px;
    line-height: 2;
    text-align:center;
    
  }
  
}
/* =====================
  募集要項（job-spec）
===================== */
.job-spec {
  padding: 0 20px 80px;
}

.job-spec-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* タイトル */
.job-spec-title-wrap {
  text-align: center;
  margin-bottom: 50px;
}

.job-spec-line {
  display: block;
  width: 60px;
  height: 2px;
  background: #365184;
  margin: 0 auto 10px;
}

.job-spec-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  color:#365184;
}

/* 表全体 */
.job-spec-table {
  border-top: 1px solid #333;
  max-width: 750px;   /* ← 900px → 750px くらいに */
  margin: 0 auto;
}

/* 各行 */
.job-spec-row {
  display: flex;
  border-bottom: 1px solid #333;
  padding: 20px 0;
}

/* 左ラベル */
.job-spec-row dt {
  width: 200px;
  font-weight: bold;
  line-height: 1.8;
}

/* 右内容 */
.job-spec-row dd {
  flex: 1;
  margin: 0;
  line-height: 1.8;
}
.job-spec-row dt,
.job-spec-row dd {
  text-align: center;
}
@media screen and (max-width:768px){

  .job-spec{
    padding: 0 20px 60px;
  }

  .job-spec-title-wrap{
    margin-bottom: 35px;
  }

  .job-spec-title{
    font-size: 18px;
  }

  .job-spec-line{
    width: 40px;
  }

  .job-spec-table{
    border-top: none;
    max-width: 100%;
  }

  .job-spec-row{
    display: block;
    padding: 0;
    margin-bottom: 18px;
    border-bottom: none;
  }

  /* 項目名 */
  .job-spec-row dt{
    width: 100%;
    box-sizing: border-box;
    background: #f2f2f2;
    padding: 12px 15px;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
  }

  /* 内容 */
  .job-spec-row dd{
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 15px;
    background: #fff;
    text-align: left;
    line-height: 1.9;
    border: 1px solid #f2f2f2;
    border-top: none;
  }

}
/* =====================
  募集要項②（job-spec2）
===================== */
.job-spec2 {
  padding: 0 20px 80px;
}

.job-spec2-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* タイトル */
.job-spec2-title-wrap {
  text-align: center;
  margin-bottom: 50px;
}

.job-spec2-line {
  display: block;
  width: 60px;
  height: 2px;
  background: #365184;
  margin: 0 auto 10px;
}

.job-spec2-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #365184;
}

/* 表全体 */
.job-spec2-table {
  border-top: 1px solid #333;
  max-width: 750px;
  margin: 0 auto;
}

/* 各行 */
.job-spec2-row {
  display: flex;
  border-bottom: 1px solid #333;
  padding: 20px 0;
}

/* 左ラベル */
.job-spec2-row dt {
  width: 200px;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
}

/* 右内容 */
.job-spec2-row dd {
  flex: 1;
  margin: 0;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width:768px){

  .job-spec2{
    padding: 0 20px 60px;
  }

  .job-spec2-title-wrap{
    margin-bottom: 35px;
  }

  .job-spec2-title{
    font-size: 18px;
  }

  .job-spec2-line{
    width: 40px;
  }

  .job-spec2-table{
    border-top: none;
    max-width: 100%;
  }

  .job-spec2-row{
    display: block;
    padding: 0;
    margin-bottom: 18px;
    border-bottom: none;
  }

  /* 項目名 */
  .job-spec2-row dt{
    width: 100%;
    box-sizing: border-box;
    background: #f2f2f2;
    padding: 12px 15px;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
  }

  /* 内容 */
  .job-spec2-row dd{
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 15px;
    background: #fff;
    text-align: left;
    line-height: 1.9;
    border: 1px solid #f2f2f2;
    border-top: none;
  }

}
/* =====================
  会社概要 中身
===================== */
.company-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 20px 0;
}

/* 各ブロック */
.company-block {
  margin-bottom: 120px;
}

/* タイトル帯 */
.company-block-title {
  background: #A0E1FF;
  color: #365184;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 8px 90px;
  width: fit-content;
  margin: 0 auto 50px;
}

/* 中身 */
.company-block-content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

/* 画像 */
.company-block-image {
  flex: 0 0 340px;
}

.company-block-image img {
  width: 100%;
  display: block;
}

/* テキスト */
.company-block-text {
  flex: 1;
  font-size: 15px;
  line-height: 2;
  color: #333;
}

/* 理念：画像右 */
.company-block-content.reverse {
  flex-direction: row-reverse;
}
/* 代表挨拶のテキストを右に寄せる */
.company-block:first-of-type .company-block-text {
  margin-left: 60px;
}
/* 理念のテキストを右に寄せる */
.company-block:nth-of-type(2) .company-block-text {
  margin-left: 30px;
}
@media screen and (max-width: 768px) {

  /* 全体 */
  .company-detail {
    padding: 60px 16px 0;
  }

  /* ブロック間隔 */
  .company-block {
    margin-bottom: 80px;
  }

  /* タイトル */
  .company-block-title {
    font-size: 18px;
    padding: 8px 50px;
    margin-bottom: 40px;
  }

  /* 中身を縦並びに */
  .company-block-content {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  /* 画像 */
  .company-block-image {
    flex: none;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  /* テキスト */
  .company-block-text {
    font-size: 14px;
    line-height: 1.9;
    margin: 0;          /* ← PC用の margin-left を無効化 */
    
  }

  /* reverse も同じ縦並びに */
  .company-block-content.reverse {
    flex-direction: column;
  }

  /* 個別に寄せてた指定を完全解除 */
  .company-block:first-of-type .company-block-text,
  .company-block:nth-of-type(2) .company-block-text {
    margin-left: 0;
  }
}
/* =====================
  共通 導入ブロック
===================== */

.page-intro-block {
  position: relative;
  background: #0f2a4a;
  padding: 120px 20px 60px;
  overflow: hidden;
}

/* 白の斜めカット */
.page-intro-block::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background: #fff;

  /* 右上が直角・左上→右下が斜め */
  clip-path: polygon(
    100% 0,   /* 右上（直角） */
    100% 100%,/* 右下 */
    0 0       /* 左上 */
  );
}

/* 中身 */
.page-intro-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  z-index: 1;
}

/* 左側 */
.page-intro-left {
  flex: 1;
  color: #fff;
}

/* タイトル */
.page-intro-title {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 17px 60px;
  margin: 0 0 40px 110px;
}

.page-intro-title h2 {
  font-size: 48px;
  letter-spacing: 4px;
  color: #A0E1FF;
  font-weight:900;
}

/* テープ */
.page-intro-tape {
  position: absolute;
  width: 90px;
}

.tape-left {
  top: -26px;
  left: -40px;
  transform: rotate(-15deg);
}

.tape-right {
  bottom: -35px;
  right: -40px;
  transform: rotate(2deg);
}

/* テキスト */
.page-intro-text {
  font-size: 17px;
  line-height: 2;
  max-width: 520px;
  font-weight:800;
  margin-left: 120px;
}

/* 工具 */
.page-intro-tool {
  margin-top: 40px;
  width: 250px;
  transform: rotate(36.65deg);
}

/* 右側 */
.page-intro-right {
  position: relative;
  width: 360px;
  transform: none; 
}

/* チェキ */
.page-cheki {
  position: absolute;
  background: #A0E1FF;
  padding: 33px 15px 30px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.8);
  transform: none;
  width: 200px;
  height: 250px;
}

.page-cheki img {
  width: 85%;
  display: block;
  margin-left: 6%;
}
/* ボルト */
.cheki-bolt {
  position: absolute;
  top: -4px;
  right: 75px;
  width: 45px !important;
  transform: rotate(15deg);
}

/* 配置 */
.cheki-01 {
  top: 0;
  right: 0;
  transform: translateX(-300px);
}

.cheki-02 {
  bottom: 15px;
  right: 90px;
  transform: rotate(10.15deg);
}
.company-page .company {
  background-color: #fff;
}
@media screen and (max-width: 768px){

  .page-intro-block{
    padding: 80px 20px 40px;
  }

  /* 白の斜め背景 */
  .page-intro-block::after{
    width: 100%;
    height: 100%;
    clip-path: polygon(
      0 55%,
      100% 72%,
      100% 100%,
      0 100%
    );
    background:#F5F5F5;
  }

  .page-intro-inner{
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .page-intro-left{
    width: 100%;
    text-align: center;
  }

  .page-intro-title{
    margin: 0 auto 30px;
    padding: 12px 35px;
  }

  .page-intro-title h2{
    font-size: 42px;
    font-weight:900;
    color:#0f2a4a;
  }

  .page-intro-tape{
    width: 65px;
  }

  .tape-left{
    top: -24px;
    left: -25px;
  }

  .tape-right{
    right: -25px;
    bottom: -25px;
  }

  .page-intro-text{
    max-width: 320px;
    margin: 20px auto 0;
    font-size: 18px;
    line-height: 1.9;
  }


  /* チェキ */
  .page-intro-right{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    height: auto;
    margin-top: 20px;
  }

  .page-cheki{
    position: relative;
    width: 140px;
    height: 180px;
    padding: 25px 10px 20px;
  }

  .page-cheki img{
    width: 90%;
    margin: 0 auto;
  }

  .cheki-bolt{
    width: 30px !important;
    right: 50%;
    transform: translateX(50%);
  }

  .cheki-01{
    transform: rotate(-5deg);
    top: -160px;
    right: auto;
  }

  .cheki-02{
    transform: rotate(8deg);
    top: auto;
    right: auto;
    bottom: auto;
    margin-top: 20px;
   
  }

  /* 工具 */
  .page-intro-tool{
    width: 220px;
    display: block;
    margin: 30px auto 0;
    transform: rotate(52deg);
    position: relative;
    top: 250px;
    left: -100px;
    
  }

}
/* =========================================================
   施工実績ページ
========================================================= */

.works-page{
    position:relative;
    padding:110px 20px 140px;
    background:#fff;
    overflow:hidden;
}

.works-page-inner{
    width:100%;
    max-width:1000px;
    margin:0 auto;
}


/* =========================================================
   ページタイトル
========================================================= */

.works-page-title{
    position:relative;

    width:430px;
    max-width:90%;
    height:68px;

    margin:0 auto 100px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        #A0E1FF 0%,
        #0872a8 100%
    );

    box-shadow:
        0 8px 20px rgba(0,0,0,0.12);

    border-radius:2px;
}


/* タイトル */

.works-page-title h1{
    position:relative;
    z-index:2;

    margin:0;

    color:#fff;

    font-size:25px;
    font-weight:700;

    letter-spacing:3px;
    line-height:1;
}


/* =========================================================
   ボルト
========================================================= */

.works-bolt{
    position:absolute;

    width:27px;
    height:27px;

    object-fit:contain;

    z-index:3;

    filter:drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}


/* 左 */

.works-bolt-left{
    left:12px;
}


/* 右 */

.works-bolt-right{
    right:12px;
}


/* =========================================================
   実績ブロック
========================================================= */

.works-item{
    position:relative;

    margin-bottom:105px;

    padding:0 35px;
}


/* =========================================================
   実績タイトル
========================================================= */

.works-item-heading{
    display:flex;
    align-items:center;

    margin-bottom:22px;
}


/* 番号 */

.works-item-number{
    flex-shrink:0;

    width:48px;
    height:48px;

    margin-right:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#0b4770;

    color:#fff;

    font-size:15px;
    font-weight:600;

    letter-spacing:1px;
}


/* 見出し */

.works-item-heading h2{
    margin:0;

    color:#365184;

    font-size:24px;
    font-weight:700;

    letter-spacing:1px;
    line-height:1.5;
}


/* =========================================================
   見出し下ライン
========================================================= */

.works-item-line{
    width:100%;
    height:1px;

    margin-bottom:38px;

    background:#365184;
}


/* =========================================================
   写真グリッド
========================================================= */

.works-photo-grid{
    display:grid;

    gap:26px;
}


/* 3枚 */

.works-photo-grid-3{
    grid-template-columns:repeat(3, 1fr);
}


/* 2枚 */

.works-photo-grid-2{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
}

.works-photo-grid-2 .works-photo:nth-child(1){
    grid-column:1;
}

.works-photo-grid-2 .works-photo:nth-child(2){
    grid-column:2;
}


/* =========================================================
   写真
========================================================= */

.works-photo{
    position:relative;

    overflow:hidden;

    background:#ddd;

    aspect-ratio:4 / 3;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.12);
}


/* 写真 */

.works-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


/* ホバー */

.works-photo:hover img{
    transform:scale(1.04);

    filter:brightness(1.04);
}


/* =========================================================
   実績ブロックの最後
========================================================= */

.works-item:last-child{
    margin-bottom:0;
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width:768px){

    /* =========================
       施工実績ページ
    ========================== */

    .works-page{
        padding:75px 18px 90px;
    }


    .works-page-inner{
        width:100%;
        max-width:none;
    }


    /* =========================
       ページタイトル
    ========================== */

    .works-page-title{
        width:100%;
        max-width:300px;
        height:58px;

        margin:0 auto 65px;
    }


    .works-page-title h1{
        font-size:20px;
        letter-spacing:2px;
    }


    /* =========================
       ボルト
    ========================== */

    .works-bolt{
        width:22px;
        height:22px;
    }


    .works-bolt-left{
        left:9px;
    }


    .works-bolt-right{
        right:9px;
    }


    /* =========================
       実績ブロック
    ========================== */

    .works-item{
        margin-bottom:75px;
        padding:0;
    }


    /* =========================
       実績タイトル
    ========================== */

    .works-item-heading{
        align-items:flex-start;

        margin-bottom:17px;
    }


    /* =========================
       番号
    ========================== */

    .works-item-number{
        width:38px;
        height:38px;

        margin-right:12px;

        font-size:12px;

        flex-shrink:0;
    }


    /* =========================
       見出し
    ========================== */

    .works-item-heading h2{
        font-size:18px;

        letter-spacing:0.5px;
        line-height:1.6;

        padding-top:2px;
    }


    /* =========================
       見出し下ライン
    ========================== */

    .works-item-line{
        width:100%;
        height:1px;

        margin-bottom:45px;

        background:#365184;
    }


    /* =========================
       写真グリッド
    ========================== */

    .works-photo-grid-3,
    .works-photo-grid-2{
        grid-template-columns:1fr;

        gap:25px;
    }


    /* 2枚の施工実績も
       スマホでは1枚ずつ */

    .works-photo-grid-2 .works-photo:nth-child(1),
    .works-photo-grid-2 .works-photo:nth-child(2){
        grid-column:auto;
    }


    /* =========================
       写真
    ========================== */

    .works-photo{
        width:90%;
        margin:0 auto;
        aspect-ratio:4 / 3;

        box-shadow:
            0 6px 15px rgba(0,0,0,0.10);
    }


    .works-photo img{
        width:100%;
        height:100%;
    }


    /* =========================
       最後の実績
    ========================== */

    .works-item:last-child{
        margin-bottom:0;
    }

}