/* ========== 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;
}



/* ========== PROFILE hero ========== */
:root{
  --ink: #333;
  --muted:#588971;
  --accent:#588971;
  --chip:#4b877c;
}

.profile-hero{
  padding: clamp(24px, 6vw, 56px) 0;
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;

}
.profile-hero__inner{
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr .9fr;     /* 左右比率（好みで調整） */
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;

}

/* 氏名・肩書き */
.profile-name{
  margin: 0 0 .6rem;
  line-height: 1.1;
}
.profile-name .jp{
  display:block;
  font-size: clamp(25px, 4.5vw, 40px);
  font-weight: 800;
  color: var(--ink);
}
.profile-name .en[lang="en"]{
  display:block;
  margin-top: .25rem;
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--muted);
  letter-spacing: .06em;
 font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;

}

.profile-position{
  margin: .6rem 0 .2rem;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 700;
  color: var(--ink);
}
.profile-position-en[lang="en"]{
  margin: 0 0 .8rem;
  color: var(--muted);
  font-size: clamp(10px, 1.0vw, 15px);
  line-height: 1.6;
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}

.profile-sep{
  border: 0;
  height: 2px;
  background: #5da487;
  margin: clamp(12px, 2.5vw, 20px) 0;
}

.profile-bio p{
  margin: .8rem 0;
  color: var(--ink);
  line-height: 2.0;
  font-size: clamp(15px, 1.5vw, 17px);
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;

}
.indent-list {
  padding-left: 1.5em;
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;

}
.row{
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}

/* 基本スタイル */
.row {
  margin-bottom: 1.5rem;  /* 各行の間隔 */
  display: flex;
  flex-direction: column; /* dt と dd を縦に配置 */
  padding: 1rem;
  /* background-color: #f9f9f9;  背景色を薄いグレーに */
  border-radius: 10px;  /* 角を丸める */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  軽いシャドウで浮き立たせる */
  /* border: 1px solid #8ab29f;  ボーダーを薄く */
}


dt {
  font-size: 1.1rem;  /* 見出しのフォントサイズ */
  font-weight: 700;   /* 見出しを太字に */
  color: #333;        /* 見出しの色 */
  margin-bottom: 0.5rem;  /* 見出しと内容の間隔 */
  display: flex;
  flex-direction: column;  /* 日本語を上、英語を下に配置 */
  justify-content: center;  /* 内容を上下中央に配置 */
  align-items: flex-start;  /* 左寄せ */
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}
dt .ja {
  font-size: 1.6rem;
  color: #333;     /* 日本語部分のカラー */
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
  /* font-family: 'ZenMaruGothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif !important; */
}

dt .en {
  font-size: 0.9rem;
  color: #327a63 !important;        /* 英語部分のカラー */
  font-weight: 500 !important;   /* 英語部分は通常のフォントウェイト */
  letter-spacing: 0.0em;  /* 英語に少し字間を広げる */
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}

dd {
  font-size: 1.1rem;    /* 内容のフォントサイズ */
  color: #555;        /* 内容の色 */
  line-height: 1.6;    /* 行間を広げて読みやすく */
  margin: 0;           /* dd のマージンをリセット */
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}

.indent-list {
  padding-left: 1.5em;  /* インデントを追加 */
}

.indent-list ul {
  list-style-type: none; /* デフォルトのリストの点をなくす */
  padding-left: 0;       /* リストのインデントをリセット */
}

.indent-list li {
  font-size: 1rem;    /* リストアイテムのフォントサイズ */
  margin-bottom: 0.5rem;  /* 各リストアイテム間のスペース */
  position: relative;
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}

.indent-list li::before {
  content: "•";         /* リストアイテムの前にドットを表示 */
  position: absolute;
  left: -1.5em;         /* ドットの位置を調整 */
  color: #327a63;       /* ドットの色 */
  font-size: 1.5rem;    /* ドットのサイズ */
  top: 0;
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}





/* .row :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 が付いた範囲） */
.row :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;  お好みで */
}


/* 右カラム */
.profile-photo{
  margin: 0 0 16px;
  width: 100%;
  aspect-ratio: 1/1;              /* 正方形をベースに */
  border-radius: 50% / 38% 62% 58% 42%;  /* ちょい“いびつ”な丸＝スクショ風 */
  overflow: hidden;
  background: #f3f4f6;
}
.profile-photo img{
  width: 100%; height: 100%; object-fit: cover;
}

/* 連絡先カード */
.contact-card{
  margin-top: clamp(10px, 2vw, 16px);
  padding: 16px 18px;
  border-top: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  /* border-radius: 14px; */
  background: #fff;
}
.contact-ttl{
  margin: 0 0 .4rem;
  font-size: clamp(18px, 2vw, 20px);
}
.contact-ttl span[lang="en"]{
  margin-left: .5rem;
  color: var(--muted);
  font-size: .9em;
  font-family: 'Quicksand', system-ui, -apple-system, "Segoe UI", sans-serif;
}
.contact-row{
  margin: .4rem 0;
  color: var(--ink);
  line-height: 1.8;
}
.contact-row a{ color: inherit; text-decoration: underline; }

.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;
}





/* ===== モバイル版：縦並び（写真 → 本文） ===== */
@media (max-width: 768px) {
  .profile-hero__inner {
    display: flex;              /* gridを解除してflexに */
    flex-direction: column;     /* 縦方向に並べる */
    align-items: center;        /* 全体中央寄せ */
    gap: clamp(20px, 6vw, 40px);
  }

  

  /* 本文部分を中央寄せ気味に */
  .profile-bio,
  .profile-name,
  .profile-position,
  .profile-position-en {
    text-align: center;
  }

  /* ====== 文字サイズの比率をPCと揃えて縮むように ====== */
  .profile-name .jp {
    font-size: clamp(22px, 7vw, 34px);
  }
  .profile-name .en[lang="en"] {
    font-size: clamp(12px, 3.5vw, 15px);
  }
  .profile-position {
    font-size: clamp(13px, 3.8vw, 16px);
  }
  .profile-position-en[lang="en"] {
    font-size: clamp(11px, 3.2vw, 15px);
  }
  .profile-bio p {
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.9;
  }

  /* 行要素の調整 */
  .row {
    padding: 0.8rem;
  }
  dt .ja {
    font-size: clamp(16px, 4.6vw, 18px);
  }
  dt .en {
    font-size: clamp(12px, 3.2vw, 14px);
  }
  dd {
    font-size: clamp(15px, 3.6vw, 16px);
  }
} 
/* モバイル：経歴の箇条書きだけ小さめにする */
@media (max-width: 768px){
  .row dd ul { margin: .4rem 0 0; padding-left: 1.4em; }
  .row dd li{
    font-size: clamp(15px, 3.6vw, 16px);
    line-height: 1.9;
  }
}

@media (max-width: 768px) {
  .profile-hero__inner{
    display: flex;          /* gridを解除 */
    flex-direction: column; /* 縦並び */
    gap: clamp(20px, 6vw, 40px);
    align-items: center;
  }

  /* ← 写真の列を先頭に */
  .profile-hero__side{
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .profile-photo{
    width: min(420px, 88vw);
    aspect-ratio: 4 / 3;
    margin: 0 auto 1rem;
  }
}









/* ===== ACCESS セクション ===== */
.access-section {
  position: relative;

  /* セクション間の余白 */
  margin-top: clamp(24px, 6vw, 56px);

  /* 線から中身までの余白 */
  padding-top: clamp(40px, 4vw, 60px);

  padding-bottom: clamp(24px, 6vw, 56px);
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}

/* ★ 中央に短い線 */
.access-section::before{
  content: "";
  display: block;
  width: min(800px, 80%);
  height: 1px;
  background-color: #aab8b4;
  margin: 0 auto;
}









.access-address {
  display: grid;
  grid-template-columns: 1fr auto; /* 左：住所、右：ボタン */
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  margin-bottom: clamp(16px, 3vw, 28px);
}

/* アクセスセクションのタイトル整形 */
.access-section .section-title {
  text-align: left;
  /* margin-bottom: 8rem;        タイトル全体の下余白 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;            /* ← 日本語と英語の間隔はこれで */
  margin-bottom: 8.0rem;  /* セクション見出し下の余白 */
  
}

.access-section .section-title .title-ja {
  display: block;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: 0.05em;     /* ← 日本語の字間を少し広げる */
  margin: 0 0 0 0;       /* ← 下に少し余白を追加 */
  color: #333;
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;

}

.access-section .section-title .title-en {
  display: block;
  font-size: clamp(14px, 1.2vw, 18px);
  color: #327a63;
  letter-spacing: 0.12em;     /* ← 英語の字間を少し広げる */
  margin-top: 0rem;         /* ← 日本語との間隔を調整 */
  /* font-family: 'Quicksand', sans-serif; */
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;

}
.access-address {
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}
.addr-ja {
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}
.addr-en {
  font-family:'Quicksand','ZenMaruGothic',system-ui,sans-serif !important;
}


/* キャンパスマップ ボタン */
.campus-btn{
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  min-width: 280px;
  padding: .9rem 1.4rem;
  border: 2px solid #cdbfae;
  border-radius: 9999px;
  background: #fff8f0;
  color: #3c3a37;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.campus-btn .jp{ font-weight: 700; letter-spacing: .02em; }
.campus-btn .en{ font-size: .9rem; color: #7a7f86; font-family: 'Quicksand', system-ui, sans-serif; }
.campus-btn:hover{
  background: #2a2e2c;
  color: #fff;
  border-color: #2a2e2c;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.campus-btn:hover .en{ color: #e5e7eb; }

/* Googleマップ埋め込み（アスペクト比維持でレスポンシブ） */
.map-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;       /* 好みで 4/3 や 3/2 などに */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: #f3f4f6;
}
.map-embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}



/* モバイル最適化 */
@media (max-width: 768px){
  /* アクセスセクションのタイトル整形 */
.access-section .section-title{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;            /* ← 日本語と英語の間隔はこれで */
    margin-bottom: 8.0rem;  /* セクション見出し下の余白 */
  }
  .access-section .section-title .title-en{
    margin: 0;              /* 重なりの原因を除去 */
    font-size: clamp(12px, 3.2vw, 16px);
    letter-spacing: .12em;
  }
  .access-section .section-title .title-ja{
    margin: 0;              /* 個別マージンは使わない */
    font-size: clamp(22px, 6vw, 28px);
    letter-spacing: .05em;
  }
  .access-address{
    grid-template-columns: 1fr;     /* ボタンを下へ回す */
  }
  .campus-btn{
    justify-self: start;            /* 左寄せ（中央にしたければ center） */
    min-width: 0;
    width: fit-content;
  }
}