/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,  "BIZ UDPGothic", sans-serif,"Meow Script", cursive,"Tangerine", cursive;

    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* コンテナ */
.container {
    width: 100vw;

}

/* ヘッダー */
.header {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;

}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 8vh;
    min-height: 64px;

}

/* ロゴ */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    /* padding-left: 2vw; */
}

.logo-image {
    width: 6vw;
    height: 4vw;
    min-width: 200px;
    min-height: 32px;
    max-width: 220px;
    max-height: 40px;
    border-radius: 1vw;
    object-fit: contain;
}



/* デスクトップナビゲーション */
.nav-desktop {
    display: none;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 3vw;
    font-family: sans-serif;

}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 1vh 1.5vw;
    text-decoration: none;
    color: #1f4673;
    font-weight: 500;
    min-font-size: 14px;
    max-font-size: 16px;
    transition: color 0.2s ease;
font-size: 1.6vh;
font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
}

.nav-link:hover {
    color: #233146;
}



.dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

/* ドロップダウンメニュー */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1e3a8a;
    border-radius: 0.2vw;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    list-style: none;
    min-width: 28vw;
    max-width: 300px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1vh);
    transition: all 0.2s ease;
    margin-top: 1vh;
    z-index: 1001;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-link {
    display: block;
    padding: 1.5vh 2vw;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.6vw;
    min-font-size: 13px;
    max-font-size: 15px;
    transition: all 0.15s ease;
}

.dropdown-link:hover {
    background-color: #333333;
    color: #3b82f6;
}

/* CTAボタン */
.cta-button {
    display: none;
    padding-right: 2vw;
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
    padding: 1vh 2vw;
    border-radius: 0.2vw;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.3vw;
    min-font-size: 14px;
    max-font-size: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

}

.btn-primary:hover {
    background-color: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    padding-right: 2vw;
}

/* モバイルメニューボタン */
.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3vw;
    height: 3vw;
    min-width: 24px;
    min-height: 24px;
    max-width: 30px;
    max-height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.hamburger-line {
    position: absolute;
    width: 130%;
    height: 0.1vh;
    min-height: 2px;
    background-color: #485fda;
    transition: all 0.3s ease;
    transform-origin: center;
    margin-right: 50px;
}

.hamburger-line:nth-child(1) {
    top: 25%;
}

.hamburger-line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-line:nth-child(3) {
    bottom: 25%;
}

.mobile-menu-btn.active .hamburger-line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* モバイルナビゲーション */
.nav-mobile {
    display: none;
    background-color: #1e3a8a;
    position: fixed;
    top: 8vh;
    left: 0;
    width: 100vw;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    z-index: 999;
}

.nav-mobile.active {
    display: block;
    height: calc(100vh - 8vh);
}

.mobile-nav-list {
    list-style: none;
    padding: 2vh 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}

/* スマホ用設定 (例: 幅767px以下) */
@media (max-width: 767px) {
    .logo-image {
        width: 180px; /* スマホでは固定幅にする例 */
        height: auto; /* 高さは自動調整 */
        min-width: unset; /* 必要であれば最小幅制限を解除 */
        max-width: 100%; /* 親要素からはみ出さないように */
margin-left: -4vw;
    }
}


.mobile-nav-item {
}

.mobile-nav-link {
    display: block;
    padding: 1.5vh 2vw;
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 2vw;
    min-font-size: 16px;
    max-font-size: 18px;
    transition: all 0.2s ease;
}

.mobile-nav-link:hover {
    background-color: #333333;
    color: #3b82f6;
}

.mobile-dropdown {
    list-style: none;
    background-color: #333333;
}

.mobile-dropdown-link {
    display: block;
    padding: 1vh 4vw;
    text-decoration: none;
    color: #cccccc;
    font-size: 1.8vw;
    min-font-size: 14px;
    max-font-size: 16px;
    transition: color 0.2s ease;
}

.mobile-dropdown-link:hover {
    color: #3b82f6;
}

.mobile-cta-btn {
    display: block;
    margin: 2vh 2vw;
    padding: 1.5vh 2vw;
    background-color: #3b82f6;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 0.8vw;
    font-weight: 500;
    font-size: 2vw;
    min-font-size: 16px;
    max-font-size: 18px;
    transition: background-color 0.2s ease;
}

.mobile-cta-btn:hover {
    background-color: #2563eb;
}

/* メインコンテンツ */
/* .main-content {
    background-color: #000000;
} */

/* ヒーローセクション */
.hero-section {
    position: relative;
    height: calc(100vh - 8vh);
    min-height: calc(100vh - 8vh);
    max-height: calc(100vh - 8vh);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    z-index: 0;
}

.hero-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* hero-background-grid内の画像に適用 */
.hero-background-image {
    opacity: 0; /* 最初は非表示 */
    transform: translateX(-100%); /* 左からスライドインするために初期位置を左にオフセット */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの速度と効果 */

}



.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(206, 209, 67, 0.4), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 90vw;
    animation: heroFadeIn 2s ease-out;
}

.hero-logo {
    margin-bottom: 3vh;
             filter: drop-shadow(5px 10px 30px rgba(255, 255, 255, 0.8)); /* 右下方向に2px、ぼかし5pxの黒っぽい影 */
}

.logo-animation {
    display: inline-block;
    animation: logoFloat 3s ease-in-out infinite;
}

.hero-logo-image {

    object-fit: contain;
    /* box-shadow: 0 8px 32px rgba(255, 255, 255, 0.3); */
    margin: 0 auto;
    animation: logoGlow 2s ease-in-out infinite alternate;
    display: block;
}

.hero-title {
    font-size: 4vw;
    min-font-size: 32px;
    max-font-size: 48px;
    font-weight: bold;
    color: white;
    line-height: 1.2;
    margin-bottom: 3vh;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    animation: titleSlideUp 1.5s ease-out 0.5s both;
    font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
}

.hero-subtitle {
    font-size: 2.3vw;
    min-font-size: 18px;
    max-font-size: 24px;
    color: #e5e7eb;
    margin-bottom: 4vh;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    animation: subtitleSlideUp 1.5s ease-out 0.8s both;
    font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
}

.hero-subtitle::after {
    content: ''; /* 擬似要素にはcontentプロパティが必要 */
    position: absolute; /* 親要素（.hero-subtitle）を基準に配置 */
    bottom: -5px; /* テキストからの下線の位置（調整可能） */
    left: 0; /* 下線の開始位置 */
    width: 100%; /* 下線の長さ（例: 100%でテキストと同じ長さ、50%で半分など自由に調整） */
    height: 2px; /* 下線の太さ（調整可能） */
    background-color: #ffd700; /* 下線の色（お好みの色に変更） */
}


.hero-description {
    margin-bottom: 6vh;
    animation: descriptionFadeIn 1.5s ease-out 1.1s both;
    font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
}

.hero-description p {
    font-size: 1.2vw;
    min-font-size: 14px;
    max-font-size: 18px;
    color: #d1d5db;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}
















/* レスポンシブ対応（スマホなど小さい画面） */
@media (max-width: 767px) {
    .contact-title {
        font-size: 28px; /* スマホでの固定文字サイズ */
    }

    .contact-description {
        font-size: 16px; /* スマホでの固定文字サイズ */
        text-align: left; /* スマホでは左揃え */
    }
}









/* アニメーション定義 */
@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(4vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1vh);
    }
}



@keyframes titleSlideUp {
    from {
        opacity: 0;
        transform: translateY(4vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtitleSlideUp {
    from {
        opacity: 0;
        transform: translateY(3vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes descriptionFadeIn {
    from {
        opacity: 0;
        transform: translateY(2vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ctaSlideUp {
    from {
        opacity: 0;
        transform: translateY(3vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 強みセクション */
.strengths-section {
    padding: 0vh 0vw;
    background-color: #000000;
}

.strengths-header {
    position: relative;
    /* ここから格子状のソリッドを追加 */
    background:
        linear-gradient(to right, rgba(255, 255, 255) , transparent 1px), /* 縦線 */
        linear-gradient(to bottom, rgba(255, 255, 255) , transparent .1px), /* 横線 */
        url('images/22.jpg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat;
    background-size: 2px 2px, 2px 2px, cover, cover; /* 格子の間隔を制御 */
    /* ここまで格子状のソリッドを追加 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 4vh 0vw;
}

.strengths-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(255, 255, 255, 0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

.strengths-header-content {
    position: relative;
    z-index: 2;
}

.strengths-title {
    font-size: 3vw;
    min-font-size: 28px;
    max-font-size: 36px;
    color: #000000;
    text-align: center;
    margin-bottom: 3vh;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    font-family: sans-serif;; /* お客様がご指定くださったプロパティ */
    position: relative; /* ★下線（ソリッド）を正確に配置するために必要 */
    padding-bottom: 0.5vh; /* ★下線とテキストの間に少しスペースを作るため（調整可能） */
    font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
}

/* ★タイトルの下に表示される「長さと高さを制御できるソリッド（下線）」の定義 */
.strengths-title::after {
    content: ''; /* 擬似要素として表示するために必須 */
    position: absolute; /* 親要素（.strengths-title）を基準に配置 */
    bottom: 0; /* .strengths-titleのパディング下端に配置 */
    left: 50%; /* 中央に配置するために左から50% */
    transform: translateX(-50%); /* 中央揃えの微調整 */
    width: 60%; /* ★この'width'プロパティで下線の長さを制御します */
    height: 0.5px; /* ★この'height'プロパティで下線の高さを（太さ）制御します */
    background-color: #070808; /* 下線の色（ご希望に合わせて変更可能） */

}

/* 強みタイトルのルビのスタイル */
.strengths-title rt {
    font-size: 4em; /* ★この値を変更してルビのサイズを調整できます */
    color: #ffffff; /* ルビの色 */
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
    /* position: relative; と top: -0.3em; も削除します。標準の配置を利用します */
}

.strengths-description {
    font-size: 1.5vw;
    min-font-size: 16px;
    max-font-size: 18px;
    color: #000000;
    text-align: center;
    line-height: 1.8;
    margin-bottom: 4vh;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.8);
font-weight: normal;
    padding: 2vh 2vw;
    border-radius: 1vw;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;

}

.strengths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.3vh;
    /* お客様が変更を意図されている 'width' プロパティの例 */
    /* 例: width: 80%; */
    max-width: 1280px; /* グリッドの最大幅を設定し、広がりすぎを防ぎます（任意） */
    margin: 0 auto; /* ★追加：グリッドコンテナ自体を親要素の中で中央に配置します */
    justify-content: center; /* カードをグリッド内部で中央に配置します */
    padding: 5%;
}

.strength-card {
    background-color: #333333;
    padding: 3vh 2.5vw;
    border-radius: 0vw;
    border: 1px solid #555555;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(3vh);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.strength-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.strength-card:hover {
    transform: translateY(-0.5vh);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

.strength-title {
    font-size: 1.6vw;
    min-font-size: 18px;
    max-font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5vh;
}

.strength-description {
    font-size: 1vw;
    min-font-size: 14px;
    max-font-size: 16px;
    color: #cccccc;
    line-height: 1.6;
    font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ サービスセクション */
.services-section {
    background-color: #000000;
}

.services-header {
  position: relative;
  /* ここから格子状のソリッドを追加 */
  background:
      linear-gradient(to right, rgba(255, 255, 255) , transparent 1px), /* 縦線 */
      linear-gradient(to bottom, rgba(255, 255, 255) , transparent .1px), /* 横線 */
      url('images/15.jpg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat;
  background-size: 2px 2px, 2px 2px, cover, cover; /* 格子の間隔を制御 */
  /* ここまで格子状のソリッドを追加 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 4vh 0vw;
}

.services-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

.services-header-content {
    position: relative;
    z-index: 2;
}

/* サービスタイトルのスタイル */
.services-title {
    font-size: 3vw;
    min-font-size: 28px;
    max-font-size: 36px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin-bottom: 3vh;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    font-family: sans-serif; /* お客様がご指定くださったプロパティ */
    position: relative; /* ★下線（ソリッド）を正確に配置するために必要 */
    padding-bottom: 0.5vh; /* ★下線とテキストの間に少しスペースを作るため（調整可能） */
    font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
}

/* ★サービスタイトルの下に表示される「長さと高さを制御できるソリッド（下線）」の定義 */
.services-title::after {
    content: ''; /* 擬似要素として表示するために必須 */
    position: absolute; /* 親要素（.services-title）を基準に配置 */
    bottom: 0; /* .services-titleのパディング下端に配置 */
    left: 50%; /* 中央に配置するために左から50% */
    transform: translateX(-50%); /* 中央揃えの微調整 */
    width: 60%; /* ★この'width'プロパティで下線の長さを制御します */
    height: 0.5px; /* ★この'height'プロパティで下線の高さを（太さ）制御します */
    background-color: #070808; /* 下線の色（ご希望に合わせて変更可能） */
}

/* サービスタイトルのルビのスタイル */
.services-title rt {
    font-size: 4em; /* ★この値を変更してルビのサイズを調整できます */
    color: #ffffff; /* ルビの色 */
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
    /* position: relative; と top: -0.3em; も削除します。標準の配置を利用します */
}

.services-description {
  font-size: 1.5vw;
  min-font-size: 16px;
  max-font-size: 18px;
  color: #000000;
  text-align: center;
  line-height: 1.8;
  margin-bottom: 4vh;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 2px rgba(255, 255, 255, 0.8);
  padding: 2vh 2vw;
  border-radius: 1vw;
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3vh;
  /* お客様が変更を意図されている 'width' プロパティの例 */
  /* 例: width: 80%; */
  max-width: 1280px; /* グリッドの最大幅を設定し、広がりすぎを防ぎます（任意） */
  margin: 0 auto; /* ★追加：グリッドコンテナ自体を親要素の中で中央に配置します */
  justify-content: center; /* カードをグリッド内部で中央に配置します */
  padding: 5%;
}

/* サービスカードのテキストコンテンツのパディング */
/* 画像の下のテキスト部分にパディングを適用するために新しいラッパーを推奨 */
/* もしくは、既存のh3とpに直接パディングを設定 */
.service-card .service-title,
.service-card .service-description {
    padding-left: 30px; /* 左側にパディング */
    padding-right: 30px; /* 右側にパディング */
}

.service-card .service-title {
    margin-top: 20px; /* 画像からの上部余白 */
    margin-bottom: 10px; /* 説明文との余白 */
}

.service-card .service-description {
    margin-bottom: 20px; /* ボタンとの余白 */
}

/* ==================================== */
/* サービスカードのボタン Wrapper */
/* ==================================== */
.service-card-button-wrapper {
    margin-top: auto; /* ボタンをカード下部に配置 */
    padding: 20px 30px 30px 30px; /* 上20px, 左右30px, 下30pxのパディング */
    text-align: right; /* ボタンの位置を右揃えに設定 */
}
.service-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.service-card:hover {
    transform: translateY(-0.5vh);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

.service-title {
  font-size: 1.6vw;
  min-font-size: 18px;
  max-font-size: 22px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 1.5vh;
}

.service-description {
  font-size: 1vw;
  min-font-size: 14px;
  max-font-size: 16px;
  color: #000000;
  line-height: 1.6;
  font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
}


/* ==================================== */
/* サービスカードのボタン Wrapper */
/* ==================================== */
.service-card-button-wrapper {
    margin-top: auto; /* ボタンをカード下部に配置（Flexboxの親要素でheight: 100%;が必要です） */
    padding-top: 20px; /* ボタンの上に余白 */
    text-align: right; /* ボタンの位置を右揃えに設定 */
}

/* ==================================== */
/* サービス詳細ボタンの基本スタイル */
/* ==================================== */
.service-detail-button {
    display: inline-block; /* インラインブロック要素として表示 */
    padding: 12px 28px; /* 内側の余白：上下12px、左右28px */
    background-color: #0b0178; /* ボタンの背景色（例：青） */
    color: #fff; /* 文字色 */
    text-decoration: none; /* 下線を削除 */
    border-radius: 5px; /* 角を丸くする */
    font-weight: bold; /* 文字を太くする */
    font-size: 1rem; /* フォントサイズ */
    transition: background-color 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション効果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 軽い影を追加 */
    text-align: center; /* ボタン内のテキストを中央揃えに設定 */
}

/* サービスカード内のイメージ写真 */
/* ==================================== */
.service-card-image {
    width: 100%; /* カードの幅いっぱいに広げる */
    height: 200px; /* ★画像の高さを固定（必要に応じて調整してください） */
    object-fit: cover; /* 画像がボックスに収まるようにトリミングし、アスペクト比を維持 */
    display: block; /* 画像の下に発生する余白を削除 */
    /* margin-bottom は .service-card の padding で調整するため、ここでは不要 */
}


/* ==================================== */
/* ホバーアクション */
/* ==================================== */
.service-detail-button:hover {
    background-color: #0056b3; /* ホバー時の背景色を濃くする */
    transform: translateY(-2px); /* ホバー時に少し上に持ち上がる */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ホバー時の影を強調 */
}

/* ==================================== */
/* service-cardのFlexbox設定（ボタンを底部に固定するため） */
/* ==================================== */
/* サービスカード全体のスタイル調整 */
/* ==================================== */
.service-card {
    display: flex; /* Flexboxコンテナにする */
    flex-direction: column; /* 子要素を縦方向に並べる */
    justify-content: space-between; /* 上部コンテンツとボタンを両端に配置 */
    height: 100%; /* 親要素の高さに合わせる（グリッドアイテムの場合など） */
    background-color: #fff; /* カードの背景色 */
    border-radius: 8px; /* カード全体の角を丸くする */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* カードに影を追加 */
    overflow: hidden; /* 画像の角丸がはみ出さないように設定 */

    /* 内部コンテンツのパディングを調整 */
    padding: 0; /* 画像がカードの端から始まるため、上部のパディングを0に */
}


/* ============================ company info ================================================== */





.company-info-logo-container {
    margin: 2vh 0; /* 上下2vhの余白を作成し、左右の余白はなし */
    text-align: left; /* コンテナ内のインライン要素（画像など）を中央揃えにする */
    width: 80%; /* 親要素（.company-info-left）の幅いっぱいに広がる */
    /* 必要に応じて背景色やパディングなどを追加し、ロゴの表示領域を調整できます */
     filter: drop-shadow(5px 10px 30px rgba(255, 255, 255, 0.8)); /* 右下方向に2px、ぼかし5pxの黒っぽい影 */
}


/* 企業情報セクションの背景色 */
/* 企業情報セクションの背景画像設定 */
.company-info-section {
    background-color: #210b60; /* すでに設定されている背景色 */
    padding: 8vh 0; /* すでに設定されているパディング */

    /* ★ここから背景画像に関する設定を追加します */
    background-image: url('images/21.jpg'); /* ここに表示したい画像のパスを指定 */
    background-size: cover; /* 背景画像がセクション全体を覆うように拡大・縮小 */
    background-position: center center; /* 背景画像を中央に配置 */
    background-repeat: no-repeat; /* 背景画像の繰り返しを防止 */
    color: #ffffff; /* 背景画像の上にくるテキストの色を明るくする（必要であれば） */
}


/* 企業情報セクションの左右均等コンテナ */
.company-info-content {
    display: flex; /* Flexboxを有効にする */
    justify-content: space-around; /* 子要素間に均等なスペースを配置（中央寄せ） */
    align-items: flex-start; /* 子要素の開始位置を上揃えにする */
    gap: 0vw; /* 子要素間の隙間（調整可能） */
    max-width: 1200px; /* コンテンツの最大幅を制限（必要であれば調整） */
    margin: 0 auto; /* 中央に配置 */
    padding: 0 2vw; /* 左右のパディング */
}

.company-info-left{
   flex: 1; /* 親要素の利用可能なスペースを均等に分割 */
   /* 必要に応じて、背景色やパディングなどを追加して見た目を調整 */
   padding: 2vh 2vw;
   background-color: rgba(0, 0, 0, 0.5); /* 黒を不透明度50%で半透明に設定 */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   height: 600px;
}

.company-info-right {
    flex: 1; /* 親要素の利用可能なスペースを均等に分割 */
    /* 必要に応じて、背景色やパディングなどを追加して見た目を調整 */
    padding: 2vh 2vw;
    background-color: #ffffff; /* 仮の背景色で領域を分かりやすく */

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
       height: 600px;
}

/* スマホなど小さい画面でのレイアウト調整 */
@media (max-width: 767px) {
    .company-info-content {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央揃えにする */
    }

    .company-info-left,
    .company-info-right {
        width: 100%; /* 幅を100%にする */
        margin-bottom: 3vh; /* 下にスペースを追加 */
    }
}


/* 企業情報セクションのタイトル（h2） */
.company-info-title {
    font-size: 3vw; /* ビューポート幅に基づく文字サイズ */
    min-font-size: 24px; /* 最小文字サイズ */
    max-font-size: 32px; /* 最大文字サイズ */
    color: #ffffff; /* 文字色 */
    margin-bottom: 2vh; /* 下のマージン */
    text-align: left; /* 中央揃え */
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
        letter-spacing: 1.2rem;
}

/* 企業情報セクションの説明文（p） */
.company-info-description {
    font-size: 1.2vw; /* ビューポート幅に基づく文字サイズ */
    min-font-size: 16px; /* 最小文字サイズ */
    max-font-size: 18px; /* 最大文字サイズ */
    color: #ffffff; /* 文字色 */
    line-height: 1.6; /* 行の高さ */
    text-align: justify; /* 両端揃え */
    font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;

}

/* モバイルなど小さい画面での調整 */
@media (max-width: 767px) {
    .company-info-title {
        font-size: 28px; /* スマホでの固定文字サイズ */
        margin-bottom: 1.5vh;
        padding-left: 2vw;
    }

    .company-info-description {
        font-size: 16px; /* スマホでの固定文字サイズ */
        text-align: justify; /* スマホでは左揃え */
    }
}


/* 会社情報テーブル全体のスタイル */
.company-details-table {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    border-collapse: collapse; /* セルの罫線を重ねて表示する */
    font-size: 1.1vw; /* ビューポート幅に対する相対的な文字サイズ */
    min-font-size: 15px; /* 最小文字サイズ */
    max-font-size: 17px; /* 最大文字サイズ */
    color: #000000; /* テーブル全体の文字色（半透明の背景に合わせ白系に） */
}

/* 各行のスタイル */
.company-details-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 行の下に薄い罫線 */
}

/* 最後の行には下線なし */
.company-details-table tr:last-child {
    border-bottom: none;
}

/* 項目名（<th>）のスタイル */
.company-details-table th {
    text-align: justify; /* 左揃え */
    padding: 0.5vh 1vw; /* 上下左右のパディング */
    width: 30%; /* 項目名の列幅（調整可能） */

    color: #000000; /* 項目名の色を少し明るめに */
    vertical-align: top; /* 内容が複数行の場合、上端に揃える */
    font-weight: lighter;
}

/* 内容（<td>）のスタイル */
.company-details-table td {
    text-align: left; /* 左揃え */
    padding: 0.5vh 1vw; /* 上下左右のパディング */
    color: #000000; /* 内容の色を項目名より少し暗めに */
    font-weight: lighter;

}

/* レスポンシブ対応（スマホなど小さい画面） */
@media (max-width: 767px) {
    .company-details-table {
        font-size: 15px; /* スマホでの固定文字サイズ */
    }

    .company-details-table th,
    .company-details-table td {
        display: block; /* 項目と内容を縦に並べる */
        width: 100%; /* 幅を100%にする */
        text-align: justify; /* 左揃えを維持 */
        padding: 1vh 2vw; /* パディングを調整 */
    }

    .company-details-table th {
        font-size: 16px; /* 項目名を少し大きく */
        margin-top: 1.5vh; /* 各項目の上に少しスペース */
        color: #000000; /* 色を維持 */
    }

    .company-details-table tr {
        border-bottom: 1px solid rgba(0, 0, 0, 0.6); /* 各項目ブロックの下線 */
    }

    .company-details-table tr:first-child th {
        margin-top: 0; /* 最初の項目上部のマージンをなくす */
    }
}





/* スマホ専用フォントサイズ調整 */
@media (max-width: 767px) {
    .logo-text {
        font-size: 20px !important;
    }

    .nav-link {
        font-size: 16px !important;
    }

    .btn-primary {
        font-size: 16px !important;
    }

    .mobile-nav-link {
        font-size: 18px !important;
    }

    .mobile-dropdown-link {
        font-size: 16px !important;
    }

    .mobile-cta-btn {
        font-size: 18px !important;
    }

    .hero-title {
        font-size: 36px !important;
                font-weight: normal;
    }

    .hero-subtitle {
        font-size: 20px !important;

    }

    .hero-description p {
      font-size: 18px !important;
      text-align: justify;
      line-height: 1.2;
      text-shadow: none;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        font-size: 18px !important;
    }

    .services-title {
        font-size: 30px !important;
    }

    .services-description {
        font-size: 18px !important;
        text-align: justify;
        line-height: 1.2;
        text-shadow: none;
    }

    .service-title {
        font-size: 20px !important;
    }

    .service-description {
        font-size: 16px !important;
    }

    .strengths-title {
        font-size: 32px !important;
    }

    .strengths-description {
        font-size: 18px !important;
        text-align: justify;
        line-height: 1.2;
        text-shadow: none;
    }

    .strength-title {
        font-size: 20px !important;
    }

    .strength-description {
      font-size: 18px !important;
      text-align: justify;
      line-height: 1.2;
      text-shadow: none;
    }
}

/* タブレット以上 */
@media (min-width: 768px) {
    .nav-desktop {
        display: block;
    }

    .cta-button {
        display: block;
    }

    .mobile-menu-btn {
        display: none;
    }

    .demo-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .strengths-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* デスクトップ */
@media (min-width: 1024px) {
    .demo-cards {
        grid-template-columns: repeat(4, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .strengths-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}



/* ==================================== */
/* フッターセクション */
/* ==================================== */

/* フッター全体のスタイル */
.site-footer {
    background-color: #7d8099; /* 暗めの背景色を設定（例: 黒に近いグレー） */
    color: #ffffff; /* デフォルトの文字色を白に設定 */
    padding: 60px 20px; /* 上下のパディングを増やしてゆとりを持たせる */
    font-family: 'Arial', sans-serif; /* フォントの指定 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 上部に薄い境界線を追加 */
}

/* フッターメインコンテンツのコンテナ */
.footer-container {
    max-width: 1200px; /* サイトの最大幅に合わせる */
    margin: 0 auto; /* 中央寄せ */
    display: flex; /* Flexboxで左右のコンテナを横並びに */
    justify-content: space-between; /* 左右のコンテナを両端に配置 */
    align-items: flex-start; /* 上揃え */
    flex-wrap: wrap; /* 画面が小さい場合に折り返す */
    padding: 0 20px; /* 左右のパディング */
    gap: 40px; /* 左右のコンテナ間の隙間 */
}

/* 左側のコンテナ内部 (ロゴ、社名、連絡先) */
.footer-left-content {
    flex: 1; /* 利用可能なスペースを均等に分配 */
    min-width: 280px; /* 最小幅を設定してレイアウト崩れを防ぐ */
    /* margin-right: 20px; /* gapプロパティで代替するため削除または調整 */ */
}

/* フッターのロゴエリア */
.footer-logo-area {
    margin-bottom: 20px; /* ロゴと社名の下に余白 */
}

.footer-logo-link {
    display: inline-block; /* ロゴ画像をブロック要素として扱う */
}

.footer-logo-image {
    max-width: 180px; /* ロゴ画像の最大幅 */
    height: auto; /* 高さは自動調整 */
    display: block; /* img下部の余白を削除 */
}

.footer-company-name {
    font-size: 1.2rem;
    margin-top: 10px;
    color: #f0f0f0; /* 社名の文字色 (背景色に合わせて調整) */
}

/* 住所、Email、URLのブロック */
.footer-contact-info-block {
    margin-top: 25px; /* ロゴ/社名エリアからの余白 */
}

.footer-info-item {
    margin-bottom: 2px; /* 各情報行間の余白 */
    color: #dddddd; /* 情報の文字色 (背景色に合わせて調整) */
    font-size: 0.95rem; /* 情報のフォントサイズを微調整 */
}

/* 右側のコンテナ内部 (ナビゲーション) */
.footer-right-content {
    flex: 1; /* 利用可能なスペースを均等に分配 */
    min-width: 200px; /* 最小幅を設定 */
}

/* フッターナビゲーション */
.footer-nav ul {
    list-style: none; /* リストの点を削除 */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* 縦並びのリストにする */
    flex-wrap: wrap; /* 必要に応じて折り返す */
    max-height: 150px; /* ナビゲーションの高さ上限（調整可能） */
}

.footer-nav ul li {
    margin-bottom: 10px; /* 各ナビゲーション項目間の余白 */
    margin-right: 20px; /* 必要に応じて横方向の余白 */
}

.footer-nav ul li a {
    color: #ffffff; /* リンク色を白に設定（背景色に合わせて視認性確保） */
    text-decoration: none; /* 下線を削除 */
    font-size: 1rem;
    transition: color 0.3s ease; /* ホバー時のアニメーション */
}

.footer-nav ul li a:hover {
    color: #cccccc; /* ホバー時の色 */
}

/* コピーライト表記 */
.footer-bottom-copyright {
    text-align: center;
    margin-top: 50px; /* 上に大きな余白 */
    padding-top: 25px; /* 上にパディング */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 上に細い区切り線 */
}

.footer-bottom-copyright .copyright {
    font-size: 0.8rem;
    color: #aaaaaa; /* コピーライトの文字色 (背景色に合わせて調整) */
}

/* ==================================== */
/* レスポンシブ対応 (フッター) */
/* ==================================== */

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 15px; /* タブレットでのパディングを調整 */
    }

    .footer-container {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央寄せ */
        gap: 30px; /* 各セクション間の縦方向の隙間 */
        padding: 0 15px; /* スマホでの左右パディング */
    }

    .footer-left-content,
    .footer-right-content {
        width: 100%; /* 幅を100%にする */
        margin-right: 0; /* 右マージンをリセット */
        text-align: center; /* 中央寄せ */
    }

    .footer-logo-area {
        margin-bottom: 15px;
    }

    .footer-logo-image {
        margin: 0 auto; /* ロゴ画像を中央寄せ */
    }

    .footer-contact-info-block {
        margin-top: 20px;
    }

    .footer-nav ul {
        max-height: none; /* モバイルでは高さ制限を解除 */
        align-items: center; /* ナビゲーション項目も中央寄せ */
    }

    .footer-nav ul li {
        margin-bottom: 8px; /* モバイルでの各ナビゲーション項目間の余白を微調整 */
        margin-right: 0; /* 右マージンをリセット */
    }

    .footer-bottom-copyright {
        margin-top: 30px;
        padding-top: 20px;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding: 30px 10px; /* スマホでのパディングをさらに調整 */
    }

    .footer-logo-image {
        max-width: 150px; /* ロゴ画像をさらに小さく */
    }

    .footer-company-name {
        font-size: 1.1rem;
    }

    .footer-info-item {
        font-size: 0.85rem;
    }

    .footer-nav ul li a {
        font-size: 0.9rem;
    }

    .footer-bottom-copyright {
        font-size: 0.75rem;
        margin-top: 25px;
        padding-top: 15px;
    }
}




/* お問い合わせセクションの背景色とパディング */
.contact-section {
    background-color: #000000;
    padding: 8vh 0;
    overflow: hidden;
    position: relative;
    animation: zoomBackground 20s forwards infinite alternate;

    /* ★背景画像と格子の設定 */
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 2px), /* 横線 */
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 2px), /* 縦線 */
        url('images/13.jpg'); /* 元の背景画像 */
    background-size:
        10px 10px, /* 格子パターンのサイズ */
        10px 10px, /* 格子パターンのサイズ */
        100% 100%; /* アニメーションの開始サイズを調整（画像用） */
    background-position: center center;
    background-repeat: no-repeat; /* これは全体の繰り返し設定ですが、repeating-linear-gradientはそれ自体が繰り返す */

}

/* ★背景画像をズームするアニメーションを定義（既存） */
@keyframes zoomBackground {
    0% {
        background-size: 20px 20px, 20px 20px, 100% 100%; /* 0%の時点でのbackground-sizeを全ての背景に適用 */
    }
    100% {
        background-size: 20px 20px, 20px 20px, 120% 120%; /* 格子パターンは固定、画像のみズーム */
    }
}

/* ★背景画像をズームするアニメーションを定義 */
@keyframes zoomBackground {
    0% {
        background-size: 100% 100%; /* 開始時は通常サイズ */
    }
    100% {
        background-size: 120% 120%; /* 120%にズームアップ（調整可能） */
    }
}

/* ==================================== */
/* お問い合わせセクション */
/* ==================================== */

.contact-section {
    background-color: #000000;
    padding: 8vh 0;
    overflow: hidden;
    position: relative;
    /* zoomBackground アニメーションは background-size で指定するため、ここでは直接記述しない */

    /* ★背景画像と格子の設定 */
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 2px), /* 横線 */
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 2px), /* 縦線 */
        url('images/13.jpg'); /* 元の背景画像 */
    background-size:
        10px 10px, /* 格子パターンのサイズ（固定） */
        10px 10px, /* 格子パターンのサイズ（固定） */
        100% 100%; /* 画像の初期サイズ */
    background-position: center center;
    background-repeat: no-repeat;
    animation: zoomBackground 20s forwards infinite alternate; /* ★アニメーションをここに適用 */
}

/* ★背景画像をズームするアニメーションを定義（重複を解消し、画像のみに適用） */
@keyframes zoomBackground {
    0% {
        background-size: 10px 10px, 10px 10px, 100% 100%; /* 格子パターンは固定、画像は初期サイズ */
    }
    100% {
        background-size: 10px 10px, 10px 10px, 120% 120%; /* 格子パターンは固定、画像のみズーム */
    }
}

/* お問い合わせセクションのヘッダーコンテナ（既存、Flexboxを追加） */
.contact-header {
    margin-bottom: 5vh; /* 下部の余白 */
    padding: 0; /* 左右のパディング */
    position: relative; /* z-indexのため */
    z-index: 1; /* コンテンツを背景より手前に表示 */
}

/* お問い合わせセクションのヘッダーコンテンツ（Flexboxで左右分割） */
.contact-header-content {
    display: flex; /* ★Flexboxを有効化 */
    justify-content: center; /* ★子要素を中央に配置（必要に応じて space-between に戻す） */
    align-items: stretch; /* ★これによって子要素（左右のコンテナ）の高さが揃います */
    max-width: 1200px; /* コンテンツの最大幅 */
    margin: 0 auto; /* 中央に配置 */
    padding: 0; /* contact-headerで左右パディングを調整するため、ここでは0にする */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* 全体の影 */
    border-radius: 12px; /* 全体の角丸 */
    overflow: hidden; /* 角丸でコンテンツがはみ出さないように */
    min-height: 50vw;
}

/* 左側のコンテナ（タイトルと説明文） */
.contact-header-left {
    flex: 1; /* 利用可能なスペースを均等に分割 */
    min-width: 300px; /* 縮小時の最小幅 */
    padding: 4vh 3vw; /* 内部パディングを調整 */
    background-color: rgba(38, 20, 126, 0.9); /* 白の半透明背景 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 独自の影 */
    display: flex; /* 内部コンテンツを縦に中央揃え */
    flex-direction: column;
    justify-content: center; /* 垂直方向の中央揃え */
    /* align-items: center; /* テキストの左寄せを維持するため削除 */
    text-align: left; /* ★テキスト左揃えに戻す */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
    /* min-height は align-items: stretch; で調整されるため不要だが、
       必要であればコンテンツが極端に少ない場合のフォールバックとして残す */
    /* min-height: 872px; */ /* これがあると高さが固定されるので、Flexboxでの調整を妨げます */
}

/* 右側のコンテナ（お問い合わせフォーム） */
.contact-header-right {
    flex: 1; /* 利用可能なスペースを均等に分割 */
    min-width: 350px; /* 縮小時の最小幅 */
    padding: 4vh 3vw; /* フォームの余白に合わせるため調整 */
    background-color: rgba(255, 255, 255, 0.9); /* 白の半透明背景 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 独自の影 */
    height: auto; /* コンテンツに合わせて高さを自動調整 */
}

/* ==================================== */
/* お問い合わせセクションのタイトル */
/* ==================================== */
.contact-title {
    font-size: 3vw;
    min-font-size: 28px;
    max-font-size: 36px;
    color: #ffffff;
    text-align: left; /* PCでのタイトル本体の左寄せを維持 */
    margin-bottom: 3vh;
    position: relative; /* ★重要：rtのposition:absoluteの基準点とする */
    padding-bottom: 0.5vh;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* ==================================== */
/* PC表示（デフォルト）のルビのスタイル */
/* ==================================== */
.contact-title rt {
    font-size: 4em; /* ★PCでのルビの文字サイズ。調整してください */
    color: #ffffff; /* ルビの色 */
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;

    /* ★ルビをタイトルの上に強制的に配置するための設定 */
    display: block; /* ルビをブロック要素として扱い、親文字の行を占有させます */
    position: absolute; /* 親要素 .contact-title を基準に絶対配置 */

    /* ★ルビを「お問い合わせ」の左端に揃えるための調整 */
    /* 親文字「お問い合わせ」の幅の半分を左にずらし、ルビ自体の幅の半分で戻す */
    left: 0; /* タイトル要素の左端から開始 */
    transform: translateX(0); /* 横方向の中央寄せを解除 */

    text-align: left; /* ルビのテキスト自体を左揃えにする */
    width: auto; /* ルビの幅を内容に合わせる (はみ出し防止) */


    white-space: nowrap; /* ルビが改行しないように */

    /* ★ルビの垂直位置（タイトルからの持ち上げ量）を調整 */
    top: -0.8em; /* 例: h2のfont-sizeの-1.2倍の位置。ここで調整してください */

    /* 不要なマージンをリセットし、下部に少しマージンを設定 */
    margin: 0;
    padding: 0;
}

/* ==================================== */
/* お問い合わせタイトルの下線（ソリッド） */
/* ==================================== */
.contact-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; /* PCではタイトル本体の左端に合わせる */
    width: 100%;
    max-width: 200%; /* PCでの下線の最大幅を固定 */
    height: 0.5px;
    background-color: #ffffff;
}
/* お問い合わせセクションの説明文（既存） */
.contact-description {
    font-size: 1.2vw;
    min-font-size: 16px;
    max-font-size: 18px;
    color: #ffffff;
    line-height: 1.8;
    padding: 0; /* contact-header-left のパディングで調整するため0にする */
    text-align: justify;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* お問い合わせフォームの基本スタイル（フォームが contact-header-right の子になったため、max-width を削除） */
.contact-form {
    width: 100%; /* 親要素の幅いっぱいに */
    margin: 0; /* contact-header-right のパディングで調整するため0にする */
    padding: 0; /* contact-header-right のパディングで調整するため0にする */
    background-color: transparent; /* 親要素の背景色に合わせる */
    border-radius: 0; /* 親要素の角丸に合わせる */
    box-shadow: none; /* 親要素の影に合わせる */
}

/* フォームグループ（ラベルと入力欄のセット） (既存) */
.form-group {
    margin-bottom: 20px;
}

/* ラベルのスタイル (既存) */
.form-group label {
    display: block;
    font-size: 1rem;
    color: #333333;
    margin-bottom: 8px;
    font-weight: bold;
}

/* 必須マークのスタイル (既存) */
.required {
    color: #e74c3c;
    font-size: 0.9em;
    margin-left: 5px;
}

/* テキスト入力欄とメールアドレス、電話番号欄 (既存) */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 1rem;
    color: #555555;
    box-sizing: border-box;
    background-color: #fcfcfc;
}

/* ドロップダウンメニュー (既存) */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M9.293%2012.95l.707.707L15.657%208l-1.414-1.414L10%2010.828l-4.243-4.242L4.343%208z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}

/* テキストエリア (既存) */
.form-group textarea {
    resize: vertical;
}

/* フォーカス時のスタイル (既存) */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* プライバシーポリシーチェックボックス (既存) */
.form-checkbox {
    margin-top: 25px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.form-checkbox input[type="checkbox"] {
    margin-right: 10px;
    min-width: 16px;
    min-height: 16px;
    cursor: pointer;
    width:30px;
}

.form-checkbox label {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.4;
    cursor: pointer;
}

.form-checkbox label a {
    color: #3b82f6;
    text-decoration: none;
    border-bottom: 1px solid #3b82f6;
}

.form-checkbox label a:hover {
    color: #2563eb;
    border-bottom-color: #0d214b;
}
.mwform-checkbox-field-text{
    width:300px;
}

/* 送信ボタン (既存) */
.submit-btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background-color: #1c3154;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #07276c;
}

/* レスポンシブ対応（スマホなど小さい画面） */
@media (max-width: 768px) { /* タブレットサイズから縦並びにするため767pxから変更 */
    /* contact-header-contentを縦並びにする */
    .contact-header-content {
        flex-direction: column;
        align-items: center; /* 中央揃え */
        padding: 0 2vw;
    }

    /* 左右のコンテナの幅と高さを調整 */
    .contact-header-left{
        width: 100%; /* 全幅にする */
        min-width: unset; /* 最小幅をリセット */
        min-height: auto; /* 高さを自動調整 */
        padding: 110px 30px 40px; /* スマホ・タブレットでの内側パディングを調整 */
    }
    .contact-header-right {
        width: 100%; /* 全幅にする */
        min-width: unset; /* 最小幅をリセット */
        min-height: auto; /* 高さを自動調整 */
        padding: 40px 30px; /* スマホ・タブレットでの内側パディングを調整 */
    }

    /* フォーム内の文字サイズ調整（既存） */
    .form-group label,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group select,
    .form-group textarea,
    .form-checkbox label,
    .submit-btn {
        font-size: 15px;
    }

    .contact-title {
        font-size: 28px; /* 固定値 */
        text-align: center; /* 中央寄せ */
    }
    /* スマホ・タブレット時のタイトル下線の位置調整 */
    .contact-title::after {
        left: 50%;
        transform: translateX(-50%);
        width: 100px; /* 中央寄せの下線の長さを固定 */
        max-width: 100px; /* 念のためmax-widthも固定 */
    }

    .contact-description {
        font-size: 16px; /* 固定値 */
        text-align: center; /* 中央寄せ */
    }

    .contact-title rt {
        /*font-size: 0.8em;*/
        display: inline; /* スマホ・タブレットではルビをインラインに戻す */
        margin-left: 5px;
    }


    .form-checkbox {
        flex-direction: row; /* スマホでも横並びを維持 */
        align-items: center; /* 垂直方向中央揃え */
    }

    .form-checkbox input[type="checkbox"] {
        margin-top: 0; /* 位置調整をリセット */
    }
}


/* --- レスポンシブ対応 --- */
/* タブレット・スマホ表示（max-width: 768pxx 以下） */
@media (max-width: 76px) {
    .contact-title {
        text-align: center; /* ★タブレット・スマホではタイトル本体を中央寄せ */
    }

    /* ★タブレット・スマホでのルビのスタイル */
    .contact-title rt {
        font-size: 1.2em; /* ★タブレット・スマホでのルビの文字サイズ。調整してください */

        /* ★スマホ・タブレットでは中央に揃える場合、これらの行が必要 */
        left: 50%; /* 中央寄せ */
        transform: translateX(-50%); /* 中央寄せ */
        text-align: center; /* ルビのテキストも中央寄せ */

        /* ★スマホ・タブレットでのルビの垂直位置（タイトルからの持ち上げ量）を調整 */
        top: -1em; /* 例: h2のfont-sizeの-1倍の位置。ここで調整してください */

        /* display, position, white-space, width はPC側から継承 */
    }

    /* タブレット・スマホでのタイトル下線の位置調整 */
    .contact-title::after {
        left: 50%; /* 中央寄せ */
        transform: translateX(-50%);
        width: 100px; /* スマホ・タブレットでの下線の固定幅 */
        max-width: 100px;
    }
}

/* さらに小さいスマホ画面向け（max-width: 576px 以下） */
@media (max-width: 576px) {
    .contact-title rt {
        /*font-size: 1em;*/ /* ★さらに小さいスマホでのルビの文字サイズ。調整してください */
        top: -0.8em; /* ★さらに小さいスマホでの移動量調整 */
    }
}

/* スマホ画面向け（max-width: 576px 以下） */
@media (max-width: 576px) {
    .contact-description {
        font-size: 16px; /* スマホでの固定フォントサイズ */
        text-align: justify; /* スマホでは中央寄せにする */
        line-height: 1.6; /* スマホでの行間調整 (必要であれば) */
        /* padding は親要素で調整されるため、ここでは不要な場合が多い */
    }
}



/* =======================================================================serhtml */


.service-section {
    margin-bottom: 20px;
    padding: 20px; /* 上下のパディングは残す */
    padding-left: 20px; /* 左右のパディングを追加・調整 */
    padding-right: 20px; /* 左右のパディングを追加・調整 */
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 1200px; /* 明示的に幅を1200pxに設定 */
    margin-left: auto; /* 左右マージンを自動調整して中央寄せ */
    margin-right: auto; /* 左右マージンを自動調整して中央寄せ */
    /* ★今回修正：斜めの格子ソリッド背景 */
    background-color: #fff; /* ベースの背景色を維持 */
    background-image:
        repeating-linear-gradient(45deg, #e0e0e0 0, #e0e0e0 1px, transparent 1px, transparent 6px),
        repeating-linear-gradient(135deg, #e0e0e0 0, #e0e0e0 1px, transparent 1px, transparent 6px);
    background-size: 17px 17px; /* 格子の一辺のサイズ */
}

.service-section:nth-child(odd) {
    background-color: #f9f9f9; /* 奇数番目のセクションの背景色を変える */
}

/* 親となるフレックスコンテナ (画像カラムとコンテンツカラムを横並びにする) */
.flex-parent {
    display: flex;
    align-items: flex-start; /* 上揃え */
    gap: 20px; /* カラム間の隙間 */
}

/* 画像カラム */
.image-column {
    flex: 0.5; /* 均等な幅、または必要に応じて調整 */
    display: flex;
    flex-direction: column; /* 画像を縦に配置 */
    gap: 15px; /* 画像間の隙間 */
    min-width: 250px; /* 最小幅を設定して縮みすぎを防ぐ */
}

.image-column .image-cover {
    border: 1px solid #eee; /* 画像の周りに枠線 */
    padding: 5px; /* 枠線と画像の間隔 */
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.image-column img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* コンテンツカラム */
.content-column {
    flex: 2; /* 画像カラムより広めに */
}

.content-column h2 {
    color: #333;
    font-size: 3em;
    margin-bottom: 25px; /* サブコンテンツグループとの間の余白 */
    text-align: left; /* 大タイトルを中央寄せ */
}

/* サブタイトルと本文のセットを横並びにするフレックスコンテナ */
.sub-content-flex-parent {
    display: flex;
    gap: 30px; /* サブコンテンツグループ間の隙間 */
    flex-wrap: wrap; /* 必要に応じて折り返し */
    justify-content: center; /* 中央寄せ */
}

/* サブタイトルと本文の縦セット */
.sub-content-group {
    flex: 1; /* 均等な幅 */
    min-width: 280px; /* 各サブコンテンツグループの最小幅 */
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sub-content-group h3 {
    color: #555;
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center; /* サブタイトルを中央寄せ */
}

.sub-content-group p {
    font-size: 1em;
    color: #666;
    text-align: justify; /* 本文は両端揃え */
}

/* Aパターン (写真左) */
.service-section.pattern-a .flex-parent {
    flex-direction: row;
}

/* Bパターン (写真右) */
.service-section.pattern-b .flex-parent {
    flex-direction: row-reverse; /* 画像カラムとコンテンツカラムの順序を反転 */
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
    .flex-parent {
        flex-direction: column !important; /* 親コンテナを縦並びにする */
        align-items: center; /* 中央寄せ */
    }

    .image-column {
        flex-direction: row; /* 画像を横並びにする */
        gap: 10px;
        min-width: auto;
        width: 100%; /* 幅をいっぱいに使う */
        justify-content: center; /* 中央寄せ */
        margin-bottom: 20px;
    }

    .image-column .image-cover {
        flex: 1; /* 各画像が均等に広がる */
        max-width: 48%; /* 2枚並べる場合に調整 */
    }

    .content-column {
        width: 100%;
        padding: 0 10px; /* 左右のパディング */
    }

    .content-column h2 {
        color: #333;
        font-size: 2.2em;
        margin-bottom: 25px;
        text-align: left; /* 大タイトルを中央寄せ */
        position: relative; /* ::after擬似要素の基準位置とするため */
        padding-bottom: 10px; /* 下線とテキストの間に余白を持たせる */
    }

    .content-column h2::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: #000000; /* ★このプロパティがソリッドの色を指定しています */
        margin: 10px auto 0;
    }

    .sub-content-flex-parent {
        flex-direction: column; /* サブタイトルと本文のセットを縦並びにする */
        gap: 20px;
    }

    .sub-content-group {
        min-width: auto;
        width: 100%;
        padding: 15px;
    }

    .sub-content-group h3 {
        font-size: 1.2em;
    }

    .sub-content-group p {
        font-size: 0.95em;
    }
    .service-section {
    width: 100%; 
    }
}

@media (max-width: 576px) {
    .image-column {
        flex-direction: column; /* 画像を再び縦並びにする */
    }

    .image-column .image-cover {
        max-width: 100%; /* スマホで画像が大きくなりすぎないように調整 */
    }
}


/*
--------------------------------------------250807----*/

.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.3rem;
}
.form-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
input, select, textarea {
    width: 100%;
    padding: 12px 28px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #0b0178;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* ==================================== */
/* ホバーアクション */
/* ==================================== */
input:hover {
    background-color: #0056b3; /* ホバー時の背景色を濃くする */
    transform: translateY(-2px); /* ホバー時に少し上に持ち上がる */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ホバー時の影を強調 */
}
.submit-btn, .mwform-submit-button {
    background-color: #0078d4;
    color: #fff;
    padding: 0.8em 2em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.required {
    color: red;
    font-size: 0.9em;
}