@charset "UTF-8";

* {
box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;
font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
background: #ffffff;
}

p {
font-size: 0.8rem;
color: #aaaaaa;   
}

wrighter {
font-size: 1rem;
color: #000;   
}

.spacer {
height: 3vh; /* 画面全体の高さの10%分、スペースを作る */
background: #cccccc;
}

.container {
width: 100%;       /* 画面幅に合わせる */
max-width: 820px;
margin: auto;
background: #f8f8f8;
border-radius: 10px;
overflow: hidden;  /* 中身がはみ出して隙間を作るのを防ぐ */
}

.section-tag {
display: block;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 10px;
text-transform: uppercase;
}

h2.section-title {
font-size: 1.5rem;
margin-bottom: 50px;
position: relative;
}

/* --- セクション：特徴 --- */
.features-section {
padding: 10px;
}

.feature-item {
display: flex;
margin-bottom: 40px;
padding: 30px;
border: 1px solid #eee;
transition: 0.3s;
}

.feature-item:hover {
background: #e7e7e7;
}

.feature-number {
font-size: 2rem;
font-weight: bold;
color: #333;
margin-right: 30px;
}


/* 目次コンテナ */
.toc-container {
background: rgba(50, 107, 144, 0.9);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 2rem;
margin-bottom: 1.5vh;
width: 100%;       /* 固定幅ではなく、画面の90%にする */
max-width: 400px; /* ただし最大でも320pxまで */
box-sizing: border-box; /* パディングを含めて幅を計算する */
}

/* タイトル */
.toc-title {
color: #f8fafc;
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}

/* アイコン（擬似要素で作成） */
.toc-title::before {
content: "";
width: 4px;
height: 24px;
background: linear-gradient(to bottom, #38bdf8, #818cf8);
border-radius: 2px;
}

/* リストスタイル */
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}

.toc-item {
margin-bottom: 0.5rem;
position: relative;
}

/* リンクの装飾 */
.toc-link {
text-decoration: none;
color: #afeeee;
display: block;
padding: 0.75rem 1rem;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

/* ホバー時の挙動 */
.toc-link:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.05);
padding-left: 1.5rem; /* 右に少し動く */
}

/* ホバー時の左側の光るライン */
.toc-link::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 0;
background: #38bdf8;
transition: height 0.3s ease;
box-shadow: 0 0 10px #38bdf8;
}

.toc-link:hover::after {
height: 60%;
}


/* --------事例記事内容--------- */
.case-study {
max-width: 1000px;
margin: 20px auto;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
line-height: 1.6;
padding: 0 15px; /* スマホ時の余白 */
box-sizing: border-box;
}

/* ヘッダー部分 */
.header-banner {
border: 3px solid #1a3a83;
border-radius: 10px;
color: #555;
padding: 5px 15px;
font-size: 1.1rem;
font-weight: 500;
position: relative;
margin-bottom: 1.5vh;
}

/* 各セクション */
.section {
margin-bottom: 40px;
}

.section-title {
display: flex;
align-items: center;
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 10px;
color: #1a3a83;
}

/* 三角形と線の装飾 */
.section-title::after {
content: "";
display: inline-block;
width: 17px;
height: 17px;
margin-left: 10px;
/* 背景を青から透明へのグラデーションに設定 */
background: #1a3a83;
/* 全体を右向きの矢印（三角形）に切り抜く */
clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}

.section-content {
font-size: 1rem;
text-align: justify;
}

/* 画像エリア */
.image-placeholder {
max-width: 100%; 
width: 100%;      /* 幅を親要素いっぱいに広げる */
height: auto;     /* 中身（画像）に合わせて高さを変える */
margin-bottom: 2vh;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
margin-top: 20px;
}

/* 画像そのものをレスポンシブにする設定 */
.image-placeholder img {
max-width: 100%;  /* 親要素（黒い背景の枠）の幅に合わせる */
height: auto;     /* 縦横比を維持する */
display: block;   /* 下に隙間ができるのを防ぐ */
}

.close-button {
display: inline-block;   /* これが重要！横幅が伸びるのを防ぐ */
padding: 7px 11px;
margin-bottom: 5%;
background-color: #6495ed;
color: white;
border-radius: 3px;
cursor: pointer;
border: none;
font-size: 18px;
width: fit-content;      /* 必要以上に横に広がらない */
text-align: center;
}
        
.close-button:hover {
background-color: #0a66c2;
}

.b-center {
text-align: center;
}

/* フッター */
footer.site-footer {
background: #0a66c2;
color: #fff;
margin: 0;
text-align: center;
padding: 14px 12px;
font-size: 14px;
width: 100%;           /* 横幅いっぱい */
box-sizing: border-box;
}

/******************* スマホ対応（800px以下）*******************/
@media (max-width: 800px) {
.container {
border-radius: 0;
}    

.section-title {
font-size: 1.3rem;
}
    
p {
margin-left: 3%; 
}


h2.section-title { 
    font-size: 2rem;
}     
}