/* ----------------- 全体 ----------------- */

body{
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
background:#f4f7f4;
margin:0;
padding:0;
color:#333;
line-height:1.6;
}

a{
text-decoration:none;
color:#6fbf73;
}

a:hover{
color:#4fa65a;
}

button,
input[type="submit"]{
background:#6fbf73;
color:#fff;
border:none;
border-radius:5px;
padding:0.5em 1em;
cursor:pointer;
transition:.25s;
}

button:hover,
input[type="submit"]:hover{
background:#58a95c;
}

/* ----------------- ヘッダー ----------------- */

header{

background:linear-gradient(90deg,#78c67c,#6fbf73);
color:#fff;

position:fixed;
top:0;
left:0;

width:100%;
box-sizing:border-box;

padding:10px 20px;

display:flex;
align-items:center;
justify-content:space-between;

z-index:1000;

box-shadow:0 3px 8px rgba(0,0,0,.15);

border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

header h1{
margin:0;
font-size:1.6em;
}

/* 右側 */

.header-right{
display:flex;
align-items:center;
gap:15px;
}

/* ----------------- ハンバーガー ----------------- */

.hamburger{
font-size:24px;
cursor:pointer;
user-select:none;
}

/* ----------------- メニュー ----------------- */

#menu{

display:none;
flex-direction:column;

position:absolute;

top:55px;
right:20px;

background:#fff;

width:200px;

border-radius:5px;

box-shadow:0 5px 15px rgba(0,0,0,.2);

padding:8px 0;
}

#menu li{
list-style:none;
}

#menu a{

display:block;

padding:10px 14px;

color:#333;

font-size:14px;
}

#menu a:hover{

background:#f2f2f2;
}

/* ----------------- 文字サイズ ----------------- */

.font-size-controls{

display:flex;
align-items:center;
gap:6px;
}

.font-label{
font-size:14px;
}

.font-size-controls button{

padding:3px 8px;

font-size:13px;
}

/* ----------------- メイン ----------------- */

.main-content{

margin-top:70px;

padding:1em 2%;

overflow:hidden;
}

/* サイド */

.sidebar{

float:left;

width:25%;

background:#fff;

border-radius:5px;

box-shadow:0 2px 6px rgba(0,0,0,.08);

padding:1.2em;

box-sizing:border-box;
}

/* コンテンツ */

.content{

float:right;

width:72%;

background:#fff;

border-radius:5px;

box-shadow:0 2px 6px rgba(0,0,0,.08);

padding:1.2em;

box-sizing:border-box;
}

/* ----------------- タイトル ----------------- */

.stylish-title{

font-size:1.4em;
font-weight:bold;

position:relative;

display:inline-block;

margin-bottom:1em;

color:#5fb866;
}

.stylish-title::before{

content:"";

position:absolute;

bottom:-3px;
left:0;

width:0;

height:3px;

background:#6fbf73;

animation:stylish 1.2s forwards;
}

@keyframes stylish{

from{width:0}
to{width:100%}

}

/* ----------------- ニュース ----------------- */

.scr{

background:#fafafa;

border-radius:5px;

padding:10px;

max-height:200px;

overflow-y:auto;

border:1px solid #ddd;

margin-bottom:1em;
}

pre{

background:#fafafa;

padding:1em;

border-radius:5px;

overflow-x:auto;
}

/* ----------------- 入力 ----------------- */

input[type="text"],
input[type="search"],
input[type="time"]{

width:100%;

padding:.45em;

border-radius:5px;

border:1px solid #ccc;

margin-bottom:.5em;

box-sizing:border-box;
}

/* ----------------- カード ----------------- */

.section-card{

background:#f9fdf9;

border-radius:5px;

padding:1em;

margin-bottom:1em;

box-shadow:0 2px 5px rgba(0,0,0,.05);
}

.section-card h4{

margin-top:0;

margin-bottom:.5em;

color:#63b768;
}

/* ----------------- ヒーロー ----------------- */

.hero{

background:

linear-gradient(
rgba(255,255,255,.5),
rgba(210,255,200,.6)
),

url("/kakuu_bus/o2/images/header.jpg")

center/cover;

text-align:center;

padding:6em 2em;

border-radius:5px;

margin-bottom:2em;
}

.hero h2{

font-size:2.3em;

margin-bottom:.5em;
}

.hero-btn{

background:#fff;

color:#6fbf73;

padding:.7em 1.4em;

border-radius:30px;

font-weight:bold;

box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* ----------------- 検索フォーム ----------------- */

.search-form{

display:grid;

grid-template-columns:110px 1fr;

gap:10px 12px;

max-width:420px;
}

.search-form label{

text-align:right;

padding-top:6px;

font-size:.9em;
}

.search-form input[type="submit"]{

grid-column:2;

width:120px;
}

/* ----------------- フッター ----------------- */

footer{

background:linear-gradient(90deg,#78c67c,#6fbf73);

color:#fff;

padding:1.8em;

text-align:center;

margin-top:3em;

border-top-left-radius:5px;
border-top-right-radius:5px;
}

footer a{

color:#fff;

margin:0 8px;
}

footer a:hover{

text-decoration:underline;
}

/* ----------------- スマホ ----------------- */

@media (max-width:768px){

.sidebar,
.content{

float:none;

width:100%;

margin-bottom:1em;

}

}