html {font-family: "Noto Sans JP", sans-serif;}

.pop {font-family: "M PLUS 1p", sans-serif;}

.container {
 width: 90%;
 max-width: 1120px;
 margin: 0 auto;
 position:relative;
}

.flex {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 align-items: center;
}

/*ヘッダー paddingだけだったが、追加してスクロールしてもヘッダーが付いてくるように*/
header {
 top: 0;
 left: 0;
 width: 100%;
 padding: 20px 0;
 position: fixed;
 background-color: #fff; /* ← 背景色を指定しないと下のコンテンツが透けます */
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ← 影で浮かせると自然な印象に */
 z-index: 1000; /* ← 他の要素より前面に表示 */
}

/*上の設定をしたときに見やすくなる、なくてもよい*/
body {
  padding-top: 110px; /* ← ヘッダーの高さ＋余白分（調整可能） */
}

/*左上の冨家鉄工株式会社の設定、letter-spacingで文字同士の間隔*/
.logo {
 font-size: 24px;
 font-weight: 700;
 letter-spacing: -0.04em;
}

/*左上の鉄工の部分が緑になる設定*/
.logo span {
 color: #80BA4A;
}

.header_menu li {
 margin-left: 40px;
}

.header_menu li a {
 transition: .3s;
}

/*ロゴの設定*/
.logo-img {
  height: 45px; /* ロゴの高さを調整（お好みで） */
  /*margin-right: 2px;  文字との間隔 */
  vertical-align: middle; /* テキストと揃える */
}

@media only screen and (max-width: 768px) {
 header .container {justify-content: center}
 .header_menu li {margin: 20px 16px 0;}
 .logo-img {height: 30px;}
}



/*右上のやつにマウスカーソルをあてると緑になる設定*/
.header_menu li a:hover {
 color: #80BA4A;
 transition: .3s;
}

/*右上クリック時の位置*/
#会社概要,
#施工事例,
#事業内容,
#採用情報 {
  scroll-margin-top: 100px; /* ← ヘッダーの高さに合わせて調整 */
}

/*メイン*/
 /*でかいメインの写真*/
/*widthを消したら、横に余白ができる*/
/*border-radius: 30px;を入れると写真の角が丸くなる*/
/*丸くした場合、overflow:hidden;もいれる、はみ出て部分をカットしてくれるので黒い部分も丸くなる*/
/*
#hero {
 background-image: url(../images/kai.jpeg);
 background-position: center;
 background-size: cover;
 height: 540px;
 width: 850px;
 display: flex;
 align-items:center;
 margin-bottom: 80px;
}
*/

#hero-slider {
  height: 540px;
  width: 850px;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: background-image 2s ease-in-out; /* フェード切替 */
  display: flex;
  align-items: center;
  margin-bottom: 80px;
  max-width: 1200px;    /* ← 必要なら上限を設定 */
}

#hero-slider::before {
 content: '';
 width: 100%;
 height:100%;
 background-color: #000000;
 position: absolute;
 top: 0;
 left: 0;
 /*opacity: 0.2;*/
 opacity: 0.4;
 z-index: 1;
}



/*背景写真*/
.background-shape {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 500px;
  height: 400px;
  z-index: -1;
  opacity: 0.8;
}

/* 頭（円） */
.background-shape::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background-color: #3498db;
  border-radius: 50%;
}

/* 胴体（三角：頂点が上） */
.background-shape::after {
  content: "";
  position: absolute;
  top: 100px; /* 円の下に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 140px solid rgba(52, 152, 219, 0.8); /* ← 頂点が上になる指定 */
}

/* 腕（横棒） */
.arm {
  position: absolute;
  top: 130px; /* 三角形の中央あたりに配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 20px;
  background-color: rgba(52, 152, 219, 1);
}

/* 脚（縦棒） */
.leg {
  position: absolute;
  top: 150px; /* 三角形の下に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 90px;
  background-color: rgba(52, 152, 219, 1);
}


@media screen and (max-width: 768px) {
  .background-shape {
    display: none;
  }
}



/*
顧客に満足して頂く技術を提供し、
より良い社会の実現と発展に貢献する。の部分
*/
.hero_inner {
 z-index: 2;
 color: #ffff;
 width: 100%;
 text-align: center;
 animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/*margin-bottomで二行の文字の幅を変更可能*/
/*font-weightは文字の太さ*/

/*
.hero_inner p{
 font-size: 23px;
 font-weight: 600;
 margin-bottom: 10px;
}

.hero_inner h1 {
 font-size: 23px;
 font-weight: 600;
 margin-bottom: 30px;
}
*/

.hero_inner p {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 12px;
}

.hero_inner h1 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

/*一番上の文字*/
.hero_inner,
.hero_inner p,
.hero_inner h1 {
  font-family: 'Shippori Mincho', serif;
  /*font-family: 'Zen Kaku Gothic Antique', sans-serif;*/
  /*font-family: 'Murecho', sans-serif;*/
}


@media only screen and (max-width: 768px) {
 /*
 #hero {
    width: 100%;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }
 */
  #hero-slider {
    width: 100%;
    height: 100vh; /* 画面いっぱいに表示 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .hero_inner p,
  .hero_inner h1 {
    font-size: 18px;
    line-height: 1.6;
    padding: 0 16px;
  }
}

/*ごあいさつ*/
#ごあいさつ {
 margin-bottom: 20px;
}

/*線とタイトル*/
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  position: relative;
}

.section-title::before,
.section-title::after {
  content: "";
  flex: 1;
  height: 10px;
  background-color: #cccccc; /* 線の色はお好みで変更可能 */
  margin: 0 16px;
}

.section-title h2 {
  font-size: 24px;
  font-weight: 600;
  /*color: #000000;*/
  white-space: nowrap;
  margin: 0;
}

/* ごあいさつ：落ち着いたグリーン */
.greeting-title {
  color: #000000;
}

/* 私たちの強み：信頼感のあるブルー */
.strength-title {
  color: #000000;
}

/* 事業内容：力強いレッド系 */
.business-title {
  color: #3a68a0;
}

/* 会社概要：上品なグレー */
.company-title {
  color: #c0392b;
}

/* 施工事例：アクセントのあるオレンジ */
.works-title {
  color: #000000;
}


.title {
 font-size: 20px;
 font-weight: 500;
 /*color:#4a79ba;*/
 margin-bottom: 15px;
}
/*--------*/

#ごあいさつ h3 {
 font-size: 20px;
 font-weight: 700;
 text-align: center;
 margin-bottom: 20px;
 /*margin-left: 600px*/
}

.greeting-text {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  font-family: "Noto Serif JP", serif; /* ← ごあいさつらしい落ち着いた印象に */
  margin-bottom: 24px;
  text-align: left;
  font-weight: 450;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .greeting-text {
    font-size: 16px;
    line-height: 1.6;
    width: 95%;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/*文章の部分*/
.column-2 {
 width: 100%;
 text-align: center;
 margin-left: 100px;
 margin-right: 100px;
}
/*-------------*/




/*強み*/
.strength-section {
  text-align: center;
  margin: 80px auto;
}

.strength-lead {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 40px;
  color: #333;
}

.strength-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1000px;
  margin-top: 40px
}

.strength-item {
  background-color: #f5f5f5;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*大きめの文字*/
.strength-item h3 {
  font-size: 20px;
  font-weight: 600;
  color: #4a79ba;
  min-height: 35px;
}

/*文章*/
.strength-item p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/*文章左揃え*/
.strength-item h3,
.strength-item p {
  text-align: left;
}


.strength-item.speed {
  background: linear-gradient(135deg, #e74c3c, #ff7675);/* 赤系：施工スピード */
}

.strength-item.safety {
    background: linear-gradient(135deg, #27ae60, #a2d5a2); /* 緑系：安全 */
}

.strength-item.technology {
  background: linear-gradient(135deg, #3498db, #85c1e9); /* 青系：技術力 */
}

.strength-item.speed h3,
.strength-item.speed p {
  color: #fff;
}

.strength-item.safety h3,
.strength-item.safety p {
  color: #fff;
}

.strength-item.technology h3,
.strength-item.technology p {
  color: #fff;
}


/*スマホ-強み*/
@media screen and (max-width: 768px) {
  .strength-grid {
    flex-direction: column;
    align-items: center;
  }

  .strength-item {
    width: 90%;
    height: auto;
    border-radius: 16px;
  }
}



/*文章の間隔*/
.text {
 line-height: 1.5;
 font-size: 18px
}

/*代表の写真：border-radius: 30px;を入れると写真の角丸くなる*/
/*
.concept-img {
background-image: url(../images/%E4%BB%A3%E8%A1%A8.png);
 background-position: center;
 background-size: cover;
 height: 500px;
 width: 40%;
}
*/

@media only screen and (max-width: 768px){
 #ごあいさつ h3 {
  font-size: 14px;
  /*font-weight: 700;*/
  /*text-align: center;*/
  /*margin-bottom: 20px;*/
  }
 .column-2 {
 width: 100%;
  margin: 0;
  padding: 0;
     text-align: left;}
.text {text-indent: 1em;
       display: block;
       line-height: 1.5;
       
 /*
 text-align: center;
 margin-left: 100px;
 margin-right: 100px;
 */
}   
}



/*事業内容*/
.事業内容セクション {
  margin-bottom: 120px;
}

.事業内容_inner {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin-bottom: 10px;
}

/*
#事業内容 {
 scroll-margin-top: 100px;
} ヘッダーの高さに合わせて調整 
*/

/*
.colum-40 {
 width: 40%;
}

.colum-55 {
 width: 55%;
}
*/
/*左側画像*/
.left-block {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 15px;
}

/*用途*/
.floor-usage-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 10px;
  margin-bottom: 40px;
  width:100%
}

/*用途の色*/
/* 1つ目
.usage-label {
  writing-mode: vertical-rl;  ← 縦書き 
  font-size: 20px;
  font-weight: bold;
  color: #333;
  padding: 8px;
  border-left: 4px solid #c0392b;
}
*/

/*2つ目*/
.usage-label {
  writing-mode: vertical-rl;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  padding: 8px;
  border-left: 4px solid #80BA4A;
}


/*ファインフロアメリット*/
/* 1つ目の色
.finefloor-note {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  background-color: #f9f9f9;
  padding: 12px;
  border-left: 4px solid #80BA4A;
  border-radius: 6px;
  margin-bottom: 15px;
}
*/

/*2つ目*/
.finefloor-note {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  background-color: #f0f4fa;
  padding: 12px 16px;
  border-left: 4px solid #4a79ba;
  border-radius: 6px;
  /*margin: 15px 0;*/
  margin-bottom: 15px;
}


/*床ファインフロア工事の用途*/
.floor-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  flex: 1;
}

/*1つ目*/
/*
.usage-item {
  font-size: 17px;
  color: #333;
  background-color: #f5f5f5;
  padding: 8px 12px;
  border-radius: 4px;
}
*/

.usage-item {
  font-size: 17px;
  color: #2c3e50;
  background-color: rgba(128, 186, 74, 0.16);
  padding: 8px 12px;
  border-radius: 4px;
}


.usage-note {
  font-size: 16px;
  color: #666;
  margin-top: 16px;
}

.usage-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/*鍛冶工事の用途*/
.floor-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  flex: 1;
}

/* 鍛冶工事専用：1列表示 */
.kaji-grid {
  grid-template-columns: 1fr;
  }


    /*用途-スマホ*/
@media screen and (max-width: 768px) {
  .floor-usage-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .usage-label {
    writing-mode: horizontal-tb;
    border-left: none;
    border-bottom: 2px solid #007acc;
    margin-bottom: 12px;
  }

  .floor-usage-grid {
    grid-template-columns: 1fr;
  }
}
  
/*右側文章*/
.right-block {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ← 上揃えに変更 */
}

.subtitle {
  font-size: 24px;
  font-weight: 600;
}

/*事業内容　左側写真*/
.image {
  width: 100%;
  /*height: auto;*/
  height: 300px;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.caption {
  font-size: 14px;
  color: #666;
  margin-top: 12px;
}

/* 床ファインフロアだけ高さ調整 */
.with-caption {
  justify-content: flex-start;
}

/*軽量/良好/工期短縮で経済的*/
.highlight {
  color: #4a79ba; /* 明るめの青 */
  font-weight: bold; /* 少し太字で見出しっぽく */
}


@media only screen and (max-width: 768px) {
  .事業内容_inner {
    flex-direction: column;
  }

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

  .left-block {
    margin-bottom: 24px;
  }

  .subtitle {
    font-size: 20px;
    text-align: center;
  }

  .text {
    font-size: 15px;
  }
}



/*会社概要*/
#会社概要 {
 margin-bottom: 100px;
}

#会社概要 dl {
 max-width: 600px;
 margin-right: auto;
 gap:14px;
 font-size: 17px;
}

/*1つ目*/
/*
#会社概要 dt {
 width: 30%;
 padding: 1px 0;
 font-size: 17px;
 font-weight: 500;
 border-bottom: solid 1px #c0392b;
}
*/

#会社概要 dt {
  width: 100%;
  padding: 8px 0;
  font-size: 17px;
  font-weight: 600;
  color: #c0392b; 
  border-bottom: 1px solid #ccc;
  margin-top: 16px;
}
/*この色もあり　#2c3e50;*/

/*1つ目*/
/*
#会社概要 dd {
 display: flex;
 width: 100%;
 font-size: 18px
}
*/

#会社概要 dd {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 8px;
}

.company-overview .overview-flex {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/*1つ目*/
/*
.company-overview dl {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}
*/

.company-overview dl {
  background-color: #f9f9f9;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.overview-images {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column; /* ✅ 縦並びにする */
  gap: 20px;
}

.overview-img {
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  width: 100%;
  flex-shrink: 0;
}

/* 顔写真（お任せ） */
.face-photo {
  background-image: url(../images/dai.png); /* ← 適切な画像に差し替え */
  background-size: contain;     /* ← 画像全体を縮小して表示 */
  background-repeat: no-repeat; /* ← 繰り返し防止 */
  width: 100%;
  height: 220px;
}

.face-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.face-caption p {
  font-size: 15px;
  color: #333;
  margin: 0;
  line-height: 1.5;
  font-weight: 450;
}


/* 会社外観（お任せ） */
.company-photo {
  background-image: url(../images/kai.jpeg); /* ← 適切な画像に差し替え */
  height: 260px;
}

/* 地図（少し大きめ） */
.map-photo.large {
  background-image: url(../images/map.png); /* ← 適切な画像に差し替え */
  height: 390px;
}

.map-caption {
  text-align: left;
  font-size: 15px;
  color: #333;
  margin-top: 12px;
  line-height: 1.6;
}

/*マップ下の会社名*/
.map-caption-lead {
  font-size: 17px;
  font-weight: bold;
  color: #333; /* 全体の基本色 */
}
/*本社と東京営業所*/
.office-title {
  font-size: 15px;
  font-weight: 600;
  color: #000000;
  margin-top: 10px;
}

.highlight-steel {
  color: #80BA4A; /* ← 鉄工だけ青系に強調（お好みで変更OK） */
}

/*スマホ-会社概要*/
@media screen and (max-width: 768px) {
  .face-photo,
  .company-photo,
  .map-photo.large {
    height: auto;
    aspect-ratio: 16 / 9;
  }
   .company-overview .overview-flex {
    flex-direction: column;
    gap: 24px;
  }

  .company-overview dl {
    padding: 16px;
    font-size: 15px;
  }

  .company-overview dl,
  .overview-images {
    width: 100%;
    max-width: none;
  }
   #会社概要 dl {
    font-size: 16px;
    line-height: 1.6;
    padding: 0 12px;
  }

  #会社概要 dt {
    font-size: 15px;
    margin-top: 12px;
  }

  #会社概要 dd {
    font-size: 15px;
    line-height: 1.6;
  }

  .face-caption p,
  .map-caption p {
    font-size: 14px;
    padding: 0 12px;
  }
    .overview-img {
    max-width: 100%;
    margin: 0 auto;
  }
    .map-caption {
    font-size: 14px;
    line-height: 1.6;
    padding: 0 12px;
  }

  .map-caption-lead {
    font-size: 17px;
  }
  
  .office-title {
    font-size: 14px;
  }
}



/*採用情報* */
.recruitment-section {
  background-color: #f9f9f9;
  padding: 40px 20px;
  border-radius: 8px;
  margin-bottom: 100px;
}

.recruit-list {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
}

.recruit-list li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}


.recruit-contact {
  margin-top: 20px;
  font-weight: bold;
}

.recruit-points {
  list-style: disc inside; /* 箇条書きの丸 */
  padding-left: 0;
  margin: 20px 0;
}

.recruit-points li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.recruitment-section p {
  margin-bottom: 16px;
  line-height: 1.7;
}

.recruit-extra {
  margin: 30px 0;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/*その他の情報*/
.recruit-extra {
  margin: 30px 0;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.extra-title {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: bold;
  color: #333;
}

.recruit-extra ul {
  list-style: disc inside;
  padding-left: 0;
}

.recruit-extra li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Q&A */
.recruit-faq {
  margin-top: 20px;
}
.faq-title {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #4a79ba;
}
.faq-list dt {
  font-weight: bold;
  margin-top: 10px;
  color: #333;
}
.faq-list dd {
  margin: 4px 0 10px 20px;
  line-height: 1.6;
}

/* タイムスケジュール */
.daily-schedule {
  margin-top: 20px;
}

.schedule-title {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #4a79ba; /* アクセントカラー */
}

.schedule-list {
  list-style: none;
  padding: 0;
}

.schedule-list li {
  padding: 3px 0;
  border-bottom: 1px solid #eee;
}

.schedule-list li strong {
  display: inline-block;
  width: 60px;
  color: #333;
}

/*応募欄*/
.contact-link {
  text-decoration: underline;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
}

.contact-link.email {
  color: #0073e6; /* 青系でメールっぽく */
}

.contact-link.tel {
  color: #28a745; /* 緑系で電話っぽく */
}

.contact-link.fax {
  color: #d9534f; /* 赤系でFAXっぽく */
}

.contact-link:hover::before {
  content: "📩 ";
}

.contact-link.tel:hover::before {
  content: "📞 ";
}

.contact-link.fax:hover::before {
  content: "📠 ";
}

@media screen and (min-width: 768px) {
  a[href^="tel:"],
  a[href^="fax:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #999;
  }
  
    .recruit-contact {
    font-size: 16px;
    line-height: 1.8;
    padding: 10px;
  }

  .contact-link {
    display: inline-block;
    margin: 4px 0;
    font-size: 17px;
  }
}








/*施工事例*/
.仮画像1 {
 background-image: url(../images/kabure.jpeg);
 background-position: center;
 background-size: cover;
 height: 400px;
 width: 100%;
 margin-bottom: 10px;
}

/*画像下の文字*/
.caption-block {
  padding: 0 12px;
  text-align: left;
}

.caption-title {
  font-size: 20px;
  font-weight: 600;
  color: #4a79ba; /* ← お好みの色に変更可能 */
  margin-bottom: 8px;
}

.caption-text {
  font-size: 16px;
  line-height: 1.3;
  color: #333;
  margin-bottom: 4px;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列表示 */
  gap: 40px;
  margin-bottom: 50px;
}

.case-item {
  display: flex;
  flex-direction: column;
}


.仮画像2 {
 background-image: url(../images/zeb.jpeg);
 background-position: center;
 background-size: cover;
 height: 400px;
 width: 100%;
 margin-bottom: 10px;
}

.仮画像3 {
 background-image: url(../images/kobe.jpeg);
 background-position: center;
 background-size: cover;
 height: 400px;
 width: 100%;
 margin-bottom: 10px;
}

.仮画像4 {
 background-image: url(../images/sakai.jpeg);
 background-position: center;
 background-size: cover;
 height: 400px;
 width: 100%;
 margin-bottom: 10px;
}

.仮画像5 {
  background-image: url(../images/daihatu.jpg); /* 画像パスを適宜変更 */
  background-position: center;
  background-size: cover;
  height: 400px;
  width: 100%;
  margin-bottom: 10px;
}

.仮画像6 {
  background-image: url(../images/siga.jpg); /* 画像パスを適宜変更 */
  background-position: center;
  background-size: cover;
  height: 400px;
  width: 100%;
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .case-grid {
    grid-template-columns: 1fr;
  }

  .caption-block {
    padding: 0 16px;
  }

  .caption-title {
    font-size: 18px;
  }

  .caption-text {
    font-size: 15px;
  }
}




/*2024年一覧*/
.project-list {
  max-width: 1120px;
  margin: 0 auto;
  /*padding: 0 16px;*/
  font-family: "Noto Sans JP", sans-serif;
}


/*2つ目*/
.year-block {
  margin-bottom: 25px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fafafa;
  overflow: hidden;
}


/*2つ目*/
.year-toggle {
  background-color: #e0eafc;
  font-size: 18px;
  font-weight: bold;
  padding: 16px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #2c5aa0;
  border-bottom: 1px solid #ccc;
}

.project-details {
  list-style: none;
  padding-left: 16px;
  margin-top: 8px;
}


/*2つ目*/
.project-details li {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.8;
  padding-left: 20px;
  position: relative;
}

.project-details li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #4a79ba;
  font-size: 18px;
}

.decade-details {
  /* 年代ボタンと年別ブロックの間の見た目を整える */
  padding: 8px 12px 12px;
  margin-left: 8px; /* うっすらインデント */
}

/* ネストの境界が重たければ、内側の枠を弱める */
.decade-details .year-block {
  border: 1px solid #eee;
  background-color: #fff;
  margin-top: 5px;
}


.hidden {
  display: none;
}

/* 年代（親）プルダウンの色・デザイン */
.decade-toggle {
  background-color: #cce0ff; /* 年代の背景色（淡い青） */
  color: #003366;            /* 年代の文字色（濃い青） */
  font-size: 20px;           /* 親は少し大きめ */
  padding: 18px;
  border-bottom: 2px solid #99b3cc; /* 境界線も少し濃く */
  font-weight: bold;
}

/* 年代の中の「年」プルダウンの色・デザイン */
.decade-details .year-toggle {
  background-color: #f9f5e5; /* 子の背景色（淡いベージュなど差別化） */
  color: #7a5a00;            /* 子の文字色（茶系） */
  font-size: 18px;
  padding: 16px;
  border-bottom: 1px solid #ccc;
  font-weight: normal;       /* 親より軽く */
}



@media screen and (max-width: 768px) {
  .year-toggle {
    font-size: 16px;
    padding: 12px;
  }

  .project-details li {
    font-size: 15px;
    line-height: 1.6;
  }
}


/*お問い合わせ*/
.corporate-contact {
  background-color: #f0f4f8;
  padding: 40px 20px;
  text-align: center;
  border-top: 1px solid #ccc;
  margin: 60px auto 0; /* autoで中央寄せ */
  max-width: 1120px;   /* 年代ブロックと同じ幅 */
  border-radius: 8px;  /* 年代ブロックと統一感を出すなら追加 */
}

.corporate-contact h2 {
  font-size: 20px;
  margin-bottom: 12px;
  color: #333;
}

.corporate-contact p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #555;
  line-height: 1.6;
}

.contact-button {
  display: inline-block;
  background-color: #4a79ba;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.contact-button:hover {
  background-color: #3a68a0;
}

@media screen and (max-width: 768px) {
  .corporate-contact {
    padding: 30px 15px;
  }
  .contact-button {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }
}





/*フッター*/
footer {
 text-align: center;
 margin: 50px 0;
}

.copyright {
 font-size: 12px;
 margin-top: 10px
}

/*いるかどうか？？？？*/
/* フッターメニュー追加スタイル */
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.footer-menu li {
  display: inline-block;
  margin: 0 10px;
}

.footer-menu a {
  color: #333; /* 背景が暗色なら白などに調整 */
  text-decoration: none;
  font-size: 14px;
}

.footer-menu a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  footer .logo {
    display: flex;  
    width: 100%;              /* 親要素いっぱいに広げる */
    justify-content: center;    /* 横方向中央 */
    align-items: center;        /* 縦方向中央（高さがある場合） */
    margin: 0 auto 10px;        /* 上下余白調整 */
    text-align: center;         /* テキストも中央 */
  }

  .footer-menu {
    margin: 10px 0; /* ← メニューの上下余白も調整 */
  }

  .copyright {
    margin-top: 5px; /* ← コピーライトとの間も詰める */
  }
}


/*トップページへ戻るボタン* */
.back-to-top {
  text-align: center;
  margin: 40px 0;
  font-size: 16px;
}

.back-to-top a {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
}

.back-to-top a:hover {
  text-decoration: underline;
}