:root{
  --green-1:#2c5530;
  --green-2:#6f9d63;
  --green-3:#1e3d22;
  --bg:#f8f9fa;
  --text:#333;
}

html{scroll-behavior:smooth}
body{
  font-family:'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif;
  line-height:1.6;color:var(--text);background:var(--bg)
}

/* Language switcher */
.language-switcher{
  position:fixed;top:20px;right:20px;z-index:1000;background:rgba(255,255,255,.95);
  padding:.5rem;border-radius:25px;box-shadow:0 2px 10px rgba(0,0,0,.1);backdrop-filter:blur(10px)
}
.language-switcher button{
  background:none;border:none;padding:.5rem 1rem;margin:0 .2rem;cursor:pointer;border-radius:20px;
  font-weight:700;transition:.3s;color:var(--green-1)
}
.language-switcher button:hover{background:#e8f5e8}
.language-switcher button.active{background:linear-gradient(135deg,var(--green-2),var(--green-1));color:#fff}

/* Header */
header{
  background:linear-gradient(135deg,var(--green-3) 0%,var(--green-2) 100%);
  color:#fff;padding:1rem 0;box-shadow:0 2px 10px rgba(0,0,0,.1)
}
.header-content{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between}
.logo h1{font-size:1.8rem;font-weight:300;margin-bottom:.2rem}
.logo p{font-size:.9rem;opacity:.9}

/* Nav */
nav{background:var(--green-1)}
.nav-container{max-width:1200px;margin:0 auto;padding:0 2rem}
.nav-menu{list-style:none;display:flex;flex-wrap:wrap}
.nav-menu li{margin:0}
.nav-menu a{display:block;color:#fff;text-decoration:none;padding:1rem 1.5rem;transition:background-color .3s;border-right:1px solid var(--green-1)}
.nav-menu a:hover{background:var(--green-1)}
.nav-menu a.active{background:var(--green-2)}

/* Main & hero */
main{max-width:1200px;margin:2rem auto;padding:0 2rem}

/* ベースのヒーロー（デフォはグラデのみ。画像は .image で上書き） */
.hero{
  background:linear-gradient(135deg,var(--green-1),var(--green-2));
  color:#fff;padding:4rem 2rem;text-align:center;
  margin:-2rem -2rem 3rem -2rem;background-size:cover;background-position:center
}
.hero.slim{
  padding:3rem 2rem;margin:1rem 0 2rem 0;background:linear-gradient(135deg,var(--green-1),var(--green-2));border-radius:10px
}
.hero .hero-content{
  max-width:min(1000px, 90vw);
  margin:0 auto;
}
.hero h2{
  font-size:clamp(1.8rem, 3.5vw, 2.8rem);
  line-height:1.25;
  margin-bottom:.6rem;
  text-wrap:balance;            /* ブラウザ対応していれば見出しの改行を整える */
}
.hero .lead{
  font-size:clamp(1rem, 1.2vw + .8rem, 1.2rem);
  line-height:1.7;
  max-width:70ch;               /* 行幅を制御して読みやすく */
  margin:0 auto;
  text-wrap:pretty;
}
.hero p{font-size:1.2rem;opacity:.95;max-width:800px;margin:0 auto;text-shadow:1px 1px 2px rgba(0,0,0,.3)}

/* 画像ヒーロー（ここで背景をリセット） */
.hero.image{
  position:relative;
  background:none;                 /* ← !important を外すのがポイント */
  background-size:cover;
  background-position:center;
  min-height:220px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;border-radius:10px;
  color:#fff;
}
.hero.image::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,.35));
  border-radius:inherit
}
.hero.image>*{position:relative;z-index:1}

/* ページ別の背景（css/ から見て相対なので ../ が必要） */
.hero.image.hero-home{background-image:url('../images/hero/home.jpg') !important;}
.hero.image.hero-research{background-image:url('../images/hero/research.jpg') !important;}
.hero.image.hero-members{background-image:url('../images/hero/members.jpg') !important;}
.hero.image.hero-publications{background-image:url('../images/hero/publications.jpg') !important;}
.hero.image.hero-news{background-image:url('../images/hero/news.jpg') !important;}
.hero.image.hero-contact{background-image:url('../images/hero/contact.jpg') !important;}

/* Cards */
.card{background:#fff;border-radius:10px;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 20px rgba(0,0,0,.1);transition:transform .3s, box-shadow .3s;animation:fadeInUp .6s ease-out}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,.15)}
.card h3{color:var(--green-1);margin-bottom:1rem;font-size:1.4rem;padding-bottom:.5rem;border-bottom:2px solid #e8f5e8}

/* Utils */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin:2rem 0}
.center{text-align:center}
.accent{color:var(--green-2);font-weight:700}
.accent-title{color:var(--green-1);margin-bottom:1rem}
.highlight{background:linear-gradient(120deg,#e8f5e8 0%,#e8f5e8 100%);background-repeat:no-repeat;background-size:100% .3em;background-position:0 88%;padding:.1em 0}

.news-item{border-left:4px solid var(--green-2);padding:1rem 1rem 1rem 1.5rem;margin-bottom:1rem;background:#f8f9fa;transition:background-color .3s}
.news-item:hover{background:#e8f5e8}
.news-date{color:#666;font-size:.9rem;font-weight:700}
.news-title{color:var(--green-1);font-weight:700;margin:.5rem 0}

.btn{display:inline-block;background:linear-gradient(135deg,var(--green-2),var(--green-1));color:#fff;padding:.7rem 1.4rem;text-decoration:none;border-radius:25px;transition:.3s;border:none;cursor:pointer;font-size:1rem}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(74,124,89,.3)}
.btn.small{padding:.4rem .9rem;font-size:.9rem;border-radius:18px}

/* Footer */
footer{background:var(--green-1);color:#fff;text-align:center;padding:2rem 0;margin-top:4rem}
.footer-content{max-width:1200px;margin:0 auto;padding:0 2rem}
.footer-links{margin-bottom:1rem}
.footer-links a{color:#fff;text-decoration:none;margin:0 1rem;opacity:.85;transition:opacity .3s}
.footer-links a:hover{opacity:1}

/* Media & images */
.card img{max-width:100%;height:auto;display:block}
.responsive{max-width:100%;height:auto;display:block;border-radius:8px}
.avatar{width:120px;height:120px;object-fit:cover;border-radius:50%;margin-bottom:1rem;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.member-card .role{color:var(--green-2);font-weight:700;margin:.3rem 0}

/* Lists & forms */
.list{list-style:disc;padding-left:1.2rem}
.contact-form{display:grid;gap:.8rem}
.contact-form label{display:grid;gap:.3rem}
.contact-form input,.contact-form textarea{padding:.6rem;border:1px solid #ccc;border-radius:8px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--green-2);box-shadow:0 0 0 3px rgba(74,124,89,.15)}

/* Contact split layout */
.split-card{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.split-card .column{min-width:0}
@media (max-width:900px){.split-card{grid-template-columns:1fr}}
.map-embed{position:relative;padding-bottom:56%;height:0;overflow:hidden;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.map-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.contact-form label{display:block;margin-bottom:.8rem}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:8px}
.contact-form button{margin-top:.3rem}

/* Research theme 2-column */
.theme-row{display:grid;grid-template-columns:minmax(220px,420px) 1fr;gap:1.5rem;align-items:center;margin-bottom:1.5rem}
.theme-row .theme-img{width:100%;height:auto;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.theme-row .theme-text h3{margin-bottom:.5rem}
@media (max-width:900px){.theme-row{grid-template-columns:1fr}}

/* Responsive tweaks */
@media (max-width:768px){
  .language-switcher{top:10px;right:10px;padding:.3rem}
  .language-switcher button{padding:.3rem .8rem;font-size:.9rem}
  .header-content{flex-direction:column;text-align:center}
  .nav-menu{flex-direction:column}
  .nav-menu a{border-right:none;border-bottom:1px solid var(--green-1)}
  .hero h2{font-size:1.8rem}
  .hero p{font-size:1rem}
  .grid{grid-template-columns:1fr}
}

/* Animations & misc */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
[data-ja],[data-en]{transition:opacity .3s ease}
.subline{font-size:.95rem;opacity:.9}
.headline{font-size:2rem;font-weight:700}
@media (max-width:768px){.subline{font-size:.85rem}.headline{font-size:1.6rem}}

/* Header: lab name bigger */
.logo h1,
.headline{
  font-size: clamp(2.2rem, 3.6vw, 2.5rem);  /* 画面幅で自動調整 */
  line-height: 1.15;
  text-wrap: balance;                       /* 改行が自然になる */
}

/* Prevent easy image saving */
img{
    -webkit-user-drag:none;
    user-select:none;
}

/* Faculty profile */
.faculty-body{
  display:grid;
  grid-template-columns:1fr 200px;
  gap:2rem;
  align-items:start;
}

.faculty-photo{
  width:200px;
  border-radius:8px;
}

.faculty-photo-box{
  margin-top:20px;
}

/* News photos */
.news-photo{
    display:block;
    width:320px;
    height:220px;
    object-fit:cover;
    object-position:center;
    margin:1rem 0;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

@media screen and (max-width:768px){

  .faculty-profile{
    padding:1.2rem;
    overflow:hidden;
  }

  .faculty-profile h3{
    font-size:1.35rem;
    line-height:1.5;
    text-align:center;
  }

  .faculty-body{
    display:block !important;
  }

  .faculty-text{
    width:100%;
    min-width:0;
  }

  .faculty-photo-box{
    margin:1.5rem auto 0;
    text-align:center;
  }

  .faculty-photo{
    display:block;
    width:70%;
    max-width:220px;
    height:auto;
    margin:0 auto;
  }

  .career-list{
    padding-left:1.2rem;
  }

  .career-list li{
    overflow-wrap:break-word;
  }
}

/* =========================================
   Footer decoration
========================================= */

/* Decorative background images */
.fixed-bg-decoration{
    position: fixed;
    z-index: -1;
    pointer-events: none;
    opacity: 0.28;
}

.fixed-bg-decoration img{
    width: 1200px;
    height: auto;
    display: block;
}

/* 左上 */
.fixed-bg-decoration.top-left{
    top: -220px;
    left: -180px;
}

/* 右上 */
.fixed-bg-decoration.bottom-right{
    top: -220px;
    right: -180px;
}

.fixed-bg-decoration.bottom-right img{
    transform: rotate(180deg);
}

/* =========================================
   Publication page
========================================= */

.pub-year{
    font-size:1.35rem;
    font-weight:700;
    color:var(--green-1);
    margin:0 0 .3rem;
}

.card h3 + .pub-year{
    margin-top:-.4rem;
}

/* ==========================
   publication navigation
========================== */

.pub-navigation{
    text-align:center;
}

.pub-navigation-lead{
    margin-bottom:28px;
    font-size:1.05rem;
    line-height:1.8;
}

.pub-navigation-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;

}

.pub-nav-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
    text-decoration:none;
    color:#255a32;
    background:white;
    border-radius:14px;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    transition:.2s;

}

.pub-nav-card:hover{
    transform:translateY(-3px);
    background:#f6fbf4;

}

.pub-nav-icon{
    font-size:42px;

}

.pub-nav-text{
    flex:1;
    text-align:left;

}

.pub-nav-title{
    display:block;
    font-size:1.35rem;
    font-weight:700;

}

.pub-nav-sub{
    display:block;
    color:#666;
    margin-top:5px;

}

.pub-nav-arrow{
    font-size:42px;
    color:#255a32;

}

.pub-navigation-note{
    margin-top:22px;
    color:#666;
    font-size:.95rem;

}

@media(max-width:900px){

    .pub-navigation-grid{
        grid-template-columns:1fr;

    }

}

/* =========================================
   Final header refresh 2026-07-02 Green-3 final
   - Green-3 header / footer
   - header height reduced while keeping logo size
   - language switcher moved farther from menu
   - no background on selected/hover menu items
   - unified hero spacing
========================================= */

.site-header{
    background:var(--green-3);
    color:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.18);
    position:relative;
    z-index:100;
}

.site-header-inner{
    max-width:1400px;
    margin:0 auto;
    padding:.16rem .8rem .06rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
}

.site-logo{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    text-decoration:none;
    transform:translateY(4px);
}

.site-logo img{
    display:block;
    height:108px;
    width:auto;
}

.site-header-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:.72rem;
    margin-left:auto;
}

.site-header .language-switcher{
    position:static;
    z-index:auto;
    display:flex;
    align-items:center;
    gap:.15rem;
    padding:.24rem;
    background:rgba(255,255,255,.94);
    border-radius:999px;
    box-shadow:0 2px 8px rgba(0,0,0,.16);
    backdrop-filter:blur(8px);
    transform:none;
}

.site-header .language-switcher button{
    padding:.3rem .8rem;
    margin:0;
    border-radius:999px;
    color:#123c30;
    font-size:.82rem;
    line-height:1;
}

.site-header .language-switcher button:hover{
    background:#e8f5e8;
}

.site-header .language-switcher button.active{
    background:linear-gradient(135deg,var(--green-2),var(--green-1));
    color:#fff;
}

.site-nav{
    background:transparent;
    margin-top:25px;
}

.site-nav .nav-menu{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:.6rem;
    margin:0;
    padding:0;
}

.site-nav .nav-menu li{
    margin:0;
}

.site-nav .nav-menu a{
    position:relative;
    display:block;
    color:#fff;
    text-decoration:none;
    padding:.2rem 0 .52rem;
    font-size:1.04rem;
    font-weight:700;
    line-height:1.2;
    border-right:none;
    background:transparent !important;
    transition:color .2s ease, opacity .2s ease;
}

.site-nav .nav-menu a:hover{
    color:#e7f7b8;
    background:transparent !important;
}

.site-nav .nav-menu a.active,
body[data-page="home"] .site-nav .nav-menu a[href="index.html"],
body[data-page="research"] .site-nav .nav-menu a[href="research.html"],
body[data-page="members"] .site-nav .nav-menu a[href="members.html"],
body[data-page="publications"] .site-nav .nav-menu a[href="publications.html"],
body[data-page="news"] .site-nav .nav-menu a[href="news.html"],
body[data-page="contact"] .site-nav .nav-menu a[href="contact.html"]{
    color:#fff;
    background:transparent !important;
}

.site-nav .nav-menu a.active::after,
body[data-page="home"] .site-nav .nav-menu a[href="index.html"]::after,
body[data-page="research"] .site-nav .nav-menu a[href="research.html"]::after,
body[data-page="members"] .site-nav .nav-menu a[href="members.html"]::after,
body[data-page="publications"] .site-nav .nav-menu a[href="publications.html"]::after,
body[data-page="news"] .site-nav .nav-menu a[href="news.html"]::after,
body[data-page="contact"] .site-nav .nav-menu a[href="contact.html"]::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:.12rem;
    height:4px;
    background:#a8d36d;
    border-radius:999px;
}

footer{
    background:var(--green-3);
    color:#fff;
}

main{
    max-width:1200px;
    margin:0 auto 2rem;
    padding:0 2rem;
}

.hero.slim{
    margin:1.5rem 0;
}

.card{
    margin-bottom:2rem;
}

@media(max-width:1050px){
    .site-header-inner{
        flex-direction:column;
        gap:.35rem;
        padding:.42rem 1.4rem .48rem;
    }

    .site-logo img{
        height:92px;
    }

    .site-header-right{
        align-items:center;
        gap:.48rem;
    }

    .site-nav .nav-menu{
        justify-content:center;
        gap:1.05rem;
    }

    .site-nav .nav-menu a{
        font-size:.98rem;
    }
}

/* =========================================
   メニューをアイコンに
========================================= */

.site-nav .nav-menu a{
    position:relative;
    display:block;
    padding:.2rem 0 .52rem;
    background:transparent !important;
}

.nav-img{
    display:block;
    height:24px;
    width:auto;
}

/* active の下線はCSSでそのまま付ける */
.site-nav .nav-menu a.active::after,
body[data-page="home"] .site-nav .nav-menu a[href="index.html"]::after,
body[data-page="research"] .site-nav .nav-menu a[href="research.html"]::after,
body[data-page="members"] .site-nav .nav-menu a[href="members.html"]::after,
body[data-page="publications"] .site-nav .nav-menu a[href="publications.html"]::after,
body[data-page="news"] .site-nav .nav-menu a[href="news.html"]::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:.05rem;
    height:4px;
    background:#a8d36d;
    border-radius:999px;
}

@media(max-width:768px){
    .site-logo img{
        height:74px;
    }

    .site-header .language-switcher{
        padding:.22rem;
    }

    .site-header .language-switcher button{
        padding:.28rem .68rem;
        font-size:.78rem;
    }

   .site-nav .nav-menu{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    width:100%;
    max-width:520px;
    margin:0 auto;
    justify-content:center;
    gap:.2rem .75rem;
}

    .site-nav .nav-menu a{
        padding:.28rem 0 .5rem;
        font-size:.92rem;
    }

    main{
        padding:0 1rem;
    }

    .hero.slim{
        margin:1rem 0;
    }

    .nav-img{
    height:18px;
    }
}