/* -------------------------
カラーパレット
------------------------- */

:root{


--main-color:#7dd3fc;
--main-dark:#38bdf8;

--accent-color:#86efac;
--accent-dark:#22c55e;

--bg-color:#f8fafc;
--card-color:#ffffff;

--text-color:#222222;
--text-light:#64748b;

--border-color:#e2e8f0;

--danger:#ef4444;
--warning:#f59e0b;
--success:#16a34a;

--shadow:
    0 2px 8px rgba(0,0,0,0.06);

--radius:12px;


}

/* -------------------------
リセット
------------------------- */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
font-size:16px;
}

body{


background:var(--bg-color);

color:var(--text-color);

font-family:
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

line-height:1.6;

min-height:100vh;


}

a{
color:inherit;
text-decoration:none;
}

ul{
list-style:none;
}

img{
max-width:100%;
}

/* -------------------------
レイアウト
------------------------- */

.container{


max-width:1100px;

margin:0 auto;

padding:24px;


}

.page-title{


color:var(--accent-dark);

margin-bottom:20px;

font-size:1.8rem;

font-weight:700;


}

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

.site-header{


background:var(--main-color);

position:sticky;

top:0;

z-index:1000;

box-shadow:var(--shadow);


}

.header-inner{


max-width:1200px;

margin:auto;

padding:14px 24px;

display:flex;

justify-content:space-between;

align-items:center;


}

.logo{


color:white;

font-size:1.25rem;

font-weight:700;


}

.logo-sub{


font-size:.8rem;

opacity:.9;


}

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

.pc-menu ul{


display:flex;

gap:20px;


}

.pc-menu a{


color:white;

font-weight:600;

padding:8px 12px;

border-radius:8px;

transition:.2s;


}

.pc-menu a:hover{


background:rgba(255,255,255,.2);


}

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

.menu-button{


display:none;

width:44px;

height:44px;

border:none;

background:none;

color:white;

font-size:1.6rem;

cursor:pointer;


}

/* -------------------------
オーバーレイ
------------------------- */

.overlay{


display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.4);

z-index:2000;


}

.overlay.show{
display:block;
}

/* -------------------------
スライドメニュー
------------------------- */

.side-menu{


position:fixed;

top:0;

right:-280px;

width:280px;

height:100%;

background:white;

z-index:2100;

transition:.3s;

box-shadow:
    -4px 0 12px rgba(0,0,0,.12);


}

.side-menu.open{
right:0;
}

.side-header{


background:var(--main-color);

color:white;

padding:20px;

font-weight:bold;


}

.side-menu ul{


padding:16px;


}

.side-menu li{


border-bottom:1px solid var(--border-color);


}

.side-menu a{


display:block;

padding:14px 8px;


}

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

.card{


background:var(--card-color);

border-radius:var(--radius);

padding:20px;

margin-bottom:20px;

box-shadow:var(--shadow);


}

.card-title{


color:var(--accent-dark);

font-size:1.1rem;

font-weight:700;

margin-bottom:12px;


}

/* -------------------------
フォーム
------------------------- */

.form-group{


margin-bottom:18px;


}

label{


display:block;

margin-bottom:6px;

font-weight:600;


}

input,
textarea,
select{


width:100%;

padding:12px;

border:1px solid var(--border-color);

border-radius:8px;

font-size:1rem;

background:white;


}

input:focus,
textarea:focus,
select:focus{


outline:none;

border-color:var(--main-dark);


}

textarea{


resize:vertical;

min-height:120px;


}

/* -------------------------
ボタン
------------------------- */

.btn{


display:inline-block;

padding:12px 20px;

border:none;

border-radius:8px;

cursor:pointer;

font-size:1rem;

font-weight:600;

transition:.2s;


}

.btn-primary{


background:var(--main-color);

color:white;


}

.btn-primary:hover{


background:var(--main-dark);


}

.btn-success{


background:var(--success);

color:white;


}

.btn-danger{


background:var(--danger);

color:white;


}

.btn-block{


width:100%;


}

/* -------------------------
ステータスバッジ
------------------------- */

.badge{


display:inline-block;

padding:6px 12px;

border-radius:999px;

font-size:.85rem;

font-weight:700;


}

.badge-none{


background:#e2e8f0;


}

.badge-notice{


background:#fee2e2;

color:#b91c1c;


}

.badge-confirmed{


background:#dcfce7;

color:#166534;


}

/* -------------------------
子どもカード
------------------------- */

.child-card{


display:flex;

justify-content:space-between;

align-items:center;

gap:20px;


}

.child-name{


font-size:1.1rem;

font-weight:700;


}

/* -------------------------
ダッシュボード
------------------------- */

.dashboard{


display:grid;

grid-template-columns:
    repeat(3,1fr);

gap:20px;


}

.stat-card{


background:white;

padding:20px;

border-radius:12px;

box-shadow:var(--shadow);

text-align:center;


}

.stat-value{


font-size:2rem;

font-weight:bold;

color:var(--main-dark);


}

/* -------------------------
テーブル
------------------------- */

.table-wrap{


overflow-x:auto;


}

table{


width:100%;

border-collapse:collapse;

background:white;


}

th{


background:var(--main-color);

color:white;

text-align:left;


}

th,
td{


padding:12px;

border:1px solid var(--border-color);


}

tr:nth-child(even){


background:#f8fafc;


}

/* -------------------------
アラート
------------------------- */

.alert{


padding:14px;

border-radius:8px;

margin-bottom:20px;


}

.alert-success{


background:#dcfce7;

color:#166534;


}

.alert-danger{


background:#fee2e2;

color:#991b1b;


}

/* -------------------------
ログイン画面
------------------------- */

.auth-container{


max-width:500px;

margin:40px auto;


}

.auth-logo{


text-align:center;

margin-bottom:24px;


}

.auth-logo h1{


color:var(--main-dark);


}

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

footer{


margin-top:40px;

padding:24px;

text-align:center;

color:var(--text-light);

font-size:.9rem;


}

/* -------------------------
レスポンシブ
------------------------- */

@media(max-width:768px){


.container{

    padding:16px;
}

.pc-menu{

    display:none;
}

.menu-button{

    display:block;
}

.dashboard{

    grid-template-columns:1fr;
}

.child-card{

    flex-direction:column;

    align-items:flex-start;
}

.page-title{

    font-size:1.5rem;
}


}

@media(max-width:480px){


html{

    font-size:15px;
}

.card{

    padding:16px;
}

.header-inner{

    padding:12px 16px;
}

.side-menu{

    width:240px;
}


}