@charset "utf-8";

@import url('https://fonts.cdnfonts.com/css/aktiv-grotesk'); /* Webフォント読み込み */


@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/******非表示*******/

.top04-card-btn {
  display: none !important;
}

/******非表示*******/


.top04-card:visited {
  color: #fff;
}



/* =========================PC=========================================== */
@media screen and (min-width: 768px) {


 /* =========================
   ヒーローエリア共通
   ========================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;

}

/* キャッチコピー配置 */
.hero-caption {
  position: absolute;
  left: 50%;
  bottom: 40%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  padding: 0 40px;
}

.hero-caption h3 {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.hero-caption h4 {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.12em;

}


.hero-caption h3,
.hero-caption h4 {
  white-space: nowrap;   /* ← 折り返し禁止 */
    text-shadow:
    0 0 2px rgba(0,0,0,0.35),
    0 0 6px rgba(0,0,0,0.25),
    0 0 12px rgba(0,0,0,0.15);
}


/* ============================
   トップ：お知らせブロック
   ============================ */

.top_content01 {
  background: linear-gradient(to right, #0084d1, #003b80);
  color: #fff;
}

.top_content01 .info-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  padding: 20px 30px;
}

 .top_content01 {
    position: absolute;
    top: -60px; /* 位置調整：画像の赤枠くらいに近づける */
    right: 0px;
    width: 1200px;  /* 画像の横幅の雰囲気に合わせたサイズ */
    z-index: 50;   /* heroの上に出す */
    overflow: hidden;
  }

  /* 内側の幅調整（中央寄せレイアウトを解除） */
  .top_content01 .info-inner {
    max-width: 100%; 
    margin: 0;
    padding: 20px 30px;
  }


/* 左エリア（INFORMATION / お知らせ / 一覧を見る） */
.info-left {
  width: 260px;
  padding-right: 30px;
  border-right: 1px solid rgba(255,255,255,0.6);
  box-sizing: border-box;
}

.info-en {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 8px;
}

.info-ja {
  font-size: 1.0rem;
  margin: 0 0 28px;
}

.info-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-size: 0.8rem;
}

.info-more:hover {
  opacity: 0.85;
}

/* オレンジの小さい四角アイコン（2×2マス） */
.info-more-icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.info-more-icon::before,
.info-more-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #f39800; /* オレンジ */
}

.info-more-icon::before {
  top: 0;
  left: 0;
  box-shadow: 8px 0 0 #f39800; /* 右に1マス */
}

.info-more-icon::after {
  bottom: 0;
  left: 0;
  box-shadow: 8px 0 0 #f39800;
}

/* 右エリア：リスト部分 */
.info-right {
  flex: 1;
  padding-left: 30px;
  box-sizing: border-box;
}

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-list li {
  margin-bottom: 8px;
}

.info-list li a {
  display: grid;
  grid-template-columns: 120px 90px 1fr; /* 日付 / ラベル / タイトル */
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 0.8rem;
}

.info-list li a:hover .info-title {
  text-decoration: underline;
}

/* 日付 */
.info-date {
  opacity: 0.95;
}

/* 「お知らせ」ラベル */
.info-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: #ffefe0;
  color: #f39800;
  font-size: 0.8rem;
  border-radius: 0;
}

/* タイトル */
.info-title {

  white-space: nowrap;

}




/* ============================
   top_content02：保有車両ブロック
   ============================ */

.top_content02 {
  position: relative;
  background: #E7EDEE;   /* 下側の背景色 */
  padding: 800px 0 80px; /* 上側はカードを浮かせる分余白多め */
  overflow: hidden;
}

/* 上半分の背景写真（横幅100%優先） */
.top_content02::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;  /* 高さはこのまま割合でOK */
  background: url("../img/top_bk02.jpg") center top no-repeat;
  background-size: 100% auto; /* ← 横幅100%優先 */
  z-index: 0;
}


/* 内側ラッパー（カードのセンタリング用） */
.top02-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  z-index: 1;   /* 背景写真より前に出す */
}

/* 青いカード部分 */
.top02-card {
  position: relative; /* ← 必須 */
  max-width: 900px;
  margin: 0 auto;
  background: #0068b7;
  color: #fff;
  text-align: center;
  padding: 60px 80px 70px;
  box-sizing: border-box;
  transform: translateY(-80px);
}

/* 英語見出し */
.top02-en {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 10px;
}

/* 日本語見出し */
.top02-ja {
  font-size: 1.4rem;
  margin: 0 0 32px;
}

/* 説明テキスト */
.top02-text {
  font-size: 1rem;
  line-height: 2;
  margin: 0 0 40px;
}

/* オレンジの丸ボタン */
.top02-btn {
  position: absolute;
  right: 100px;   /* ← 希望の位置 */
  bottom: 40px;   /* ← 下からの位置（自由に調整可） */
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #E99213;
  border-radius: 50%;
  text-decoration: none;
  transition: 0.2s;
}

.top02-btn:hover {
  opacity: 0.85;
}

/* 右向き矢印（白） */
.top02-btn-arrow {
  display: block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}



/* ============================
   top_content03 メイン構造
   ============================ */

.top_content03 {
  padding: 80px 0 160px;
  position: relative;
  overflow: visible; /* ← 隠さず表示 */
background: linear-gradient(
    -45deg,
    #FFFFFF 0%,
    #FFFFFF 50%,
    #E7EDEE 50%,
    #E7EDEE 100%
  );
}

.top03-inner {
  /*max-width: 1200px;*/
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ----- 左側 ----- */

.top03-left {
  width: 40%;
  /* 左に余白を確保して、左端に寄りすぎないようにする */
  padding-left: max(150px, 6vw);  /* 80pxを基準に、画面幅で少し可変 */
  padding-right: 30px;
  box-sizing: border-box;
  z-index: 3;
  position: relative; /* ← これが基準になる */
}

.top03-en {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0057a8;
}

.top03-ja {
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #003b80;
}

.top03-title {
  font-size: 1.7rem;
  line-height: 1.4;
  margin-bottom: 30px;
  color: #003b80;
    font-weight: 700;
  }

.top03-text {
  font-size: 0.9rem;
  line-height: 2;
  margin-bottom: 40px;
  color: #1a1a1a;
}

/* オレンジボタン */
.top03-btn {
  position: absolute;
  right: 40px;   /* ← ここを増やせば右へ移動（例：80px, 120px） */
  bottom: 0px;
  display: flex;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #E99213;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.25s;
}

.top03-btn:hover {
  opacity: 0.8;
}

/* 矢印マーク */
.top03-btn-arrow {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

/* ----- 右側（写真） ----- */

/* 右画像を画面右端まで広げる */
.top03-right {
  position: relative;
  width: 60%;
}

.top03-right img {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(50vw + 50%);  /* 画面右側までフルワイドに伸ばす */
  height: 100%;
  object-fit: cover;
}

/* レイアウト調整：innerの高さを画像に合わせる */
.top03-inner {
  align-items: stretch; /* 左右の高さを揃える */
  position: relative;
}


/* ============================
   背景の巨大アウトライン文字
   ============================ */

.top03-bgtext {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  
  /* 画面幅に応じて自動調整（推奨値） */
    font-size: clamp(3rem, 7vw, 9rem);

  font-weight: 900;
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-stroke: 1px rgba(0, 106, 177, 0.5);
  letter-spacing: -0.08em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  
  /* 横スクロール防止 */
  max-width: 100%;
  overflow: hidden;
}

/* ============================
   top_content04：About us
   ============================ */

.top_content04 {
  padding: 150px 0 120px;
  background: #ffffff;
}

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

/* 見出し */
.top04-en {
  font-size: 3rem;
  font-weight: 700;
  color: #0057a8;
  margin-bottom: 10px;
}

.top04-ja {
  font-size: 1.2rem;
  color: #003b80;
  margin-bottom: 50px;
}

/* カード3カラム */
.top04-cards {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* 個別カード（全体リンク） */
.top04-card {
  position: relative;
  flex: 1 1 0;
  display: block;
  height: 420px;          /* 必要に応じて調整 */
  background-color: #999; /* 画像未設定時のベース色 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  overflow: hidden;
  text-decoration: none;
}

/* 画像を設定する場合はここを書き換え */
.top04-card--business {
 background-image: url("../img/top04_works03.jpg"); 
}

.top04-card--works {
   background-image: url("../img/top04_works06.jpg"); 
}

.top04-card--company {
  background-image: url("../img/top04_works02.jpg"); 
}


.top04-card--tec {
 background-image: url("../img/top04_works04b.jpg"); 
}

.top04-card--veh {
 background-image: url("../img/top04_works05.jpg"); 
}

.top04-card--uni {
 background-image: url("../img/top04_works01.jpg"); 
}




/* 下部を暗くするオーバーレイ */
.top04-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.20) 40%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: 1;
}

/* カード内コンテンツ */
.top04-card-inner {
  position: absolute;
  inset: 0;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
  padding-top:330px;
}

/* タイトル部分（左下寄せ） */
.top04-card-text {
  text-align: left;
}

.top04-card-title-en {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.top04-card-title-ja {
  display: block;
  font-size: 0.9rem;
}

/* オレンジ丸ボタン（右下） */
.top04-card-btn {
  align-self: flex-end;
  margin-top: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E99213;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.top04-card-btn-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #ffffff;
}

/* ホバー */
.top04-card:hover .top04-card-btn {
  transform: translateX(4px);
  opacity: 0.9;
}


.top04-card {
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

/* 黒い膜（オーバーレイ） */
.top04-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}

/* hoverで左→右 */
.top04-card:hover::before {
  transform: translateX(0);
}

/* 中身は前面に */
.top04-card-inner {
  position: relative;
  z-index: 2;
}








/* =========================
  top_content05_sdgs2
========================= */

.top_content05_sdgs2{
  padding: 4rem 0;
}

.top_content05_sdgs2_inner{
  margin: 0 auto;
  text-align: center;
  max-width:500px;
}

/* 上：ロゴ画像 */
.top_content05_sdgs2_logo{
  margin-bottom: 1.6rem;
}

.top_content05_sdgs2_logo img{
  width: 100%;
  height: auto;
  display: block;
}

/* 文面 */
.top_content05_sdgs2_text{
  margin: 0 auto 1.8rem;


}

.top_content05_sdgs2_text p{
  margin: 0;
  font-size: 1.1rem;
  line-height: 2.3;
  color: #000;
}

/* 下：アイコン列画像 */
.top_content05_sdgs2_icons img{
  width: 100%;
  height: auto;
  display: block;
}





}




/* ============================
   レスポンシブ
   ============================ */





@media (max-width: 1200px) {
  .top03-bgtext {
    display: none;
  }
}



@media (max-width: 1200px) {
/* ============================
   PCレイアウト（1201px以上）
   右画像が画面右端いっぱい
============================ */
.top_content03 {
  position: relative;
  background: #e7edee;
  padding: 100px 0;
  overflow: hidden;
}

/* 中身の横並び + 右側を絶対配置スペースに */
.top03-inner {
  position: relative;
  display: flex;
  padding-right: 50%; /* 右の画像ぶん開ける */
  align-items: center;
  z-index: 2;
}

/* 左ブロック */
.top03-left {
  width: 50%;
  padding-left: max(80px, 6vw);
  padding-right: 40px;
  box-sizing: border-box;
  z-index: 3;
}

/* 右画像：PCでは右端まで絶対配置 */
.top03-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;   /* 画面の半分 */
  height: 100%;
  z-index: 1;
}

.top03-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 大文字背景 */
.top03-bgtext {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 18vw;
  color: rgba(0, 60, 120, 0.08);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}



/* ============================
   1200px以下：通常の左右レイアウトに戻す
   画像を小さくし、絶対配置を解除
============================ */
@media (max-width: 1200px) {

  .top03-inner {
    display: flex;
    flex-direction: row;
    padding-right: 0;  /* 絶対配置ぶんのスペース解除 */
  }

  .top03-left {
    width: 50%;
    padding: 40px 20px;
  }

  /* 右画像を通常のレイアウトに戻す */
  .top03-right {
    position: relative;  /* 絶対配置 → 通常レイアウト */
    width: 50%;
    height: auto;
  }

  .top03-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* 背景の大文字は縮小 */
  .top03-bgtext {
    font-size: 40vw;
  }
}



/* ============================
   768px以下：縦積みレイアウト
============================ */
@media (max-width: 768px) {

  .top03-inner {
    flex-direction: column;
  }

  .top03-left,
  .top03-right {
    width: 100%;
    padding: 20px;
  }

  .top03-right img {
    width: 100%;
    height: auto;
  }
}





/* 画面幅が狭いときはフォント縮小 */
@media (max-width: 1023px) {


  .hero-caption h3 {
    font-size: 2.2rem;
    letter-spacing: 0.08em;
  }

  .hero-caption h4 {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
  }

  /* 必要に応じてPC用ヘッダーを少し小さく */
  .pc_head-inner {
    padding: 16px 20px;
  }
}

/* しっかりPCレイアウトに寄せる領域 */
@media (min-width: 1200px) {
  .hero-caption h3 {
    font-size: 3.6rem;
  }
  .hero-caption h4 {
    font-size: 1.8rem;
  }
}


  


@media (max-width: 1199px) {

  .top_content01 {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    margin-top: 0px; /* heroとの間隔（自由に調整可） */
    border-radius: 0;
  }

  .top_content01 .info-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 20px;
  }
}

/* ============================
   レスポンシブ調整
   ============================ */

@media (max-width: 1023px) {
  .top_content02 {
    padding: 120px 0 80px;
  }

  .top_content02::before {
    height: 40%; /* モバイルでは写真を少し低めに */
  }

  .top02-card {
    max-width: 90%;
    padding: 40px 20px 50px;
    transform: translateY(-40px);
  }

  .top02-en {
    font-size: 2.2rem;
  }

  .top02-text {
    font-size: 1.1rem;
  }

@media (max-width: 1200px) {
  .top03-inner {
    flex-direction: column;
    gap: 40px;
  }

  .top03-left,
  .top03-right {
    width: 100%;
  }

  .top03-bgtext {
    font-size: 6rem;
    bottom: -40px;
  }
}





/* =========================スマホ=========================================== */
@media screen and (max-width: 767px) {


 /* =========================
   ヒーローエリア共通
   ========================= */

.hero {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

/* ヒーロー動画 */
  .hero-video {
    position: relative;
    width: 100%;
    height: 400px;   /* SPは高さ300px固定 */
    overflow: hidden;
  }

.hero-video video {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}


.hero-overlay {
  position: absolute;
  inset: 0;

}

/* キャッチコピー配置 */
.hero-caption {
  position: absolute;
  left: 50%;
  bottom: 40%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  padding: 0 40px;
}

.hero-caption h3 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.hero-caption h4 {
  font-size: 1.0rem;
  font-weight: 400;
  letter-spacing: 0.12em;

}


.hero-caption h3,
.hero-caption h4 {
  white-space: nowrap;   /* ← 折り返し禁止 */
    text-shadow:
    0 0 2px rgba(0,0,0,0.35),
    0 0 6px rgba(0,0,0,0.25),
    0 0 12px rgba(0,0,0,0.15);
}


/* ============================
   トップ：お知らせブロック
   ============================ */

.top_content01 {
  background: linear-gradient(to right, #0084d1, #003b80);
  color: #fff;
}

.top_content01 .info-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 30px;
}

 .top_content01 {
    right: 0px;
    width: 100%;  /* 画像の横幅の雰囲気に合わせたサイズ */
    z-index: 50;   /* heroの上に出す */
 
  }

  /* 内側の幅調整（中央寄せレイアウトを解除） */
  .top_content01 .info-inner {
    max-width: 100%; 
    margin: 0;
    padding: 20px 30px;
  }


/* 左エリア（INFORMATION / お知らせ / 一覧を見る） */
.info-left {
  width: 100%;
 text-align:center;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-sizing: border-box;
  padding-bottom:20px;
}

.info-en {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 8px;
}

.info-ja {
  font-size: 1.0rem;
  margin: 0 0 28px;
}

.info-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-size: 1.0rem;
}

.info-more:hover {
  opacity: 0.85;
}

/* オレンジの小さい四角アイコン（2×2マス） */
.info-more-icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.info-more-icon::before,
.info-more-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #f39800; /* オレンジ */
}

.info-more-icon::before {
  top: 0;
  left: 0;
  box-shadow: 8px 0 0 #f39800; /* 右に1マス */
}

.info-more-icon::after {
  bottom: 0;
  left: 0;
  box-shadow: 8px 0 0 #f39800;
}

/* 右エリア：リスト部分 */
.info-right {
  flex: 1;
  padding: 20px 0px;
  box-sizing: border-box;
}

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-list li {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ffffff;  /* 白の点線を追加 */
}


.info-list li a {
  display: block;
  grid-template-columns: 120px 90px 1fr; /* 日付 / ラベル / タイトル */
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 0.8rem;
}

.info-list li a:hover .info-title {
  text-decoration: underline;
}

/* 日付 */
.info-date {
  opacity: 0.95;
}

/* 「お知らせ」ラベル */
.info-label {
  display: none;
 
}

/* タイトル */
.info-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}




/* ============================
   top_content02：保有車両ブロック
   ============================ */

.top_content02 {
  position: relative;
  background: #E7EDEE;   /* 下側の背景色 */
  padding: 350px 0px 0px; /* 上側はカードを浮かせる分余白多め */
  overflow: hidden;
}

/* 上半分の背景写真（横幅100%優先） */
.top_content02::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;  /* 高さはこのまま割合でOK */
  background: url("../img/top_bk02.jpg") center top no-repeat;
  background-size: 100% auto; /* ← 横幅100%優先 */
  z-index: 0;
}


/* 内側ラッパー（カードのセンタリング用） */
.top02-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  z-index: 1;   /* 背景写真より前に出す */
}

/* 青いカード部分 */
.top02-card {
  position: relative; /* ← 必須 */
  max-width: 100%;
  margin: 0 auto;
  background: #0068b7;
  color: #fff;
  text-align: center;
  padding: 20px 10px 30px;
  box-sizing: border-box;
  transform: translateY(-80px);
}

/* 英語見出し */
.top02-en {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 10px;
}

/* 日本語見出し */
.top02-ja {
  font-size: 0.8rem;
  margin: 0 0 32px;
}

/* 説明テキスト */
.top02-text {
  font-size: 1rem;
  line-height: 2;
  margin: 0 0 40px;
  text-align:left;
}

/* オレンジの丸ボタン */
.top02-btn {
  position: absolute;
  right: 10px;   /* ← 希望の位置 */
  bottom: 10px;   /* ← 下からの位置（自由に調整可） */
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #E99213;
  border-radius: 50%;
  text-decoration: none;
  transition: 0.2s;
}

.top02-btn:hover {
  opacity: 0.85;
}

/* 右向き矢印（白） */
.top02-btn-arrow {
  display: block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}



/* ============================
   top_content03 メイン構造
   ============================ */

.top_content03 {
  padding: 0px 10px 60px;
  position: relative;
  overflow: visible; /* ← 隠さず表示 */
background: linear-gradient(
    -45deg,
    #FFFFFF 0%,
    #FFFFFF 50%,
    #E7EDEE 50%,
    #E7EDEE 100%
  );
}

.top03-inner {
  /*max-width: 1200px;*/
  margin: 0 auto;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ----- 左側 ----- */

.top03-left {
  width: 100%;
  /* 左に余白を確保して、左端に寄りすぎないようにする */
  box-sizing: border-box;
  z-index: 3;
  position: relative; /* ← これが基準になる */
}

.top03-en {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0057a8;
  text-align:center;
}

.top03-ja {
  font-size: 0.8rem;
  margin-bottom: 40px;
  color: #003b80;
  text-align:center;
}

.top03-title {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 30px;
  color: #003b80;
    font-weight: 700;
     text-align:center;
  }

.top03-text {
  font-size: 1.0rem;
  line-height: 2;
  margin-bottom: 40px;
  color: #1a1a1a;
       text-align:center;
}

/* オレンジボタン */
.top03-btn {
  position: absolute;
  right: 10px;   /* ← ここを増やせば右へ移動（例：80px, 120px） */
  bottom: 0px;
  display: flex;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #E99213;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.25s;
}

.top03-btn:hover {
  opacity: 0.8;
}

/* 矢印マーク */
.top03-btn-arrow {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

/* ----- 右側（写真） ----- */

/* 右画像を画面右端まで広げる */
.top03-right {
  position: relative;
  width: 100%;
}

.top03-right img {
  object-fit: cover;
}

/* レイアウト調整：innerの高さを画像に合わせる */
.top03-inner {
  align-items: stretch; /* 左右の高さを揃える */
  position: relative;
}


  .top03-right {
    width: 100%;
    padding: 0px;
  }


/* ============================
   背景の巨大アウトライン文字
   ============================ */

.top03-bgtext {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  
  /* 画面幅に応じて自動調整（推奨値） */
    font-size: clamp(3rem, 7vw, 9rem);

  font-weight: 900;
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-stroke: 1px rgba(0, 106, 177, 0.5);
  letter-spacing: -0.08em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  
  /* 横スクロール防止 */
  max-width: 100%;
  overflow: hidden;
}

/* ============================
   top_content04：About us
   ============================ */

.top_content04 {
  padding: 20px 0 60px;
  background: #ffffff;
}

.top04-inner {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* 見出し */
.top04-en {
  font-size: 3rem;
  font-weight: 700;
  color: #0057a8;
  margin-bottom: 10px;
}

.top04-ja {
  font-size: 1.2rem;
  color: #003b80;
  margin-bottom: 50px;
}

/* カード3カラム */
.top04-cards {
  /*display: flex;*/
  justify-content: space-between;
  gap: 40px;
}

/* 個別カード（全体リンク） */
.top04-card {
  position: relative;
  flex: 1 1 0;
  display: block;
  height: 250px;          /* 必要に応じて調整 */
  background-color: #999; /* 画像未設定時のベース色 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  overflow: hidden;
  text-decoration: none;
  margin-bottom:15px;
}

.top04-card--business {
 background-image: url("../img/top04_works03.jpg"); 
}

.top04-card--works {
   background-image: url("../img/top04_works06.jpg"); 
}

.top04-card--company {
  background-image: url("../img/top04_works02.jpg"); 
}


.top04-card--tec {
 background-image: url("../img/top04_works04b.jpg"); 
}

.top04-card--veh {
 background-image: url("../img/top04_works05.jpg"); 
}

.top04-card--uni {
 background-image: url("../img/top04_works01.jpg"); 
}


/* 下部を暗くするオーバーレイ */
.top04-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.20) 40%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: 1;
}

/* カード内コンテンツ */
.top04-card-inner {
  position: absolute;
  inset: 0;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
}

/* タイトル部分（左下寄せ） */
.top04-card-text {
  text-align: left;
}

.top04-card-title-en {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.top04-card-title-ja {
  display: block;
  font-size: 0.8rem;
}

/* オレンジ丸ボタン（右下） */
.top04-card-btn {
  align-self: flex-end;
  margin-top: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E99213;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.top04-card-btn-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #ffffff;
}

/* ホバー */
.top04-card:hover .top04-card-btn {
  transform: translateX(4px);
  opacity: 0.9;
}



/* ============================
   top_content05：SDGsバナー
   ============================ */

.top_content05 {
  padding: 30px 0 30px;
  background: #ffffff;
}

.top05-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 画像だけ中央に表示 */
.top05-sdgs {
  margin: 0;
  text-align: center;
}

.top05-sdgs img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

  .top_content05_sdgs2{
    padding: 3rem 0;
  }

  .top_content05_sdgs2_text p{
    font-size: 0.9rem;
    line-height: 1.85;
    padding:10px;
  }



@media (max-width: 767px) {
  .top04-card {
    position: relative;
    overflow: hidden;
  }

  .top04-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    /* 左から半分くらいで透明になる黒い膜 */
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.45) 30%,
      rgba(0, 0, 0, 0.25) 50%,
      rgba(0, 0, 0, 0.0) 65%
    );
  }

  /* テキストは膜より前 */
  .top04-card-inner {
    z-index: 2;
  }
}





}


/* タブレット縦向き（iPad含む）でスマホヘッダーに切り替え */
@media screen and (max-width: 1023px) and (orientation: portrait) {
   
    .top04-card-title-en {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 4px;
    }
    
}