@charset "utf-8";

/* ============================================================
  1. 基本設定（Reset & Base）
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
  background-color: #f8fcef;
  -webkit-text-size-adjust: 100%; /* iPhoneの文字サイズ自動調整防止 */
}


/* 要素のリセット */
h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 表示切り替えクラス */
.pc { display: inline; }
.sp { display: none; }

@media screen and (max-width: 768px) {
  .pc { display: none; }
  .sp { display: inline; }
}

.text-center { text-align: center; }
/* ============================================================
  2. ヘッダー（Site Header）
============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* height: 100% から固定値に変更 */
  padding: 0 13.5% 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  z-index: 9999;
}

.head-logo {
  display: flex;
  align-items: center;
margin-right: 1rem;
	flex-shrink: 0;
}

.head-logo img {
  max-height: 100px;
  width: auto;
}

.site-header h1 {
  font-size: 1.5rem;
  font-weight: 900;
}

/* ナビゲーション */
.site-header nav {
  margin-left: auto;
}

.site-header nav ul {
  display: flex;
  align-items: center;
 gap: clamp(1rem, 3vw, 3.4rem)
}
.site-header nav ul li {
  white-space: nowrap;
}
/* 右端のボタン（お問い合わせ） */
.site-header nav ul li:last-child {
  background-color: #efca57;
  border-radius: 15px;
  padding: 0.2rem 1.5rem;
	flex-shrink: 0;
}
/* ホバー、カレント設定 */
/* --- PCナビゲーションの線アニメーション --- */

.pc-nav ul li a {
  position: relative;
  text-decoration: none;
  color: inherit; /* 文字色は親要素（黒など）を維持 */
  padding: 5px 0; /* 線との間に少し隙間を作る */
}

/* 線のベース（共通） */
.pc-nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;       
  width: 100%;
  height: 2px;      
  background-color: #efca57; 
  
  /* アニメーションの設定 */
  transform: scaleX(0);       /* 最初は長さを0 */
  transform-origin: center;   /* 中央から伸びる設定 */
  transition: transform 0.3s ease; /* 0.3秒で滑らかに動く */
}

/* マウスオーバー時線を伸ばす */
.pc-nav ul li a:hover::after {
  transform: scaleX(1); /* 長さを100%にする */
}

/* 右端のボタン（お問い合わせ）だけは線を出さない */
.site-header nav ul li:last-child a::after {
  display: none;
}
.site-header nav ul li:last-child {
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.site-header nav ul li:last-child:hover {
  background-color: #f7d97d; 
  transform: translateY(-2px); /* 2px上に浮かす */
  box-shadow: 0 4px 10px rgba(239, 202, 87, 0.3); /* 影 */
}
/* ============================================================
  3. ハンバーガー（Hamburger Button）
============================================================ */
.hamburger {
  display: none; /* PCでは隠す */
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 10001; /* メニューより上に */
  margin-left: auto;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: #000;
  transition: all 0.3s ease;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* PC用：スマホナビを隠す */
.sp-nav {
  display: none;
}
/* ============================================================
  4. タブレット
============================================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .site-header {
    padding: 0 1rem;
  }
}
/* ============================================================
  4. スマホレスポンシブ（Mobile Style）
============================================================ */
@media (max-width: 768px) {
  .site-header {
    height: 80px;
    padding: 0 1rem;
  }

  .head-logo img {
    height: 80px;
  }

  .hamburger {
    display: block;
  }

  /* スマホ用全画面メニュー */
  .site-header nav {
    position: fixed;
    inset: 0;
    background: #fff;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    margin-left: 0;
  }

  .site-header nav ul {
    flex-direction: column;
    gap: 2rem;
    font-size: 1.2rem;
  }

  /* メニュー展開時のクラス */
  .site-header.is-open nav {
    transform: translateX(0);
  }

  /* ×ボタンアニメーション */
  .site-header.is-open .hamburger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .site-header.is-open .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .site-header.is-open .hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }
	
	

}
/* ============================================================
  5. スマホレスポンシブ（Mobile menu）
============================================================ */
@media (max-width: 768px) {
  /* スマホナビ全体の設定 */
  /* 親要素の設定をリセット */
  .sp-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 全てを左揃えのベースに乗せる */
    padding: 20px 5%; /* 画面左端からの全体の余白 */
  }

  /* 1行目：ロゴとテキスト */
  .sp-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    width: 100%;
  }
.sp-header img {
    height: 60px;
    width: auto;
  }

  .sp-header span {
    font-weight: 900;
    font-size: 1.2rem;
  }
.sp-menu {
  width: 100%;
  list-style: none;
  padding: 0 0 0 1.5rem;
}

.sp-menu li {
  width: 100%;
  margin-bottom: 30px;
  display: flex;    
  align-items: center;   
  justify-content: flex-start !important;
}

/* 1つ目のaタグ（アイコン用リンク）およびアイコンがない時の空枠 */
.sp-menu li a:first-child,
.sp-menu li .icon-column {
  width: 50px;           /* アイコン枠の幅を統一 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
}

.sp-menu li a img {
  width: 28px;       
  height: auto;
  display: block;
}

/* 2つ目のaタグ（テキスト用リンク） */
/* 2つ目のaタグ（テキスト用リンク） */
.sp-menu li a:last-child {
  flex-grow: 1;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  
  /* --- アイコン枠からの距離を確保する --- */
  padding-left: 70px; 
}

.sp-menu li a span {
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;   
  line-height: 1;        /* 行間によるズレを防止 */
}


	
/* お問い合わせボタン等のリセット */
.site-header nav ul li:last-child {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}
	
  /* お問い合わせエリア（線がある部分） */
  .sp-contact {
    width: 100%; /* 線が右端までいかないよう調整 */
    padding: 0;
    margin-top: 20px;
  }

  /* 電話セクション */
   .sp-contact .phone {
    display: grid;
    /* メニューと同じく左列100px、右列 残り全部 */
    grid-template-columns: 100px 1fr; 
    align-items: center; 
    width: 100%;
	border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding:1rem 0;
	gap:2rem;
  }
 .sp-contact .mail {
    display: grid;
    /* メニューと同じく左列100px、右列 残り全部 */
    grid-template-columns: 100px 1fr; 
    align-items: center; 
    width: 100%;
    border-bottom: 1px solid #000;
    padding:1rem 0;
	gap:2rem;
  }
	.phone .tel-ico ,.mail .mail-ico{
		text-align: center;
	}
  .phone img {
    width: 60px;
  }
.phone div {
    display: flex;
    flex-direction: column;
  }

  .phone span {
    font-size: 0.9rem;
    font-weight: 700;

  }
 .phone a {
    font-size: 2rem;
    font-weight: 700;
  }


 
  .mail img {
    width: 60px;
  }

  .mail-btn {
    background-color: #efca57;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 700;
    width: 220px;
    text-align: center;
  }

  /* 開いている時の表示 */
  .site-header.is-open .sp-nav {
    transform: translateX(0);
  }
}

/* ===============================
   アニメーション共通
================================ */
/* --- fade-up: 下からふわっと浮き上がる ＋ フェードイン --- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  
  transition: opacity 2.0s ease-out, transform 1.0s ease-out;
  will-change: opacity, transform;
}

/* クラスがついたら表示 */
.fade-up.is-active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ==============================
  Heading animation 共通設定
============================== */
/* 見出し本体*/
.heading-tag,
.heading-sub {
  opacity: 0;
  /* 最初は背景を「完全に透明な白」 */
  background-color: rgba(255, 255, 255, 0); 
  
  /* background-color の変化時間を少し長めに設定 */
  transition: 
    opacity 0.4s ease-out,
    background-color 1.0s ease-out 0.2s; /* 0.2秒待ってから、1秒かけて背景を塗る */
    
  white-space: nowrap;
}

/* 表示状態（親） */
.heading-tag.is-active,
.heading-sub.is-active {
  opacity: 1;
  /* 表示されたら「不透明な白」にする */
  background-color: rgba(255, 255, 255, 1); 
}

/* 1文字ずつ（子要素） */
.heading-tag span,
.heading-sub span {
  display: inline-block;
  opacity: 0;
  transform: translateY(15px);
  transition: 
    opacity 0.6s ease-out, 
    transform 0.6s ease-out;
  /* spanに背景色はつけない */
}

/* 文字の表示（子） */
.heading-tag.is-active span,
.heading-sub.is-active span {
  opacity: 1;
  transform: translateY(0);
}

/* --- heading-tag --- */
.heading-tag {
  font-size: 1.8rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
}

/* --- heading-sub --- */
.heading-sub {
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: .1rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: .8rem .6rem 1rem !important;
}


@media (max-width: 768px) {
.heading-sub{
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:0;
  }	
}
/* --- View more: 緑のボタン --- */
.more-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color:#428809;
  color:#fff;
  font-size:.95rem;
  padding: .1rem .4rem;
  border: 1px solid #000;
  cursor: pointer;
}
.more-btn img {
  transition: transform .3s ease;
}

.more-btn:hover img {
  transform: translateX(6px); /* 右へ少し */
}
@media (max-width: 768px) {
.more-btn a {
  gap: 2.5rem;
  padding: .5rem 2rem;
}	
}
/* ===============================
   コンテンツ
================================ */

/* セクション1 */
/* PCの設定（既存） */
#section1 {
  width: 100%;
  height: 100vh; /* PCは全画面 */
  position: relative;
  overflow: hidden;
}

.section1-media {
  position: absolute;
  inset: 0;
  background: #000;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* PCは画面を埋める */
}

/* スマホ用の設定（メディアクエリ） */
@media screen and (max-width: 768px) {
  #section1 {
    height: auto; /* 高さを固定せず、動画の比率に合わせる */
  }

  .section1-media {
    position: relative; /* 絶対配置を解除して、中身の高さを持たせる */
    inset: auto;
	padding-top:80px;
  }

  .bg-video {
    width: 100%;
    height: auto;     /* 高さを自動にして、横幅100%に合わせる */
    object-fit: contain; /* 動画全体を表示（文字が切れない） */
    display: block;
  }
}
/* セクション2 */
#section2 {
  padding: 7rem 7rem 5rem;
  margin-left:3rem;
  margin-right:auto;
}

.section2-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Flexboxに切り替え：右から順に並べる */
.section2-grid {
  display: flex;
  flex-direction: row-reverse; /* 右から配置 */
  justify-content: flex-start; /* 右端に寄せる */
  align-items: flex-start;     /* 上端に揃える */
  gap: 2rem;                   /* 各要素の間隔 */
  margin-left: .5rem;
  margin-right:auto;
}
.section2-vertical-wrap {
  display: flex;
  flex-direction: row;   /* 左 → 右 */
  gap: 1.3rem;
  align-items: flex-start;
}
/* 縦書き要素の共通設定 */
.section2-title,
.section2-catch {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap; /* 意図しない改行を防ぐ */
}

/* 個別の位置調整 */
/* 右側に h2 を置きたいので order を入れ替える */
.section2-title {
  order: 2;   /* 右 */
}
.section2-catch {
  font-size:2.2rem;
  font-weight:900;
  letter-spacing:.2rem;
  order: 1;
}

.section2-text {
  /* 一番左：横書き */
  margin-top: auto;   /* 下側に配置 */
  max-width: 700px;
  line-height: 2;
}

/* テキストの中の余計なマージンを消す */
.section2-title h2,
.section2-catch h3,
.section2-text p {
  margin: 0;
  padding: 0;
}

.section2-text p + p {
  margin-top: 2.5rem; /* 段落間の余白 */
}
.sec2-image{
	width:100%;
	max-width:1112px;
	margin:10em auto 0;
}
@media (max-width: 768px) {

  /* セクション余白を縮める */
  #section2 {
    padding: 2rem 2.5rem 3rem;
	  margin-left: 0;
  }

  /* 横並び → 縦並び */
  .section2-grid {
    flex-direction: column;
    gap: 2rem;
    margin-left: 0;
   justify-content: center;
    align-items: center;
  }
.section2-vertical-wrap {
  gap: 1rem;

}

  
  .section2-title h2 {
    font-size: 1.6rem;
    letter-spacing: .05em;
	}

  .section2-catch h3 {
    font-size: 1.9rem;
    line-height: 1.6;
	margin-left:1rem;
  }

  /* 本文 */
  .section2-text {
    margin-top: 0;
    max-width: none;
    font-size: 1rem;
    line-height: 1.9;
  }

  .section2-text p + p {
    margin-top: 1.8rem;
  }

  /* 画像 */
  .sec2-image {
    margin: 4rem auto 0;
    max-width: 100%;
  }

  .sec2-image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* セクション3 */
#section3 {
  padding: 7rem 7rem 0;
  margin:0 auto;
}

.section3-inner {
  max-width: 1258px;
  height: 624px; /* 画像高さ */
  margin: 0 auto;
	padding-right:20%;
  background: url("../image/home/sec3-img.png") no-repeat center bottom / contain;
  position: relative; 
}
/* Flexboxに切り替え：右から順に並べる */
.section3-grid {
  display: flex;
  flex-direction: row-reverse; /* 右から配置 */
  justify-content: flex-start; /* 右端に寄せる */
  align-items: flex-start;     /* 上端に揃える */
  gap: 0;                   /* 各要素の間隔 */
  margin-right:auto;
}

.section3-text {
  /* 一番左：横書き */
  margin-top: 13rem;   
  max-width: 500px;
  line-height: 2;
}

/* テキストの中の余計なマージンを消す */
.heading-sub h2{
	margin-top:-2rem;
}
.section3-text p {
  margin: 0;
  padding: 0;
}

.section3-text p + p {
  margin-top: 2.5rem; /* 段落間の余白 */
}
/* section3-btn要素 */
.section3-btn {
  position: absolute;
  left: 30%;
  bottom: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.section3-btn-title {
 font-weight: 900;
}
@media (max-width: 768px) {
#section3 {
  padding: 5rem 0 0;
  margin:0 auto;
}
 .section3-inner {
  max-width: 100%;
  height: 524px; /* 画像高さ */
  margin: 0 auto;
	padding-right:3rem;
  background: url("../image/home/sec3-img.png") no-repeat center 2rem / 95%;
  position: relative; 
}
.section3-text {
  /* 一番左：横書き */
  margin-top: 6rem;   
  max-width: 500px;
  line-height: 2;
}
  /* ボタン：通常フローに戻す */
  .section3-btn {
    margin-left:3rem;

  }
}
@media (max-width: 390px) {
 #section3 {
    padding: 0;
  }
.section3-inner {
    max-width: 100%;
    padding-right: 3rem;
height: 500px; /* 画像高さ */
    /* 画像の縦比率を確保 */
    padding-bottom: 70vw;
  }
 

  .section3-grid {
    flex-direction: column;
    align-items: center;
  }
.section3-inner {
    max-width: 100%;
    height: 692px;
    padding-right: 0;

    /* スマホ用背景画像 */
    background-image: url("../image/home/sec3-img-sp.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; /* 横幅いっぱい */
    
    /* 画像の縦比率を確保 */
    padding-bottom: 70vw;
  }
/* 本文：h2の下・中央 */
  .section3-text {
    margin-top: 1rem;
    max-width: 100%;
	margin-left: 2.5rem;
    margin-right: auto;
  }
/* h2（上付き・右寄り） */
   .section3-grid .heading-sub {
    align-self: flex-end;   /* 右寄せ */
    margin-top: -.5rem;
    margin-right: 3rem;
  }

 /* ボタン：通常フローに戻す */
  .section3-btn {
    position: static;
    margin-top: 12rem;
    align-items: center;
	  margin-left:0;
   gap:1rem;
  }
  

  
}
/* セクション4 */
#section4 {
  padding: 9rem 7rem 3rem;
  margin:0 auto;
}

.section4-inner {
  width:100%;
  max-width: 781px;
  height: auto; 
  margin: 0 auto;
}
/* Flexboxに切り替え：右から順に並べる */
.section4-grid {
  display: flex;
  justify-content: flex-start; 
  align-items: flex-end;     
  gap: 9.5rem;           
  margin-top:-12rem;
  margin-bottom: 7rem;
  padding-left:6.4rem;
}
/* タイトル　画像 */
.section4-title{
	display: flex;
    justify-content: flex-start;
    align-items: center;
	gap:1rem;
	font-size:1.8rem;
	font-weight:700;
	width:100%;
  max-width: 751px;
	margin:0 auto;

}
.section4-img{
	width:100%;
	margin:0 auto;
}

.section4-text {
  /* 右：横書き */
  margin-top: 13rem;   
  max-width: 500px;
  line-height: 2;
}
.section4-text .text-big{
	font-size:2rem;
	font-weight: 900;
}
/* テキストの中の余計なマージンを消す */
.section4-text p {
  margin: 0;
  padding: 0;
}

.section4-text p + p {
  margin-top: 2.5rem; 
}
/* section4-btn要素 */
.section4-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 2rem;
  papdding:0;
  line-height: 1.6;
}
/* グループ会社紹介 */
.section4-comany{
  width: 100%;
  max-width: 781px;
  margin: 2.5rem auto;
  padding-top: 2.5rem;
  border-top: 1px solid #000;
  display: flex;
  align-items: flex-start;
  justify-content:space-between;
  gap: 4rem;
}
.section4-comany .group {
  flex: 1;
  padding:0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
   
}

.section4-comany .group .company-name{
	font-size:1.7rem;
	font-weight: 900;
	margin-bottom:.8rem;
	align-self: center;  
  text-align: center;
}
.section4-comany .group ul{
	margin-top:1.8rem;
	margin-bottom:2rem;
	}
.section4-comany .group ul li{
	font-weight: 500;
	font-size:.95rem;
	list-style-position: inside;
  padding-left: 7rem;
}
/* --- 会社: 白のボタン --- */

.company-btn {
  display: inline-flex;
  align-items: center;
  	align-self: center;
  gap: 1rem;
  text-decoration: none;
   font-size:.95rem;
  padding: .3rem .4rem;
  border: 1px solid #000;
  cursor: pointer;

}
.section4-comany .group:last-child .company-btn {
  margin-top:1.5rem;
  margin-left:2rem;
}
.company-btn img {
  transition: transform .3s ease;
}

.company-btn:hover img {
  transform: translateX(6px); /* 右へ少し */
}

@media (max-width: 768px) {

  /* 全体余白を縮小 */
  #section4 {
    padding: 5rem 0 6rem;
  }

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

  /* タイトル */
  .section4-title {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 751px;
  margin: 0;
  padding-left: 1rem;
}
.section4-title span {
  font-size: 1.5rem;
  font-weight: 700;
}

.section4-title img {
  width:80%;
  max-width: 210px;
  height: auto;
}

  /* メイン画像 */
  .section4-img img {
    width: 100%;
    height: auto;
  }

  /* グリッド → 縦並び */
  .section4-grid {
  display: grid;

  column-gap:.5rem;
  row-gap: 3rem;
  align-items: start;
  margin: -7rem auto 7rem !important;
  padding-left: 1rem;
}

  /* 縦書き見出し */
  .section4-col.heading-sub {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
.heading-sub h3 {
  margin: 0;
}
  /* 右側テキスト */
.section4-text {
  grid-column: 2 / 3;
  max-width: none;   /* ← 重要 */
  width: 100%;
  margin-top: 10rem;
  font-size: 1rem;
}

  .section4-text .text-big {
  font-size: 2rem;
  font-weight: 900;
}

  /* ボタン */
  .section4-btn {
 
  margin-top: 2rem; 
	}

  /* グループ会社：縦積み */
  .section4-comany {
    flex-direction: column;
    gap: 3.5rem;
    padding-top: 2rem;
	margin-top:3.5rem;
  }

  .section4-comany .group {
    align-items: center;
    text-align: center;
	  margin: 0 auto;
  }

  .section4-comany .group ul li {
    padding-left: 0;
    list-style-position: inside;
  }

  .company-btn {
    align-self: center;
  }

  .section4-comany .group:last-child .company-btn {
    margin-left: 0;
  }
}

/* ===============================
   フッター
================================ */
footer{
	padding-top:5rem;
}
/* --- お知らせ --- */
/* 全体レイアウト */
.news-section {
  display: flex;
  justify-content: space-between;
  gap: 6rem;
  max-width:1246px;
  width:100%;
  min-height: 550px;
	height:auto;
	margin:0 auto;
}

/* 左：ニュース本文 */
.news-list {
  flex: 1;
  padding-left:5rem;
  padding-top:3rem;
}

.news-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid #000;
}
.news-date {
  font-weight: 700;
  color:#44732f;
}

.news-title {
  font-weight: 900;
  margin-bottom: .3rem;
}

.news-text {
  line-height: 1.8;
  font-size: .95rem;
}

/* 右：縦書きタイトル */
.news-title-vertical {
  width:100%;
  max-width:377px;
  display: flex;
  justify-content: flex-start; /* 上揃え */
  align-items: center; 
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.8rem;
  font-weight: 900;
  white-space: nowrap;
  background: url("../image/fotter-news-img.png") no-repeat center 6rem / contain;
}
/* ============================================================
スマホ
============================================================ */
@media (max-width: 768px) {

  .news-section {
    flex-direction: column-reverse; /* ← 上下を逆にする */
    gap: 1.5rem;
    padding: 0 1.5rem;
  }

  /* 縦書きタイトル（上） */
  .news-title-vertical {
	position: relative;
    max-width: 80%;
	margin: 0 auto;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.6rem;
     min-height: 400px;
	  background: url("../image/fotter-news-img.png") no-repeat center 80px / contain;
  }
.news-title-vertical span {
  position: absolute;
  top: 0; 
  left: 50%;
  transform: translateX(-50%);
}
  /* ニュース一覧（下） */
  .news-list {
    padding-left: 0;
    padding-top: 0;
  }

  .news-item {
    display: grid;
    grid-template-columns: 1fr; /* ← 1列に*/
    gap: .6rem;
    padding: 1.5rem 0;
  }

  .news-date {
    font-weight: 700;
  }

  .news-title {
    font-weight: 900;
	font-size:1.1rem;
  }
}
@media screen and (min-width: 391px) and (max-width: 768px) {
 .news-title-vertical {
	position: relative;
    max-width: 52%;
	margin: 0 auto;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.6rem;
     min-height: 500px;
	  background: url("../image/fotter-news-img.png") no-repeat center 70px / contain;
  }
}

/* ============================================================
タブレット
============================================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.news-section {
    gap: 2rem;
	width:95%;
  }
.news-list {
    padding-left: 1rem;
  }

}

/* --- お問い合わせ --- */
.contact-section{
	width: 100%;
    max-width: 1920px;
    aspect-ratio: 1920 / 1149;  
	margin:10rem auto 3rem;
	background: url("../image/fotter-contact-img.png") no-repeat center top / contain;
	padding-top:3.8rem;
    position: relative;
}
.contact-title{
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
}
.contact-item{
	width:100%;
	max-width:730px;
	margin: 5rem auto ;
	display: flex;
	gap:2rem;
}
.contact-item > div {
  flex: 1; 
  display: flex;
  flex-direction: column;   /* 縦並び */
  justify-content: flex-start; /* 上詰め */
  align-items: center;      /* 左右中央 */

  background-color: #fff;
  border-radius: 15px;
  padding: 4rem 0;
}
.contact-item > div img{
	margin-bottom:.8rem;
}
.contact-item .tel img{
	margin-left:1.7rem;
}
.contact-item-tite{
	font-weight: 700;
	margin-bottom:2.5rem;
}
.contact-item .tel p:nth-child(3){
	font-size:2.5rem;
}
.contact-item .tel p:nth-child(4){
	font-size:.9rem;
}
.contact-item .meil-form p:nth-child(3){
	font-size:.9rem;
	background-color:#fbd841;
	border-radius: 20px;
	padding: .7rem 2.5rem;
	margin-top:1rem;
  cursor: pointer;
}
/* --- 右下　メニュー --- */
.footer-navi {
  width: 100%;
  position: absolute;
  left: 0; 
  bottom: 0;
  padding-right:18rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end; 
}
.fotter-add {
  display: flex;
  align-items: flex-start; /* 上揃え */
  gap: 1rem;
  margin-bottom:2.3rem;
}

.fotter-add img {
  width: 130px; /* ロゴサイズ調整 */
  height: auto;
}

.fotter-add .footer-text {
  display: flex;
  flex-direction: column; 
  font-size: .9rem;
}
.fotter-add .footer-text p:first-child{
	font-size:2rem;
	font-weight: 900;
	margin-bottom:.5rem;
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  align-items: flex-end; 
  text-align: right;     
}


/* 上段メニュー*/
.footer-menu-main {
  display: flex;
  flex-wrap: nowrap; 

  gap: 2rem;
}

.footer-menu-main a {
  width: auto;    
  white-space: nowrap; 
}



/* 下段リンク */
.footer-menu-sub {
  display: flex;
  gap: 1rem;
}

.footer-menu-sub a {
  font-size: .9rem;
}

/* ホバーアニメ */

/* 1. フッターメニューエリアのどこかにマウスが乗ったら、中のリンクすべてを沈ませる */
.footer-menu:hover a {
  opacity: 0.4;      
  filter: grayscale(100%);  
  transition: all 0.3s ease;
}

/* 2. その中で、今マウスが直接乗っているリンクだけを「浮き上がらせる」 */
.footer-menu a:hover {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

/* 3. 初期状態の動きを滑らかにする */
.footer-menu a {
  transition: all 0.3s ease;
}


.footer-copy{
	text-align: center;
	font-size:.9rem;
	margin-bottom: 1rem;
}
@media (max-width: 768px) {
	.contact-section {
  aspect-ratio: auto;
  margin: 0 auto;
  padding: 5rem 0 1rem;
  background: url("../image/fotter-contact-img2-sp.png") no-repeat center calc(100% - 17rem) / contain;

}

.contact-title {
  position: relative;
  width:80%;
	margin: 0 auto;
  min-height: 100px;
  background: url("../image/fotter-contact-img1-sp.png") no-repeat center / contain;

  display: flex;
  justify-content: center;
  align-items: flex-end; /* 下寄せ */
  padding-bottom: .5rem;

  font-size: 1.6rem;
  font-weight: 900;
}
.contact-item {
  flex-direction: column;
  width: 100%;
  margin: 3rem auto;
  gap: 1.5rem;
}

.contact-item > div {
  padding: 3rem 1.5rem;
  margin:0 2rem;
}
.contact-item {
  position: relative;
  z-index: 1;
}


.fotter-add {
   margin-bottom:2rem;
   width:100%;
}

.fotter-add img {
  width: 100px; /* ロゴサイズ調整 */
  height: auto;
}
/* Flex → Grid に切り替え */
.footer-navi {
  position: static;
  padding: 8rem 0 2rem;
  align-items: center;
  width:90%;
  margin: 0 auto;
}
.fotter-add .footer-text p:first-child {
    font-size: 1.3rem;
	}
.footer-menu {
  align-items: flex-start;
  text-align: left;
  width:100%;
}
/* ===== 上段＋中段メニュー ===== */
  .footer-menu-main {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: .6rem 1.5rem;
    justify-content: start;
  }

  /* ① ホームだけ1段目 */
  .footer-menu-main a:nth-child(1) {
    grid-column: 1 / -1;
  }

  /* ② 私たちについて〜会社紹介（3つ） */
  .footer-menu-main a:nth-child(2),
  .footer-menu-main a:nth-child(3),
  .footer-menu-main a:nth-child(4) {
    grid-column: auto;
  }

  /* ③ お知らせ・お問い合わせ（2つ） */
  .footer-menu-main a:nth-child(5) {
    grid-column: 1 / 2;
  }
  .footer-menu-main a:nth-child(6) {
    grid-column: 2 / 3;
  }

  /* ===== 下段リンク ===== */
  .footer-menu-sub {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: .6rem 1.5rem;
    margin-top: .8rem;
    justify-content: start;
  }
}
/* ============================================================
タブレット
============================================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.contact-section{
    aspect-ratio: 1024 / 800;   /* ← これが最重要 */
}
.footer-navi {
  width: 100%;
  padding-right:2rem;
}
}


/* ===============================
   アンカー対象にする要素
================================ */


.anchor {
  scroll-margin-top: 150px; 
}