@charset "UTF-8";
html {
    font-size: 62.5%;
}

body {
      font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
      color: #333333;
      line-height: 1.75;
      background-color: #ffffff;
      -webkit-font-smoothing: antialiased;
    }

img {
    width: 100%;
    vertical-align: center;
    object-fit: cover;
}

a {
    text-decoration: none;
    font-size: 1.4rem;
}

p {
    font-size: 1.7rem;
}

ul {
    list-style: none;
}



::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .wrapper {
      padding: 70px 30px;
    }
    

   
    /* 共通コンテナ */
    .container {
      max-width: 1040px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .container-sm {
      max-width: 1100px;
      margin: 0 auto;
    }

    /* 共通見出しデザイン */
    .section-title {
      font-size: 3rem;
      color: #03773b;
      font-weight: bold;
      position: relative;
      display: inline-block;
      margin-bottom: 40px;
      letter-spacing: 0.05em;
    }
    
    /* 見出しの下線（緑） */
    .section-title::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 3.5px;
      background-color: #03773b;
    }

    /* 中央寄せ見出し（事業内容・スポンサー活動など用） */
    .section-title-center {
      text-align: center;
      margin-bottom: 20px;
    }

    .section-title-center .section-title {
      font-size: 3rem;
    }

    .section-title-center .section-title::after {
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
    }

    /* 共通ボタン（枠線タイプ） */
    .link-btn {
      text-align: center;
      margin-bottom: 10px;
      bottom: 10px;
    }
    
    .btn-outline {
      
      padding: 10px 30px;
      border: 1px solid #03773b;
      color: #03773b;
      font-size: 1.5rem;
      font-weight: bold;
      background-color: transparent;
      transition: all 0.3s ease;
    }

    .btn-outline:hover {
      background-color: #005227;
      color: #ffffff;
    }

    .btn-outline span {
      display: inline-block;
      margin-left: 8px;
      font-size: 0.9rem;
    }

    
/* ==========================================
  ヘッダー
 =========================================== */

header {
  width: 100%;
  height: 80px;
  background:#f9f7f4;
  position:fixed;
  top:0;
  left:0;
  z-index: 40;
}

.header-inner {
  max-width: 1200px;
  margin: auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.header-logo img {
  height: 80px;
  width: 200px;
}

nav {
  margin-left: auto;
  margin-right: 30px;
}

.nav-menu {
  display: flex;
  gap: 50px;
  margin-right: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}



.nav-menu a {
  text-decoration: none;
  color: #342A2A;
  font-size: 1.7rem;
  font-weight: bold;
}



.toggle_btn,
.mask {
  display: none;
}

    /* ==========================================
    トップページ(メインビジュアル)
    =========================================== */
  /* --- メインビジュアル全体のハコ --- */
/* --- メインビジュアル全体のハコ --- */
/* =========================================================
   【上段】メインビジュアル（合谷選手画像・画面幅100%）
========================================================= */
/* =========================================================
   【上段】メインビジュアル（全体を横並びの土台にする）
========================================================= */
.mainvisual {
  position: relative;
  width: 100%;             /* 画面の横幅いっぱい（100%） */
  height: 630px;           /* PCで美しく収まる高さ */
  margin-top: 80px;
  overflow: hidden;
   /* 写真の後ろや隙間を締めるための黒 */

  /* ★重要：写真と player-lead を左右に並べるための設定 */
  display: flex;
  align-items: center;     /* 左右の中身を上下中央揃えにする */
}


/* --- 【左側】写真のハコ（幅を全体の半分〜やや広めに設定） --- */
.mv-player-box {
  flex: 1.7;               /* 右側の文字エリアより少し広めの比率（約55%） */
  height: 100%;
  overflow: hidden;
  position: relative;
}

.player-name {
  position: absolute;
  margin-block: 0;
  left: 0;
  bottom: 0;         /* 画像の下端から「15px」浮かせた位置に配置 */
  width: 100%;
  text-align: center;   /* 文字を中央寄せに */
  
  /* フォントのデザイン（右側の明朝体世界観に合わせる） */
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 3.2rem;    /* 主張しすぎずスマートに読めるサイズ */
  color: #e5e2e2;       /* 写真の上に映える白文字 */
  
  /* 写真の背景に紛れて文字が見えなくならないように、薄い影（シャドウ）を敷く */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  z-index: 5;
  background: linear-gradient(to right, rgba(244,58,77,0) 0%, rgba(61, 239, 49, 0.7) 20%, rgba(61, 239, 49, 0.7) 80%, rgba(244,58,77,0) 100%);
  padding: 15px 0;
}

@media (min-width: 768px) {
  .player-name br:first-of-type {
    display: none;
  }
}

.player-img {
  width: 100%;
  height: 100%;
  /* 枠いっぱいに広げてダイナミックに見せる */
  object-fit: cover;
  /* 選手の顔やボールが綺麗に収まるように中央基準 */
  object-position: center center;
  display: block;

  /* ★1. 画像自体の「質感」を上げてかっこよくする魔法
     コントラストを少し上げ、全体の明るさをわずかに抑えることで、
     ラグビーの力強さが引き立ち、黒背景に合う重厚なポスター風の質感になります */
  filter: contrast(1.15) brightness(0.9);

  /* ★2. 画像の右側を、右の黒背景（#111211）へ向かって滑らかに溶け込ませるマスク
     境界線がパキッと割れず、文字エリアとの一体感が劇的に上がります */
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

/* --- 【右側】応援テキストとボタンのハコ --- */
.player-lead {
  position: static;        
  flex: 1;                 /* 残りの幅（約45%）をきれいに埋める */
  height: 100%;
  
  /* ★重要：中身（テキストとボタン）を上下左右中央に配置する設定 */
  display: flex;
  flex-direction: column;  /* 上から下に「文字 ➔ ボタン」の順で並べる */
  justify-content: center; /* 垂直方向（上下）の中央寄せ */
  align-items: center;     /* 水平方向（左右）の中央寄せ */
  
  /* 左右・上下の余白調整 */
  padding: 0 15px;
  box-sizing: border-box;


  /* ★重要：背景色を少し透明（不透明度85%）にする設定
     #111211 を rgba に変換し、最後の数値を「0.85」にしています。お好みで 0.8 などに調整してください */
  background-color: rgba(3, 119, 59, 0.85); 
}

.player-lead .text {
  /* ★1. フォントを「游明朝」ベースの美しい明朝体に変更 */
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS P明朝", "MS Mincho", serif;
  
  /* ★2. 文字の太さを「少し細め（中細）」にして高級感を出す */
  font-weight: 500;        /* bold(700) から 500 に落とすことで劇的に洗練されます */
  
  /* ★3. 文字の間隔（レタースペース）を広げて「美しさ」と「余白」を演出 */
  letter-spacing: 0.08em;  /* キュッと詰まっていた文字に品が出ます */
  
  /* ★4. 行間を少しゆったり広げる */
  line-height: 1.75;

  /* サイズと色の基本設定 */
  font-size: 2.6rem;       /* ほんの少しだけ小さくして、箱の中の余白を贅沢に使う */
  color: #edecec;          
  text-align: left;
  margin-bottom: 40px;     /* ボタンとの間隔 */

  /* ★5. 文字にほんの少しだけ引き締める影（シャドウ）をプラス */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 
}


/* =========================================================
   ★新しく追加：スポンサー活動ボタンのデザイン
========================================================= */
.mv-btn-wrap {
  width: 100%;
  text-align: center;
}

.mv-btn {
  display: inline-block;
  background-color: #c5a059; 
  color: #eae8e8;
  text-decoration: none;
  
  /* ★ボタンの文字はハッキリ読めるように「ゴシック体」のまま、
     文字の間隔を少し広げてあげるのがモダンなWEBデザインの王道です */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.6rem;       /* 1.8rem から少しシュッとさせます */
  font-weight: bold;
  letter-spacing: 0.05em;  /* ボタンの文字も少し広げる */
  
  padding: 16px 50px;      /* 横幅を少し広げて、より頼りがいのあるボタンに */
  border-radius: 30px;      
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); 
  transition: all 0.3s ease; 
}

/* マウスを乗せたとき（ホバー時）のふわっとした演出 */
.mv-btn:hover {
  background-color: #025c2e; /* 少し濃い緑色に変化 */
  transform: translateY(-2px); /* 少しだけ上に浮き上がらせる */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   【下段】★ここを変更：会社メッセージ ＆ 実績エリア（画面幅100%）
========================================================= */
.mv-content-box {
  width: 100%;              /* ★こちらも画面の横幅いっぱい（100%）に敷き詰める */
  padding: 80px 0;          /* 上下に心地よいゆったりとした余白を作る */
  box-sizing: border-box;

  /* 右半分の箱だけでなく、画面の端から端まで背景画像をダイナミックに敷き詰める */
  background-image: url("../img/mainvisual.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- コンテンツを中央（最大1200px）に綺麗に整列させる枠 --- */
.mv-inner {
  max-width: 1200px;        /* 画面が広がってもコンテンツが行き過ぎないための最大幅 */
  margin: 0 auto;           /* 画面の真ん中に寄せる */
  padding: 0 40px;          /* 左右の最低限のクッション余白 */
  box-sizing: border-box;
  
  /* 上下にパーツを並べる設定 */
  display: flex;
  flex-direction: column;
  align-items: center;      /* メッセージも実績もすべて中央揃えにする */
}

/* 会社メッセージの塊 */
.mv-content {
  max-width: 800px;         /* 読みやすいように少しスリムに絞る */
  text-align: center;       /* 文字をすべて美しい中央寄せに */
  margin-bottom: 50px;      /* 下の実績エリアとの間のすき間 */
}

.mv-title {
  font-size: 4.0rem;        /* 全幅のスケール感に合わせて堂々としたサイズに */
  line-height: 1.5;
  color: #03773b;
  font-weight: bold;
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS P明朝", "MS Mincho", serif;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}

.mv-text {
  font-size: 1.8rem;
  color: #333333;
  line-height: 1.9;
}

/* --- 実績エリア：メッセージの真下に横並びで美しく配置 --- */
.achievement {
  display: flex;            /* 3つの実績を横並びにする */
  justify-content: center;
  gap: 24px;                /* ハコ同士のすき間を少し広げてゆったりと */
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 850px;         /* メッセージの幅と合わせて綺麗に収める */
}

/* 各実績のハコ（li） */
.achievement .list {
  flex: 1;                  /* 3つのハコが幅を均等に綺麗にシェア */
  text-align: center; 
  background-color: rgba(151, 246, 169, 0.9); 
  padding: 18px 20px;       /* 縦横のパディングを少し広げてリッチに */
  border-radius: 8px; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 軽い影をつけて洗練された印象に */
}

/* 「成約実績」などのラベル */
.achievement .content {
  font-size: 2.1rem;  
  color: #555555;
  font-weight: bold;
  margin-bottom: 6px;
  white-space: nowrap;      /* 文字の途中の意図しない改行を防ぐ */
}

/* 「500+」などの数字 */
.achievement .data {
  font-size: 3.4rem;        /* 数字を少し大きくして目立たせる */
  font-weight: bold;
  color: #03773b;     
  line-height: 1.1;
}
 

    /* ==========================================
      トップページ (ご挨拶)
    =========================================== */
    .greeting {
      width: 100%;
      height: 550px;
      padding: 80px 0;
      background-image: url("../img/greeting-image.png");
      background-size: cover;
      background-position: bottom;
      background-repeat: no-repeat;
      position: relative;
    }


    .greeting-text {
      font-size: 2rem;
      color: #333333;
      line-height: 2;
      margin-bottom: 35px;
    }

    /* ==========================================
      トップページ (事業内容)
    =========================================== */
    .services {
      background-color: #fafbfc;
    }

    .services .text {
      text-align: center;
      margin-bottom: 20px;
    }
    
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 20px;
    }

    .service-card {
      display: table-cell;
      background-color: #e2f9e2;
      border: 1px solid #eef2f0;
      padding: 20px;
      text-align: center;
      vertical-align: top;
      box-shadow: 0 4px 20px rgba(0,0,0,0.015);
    }

    .card-icon {
      font-size: 5rem;
      color: #03773b;
      margin-bottom: 20px;
    }

    .card-title {
      font-size: 2.5rem;
      color: #03773b;
      font-weight: bold;
      margin-bottom: 20px;
      letter-spacing: 0.05em;
    }

    .card-text {
      font-size: 1.7rem;
      color: #211f1f;
      line-height: 1.7;
      text-align: left;
    }


    /* ==========================================
      トップページ（会社概要）
    =========================================== */
    .company {
      background-color: #ffffff;
    }

    .company-layout {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    .company-left {
      display: table-cell;
      vertical-align: top;
      width: 60%;
      padding-right: 40px;
    }

    .company-right {
      display: table-cell;
      vertical-align: middle;
      width: 40%;
    }

    .overview-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 35px;
    }

    .overview-table th,
    .overview-table td {
      padding: 14px 0;
      border: 1px solid #4f514f;
      font-size: 1.5rem;
      vertical-align: top;
      padding-left: 20px;
    }




    .overview-table th {
      width: 20%;
      color: #333333;
      font-weight: bold;
      text-align: left;
      border-right: 1px solid #4f514f;
    }

    .overview-table td {
      color: #555555;
      width: 80%;
    }

    .office-img {
      width: 100%;
      height: 450px;
      position: relative;
      overflow: hidden;
    }

    
    
    .btn-wrap-center-all {
      text-align: center;
      margin-top: 30px;
    }

    /* ==========================================
      トップページ（スポンサー活動)
    =========================================== */
    .sponsor {
      background-color: #fafbfc;
    }
    
    .sponsor-lead {
      text-align: center;
      font-size: 1.7rem;
      color: #444444;
      margin-bottom: 40px;
    }
    
    /* 3枚の並びとすき間をコントロール */
.sponsor-grid {
  display: flex;
  justify-content: space-between; /* 両端に揃えて均等配置 */
  gap: 20px;                      /* 画像と画像の間隔を一括指定（margin-rightの代わり） */
  margin-bottom: 30px;
}

/* 画像を包むハコ、またはimgタグ自体 */
.sponsor-item {
  flex: 1;          /* 3枚の横幅を完全に「同じ比率（均等）」で引き伸ばす */
  height: 220px;    /* 高さをカンプのバランス（少し高め）に合わせて調整（お好みで変更OK） */
}

/* ★超重要：画像がハコの中で潰れたり伸びたりするのを防ぐ設定 */
.sponsor-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の比率を保ったまま、指定したサイズに綺麗にトリミングします */
}
    
    
    .btn-wrap-center-all {
      text-align: center;
      margin-top: 30px;
    }

    
    /* フッター */
    .site-footer {
      background-color: rgb(30, 148, 54);
      color: #f0ecec;
      padding: 20px 35px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 40px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding-bottom: 40px;
      margin-bottom: 25px;
    }

    .footer-logo {
      margin-top: -20px;
    }

    .footer-logo img {
      height: 80px;
      width: 200px;
    }
   

    .footer-info p {
      font-size: 1.3rem;
      color: #f0ecec;
      line-height: 1.7;
    }
    
    .footer-nav-block .title {
      font-size: 1.6rem;
      color: #f0ecec;
      margin-bottom: 20px;
      font-weight: bold;
    }

    .footer-links {
      list-style: none;
      padding-left: 0;
    }

    .footer-links li {
      font-size: 1.4rem;
      margin-bottom: 10px;
    }

    .footer-links li a {
      color: #dedcdc;
    }
    
    .footer-links label {
      cursor: pointer;
    }

    .footer-links label:hover, .footer-links a:hover {
      color: #ffffff;
    }

    .contact-btn {
      font-size: 0.75rem; 
      padding: 10px 15px;
      margin: 40px;
      border: 1px solid #eceaea;
    }


    .footer-copyright {
      text-align: center;
      font-size: 1.2rem;
      color: #e2e2e2;
    }

/* ==========================================
 COMPANYページ（会社概要)
=========================================== */

/* ==========================================
    LOWER PAGE VISUAL (下層メインビジュアル)
=========================================== */
.lower-visual {
  width: 100%;
  margin-top: 80px;
  height: 300px;
  background-image: url("../img/lower-visual.png");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.lower-title {
  font-size: 3rem;
  color: #03773b;
  font-weight: 700;
  position: relative;
  display: inline-block;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}

.lower-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background-color: #03773b;
}

.breadcrumbs {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 2rem;
  color: #383838;
  letter-spacing: 0.05em;
}

.breadcrumbs a {
  color: #484848;
  font-size: 1.5rem;
}

.breadcrumbs span {
  color: #333333;
  font-size: 1.5rem;
}


/* ==========================================
会社概要ページ
=========================================== */
.company-content {
  padding: 90px 0;
  background-color: #ffffff;
}

.content-block {
  margin-bottom: 65px;
}

.content-block:last-child {
  margin-bottom: 0;
}


/* 会社概要のテーブルスタイル（超重要） */
.company-table {
  max-width: 930px;
  margin-inline: auto;
  border-collapse: collapse;
}

.company-table tr {
  border: 1px solid #88918d; 
  /* カンプの細く上品な境界線 */
}


.company-table th {
  width: 25%;
  padding: 20px 15px;
  color: #222222;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid #88918d;
  background-color: #fafcfb; /* 左側の項目名に僅かなトーンを付与 */
}

.company-table td {
  width: 75%;
  padding: 20px 20px;
  color: #444444;
  font-size: 1.8rem;
  vertical-align: top;
  line-height: 1.8;
}

.branch-list {
  display: flex;
  flex-direction: column;
  padding-left: 0;
}

.branch:last-child {
  margin-top: 15px;
}



/* ==========================================
      スポンサー活動ページ
    =========================================== */
  .sponsor-intro-text {
    text-align: center;
    margin-block: 45px;
  }

  .person-profile {
    display: flex;
    gap: 50px;
    align-items: flex-start;
  }

  .person-image {
    width: 40%;
  }

  .person-image .name {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 3px;
  }

  .person-career {
    width: 60%;
  }

  .person-career .career {
    font-size: 2.3rem;
  }

  .person-career p {
    margin-bottom: 10px;
  }

  .person-career .link {
    margin-top: 30px;
    text-align: center;
  }

  .person-career .link a {
    font-size: 1.8rem;
    font-weight: bold;
    border-bottom: 1.5px solid;
  }


.activities-section {
  padding: 40px 0 100px 0;
}

/* 活動紹介の左側の縦線アクセント付き見出し */
.sub-section-title {
  font-size: 2.5rem;
  color: #03773b;
  font-weight: 700;
  padding-left: 12px;
  border-left: 4px solid #03773b; /* 左側の緑の縦線 */
  margin-bottom: 35px;
  letter-spacing: 0.05em;
}

/* 縦並びのカードリスト */
.activity-list {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 24px; /* カード同士の間隔 */
}

/* 横長のアクティビティカード */
.activity-card {
  display: flex;
  background-color: #ffffff;
  border: 1px solid #e1e8e5; /* カンプの細い境界線 */
  overflow: hidden; /* 角丸を中身の画像にも適応 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

/* カードの左側：画像エリア */
.card-media {
  width: 38%; /* カンプ比率に合わせた絶妙な横幅 */
  
}

.card-media img {
  aspect-ratio: 4/3;
  height: 100%;
}


/* カードの右側：テキストエリア */
.card-body {
  width: 62%;
  padding: 30px 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.activity-card .card-title {
  font-size: 2.2rem;
  color: #03773b; /* 濃いめのグリーン */
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.activity-card .card-text {
  font-size: 1.7rem;
  color: #555555;
  line-height: 1.8;
}

/* 追加：企業紹介のリンクボタンエリア */
.activity-card .card-link {
  margin-top: 20px; /* テキストとの間隔 */
  text-align: left;  /* ボタンを左寄せに */
}

.btn-sponsor-site {
  display: inline-block;
  padding: 10px 24px;
  background-color: #03773b; /* コーポレートカラーの緑 */
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px; /* 緩やかな角丸 */
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(3, 119, 59, 0.15);
}

/* ホバー（マウスを乗せたとき）のエフェクト */
.btn-sponsor-site:hover {
  background-color: #02572b; /* 少し濃い緑にして「押せる感」を出す */
  color: #ffffff;
  transform: translateY(-2px); /* フワッと上に少し浮く */
  box-shadow: 0 6px 15px rgba(3, 119, 59, 0.25);
}



/* スマホ対応 レスポンシブ */
@media (max-width: 768px) {
  /*=====共通=====*/
  .wrapper {
      padding: 30px 0;
    }


  /*=====ヘッダー====*/
  header {
    width: 100%;
    height: 80px;
    padding: 0;
    z-index: 10;
  }

  .header-logo img {
    height: 70px;
  }

  nav {
  width: 250px;
  max-width: 80%; 
  background: #02974a;
  margin-right: 0;
  padding: 60px 25px 25px; /* 上の×ボタン用の余白 */
  position: fixed;
  top: 0;
  right: -350px;
  bottom: 0;
  opacity: 0;
  visibility: hidden; 
  overflow-y: auto;
  transition: all 0.4s ease-out; 
  z-index: 999;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1); 
  display: block; /* 縦並びの基本 */
  }

  .open nav {
  right: 0;
  opacity: 1;
  visibility: visible;
  }

  .open .mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(93, 64, 55, 0.9);
    z-index: 950;
    cursor: pointer;
  }

  nav .nav-menu {
    display: block;
    text-align: left; /* 親から左寄せを徹底 */
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* メニューの各項目（About, News, Menuなど） */
  nav .nav-menu li {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
  }

  /* リンク文字の見た目 */
  nav .nav-menu li a {
  display: block;
  padding: 15px 25px;
  color: #eceaea;
  text-decoration: none;
  font-family: serif; /* お店の雰囲気に合わせたセリフ体 */
  }

  
  .toggle_btn {
  display: block;
  background-color: rgba(248, 246, 242, 0.9);
  border-radius: 10%;
  width: 60px; 
  height: 60px;
  cursor: pointer;
  position: fixed;
  top: 5px;
  right: 10px;
  box-shadow: 0 2px 10px rgba(52, 42, 42, 0.1);
  z-index: 1000;
  /* buttonタグのスタイルリセット */
  border: none;
  padding: 0;
  appearance: none;
  outline: none;
}

/* 3本線の共通設定 */
.toggle_btn span,
.toggle_btn span::before,
.toggle_btn span::after {
  content: "";
  display: block;
  width: 30px;
  height: 1.5px;
  background-color: #342A2A;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s ease; /* アニメーションの速度 */
}

/* 真ん中の線（span本体） */
.toggle_btn span {
  top: 50%;
  transform: translate(-50%, -50%); /* 完全に中央 */
}

/* 上の線（before） */
.toggle_btn span::before {
  top: -12px; /* 真ん中から12px上に配置 */
}

/* 下の線（after） */
.toggle_btn span::after {
  top: 12px;  /* 真ん中から12px下に配置 */
}

/* --- オープン時の「×」 --- */

/* 1. 真ん中の線を透明にする */
.open .toggle_btn span {
  background-color: transparent;
}

/* 2. 上の線を45度傾ける */
.open .toggle_btn span::before {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* 3. 下の線を-45度傾ける */
.open .toggle_btn span::after {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

/* --- マスク（ふわっと出すために display ではなく visibility を使用） --- */


/*======トップページ（メインビジュアル）========*/
/* =========================================================
   ★スマホ用（768px以下）：画像（文字入り）を上、メッセージを下に完全分離
========================================================= */
  .mainvisual {
    flex-direction: column;    /* 左右並びを「縦並び」に変更 */
    height: auto;              /* 固定高さを解除して中身の量に合わせる */
    margin-top: 60px;          /* スマホ用ヘッダーの高さに微調整（必要に応じて変更） */
  }

  /* --- 【上段・左】写真のハコ --- */
  .mv-player-box {
    flex: none;                /* PC版の比率（1.7）をリセット */
    width: 100%;
    height: 400px;             /* スマホ画面で写真が迫力を持って見える高さに固定 */
  }

  .player-img {
    /* object-fit: cover と object-position: center center はPC版を継承 */
    
    /* ★重要：スマホは縦並びになるため、グラデーションマスクの方向を
       「右（to right）」から「下（to bottom）」に向かって消えるように切り替えます */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  }

  .player-name {
    padding: 5px 0;
    bottom: 0;
    font-size: 2.4rem;
  }

  /* --- 【上段・右】応援テキストとボタンのハコ --- */
  .player-lead {
    flex: none;                /* PC版の比率（1）をリセット */
    width: 100%;
    height: auto;              /* 高さをコンテンツ（文字とボタン）に合わせる */
    padding: 45px 25px;        /* スマホで見栄えの良い上下左右の余白 */
    
    /* PC版の赤背景（rgba）を継承しつつ、スマホの画面いっぱいに敷き詰めます */
  }

  .player-lead .text {
    font-size: 2.0rem;         /* スマホ画面に合わせて文字サイズを最適化 */
    line-height: 1.6;
    text-align: center;        /* スマホでは文字を中央揃えにすると綺麗に収まります */
    margin-bottom: 30px;       /* ボタンとの間隔を少しキュッと詰める */
  }

  /* スポンサー活動ボタン */
  .mv-btn {
    font-size: 1.5rem;
    padding: 14px 40px;        /* スマホの指で押しやすい適度なサイズ感に */
    width: 80%;                /* ボタンを少し幅広にして押しやすく */
    max-width: 300px;
    box-sizing: border-box;
  }

  /* --- 【下段】会社メッセージ ＆ 実績エリア --- */
  .mv-content-box {
    padding: 60px 0;          /* 上下の余白を少しコンパクトに */
  }

  .mv-inner {
    padding: 0 20px;           /* 左右のクッション余白をスマホ用に狭める */
  }

  /* 会社メッセージの塊 */
  .mv-content {
    margin-bottom: 40px;
  }

  .mv-title {
    font-size: 2.6rem;         /* スマホで1〜2行で綺麗に収まるサイズに縮小 */
    line-height: 1.4;
    margin-bottom: 20px;
  }

  .mv-text {
    font-size: 1.5rem;         /* デバイスに合わせて読みやすいサイズに */
    line-height: 1.7;
    text-align: left;          /* 長文は左揃えの方が見やすいため維持（中央揃えが良い場合はcenterに） */
  }
  
  /* PC用の強制改行（br）がスマホの幅だと不自然な位置になるのを防ぐ */
  .mv-text br {
    display: none;
  }

  /* --- 実績エリア --- */
  .achievement {
    flex-direction: row;       /* 3つの実績はスマホでも横並びをキープ */
    gap: 10px;                 /* ハコ同士の間隔をキュッと詰める */
  }

  /* 各実績のハコ（li） */
  .achievement .list {
    padding: 12px 5px;         /* 画面からはみ出さないように余白をミニマムに */
  }

  .achievement .content {
    font-size: 1.1rem;         /* 「成約実績」などの文字サイズ */
  }

  .achievement .data {
    font-size: 2.2rem;         /* 「500+」などの数字をスマホサイズに */
  }


/*====== トップページ（ご挨拶） ========*/
.greeting {
  padding: 30px 0;
  margin-inline: 5px;
  height: 450px;
}

.greeting .section-title {
  margin-left: 15px;
}

.greeting-text {
  margin-inline: 15px;
}

.greeting-text br {
  display: none;
}

/* ==========================================
      トップページ (事業内容)
  =========================================== */

    .services .text {
      text-align: left;
    }
    
    .services-grid {
      display: flex;
      flex-direction: column;
    }

    .service-card {
      display: table-cell;
      background-color: #e2f9e2;
      border: 1px solid #eef2f0;
      padding: 20px;
      text-align: center;
      vertical-align: top;
      box-shadow: 0 4px 20px rgba(0,0,0,0.015);
    }

    .card-icon {
      font-size: 5rem;
      color: #03773b;
      margin-bottom: 20px;
    }

    .card-title {
      font-size: 2.5rem;
      color: #03773b;
      font-weight: bold;
      margin-bottom: 20px;
      letter-spacing: 0.05em;
    }

    .card-text {
      font-size: 1.7rem;
      color: #211f1f;
      line-height: 1.7;
      text-align: left;
    }

    /* ==========================================
      トップページ（会社概要）
    =========================================== */

  .company-layout {
    display: flex;
    flex-direction: column;
  }

  /* テーブルが入っている左側のハコ */
  .company-left {
    width: 100%;
    padding-right: 0;
    display: flex;          /* ★中身（テーブルとボタン）をコントロール */
    flex-direction: column; /* 縦に並べる */
  }

  /* テーブル本体 */
  .overview-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;    /* 写真との間のすき間 */
  }

  /* テーブルの文字サイズ調整 */
  .overview-table th,
  .overview-table td {
    padding-block: 14px;
    border: 1px solid #4f514f;
    font-size: 1.5rem;
    vertical-align: top;
    padding-left: 5px;
  }

  /* 写真が入っている右側のハコ */
  .company-right {
    width: 100%;            
    margin-bottom: 25px;    /* 写真とボタンの間のすき間 */
  }

  /* 写真のサイズ制限を解除してスマホに最適化 */
  .office-img {
    width: 100%;
    height: auto;           /* 450px固定を解除 */
    overflow: visible;
  }

  .office-img img {
    width: 100%;
    height: auto;           /* 350px固定を解除して綺麗な比率に */
    display: block;
  }

  /* ★ボタンを包むハコ：一番下（3番目）に持ってくる */
  .company-left .btn-wrap-center-all {
    order: 3;               /* ★写真の下（3番目）に強制移動 */
    margin-top: 10px;       /* 隙間の微調整 */
    text-align: center;     /* ボタンを中央に */
    width: 100%;
  }

  /* ボタン自体の浮きをリセットして正常化 */
  .btn-wrap-center-all a {
    position: static;
    display: inline-block;
  }

    /* ==========================================
      トップページ（スポンサー活動）
    =========================================== */

    .sponsor-lead {
      text-align: center;
      font-size: 1.7rem;
      color: #444444;
      margin-bottom: 40px;
    }

    .sponsor-lead {
      text-align: left;
    }
    
    
.sponsor-grid {
  flex-direction: column;
}

/* 画像を包むハコ、またはimgタグ自体 */
.sponsor-item {
  aspect-ratio: 5/4;
}

/* ★超重要：画像がハコの中で潰れたり伸びたりするのを防ぐ設定 */
.sponsor-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の比率を保ったまま、指定したサイズに綺麗にトリミングします */
}
    
    
.btn-wrap-center-all {
  text-align: center;
  margin-top: 30px;
 }

 /* ==========================================
      トップページ（お問い合わせ）
    =========================================== */
.contact-layout {
  display: flex;
  flex-direction: column;
}

/* ==========================================
会社概要ページ
=========================================== */

.content-block {
  margin-inline: 15px;
}


/* ==========================================
      スポンサー活動ページ
  =========================================== */
  .sponsor-intro-text {
    text-align: left;
    margin-inline: 15px;
  }

  .sponsor-intro-text br {
    display: none;
  }

  .person-profile {
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
  }

  .person-image,
  .person-career {
    width: 100%;
  }


.activities-section {
  padding: 40px 0 100px 0;
}

/* 活動紹介の左側の縦線アクセント付き見出し */
.sub-section-title {
  margin-left: 15px;
}

/* 縦並びのカードリスト */
.activity-list {
  margin-inline: 15px;
  gap: 10px; /* カード同士の間隔 */
}

/* 横長のアクティビティカード */
.activity-card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
}

/* カードの左側：画像エリア */
.card-media {
  width: 100%; 
  aspect-ratio: 5/4;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の比率を保ったまま、指定したサイズに綺麗にトリミングします */
}


/* カードの右側：テキストエリア */
.card-body {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.activity-card .card-title {
  font-size: 2.2rem;
  color: #03773b; /* 濃いめのグリーン */
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
  padding-left: 10px;
}

.activity-card .card-text {
  font-size: 1.7rem;
  color: #555555;
  line-height: 1.8;
  padding-inline: 10px;
}

 /* ==========================================
     お問い合わせページ
   =========================================== */

.contact-text p:last-child {
  margin-inline: 15px;
  text-align: left;
}



/*======= フッター ======*/
.site-footer {
  margin-top: 10px;
    /* 左右の余白をスマホ用に少し狭める */
    padding: 20px; 
  }

  /* 3列並びを縦1列に変更 */
  .footer-grid {
    grid-template-columns: 1fr; /* 縦1列（1カラム）にする */
    gap: 10px;                  /* 各ブロックの上下のすき間 */
    padding-bottom: 30px;
    margin-bottom: 20px;
    text-align: center;         /* ★中身をすべて中央寄せにする */
  }

  /* ロゴ画像のハコ調整 */
  .footer-logo {
    margin: 0 auto;  /* ロゴを真ん中に寄せる */
    width: 200px;               /* スマホに合わせて少し小さく */
    height: auto;
  }

  /* 住所や電話番号のエリア */
  .footer-info p {
    font-size: 1.2rem;          /* スマホで見やすい文字サイズに */
    line-height: 1.8;
  }

  /* 「メニュー」「事業内容」などの見出し */
  .footer-nav-block .title {
    font-size: 1.4rem;
    margin-bottom: 12px;
    position: relative;
    display: inline-block;     /* 中央寄せの状態で下線を引くための設定 */
  }

  /* リンク一覧（ul） */
  .footer-links {
    padding: 0;
  }

  .footer-links li {
    font-size: 1.3rem;
    margin-bottom: 12px;        /* スマホでタップしやすいように少し広げる */
  }

  /* 「お問い合わせファームへ」ボタンの調整 */
  .contact-btn {
    display: block;             /* 確実にボタン化して中央に置く */
    width: fit-content;
    margin: 20px auto 0 auto;   /* 無駄なmargin（40px）をリセットして中央寄せ */
    font-size: 1.2rem;          /* 他の文字に合わせて少し大きく（押しやすく） */
    padding: 12px 25px;
  }

  /* コピーライト */
  .footer-copyright {
    font-size: 1.0rem;          /* 少し小さくして控えめに */
  }

  /* ==========================================
    お問い合わせボタンとコピーライトの調整
  =========================================== */
  .contact-btn {
    display: block;
    clear: both;          /* メニューの横並び（float）に巻き込まれないようにリセット */
    width: fit-content;
    margin: 30px auto 0 auto; /* 中央寄せ */
    font-size: 1.2rem;
    padding: 12px 25px;
  }

  .footer-copyright {
    font-size: 1.0rem;
    clear: both;
  }
}