/* ページ全体セクション --------------------------------------- */
.section-container {
background-color: var(--color-bg);
color: var(--color-main);
padding: var(--spacing-large) 0;
line-height: var(--line-height-base);
box-sizing: border-box;
overflow-x: hidden;
padding-top: var(--spacing-large); /* 上部のスペースを調整 */
}

/* コンテナ */
.section-container .container {
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
}

/* セクションをグリッドで並べる */
.section-container .section {
margin-bottom: var(--spacing-large);
}

/* セクションの配置（Flexbox） */
.section-container .section .row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-medium);
justify-content: space-between;
}

.section-container .section .column {
flex: 1 1 calc(50% - var(--spacing-medium)); /* 2列レイアウト */
min-width: 280px; /* 最小幅 */
padding: var(--spacing-medium);
}


/* セクションタイトル */
.section-title {
font-size: var(--font-size-xl);
line-height: var(--line-height-xl);
text-align: center;
margin-bottom: var(--spacing-medium);
position: relative;
display: inline-block;
color: var(--color-main);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
opacity: 0;
animation: slide-up 1s forwards, underline-slide 0.5s 0.5s forwards;
}

/* セクションタイトルの下線アニメーション */
.section-title::after {
content: "";
position: absolute;
left: 0;
bottom: -5px; /* 下線位置調整 */
width: 0;
height: 2px;
background-color: var(--color-accent);
transition: width 0.3s ease;
}

.section-title:hover::after {
width: 100%;
}

/* セクションタイトル上昇アニメーション */
@keyframes slide-up {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* セクションタイトル下線アニメーション */
@keyframes underline-slide {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}


/* サブタイトル */
.sub-title {
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
margin-top: 6rem;
font-weight: 600;
color: var(--color-sub);
position: relative;
transition: color 0.3s ease;
letter-spacing: 0.5px;
}

/* サブタイトル下線アニメーション */
.sub-title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 50%;
height: 2px;
background-color: var(--color-accent);
transform: scaleX(0);
transition: transform 0.3s ease;
}

.sub-title:hover {
color: var(--color-accent);
}

.sub-title:hover::before {
transform: scaleX(1);
}

/* 通常テキスト */
p {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
margin-bottom: var(--spacing-small);
color: var(--color-text-dark);
max-width: 900px;
margin-left: auto;
margin-right: auto;
text-align: justify;
transition: color 0.3s ease;
}

p:hover {
color: var(--color-accent);
font-weight: 500;
}



/* レスポンシブ調整 */
@media (max-width: 768px) {
.csection-container .container {
padding: 0 1rem;
}

.section-title {
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}

.sub-title {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}

.cta-button {
padding: 0.8rem 1.5rem;
}

.company-overview-table th, .company-overview-table td {
font-size: var(--font-size-xs);
padding: 0.8rem;
}

.section-container .section .column {
flex: 1 1 100%; /* モバイル時は1列 */
}
}

@media (min-width: 1024px) {
.section-container .container {
padding: 0 3rem;
}

.section-title {
font-size: var(--font-size-xl);
line-height: var(--line-height-xl);
}

.sub-title {
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}
}


/* 概要テーブル --------------------------------------- */
.overview-table {
width: 100%;
margin-top: var(--spacing-medium);
border-collapse: collapse;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.overview-table th, .overview-table td {
padding: 1rem;
text-align: center;
border: 1px solid var(--color-line);
font-size: var(--font-size-sm); /* 仕様書に基づき調整 */
transition: background-color 0.3s ease, transform 0.2s ease;
}

.overview-table th {
background-color: var(--color-accent); /* 仕様書のアクセントカラーに変更 */
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.overview-table td {
background-color: var(--color-bg);
color: var(--color-text-dark);
}

.overview-table td ul {
list-style-position: inside;
padding-left: 0;
text-align: left;
}

.overview-table td li {
padding-left: 1rem;
}

.overview-table:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transform: translateY(-4px);
}

.overview-table th:hover, .overview-table td:hover {
background-color: var(--color-accent-light); /* アクセントライトカラー */
}

/* メディアクエリ - スマホ (最大幅768px) */
@media (max-width: 768px) {
.overview-table th, .overview-table td {
font-size: var(--font-size-sm); /* フォントサイズを変更 */
padding: 0.8rem; /* パディングを縮小 */
}

/* リストのレイアウト調整 */
.overview-table td ul {
padding-left: 1.5rem; /* 左寄せのインデントを調整 */
}

/* 横スクロールを可能にする */
.overview-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

/* セルの配置調整（縦並び） */
.overview-table th, .overview-table td {
text-align: left; /* テーブル内容を左寄せ */
padding-left: 1rem; /* さらに余白調整 */
}
}

/* メディアクエリ - タブレット (最大幅1024px) */
@media (max-width: 1024px) {
.overview-table th, .overview-table td {
font-size: var(--font-size-sm); /* 中くらいのフォントサイズ */
padding: 1rem; /* 標準的なパディング */
}

/* リストアイテムの左揃え */
.overview-table td ul {
padding-left: 1rem; /* 左寄せ */
}
}



/* ============================= */
/* お問い合わせ */
/* ============================= */

.one-card-item {
background-color: #ffffff;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 10px 15px rgba(59, 130, 246, 0.15), 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: center;
margin: 4rem 0;
}

.one-card-item:hover {
transform: translateY(-6px);
box-shadow: 0 20px 25px rgba(59, 130, 246, 0.3), 0 10px 10px rgba(0, 0, 0, 0.1);
}

.one-card-title {
font-size: 1.5rem;
color: #1e40af;
font-weight: 700;
margin-bottom: 1rem;
}

.one-card-description {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
margin-bottom: var(--spacing-small);
color: var(--color-text-dark);
max-width: 900px;

text-align: justify;
transition: color 0.3s ease;
text-align: center;
}



/* ============================= */
/* 共通のボタンスタイル */
/* ============================= */

.cta-button {
display: inline-block;
padding: 14px 30px;
font-size: 0.8rem;
font-weight: 700;
color: #fff;
background-color: var(--color-accent); /* メインカラー */
border-radius: 50px;
text-decoration: none; /* 下線をなくす */
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
cursor: pointer;
margin-top: 25px;
width: auto; /* 通常時は自動幅 */
}

/* ホバー時のボタンスタイル */
.cta-button:hover {
background-color: var(--color-primary-hover); /* ホバーカラー */
color: #000;
box-shadow: 0 7px 20px rgba(29, 78, 216, 0.6);
transform: translateY(-4px); /* 浮き上がるエフェクト */
outline-offset: 2px;
outline: 2px solid var(--color-accent);
}

/* アクセシビリティのためのフォーカススタイル */
.cta-button:focus-visible {
outline: 2px solid var(--color-accent);
text-decoration: none; /* フォーカス時の下線をなくす */
}

/* アクティブ時（クリック時）のスタイル */
.cta-button:active {
text-decoration: none; /* クリック時の下線をなくす */
}