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

/* 基本レイアウト */
body{
font-family:Arial,sans-serif;
background:#fff;
margin:20px;
padding:0 8%;
}

/* タイトル */
header{
text-align:left;
padding:10px 0;
}

header h1{
font-family:"Times New Roman",serif;
color:#0056a0;
font-size:2.5em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* トップ画像 */
.image-container{
text-align:center;
margin:10px 0 0 0;
}

.image-container img{
width:calc(100% + 28px);
height:auto;
max-width:none;
display:block;
margin-left:-8px;
margin-right:-8px;
border-radius:12px;
}

/* グリッド */
.container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

/* セクションタイトル */
.section-title{
grid-column:1 / -1;
font-size:1.15em;
margin-top:20px;
margin-bottom:10px;
color:#3b6ea8;
border-left:4px solid #3b6ea8;
padding-left:8px;
}

/* ボックス */
.box{
background:#ffffff;
padding:18px;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.06);
border:1px solid #e3eeee;
font-size:0.9em;
}

/* h2 */
.box h2{
font-family:'Comic Sans MS',sans-serif;
color:#5386ad;
font-size:1.2em;
padding:10px 10px 10px 20px;
margin-bottom:10px;
background:#f0f0f0;
position:relative;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.box h2::before{
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:8px;
background:#f68a8a;
}

/* リスト */
.box ul{
list-style:none;
padding-left:1.5em;
}

.box li{
font-size:0.9em;
margin-bottom:5px;
position:relative;
padding-left:1em;
border-bottom:1px dashed #d0d0d0;
}

.box li::before{
content:'•';
color:#005c6c;
position:absolute;
left:0;
top:0.4em;
}

.box a{
color:#005c6c;
text-decoration:none;
}

.box a:hover{
text-decoration:underline;
text-decoration-color:#f06292;
}

/* 東京ワイド */
.tokyo{
grid-column:1 / -1;
background:linear-gradient(135deg,#eef5ff,#ffffff);
border:3px solid #8fbbe8;
padding:30px;
text-align:center;
box-shadow:0 6px 16px rgba(0,0,0,0.12);
transform:scale(1.03);
}

/* タブレット */
@media (max-width:1024px){

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

.tokyo{
grid-column:1 / -1;
}

}

/* スマホ */
@media (max-width:768px){

.container{
grid-template-columns:1fr;
}

header h1{
font-size:2em;
white-space:normal;
overflow:visible;
}

.image-container img{
margin-left:-4px;
margin-right:4px;
}

}

.next-olympics{
text-align:center;
margin:20px 0 1px 0;
padding:12px 0;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}

.next-label{
font-size:12px;
letter-spacing:2px;
color:#777;
}

.next-city{
font-size:20px;
letter-spacing:3px;
color:#222;
margin-top:4px;
}

.tokyo-title{
font-size:1.8em;
font-weight:bold;
text-align:center;
margin-bottom:10px;
letter-spacing:1px;
}

.tokyo-link{
margin-top:8px;
}

.tokyo-link span{
font-size:0.9em;
color:#555;
}

.tokyo-link a{
display:inline-block;
background:#3b6ea8;
color:#fff;
padding:8px 16px;
border-radius:6px;
margin-top:6px;
margin-bottom:8px;
font-weight:bold;
}

.tokyo-link a:hover{
background:#2f5c8e;
text-decoration:none;
}

.feature-label{
font-size:0.7em;
letter-spacing:2px;
color:#3b6ea8;
margin-bottom:6px;
}

/* 東京五輪用 */
.page-title{
margin-bottom:10px;
}

.tokyo-page header h1{
font-size:2em;
font-family:'Comic Sans MS',sans-serif;
}

.tokyo-hero{
font-size:0.8em;
letter-spacing:4px;
color:#3b6ea8;
margin-bottom:0px;
text-align:left;
}