/* ========== Base ========== */
@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/assets/fonts/zen-maru-gothic/zenmaru-regular.woff2') format('woff2'),
       url('/assets/fonts/zen-maru-gothic/zenmaru-regular.ttf') format('truetype'); /* フォールバックとしてTTFも */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/assets/fonts/Zen-Maru-Gothic/ZenMaruGothic-Medium.woff2') format('woff2'),
       url('/assets/fonts/zen-maru-gothic/zenmaru--Medium.ttf') format('truetype'); /* フォールバックとしてTTFも */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/assets/fonts/Zen-Maru-Gothic/ZenMaruGothic-Bold.woff2') format('woff2'),
       url('/assets/fonts/zen-maru-gothic/ZenMaruGothic-Bold.ttf') format('truetype'); /* フォールバックとしてTTFも */
  font-weight: 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/Quicksand/Quicksand_aa.woff2') format('woff2');
       /* url('/assets/fonts/Quicksand/ZenMaruGothic-Bold.ttf') format('truetype'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: 'ZenMaruGothic';
  src: url('/assets/fonts/Zen-Maru-Gothic/ZenMaruGothic-Black.woff2') format('woff2'),
       url('/assets/fonts/zen-maru-gothic/ZenMaruGothic-Black.ttf') format('truetype'); /* フォールバックとしてTTFも */
  /* font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/assets/fonts/Zen-Maru-Gothic/ZenMaruGothic-Light.woff2') format('woff2'), */
       /* url('/assets/fonts/zen-maru-gothic/ZenMaruGothic-Light.ttf') format('truetype'); /* フォールバックとしてTTFも */
  /* font-weight: 700;
  font-style: normal;
  font-display: swap;
} */ 

html, body {
  /* font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important; */
  margin: 0;
  background: #ffffff;
  color: #333;
  line-height: 1.8;
}

/* p, li, a, span, div, button, input, textarea {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important;
} */
body {
  background-color: #619382; /* 背景色を設定 */
}
/* サイト全体に適用する場合 */
body {
  /* font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important; */
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
}

main { 
  max-width: 960px; 
  margin: 2rem auto; 
  background-color: #ffffff  !important; 
  padding: 2rem; /* 内側の余白を調整 */
  border-radius: 30px !important; /* 角を丸くする */
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 軽いシャドウを追加して立体感を持たせる */
}
section { margin-bottom: 3rem; }

/* .news-list li { margin-bottom: 10rem; } */

@media (max-width: 640px){
main { 
  max-width: auto; 
  margin: 2rem auto; 
  background-color: #ffffff  !important; 
  padding: 0rem; /* 内側の余白を調整 */
  border-radius: 30px !important; /* 角を丸くする */
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 軽いシャドウを追加して立体感を持たせる */
 }
}




.custom-footer {
  position: relative;
  /* background-image: url('/assets/img/footer-bg.png'); */
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center;
  background-color: transparent;  /* 背景色なし */
  height: 400px;                   /* 高さは適切に調整 */

  color: #606463;
  font-size: 0.7rem;
  text-align: left;               /* 文字左寄せ */
  font-weight: 350 !important;

  display: flex;
  flex-direction: column;         /* 子要素を縦方向に配置 */
  justify-content: center;        /* 縦中央揃え */
  align-items: flex-start;        /* 左寄せ */
  padding: 50px 40px;             /* 上下左右の余白 */
  padding-top: 50px;          /* フッター内の余白を調整 */

  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
}


/* モバイル表示用の調整 */
@media (max-width: 768px) {
  .custom-footer {
    text-align: left;  /* テキストを左寄せ */
  }

  .custom-footer .footer-logo a {
  position: absolute;
  bottom: 320px;  /* フッターの下から50%の位置に配置 */
  left: 2rem;   /* 左側に少し余白を追加 */
  transform: translateY(50%); /* ロゴの垂直位置を調整 */
}

.custom-footer .footer-logo img {
  width: 110px; /* ロゴの幅 */
  height: auto; /* 高さは自動調整 */
}

  /* .footer-text {
    margin-top: 1rem; */
    /* font-size: 12px;  モバイル版のテキストサイズ調整 */
  /* }*/
} 

/* ================================
   九州産業大学・田中研究室タイトル部分
================================ */
.foot-page-tit {
  margin: 0 0 10px 0;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: left;
}

/* 「九州産業大学」部分（サブタイトル） */
.foot-page-tit .sub-tit {
  display: block;
  font-size: 1.1rem;
  /* color: rgba(255, 255, 255, 0.8); */
  color: #606463;
  text-align: left;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
}

/* 「田中研究室」部分（メインタイトル） */
.foot-page-tit .tit {
  display: block;
  font-size: 1.6rem;
  /* color: #a7ffeb; 淡い青緑色でアクセント */
  color: #606463;
  text-align: left;
  font-weight: 700;
  letter-spacing: 3px;
  margin-top: 0px;
  /* text-shadow: 0 0 10px rgba(0, 255, 200, 0.3); ほんのり光らせる */
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
}







.custom-footer .footer-text p {
  margin: 0 0 5px 0;
  /* font-weight: lighter !important;*/
  font-weight: 350 !important;
  /*font-style: normal; */
  text-align: left;
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
}

.custom-footer .footer-text small {
  /* font-weight: lighter  !important;
  font-size: 0.3rem !important; */
  font-style: normal;
  margin: 0;
  text-align: left;
}

.custom-footer :lang(ja){
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif !important;
  /* font-weight: 350  !important;
  font-size: 1.0rem !important; */
  /* font-weight:350;  お好みで */
}
/* 英語だけ Quicksand に切替（lang=en が付いた範囲） */
.custom-footer :lang(en){
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
  font-weight: 380  !important;
  font-size: 0.9rem !important;
  /* font-style: normal; */
  /* font-weight:350;  お好みで */
}


/* body, main, section, .content, .container, .wrapper { background-color: #fff !important; } */


/* ========== Header（共通） ========== */
.site-header {
  /* background: url('../images/header-bg.png') no-repeat center center; */
  background-size: cover;
  /* height: 1000px; デフォルトの高さ（他ページ用） */
  display: flex;
  flex-direction: column;
  align-items: center;   /* デフォルトは中央寄せ */
  justify-content: center; /* デフォルトは中央寄せ */
  text-align: center;      /* デフォルトは中央寄せ */
  /* text-align: bottom;      */
  position: relative;
  
  padding: 2rem 3rem;
  /* background-attachment: fixed !important; */
}



/* トップページ専用（PC） */
body.home .site-header {
  height: 900px  !important;                /* ← ヘッダーを少し高く */
  background-size: cover !important; /* 背景画像が画面サイズに合わせてリサイズ */
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding-top: 0;
}

/* 左上の「〇〇研究室」リンク */
/* .lab-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1.0rem;
  /* font-family: 'Montserrat','Noto Sans JP',sans-serif; */
  /* font-family: 'Roboto Slab', serif !important; ここに !important を追加 */
  /* margin: 0;
  z-index: 10;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6), */
  /* -1px -1px 4px rgba(0,0,0,0.9);  左上にも影で囲む */
/* }
.lab-logo a { color: #fff; text-decoration: none; }
.lab-logo a:hover { text-decoration: none; } */

/* ====== PC共通 ====== */
.lab-logo {
  position: absolute;
  top: 30px;
  left: 60px;
  margin: 0;
  z-index: 10;
}

.lab-logo a {
  display: inline-block;
}

.lab-logo img {
  height: 130px;           /* ロゴの高さを指定（幅は自動） */
  width: auto;
  display: block;
  object-fit: contain;    /* 画像の歪み防止 */
  transition: opacity 0.3s ease;
}

.lab-logo a:hover img {
  opacity: 0.85;          /* ホバー時に少し暗くする（任意） */
}

/* ====== モバイル（例: 〜768px） ====== */
@media (max-width: 768px) {
  .lab-logo {
    position: relative;   /* 固定配置を解除して中央寄せ */
    text-align: center;
    margin: 20px auto;
    top: 0;
    left: 0;
  }

  .lab-logo img {
    height: 60px;         /* モバイル用ロゴサイズ */
  }
}


/* hero-copy 内の文字 */
.site-header .hero-copy {
  color: #333;
  /* text-shadow: 2px 2px 6px rgba(0,0,0,0.6), */
  max-width: 800px;
  margin: 0;
  margin-top: 50px; /* 元の値を小さくして上に寄せる*/
} 




.site-header .hero-copy .title {
  font-size: 2.0rem;
  font-weight: 700;
  margin: 1rem 0;
  left: 30px;
  /* text-shadow: 2px 2px 6px rgba(0,0,0,0.6),
  -1px -1px 4px rgba(0,0,0,0.9);  左上にも影で囲む */
}

.site-header .hero-copy .lead {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  left: 30px;
  /* text-shadow: 2px 2px 5px rgba(0,0,0,0.85),
  -1px -1px 4px rgba(0,0,0,0.9);  左上にも影で囲む */
}


/* ========== セクション見出し ========== */
.section-title {
  text-align: center;
  margin-top: 55px;
  /* font-weight: bold; */
  /* font-size: 3.0rem;
  font-weight: 1000 !important; */
  /* font-family: 'Montserrat', 'Noto Sans JP', sans-serif; */
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;

  border: none;
}

.section-title .title-ja {
  display: block;
  /* font-size: 2.2rem; */
  margin-top: 0rem;
  font-size: 3.0rem;
  font-weight: 700 !important;
  color: #333;
  letter-spacing: 0.2em;
  /* text-shadow: 1px 1px 2px rgba(0,0,0,.9); */
}
.section-title .title-en {
  display: block;
  font-size: 1.2rem;
  font-weight: 500 !important;
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
  color: #327a63;
  margin-top: -3.0rem !important;
  /* text-shadow: 1px 1px 2px rgba(0,0,0,.9); */
}









/* ===== Mobile & iOS fixes for header hero ===== */

/* Buttons readable on photo background */
.site-header .hero-copy .btn.btn-primary {
  background: rgba(255,255,255,0.16);
  border: 1px solid #fff;
  color: #fff;
  backdrop-filter: saturate(120%) blur(2px);
}
.site-header .hero-copy .btn.btn-primary:hover {
  background: rgba(255,255,255,0.28);
}
.site-header .hero-copy .btn.btn-outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.site-header .hero-copy a { color: inherit; }

/* iOS Safari dark mode/text-fill quirks */
@supports (-webkit-touch-callout: none) {
  body.home .site-header .hero-copy,
  body.home .site-header .hero-copy .brand,
  body.home .site-header .hero-copy .title,
  body.home .site-header .hero-copy .lead {
    /* color: #fff !important; */
    color: #333 !important;
    -webkit-text-fill-color: #fff;
  }
}


/* ==== Contact (merged from normal style.css) ==== */
/* ===== Contact Form ===== */
.contact-section { 
  /* max-width: 840px;  */
  max-width:min(900px,92vw);
  margin:0 auto;
  padding:28px 0 56px;
  border-radius: 30px !important; /* 角を丸くする */
}
.contact-lead { text-align:center; color:#555; margin: .5rem 0 2rem; }

.contact-form{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding: 1.6rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.form-row{ margin-bottom: 1.1rem; }
.form-row label{
  display:block;
  font-weight:700;
  margin-bottom:.35rem;
  color:#333;
}



.form-row input,
.form-row textarea{
  width:100%;
  padding:.8rem .9rem;
  border:1px solid #cfcfcf;
  border-radius:8px;
  font-size:1rem;
  background:#fff;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.form-row input::placeholder,
.form-row textarea::placeholder{ color:#999; }

.form-row input:focus,
.form-row textarea:focus{
  outline:none;
  border-color:#8aa6b1;             /* 柔らかいブルーグレー */
  box-shadow:0 0 0 3px rgba(138,166,177,.18);
  background:#fff;
}

/* 入力エラーの視認性（ブラウザ標準のrequiredと連動） */
form:invalid .btn-primary{ opacity:.7; pointer-events:auto; }

/* ボタン */
.form-actions{ text-align:center; margin-top:1.6rem; }
.btn-primary{
  display:inline-block;
  border:none;
  background:#36454f;               /* 落ち着いたチャコール */
  color:#fff;
  padding:.85rem 2rem;
  font-size:1rem;
  border-radius:999px;
  cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover{ background:#2f3c44; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.btn-primary:active{ transform: translateY(1px); }

/* ==================================================================================
20251101 */

/* フォーム全体は丸ゴ（日本語） */
.contact-section,
.contact-section * {
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
}

/* 英語ラベルだけ Quicksand に切替（lang="en" が付いた範囲） */
.contact-section :lang(en) {
  font-family: 'Quicksand', 'ZenMaruGothic', system-ui, sans-serif !important;;
  font-weight: 600; /* お好みで 500–700 */
  letter-spacing: .02em;
}

/* もし英語のプレースホルダも Quicksand にしたい場合は、
   対象の input/textarea 自体に lang="en" を付ける */
.contact-section input[lang="en"]::placeholder,
.contact-section textarea[lang="en"]::placeholder {
  font-family: 'Quicksand', 'ZenMaruGothic', system-ui, sans-serif !important;;
}

/* 入力中の英数字も Quicksand にしたい場合は、対象要素に .latin を付けて使い分け可能 */
.contact-section .latin,
.contact-section .latin::placeholder {
  font-family: 'Quicksand', 'ZenMaruGothic', system-ui, sans-serif;
}

/* 英数字フィールドのプレースホルダ＆入力文字を Quicksand に */
.contact-form .latin::placeholder {
  font-family: 'Quicksand', system-ui, sans-serif !important;
  font-weight: 500;  /* お好みで 400–600 */
  letter-spacing: .01em;
}
.contact-form .latin {
  font-family: 'Quicksand', system-ui, sans-serif !important;
}

/* 既に入れている :lang(en) でラベル英語も Quicksand に */
.contact-section :lang(en) {
  font-family: 'Quicksand', 'ZenMaruGothic', system-ui, sans-serif !important;
  font-weight: 600;
}

/* 日本語入力欄（住所・本文など）の入力文字のみゴシックに変更 */
.contact-form input[type="text"]:not(.latin):not([lang="en"]),
.contact-form textarea:not(.latin):not([lang="en"]) {
  /* font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI','Meiryo', sans-serif  !important; */
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important;
  font-weight: 150 !important;
  letter-spacing: 0.02em;
  line-height: 1.6;
  font-size: 1rem;
  color: #222; /* 少し濃いめで読みやすく */
}

/* プレースホルダ（例文）は今のまま → 何も変更不要 */





/* ========================================================================= */










/* スマホ最適化 */
@media (max-width:640px){
  .contact-form{ padding:1.1rem; border-radius:10px; }
}


.section-title-confirm {
    text-align: center;
    margin: 40px auto;
    padding: 0.8rem 1rem;
    font-weight: bold;
    /* font-family: "Noto Sans JP", sans-serif; */
    font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
    background-color: #327a63; /* ブラウン系テーマカラー */
    border-left: 5px solid #327a63; /* より濃いブラウンの左線 */
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* .section-title-confirm .title-en {
    font-size: 2rem;
    color: #ffffff; 白文字 */
    /* display: block;
    margin-bottom: 0.1rem;
    letter-spacing: 0.5px;
} */

/* .section-title-confirm .title-ja {
    font-size: 1.2rem; */
    /* color: #f5f5f5; /* 薄い白 */
    /* display: block; */
    /* margin-top: 0;
} */ 
/* ホームに戻るボタン */
.home-button {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.home-button:hover {
  background-color: #555;
  transform: translateY(-2px);
}


/* === Font override: Montserrat + Noto Sans JP === */
html, body {
  /* font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important; */
  
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
}

/* Common text nodes */
p, li, a, span, div, button, input, textarea {
  /* font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important; */
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
}

/* 必須マークの赤色設定 */
/* .required {
  color: red;
  margin-right: 0.3em;
} */

/* フォーム入力欄の横幅を調整（はみ出し防止） */
/* form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="search"],
form input[type="password"],
form select,
form textarea {
  width: calc(100% - 2px);
  max-width: 100%;
  box-sizing: border-box;
} */




@media (max-width: 800px){
  .profile-hero__wrap{ grid-template-columns: 1fr; text-align:center; }
  .profile-hero__photo{ display:flex; justify-content:center; }
  .profile-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Unified Buttons (Gray, sleek)
   ========================= */
:root{
  --btn-bg: #36454f;        /* primary gray */
  --btn-fg: #ffffff;
  --btn-hover: #2f3c44;     /* darker hover */
  --btn-border: #cfcfcf;    /* neutral border */
  --btn-ink: #0f172a;       /* neutral text */
  --btn-muted: #f8fafc;     /* subtle bg */
  --btn-ring: rgba(54,69,79,.2);
}

/* Base */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.8rem 1.6rem;
  font-size:1rem; font-weight:600; line-height:1;
  text-decoration:none; color:var(--btn-ink);
  background:#fff;
  border:1px solid var(--btn-border);
  border-radius:9999px;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:0 1px 1px rgba(2,6,23,.04), 0 4px 16px rgba(2,6,23,.06);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 2px 4px rgba(2,6,23,.06), 0 10px 24px rgba(2,6,23,.10); background:var(--btn-muted); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(2,6,23,.12); }
.btn:focus{ outline:0; box-shadow:0 0 0 4px var(--btn-ring); }

/* Primary */
.btn-primary{
  background:var(--btn-bg); color:var(--btn-fg);
  border-color:var(--btn-bg);
}
.btn-primary:hover{ background:var(--btn-hover); border-color:var(--btn-hover); color:#fff; }

/* Outline */
.btn-outline{
  background:#fff; color:var(--btn-ink);
  border-color:var(--btn-border);
}
.btn-outline:hover{ background:var(--btn-muted); }

/* Ghost */
.btn-ghost{
  background:transparent; border-color:transparent; color:var(--btn-ink);
  box-shadow:none;
}
.btn-ghost:hover{ background:var(--btn-muted); }

/* Utilities */
.btn-sm{ padding:.6rem 1.2rem; font-size:.95rem; }
.btn-block{ display:flex; width:100%; }


/* === Button hover tweak (light gray hover) === */
.btn:hover{ background: var(--btn-muted); } /* base hover already light */
.btn-primary:hover{
  background:#e9ecef;      /* light gray */
  color:#0f172a;           /* readable text on light bg */
  border-color:#d1d5db;    /* soft gray border */
}
/* ==== Soft Animated Hero =================================================== */
.kv{
  --kv-max: 1040px;
  --kv-min-h: clamp(560px, 80vh, 860px); /* 高さを少し大きく調整 */
  position: relative;
  min-height: var(--kv-min-h);
  overflow: clip;
  isolation: isolate;
}

/* 背景画像（透明感のあるやわらかい色合い） */
.kv__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* background: url("assets/img/header-bg.png") center/cover no-repeat; */
  box-shadow: inset 0 -120px 180px rgba(255, 255, 255, 0.35);
}

/* GIFを交互にフェードイン/フェードアウト */
.kv__gif-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.kv__gif {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeInOut 6s ease-in-out infinite;
}

/* GIFのアニメーション：交互に表示 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  40% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}

.kv__gif:nth-child(2) {
  animation-delay: 3s; /* 2つ目のGIFは3秒後に表示 */
}

/* コンテンツ：テキスト部分 */
.kv__inner {
  max-width: var(--kv-max);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) 16px;
  display: grid;
  grid-template-columns: 1fr; /* テキスト部分中央寄せ */
}

.kv__copy {
  max-width: 680px;
  margin-left: min(4vw, 28px);
  backdrop-filter: blur(0.5px); /* 透明感 */
}

.kv__title {
  color: #333;
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1.12;
  margin: 0.2rem 0 0.8rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.kv__lead {
  color: #2b2b2b;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.8;
  margin-bottom: 1.2rem;
  opacity: 0.95;
}

.kv__cta {
  display: flex;
  gap: 0.6rem;
}

/* ボタンスタイル */
.kv-btn {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s, color 0.2s, border-color 0.2s;
}

.kv-btn--primary {
  background: #0f7f86;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.kv-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.kv-btn--ghost {
  border: 1.5px solid rgba(15, 127, 134, 0.7);
  color: #0f7f86;
  background: rgba(255, 255, 255, 0.6);
}

.kv-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* レスポンシブ：スマホでのサイズ調整 */
@media (max-width: 960px) {
  .kv {
    --kv-min-h: clamp(420px, 64vh, 560px);
  }

  .kv__copy {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv__gif {
    animation: none !important;
  }
}

/* Confirm/Error page heading style */
.section-title-confirm {
    text-align: center;
    margin: 40px auto;
    padding: 0.8rem 1rem;
    font-weight: bold;
    /* font-family: "Noto Sans JP", sans-serif; */
    font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
    background-color: #327a63; /* ブラウン系テーマカラー */
    border-left: 5px solid #327a63; /* より濃いブラウンの左線 */
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.section-title-confirm .title-en {
    font-size: 2rem;
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
    color: #327a63; /* 白文字 */
    display: block;
    margin-bottom: 0.1rem;
    letter-spacing: 0.5px;
}

.section-title-confirm .title-ja {
    font-size: 1.2rem;
    
    color: #333; /* 薄い白 */
    display: block;
    margin-top: 0;
}
/* ホームに戻るボタン */
.home-button {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.home-button:hover {
  background-color: #555;
  transform: translateY(-2px);
}


/* === Font override: Montserrat + Noto Sans JP === */
html, body {
  /* font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important; */
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  /* font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important; */
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
  font-weight: 800 !important;
  /* font-size:clamp(20px, 2.1vw, 28px); */
}
/* Common text nodes */
p, li, a, span, div, button, input, textarea {
  /* font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important; */
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
  font-weight:550 !important;
  font-size: 1.1rem ; 
}



/* 必須マークの赤色設定 */
.required {
  color: red;
  margin-right: 0.3em;
}

/* フォーム入力欄の横幅を調整（はみ出し防止） */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="search"],
form input[type="password"],
form select,
form textarea {
  width: calc(100% - 2px);
  max-width: 100%;
  box-sizing: border-box;
  
}



@media (max-width: 800px){
  .profile-hero__wrap{ grid-template-columns: 1fr; text-align:center; }
  .profile-hero__photo{ display:flex; justify-content:center; }
  .profile-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Unified Buttons (Gray, sleek)
   ========================= */
:root{
  --btn-bg: #36454f;        /* primary gray */
  --btn-fg: #ffffff;
  --btn-hover: #2f3c44;     /* darker hover */
  --btn-border: #cfcfcf;    /* neutral border */
  --btn-ink: #0f172a;       /* neutral text */
  --btn-muted: #f8fafc;     /* subtle bg */
  --btn-ring: rgba(54,69,79,.2);
}

/* Base */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.8rem 1.6rem;
  font-size:1rem; font-weight:600; line-height:1;
  text-decoration:none; color:var(--btn-ink);
  background:#fff;
  border:1px solid var(--btn-border);
  border-radius:9999px;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:0 1px 1px rgba(2,6,23,.04), 0 4px 16px rgba(2,6,23,.06);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 2px 4px rgba(2,6,23,.06), 0 10px 24px rgba(2,6,23,.10); background:var(--btn-muted); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(2,6,23,.12); }
.btn:focus{ outline:0; box-shadow:0 0 0 4px var(--btn-ring); }

/* Primary */
.btn-primary{
  background:var(--btn-bg); color:var(--btn-fg);
  border-color:var(--btn-bg);
}
.btn-primary:hover{ background:var(--btn-hover); border-color:var(--btn-hover); color:#fff; }

/* Outline */
.btn-outline{
  background:#fff; color:var(--btn-ink);
  border-color:var(--btn-border);
}
.btn-outline:hover{ background:var(--btn-muted); }

/* Ghost */
.btn-ghost{
  background:transparent; border-color:transparent; color:var(--btn-ink);
  box-shadow:none;
}
.btn-ghost:hover{ background:var(--btn-muted); }

/* Utilities */
.btn-sm{ padding:.6rem 1.2rem; font-size:.95rem; }
.btn-block{ display:flex; width:100%; }


/* === Button hover tweak (light gray hover) === */
.btn:hover{ background: var(--btn-muted); } /* base hover already light */
.btn-primary:hover{
  background:#e9ecef;      /* light gray */
  color:#0f172a;           /* readable text on light bg */
  border-color:#d1d5db;    /* soft gray border */
}
/* ==== Soft Animated Hero =================================================== */
.kv{
  --kv-max: 1040px;
  --kv-min-h: clamp(560px, 80vh, 860px); /* 高さを少し大きく調整 */
  position: relative;
  min-height: var(--kv-min-h);
  overflow: clip;
  isolation: isolate;
}

/* 背景画像（透明感のあるやわらかい色合い） */
.kv__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* background: url("assets/img/header-bg.png") center/cover no-repeat; */
  box-shadow: inset 0 -120px 180px rgba(255, 255, 255, 0.35);
}

/* GIFを交互にフェードイン/フェードアウト */
.kv__gif-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.kv__gif {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeInOut 6s ease-in-out infinite;
}

/* GIFのアニメーション：交互に表示 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  40% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}

.kv__gif:nth-child(2) {
  animation-delay: 3s; /* 2つ目のGIFは3秒後に表示 */
}

/* コンテンツ：テキスト部分 */
.kv__inner {
  max-width: var(--kv-max);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) 16px;
  display: grid;
  grid-template-columns: 1fr; /* テキスト部分中央寄せ */
}

.kv__copy {
  max-width: 680px;
  margin-left: min(4vw, 28px);
  backdrop-filter: blur(0.5px); /* 透明感 */
}

.kv__title {
  color: #333;
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1.12;
  margin: 0.2rem 0 0.8rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.kv__lead {
  color: #2b2b2b;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.8;
  margin-bottom: 1.2rem;
  opacity: 0.95;
}

.kv__cta {
  display: flex;
  gap: 0.6rem;
}

/* ボタンスタイル */
.kv-btn {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s, color 0.2s, border-color 0.2s;
}

.kv-btn--primary {
  background: #0f7f86;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.kv-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.kv-btn--ghost {
  border: 1.5px solid rgba(15, 127, 134, 0.7);
  color: #0f7f86;
  background: rgba(255, 255, 255, 0.6);
}

.kv-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* レスポンシブ：スマホでのサイズ調整 */
@media (max-width: 960px) {
  .kv {
    --kv-min-h: clamp(420px, 64vh, 560px);
  }

  .kv__copy {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv__gif {
    animation: none !important;
  }
}
/* 20250912------------------------------------ */
  
/* --------------------------------------------------------------- */
/* ヘッダーは基準になるので relative のままでOK */
/* body.home .site-header { height: 1000px; } */

/* ロゴはヘッダー基準で左上に配置（サイズは現状のままでもOK） */
.brand-logo {
  position: absolute;
  top: 140px !important;      /* 好みで微調整 */
  left: 120px;
  z-index: 20;
}
.brand-logo img { height: 400px; width: auto; display: block; }

/* テキストはロゴの下に下げる（負のtopはやめる） */
body.home .hero-copy {
  position: relative !important;
  top: 0 !important;          /* ← ここを0に戻す */
  margin-top: 310px !important;          /* ロゴの下に余白を作る（数値は好みで） */
  max-width: 800px;
}




/* ======= モバイル用（絶対配置で調整） ======= */
@media (max-width: 640px){

  /* ヘッダーを十分に高くして調整 */
  body.home .site-header{
    position: relative;
    height: 900px !important; /* 必要に応じて高さを変更 */
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
    padding: 1.4rem 1.2rem !important;
  }

  /* ロゴはabsoluteで中央に配置 */
  .brand-logo{
    position: absolute;
    top: 50px; /* 余白調整（必要なら増減） */
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
    z-index: 9; /* 背面より手前 */
  }
  .brand-logo img{ height: 180px; width: auto; display: block; }

  /* テキスト部分は絶対配置でスライダーの上に */
  body.home .site-header .hero-copy{
    position: absolute !important;
    top: 330px !important; /* ロゴの下に配置（ロゴの高さ + 余白） */
    left: 8%;
    width: 84%;
    margin-top: 0 !important; /* 再設定（不要） */
    z-index: 20; /* スライダーより手前 */
  }

  /* タイトル・リードのサイズ調整 */
  body.home .site-header .hero-copy .title{
    font-size: 1.7rem;
    line-height: 1.35;
  }
  body.home .site-header .hero-copy .lead{
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.1rem;
  }

  /* スライダーのz-index調整（背面） */
  .hero-slider{
    position: absolute; inset: 0; z-index: 0; /* 背面に配置 */
  }


.custom-footer {
  position: relative;
  /* background-image: url('/assets/img/footer-bg.png'); */
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center;
  background-color: transparent;  /* 背景色なし */
  height: 400px;                   /* 高さは適切に調整 */

  color: #606463;
  font-size: 0.3rem;
  text-align: left;               /* 文字左寄せ */

  display: flex;
  flex-direction: column;         /* 子要素を縦方向に配置 */
  justify-content: center;        /* 縦中央揃え */
  align-items: flex-start;        /* 左寄せ */
  padding: 20px 40px;             /* 上下左右の余白 */

  
}

.custom-footer .footer-text a {
    pointer-events: none;  /*リンクを無効化*/
    text-decoration: none; /* リンクのスタイルを解除 */
    color: inherit;        /* リンクの色を元の色に戻す */
  }

  .custom-footer .footer-text p a {
    pointer-events: none;  /* 同様に電話番号やメールアドレスのリンクを無効化 */
    color: inherit;        /* 色を元のテキストと同じにする */
    text-decoration: none;
  }


.custom-footer p {
  margin: 0 0 5px 0;
  text-align: left;
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
}

.custom-footer small {
  margin: 0;
  text-align: left;
}
}

/* ===================================================
トップページコンテンツ 20250913
==================================================== */
/* ==== section 共通 ==== */
/* section h2 { 
  font-size: 1.5rem; 
  /* border-bottom: 1px solid #ccc;  */
  /* padding-bottom: .5rem; 
} */ 
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.sec-ttl { font-size: 2.1rem; 
  letter-spacing: .06em; 
  color: #333; 
  margin: 3.5rem 0 .25rem; 
  text-align: center;        /* ← 中央寄せの基本 */
}

.sec-sub { 
  color: #327a63; 
  /* margin: 0 0 0rem;  */
  margin-top: -0.7rem;   /* ← 少し詰めたいとき */
  text-align: center;        /* ← 中央寄せの基本 */
}


/* ==== NEWS ==== */


/* ===== NEWS（左下に小さくまとめる） ===== */

/* セクションの器：ヘッダーと重ならないよう高さだけ確保 */
.home-archive-sec{
  position: relative;
  min-height: 90vh;  /* 30〜60vhで好み調整 */
  margin: 0;
  margin-left: 40rem;
  padding: 0;
  background: transparent;
}

/* ニュース全体（この中は“横書き”固定にして縦書き継承をリセット） */
.home_archive{
  position: relative;
  min-height: 100%;
  isolation: isolate;
  writing-mode: horizontal-tb;      /* ←縦書きリセット */
}
.home_archive *{
  writing-mode: horizontal-tb;      /* 念のため子孫も横書き固定 */
  text-orientation: mixed;
}
/* ニュースブロック配下は横書きを強制 */
.home_archive .home_news,
.home_archive .home_news *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* 左下にドッキングするニュースカード */
.home_archive .home_news{
  position: absolute;
  bottom: 6vh;                /* ← 10→9→6vh など小さくすると下側に下がります */
  padding-left: 2rem; /* ← ほんの少しだけ余白を取るのもおすすめ */
  left: 0vw;                        /* ← 位置：横 */
  bottom: 9vh;                      /* ← 位置：縦 */
  width: min(860px, 84vw);          /* ← 実幅指定で“細くなり”防止 */
  color: #333;
  font-size: clamp(5px, 0.7vw, 7px);
  line-height: 1.9;
  background: transparent;
  z-index: 5;
}

/* 見出し（丸ドット＋和英） */
.home_archive .home_news .st_circle{
  margin: 0 0 .8rem;
  display: flex; 
  flex-direction: column;     /* ← 横並び→縦並びに変更 */
  align-items: flex-start;    /* ← 左揃え */
  gap: .2rem;
  font-weight: 800; 
  color: #333;
  position: relative;
  padding-left: 1.2em;        /* ← ドット分の余白を確保 */
}
/* .home_archive .home_news .st_circle::before{
  position: absolute;
  left: 0; */
  /* top: 1.2em;                 ← ドットの縦位置（微調整） */
  /* content:""; 
  width:.6em; 
  height:.6em; 
  border-radius:50%;
  background:#f2a12f; 
  display:inline-block;
} */
.home_archive .home_news .st_circle .jp{
  font-size: clamp(18px, 2.2vw, 26px); 
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
  letter-spacing:.06em;
}

.home_archive .home_news .st_circle .jp::before{
  content:"";
  display:inline-block;
  width: .45em;               /* ← ドットを小さく */
  height: .45em;
  margin-right: .45rem;       /* 文字との間隔 */
  border-radius: 50%;
  background: #083a32;
  transform: translateY(-0.06em); /* ベースライン微調整 */
  vertical-align: middle;
}

.home_archive .home_news .st_circle .en{
  font-size: clamp(15px, 2.1vw, 20px);
  font: weight 400px;
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
  color:#327a63; 
  letter-spacing:.18em; 
  text-transform: capitalize;
  margin-top: -1.0rem;   /* ← 少し詰めたいとき */
  margin-left: 2.0rem;
}

/* リスト（罫線ナシ・行間コンパクト） */
.home_archive .home_news ul{
  margin: 0; 
  padding: 0; 
  list-style: none;
  display: grid; 
  row-gap: .3rem;
}

/* 1行 = [日付][タイトル] の2カラム */
/* .home_archive .home_news li,
.home_archive .home_news li > a{
  display: grid;
  grid-template-columns: 9.5em 1fr;  ← 日付の幅をここで調整 */
  /* column-gap: 1rem;
  align-items: baseline;
  padding: .25rem 0;
  color: inherit; text-decoration: none;
} */





















/* ニュースのリンク全体（横並び） */
.home_archive .home_news li a {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  text-decoration: none;
  color: inherit;
  padding: 0.1rem 0;
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* 🔸 ホバー時に「全体の文字色」を変える */
.home_archive .home_news li:hover a,
.home_archive .home_news li a:hover {
  color: #04ec74;        /* ← 本文も日付も同時に色変更 */
}

/* 日付部分 */
.home_archive .home_news .date {
  white-space: nowrap;
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
  font-size: 0.8em;
  color: #555;
  transition: color 0.25s ease;
}

/* 本文部分 */
.home_archive .home_news .title {
  flex: 1;
  font-size: 0.8em;
  /* font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important; */
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif !important;
  line-height: 1.6;
  color: #333;
  overflow-wrap: break-word;
  transition: color 0.25s ease;
}

/* 🔸 日付だけ別の色変化を入れたい場合はこのように */
.home_archive .home_news li a:hover .date {
  color: #04ec74;
}
.home_archive .home_news li a:hover .title {
  color: #04ec74;
}

/* .home_archive .home_news li:hover {
  color: #b99c60  !important;
} */









/* ホバー：色だけふわっと */
/* .home_archive .home_news li > a{ transition: color .25s ease, opacity .25s ease; }
.home_archive .home_news li > a:hover{ color:#b99c60; }
.home_archive .home_news li > a:hover .date{ color:#b99c60; } */

/* 一覧へのリンク */
.home_archive .home_news .link_more{
  display: inline-flex; align-items:center; gap:.5rem;
  margin-top: .9rem; color:#333; text-decoration:none;
  font-weight: 700; border-bottom: 2px solid currentColor;
  padding-bottom: .1rem; transition: opacity .25s ease;
}
.home_archive .home_news .link_more:hover{ opacity:.7; }

/* スマホ：1カラムに落として幅広く、位置微調整 */
/* @media (max-width: 768px){
  .home-archive-sec{ min-height: 56vh; }
  .home_archive .home_news{
    left: 6vw; bottom: 9vh; width: min(92vw, 680px);
  }
  .home_archive .home_news li,
  .home_archive .home_news li > a{
    grid-template-columns: 1fr;
    row-gap: .2rem;
  }
} */

/* スマホ：1カラムに落として幅広く、位置微調整 */
@media (max-width: 768px){
  /* 横幅が画面を超えないように、bodyやhtmlタグに設定 */
  html, body {
    width: 100%;
    overflow-x: hidden; /* 横方向のスクロールを無効化 */
    margin: 0;  /* 余白をリセット */
    padding: 0; /* 余白をリセット */
  }
  .home-archive-sec {
    min-height: 56vh;
    padding-top: 380px; /* ヘッダーにかぶらないように上部に余白を追加 */
  }
  
  /* ニュースセクションの横幅調整 */
  .home_archive .home_news {
    left: 6vw; 
    bottom: 9vh;
    width: 70vw;  /* 横幅を90%に設定し、メインからはみ出さないように */
  }

  .home_archive .home_news li,
  .home_archive .home_news li > a {
    grid-template-columns: 1fr;
    row-gap: .2rem;
  }

  /* 日付とタイトルの表示 */
  .home_archive .home_news .title {
    font-size: clamp(12px, 3.5vw, 16px); /* タイトルのサイズ調整 */
  }

  /* リストアイテムのフォントサイズ */
  .home_archive .home_news .date {
    font-size: clamp(10px, 2vw, 14px);
  }
}




/* ==== CONTENTS ==== */
.home-contents {  
  /* background-color: #d1ebe1 !important; 背景色を強制的に適用 */
background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */}
.content-block { 
  /* background-color: #d1ebe1 !important; 背景色を強制的に適用 */
  background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */
  display:grid; grid-template-columns: 120px 1fr; gap: 32px; 
  align-items:flex-start; padding: 28px 0; 
  border-top:none !important; 
}
.content-block:last-of-type { 
  border-bottom:none !important; 
  /* background-color: #d1ebe1 !important; 背景色を強制的に適用 */
  background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */
  }
.content-block .num { font-size: 3rem; font-weight: 800; color: #ef6c3c; line-height:1; 
  /* background-color: #d1ebe1 !important; 背景色を強制的に適用 */
  background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */
}
.content-block h3 { font-size: 2.0rem; margin: 0 0 .5rem; color:#333; 
  /* background-color: #d1ebe1 !important; 背景色を強制的に適用 */
  background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */

}
.content-block h3 small { font-size:.9rem; color:#6b7280; 
  /* background-color: #d1ebe1 !important; 背景色を強制的に適用 */
  background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */

}
.content-block p { color:#374151; line-height:1.9; margin: .6rem 0 0; 
  /* background-color: #d1ebe1 !important; 背景色を強制的に適用 */
  background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */
}
@media (max-width: 640px) {
  .content-block { grid-template-columns: 64px 1fr; gap: 16px; }
    /* background-color: #d1ebe1 !important; 背景色を強制的に適用} */
  .content-block .num { font-size: 2.2rem; }
    /* background-color: #d1ebe1 !important; 背景色を強制的に適用} */
  .content-block h3 { font-size: 1.2rem;}
    /* background-color: #d1ebe1 !important; 背景色を強制的に適用 } */
}

/* ==== ABOUT (画像タイル 2x2) ==== */
.home-about {
  /* background-color: #d1ebe1 !important; 背景色を強制的に適用  */ 
  background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */
  margin-top: 150px;   /* セクション全体を下へ下げる */
}


/* --- ABOUTセクションボタン全体配置 --- */
.about-grid {
  display: flex;
  justify-content: center;   /* 中央寄せ */
  gap: 3rem;                 /* ボタン間の余白 */
  flex-wrap: wrap;           /* 小さい画面では折り返す */
  /* margin-top: 10rem; */
  /* ↓ これを追加（ボタン全体を下へ下げる） */
  margin-top: 60px;   /* お好みで 40〜120px に調整 */
}

/* --- 個別ボタンデザイン --- */
.about-card {
  display: flex;
  flex-direction: column;    /* 日本語と英語を縦に並べる */
  justify-content: center;
  align-items: center;
  width: 280px;              /* ボタン幅 */
  height: 40px;             /* ボタン高さ */
  border: 2px solid #7eac99; /* 枠線の色 */
  border-radius: 9999px;     /* 丸みを強調 */
  /* background-color: #dff5ed; 薄いベージュ背景 */
  background-color: rgba(255, 255, 255, 0.0) ; /* 完全透明 */
  text-decoration: none;
  color: #333;
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease; /* ホバー時のふわっとアニメ */
  /* box-shadow: 0 2px 6px rgba(0,0,0,0.05); */
  line-height: 1.4;
}

/* --- 日本語部分（上段） --- */
.about-card::before {
  content: attr(data-jp);    /* data-jp属性で日本語を表示する */
  display: block;
  font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'メイリオ', sans-serif;
  font-size: 1.0rem;
  margin-bottom: 0.2rem;
  color: #333;
  
}

/* --- 英語部分（下段） --- */
.about-card {
  font-size: 0.9rem;
  font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
  color: #838987;
  width: 300px;   /* ← 横幅（幅）を変える */
  height: 60px;  /* ← 縦幅（高さ）を変える */
  line-height: 1.2;
}


/* --- ホバー時の色変化（ふわっと） --- */
.about-card:hover {
  background-color: #181c1a; /* ホバー時の背景色 */
  border-color: #181c1a;     /* 枠線も少し濃く */
  /* transform: translateY(-2px); */
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.1); */
  color: #fff;                /* ← ★ 文字を白に変更 ★ */
  transition: all 0.3s ease;
}
/* .about-card:hover {
 
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
} */
/* data-jp（日本語部分）も白に */
.about-card:hover::before {
  color: #fff;
}




.about-card.about-profile      { --bg: url('/assets/img/about-profile.png'); }
.about-card.about-research     { --bg: url('/assets/img/about-research.png'); }
.about-card.about-achievements { --bg: url('/assets/img/about-achievements.png'); }
.about-card.about-community    { --bg: url('/assets/img/about-community.png'); }

/* -----------------------------------------------------------------------------------
20250928
----------------------------------------------------------------------------------- */

/* トップページ以外（homeクラスが付いていないページ）用 */
body:not(.home) .site-header {
  /* background-image: url('/assets/images/subpage-header-bg.png') !important; */
  /* background-color: #dff5ed !important; */
  background-color: rgba(255, 255, 255, 0.0) !important;   /*完全透明 */
  background-size: cover;
  background-position: center;
  height: 300px !important; /* 他ページの高さに調整 */
  /* letter-spacing: 0.3em; */
}

/* タイトルの配置調整 */
body:not(.home) .section-title {
  position: relative;
  top: 90px !important; /* ← これを増やすと下に移動（例：40〜80pxなど） */
}


/* モバイル版：ロゴを左上に配置し、タイトルを下に表示 */
@media (max-width: 768px) {
  .site-header {
    padding: 1rem 2rem;  /* モバイル版では余白を小さく */
  }

  /* ロゴを左上に表示 */
  .lab-logo {
    position: absolute;
    top: 1rem;
    left: 1rem;
    margin: 0;
    z-index: 10; /* ロゴをタイトルより上に */
  }

  .lab-logo img {
    width: 120px;  /* モバイル版ではロゴのサイズを小さく調整 */
    height: auto;
  }

  /* タイトル部分を中央に調整 */
  .section-title {
    text-align: center;
    margin-top: 2rem; /* ロゴとタイトルの間に少し余白を追加 */
  }

  /* 日本語タイトル */
  .title-ja {
    display: block;
    font-size: clamp(26px, 8vw, 30px) !important; /* 日本語タイトルのフォントサイズ */
    font-weight: 700;
    color: #333;
    letter-spacing: 0.2em;
  }

  /* 英語タイトル */
  .title-en {
    display: block;
    font-size: clamp(12px, 4vw, 16px) !important; /* 英語タイトルのフォントサイズ */
    color: #588971;
    margin-top: 0.3rem;  /* 日本語と英語の間隔を調整 */
  }
}


body:not(.home) {
  background-image: url('/assets/img/body_back_b.png') !important;
  /* background-color: #dff5ed !important; */
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
 

  /* 模様を全体に見せたい＝縮小したい場合は 900px 等の数値指定が安全 */
  background-size: 1500px auto !important;
  /* background-size: cover !important; */

  /* Safariの描画崩れ回避：fixedは使わない */
  background-attachment: scroll !important;

  /* フォールバック色 */
  /* background-color: #dff5ed !important; */
}
/* body {
  /* background-color: #a9c5bc  !important; 背景色を設定 */
  /* background-image: url('/assets/images/body_back.png') !important; */
  /* background-size: cover !important;        画面全体にフィット */
/* }  */

.home .main {
  /* background-color: #fff !important; 背景色を強制的に適用 */
  background-color: rgba(255, 255, 255, 0.0) !important;   /*完全透明 */
  max-width: 1000px !important;  /* 最大幅を設定（お好みで調整） */

  margin-top: 50px  !important; /* ヘッダーとの間隔を空ける */
  margin-bottom: 50px  !important; /* フッターとの間隔を空ける */
}


/* NEWSセクションの背景を完全に透明にする */
.home-news {
  background-color: rgba(255, 255, 255, 0.0) !important; /* 完全透明 */
  background: none !important; /* 透過の保険 */
  box-shadow: none !important; /* 影を無効化（もし設定がある場合） */
  border: none !important;     /* 枠線も削除（任意） */
}

/* 内側の .wrap コンテナも透明にしておくと確実 */
.home-news .wrap {
  background: none !important;
  background-color: transparent !important;
}


/* 既存の background ショートハンドの影響を無効化 */
/* html, body { background: none !important; } */

/* ページ全体の背景（パスは img or images の正しい方だけに統一）*/
body.home {
  /* ここ ↓ を実ファイルに合わせて どちらか1つに */
  /* background-image: url('/assets/images/body_back.png?v=20251019') !important; */
  /* background-image: url('/assets/img/body_back.png?v=20251019') !important; */
  /* background-image: url('/assets/img/body_back.png?v=20251019'), linear-gradient(to bottom right, #9fa4a3,#65aca6, #4c7869) !important; */
  background-image: url('/assets/img/body_back.png?v=20251019') !important; 
                  /* linear-gradient(to bottom right, rgba(159, 164, 163, 0.01), rgba(101, 172, 166, 0.01), rgba(76, 120, 105, 0.01)) !important; */

  /* linear-gradient(to bottom left, rgba(0, 184, 148, 0.1), rgba(0, 206, 201, 0.1), rgba(9, 132, 227, 0.1));
  linear-gradient(to bottom left, #00b894 30%, #00cec9 30%, #a7e7df 30%) !important; */

  /* ヘッダー分だけ下に余白を作り、背景が下から始まるように見せる */
  /* padding-top: 1000px; ← ヘッダーの高さに合わせて調整（例：900px〜1000px） */


  background-repeat: no-repeat !important;
  background-position: center top !important;

  /* 模様を全体に見せたい＝縮小したい場合は 900px 等の数値指定が安全 */
  background-size: 1500px auto !important;
  /* background-size: cover !important; */

  /* Safariの描画崩れ回避：fixedは使わない */
  background-attachment: scroll !important;

  /* フォールバック色 */
  /* background-color: #dff5ed !important; */
  background-color: #fff !important; 
  /* background: linear-gradient(45deg, #619382 30%, #d1ebe1 70%) !important; */
  /* background-color: rgba(255, 255, 255, 0.0) !important; 完全透明 */


}



/* 画面の余白を狭くする */
body {
  margin: 0 !important;          /* bodyの余白をなくす */
  padding: 0 !important;         /* bodyの内側の余白をなくす */
}
/* iOS/Safari 保険（fixed無効のまま） */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll !important; }
}

/* ① トップページだけ：main を透明＆幅広にする（最優先で上書き） */
body.home main{
  /* 透明化（!important で既存の白を消す） */
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;

  /* 幅を広げる（数値はお好みで） */
  width: min(1100px, 96vw) !important;   /*← 実幅*/
  max-width: none !important;
  margin: 0 auto !important;

  /* 余白を少なめに（狭めたいなら数値を下げる） */
  padding: 16px 20px !important;         /* 例: 縦16 横20 */
}

/* ② 内側コンテナも広げ＆透明の保険（テーマ側の .wrap/.container を使っている場合） */
body.home main .wrap,
body.home main .container{
  max-width: 1150px;                    /* ここも好みで調整 */
  padding-inline: 20px;                 /* 左右余白 */
  background: transparent !important;   /* 念のため */
}

.about-grid{
  position: relative;  /* ★ 絶対配置の基準にする */
  border-top: none;    /* 元の全幅ボーダーは消す */

  /* 上のプロフィールとの距離（線ごと動く） */
  padding-top: clamp(64px, 10vw, 140px);

  /* 線からボタンまでの余白 */
  padding-bottom: clamp(24px, 4vw, 40px);
}

/* 中央に短い線（グリッドに参加させない） */
.about-grid::before{
  content: "";
  position: absolute;          /* ★ これがポイント */
  top: 0;                      /* about-grid の一番上 */
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */

  width: min(800px, 80%);      /* ← 線の横幅 */
  height: 1px;
  background-color: #aab8b4;
}