body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
background: #f9f9f9;
color: #333;
line-height: 1.6;
}

nav a {
color: white;
text-decoration: none;
margin-left: 1rem;
font-size: 0.95rem;
}

main {
padding: 2rem 1rem;
text-align: center;
}

h1 {
color:black;
margin-bottom: 1rem;
}

h2 {
font-size: 1rem;
}

/* メイン内容
----------------------------------------------------------- */
.explanation {
text-align: center;        /* 中央寄せ */
font-size: 0.9rem;         /* 小さめ文字 */
color: #444;
line-height: 1.6;
margin: 0.5rem auto 2rem;
max-width: 90%;            /* スマホでも余白を確保して見やすく */
white-space: normal;       /* スマホでは自然に折り返し */
}

/* PC画面では横幅を広げて1行に見せる */
@media (min-width: 768px) {
.explanation {
    max-width: 900px;
    white-space: nowrap;     /* 1行に固定（自然に1行で収まる場合） */
}
}

/* セクションタイトル要素
----------------------------------------------------------- */
.lined-short {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;                 /* 文字と線の間隔 */
font-size: 1.2rem;         /* 文字サイズ（お好みで） */
font-weight: 600;
color: #333;
margin: 2rem 0;            /* 上下余白（不要なら削除） */
}

.lined-short::before,
.lined-short::after {
content: "";
width: 100px;              /* 線の長さ */
height: 2px;               /* 線の太さ */
background-color: #999;    /* 線の色 */
}

/* 画像要素
----------------------------------------------------------- */
/* さまざまな看板の種類 */
.sign-types .grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
max-width: 600px;
margin: 0 auto 2rem;
}
.sign-types img {
width: 100%;
height: auto;
border-radius: 6px;
}
.sign-types p {
font-size: 0.9rem;
margin-top: 0.3rem;
}

/* 作業の流れ */
.flow-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem;
max-width: 700px;
margin: 0 auto 2rem;
}

.step {
width: 45%;
text-align: center;
}

.step img {
width: 100%;
height: auto;
border-radius: 6px;
}

.arrow {
font-size: 1.5rem;
color: #555;
}

/* PC時：3列表示＋矢印横並び */
@media (min-width: 768px) {
.sign-types .grid-container {
    grid-template-columns: repeat(3, 1fr);
}
.step {
    width: 30%;
}
.arrow {
    font-size: 2rem;
}
}

/* 看板撤去・処分作業のフロー */
.flow-text {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem;
max-width: 900px;
margin: 1.5rem auto 3rem;
}

.flow-box {
background: white;
border: 2px solid #333;
border-radius: 4px;
padding: 1rem 0.5rem;
width: 60px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-rl; /* 縦書き */
text-orientation: upright;
font-size: 1rem;
font-weight: 600;
box-shadow: 2px 2px 4px rgba(0,0,0,0.15);
}

.flow-arrow {
font-size: 1.5rem;
color: #555;
}

/* PCでは横にゆとりを持たせる */
@media (min-width: 768px) {
.flow-text {
    gap: 1rem;
}
.flow-box {
    width: 110px;
    height: 140px;
}
.flow-arrow {
    font-size: 1.8rem;
}
}