:root{
    --main:#ff5fa2;
    --sub:#5fd1ff;
    --bg:#f7fbff;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
}

/* ===== Reset ===== */
*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
    background:
        linear-gradient(
            180deg,
            #eaf6ff 0%,
            #f7fbff 40%,
            #ffffff 100%
        );
    color:var(--text);
}

/* ===== レイアウト ===== */
.layout{
    display:flex;
    min-height:100vh;
}

/* ===== メイン ===== */
.content{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* ===== サイドバー ===== */
.sidebar{
    width:260px;
    border-right:1px solid #222;
    padding:24px 16px;
}

.sidebar-title{
    font-size:1.2rem;
    margin-bottom:16px;
    color:var(--sub);
}

.sidebar-menu{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar-menu li{
    margin-bottom:10px;
}

.sidebar-menu a{
    display:block;
    padding:12px 14px;
    border-radius:10px;
    text-decoration:none;
    color:var(--text);
    background:rgba(255,255,255,0.03);
    transition:all .25s;
}

.sidebar-menu a:hover{
    background:var(--card);
    transform:translateX(4px);
}
.menu-name{
    display:block;
    font-weight:600;
}

.menu-desc{
    display:block;
    font-size:.75rem;
    color:var(--muted);
}

/* ===== Hero（空感強め） ===== */
.hero{
    width:100%;
    padding:160px 20px 100px;
    text-align:center;
}

.hero h1{
    font-size:2.8rem;
    margin:0;
    color:var(--main);
}

.hero h2{
    margin:12px 0 24px;
    font-size:1.2rem;
    font-weight:500;
    letter-spacing:.05em;
    color:var(--muted);
}

.hero .catch{
    max-width:720px;
    margin:0 auto;
    line-height:1.9;
    color:#374151;
}

/* ===== Rainbow Icon ===== */
.icon-rainbow{
    display:inline-block;
    margin-right:6px;
    background:linear-gradient(
        90deg,
        #ff5fa2,
        #ffd56b,
        #5fd1ff,
        #8b5cf6,
        #ff5fa2
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ===== Main Layout ===== */
main{
    width:100%;
    max-width:1000px;
    padding:0 20px;
}

/* ===== Section ===== */
section{
    margin:0 auto 110px;
    text-align:center;
}
section h2{
    margin-bottom:24px;
    font-size:1.8rem;
    color:#0ea5e9;
}

section p{
    max-width:760px;
    margin:0 auto 18px;
    line-height:1.8;
    color:#374151;
}

/* =========================
   Section common
========================= */

.section-box {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.section-box > h2 {
  font-size: 1.8rem;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
}

.section-box > h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #ff5fa2, #5fd1ff);
  margin: 10px auto 0;
  border-radius: 2px;
}


/* ===== Card ===== */
.card{
    background:var(--card);
    color:var(--text);
    margin: 20px 0;
    padding:30px;
    border-radius:22px;
    box-shadow:
        0 10px 25px rgba(0,0,0,.06),
        0 30px 60px rgba(93,188,255,.15);
    transition:.3s;
}

.card:hover{
    transform:translateY(-6px);
    background: linear-gradient(90deg, #ff5fa2, #5fd1ff);
    color:var(--card);
}

.card h3{
    margin-top:0;
    color:var(--main);
}

.card p{
    font-size:.95rem;
}

.card a{
    display:inline-block;
    margin-top:14px;
    color:var(--text);
    font-weight:600;
    text-decoration:none;
}

.card a:hover{
    color:var(--card);
}

/* ===== Organization ===== */
.org-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.org-list li{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
    padding:14px 22px;
    border-radius:999px;
    font-size:.9rem;
    box-shadow:0 8px 20px rgba(93,188,255,.18);
}

/* ===== Departments ===== */
.dept-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:26px;
    max-width:720px;
    margin:0 auto;
}

.dept{
    background:#ffffff;
    padding:28px 10px;
    border-radius:22px;
    font-weight:600;
    letter-spacing:.05em;
    box-shadow:
        0 8px 20px rgba(0,0,0,.06),
        0 25px 45px rgba(93,188,255,.18);
    transition:.3s;
}

.dept:hover{
    transform:translateY(-8px);
}

/* ===== Footer ===== */
.footer{
    width:100%;
    text-align:center;
    padding:60px 20px;
    font-size:.85rem;
    color:#6b7280;
    border-top:1px solid rgba(0,0,0,.05);
}

.footer a{
    color:#64748b;
    text-decoration:none;
}

.footer a:hover{
    text-decoration:underline;
}

/* ===== レスポンシブ ===== */
@media (max-width:900px){
    .layout{
        flex-direction:column;
    }
    .sidebar{
        width:100%;
        border-right:none;
        border-bottom:1px solid #222;
    }
}