@charset "utf-8";

header {
  height:100vh;
  position: relative;
  overflow-x: hidden;
}

.fv-slider {
  padding-top: 10vh;
}

.fv-slider-row {
  height:85vh;
}

.fv-slider-photo {
  height: 85vh;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

.fv-slider-message {
  position: relative;
  z-index: 1;
  padding-top:15vh;
  padding-left:4vw;
}

.fv-slider-message h1 {
  font-weight:700;
  font-size:2.3vw;
  line-height:150%;
  margin-bottom:2vw;
}

.fv-slider-message h2 {
  font-weight:400;
  font-size: 0.7vw;
  line-height:200%;
}

section.ourservice {
  padding:8rem 0 0 0;
}

section.ourservice h1 {
font-weight: 700;
color: #eee;
font-size:6vw;
margin-bottom:2rem;
}

section.ourservice h2 {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding-left:1rem;
}

section.ourservice p {
  font-size: 0.9rem;
  line-height:150%;
  padding-left:1rem;
}

section.message {
  margin-bottom:8rem;
}

section.message h1{
  font-weight: 700; color: #eee; font-size:6vw; margin-bottom:2rem;
}

section.message h2{
  font-weight: 700; font-size: 0.9rem; margin-bottom: 1rem; padding-left:1rem;
}

section.message h3{
  font-weight:700; font-size:2vw; line-height:150%; margin-bottom:2vw; margin-left:1rem;
}

section.message img {
  border-radius:20px 0 0 20px;
}

.president-name {
  margin-left:1rem; font-size:0.9rem; line-height:150%;
}

section.news {
  background-color: #f2f2f2; padding:3rem;
}

section.news h1 {
  font-weight: 700; color: #bbb; font-size:2.5vw; margin-bottom:0.3rem; text-align:center;
}

section.news h2 {
  font-weight: 700; font-size: 0.9rem; margin-bottom: 1rem; padding-left:1rem; text-align:center;
}


/* --- Swiper --- */
.swiper {
  width: 100%;
  height: 100%; /* 親要素(col-md-6)の高さいっぱいに */
}
.swiper-slide {
  font-size: 18px;
  background: #fff;
  /* スライド内の画像をカバー表示 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をコンテナいっぱいに広げ、はみ出た部分はトリミング */
}


/* --- マーキー（横スクロールテキスト） --- */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* テキスト1回分の幅を左に移動させる */
        transform: translateX(-50%);
    }
}

.marquee-container {
    position: absolute; /* レイアウトから切り離す */
    bottom: 5vh;       /* ファーストビュー下部からの位置 */
    left: 0;
    width: 100%;        /* 画面幅いっぱいに */
    overflow: hidden;   /* はみ出しを隠し、横スクロールを防ぐ */
    z-index: 0;         /* 他のコンテンツの背面に配置 */
    pointer-events: none; /* テキストがクリック等を妨げないように */
}

.marquee-text {
  line-height:100%;
    /* テキストを強制的に1行にする */
    white-space: nowrap; 
    /* アニメーションを適用 (60秒で1周、線形、無限ループ) */
    animation: scroll-left 60s linear infinite;
    display: inline-block; /* アニメーションのためにインラインブロック化 */

    /* 画像001.jpgを参考にしたスタイル */
    font-size: 9vw; /* フォントサイズ (調整可) */
    font-weight: 700; /* 極太 */
    color: #e7e7e7; /* 薄いグレー (背景色#f2f2f2より少し濃く) */
    letter-spacing: 0.05em;
    text-transform: uppercase; /* すべて大文字に */
}

.marquee-text span {
    display: inline-block;
    padding-right: 5rem; /* 1セット目と2セット目の間の余白 */
}

/* --- Service Swiper (カードスライダー) --- */
.service-slider-section {
  position: relative;
  
  /* ご希望の「セクションの半分」で背景色を切り替えます */
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 45%, /* 上半分を白 */
    #f2f2f2 45%, /* 下半分を #f2f2f2 */
    #f2f2f2 100%
  );

  padding: 6rem 0 3rem 0; /* 上下に十分な余白（カード拡大分） */
  overflow: hidden; /* ヘッダー崩れ防止のため */
}

.serviceSwiper {
  width: 100%;
  /* ★重要: 左右のカードを見切れさせるため */
  overflow: visible; 
}

/* スライド（カードのラッパー） */
.serviceSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;

  /* ★重要: スケール変更時のtransition */
  transition: transform 0.4s ease, opacity 0.4s ease;
  
  /* デフォルト状態（アクティブでない時） */
  transform: scale(0.92); /* 0.85 から 0.92 に変更（間隔を詰める） */
  opacity: 0.7; /* 少し透明に */
  z-index: 1;
}

/* ★重要: アクティブ（中央）のスライド */
.serviceSwiper .swiper-slide-active {
  transform: scale(1); /* 原寸大（大きく見せる） */
  opacity: 1;
  z-index: 2; /* 他より手前に表示 */
}

/* カード本体 */
.service-card {
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 角丸を適用するため */
}

/* カード内Swiper（画像スライダー） */
.innerSwiper {
  width: 100%;
  height: 300px; /* 画像スライダーの高さ */
}
.innerSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カードのテキスト部分 */
.service-card-body {
  padding: 1.5rem;
}
.service-card-body h3 {
  font-size:1.3rem;
  border-bottom:1px solid #ccc;
  padding-bottom:1rem;
  font-weight: 700;
  color: #227934; /* テーマカラー */
  margin-bottom: 1rem;
}
.service-card-body ul {
  line-height:170%;
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  color: #555;
  /* カードの高さを揃えるための仮の高さ */
  min-height: 10rem; /* 120px から変更 */
}
.service-card-btn {
  background-color: #FFC107; /* 画像001.jpgの黄色いボタン */
  color: #333;
  font-weight: 900;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-size:0.8rem;
}
.service-card-btn:hover {
  background-color: #e0a800;
  color: #333;
}

/* Service Swiper ナビゲーションボタン */
.service-swiper-button-next,
.service-swiper-button-prev {
  color: #227934; /* テーマカラー */
  top: 50%;
  transform: translateY(-50%);
  width: 50px; /* ボタンのサイズ */
  height: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.service-swiper-button-next::after,
.service-swiper-button-prev::after {
  font-size: 1.5rem;
  font-weight: 700;
}

/* 位置の調整 (左右の画面端に) */
.service-swiper-button-prev {
  left: calc(50% - 600px); /* 中央から計算 (要調整) */
}
.service-swiper-button-next {
  right: calc(50% - 600px); /* 中央から計算 (要調整) */
}

@media (max-width: 1300px) {
  .service-swiper-button-prev {
    left: 1rem;
  }
  .service-swiper-button-next {
    right: 1rem;
  }
}

.fv-boh-link {
  height:5vh;
  position: relative;
  z-index: 1;
  font-size:0.8rem;
  font-weight:700;
}

.fv-boh-link img {
  height:1.7rem;
  padding:0 0.5rem;
}

.fv-boh-link a {
  text-decoration:none;
  color:#000;
}





/* =================================================================
* こんな会社 (カウントアップセクション)
* ================================================================= */

.company-stats-section {
  padding: 6rem 0;
  background-color: #ffffff; 
  overflow: hidden; 
}

.stats-main-title {
  text-align: center;
  font-weight: 900;
  color: #666; 
  font-size: 2rem;
  margin-bottom: 4rem; 
}

.stats-row {
  /* PC (col-md * 6列) の際、中央に寄せる */
  justify-content: center;
  /* g-4 g-md-5 (HTML側) によって、アイテム間の隙間が確保されます */
}

.stats-item-col {
  display: flex;
  flex-direction: column;
  border: 1px solid #227934; /* 枠線 1px */
  border-radius: 12px;       
  padding: 1.5rem;           /* 枠線の内側余白 */
  height: 100%; 
}

.stats-item-col h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #666; 
  margin-bottom: 0; /* ラベルと高さを揃えるため */
  
  text-align: left;
  
  /* ラベルと高さを揃える */
  display: flex;
  align-items: center;
}

/* 男女比ラベル */
.stats-item-col.stats-gender-male h2::after,
.stats-item-col.stats-gender-female h2::after {
  content: '';
  display: inline-block;
  padding: 0.3em 0.6em;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  margin-left: auto;
  vertical-align: middle;
}

/* 001.jpg の緑ラベル */
.stats-item-col.stats-gender-male h2::after {
  content: '男性';
  background-color: #80d4ff;
  color: #ffffff;
}

/* 001.jpg のピンクラベル */
.stats-item-col.stats-gender-female h2::after {
  content: '女性';
  background-color: #ffa5a5; 
  color: #ffffff;
}


.stats-number {
  line-height: 1;
  white-space: nowrap;
  
  display: flex;
  justify-content: center; /* 水平中央寄せ */
  align-items: baseline;   
  
  margin-top: 0.5rem; /* h2/ラベルとの間隔 */

  /* 単位のスタイル */
  font-size: 1.5rem; 
  font-weight: 700;
  color: #666;
}

/* カウントアップされる数値 */
.stats-number .count-up-number {
  font-family: "Oswald", sans-serif;
  font-size: 3.5rem; 
  color: #227934; 
  font-weight: 700; 
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-right: 0.25rem; 

  /* ▼▼▼ 変更箇所 ▼▼▼ */
  display: inline-block;
  width: 1.6em;       /* min-width ではなく width にして固定 */
  text-align: right;
  /* もし数字が見切れる場合は 1.7em や 1.8em に微調整してください */
}


/* =================================================================
 * スマホ表示 (SP) 最適化用メディアクエリ
 * ================================================================= */
@media (max-width: 767px) {

  header {
    height:100svh;
  }

  /* --- 全体の文字サイズ調整 --- */
  /* PCで vw 指定だった見出しを読みやすい固定サイズに変更 */
  section.ourservice h1,
  section.specialist h1,
  section.message h1 {
    font-size: 2.5rem; /* 大きすぎず小さすぎないサイズ */
  }
  section.news h1 {
    font-size: 2rem;
  }

  /* セクションの余白を詰める（間延び防止） */
  section.ourservice,
  section.specialist,
  section.specialist-box,
  section.message {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .navbar {
    height:5svh;
  }

  .navbar-toggler.custom-toggler {
    height: 5svh;
    width: 5svh;
}


  /* --- ファーストビュー (FV) --- */
  .fv-slider {
    padding-top: 5svh; /* ヘッダー分 */
    height: 95svh;
  }
  
  .fv-slider-row {
    height: 85svh;      /* 固定高さを解除 */
    flex-direction: column; /* 縦並びに */
  }

  /* 画像エリア */
  .fv-slider-photo {
    margin-top:3vh;
    width: 90%;
    height: 35vh;
    border-radius: 0 20px 20px 0;
  }

  /* メッセージエリア */
  .fv-slider-message {
    padding: 2rem 1.5rem;
    text-align: left;
    height:40svh;
  }

  .fv-slider-message h1 {
    font-size: 1.2rem; /* 読みやすいサイズへ */
    margin-bottom: 1rem;
  }

  .fv-slider-message h2 {
    font-size: 0.85rem;
    line-height: 1.8;
  }

  .fv-boh-link {
    font-size:0.6rem;
  }

  /* マーキー（流れる文字）の位置調整 */
  .marquee-container {
    bottom: 10svh; /* 少し下げる */
  }
  .marquee-text {
    font-size: 15vw; /* スマホでは迫力を出すため少し大きく */
    opacity: 0.5;    /* 文字と被るため薄くする */
  }

  .fv-boh-link {
    height:10svh;
    line-height:200%;
  }

  .fv-boh-link img {
    height:1.3rem;
  }


  /* --- Service Slider (事業内容) --- */
  .service-slider-section {
    padding: 3rem 0;
    /* 背景グラデーションの比率調整 */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, #f2f2f2 30%, #f2f2f2 100%);
  }

  /* スマホでは左右の矢印ボタンを消す（スワイプで操作するため） */
  .service-swiper-button-next,
  .service-swiper-button-prev {
    display: none;
  }

  /* ▼▼▼ カードのサイズ感調整 (1.4枚表示対応) ▼▼▼ */
  .serviceSwiper .swiper-slide {
    /* 両脇のカードを少し小さくして奥まらせる */
    transform: scale(0.85); 
    opacity: 0.6; /* 選択されていないカードは少し薄く */
    transition: transform 0.4s ease, opacity 0.4s ease;
  }
  
  /* 真ん中（アクティブ）のカード */
  .serviceSwiper .swiper-slide-active {
    transform: scale(1); /* 原寸大 */
    opacity: 1;
    z-index: 2;
    /* 影をつけて浮かび上がらせる */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
  }
  
  /* カードの角丸をスマホ用に少し調整 */
  .service-card {
    border-radius: 12px 12px 0 0;
  }


  /* --- Message (代表挨拶) --- */
  .president-name {
    margin-top: 1rem;
    font-size: 0.8rem;
  }


  /* --- Company Stats (会社データ) --- */
  .stats-main-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
  
  /* 2列表示のまま余白を狭く */
  .stats-item-col {
    padding: 1rem 0.5rem;
  }
  
  .stats-number .count-up-number {
    font-size: 2.5rem; /* 数字がはみ出ないように */
  }
  .stats-number {
    font-size: 1rem;
  }
  /* SP時の文字サイズ調整 */
  .stats-item-col h2 {
    font-size: 0.8rem;
    white-space: normal; 
    align-items: flex-start; /* ラベル改行対応 */
  }

  section.specialist-box,
  section.message {
    margin-bottom:3rem;
  }


}