/*ご挨拶*/

 .greeting-container {
    display: flex; /* Flexboxを有効化 */
    align-items: flex-start; /* 上揃え (または center など) */
    gap: 30px; /* テキストと画像の間の余白 (例) */
 }

.greeting-text {
    font-size: var(--h4-size);
    flex: 2; /* テキスト部分の幅の割合 (例: 画像の2倍) */
    /* flex-basis: 60%; など具体的な幅指定も可能 */
}

.greeting-image {
    flex: 1; /* 画像部分の幅の割合 (例: テキストの半分) */
    /* flex-basis: 35%; など具体的な幅指定も可能 */
    text-align: center; /* 画像を中央寄せにする場合 */
}

.greeting-image img {
    max-width: 100%; /* 親要素の幅を超えないように */
    height: auto;
    margin:0 auto;
    border-radius: 8px; /* 画像の角を丸める (例) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 軽い影 (例) */
}

.representative-name {
    margin-top: 30px;
    text-align: right;
    font-weight: bold;
}


@media (max-width: 768px) { /* スマートフォンなどの小さい画面の場合 */
    .greeting-container {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央揃え */
    }

    .greeting-text,
    .greeting-image {
        flex: none; /* flexの割合指定を解除 */
        width: 100%; /* 幅を100%に */
        margin-bottom: 20px; /* 画像とテキストの間の余白 */
    }

    .greeting-section .greeting-image {
        margin-bottom: 30px;
    }

}



/*** 会社概要（モーダル内） ***/

.company-profile {
    max-width: 800px; /* 表全体の最大幅 */
    margin: 0px auto 10px auto; /* 中央寄せ */
    border: 1px solid #ddd; /* 表全体の枠線 (任意) */
    border-radius: 5px; /* 角を少し丸める (任意) */
    overflow: hidden; /* border-radius を子要素に適用するため */
}


.profile-row {
    display: flex; /* 行をFlexboxにする */
    border-bottom: 1px solid #eee; /* 行間の区切り線 (任意) */
}

.profile-row:last-child {
    border-bottom: none; /* 最後の行の区切り線は不要 */
}

.profile-label {
    flex: 0 0 150px; /* ラベルの幅を固定 (例: 150px) */
    /* flex-basis: 100px; でも同様 */
    padding: 12px 15px;
    font-weight: bold;
    background-color: #f9f9f9; /* ラベル列の背景色 (任意) */
    border-right: 1px solid #eee; /* ラベルと値の間の区切り線 (任意) */
    display: flex; /* 中央揃えのため */
    align-items: center; /* 垂直方向中央揃え */
}

.profile-value {
    flex: 1; /* 値部分が残りの幅をすべて使う */
    padding: 12px 15px;
    display: flex; /* 内容が複数行の場合の垂直揃えのため */
    flex-flow: column wrap;
    align-items: center; /* 垂直方向中央揃え */
    text-align: left;
}

.profile-value p{
    margin:0px;
}


/* 隔行の背景色 (薄い青) */
.profile-row:nth-child(even) { /* 偶数行 */
    background-color: #eaf6ff; /* 薄い青系の色 (例) */
}
/* もし奇数行に色を付けたい場合は :nth-child(odd) を使用 */

/* 所在地や取引銀行のように複数行になる場合の改行を有効にする */
.profile-value br {
    display: block; /* <br> をブロック要素として扱う */
    margin-bottom: 0.5em; /* 改行後のマージン */
}
.profile-value br:last-child {
    margin-bottom: 0; /* 最後の改行後のマージンは不要 */
}




/* 企業理念  */
.philosophy-diagonal {
  display: flex;
  flex-wrap: wrap;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  background-color: #1A2E63;
}

.philosophy-text,
.philosophy-image {
  position: relative;
}

.philosophy-text {
  background-color: #1A2E63;
  color: #fff;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 95% 0, 85% 100%, 0% 100%);
  z-index: 1;
  width: 40%;
}

.philosophy-image {
  background-size: cover;
  background-position: center;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 5% 100%);
  z-index: 1;
  width: 60%;
}

.philosophy-diagonal.even .philosophy-text {
  order: 2;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 15% 100%);
}

.philosophy-diagonal.even .philosophy-image {
  order: 1;
  clip-path: polygon(0 0, 95% 0, 85% 100%, 0% 100%);
}

.philosophy-text .inner {
  padding: 40px;
  text-align: center;
  max-width: 480px;
}

.philosophy-text h3 {
  font-size: 24px;
  color: #fff;
}

.philosophy-text p {
  font-size: 16px;
  line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .philosophy-diagonal {
    flex-direction: column;
    min-height: 50px;
  }

  .philosophy-text,
  .philosophy-image {
    width: 100%;
    clip-path: none;
  }

  .philosophy-text .inner {
    padding: 24px;
  }
}


/* ボタンデザイン */
/* モーダル背景 */
.modal-overlay {
  display: none; /* 最初は非表示 */
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#modal5 .modal-content {
      height: 90%;
      overflow-y: auto;

}

.modal-images {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.modal-images img {
  width: 45%;
  border-radius: 6px;
  object-fit: cover;
}

.modal-title {
  font-size: 20px;
  color: #1A2E63;
  margin-bottom: 8px;
}
.modal-description {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  text-align: left;
}

.close-button {
  padding: 8px 16px;
  background: #1A2E63;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
.close-button:hover {
  background: #2f4b93;
}

@media screen and (max-width: 600px) {
  .modal-images {
    flex-direction: column;
  }
  .modal-images img {
    width: 100%;
  }
}





/* Services Section */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xxl);
}

.service-card {
  background-color: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  height: 100%;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.service-image {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.service-card:hover .service-image img {
  transform: scale(1.05);
}

.service-content {
  padding: var(--space-lg);
}

.service-content h3 {
  font-size: var(--h3-size);
  color: var(--primary-color);
  margin-bottom: var(--space-md);
  position: relative;
  padding-bottom: var(--space-sm);
}

.service-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--accent-color);
}

.service-content p {
  color: var(--medium-gray);
  margin-bottom: var(--space-lg);
  font-size: var(--body-size);
}

.service-content .btn {
  margin-top: auto;
  display: inline-block;
}

/* For fade-in animation when scrolling */
[data-aos] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos].visible {
  opacity: 1;
  transform: translateY(0);
}

[data-aos-delay="100"].visible {
  transition-delay: 0.1s;
}

[data-aos-delay="200"].visible {
  transition-delay: 0.2s;
}

[data-aos-delay="300"].visible {
  transition-delay: 0.3s;
}

/* Responsive */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* レスポンシブ対応 (任意) */
@media (max-width: 600px) {

  .profile-label {
        flex: 0 0 100px;
}

    .company-profile h2 {
        font-size: 1.3em;
    }
}