/* ページ全体セクション --------------------------------------- */
.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);
}
}




/* セクションアンカーボタン --------------------------------------- */
.section-introduction {
padding: var(--spacing-large) 0;
background-color: var(--color-bg-light); /* 背景色 */
transition: box-shadow 0.3s ease;
}

/* セクションタイトル */
.section-introduction .section__title {
font-size: var(--font-size-xl); /* 仕様書に基づき、セクションタイトルに適したフォントサイズ */
font-weight: 700;
color: var(--color-text-dark);
margin-bottom: var(--spacing-medium);
text-transform: uppercase;
letter-spacing: 1px;
}

/* セクションアンカーリスト */
.section-introduction .section-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* グリッドレイアウト */
gap: var(--spacing-medium);
}

/* セクションアンカーボタン */
.section-introduction .section-button {
display: block;
background-color: var(--color-accent); /* ボタンの背景色を仕様書に基づくアクセントカラーに変更 */
color: var(--color-text-light); /* テキスト色はライト */
text-align: center;
padding: var(--spacing-small) var(--spacing-medium);
font-size: var(--font-size-base); /* フォントサイズは仕様書に基づいて調整 */
font-weight: 600;
border-radius: var(--border-radius);
transition: background-color 0.3s ease, transform 0.2s ease;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: none;
}

.section-introduction .section-button:hover,
.section-introduction .section-button:focus {
background-color: var(--color-accent-light); /* ホバー時のアクセントライトカラー */
transform: translateY(-2px); /* ホバーで浮き上がる */
}

/* ボタンがフォーカスされたときのスタイル */
.section-introduction .section-button:focus {
outline: 2px solid var(--color-accent-light); /* フォーカス時のライトアクセントカラー */
outline-offset: 4px;
}

/* メディアクエリによるレスポンシブ対応 */
@media (max-width: 768px) {
/* スマートフォンサイズ */
.section-introduction .section__title {
font-size: var(--font-size-lg); /* タイトルフォントサイズ調整 */
}

.section-introduction .section-button {
font-size: var(--font-size-sm); /* ボタンのフォントサイズを小さく調整 */
padding: var(--spacing-small) var(--spacing-small); /* ボタンの余白調整 */
}
}

@media (min-width: 1024px) {
/* タブレット以上のデバイス */
.section-introduction .section__title {
font-size: var(--font-size-xl); /* タイトルフォントサイズの調整 */
}

.section-introduction .section-button {
font-size: var(--font-size-base); /* ボタンのフォントサイズ調整 */
padding: var(--spacing-small) var(--spacing-medium); /* 標準の余白に戻す */
}
}




/* 概要テーブル --------------------------------------- */
.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; /* 左寄せ */
}
}





/* 制作フローと開発体制セクション --------------------------------------- */
.section-process {
background-color: var(--color-bg-light); /* 背景色 */
padding: var(--spacing-large) 0;
color: var(--color-text-dark);
box-sizing: border-box;
margin: 0 auto;
max-width: 1200px;
}

/* サブタイトル */
.section-process .sub-title {
font-size: var(--font-size-lg); /* フォントサイズを少し小さめに調整 */
line-height: var(--line-height-lg); /* 行間も調整 */
color: var(--color-main); /* メインカラー */
margin-bottom: var(--spacing-medium);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px; /* 少し縮める */
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-process ol {
list-style-type: none; /* デフォルトのリストスタイルを無効に */
padding-left: 0;
margin: 0;
}

/* 各ステップ */
.section-process ol li {
background-color: var(--color-bg);
padding: var(--spacing-small); /* 余白を調整 */
margin-bottom: var(--spacing-medium);
border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.3s ease;
opacity: 0; /* 初期状態で非表示 */
transform: translateY(20px); /* 初期状態で下から表示される */
animation: fade-in-up 1s ease-out forwards;
}

/* ステップタイトル */
.section-process ol li strong {
font-size: var(--font-size-base); /* フォントサイズを小さめに */
font-weight: 700;
color: var(--color-main);
margin-bottom: var(--spacing-small);
transition: color 0.3s ease;
}

/* ステップ詳細 */
.section-process ol li p {
font-size: var(--font-size-sm); /* ステップ詳細のフォントサイズ */
line-height: var(--line-height-sm);
color: var(--color-text-dark);
margin-top: var(--spacing-small);
}

/* アニメーション設定（上昇とフェードイン） */
@keyframes fade-in-up {
0% {
opacity: 0;
transform: translateY(20px); /* 初期状態で少し下から表示 */
}
100% {
opacity: 1;
transform: translateY(0); /* 最終的に元の位置に表示 */
}
}

/* アニメーション：下線のスライド */
@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);
}
}

/* ホバーエフェクト */
.section-process ol li:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transform: translateY(-4px);
}

/* 各ステップ番号 */
.section-process ol li .ihh-flow-number {
font-size: var(--font-size-base); /* フォントサイズ調整 */
font-weight: 700;
color: var(--color-main);
background-color: var(--color-accent);
border-radius: 50%;
padding: 1rem;
margin-right: var(--spacing-medium);
display: inline-block;
width: 3rem;
height: 3rem;
line-height: 3rem;
}

/* メディアクエリ - スマホ (最大幅768px) */
@media (max-width: 768px) {
.section-process .sub-title {
font-size: var(--font-size-base); /* サブタイトルのフォントサイズを小さく */
line-height: var(--line-height-base); /* 行間調整 */
}

.section-process ol li {
font-size: var(--font-size-sm); /* ステップフォントサイズ調整 */
}

.section-process ol li .ihh-flow-number {
font-size: var(--font-size-sm); /* ステップ番号サイズを調整 */
padding: 0.8rem; /* パディング調整 */
}
}

/* メディアクエリ - タブレット (最大幅1024px) */
@media (max-width: 1024px) {
.section-process .sub-title {
font-size: var(--font-size-lg); /* サブタイトルのフォントサイズ調整 */
}

.section-process ol li {
font-size: var(--font-size-sm); /* ステップフォントサイズ調整 */
}

.section-process ol li .ihh-flow-number {
font-size: var(--font-size-sm); /* ステップ番号サイズ調整 */
}
}


/* よくある質問セクション --------------------------------------- */
.faq {
background-color: var(--color-bg-light); /* 背景色 */
padding: var(--spacing-medium) 0; /* 上下の余白を少し縮小 */
color: var(--color-text-dark);
margin: 0 auto;
max-width: 1200px;
box-sizing: border-box;
}

/* セクションタイトル */
.faq #faq-title {
font-size: var(--font-size-lg); /* サイズを少し小さく調整 */
line-height: var(--line-height-lg);
margin-bottom: var(--spacing-small); /* 下部の余白を小さく */
color: var(--color-main); /* メインカラー */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s ease;
}


/* FAQテーブルスタイル（既存と併用） */
.faq-answer {
margin-top: 0.5em;
padding: 0.5em 0;
border-top: 1px solid #ddd;
font-size: 0.95em;
color: #333;
}

.faq-toggle {
background: none;
border: none;
color: var(--color-main, #0073aa);
cursor: pointer;
padding: 0;
font-weight: bold;
font-size: 1em;
}

.faq-toggle[aria-expanded="true"]::after {
content: " ▲";
}

.faq-toggle[aria-expanded="false"]::after {
content: " ▼";
}

/* フォーカス時のスタイル */
.faq .faq-question:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); /* フォーカス時にアウトライン */
}

/* メディアクエリ - スマホ (最大幅768px) */
@media (max-width: 768px) {
.faq #faq-title {
font-size: var(--font-size-base); /* タイトルのフォントサイズ調整 */
}

.faq .faq-question {
font-size: var(--font-size-sm); /* 質問ボタンのフォントサイズ調整 */
}

.faq .faq-answer {
font-size: var(--font-size-sm); /* 回答のフォントサイズ調整 */
}
}

/* メディアクエリ - タブレット (最大幅1024px) */
@media (max-width: 1024px) {
.faq #faq-title {
font-size: var(--font-size-lg); /* タイトルのフォントサイズ調整 */
}

.faq .faq-question {
font-size: var(--font-size-base); /* 質問ボタンのフォントサイズ調整 */
}

.faq .faq-answer {
font-size: var(--font-size-base); /* 回答のフォントサイズ調整 */
}
}


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

.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; /* クリック時の下線をなくす */
}